; 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"}]; // ═══ BLOCK DATA ═══ const initBlocks=[ {id:"b0",type:"bar",icon:"mail",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. Call him today."}, {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's 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. NY probably governs but CA may void it entirely under Bus & Prof Code § 16600."}, {id:"b5",type:"feed",title:"Activity Brief",collapsed:false,sections:[ {key:"elnor",icon:"spark",label:"Elnor",items:[ {text:"Reviewed 3 Henderson depo transcripts — flagged 2 citation issues in Chen depo",time:"5h"}, {text:"Updated Quark patent landscape — 4 new filings",time:"4h"}, {text:"Scanned SEC filings — no new Henderson-relevant 10-K amendments",time:"3h"}, ]}, {key:"calendar",icon:"calendar",label:"Deadlines",items:[ {text:"Expert disclosure deadline — Folb v. City of LA",time:"47d",accent:c.error}, {text:"Henderson MSJ response due",time:"12d",accent:c.warn}, {text:"Danny Christensen engagement call",time:"Tomorrow 2pm"}, ]}, {key:"email",icon:"mail",label:"Email",items:[ {text:"Sparacino — Narayanan agreement redline",time:"Yesterday"}, {text:"Opposing counsel — discovery extension request",time:"2d",accent:c.warn}, ]}, {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 flagged",time:"2h",accent:c.green}, ]}, ]}, {id:"b6",type:"text",content:""}, ]; const feedIcons={spark:,calendar:,mail:,bell:,zap:}; // ═══ MAIN ═══ export default function WorkspaceV4_1(){ const idC=useRef(500);const nid=()=>"x"+(++idC.current); const [browserOpen,setBrowserOpen]=useState(true); const [commentsOpen,setCommentsOpen]=useState(false); const [rightTab,setRightTab]=useState("comments"); const [findBar,setFindBar]=useState(false); const [fullScreen,setFullScreen]=useState(false); const [showMarkup,setShowMarkup]=useState(true); 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({});// keyed by taskId const [inserterAt,setInserterAt]=useState(null); // index where + was clicked const [bubbleMenu,setBubbleMenu]=useState(null); const [collapsedFeeds,setCollapsedFeeds]=useState(new Set()); const [editingTitle,setEditingTitle]=useState(null); const editorRef=useRef(null); const agent=agents[0];const flash=msg=>setToast(msg); const toggleBlock=(id,field="collapsed")=>setBlocks(p=>p.map(b=>b.id===id?{...b,[field]:!b[field]}:b)); const toggleTask=(blockId,taskId)=>setBlocks(p=>p.map(b=>b.id===blockId?{...b,tasks:b.tasks.map(t=>t.id===taskId?{...t,done:!t.done}:t)}:b)); const toggleSub=(blockId,taskId,subId)=>setBlocks(p=>p.map(b=>b.id===blockId?{...b,tasks:b.tasks.map(t=>t.id===taskId?{...t,sub:t.sub.map(s=>s.id===subId?{...s,done:!s.done}:s)}:t)}:b)); const dismissAlert=id=>setBlocks(p=>p.filter(b=>b.id!==id)); const deleteBlock=id=>setBlocks(p=>p.filter(b=>b.id!==id)); const addTask=(blockId,text)=>{if(!text.trim())return;setBlocks(p=>p.map(b=>b.id===blockId?{...b,tasks:[...b.tasks,{id:nid(),text:text.trim(),done:false,sub:[]}]}:b));setNewTaskText("")}; const addSubtask=(blockId,taskId,text)=>{if(!text.trim())return;setBlocks(p=>p.map(b=>b.id===blockId?{...b,tasks:b.tasks.map(t=>t.id===taskId?{...t,sub:[...t.sub,{id:nid(),text:text.trim(),done:false}]}:t)}:b));setNewSubText(p=>({...p,[taskId]:""}))}; const addThreadReply=(blockId)=>{if(!threadReplyText.trim())return;setBlocks(p=>p.map(b=>b.id===blockId?{...b,messages:[...b.messages,{id:nid(),author:"You",color:c.accentBtn,body:threadReplyText.trim(),time:"now"}]}:b));setThreadReplyId(null);setThreadReplyText("")}; const toggleFeedSection=key=>{const s=new Set(collapsedFeeds);s.has(key)?s.delete(key):s.add(key);setCollapsedFeeds(s)}; const insertBlock=(idx,type)=>{const newId=nid();let block; if(type==="tasks")block={id:newId,type:"tasks",title:"New Task List",collapsed:false,tasks:[]}; else if(type==="feed")block={id:newId,type:"feed",title:"New Feed",collapsed:false,sections:[{key:"custom",icon:"spark",label:"Custom",items:[]}]}; 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",icon:"bell",title:"New notice — click Elnor to configure",accent:c.warn}; else block={id:newId,type:"text",content:""}; setBlocks(p=>{const n=[...p];n.splice(idx,0,block);return n});setInserterAt(null);flash(`${type} block added`)}; const handleMouseUp=useCallback(e=>{if(e.target.closest("[data-bubble]"))return;const sel=window.getSelection();if(!sel||sel.isCollapsed||!sel.toString().trim()){setBubbleMenu(null);return}const text=sel.toString().trim();if(text.length<3)return;const rect=sel.getRangeAt(0).getBoundingClientRect();const er=editorRef.current?.getBoundingClientRect();if(!er)return;setBubbleMenu({x:rect.left-er.left+rect.width/2,y:rect.top-er.top-8,text})},[]); const dismissBubble=()=>{setBubbleMenu(null);window.getSelection()?.removeAllRanges()}; // ─── Block Inserter ─── const BlockInserter=({idx})=>{ const [hover,setHover]=useState(false); return

setHover(true)} onMouseLeave={()=>{if(inserterAt!==idx)setHover(false)}}> {(hover||inserterAt===idx)&&<>

} {inserterAt===idx&&

insertBlock(idx,"text")}>Text insertBlock(idx,"tasks")}>Task List insertBlock(idx,"feed")}>Activity Feed insertBlock(idx,"thread")}>@Elnor Thread insertBlock(idx,"bar")}>Notice / Alert Bar

}

; }; // ─── Drag Handle — inline, not absolute ─── const DragHandle=()=>

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

; // ─── Module Header Bar (for collapsed state) ─── const ModuleBar=({block,icon,count,extra})=>

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"}} onMouseEnter={e=>e.currentTarget.style.borderColor=c.accentBtn+"30"} onMouseLeave={e=>e.currentTarget.style.borderColor=c.borderLight}>

{icon} {block.title} {count!==undefined&&{count}} {extra}

; // ─── Render blocks ─── const renderBlock=(block,idx)=>{ // CONFIGURABLE BAR — generic block with Ask Elnor to configure/update 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}}>

setBlocks(p=>p.map(b=>b.id===block.id?{...b,content:e.target.textContent}:b))}>{block.content||"Type here… @Elnor to ask, /slash for commands"}

; // 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

} count={`${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}

)} {/* Add subtask input */}

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"}}/>

{/* Action row */}

flash(`Opening chat with ref to task "${task.text.slice(0,30)}…"`)}>@Elnor flash(task.link?`Open "${task.link}"`:"Link note…")}>{task.link?"Open Note":"Link Note"}

}

)} {/* Add new task — real input */}

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

} count={`${totalItems} items`} extra={● live}/>

; 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);setInserterAt(null)}}>
      <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:260,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}}>Q_BROWSER_R13.jsx<br/>plugs in here<br/><span style={{fontSize:10}}>260px · collapsible</span></div></div>
      </div>}

{/* MAIN WORKSPACE */}
      <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
        {/* Toolbar (from Q_NOTES_FULL) */}
        <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/><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",position:"relative",userSelect:"text"}} onMouseUp={handleMouseUp} onMouseDown={e=>{if(bubbleMenu&&!e.target.closest("[data-bubble]"))setBubbleMenu(null)}}>

{/* 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 18</div>
              </div>
              <div style={{fontSize:10.5,color:c.textTer,marginBottom:16,display:"flex",alignItems:"center",gap:4}}>
                <I.Pin size={9} color={c.warn}/> 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>

{/* Render all blocks with inserters between them */}
              {blocks.map((block,idx)=><div key={block.id}>
                <BlockInserter idx={idx}/>
                {renderBlock(block,idx)}
              </div>)}
              <BlockInserter idx={blocks.length}/>

{/* Slash command hint */}
              <div style={{marginTop:20,padding:"8px 12px",borderRadius:R.sm,border:`1px dashed ${c.borderLight}`,backgroundColor:c.bgPanelAlt,display:"flex",alignItems:"center",gap:8}}>
                <I.Plus size={12} color={c.accentBtn}/>
                <span style={{fontSize:11,color:c.textTer}}>Hover between blocks to insert · Type <strong style={{color:c.accentBtn}}>/todo</strong> <strong style={{color:c.accentBtn}}>/feed</strong> <strong style={{color:c.accentBtn}}>/thread</strong> · Type <strong style={{color:c.accentBtn}}>@Elnor</strong> anywhere</span>
              </div>

{/* Bubble menu */}
              {bubbleMenu&&<div data-bubble="1" style={{position:"absolute",left:Math.max(10,Math.min(bubbleMenu.x-140,(editorRef.current?.clientWidth||500)-300)),top:bubbleMenu.y-44,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.12)",padding:"4px 6px",display:"flex",gap:2,zIndex:100,alignItems:"center"}}>
                <button onClick={()=>{flash("Comment…");dismissBubble()}} style={{padding:"5px 10px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:c.accentBtn,color:"#fff",fontSize:11,fontWeight:600,fontFamily:font.sans,display:"flex",alignItems:"center",gap:4}}><I.MsgCircle size={11}/>Comment</button><Sep/>
                <div style={{display:"flex",alignItems:"center",gap:2,padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,cursor:"pointer"}}><Dot color={agent.color} size={6}/><span style={{fontSize:10,fontWeight:500}}>{agent.name}</span></div>
                <button onClick={()=>{flash(`Ask ${agent.name} inline…`);dismissBubble()}} style={{padding:"5px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textSec,fontSize:11,fontFamily:font.sans,display:"flex",alignItems:"center",gap:3}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Spark size={11}/>Ask inline</button>
                {["Rewrite","Expand","Shorten"].map(a=><button key={a} onClick={()=>{flash(`${agent.name}: ${a}…`);dismissBubble()}} style={{padding:"5px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textSec,fontSize:11,fontFamily:font.sans}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>{a}</button>)}
                <button onClick={dismissBubble} style={{padding:3,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textTer,display:"flex"}}><I.X size={11}/></button>
              </div>}
            </div>
          </div>

{/* COMMENTS PANEL 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<br/>plugs in here<br/><span style={{fontSize:10}}>@mention support in specs</span></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>
  );
}