; const Toast=({msg,onDone})=>{useEffect(()=>{const t=setTimeout(onDone,2200);return()=>clearTimeout(t)},[onDone]);return

{msg}

}; const DItem=({children,onClick,active})=>; const agents=[{name:"Elnor",color:c.agentAv,letter:"E"}]; // Feed presets library const feedPresets=[ {id:"fp1",name:"System Activity",icon:"spark",desc:"Agent completions, chain results, memory updates",category:"system",cost:false}, {id:"fp2",name:"System Notices",icon:"bell",desc:"Errors, warnings, sync issues, re-auth needed",category:"system",cost:false}, {id:"fp3",name:"Gate Approvals",icon:"check",desc:"Pending chain gates and approval requests",category:"system",cost:false}, {id:"fp4",name:"Active Operations",icon:"zap",desc:"Running agents, chains, and tasks",category:"system",cost:false}, {id:"fp5",name:"Morning Summary",icon:"sun",desc:"Daily briefing from Elnor — overnight activity, priorities",category:"agent",cost:true}, {id:"fp6",name:"Email Watch",icon:"mail",desc:"Flag important emails per your criteria",category:"agent",cost:true}, {id:"fp7",name:"Deadline Tracker",icon:"calendar",desc:"Calendar deadlines from Outlook integration",category:"agent",cost:true}, ]; // Block data const initBlocks=[ {id:"b00",type:"text",content:""}, {id:"b0",type:"bar",title:"Email from Sparacino received — Narayanan agreement redline",time:"2:15 PM",accent:c.accentBtn}, {id:"b1",type:"text",content:"Quick note: need to confirm with Danny that he's available for the May trial week before filing the expert disclosure."}, {id:"b2",type:"tasks",title:"To Do",collapsed:false,tasks:[ {id:"t1",text:"Draft expert disclosure for Christensen",done:false,due:"Apr 4",link:"Expert Depo Prep",sub:[{id:"s1",text:"Pull Christensen CV",done:true},{id:"s2",text:"List opinions to be offered",done:false},{id:"s3",text:"Identify documents reviewed",done:false}]}, {id:"t2",text:"Review Henderson MSJ brief — Elnor tracked changes",done:false,due:"Mar 20",link:"Henderson Discovery Priorities"}, {id:"t3",text:"Respond to Sparacino re: Narayanan agreement",done:false,due:"Mar 19"}, {id:"t4",text:"Follow up: opposing counsel on discovery extension",done:false,due:"Mar 19"}, {id:"t5",text:"Review Quark patent analysis — new filings",done:false,link:"Quark Patent Analysis"}, {id:"t6",text:"File Folb trial exhibit list",done:true,due:"Mar 17"}, ]}, {id:"b3",type:"thread",collapsed:false,contextQuote:"opposing counsel on discovery extension",messages:[ {id:"m1",author:"You",color:c.accentBtn,body:"@Elnor draft a response declining the extension, cite the scheduling order deadline and the prejudice from further delay",time:"45m"}, {id:"m2",author:"Elnor",color:c.agentAv,body:"Draft ready. Key points: scheduling order set discovery cutoff March 28, extension would prejudice plaintiff's expert disclosure timeline, defendant has had 4 months to complete discovery. Want me to open it in a new note or paste below?",time:"40m"}, ]}, {id:"b4",type:"text",content:"Call with Sparacino re: Narayanan — need to confirm NY vs CA choice of law for the restrictive covenant."}, {id:"b5",type:"feed",title:"Activity Brief",collapsed:false,preset:"fp1",sections:[ {key:"elnor",icon:"spark",label:"Elnor",items:[ {text:"Reviewed 3 Henderson depo transcripts — flagged 2 citation issues",time:"5h"},{text:"Updated Quark patent landscape — 4 new filings",time:"4h"},{text:"Scanned SEC filings — no Henderson-relevant amendments",time:"3h"}, ]}, {key:"system",icon:"bell",label:"System",items:[ {text:"OneDrive sync paused — re-auth needed",time:"6h",accent:c.warn},{text:"DOC15 red-team review completed — 3 findings",time:"2h",accent:c.green}, ]}, ]}, {id:"b6",type:"text",content:""}, ]; const feedIcons={spark:,bell:,check:,zap:,sun:,mail:,calendar:}; export default function WorkspaceV5(){ const idC=useRef(500);const nid=()=>"x"+(++idC.current); const [browserOpen,setBrowserOpen]=useState(false); const [commentsOpen,setCommentsOpen]=useState(false); const [rightTab,setRightTab]=useState("comments"); const [showMarkup,setShowMarkup]=useState(true); const [findBar,setFindBar]=useState(false); const [fullScreen,setFullScreen]=useState(false); const [openDrop,setOpenDrop]=useState(null); const [toast,setToast]=useState(null); const [blocks,setBlocks]=useState(initBlocks); const [expandedTask,setExpandedTask]=useState(null); const [threadReplyId,setThreadReplyId]=useState(null); const [threadReplyText,setThreadReplyText]=useState(""); const [newTaskText,setNewTaskText]=useState(""); const [newSubText,setNewSubText]=useState({}); const [collapsedFeeds,setCollapsedFeeds]=useState(new Set()); const [editingTitle,setEditingTitle]=useState(null); // Module picker state const [pickerOpen,setPickerOpen]=useState(false); const [pickerStep,setPickerStep]=useState("choose"); // "choose" | "feed_presets" | "feed_custom" const [pickerTab,setPickerTab]=useState("system"); const [customName,setCustomName]=useState(""); const [customInstruction,setCustomInstruction]=useState(""); const editorRef=useRef(null);const agent=agents[0];const flash=msg=>setToast(msg); const toggleBlock=(id)=>setBlocks(p=>p.map(b=>b.id===id?{...b,collapsed:!b.collapsed}:b)); const toggleTask=(bid,tid)=>setBlocks(p=>p.map(b=>b.id===bid?{...b,tasks:b.tasks.map(t=>t.id===tid?{...t,done:!t.done}:t)}:b)); const toggleSub=(bid,tid,sid)=>setBlocks(p=>p.map(b=>b.id===bid?{...b,tasks:b.tasks.map(t=>t.id===tid?{...t,sub:t.sub.map(s=>s.id===sid?{...s,done:!s.done}:s)}:t)}:b)); const deleteBlock=id=>setBlocks(p=>p.filter(b=>b.id!==id)); const toggleFeedSection=key=>{const s=new Set(collapsedFeeds);s.has(key)?s.delete(key):s.add(key);setCollapsedFeeds(s)}; const addTask=(bid,text)=>{if(!text.trim())return;setBlocks(p=>p.map(b=>b.id===bid?{...b,tasks:[...b.tasks,{id:nid(),text:text.trim(),done:false,sub:[]}]}:b));setNewTaskText("")}; const addSubtask=(bid,tid,text)=>{if(!text.trim())return;setBlocks(p=>p.map(b=>b.id===bid?{...b,tasks:b.tasks.map(t=>t.id===tid?{...t,sub:[...t.sub,{id:nid(),text:text.trim(),done:false}]}:t)}:b));setNewSubText(p=>({...p,[tid]:""}))}; const addThreadReply=(bid)=>{if(!threadReplyText.trim())return;setBlocks(p=>p.map(b=>b.id===bid?{...b,messages:[...b.messages,{id:nid(),author:"You",color:c.accentBtn,body:threadReplyText.trim(),time:"now"}]}:b));setThreadReplyId(null);setThreadReplyText("")}; // Insert block at end (toolbar button inserts at cursor position in real impl) const insertBlock=(type,preset)=>{ const newId=nid();let block; if(type==="tasks")block={id:newId,type:"tasks",title:"New Task List",collapsed:false,tasks:[]}; else if(type==="feed"){ const p=preset||{name:"Custom Feed",sections:[]}; block={id:newId,type:"feed",title:p.name,collapsed:false,preset:p.id,sections: p.id==="fp1"?[{key:"activity",icon:"spark",label:"Activity",items:[{text:"Waiting for events…",time:"now"}]}]: p.id==="fp2"?[{key:"notices",icon:"bell",label:"Notices",items:[{text:"No active notices",time:"now"}]}]: p.id==="fp5"?[{key:"morning",icon:"sun",label:"Summary",items:[{text:"Generating morning brief…",time:"now"}]}]: [{key:"custom",icon:"spark",label:p.name,items:[{text:"Configure this feed via the gear icon or @Elnor",time:"now"}]}] }; } else if(type==="thread")block={id:newId,type:"thread",collapsed:false,contextQuote:"",messages:[{id:nid(),author:"You",color:c.accentBtn,body:"@Elnor ",time:"now"}]}; else if(type==="bar")block={id:newId,type:"bar",title:"New notice — click Elnor to configure",accent:c.warn}; else return; setBlocks(p=>{ // Simulate inserting at cursor — in real Tiptap, inserts at cursor position // In mockup, insert before the last text block (simulates typing position) const lastTextIdx=p.map((b,i)=>b.type==="text"?i:-1).filter(i=>i>=0).pop(); const pos=lastTextIdx!==undefined?lastTextIdx:p.length; return [...p.slice(0,pos),block,...p.slice(pos)]; }); setPickerOpen(false);setPickerStep("choose"); flash(`${type==="feed"?(preset?.name||"Feed"):type} block added`); }; const DragHandle=()=>

e.currentTarget.style.opacity=0.55} onMouseLeave={e=>e.currentTarget.style.opacity=0.18}>

; const renderBlock=(block)=>{ // BAR if(block.type==="bar") return

{block.title} {block.time&&{block.time}}

; // TEXT if(block.type==="text") return

{const d=e.currentTarget.querySelector("[data-del]");if(d)d.style.opacity=0.4}} onMouseLeave={e=>{const d=e.currentTarget.querySelector("[data-del]");if(d)d.style.opacity=0}}>

{block.content||"Type here… @Elnor to ask, /todo /feed /ask for modules"}

; // TASKS if(block.type==="tasks"){ const active=block.tasks.filter(t=>!t.done);const done=block.tasks.filter(t=>t.done); if(block.collapsed) return

toggleBlock(block.id)} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt,cursor:"pointer"}}>{block.title}{active.length} open

; return

toggleBlock(block.id)} style={{display:"flex",alignItems:"center",gap:6,padding:"7px 10px",backgroundColor:c.bgPanelAlt,cursor:"pointer",borderBottom:`1px solid ${c.borderLight}`}}> {editingTitle===block.id?{setBlocks(p=>p.map(b=>b.id===block.id?{...b,title:e.target.value||block.title}:b));setEditingTitle(null)}} onKeyDown={e=>{if(e.key==="Enter"){setBlocks(p=>p.map(b=>b.id===block.id?{...b,title:e.target.value||block.title}:b));setEditingTitle(null)}if(e.key==="Escape")setEditingTitle(null)}} onClick={e=>e.stopPropagation()} style={{flex:1,fontSize:12.5,fontWeight:700,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"1px 6px",outline:"none",fontFamily:font.sans,backgroundColor:c.bgCard}}/> :{e.stopPropagation();setEditingTitle(block.id)}}>{block.title}} {active.length} open

{active.map(task=>

setExpandedTask(expandedTask===task.id?null:task.id)}> toggleTask(block.id,task.id)} onClick={e=>e.stopPropagation()} style={{width:15,height:15,accentColor:c.accentBtn,flexShrink:0}}/> {task.text}

{task.due&&{task.due}} {task.link&&{e.stopPropagation();flash(`Open "${task.link}"`)}}>Note} {task.sub?.length>0&&{task.sub.filter(s=>s.done).length}/{task.sub.length}}

{expandedTask===task.id&&

{task.sub?.map(s=>

toggleSub(block.id,task.id,s.id)} style={{width:13,height:13,accentColor:c.accentBtn}}/> {s.text}

)}

setNewSubText(p=>({...p,[task.id]:e.target.value}))} placeholder="Add subtask…" onKeyDown={e=>{if(e.key==="Enter")addSubtask(block.id,task.id,newSubText[task.id]||"")}} style={{flex:1,border:"none",borderBottom:`1px solid ${c.borderLight}`,outline:"none",fontSize:12,fontFamily:font.sans,color:c.textPri,backgroundColor:"transparent",padding:"2px 0"}}/>

flash("@Elnor…")}>@Elnor flash(task.link?`Open "${task.link}"`:"Link note…")}>{task.link?"Open Note":"Link Note"}

}

)}

setNewTaskText(e.target.value)} placeholder="Add task…" onKeyDown={e=>{if(e.key==="Enter")addTask(block.id,newTaskText)}} style={{flex:1,border:"none",borderBottom:`1px solid ${c.borderLight}`,outline:"none",fontSize:13.5,fontFamily:font.sans,color:c.textPri,backgroundColor:"transparent",padding:"2px 0"}}/>

{done.length>0&&

Done ({done.length})

{done.map(t=>

toggleTask(block.id,t.id)} style={{width:14,height:14,accentColor:c.accentBtn}}/>{t.text}

)}

}

; } // FEED if(block.type==="feed"){ const totalItems=block.sections.reduce((a,s)=>a+s.items.length,0); if(block.collapsed) return

; return

{block.sections.map(sec=>

toggleFeedSection(sec.key)} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 4px",cursor:"pointer"}}>

{feedIcons[sec.icon]||}{sec.label}({sec.items.length})

{!collapsedFeeds.has(sec.key)&&sec.items.map((item,i)=>

▹ {item.accent&&} {item.text} {item.time}

)}

; } // THREAD if(block.type==="thread"){ if(block.collapsed) return

; return

toggleBlock(block.id)} style={{padding:"5px 12px",display:"flex",alignItems:"center",gap:6,cursor:"pointer",backgroundColor:c.accentBtn+"06",borderBottom:`1px solid ${c.accentBtn}15`}}> Thread · {block.messages.length} {block.contextQuote&&re: "{block.contextQuote}"}

{block.messages.map((msg,i)=>

{msg.author}{msg.time}{msg.author==="You"&&<>editdelete}

{msg.body}

)} {threadReplyId===block.id?

setThreadReplyText(e.target.value)} placeholder="Reply… @Elnor" autoFocus onKeyDown={e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();addThreadReply(block.id)}}} style={{width:"100%",padding:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:36,resize:"vertical"}}/>
          <div style={{display:"flex",gap:4,marginTop:4}}><Btn small primary onClick={()=>addThreadReply(block.id)} disabled={!threadReplyText.trim()}>Send</Btn><Btn small ghost onClick={()=>{setThreadReplyId(null);setThreadReplyText("")}}>Cancel</Btn></div>
        </div>:<div style={{padding:"5px 14px",borderTop:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}><div onClick={()=>{setThreadReplyId(block.id);setThreadReplyText("")}} style={{display:"flex",alignItems:"center",gap:5,padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"text"}}><I.Plus size={10} color={c.textTer}/><span style={{fontSize:11,color:c.textTer}}>Reply… @Elnor</span></div></div>}
      </div>;
    }
    return null;
  };

return (
    <div style={{display:"flex",width:"100%",height:"100vh",fontFamily:font.sans,color:c.textPri,backgroundColor:c.bgApp}} onClick={()=>{setOpenDrop(null);if(pickerOpen&&pickerStep==="choose")setPickerOpen(false)}}>
      <style>{`*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:transparent;border-radius:2px}*:hover::-webkit-scrollbar-thumb{background:#d1d5db}::selection{background:${c.accentBtn}22}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}`}</style>
      {toast&&<Toast msg={toast} onDone={()=>setToast(null)}/>}

{/* SIDEBAR RAIL */}
      <div style={{width:44,flexShrink:0,backgroundColor:c.bgSidebar,borderRight:`1px solid ${c.borderDark}`,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:10,gap:6}}>
        <div style={{width:26,height:26,borderRadius:R.sm,backgroundColor:c.accentBtn,color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:700,marginBottom:6}}>Q</div>
        <button onClick={()=>setBrowserOpen(!browserOpen)} title="Browser (⌘B)" style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:browserOpen?"#ffffff18":"transparent",color:browserOpen?"#fff":"#777",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Search size={15}/></button>
        <button onClick={()=>setCommentsOpen(!commentsOpen)} title="Comments" style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:commentsOpen?"#ffffff18":"transparent",color:commentsOpen?"#fff":"#777",display:"flex",alignItems:"center",justifyContent:"center"}}><I.MsgCircle size={15}/></button>
      </div>

{/* BROWSER placeholder */}
      {browserOpen&&<div style={{width:270,flexShrink:0,backgroundColor:c.bgPanel,borderRight:`1px solid ${c.border}`,display:"flex",flexDirection:"column"}}><div style={{padding:"10px 12px",borderBottom:`1px solid ${c.borderLight}`,display:"flex",alignItems:"center",justifyContent:"space-between"}}><span style={{fontSize:12,fontWeight:650}}>Browser</span><button onClick={()=>setBrowserOpen(false)} style={{border:"none",background:"none",cursor:"pointer",display:"flex",color:c.textTer}}><I.X size={12}/></button></div><div style={{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:20}}><div style={{textAlign:"center",fontSize:11,color:c.textTer,fontStyle:"italic",lineHeight:1.6}}>Browser with Notes scope<br/>from V4.5</div></div></div>}

{/* MAIN */}
      <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
        {/* TOOLBAR */}
        <div style={{display:"flex",alignItems:"center",gap:3,padding:"4px 10px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexWrap:"wrap"}}>
          <select style={{padding:"2px 4px",borderRadius:3,border:`1px solid ${c.borderLight}`,fontSize:10.5,fontFamily:font.sans,color:c.textSec,backgroundColor:"transparent",height:24}}><option>Paragraph</option><option>H1</option><option>H2</option></select>
          <TBtn icon={<span style={{fontWeight:700,fontSize:12}}>B</span>}/><TBtn icon={<span style={{fontStyle:"italic",fontSize:12}}>I</span>}/><TBtn icon={<span style={{textDecoration:"underline",fontSize:12}}>U</span>}/>
          <Sep/><TBtn icon={<I.Undo size={13}/>}/><TBtn icon={<I.Redo size={13}/>}/>
          <Sep/><TBtn icon={<I.Copy size={13}/>} title="Copy" onClick={()=>flash("Copied")}/>
          <div style={{position:"relative"}}><TBtn icon={<I.Save size={13}/>} label="Save As…" dropdown onClick={e=>{e.stopPropagation();setOpenDrop(openDrop==="save"?null:"save")}}/>
            {openDrop==="save"&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:28,left:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.12)",zIndex:999,minWidth:180,padding:4}}>
              <DItem onClick={()=>{flash("Export MD");setOpenDrop(null)}}>Export as Markdown</DItem>
              <DItem onClick={()=>{flash("Export DOCX");setOpenDrop(null)}}>Export as DOCX</DItem>
              <DItem onClick={()=>{flash("Export PDF");setOpenDrop(null)}}>Export as PDF</DItem>
              <div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
              <DItem onClick={()=>{flash("Save as Prompt");setOpenDrop(null)}}>Save as Prompt</DItem>
            </div>}</div>
          <TBtn icon={<I.Link size={13}/>} label="Ref" onClick={()=>flash("Ref copied")}/>
          <Sep/>
          {/* ═══ ADD MODULE BUTTON ═══ */}
          <div style={{position:"relative"}}>
            <TBtn icon={<I.Grid size={13}/>} label="+Module" dropdown active={pickerOpen} onClick={e=>{e.stopPropagation();setPickerOpen(!pickerOpen);setPickerStep("choose")}}/>
            {pickerOpen&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:30,left:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 8px 28px rgba(0,0,0,0.15)",zIndex:999,width:pickerStep==="choose"?220:380,padding:0,overflow:"hidden"}}>
              {/* STEP 1: Choose block type */}
              {pickerStep==="choose"&&<div style={{padding:6}}>
                <div style={{padding:"6px 10px",fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".05em"}}>Insert Module</div>
                <DItem onClick={()=>{insertBlock("tasks");}}><I.List size={14} color={c.warn}/><div><div style={{fontWeight:600}}>Task List</div><div style={{fontSize:9.5,color:c.textTer}}>Checkboxes, subtasks, due dates</div></div></DItem>
                <DItem onClick={()=>{setPickerStep("feed_presets");setPickerTab("system")}}><I.Spark size={14} color={c.agentAv}/><div><div style={{fontWeight:600}}>Activity Feed</div><div style={{fontSize:9.5,color:c.textTer}}>Live updates, agent summaries</div></div></DItem>
                <DItem onClick={()=>insertBlock("thread")}><I.MsgCircle size={14} color={c.accentBtn}/><div><div style={{fontWeight:600}}>@Elnor Thread</div><div style={{fontSize:9.5,color:c.textTer}}>Inline conversation</div></div></DItem>
                <DItem onClick={()=>insertBlock("bar")}><I.Bell size={14} color={c.warn}/><div><div style={{fontWeight:600}}>Notice Bar</div><div style={{fontSize:9.5,color:c.textTer}}>Alert, reminder, status</div></div></DItem>
              </div>}

{/* STEP 2: Feed preset picker */}
              {pickerStep==="feed_presets"&&<div>
                <div style={{display:"flex",alignItems:"center",padding:"8px 10px",borderBottom:`1px solid ${c.borderLight}`,gap:6}}>
                  <button onClick={()=>setPickerStep("choose")} style={{border:"none",background:"none",cursor:"pointer",display:"flex",color:c.textTer,padding:0}}><I.ChevR size={12} style={{transform:"rotate(180deg)"}}/></button>
                  <span style={{fontSize:12,fontWeight:650,flex:1}}>Choose Feed Preset</span>
                </div>
                {/* Tabs */}
                <div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`}}>
                  {[{id:"system",label:"System"},{id:"agent",label:"Agent"},{id:"custom",label:"My Presets"}].map(tab=>(
                    <button key={tab.id} onClick={()=>setPickerTab(tab.id)} style={{flex:1,padding:"8px 4px",border:"none",cursor:"pointer",fontFamily:font.sans,fontSize:10.5,fontWeight:pickerTab===tab.id?650:400,color:pickerTab===tab.id?c.accentBtn:c.textTer,backgroundColor:"transparent",borderBottom:pickerTab===tab.id?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center"}}>{tab.label}</button>
                    </button>
                  ))}
                </div>
                {/* Preset cards */}
                <div style={{padding:6,maxHeight:260,overflowY:"auto"}}>
                  {feedPresets.filter(p=>pickerTab==="custom"?p.category==="custom":p.category===pickerTab).map(preset=>(
                    <div key={preset.id} onClick={()=>insertBlock("feed",preset)} style={{display:"flex",alignItems:"center",gap:10,padding:"8px 10px",borderRadius:R.sm,cursor:"pointer",marginBottom:2}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>
                      <div style={{width:32,height:32,borderRadius:R.sm,backgroundColor:c.accentBtn+"10",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
                        {feedIcons[preset.icon]||<I.Spark size={14}/>}
                      </div>
                      <div style={{flex:1,minWidth:0}}>
                        <div style={{fontSize:12,fontWeight:600,color:c.textPri}}>{preset.name}</div>
                        <div style={{fontSize:10,color:c.textTer,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{preset.desc}</div>
                      </div>
                    </div>
                  ))}
                  {pickerTab==="custom"&&<div style={{padding:"12px 10px",textAlign:"center",color:c.textTer,fontSize:11,fontStyle:"italic"}}>No custom presets yet.<br/>Configure a feed and click "Save as Preset"</div>}
                </div>
                {/* Create custom */}
                <div style={{borderTop:`1px solid ${c.borderLight}`,padding:6}}>
                  <DItem onClick={()=>setPickerStep("feed_custom")}><I.Plus size={12} color={c.accentBtn}/><span style={{color:c.accentBtn,fontWeight:600}}>Create Custom Feed…</span></DItem>
                </div>
              </div>}

{/* STEP 3: Custom feed configuration */}
              {pickerStep==="feed_custom"&&<div>
                <div style={{display:"flex",alignItems:"center",padding:"8px 10px",borderBottom:`1px solid ${c.borderLight}`,gap:6}}>
                  <button onClick={()=>setPickerStep("feed_presets")} style={{border:"none",background:"none",cursor:"pointer",display:"flex",color:c.textTer,padding:0}}><I.ChevR size={12} style={{transform:"rotate(180deg)"}}/></button>
                  <span style={{fontSize:12,fontWeight:650,flex:1}}>Create Custom Feed</span>
                </div>
                <div style={{padding:"10px 12px"}}>
                  <div style={{marginBottom:10}}>
                    <div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Feed name</div>
                    <input value={customName} onChange={e=>setCustomName(e.target.value)} placeholder="e.g., Henderson Email Watch" style={{width:"100%",padding:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none"}}/>
                  </div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Source</div>
                    <div style={{display:"flex",gap:4}}>
                      <button style={{flex:1,padding:"8px 6px",borderRadius:R.sm,border:`2px solid ${c.green}40`,backgroundColor:c.green+"08",cursor:"pointer",fontFamily:font.sans,textAlign:"left"}}>
                        <div style={{fontSize:11,fontWeight:600,color:c.green}}>System Events</div>
                        <div style={{fontSize:9,color:c.textTer}}>Real-time event subscriptions</div>
                      </button>
                      <button style={{flex:1,padding:"8px 6px",borderRadius:R.sm,border:`2px solid ${c.accentBtn}40`,backgroundColor:c.accentBtn+"08",cursor:"pointer",fontFamily:font.sans,textAlign:"left"}}>
                        <div style={{fontSize:11,fontWeight:600,color:c.accentBtn}}>Agent Task</div>
                        <div style={{fontSize:9,color:c.textTer}}>Runs on a schedule</div>
                      </button>
                    </div>
                  </div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Agent</div>
                    <div style={{display:"flex",alignItems:"center",gap:6,padding:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"pointer"}}>
                      <Av letter="E" color={c.agentAv} size={18}/><span style={{flex:1,fontSize:12,fontWeight:500}}>Elnor</span><I.ChevD size={10} color={c.textTer}/>
                    </div>
                    <div style={{fontSize:9,color:c.textTer,marginTop:2}}>Choose which agent runs this feed</div>
                  </div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Instruction</div>
                    <textarea value={customInstruction} onChange={e=>setCustomInstruction(e.target.value)} placeholder="e.g., Monitor Outlook for emails from opposing counsel. Summarize each in one line." style={{width:"100%",padding:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:55,resize:"vertical"}}/>
                  </div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Update every</div>
                    <div style={{display:"flex",gap:4,alignItems:"center"}}>
                      <input type="number" defaultValue={1} min={1} style={{width:50,padding:"4px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11,fontFamily:font.sans,outline:"none",textAlign:"center"}}/>
                      <div style={{display:"flex",gap:2}}>
                        {["minutes","hours","days"].map((u,i)=><button key={u} style={{padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${i===1?c.accentBtn+"50":c.borderLight}`,backgroundColor:i===1?c.accentBtn+"08":"transparent",fontSize:10,fontFamily:font.sans,color:i===1?c.accentBtn:c.textTer,cursor:"pointer",fontWeight:i===1?600:400}}>{u}</button>)}
                      </div>
                      <span style={{fontSize:10,color:c.textTer,margin:"0 4px"}}>or</span>
                      <button style={{padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:"transparent",fontSize:10,fontFamily:font.sans,color:c.textTer,cursor:"pointer"}}>manual only</button>
                    </div>
                  </div>
                  <div style={{display:"flex",gap:6,marginTop:12}}>
                    <Btn primary onClick={()=>{insertBlock("feed",{id:nid(),name:customName||"Custom Feed"});setCustomName("");setCustomInstruction("")}} style={{flex:1,justifyContent:"center"}}>Create Feed</Btn>
                    <Btn ghost onClick={()=>{setPickerStep("feed_presets")}}>Cancel</Btn>
                  </div>
                </div>
              </div>}
            </div>}
          </div>
          <Sep/>
          <TBtn icon={<I.Search size={13}/>} active={findBar} onClick={()=>setFindBar(!findBar)}/>
          <TBtn icon={<I.Maximize size={13}/>} active={fullScreen} onClick={()=>setFullScreen(!fullScreen)}/>
          <Sep/><TBtn icon={<I.MsgCircle size={13}/>} label="2" active={commentsOpen&&rightTab==="comments"} onClick={()=>{if(commentsOpen&&rightTab==="comments")setCommentsOpen(false);else{setCommentsOpen(true);setRightTab("comments")}}}/>
          <Sep/><TBtn icon={<I.Eye size={13}/>} label={showMarkup?"Markup":"Clean"} active={showMarkup} onClick={()=>setShowMarkup(!showMarkup)}/>
          <TBtn icon={<I.Edit size={13}/>} label="0 ▾"/>
          <div style={{flex:1}}/><span style={{fontSize:10,color:c.green,fontWeight:500}}>Saved just now</span>
          <Sep/><button onClick={()=>{if(commentsOpen&&rightTab==="send")setCommentsOpen(false);else{setCommentsOpen(true);setRightTab("send")}}} style={{padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,backgroundColor:(commentsOpen&&rightTab==="send")?c.accentBtn:c.accentBtn+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:(commentsOpen&&rightTab==="send")?"#fff":c.accentBtn,fontFamily:font.sans,fontSize:10.5,fontWeight:600,height:26}}><I.Spark size={12}/>Send to Agent</button>
        </div>
        {findBar&&<div style={{display:"flex",alignItems:"center",gap:6,padding:"5px 12px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}><I.Search size={12} color={c.textTer}/><input placeholder="Find…" autoFocus style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:12,fontFamily:font.sans,outline:"none",maxWidth:250}}/><span style={{fontSize:10,color:c.textTer}}>0/0</span><button onClick={()=>setFindBar(false)} style={{padding:2,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",color:c.textTer}}><I.X size={12}/></button></div>}

{/* CONTENT */}
        <div style={{flex:1,display:"flex",overflow:"hidden"}}>
          <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden",minWidth:0}}>
            <div ref={editorRef} style={{flex:1,overflowY:"auto",padding:"16px 32px 60px",userSelect:"text"}}>
              {/* Title */}
              <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:3}}>
                <I.Sun size={20} color={c.warn}/>
                <div style={{fontSize:22,fontWeight:700}} contentEditable suppressContentEditableWarning>Today — Wednesday, March 19</div>
              </div>
              <div style={{fontSize:10.5,color:c.textTer,marginBottom:8,display:"flex",alignItems:"center",gap:4}}>
                Pinned · Auto-updating · Configurable modules
                <button onClick={()=>flash("Configure workspace template…")} style={{border:`1px solid ${c.borderLight}`,borderRadius:3,backgroundColor:"transparent",cursor:"pointer",padding:"1px 6px",fontSize:9,color:c.textTer,fontFamily:font.sans,display:"flex",alignItems:"center",gap:2,marginLeft:4}}><I.Settings size={9}/>Configure</button>
              </div>

{/* Blocks with natural spacing */}
              {blocks.map(block=>renderBlock(block))}

{/* Slash command hint */}
              <div style={{marginTop:30,padding:"8px 12px",borderRadius:R.sm,border:`1px dashed ${c.borderLight}`,backgroundColor:c.bgPanelAlt,display:"flex",alignItems:"center",gap:8}}>
                <I.Grid size={12} color={c.accentBtn}/>
                <span style={{fontSize:11,color:c.textTer}}>Use <strong style={{color:c.accentBtn}}>+Module</strong> in toolbar · Type <strong style={{color:c.accentBtn}}>/todo</strong> <strong style={{color:c.accentBtn}}>/feed</strong> <strong style={{color:c.accentBtn}}>/ask</strong> anywhere · Type <strong style={{color:c.accentBtn}}>@Elnor</strong> on any line</span>
              </div>
            </div>
          </div>

{/* COMMENTS placeholder */}
          {commentsOpen&&!fullScreen&&<div style={{width:rightTab==="send"?290:260,flexShrink:0,borderLeft:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanelAlt}}>
            <div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`,flexShrink:0}}>
              <button onClick={()=>setRightTab("comments")} style={{flex:1,padding:"7px 0",border:"none",cursor:"pointer",backgroundColor:rightTab==="comments"?c.bgPanelAlt:c.bgInput,color:rightTab==="comments"?c.accentBtn:c.textTer,fontSize:10.5,fontWeight:rightTab==="comments"?650:450,fontFamily:font.sans,borderBottom:rightTab==="comments"?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}><I.MsgCircle size={10}/>Comments</button>
              <button onClick={()=>setRightTab("send")} style={{flex:1,padding:"7px 0",border:"none",cursor:"pointer",backgroundColor:rightTab==="send"?c.bgPanel:c.bgInput,color:rightTab==="send"?c.accentBtn:c.textTer,fontSize:10.5,fontWeight:rightTab==="send"?650:450,fontFamily:font.sans,borderBottom:rightTab==="send"?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}><I.Spark size={10}/>Send to Agent</button>
              <button onClick={()=>setCommentsOpen(false)} style={{width:26,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}}><I.X size={11}/></button>
            </div>
            <div style={{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:16}}><div style={{textAlign:"center",fontSize:11,color:c.textTer,fontStyle:"italic",lineHeight:1.6}}>Comments + Send to Agent<br/>from Q_NOTES_FULL.jsx</div></div>
          </div>}
        </div>
      </div>

{/* CHAT INDICATOR */}
      <div style={{width:40,borderLeft:`1px solid ${c.border}`,backgroundColor:c.bgPanel,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:12,gap:8,flexShrink:0}}>
        <div style={{writingMode:"vertical-rl",fontSize:10,fontWeight:600,color:c.accentBtn,letterSpacing:".05em",cursor:"pointer",padding:"8px 4px"}}>CHAT →</div>
        <Dot color={c.green} size={6}/><div style={{fontSize:8,color:c.textTer,writingMode:"vertical-rl"}}>Henderson</div>
      </div>
    </div>
  );
}