Q_UNIFIED_WORKSPACE_V3.jsx
Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Archived Mockups/Q_UNIFIED_WORKSPACE_V3.jsx
import { useState, useRef, useEffect, useMemo, useCallback } from "react";
const font={sans:"'Söhne','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif"};
const R={sm:"6px",md:"10px",full:"9999px"};
const c={bgApp:"#F8F8F6",bgPanel:"#FFFFFF",bgPanelAlt:"#F9FAFB",bgCard:"#FFFFFF",bgInput:"#EFF1F3",bgSidebar:"#131820",textPri:"#1A1D21",textSec:"#5E6570",textTer:"#8B919A",accentBtn:"#31588c",warn:"#D97706",error:"#B04040",border:"#E0E2E5",borderLight:"#ECEEF0",green:"#2E8B57",neutral:"#6B7280",agentAv:"#a1a7aa",borderDark:"#263040",purple:"#7C3AED",incBg:"#2A1F3D",incBorder:"#3d2e5c",incText:"#a78bfa"};
const Ic=({d,size=18,color,sw=1.75})=><svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color||"currentColor"} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d={d}/></svg>;
const I={Search:p=><Ic {...p} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>,Plus:p=><Ic {...p} d="M12 5v14 M5 12h14"/>,ChevR:p=><Ic {...p} d="M9 18l6-6-6-6"/>,ChevD:p=><Ic {...p} d="M6 9l6 6 6-6"/>,Pin:p=><Ic {...p} d="M12 17v5 M9 2l.5 5L7 10l1.5 3h7L17 10l-2.5-3L15 2"/>,Folder:p=><Ic {...p} d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>,File:p=><Ic {...p} d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z M14 2v6h6"/>,X:p=><Ic {...p} d="M18 6L6 18 M6 6l12 12"/>,Check:p=><Ic {...p} d="M20 6L9 17l-5-5"/>,Save:p=><Ic {...p} d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z M17 21v-8H7v8 M7 3v5h8"/>,Copy:p=><Ic {...p} d="M20 9h-9a2 2 0 00-2 2v9a2 2 0 002 2h9a2 2 0 002-2v-9a2 2 0 00-2-2z M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>,Link:p=><Ic {...p} d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71 M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>,Maximize:p=><Ic {...p} d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/>,Spark:p=><Ic {...p} d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z M12 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z"/>,MsgCircle:p=><Ic {...p} d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/>,Undo:p=><Ic {...p} d="M3 7v6h6 M21 17a9 9 0 00-9-9 9 9 0 00-6.69 3L3 13"/>,Redo:p=><Ic {...p} d="M21 7v6h-6 M3 17a9 9 0 019-9 9 9 0 016.69 3L21 13"/>,Eye:p=><Ic {...p} d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 9a3 3 0 100 6 3 3 0 000-6z"/>,Edit:p=><Ic {...p} d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7 M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>,FileText:p=><Ic {...p} d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z M14 2v6h6 M16 13H8 M16 17H8"/>,ExtLink:p=><Ic {...p} d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6 M15 3h6v6 M10 14L21 3"/>,Printer:p=><Ic {...p} d="M6 9V2h12v7 M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2 M6 14h12v8H6z"/>,Clock:p=><Ic {...p} d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M12 6v6l4 2"/>,ArrowL:p=><Ic {...p} d="M19 12H5 M12 19l-7-7 7-7"/>,ArrowR:p=><Ic {...p} d="M5 12h14 M12 5l7 7-7 7"/>,Refresh:p=><Ic {...p} d="M23 4v6h-6 M1 20v-6h6 M3.51 9a9 9 0 0114.85-3.36L23 10 M1 14l4.64 4.36A9 9 0 0020.49 15"/>,Star:p=><Ic {...p} d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>,Lock:p=><Ic {...p} d="M19 11H5a2 2 0 00-2 2v7a2 2 0 002 2h14a2 2 0 002-2v-7a2 2 0 00-2-2z M7 11V7a5 5 0 0110 0v4"/>,Book:p=><Ic {...p} d="M4 19.5A2.5 2.5 0 016.5 17H20 M4 19.5A2.5 2.5 0 014 17V5a2 2 0 012-2h14v14"/>,Scissors:p=><Ic {...p} d="M20 4L8.12 15.88 M14.47 14.48L20 20 M8.12 8.12L12 12 M6 3a3 3 0 100 6 3 3 0 000-6z M6 15a3 3 0 100 6 3 3 0 000-6z"/>,Globe:p=><Ic {...p} d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M2 12h20"/>,Home:p=><Ic {...p} d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>,Settings:p=><Ic {...p} d="M12 15a3 3 0 100-6 3 3 0 000 6z M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9"/>,Inbox:p=><Ic {...p} d="M22 12h-6l-2 3H10l-2-3H2 M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z"/>,Grid:p=><Ic {...p} d="M3 3h7v7H3z M14 3h7v7h-7z M3 14h7v7H3z M14 14h7v7h-7z"/>,Download:p=><Ic {...p} d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4 M7 10l5 5 5-5 M12 15V3"/>,List:p=><Ic {...p} d="M8 6h13 M8 12h13 M8 18h13 M3 6h.01 M3 12h.01 M3 18h.01"/>,Bell:p=><Ic {...p} d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 01-3.46 0"/>,Zap:p=><Ic {...p} d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>,Sun:p=><Ic {...p} d="M12 17a5 5 0 100-10 5 5 0 000 10z M12 1v2 M12 21v2 M4.22 4.22l1.42 1.42 M18.36 18.36l1.42 1.42 M1 12h2 M21 12h2"/>,Mail:p=><Ic {...p} d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6l-10 7L2 6"/>,Calendar:p=><Ic {...p} d="M19 4H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2z M16 2v4 M8 2v4 M3 10h18"/>,Mask:p=><Ic {...p} d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M9 9h.01 M15 9h.01 M8 14s1.5 2 4 2 4-2 4-2"/>,Trash:p=><Ic {...p} d="M3 6h18 M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>};
const Dot=({color,size=8})=><span style={{display:"inline-flex",width:size,height:size,flexShrink:0}}><span style={{display:"block",width:size,height:size,borderRadius:"50%",backgroundColor:color}}/></span>;
const Toast=({msg,onDone})=>{useEffect(()=>{const t=setTimeout(onDone,2200);return()=>clearTimeout(t)},[onDone]);return <div style={{position:"fixed",bottom:24,left:"50%",transform:"translateX(-50%)",backgroundColor:c.textPri,color:"#fff",padding:"8px 18px",borderRadius:R.md,fontSize:12,fontWeight:500,fontFamily:font.sans,zIndex:9999,boxShadow:"0 4px 16px rgba(0,0,0,0.2)"}}>{msg}</div>};
const TBtn=({icon,title,active,onClick,label,dropdown})=><button onClick={onClick} title={title} style={{padding:label?"3px 8px":"3px 6px",borderRadius:R.sm,border:`1px solid ${active?c.accentBtn+"40":c.borderLight}`,backgroundColor:active?c.accentBtn+"08":"transparent",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:active?c.accentBtn:c.textSec,fontFamily:font.sans,fontSize:10.5,fontWeight:active?600:450,height:26}} onMouseEnter={e=>{if(!active)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor=active?c.accentBtn+"08":"transparent"}}>{icon}{label&&<span>{label}</span>}{dropdown&&<I.ChevD size={8}/>}</button>;
const Sep=()=><div style={{width:1,height:18,backgroundColor:c.borderLight,margin:"0 3px",flexShrink:0}}/>;
const Btn=({children,primary,ghost,small,onClick,disabled,style:s})=><button onClick={disabled?undefined:onClick} style={{padding:small?"2px 8px":"5px 14px",borderRadius:R.sm,border:primary?"none":`1px solid ${c.border}`,backgroundColor:primary?(disabled?c.accentBtn+"60":c.accentBtn):"transparent",color:primary?"#fff":c.textSec,fontSize:small?11:12.5,fontWeight:primary?550:450,cursor:disabled?"not-allowed":"pointer",fontFamily:font.sans,display:"flex",alignItems:"center",gap:5,height:small?22:28,opacity:disabled?.5:1,...s}}>{children}</button>;
const Av=({letter,color,size=20})=><div style={{width:size,height:size,borderRadius:R.sm,backgroundColor:color||c.accentBtn,color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:size*.42,fontWeight:700,flexShrink:0}}>{letter}</div>;
const DItem=({children,onClick,active,disabled})=><button onClick={disabled?undefined:onClick} style={{display:"flex",alignItems:"center",gap:6,width:"100%",padding:"6px 10px",border:"none",cursor:disabled?"default":"pointer",backgroundColor:active?c.accentBtn+"08":"transparent",fontSize:11.5,color:disabled?c.textTer:c.textPri,textAlign:"left",borderRadius:R.sm,fontFamily:font.sans,fontWeight:active?600:400,opacity:disabled?.4:1}} onMouseEnter={e=>{if(!active&&!disabled)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{if(!active&&!disabled)e.currentTarget.style.backgroundColor=active?c.accentBtn+"08":"transparent"}}>{children}</button>;
const Radio=({selected,label,desc,onClick,disabled})=><button onClick={disabled?undefined:onClick} style={{display:"flex",alignItems:"center",gap:6,width:"100%",padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${selected?c.accentBtn+"50":c.border}`,backgroundColor:selected?c.accentBtn+"06":"transparent",marginBottom:4,cursor:disabled?"default":"pointer",textAlign:"left",fontFamily:font.sans,opacity:disabled?.4:1}}><span style={{width:12,height:12,borderRadius:"50%",border:`2px solid ${selected?c.accentBtn:c.border}`,backgroundColor:selected?c.accentBtn:"transparent",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>{selected&&<span style={{width:4,height:4,borderRadius:"50%",backgroundColor:"#fff"}}/>}</span><div style={{flex:1}}><div style={{fontSize:11,fontWeight:selected?600:450,color:selected?c.accentBtn:c.textPri}}>{label}</div>{desc&&<div style={{fontSize:9,color:c.textTer,marginTop:1}}>{desc}</div>}</div></button>;
// ═══ DATA ═══
const agentName="Elnor";
const agents=[{name:"Elnor",color:c.agentAv,letter:"E"},{name:"Scout",color:"#5B5F97",letter:"S"}];
const chats=[{name:"Paramount damages strategy",color:c.accentBtn,origin:true},{name:"Brooge loss causation",color:c.green},{name:"New chat",color:c.textTer}];
const typeColors={Note:c.accentBtn,Chat:c.green,Doc:c.textTer,Task:c.warn,Artifact:"#8B5CF6",Prompt:"#D97706",Preset:c.neutral,Skill:c.neutral,Agent:"#5B5F97",Overlay:"#9333EA",Template:"#0891B2",Chain:"#DC2626",Memory:c.green,Room:"#6366F1",Bookmark:c.warn};
const projects=[{id:1,name:"Paramount v. City of LA",color:"#31588c"},{id:2,name:"White v. Brooge Energy",color:"#2E8B57"},{id:3,name:"Internal Ops",color:"#8B7355"}];
const collections=[{name:"Priority",color:"#B04040"},{name:"Research",color:"#2E8B57"},{name:"Draft",color:"#D97706"},{name:"Archive",color:"#6B7280"},{name:"Urgent",color:"#9E5E5E"},{name:"Reference",color:"#5B5F97"}];
const scopeFams=["Collection","Project","Bucket","Places","Folders","Saved Views"];
const typeChips=["Document","Chat","Preset","Skill","Task","Agent","Overlay","Note","Artifact","Prompt","Template","Chain","Memory","Room","Bookmark"];
const sortOptions=["Modified","Alphabetical","Type","Created","Running"];
const initFolders=[{id:"f1",title:"Paramount Case",parent:null},{id:"f2",title:"Expert Reports",parent:"f1"},{id:"f3",title:"Motion Practice",parent:"f1"},{id:"f4",title:"Brooge Research",parent:null},{id:"f5",title:"Reference Materials",parent:null}];
const noteFolders=[{id:"nf1",title:"Case Notes",parent:null},{id:"nf2",title:"Paramount",parent:"nf1"},{id:"nf3",title:"Brooge",parent:"nf1"},{id:"nf4",title:"Session Notes",parent:null}];
const bookmarkFolders=[{id:"bm1",title:"Legal Research",items:["PACER — CACD","Westlaw","CM/ECF Login"]},{id:"bm2",title:"Clients",items:["Paramount SharePoint"]},{id:"bm3",title:"Reference",items:["Cal. Rules of Court","LAMC Full Text"]}];
const noteItems=[{id:"n1",title:"Today — April 4, 2026",mod:"2h",pinned:true,folder:"nf2"},{id:"n2",title:"Trial Prep Checklist",mod:"4h",pinned:true,folder:"nf2"},{id:"n3",title:"Danny Christensen Engagement",mod:"3d",folder:"nf2"},{id:"n4",title:"Brooge Loss Causation Analysis",mod:"1d",folder:"nf3"},{id:"n5",title:"Expert Depo Prep — Sanli",mod:"1w",folder:"nf2"},{id:"n6",title:"Clips: 4.3-1",mod:"1d",folder:"nf4"},{id:"n7",title:"Clips: 4.4-1",mod:"2h",folder:"nf4"}];
const allItems=[{type:"Note",title:"Today — April 4, 2026",time:"2h",pin:true,proj:1,cols:["Priority"]},{type:"Note",title:"Trial Prep Checklist",time:"4h",pin:true,proj:1,cols:[]},{type:"Doc",title:"Sanli Expert Report.pdf",time:"10m",proj:1,cols:["Priority"]},{type:"Artifact",title:"Motion in Limine No. 3",time:"1d",proj:1,cols:[]},{type:"Doc",title:"Christensen_CV.pdf",time:"1d",proj:1,cols:["Reference"]},{type:"Note",title:"Brooge Loss Causation Analysis",time:"1d",proj:2,cols:["Research"]},{type:"Task",title:"Review Sanli depo transcript",time:"2h",proj:1,st:"running",cols:[]},{type:"Chat",title:"Paramount damages strategy",time:"1h",proj:1,cols:["Priority"]},{type:"Artifact",title:"Fair Fund Analysis — Brooge",time:"2h",proj:2,cols:[]},{type:"Doc",title:"BC587659_MIL_3.pdf",time:"2d",proj:1,cols:[]},{type:"Task",title:"Draft Paramount trial brief §III",time:"4h",proj:1,st:"waiting",cols:["Priority"]},{type:"Prompt",title:"Expert Analysis Template",time:"1w",proj:null,cols:[]},{type:"Preset",title:"Legal Brief Review",time:"1w",proj:null,cols:[]},{type:"Doc",title:"Standing_Orders.md",time:"3d",proj:null,cols:["Reference"]}];
const timeVal=t=>{if(t.includes("m"))return parseInt(t);if(t.includes("h"))return parseInt(t)*60;if(t.includes("d"))return parseInt(t)*1440;if(t.includes("w"))return parseInt(t)*10080;return 99999};
const tabColors={note:"#31588c",doc:"#2E8B57",web:"#D97706",clips:"#7C3AED"};
const groupColors=["#EF4444","#F97316","#22C55E","#3B82F6","#8B5CF6","#6B7280"];
const feedPresets=[{id:"fp1",name:"System Activity",icon:"spark",desc:"Agent completions, chain results, memory updates"},{id:"fp2",name:"System Notices",icon:"bell",desc:"Errors, warnings, sync issues"},{id:"fp5",name:"Morning Summary",icon:"sun",desc:"Daily briefing — overnight activity, priorities"}];
const feedIcons={spark:<I.Spark size={11} color={c.agentAv}/>,bell:<I.Bell size={11} color={c.warn}/>,sun:<I.Sun size={11} color={c.warn}/>};
const initTabs=[
{id:"t1",type:"note",icon:"📝",title:"Today — April 4, 2026",color:tabColors.note,group:"g1"},
{id:"t2",type:"doc",icon:"📄",title:"Sanli Expert Report.pdf",color:tabColors.doc},
{id:"t3",type:"web",icon:"🌐",title:"Paramount MIL — PACER",color:tabColors.web,group:"g1"},
{id:"t4",type:"clips",icon:"✂️",title:"Clips: 4.4-1",color:tabColors.clips},
];
const initGroups=[{id:"g1",label:"Paramount Research",color:"#22C55E",collapsed:false}];
const initComments=[
{id:"c1",author:"You",color:c.accentBtn,body:"Verify Sanli's discount rate — 18% seems unsupported.",time:"10m ago",status:"open",anchor:"discount rate of 18%",replies:[{id:"r1",author:agentName,color:c.agentAv,body:"Found 3 comparable transactions: average 8-12%. Sanli's 18% is an outlier.",time:"5m ago"}]},
{id:"c2",author:"You",color:c.accentBtn,body:"Cross-ref with Christensen's methodology.",time:"8m ago",status:"open",anchor:"willing buyer-willing seller",replies:[]},
{id:"c3",author:agentName,color:c.agentAv,body:"Sargon gatekeeper standard fully briefed in §II.",time:"6m ago",status:"resolved",anchor:"Legal Standard",replies:[]},
];
// ═══ MAIN COMPONENT ═══
export default function UnifiedWorkspaceV3(){
const [tabs,setTabs]=useState(initTabs);
const [tabGroups,setTabGroups]=useState(initGroups);
const [activeTabId,setActiveTabId]=useState("t1");
const [tabContextMenu,setTabContextMenu]=useState(null);
const [newTabDrop,setNewTabDrop]=useState(false);
const [dragTabId,setDragTabId]=useState(null);
const [groupColorPicker,setGroupColorPicker]=useState(null);
// Browser column
const [browserOpen,setBrowserOpen]=useState(true);
const [browserWidth,setBrowserWidth]=useState(280);
const [browserMode,setBrowserMode]=useState("browser"); // browser|notes|docs|bookmarks
const [activeScope,setActiveScope]=useState(null);
const [activeProjIdx,setActiveProjIdx]=useState(0);const [noProject,setNoProject]=useState(false);
const [activeTypes,setActiveTypes]=useState(new Set());
const [selectedCollections,setSelectedCollections]=useState(new Set());
const [splitterPos,setSplitterPos]=useState(110);
const [selectedIdx,setSelectedIdx]=useState(null);
const [folders]=useState(initFolders);
const [expandedFolders,setExpandedFolders]=useState(new Set(["f1"]));
const [activeFolder,setActiveFolder]=useState(null);
const [searchMode,setSearchMode]=useState("this_view");
const [sortKey,setSortKey]=useState("Modified");const [sortDrop,setSortDrop]=useState(false);
const [folderOverlay,setFolderOverlay]=useState(false);
const [dropTarget,setDropTarget]=useState(null);const [dragItem,setDragItem]=useState(null);
const [noteExpandedFolders,setNoteExpandedFolders]=useState(new Set(["nf1"]));
const [bmExpanded,setBmExpanded]=useState(new Set(["bm1"]));
const [selectedNote,setSelectedNote]=useState("n1");
// Right panel
const [rightOpen,setRightOpen]=useState(false);const [rightTab,setRightTab]=useState("comments");
const [rightWidth,setRightWidth]=useState(290);
const [comments,setComments]=useState(initComments);
const [activeComment,setActiveComment]=useState(null);
const [replyingTo,setReplyingTo]=useState(null);const [replyText,setReplyText]=useState("");
const [newCm,setNewCm]=useState(null);const [newCmText,setNewCmText]=useState("");
// Send to Agent state (full from notes mockup)
const [agentIdx,setAgentIdx]=useState(0);const [agentDrop,setAgentDrop]=useState(false);
const [chatIdx,setChatIdx]=useState(0);const [chatDrop,setChatDrop]=useState(false);
const [sendScope,setSendScope]=useState("full");
const [selectedCmIds,setSelectedCmIds]=useState(new Set());
const [outputMode,setOutputMode]=useState("respond_in_chat");
const [subMode,setSubMode]=useState("tracked_changes");
const [instruction,setInstruction]=useState("");
// Content state
const [showMarkup,setShowMarkup]=useState(true);const [findBar,setFindBar]=useState(false);
const [pinned,setPinned]=useState(false);const [bookmarked,setBookmarked]=useState(false);
const [readerMode,setReaderMode]=useState(false);const [openDrop,setOpenDrop]=useState(null);
const [bubbleMenu,setBubbleMenu]=useState(null);
const [pickerOpen,setPickerOpen]=useState(false);const [pickerStep,setPickerStep]=useState("choose");
const [pickerTab,setPickerTab]=useState("system");
const [showDownloads,setShowDownloads]=useState(false);
// Session
const [sessionMinutes,setSessionMinutes]=useState(47);const [clipsCount,setClipsCount]=useState(2);
const [toast,setToast]=useState(null);
const editorRef=useRef(null);const cmRef=useRef(null);
const flash=msg=>setToast(msg);
const agent=agents[agentIdx];
const activeTab=tabs.find(t=>t.id===activeTabId)||tabs[0];
const openC=comments.filter(x=>x.status==="open");
const resolvedC=comments.filter(x=>x.status==="resolved");
const isNoteType=activeTab.type==="note"||activeTab.type==="clips";
useEffect(()=>{const iv=setInterval(()=>setSessionMinutes(m=>m+1),60000);return()=>clearInterval(iv)},[]);
// Auto-switch browser mode based on active tab
useEffect(()=>{
if(activeTab.type==="note"||activeTab.type==="clips")setBrowserMode("notes");
else if(activeTab.type==="doc")setBrowserMode("docs");
else if(activeTab.type==="web")setBrowserMode("bookmarks");
},[activeTabId]);
// Filtering
const toggleType=t=>{const s=new Set(activeTypes);s.has(t)?s.delete(t):s.add(t);setActiveTypes(s)};
const toggleCollection=name=>{const s=new Set(selectedCollections);s.has(name)?s.delete(name):s.add(name);setSelectedCollections(s)};
const toggleFolder=id=>{const s=new Set(expandedFolders);s.has(id)?s.delete(id):s.add(id);setExpandedFolders(s)};
const selectScope=s=>{if(activeScope===s){setActiveScope(null);setActiveFolder(null)}else{setActiveScope(s);setActiveFolder(null)}};
const toggleCmSelect=id=>{const s=new Set(selectedCmIds);s.has(id)?s.delete(id):s.add(id);setSelectedCmIds(s)};
const filtered=useMemo(()=>{
let items=[...allItems];
if(browserMode==="docs")items=items.filter(it=>it.type==="Doc"||it.type==="Artifact");
if(activeScope==="Project"&&!noProject)items=items.filter(it=>it.proj===projects[activeProjIdx].id);
if(activeScope==="Project"&&noProject)items=items.filter(it=>it.proj===null);
if(selectedCollections.size>0)items=items.filter(it=>[...selectedCollections].every(col=>it.cols?.includes(col)));
if(activeTypes.size>0)items=items.filter(it=>activeTypes.has(it.type));
if(sortKey==="Alphabetical")items.sort((a,b)=>a.title.localeCompare(b.title));
else if(sortKey==="Type")items.sort((a,b)=>a.type.localeCompare(b.type));
else items.sort((a,b)=>timeVal(a.time)-timeVal(b.time));
const pp=items.filter(x=>x.pin);const up=items.filter(x=>!x.pin);
return [...pp,...up];
},[activeScope,activeProjIdx,noProject,selectedCollections,activeTypes,sortKey,browserMode]);
// Folder tree
const renderFolderTree=(parentId,depth,isOverlay=false)=>folders.filter(f=>f.parent===parentId).map(f=>{
const hasChildren=folders.some(ch=>ch.parent===f.id);const isExp=expandedFolders.has(f.id);
const isActive=!isOverlay&&activeFolder===f.id;const isDrop=dropTarget===f.id;
return <div key={f.id}>
<div onClick={()=>{if(!isOverlay)setActiveFolder(isActive?null:f.id)}}
onDragOver={e=>{e.preventDefault();setDropTarget(f.id)}} onDragLeave={()=>setDropTarget(null)}
onDrop={e=>{e.preventDefault();setDropTarget(null);if(dragItem)flash(`Added to ${f.title}`)}}
style={{display:"flex",alignItems:"center",gap:3,padding:isOverlay?"2px 6px":"3px 8px",paddingLeft:(isOverlay?6:8)+depth*(isOverlay?12:14),borderRadius:R.sm,cursor:isOverlay?"default":"pointer",backgroundColor:isDrop?c.accentBtn+"20":isActive?c.accentBtn+"10":"transparent",fontSize:isOverlay?10.5:11.5,fontWeight:isActive?600:400,color:isActive?c.accentBtn:c.textSec,border:isDrop?`1px dashed ${c.accentBtn}`:"1px solid transparent"}}>
{hasChildren?<span onClick={e=>{e.stopPropagation();toggleFolder(f.id)}} style={{display:"flex",width:10}}>{isExp?<I.ChevD size={9} color={c.textTer}/>:<I.ChevR size={9} color={c.textTer}/>}</span>:<span style={{width:10}}/>}
<I.Folder size={isOverlay?10:12} color={isActive?c.accentBtn:depth===0?c.warn:c.textTer}/>
<span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{f.title}</span>
</div>
{isExp&&hasChildren&&renderFolderTree(f.id,depth+1,isOverlay)}
</div>;
});
// Note folder tree
const renderNoteFolders=(parentId,depth)=>noteFolders.filter(f=>f.parent===parentId).map(f=>{
const hasChildren=noteFolders.some(ch=>ch.parent===f.id);const isExp=noteExpandedFolders.has(f.id);
const folderNotes=noteItems.filter(n=>n.folder===f.id);
return <div key={f.id}>
<div onClick={()=>{const s=new Set(noteExpandedFolders);s.has(f.id)?s.delete(f.id):s.add(f.id);setNoteExpandedFolders(s)}} style={{display:"flex",alignItems:"center",gap:3,padding:"3px 8px",paddingLeft:8+depth*14,borderRadius:R.sm,cursor:"pointer",fontSize:11.5,color:c.textSec,backgroundColor:c.bgPanelAlt,borderBottom:`1px solid ${c.borderLight}`}}>
{isExp?<I.ChevD size={9} color={c.textTer}/>:<I.ChevR size={9} color={c.textTer}/>}
<I.Folder size={11} color={depth===0?c.warn:c.textTer}/>
<span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontWeight:600}}>{f.title}</span>
<span style={{fontSize:9,color:c.textTer}}>{folderNotes.length}</span>
</div>
{isExp&&<>
{folderNotes.map(n=><div key={n.id} onClick={()=>{setSelectedNote(n.id);flash(`Open "${n.title}"`)}} style={{display:"flex",alignItems:"center",gap:4,padding:`5px 10px 5px ${22+depth*14}px`,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",backgroundColor:selectedNote===n.id?c.accentBtn+"06":"transparent",borderLeft:selectedNote===n.id?`2px solid ${c.accentBtn}`:"2px solid transparent"}}>
{n.pinned&&<I.Pin size={8} color={c.warn}/>}
<span style={{flex:1,fontSize:11.5,fontWeight:450,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{n.title}</span>
<span style={{fontSize:9,color:c.textTer}}>{n.mod}</span>
</div>)}
{renderNoteFolders(f.id,depth+1)}
</>}
</div>;
});
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()};
const addReply=cmId=>{if(!replyText.trim())return;setComments(p=>p.map(cm=>cm.id===cmId?{...cm,replies:[...cm.replies,{id:"r"+Date.now(),author:"You",color:c.accentBtn,body:replyText.trim(),time:"just now"}]}:cm));setReplyingTo(null);setReplyText("")};
const resolveComment=id=>setComments(p=>p.map(cm=>cm.id===id?{...cm,status:"resolved"}:cm));
const reopenComment=id=>setComments(p=>p.map(cm=>cm.id===id?{...cm,status:"open"}:cm));
const addComment=()=>{if(!newCmText.trim())return;setComments(p=>[...p,{id:"c"+Date.now(),author:"You",color:c.accentBtn,body:newCmText.trim(),time:"just now",status:"open",anchor:newCm?.text||null,replies:[]}]);setNewCm(null);setNewCmText("")};
const closeTab=id=>{if(tabs.length<=1)return;const idx=tabs.findIndex(t=>t.id===id);setTabs(p=>p.filter(t=>t.id!==id));if(activeTabId===id){const next=tabs[idx===0?1:idx-1];if(next)setActiveTabId(next.id)}};
const addTab=(type,incognito=false)=>{const id="t"+Date.now();const newTab=type==="note"?{id,type:"note",icon:"📝",title:"Untitled Note",color:tabColors.note}:type==="doc"?{id,type:"doc",icon:"📄",title:"Open Document…",color:tabColors.doc}:type==="web"?{id,type:"web",icon:"🌐",title:"New Tab",color:tabColors.web,incognito}:null;if(!newTab)return;setTabs(p=>[...p,newTab]);setActiveTabId(id);setNewTabDrop(false);flash(incognito?"New incognito tab":type==="note"?"New note":type==="doc"?"Opening file picker…":"New tab")};
const handleSend=()=>{if(outputMode==="respond_in_chat")flash(`Opening "${chats[chatIdx].name}" with ref…`);else{if(!instruction.trim())return;flash(`${agent.name}: ${subMode}…`)}};
// Tab drag reorder
const handleTabDrop=(targetId)=>{if(!dragTabId||dragTabId===targetId)return;setTabs(prev=>{const dragged=prev.find(t=>t.id===dragTabId);const rest=prev.filter(t=>t.id!==dragTabId);const targetIdx=rest.findIndex(t=>t.id===targetId);return [...rest.slice(0,targetIdx),dragged,...rest.slice(targetIdx)]});setDragTabId(null)};
// CmCard
const CmCard=({cm,resolved})=>{const isAct=activeComment===cm.id;return <div style={{margin:"0 8px 8px",borderRadius:R.sm,border:`1px solid ${isAct?cm.color+"60":c.borderLight}`,backgroundColor:isAct?cm.color+"06":c.bgCard,overflow:"hidden",cursor:"pointer",opacity:resolved?.6:1}} onClick={()=>setActiveComment(isAct?null:cm.id)}>
<div style={{borderLeft:`3px solid ${cm.color}${resolved?"30":"40"}`,padding:"9px 11px"}}>
{cm.anchor&&<div style={{fontSize:10.5,color:c.accentBtn,backgroundColor:c.accentBtn+"08",padding:"3px 6px",borderRadius:3,marginBottom:6,fontStyle:"italic",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>"{cm.anchor.slice(0,55)}"</div>}
<div style={{display:"flex",alignItems:"center",gap:5,marginBottom:5}}><Av letter={cm.author[0]} color={cm.color} size={16}/><span style={{fontSize:11.5,fontWeight:650,color:cm.color}}>{cm.author}</span><span style={{fontSize:9.5,color:c.textTer}}>{cm.time}</span></div>
<div style={{fontSize:12,lineHeight:1.5,color:c.textSec,marginBottom:5}}>{cm.body}</div>
<div style={{display:"flex",alignItems:"center",gap:6,fontSize:10.5}} onClick={e=>e.stopPropagation()}>
{!resolved&&<span style={{color:c.textTer,cursor:"pointer",fontWeight:500}} onClick={()=>{setReplyingTo(replyingTo===cm.id?null:cm.id);setReplyText("")}}>Reply</span>}
{!resolved&&<span style={{color:c.textTer,cursor:"pointer",fontWeight:500}} onClick={()=>resolveComment(cm.id)}>Resolve</span>}
{resolved&&<span style={{color:c.accentBtn,cursor:"pointer",fontWeight:500}} onClick={()=>reopenComment(cm.id)}>Reopen</span>}
{cm.author==="You"&&<span style={{color:c.textTer,cursor:"pointer",fontWeight:500}}>Edit</span>}
{cm.author==="You"&&<span style={{color:c.error,cursor:"pointer",fontWeight:500,opacity:.7}}>Delete</span>}
<span style={{flex:1}}/><span onClick={()=>flash(`Sent to ${agent.name}`)} style={{cursor:"pointer",display:"flex",alignItems:"center",gap:2,color:c.textSec,fontWeight:600,fontSize:10}} onMouseEnter={e=>e.currentTarget.style.color=c.accentBtn} onMouseLeave={e=>e.currentTarget.style.color=c.textSec}><I.Spark size={11}/>Send</span>
</div>
</div>
{cm.replies.map(r=><div key={r.id} style={{borderLeft:`3px solid ${r.color}40`,borderTop:`1px solid ${c.borderLight}`,padding:"7px 11px",backgroundColor:c.bgPanelAlt}}><div style={{display:"flex",alignItems:"center",gap:5,marginBottom:4}}><Av letter={r.author[0]} color={r.color} size={14}/><span style={{fontSize:10.5,fontWeight:650,color:r.color}}>{r.author}</span><span style={{fontSize:9,color:c.textTer}}>{r.time}</span></div><div style={{fontSize:11.5,lineHeight:1.5,color:c.textSec}}>{r.body}</div></div>)}
{replyingTo===cm.id&&<div style={{borderTop:`1px solid ${c.borderLight}`,padding:"8px 11px",backgroundColor:c.bgPanelAlt}} onClick={e=>e.stopPropagation()}><textarea value={replyText} onChange={e=>setReplyText(e.target.value)} placeholder="Reply…" autoFocus onKeyDown={e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();addReply(cm.id)}}} style={{width:"100%",padding:"5px 7px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11.5,fontFamily:font.sans,outline:"none",minHeight:36,resize:"vertical"}}/><div style={{display:"flex",gap:4,marginTop:4}}><Btn small primary onClick={()=>addReply(cm.id)} disabled={!replyText.trim()}>Reply</Btn><Btn small ghost onClick={()=>setReplyingTo(null)}>Cancel</Btn></div></div>}
</div>};
// ═══ SHARED TOOLBAR (Notes & Clips) ═══
const NoteToolbar=({accent=c.accentBtn})=><div style={{display:"flex",alignItems:"center",gap:3,padding:"6px 10px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexWrap:"wrap",flexShrink:0}}>
<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/>
{/* +Module button — single Grid icon */}
<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:340,padding:0,overflow:"hidden"}}>
{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={()=>{flash("Task List added");setPickerOpen(false)}}><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={()=>{flash("Thread added");setPickerOpen(false)}}><I.MsgCircle size={14} color={c.accentBtn}/><div><div style={{fontWeight:600}}>@{agentName} Thread</div><div style={{fontSize:9.5,color:c.textTer}}>Inline conversation</div></div></DItem>
<DItem onClick={()=>{flash("Notice added");setPickerOpen(false)}}><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>}
{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}}><span style={{transform:"rotate(180deg)",display:"inline-flex"}}><I.ChevR size={12}/></span></button>
<span style={{fontSize:12,fontWeight:650,flex:1}}>Choose Feed Preset</span>
</div>
<div style={{padding:6,maxHeight:200,overflowY:"auto"}}>
{feedPresets.map(p=><div key={p.id} onClick={()=>{flash(`${p.name} added`);setPickerOpen(false)}} 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:28,height:28,borderRadius:R.sm,backgroundColor:c.accentBtn+"10",display:"flex",alignItems:"center",justifyContent:"center"}}>{feedIcons[p.icon]}</div>
<div><div style={{fontSize:12,fontWeight:600}}>{p.name}</div><div style={{fontSize:10,color:c.textTer}}>{p.desc}</div></div>
</div>)}
</div>
</div>}
</div>}</div>
<Sep/><TBtn icon={<I.Search size={13}/>} active={findBar} onClick={()=>setFindBar(!findBar)}/>
<TBtn icon={<I.Maximize size={13}/>}/>
<Sep/><TBtn icon={<I.MsgCircle size={13}/>} label={`${openC.length}`} active={rightOpen&&rightTab==="comments"} onClick={()=>{if(rightOpen&&rightTab==="comments")setRightOpen(false);else{setRightOpen(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="2" dropdown active/>
<Sep/><TBtn icon={<I.Settings size={13}/>} title="Settings" onClick={()=>flash("Note settings…")}/>
<div style={{flex:1}}/><span style={{fontSize:10,color:c.green,fontWeight:500}}>Saved 2m ago</span>
<Sep/><button onClick={()=>{if(rightOpen&&rightTab==="send")setRightOpen(false);else{setRightOpen(true);setRightTab("send")}}} style={{padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${accent}40`,backgroundColor:(rightOpen&&rightTab==="send")?accent:accent+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:(rightOpen&&rightTab==="send")?"#fff":accent,fontFamily:font.sans,fontSize:10.5,fontWeight:600,height:26}}><I.Spark size={12}/>Ask {agent.name}</button>
</div>;
// ═══ RENDER ═══
return (
<div style={{display:"flex",width:"100%",height:"100vh",fontFamily:font.sans,color:c.textPri,backgroundColor:c.bgApp,overflow:"hidden"}} onClick={()=>{setSortDrop(false);setNewTabDrop(false);setOpenDrop(null);setAgentDrop(false);setChatDrop(false);setTabContextMenu(null);setGroupColorPicker(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}`}</style>
{toast&&<Toast msg={toast} onDone={()=>setToast(null)}/>}
{/* ═══ Q LEFT NAV ═══ */}
<div style={{width:44,flexShrink:0,backgroundColor:c.bgSidebar,borderRight:`1px solid ${c.borderDark}`,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:10,gap:2}}>
<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:8,cursor:"pointer"}}>Q</div>
{[{icon:<I.Home size={14}/>,l:"Home"},{icon:<I.Inbox size={14}/>,l:"Inbox"},{icon:<I.Search size={14}/>,l:"Work",active:true},{icon:<I.MsgCircle size={14}/>,l:"Chat"},{icon:<I.Settings size={14}/>,l:"Settings"}].map((n,i)=><button key={i} title={n.l} style={{width:32,height:32,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:n.active?"#ffffff18":"transparent",color:n.active?"#fff":"#777",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",gap:1}}>{n.icon}<span style={{fontSize:7,opacity:.7}}>{n.l}</span></button>)}
</div>
{/* ═══ BROWSER COLUMN ═══ */}
{browserOpen&&<div style={{width:browserWidth,flexShrink:0,backgroundColor:c.bgPanel,borderRight:`1px solid ${c.border}`,display:"flex",flexDirection:"column",overflow:"hidden",position:"relative"}}>
{/* Mode tabs — above search */}
<div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`,flexShrink:0}}>
{[{id:"browser",icon:<I.Search size={10}/>,label:"Browser"},{id:"notes",icon:<I.FileText size={10}/>,label:"Notes"},{id:"docs",icon:<I.File size={10}/>,label:"Docs"},{id:"bookmarks",icon:<I.Star size={10}/>,label:"Bookmarks"}].map(m=><button key={m.id} onClick={()=>setBrowserMode(m.id)} style={{flex:1,padding:"6px 2px",border:"none",cursor:"pointer",backgroundColor:"transparent",color:browserMode===m.id?c.accentBtn:c.textTer,fontSize:9.5,fontWeight:browserMode===m.id?650:400,fontFamily:font.sans,borderBottom:browserMode===m.id?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}>{m.icon}{m.label}</button>)}
</div>
{/* Search */}
<div style={{padding:"6px 8px",borderBottom:`1px solid ${c.borderLight}`}}>
<div style={{display:"flex",alignItems:"center",gap:5,padding:"5px 8px",borderRadius:R.sm,backgroundColor:c.bgInput,border:`1px solid ${c.borderLight}`}}>
<I.Search size={12} color={c.textTer}/><input placeholder={browserMode==="bookmarks"?"Search bookmarks…":"Search…"} style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:11.5,fontFamily:font.sans,color:c.textPri,outline:"none"}}/>
{browserMode==="browser"&&<button style={{padding:"1px 6px",borderRadius:3,border:`1px solid ${searchMode==="this_view"?c.accentBtn+"50":c.borderLight}`,backgroundColor:searchMode==="this_view"?c.accentBtn+"08":"transparent",fontSize:8.5,fontWeight:500,color:searchMode==="this_view"?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans}} onClick={()=>setSearchMode(s=>s==="this_view"?"everywhere":"this_view")}>{searchMode==="this_view"?"This View":"Everywhere"}</button>}
</div>
</div>
{/* ─── BROWSER MODE ─── */}
{browserMode==="browser"&&<>
{/* Collections */}
<div style={{display:"flex",alignItems:"center",gap:5,padding:"5px 8px",borderBottom:`1px solid ${c.borderLight}`}}>
<button onClick={()=>flash("Create collection…")} style={{width:18,height:18,borderRadius:"50%",border:`1.5px dashed ${c.border}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}><I.Plus size={9} color={c.textTer}/></button>
{collections.map(col=>{const sel=selectedCollections.has(col.name);return <button key={col.name} title={col.name} onClick={()=>toggleCollection(col.name)} style={{width:18,height:18,borderRadius:"50%",backgroundColor:col.color,border:sel?`2px solid ${c.textPri}`:"2px solid transparent",cursor:"pointer",flexShrink:0,opacity:sel?1:.6,transform:sel?"scale(1.1)":"scale(1)",transition:"all .15s"}}/>})}
{selectedCollections.size>0&&<button onClick={()=>setSelectedCollections(new Set())} style={{border:"none",backgroundColor:"transparent",cursor:"pointer",color:c.textTer,fontSize:9,fontFamily:font.sans}}>clear</button>}
</div>
{/* Scope chips */}
<div style={{display:"flex",flexWrap:"wrap",gap:2,padding:"5px 8px",borderBottom:`1px solid ${c.borderLight}`,alignItems:"center"}}>
{scopeFams.map(s=><button key={s} onClick={()=>selectScope(s)} style={{padding:"2px 8px",borderRadius:3,border:`1px solid ${activeScope===s?c.accentBtn+"60":c.borderLight}`,backgroundColor:activeScope===s?c.accentBtn+"10":"transparent",fontSize:10,fontWeight:activeScope===s?600:400,color:activeScope===s?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans,height:20}}>{s}</button>)}
<div style={{flex:1}}/>
<button onClick={()=>setFolderOverlay(!folderOverlay)} style={{padding:"2px 7px",borderRadius:3,border:`1px dashed ${folderOverlay?c.accentBtn:c.border}`,backgroundColor:folderOverlay?c.accentBtn+"10":"transparent",fontSize:9.5,fontWeight:folderOverlay?600:400,color:folderOverlay?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans,height:20,display:"flex",alignItems:"center",gap:3}}><I.Folder size={9}/>Folders</button>
</div>
{/* Scope detail */}
<div style={{height:splitterPos,flexShrink:0,overflowY:"auto",borderBottom:`1px solid ${c.borderLight}`}}>
{activeScope===null&&<div style={{padding:12,fontSize:11,color:c.textTer,fontStyle:"italic"}}>No scope — showing all items</div>}
{activeScope==="Project"&&<div style={{padding:"3px 4px"}}>{projects.map((p,i)=><button key={p.id} onClick={()=>{setActiveProjIdx(i);setNoProject(false)}} style={{display:"flex",alignItems:"center",gap:6,width:"100%",padding:"4px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:!noProject&&activeProjIdx===i?c.accentBtn+"10":"transparent",fontFamily:font.sans,textAlign:"left"}}><span style={{width:7,height:7,borderRadius:"50%",backgroundColor:p.color,flexShrink:0}}/><span style={{fontSize:11.5,fontWeight:!noProject&&activeProjIdx===i?600:400,color:!noProject&&activeProjIdx===i?c.textPri:c.textSec,flex:1}}>{p.name}</span></button>)}</div>}
{activeScope==="Folders"&&<div style={{padding:"3px 4px"}}><div style={{padding:"2px 8px 6px"}}><span style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Folders</span></div>{renderFolderTree(null,0)}</div>}
</div>
{/* Splitter */}
<div style={{height:4,cursor:"row-resize",backgroundColor:c.borderLight,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"}} onMouseDown={e=>{const sY=e.clientY,sP=splitterPos;const m=ev=>setSplitterPos(Math.max(60,Math.min(250,sP+(ev.clientY-sY))));const u=()=>{document.removeEventListener("mousemove",m);document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",m);document.addEventListener("mouseup",u)}}><div style={{width:20,height:2,borderRadius:1,backgroundColor:c.textTer,opacity:.25}}/></div>
{/* Folder overlay */}
{folderOverlay&&activeScope!=="Folders"&&<div style={{maxHeight:90,overflowY:"auto",borderBottom:`1px solid ${c.accentBtn}30`,backgroundColor:c.accentBtn+"04",padding:"3px 0",flexShrink:0}}>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"1px 8px 3px"}}><span style={{fontSize:9,fontWeight:600,color:c.accentBtn,textTransform:"uppercase"}}>Drag to folders</span><button onClick={()=>setFolderOverlay(false)} style={{border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",color:c.textTer}}><I.X size={9}/></button></div>
{renderFolderTree(null,0,true)}
</div>}
{/* Type chips — all 15 */}
<div style={{display:"flex",flexWrap:"wrap",gap:2,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}>
{typeChips.map(t=><button key={t} onClick={()=>toggleType(t)} style={{padding:"1px 6px",borderRadius:3,border:`1px solid ${activeTypes.has(t)?c.accentBtn+"50":c.borderLight}`,backgroundColor:activeTypes.has(t)?c.accentBtn+"10":"transparent",fontSize:9.5,fontWeight:activeTypes.has(t)?600:400,color:activeTypes.has(t)?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans,height:18}}>{t}</button>)}
{activeTypes.size>0&&<button onClick={()=>setActiveTypes(new Set())} style={{padding:"1px 6px",border:"none",cursor:"pointer",fontSize:9,color:c.textTer,fontFamily:font.sans,height:18}}>clear</button>}
</div>
{/* Sort bar */}
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"3px 8px",borderBottom:`1px solid ${c.borderLight}`,fontSize:9.5,color:c.textTer}}>
<span>{filtered.length} items</span>
<div style={{position:"relative"}}><span style={{cursor:"pointer"}} onClick={e=>{e.stopPropagation();setSortDrop(!sortDrop)}}>{sortKey} ▾</span>
{sortDrop&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:16,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,minWidth:120,padding:3}}>
{sortOptions.map(s=><button key={s} onClick={()=>{setSortKey(s);setSortDrop(false)}} style={{display:"block",width:"100%",padding:"5px 10px",border:"none",cursor:"pointer",backgroundColor:s===sortKey?c.accentBtn+"08":"transparent",fontSize:11,color:s===sortKey?c.accentBtn:c.textPri,textAlign:"left",borderRadius:R.sm,fontFamily:font.sans,fontWeight:s===sortKey?600:400}}>{s}{s===sortKey&&" ✓"}</button>)}
</div>}
</div>
</div>
</>}
{/* ─── NOTES MODE ─── */}
{browserMode==="notes"&&<div style={{flex:1,overflowY:"auto"}}>{renderNoteFolders(null,0)}<div style={{padding:"5px 8px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}><span style={{fontSize:11,fontWeight:600,color:c.textTer,fontStyle:"italic"}}>Unfiled</span></div>{noteItems.filter(n=>!n.folder).map(n=><div key={n.id} onClick={()=>{setSelectedNote(n.id);flash(`Open "${n.title}"`)}} style={{padding:"5px 10px",borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",fontSize:11.5}}>{n.title}<span style={{fontSize:9,color:c.textTer,marginLeft:6}}>{n.mod}</span></div>)}</div>}
{/* ─── DOCS MODE ─── */}
{browserMode==="docs"&&<>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"3px 8px",borderBottom:`1px solid ${c.borderLight}`,fontSize:9.5,color:c.textTer}}><span>{filtered.length} documents</span><span>{sortKey} ▾</span></div>
</>}
{/* ─── BOOKMARKS MODE ─── */}
{browserMode==="bookmarks"&&<div style={{flex:1,overflowY:"auto",padding:"4px 0"}}>
{bookmarkFolders.map(bf=><div key={bf.id}>
<div onClick={()=>{const s=new Set(bmExpanded);s.has(bf.id)?s.delete(bf.id):s.add(bf.id);setBmExpanded(s)}} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",cursor:"pointer",fontWeight:600,fontSize:11.5,color:c.textSec}}>{bmExpanded.has(bf.id)?<I.ChevD size={10}/>:<I.ChevR size={10}/>}<I.Star size={10} color={c.warn}/>{bf.title}</div>
{bmExpanded.has(bf.id)&&bf.items.map((item,ii)=><div key={ii} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 8px 4px 24px",cursor:"pointer",fontSize:11,color:c.textPri}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Globe size={9} color={c.textTer}/>{item}</div>)}
</div>)}
<div style={{padding:"10px 8px",borderTop:`1px solid ${c.borderLight}`,fontSize:10,color:c.textTer}}>Recent pages</div>
{["Paramount MIL No. 3","SEC — Brooge Energy","Christensen CV","LAMC § 14.4.4"].map((t,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",cursor:"pointer",fontSize:11,color:i===0?c.accentBtn:c.textPri,fontWeight:i===0?600:400}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Globe size={9} color={i===0?c.accentBtn:c.textTer}/>{t}</div>)}
</div>}
{/* Results list (browser + docs modes) */}
{(browserMode==="browser"||browserMode==="docs")&&<div style={{flex:1,overflowY:"auto"}}>
{filtered.map((item,i)=><div key={i} draggable onDragStart={()=>setDragItem(item.title)} onDragEnd={()=>setDragItem(null)} onClick={()=>setSelectedIdx(i)} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 8px",height:32,borderBottom:`1px solid ${c.borderLight}`,cursor:folderOverlay?"grab":"pointer",backgroundColor:selectedIdx===i?c.accentBtn+"08":"transparent"}} onMouseEnter={e=>{if(selectedIdx!==i)e.currentTarget.style.backgroundColor=c.bgPanelAlt}} onMouseLeave={e=>{if(selectedIdx!==i)e.currentTarget.style.backgroundColor="transparent"}}>
{item.pin&&<I.Pin size={8} color={c.warn}/>}
<span style={{flex:1,minWidth:0,fontSize:11.5,fontWeight:450,color:c.textPri,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{item.title}</span>
{item.st&&<span style={{fontSize:8.5,fontWeight:600,color:item.st==="running"?c.accentBtn:c.warn,textTransform:"uppercase",flexShrink:0}}>{item.st}</span>}
<span style={{fontSize:8.5,fontWeight:600,color:typeColors[item.type]||c.textTer,textTransform:"uppercase",letterSpacing:".03em",flexShrink:0,minWidth:28,textAlign:"right"}}>{item.type}</span>
<span style={{fontSize:9,color:c.textTer,flexShrink:0,minWidth:18,textAlign:"right"}}>{item.time}</span>
</div>)}
{filtered.length===0&&<div style={{padding:16,fontSize:11,color:c.textTer,textAlign:"center",fontStyle:"italic"}}>No items match</div>}
</div>}
{/* Footer */}
<div style={{padding:"3px 8px",borderTop:`1px solid ${c.borderLight}`,fontSize:9,color:c.textTer,display:"flex",gap:4,flexShrink:0}}>
<span>{browserMode}</span>
{activeScope&&browserMode==="browser"&&<span>· {activeScope}</span>}
<span style={{marginLeft:"auto"}}>{sortKey}</span>
</div>
<div style={{position:"absolute",top:0,right:0,width:4,height:"100%",cursor:"col-resize"}} onMouseDown={e=>{const sX=e.clientX,sW=browserWidth;const m=ev=>setBrowserWidth(Math.max(200,Math.min(450,sW+(ev.clientX-sX))));const u=()=>{document.removeEventListener("mousemove",m);document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",m);document.addEventListener("mouseup",u)}}/>
</div>}
{/* ═══ MAIN WORKSPACE ═══ */}
<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
{/* ═══ TAB BAR ═══ */}
<div style={{display:"flex",alignItems:"flex-end",gap:1,padding:"4px 8px 0",backgroundColor:"#dee1e5",borderBottom:`1px solid ${c.border}`,flexShrink:0,minHeight:36}}>
<button onClick={()=>setBrowserOpen(!browserOpen)} title="Browser (⌘B)" style={{width:28,height:28,borderRadius:"6px 6px 0 0",border:"none",backgroundColor:browserOpen?c.bgPanel:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:browserOpen?c.accentBtn:c.textTer,marginRight:4}}><I.Search size={13}/></button>
{/* Render tabs with groups */}
{(()=>{
const rendered=new Set();
return tabs.map(tab=>{
if(rendered.has(tab.id))return null;
// If this tab is in a group, render the group header + all group tabs
if(tab.group){
const group=tabGroups.find(g=>g.id===tab.group);
if(!group)return null;
const groupTabs=tabs.filter(t=>t.group===tab.group);
if(rendered.has(groupTabs[0]?.id)&&groupTabs[0]?.id!==tab.id)return null;
groupTabs.forEach(t=>rendered.add(t.id));
return <div key={`grp-${group.id}`} style={{display:"flex",gap:1,alignItems:"flex-end"}}>
{/* Group header */}
<div onClick={()=>setTabGroups(g=>g.map(x=>x.id===group.id?{...x,collapsed:!x.collapsed}:x))} onContextMenu={e=>{e.preventDefault();setGroupColorPicker({x:e.clientX,y:e.clientY,groupId:group.id})}} style={{display:"flex",alignItems:"center",gap:4,padding:"0 6px",height:32,cursor:"pointer",borderRadius:"8px 8px 0 0",backgroundColor:group.color+"18"}}>
<Dot color={group.color} size={8}/>
<span style={{fontSize:10,fontWeight:600,color:group.color,fontFamily:font.sans}}>{group.label}</span>
<span style={{fontSize:9,color:c.textTer,transform:group.collapsed?"rotate(-90deg)":"none"}}>▾</span>
</div>
{/* Group tabs */}
{!group.collapsed&&groupTabs.map(gt=><div key={gt.id} draggable onDragStart={()=>setDragTabId(gt.id)} onDragOver={e=>e.preventDefault()} onDrop={()=>handleTabDrop(gt.id)} onClick={()=>setActiveTabId(gt.id)} onContextMenu={e=>{e.preventDefault();setTabContextMenu({x:e.clientX,y:e.clientY,tabId:gt.id})}} style={{display:"flex",alignItems:"center",gap:5,padding:"0 10px",height:32,minWidth:80,maxWidth:200,borderRadius:"8px 8px 0 0",backgroundColor:gt.id===activeTabId?c.bgPanel:"#e8eaed",borderBottom:gt.id===activeTabId?`2.5px solid ${gt.color}`:`2.5px solid ${group.color}40`,cursor:"pointer",overflow:"hidden",flexShrink:1}}>
{gt.incognito&&<I.Mask size={10} color={c.incText}/>}
{!gt.incognito&&<span style={{fontSize:11,flexShrink:0}}>{gt.icon}</span>}
<span style={{flex:1,fontSize:11,fontWeight:gt.id===activeTabId?550:400,color:gt.id===activeTabId?c.textPri:c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:font.sans}}>{gt.title}</span>
<span onClick={e=>{e.stopPropagation();closeTab(gt.id)}} style={{cursor:"pointer",display:"flex",opacity:gt.id===activeTabId?1:0,padding:2,borderRadius:3,flexShrink:0}}><I.X size={10} color={c.textTer}/></span>
</div>)}
</div>;
}
// Ungrouped tab
rendered.add(tab.id);
return <div key={tab.id} draggable onDragStart={()=>setDragTabId(tab.id)} onDragOver={e=>e.preventDefault()} onDrop={()=>handleTabDrop(tab.id)} onClick={()=>setActiveTabId(tab.id)} onContextMenu={e=>{e.preventDefault();setTabContextMenu({x:e.clientX,y:e.clientY,tabId:tab.id})}} style={{display:"flex",alignItems:"center",gap:5,padding:"0 10px",height:32,minWidth:80,maxWidth:200,borderRadius:"8px 8px 0 0",backgroundColor:tab.incognito?(tab.id===activeTabId?c.incBg:"#1e1530"):(tab.id===activeTabId?c.bgPanel:"#e8eaed"),borderBottom:tab.id===activeTabId?`2.5px solid ${tab.color}`:`1px solid ${c.border}`,cursor:"pointer",overflow:"hidden",flexShrink:1}}>
{tab.incognito&&<I.Mask size={10} color={c.incText}/>}
{!tab.incognito&&<span style={{fontSize:11,flexShrink:0}}>{tab.icon}</span>}
<span style={{flex:1,fontSize:11,fontWeight:tab.id===activeTabId?550:400,color:tab.incognito?(tab.id===activeTabId?c.incText:"#8b8b9a"):(tab.id===activeTabId?c.textPri:c.textSec),overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:font.sans}}>{tab.title}</span>
<span onClick={e=>{e.stopPropagation();closeTab(tab.id)}} style={{cursor:"pointer",display:"flex",opacity:tab.id===activeTabId?1:0,padding:2,borderRadius:3,flexShrink:0}}><I.X size={10} color={c.textTer}/></span>
</div>;
});
})()}
{/* [+] dropdown */}
<div style={{position:"relative"}}>
<button onClick={e=>{e.stopPropagation();setNewTabDrop(!newTabDrop)}} style={{width:28,height:28,borderRadius:"6px 6px 0 0",border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer,marginBottom:2}}><I.Plus size={14}/></button>
{newTabDrop&&<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 4px 12px rgba(0,0,0,0.1)",zIndex:100,minWidth:170,padding:3}}>
<DItem onClick={()=>addTab("note")}>📝 New Note</DItem>
<DItem onClick={()=>addTab("doc")}>📄 Open Document…</DItem>
<DItem onClick={()=>addTab("web")}>🌐 New Web Tab</DItem>
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
<DItem onClick={()=>addTab("web",true)}><I.Mask size={12} color={c.incText}/><span style={{color:c.incText}}>New Incognito Tab</span></DItem>
</div>}
</div>
</div>
{/* Tab context menu */}
{tabContextMenu&&<div onClick={e=>e.stopPropagation()} style={{position:"fixed",left:tabContextMenu.x,top:tabContextMenu.y,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",zIndex:9999,minWidth:180,padding:4}}>
<DItem onClick={()=>{closeTab(tabContextMenu.tabId);setTabContextMenu(null)}}>Close</DItem>
<DItem onClick={()=>{setTabs(p=>p.filter(t=>t.id===tabContextMenu.tabId));setTabContextMenu(null)}}>Close Others</DItem>
<DItem onClick={()=>{flash("Duplicated");setTabContextMenu(null)}}>Duplicate</DItem>
<DItem onClick={()=>{flash("Pinned tab");setTabContextMenu(null)}}>Pin</DItem>
{tabs.find(t=>t.id===tabContextMenu.tabId)?.type==="note"&&<DItem onClick={()=>{const name=prompt("New name:");if(name)setTabs(p=>p.map(t=>t.id===tabContextMenu.tabId?{...t,title:name}:t));setTabContextMenu(null)}}>Rename</DItem>}
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
<DItem onClick={()=>{
const selected=tabs.filter(t=>t.id===tabContextMenu.tabId);
const gid="g"+Date.now();const name=prompt("Group name (optional):")||"";
setTabGroups(p=>[...p,{id:gid,label:name||"Group",color:groupColors[p.length%groupColors.length],collapsed:false}]);
setTabs(p=>p.map(t=>t.id===tabContextMenu.tabId?{...t,group:gid}:t));
setTabContextMenu(null);flash("Tab grouped")
}}>Group Tab…</DItem>
{tabs.find(t=>t.id===tabContextMenu.tabId)?.group&&<DItem onClick={()=>{setTabs(p=>p.map(t=>t.id===tabContextMenu.tabId?{...t,group:undefined}:t));setTabContextMenu(null)}}>Remove from Group</DItem>}
</div>}
{/* Group context menu */}
{groupColorPicker&&<div onClick={e=>e.stopPropagation()} style={{position:"fixed",left:groupColorPicker.x,top:groupColorPicker.y,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",zIndex:9999,minWidth:160,padding:4}}>
<DItem onClick={()=>{const name=prompt("Group name:");if(name)setTabGroups(p=>p.map(g=>g.id===groupColorPicker.groupId?{...g,label:name}:g));setGroupColorPicker(null)}}>Rename Group</DItem>
<div style={{padding:"4px 10px",display:"flex",gap:4}}>{groupColors.map(gc=><span key={gc} onClick={()=>{setTabGroups(p=>p.map(g=>g.id===groupColorPicker.groupId?{...g,color:gc}:g));setGroupColorPicker(null)}} style={{width:16,height:16,borderRadius:"50%",backgroundColor:gc,cursor:"pointer",border:"2px solid transparent"}}/>)}</div>
<DItem onClick={()=>{setTabs(p=>p.map(t=>t.group===groupColorPicker.groupId?{...t,group:undefined}:t));setTabGroups(p=>p.filter(g=>g.id!==groupColorPicker.groupId));setGroupColorPicker(null)}}>Ungroup</DItem>
<DItem onClick={()=>{const gid=groupColorPicker.groupId;setTabs(p=>p.filter(t=>t.group!==gid));setTabGroups(p=>p.filter(g=>g.id!==gid));setGroupColorPicker(null)}}>Close Group</DItem>
</div>}
{/* ═══ CONTENT + RIGHT PANEL ═══ */}
<div style={{flex:1,display:"flex",overflow:"hidden"}}>
<div ref={editorRef} style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}} onMouseUp={handleMouseUp} onMouseDown={e=>{if(bubbleMenu&&!e.target.closest("[data-bubble]"))setBubbleMenu(null)}}>
{/* ─── NOTE / CLIPS TOOLBAR ─── */}
{isNoteType&&<NoteToolbar accent={activeTab.type==="clips"?c.purple:c.accentBtn}/>}
{/* ─── DOCUMENT TOOLBAR ─── */}
{activeTab.type==="doc"&&<>
<div style={{display:"flex",alignItems:"center",gap:8,padding:"7px 16px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanel,flexShrink:0}}><I.FileText size={15} color={c.accentBtn}/><span style={{fontSize:14,fontWeight:650,flex:1}}>Sanli Expert Report — Economic Damages</span><span style={{fontSize:10,padding:"2px 8px",borderRadius:R.full,backgroundColor:c.bgInput,color:c.textTer,fontWeight:600}}>PDF</span></div>
<div style={{display:"flex",alignItems:"center",gap:3,padding:"6px 10px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexWrap:"wrap",flexShrink:0}}>
<TBtn icon={<I.Copy size={13}/>} 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:190,padding:4}}>
<DItem onClick={()=>{flash("Save as PDF…");setOpenDrop(null)}}>Save As… (PDF)</DItem>
<DItem onClick={()=>{flash("Export DOCX");setOpenDrop(null)}}>Export as DOCX</DItem>
<DItem onClick={()=>{flash("Export Markdown");setOpenDrop(null)}}>Export as Markdown</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>
<Sep/><TBtn icon={<I.FileText size={13}/>} label="To Note" title="Convert to note" onClick={()=>flash("Converting to note…")}/>
<TBtn icon={<I.Link size={13}/>} label="Ref" onClick={()=>flash("Ref copied")}/>
<Sep/><TBtn icon={<I.Search size={13}/>}/><TBtn icon={<I.ExtLink size={13}/>} title="Open in default app" onClick={()=>flash("Opening in Preview.app…")}/><TBtn icon={<I.Printer size={13}/>} onClick={()=>flash("Print…")}/>
<TBtn icon={<I.Pin size={13}/>} title="Pin to active project context" active={pinned} onClick={()=>{setPinned(!pinned);flash(pinned?"Unpinned from context":"Pinned to Paramount project context")}}/>
<TBtn icon={<I.Maximize size={13}/>}/>
<Sep/><TBtn icon={<I.MsgCircle size={13}/>} label={`${openC.length}`} active={rightOpen&&rightTab==="comments"} onClick={()=>{if(rightOpen&&rightTab==="comments")setRightOpen(false);else{setRightOpen(true);setRightTab("comments")}}}/>
<Sep/><TBtn icon={<I.Eye size={13}/>} label="Markup" active={showMarkup}/><TBtn icon={<I.Edit size={13}/>} label="3" dropdown active/>
<Sep/><TBtn icon={<I.Clock size={13}/>} label="v2" dropdown/>
<Sep/><TBtn icon={<I.Settings size={13}/>} title="Document settings" onClick={()=>flash("Document settings…")}/>
<div style={{flex:1}}/><button onClick={()=>{if(rightOpen&&rightTab==="send")setRightOpen(false);else{setRightOpen(true);setRightTab("send")}}} style={{padding:"4px 12px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,backgroundColor:(rightOpen&&rightTab==="send")?c.accentBtn:c.accentBtn+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:5,color:(rightOpen&&rightTab==="send")?"#fff":c.accentBtn,fontFamily:font.sans,fontSize:11.5,fontWeight:600,height:28}}><I.Spark size={13}/>Ask {agent.name}</button>
</div>
</>}
{/* ─── WEB TOOLBAR ─── */}
{activeTab.type==="web"&&<div style={{display:"flex",alignItems:"center",gap:4,padding:"5px 8px",borderBottom:`1px solid ${c.border}`,backgroundColor:activeTab.incognito?c.incBg:c.bgPanel,flexShrink:0}}>
<button style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:activeTab.incognito?c.incText:c.textSec}}><I.ArrowL size={15}/></button>
<button style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:activeTab.incognito?c.incBorder:c.textTer}}><I.ArrowR size={15}/></button>
<button style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:activeTab.incognito?c.incText:c.textSec}}><I.Refresh size={14}/></button>
<div style={{flex:1,display:"flex",alignItems:"center",gap:6,padding:"5px 12px",borderRadius:R.full,backgroundColor:activeTab.incognito?"#1a1428":c.bgInput,border:`1px solid ${activeTab.incognito?c.incBorder:c.borderLight}`,minWidth:0}}>
{activeTab.incognito?<I.Mask size={12} color={c.incText}/>:<I.Lock size={12} color={c.green}/>}
<input defaultValue="https://ecf.cacd.uscourts.gov/doc1/031139485672" style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:12.5,fontFamily:font.sans,outline:"none",color:activeTab.incognito?c.incText:c.textPri,minWidth:0}} placeholder="Search or enter URL"/>
</div>
<button onClick={()=>{setBookmarked(!bookmarked);flash(bookmarked?"Removed":"Bookmarked")}} style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Star size={15} color={bookmarked?c.warn:c.textTer}/></button>
<Sep/><TBtn icon={<I.Book size={13}/>} active={readerMode} onClick={()=>{setReaderMode(!readerMode);flash(readerMode?"Page view":"Reader mode")}}/>
<TBtn icon={<I.Save size={13}/>} label="Save" onClick={()=>flash("Saving…")}/>
<TBtn icon={<I.Scissors size={13}/>} label="Clip" onClick={()=>{setClipsCount(n=>n+1);flash("Clipped to Clips: 4.4-1")}}/>
<Sep/><TBtn icon={<I.MsgCircle size={13}/>} label={`${openC.length}`} active={rightOpen&&rightTab==="comments"} onClick={()=>{if(rightOpen&&rightTab==="comments")setRightOpen(false);else{setRightOpen(true);setRightTab("comments")}}}/>
<Sep/><TBtn icon={<I.Settings size={13}/>} title="Browser settings" onClick={()=>flash("Browser settings…")}/>
<button onClick={()=>{if(rightOpen&&rightTab==="send")setRightOpen(false);else{setRightOpen(true);setRightTab("send")}}} style={{padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,backgroundColor:(rightOpen&&rightTab==="send")?c.accentBtn:c.accentBtn+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:(rightOpen&&rightTab==="send")?"#fff":c.accentBtn,fontFamily:font.sans,fontSize:10.5,fontWeight:600,height:26}}><I.Spark size={12}/>Ask {agent.name}</button>
</div>}
{findBar&&<div style={{display:"flex",alignItems:"center",gap:6,padding:"5px 12px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt,flexShrink:0}}><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>}
{/* ─── NOTE CONTENT ─── */}
{activeTab.type==="note"&&<div style={{flex:1,overflowY:"auto",padding:"20px 28px 40px",userSelect:"text"}}>
<div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4}}><span style={{fontSize:20}}>☀️</span><div style={{fontSize:21,fontWeight:700}} contentEditable suppressContentEditableWarning>Today — April 4, 2026</div></div>
<div style={{display:"flex",alignItems:"center",gap:6,fontSize:10.5,color:c.textTer,marginBottom:20}}><Dot color="#31588c" size={5}/>Paramount · 2h ago · <span style={{padding:"1px 6px",borderRadius:R.full,backgroundColor:c.warn+"15",color:c.warn,fontSize:9,fontWeight:600}}>📌 Pinned</span></div>
<div style={{fontSize:14,lineHeight:1.75,color:c.textSec}}>
<p style={{marginBottom:12}}>Trial May 4 — 30 days out. Focus items for today.</p>
<h2 style={{fontSize:16,fontWeight:700,color:c.textPri,margin:"18px 0 8px",paddingBottom:5,borderBottom:`1px solid ${c.borderLight}`}}>Expert Motions</h2>
<div style={{margin:"12px 0",padding:"10px 12px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}>
<div style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em",marginBottom:6}}>📋 Task List</div>
{[{text:"Finalize MIL No. 3 re: Sanli",done:false,due:"Apr 7"},{text:"Review Christensen engagement agreement",done:true,due:"Apr 3"},{text:"Prep Sanli depo cross-exam outline",done:false,due:"Apr 10"}].map((t,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 0",borderBottom:i<2?`1px solid ${c.borderLight}`:"none"}}><input type="checkbox" checked={t.done} readOnly style={{accentColor:c.accentBtn,width:13,height:13}}/><span style={{flex:1,fontSize:12.5,textDecoration:t.done?"line-through":"none",color:t.done?c.textTer:c.textPri}}>{t.text}</span><span style={{fontSize:9.5,color:c.warn,fontWeight:500}}>{t.due}</span></div>)}
</div>
<h2 style={{fontSize:16,fontWeight:700,color:c.textPri,margin:"18px 0 8px",paddingBottom:5,borderBottom:`1px solid ${c.borderLight}`}}>Activity</h2>
<div style={{margin:"12px 0",padding:"10px 12px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}>
<div style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em",marginBottom:6}}>⚡ Activity Feed</div>
{[{a:"Elnor",action:"Completed Sanli report analysis",time:"45m",color:c.agentAv},{a:"Scout",action:"Found 3 comparable signage transactions",time:"1h",color:"#5B5F97"}].map((x,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"5px 0",borderBottom:i<1?`1px solid ${c.borderLight}`:"none"}}><Av letter={x.a[0]} color={x.color} size={18}/><div style={{flex:1}}><span style={{fontSize:11.5,fontWeight:550}}>{x.a}</span><span style={{fontSize:11.5,color:c.textSec}}> — {x.action}</span></div><span style={{fontSize:9.5,color:c.textTer}}>{x.time}</span></div>)}
</div>
<p style={{marginBottom:12}}>Cross-reference Sanli discount rate (18%) against industry comparables.</p>
</div>
</div>}
{/* ─── DOC CONTENT ─── */}
{activeTab.type==="doc"&&<div style={{flex:1,overflowY:"auto",padding:"24px 32px 40px",fontSize:13.5,lineHeight:1.75,color:c.textSec,userSelect:"text"}}>
<h1 style={{fontSize:20,fontWeight:700,color:c.textPri,margin:"20px 0 10px"}}>Expert Report of Dr. Mehmet Sanli</h1>
<h2 style={{fontSize:17,fontWeight:700,color:c.textPri,margin:"18px 0 8px",paddingBottom:4,borderBottom:`1px solid ${c.borderLight}`}}>I. Summary</h2>
<p style={{marginBottom:8}}>Plaintiff's claimed damages of $4.2 million are speculative. Based on my analysis, actual damages are approximately $380,000.</p>
<p style={{marginBottom:8}}>My analysis employs a <span style={{backgroundColor:c.accentBtn+"18",padding:"1px 3px",borderRadius:3}}>willing buyer-willing seller</span> framework with an 18% discount rate.</p>
<div style={{margin:"20px 0",padding:"16px 20px",backgroundColor:"#f7f7f0",border:"1px solid #e0ddd0",borderRadius:4}}>
<div style={{fontSize:12,fontWeight:600,color:"#666",marginBottom:8,fontFamily:font.sans}}>TABLE 1 — Damages Comparison</div>
<table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}><thead><tr style={{borderBottom:"2px solid #ccc"}}><th style={{textAlign:"left",padding:"6px 8px",fontFamily:font.sans,fontSize:12}}>Category</th><th style={{textAlign:"right",padding:"6px 8px",fontFamily:font.sans,fontSize:12}}>Paramount</th><th style={{textAlign:"right",padding:"6px 8px",fontFamily:font.sans,fontSize:12}}>Dr. Sanli</th></tr></thead><tbody>
<tr style={{borderBottom:"1px solid #eee"}}><td style={{padding:"6px 8px"}}>Lost signage revenue</td><td style={{textAlign:"right",padding:"6px 8px"}}>$2,840,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$210,000</td></tr>
<tr style={{borderBottom:"1px solid #eee"}}><td style={{padding:"6px 8px"}}>Permit value diminution</td><td style={{textAlign:"right",padding:"6px 8px"}}>$980,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$120,000</td></tr>
<tr style={{fontWeight:700,borderTop:"2px solid #333"}}><td style={{padding:"6px 8px"}}>Total</td><td style={{textAlign:"right",padding:"6px 8px"}}>$4,200,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$380,000</td></tr>
</tbody></table>
</div>
</div>}
{/* ─── WEB CONTENT ─── */}
{activeTab.type==="web"&&<div style={{flex:1,overflowY:"auto",backgroundColor:activeTab.incognito?"#1a1428":"#fff",userSelect:"text"}}>
{activeTab.incognito&&<div style={{backgroundColor:c.incBg,color:c.incText,padding:"6px 16px",fontSize:11,display:"flex",alignItems:"center",gap:6,borderBottom:`1px solid ${c.incBorder}`}}><I.Mask size={12} color={c.incText}/>Incognito — no signals emitted</div>}
<div style={{maxWidth:900,margin:"0 auto",padding:"20px 40px 60px",fontFamily:"Georgia,serif",color:"#222",lineHeight:1.7,fontSize:14.5}}>
<div style={{textAlign:"center",borderBottom:"2px solid #333",paddingBottom:16,marginBottom:20}}>
<div style={{fontSize:11,color:"#666",letterSpacing:".1em",textTransform:"uppercase",marginBottom:4}}>United States District Court — Central District of California</div>
<div style={{fontSize:18,fontWeight:700,marginBottom:4}}>PARAMOUNT CONTRACTORS v. CITY OF LOS ANGELES</div>
<div style={{fontSize:13,color:"#888"}}>Case No. BC587659 | Filed: March 15, 2026</div>
</div>
<h2 style={{fontSize:16,fontWeight:700,margin:"20px 0 10px",fontFamily:font.sans}}>PLAINTIFF'S MOTION IN LIMINE NO. 3</h2>
<h3 style={{fontSize:14,fontWeight:600,margin:"16px 0 8px",fontFamily:font.sans,color:"#444"}}>To Exclude Expert Testimony of Dr. Mehmet Sanli</h3>
<p>Dr. Sanli's methodology suffers from three defects: (1) improper "willing buyer-willing seller" framework; (2) ignoring City valuations; (3) <span style={{backgroundColor:c.accentBtn+"18",padding:"1px 3px",borderRadius:3}}>discount rate of 18%</span> unsupported by comparables.</p>
<h3 style={{fontSize:14,fontWeight:600,margin:"20px 0 8px",fontFamily:font.sans,color:"#444"}}>II. LEGAL STANDARD</h3>
<p>Under <em>Sargon</em>, the trial court acts as "gatekeeper." 55 Cal.4th at 770.</p>
</div>
</div>}
{/* ─── CLIPS CONTENT ─── */}
{activeTab.type==="clips"&&<div style={{flex:1,overflowY:"auto",padding:"20px 28px 40px",userSelect:"text"}}>
<div style={{display:"flex",alignItems:"center",gap:8,marginBottom:16}}><span style={{fontSize:18}}>✂️</span><div style={{fontSize:19,fontWeight:700,color:c.purple}}>Clips: 4.4-1</div><span style={{fontSize:10,padding:"2px 8px",borderRadius:R.full,backgroundColor:c.purple+"12",color:c.purple,fontWeight:600}}>Session Active</span></div>
{[{source:"Sanli Expert Report.pdf",text:"I estimate actual damages to be approximately $380,000 using a willing buyer-willing seller framework with an 18% discount rate.",time:"12:34 PM"},{source:"ecf.cacd.uscourts.gov — MIL No. 3",text:"Dr. Sanli's discount rate of 18% is unsupported by any comparable transaction data.",time:"12:41 PM"}].map((clip,i)=><div key={i} style={{marginBottom:16,padding:"12px 16px",borderRadius:R.md,border:`1px solid ${c.purple}30`,borderLeft:`3px solid ${c.purple}`,backgroundColor:c.purple+"04"}}>
<div style={{display:"flex",alignItems:"center",gap:6,marginBottom:6}}><I.Scissors size={11} color={c.purple}/><span style={{fontSize:10.5,fontWeight:600,color:c.purple}}>{clip.source}</span><span style={{fontSize:9,color:c.textTer,marginLeft:"auto"}}>{clip.time}</span></div>
<div style={{fontSize:13,lineHeight:1.6,color:c.textSec}}>{clip.text}</div>
</div>)}
<div style={{padding:"16px 0",borderTop:`1px solid ${c.borderLight}`}}><div style={{fontSize:13,lineHeight:1.7,color:c.textTer,fontStyle:"italic"}} contentEditable suppressContentEditableWarning>Add notes to this session…</div></div>
</div>}
{/* Bubble menu */}
{bubbleMenu&&<div data-bubble="1" style={{position:"absolute",left:Math.max(10,bubbleMenu.x-120),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={()=>{setNewCm({text:bubbleMenu.text});setBubbleMenu(null);setRightOpen(true);setRightTab("comments")}} 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/>
<button onClick={()=>{flash(`Sent to ${agent.name}`);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}}><I.Spark size={11}/>Ask {agent.name}</button>
{activeTab.type==="web"&&<><button onClick={()=>{flash("Summarize…");dismissBubble()}} style={{padding:"5px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textSec,fontSize:11,fontFamily:font.sans}}>Summarize</button><button onClick={()=>{setClipsCount(n=>n+1);flash("Clipped");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}}><I.Scissors size={11}/>Clip</button></>}
{isNoteType&&["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}}>{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>
{/* ═══ SHARED RIGHT PANEL ═══ */}
{rightOpen&&<div style={{width:rightWidth,flexShrink:0,borderLeft:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanelAlt,overflow:"hidden",position:"relative"}}>
<div style={{position:"absolute",left:0,top:0,width:4,height:"100%",cursor:"col-resize",zIndex:10}} onMouseDown={e=>{const sX=e.clientX,sW=rightWidth;const m=ev=>setRightWidth(Math.max(240,Math.min(450,sW-(ev.clientX-sX))));const u=()=>{document.removeEventListener("mousemove",m);document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",m);document.addEventListener("mouseup",u)}}/>
<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 ({openC.length})</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}/>Ask {agent.name}</button>
<button onClick={()=>setRightOpen(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>
{/* Comments tab */}
{rightTab==="comments"&&<div style={{flex:1,overflowY:"auto",padding:"8px 0"}}>
{newCm&&<div style={{margin:"0 8px 10px",borderRadius:R.sm,border:`2px solid ${c.accentBtn}40`,backgroundColor:c.bgCard,overflow:"hidden"}}><div style={{padding:"8px 11px"}}>{newCm.text&&<div style={{fontSize:10.5,color:c.accentBtn,backgroundColor:c.accentBtn+"08",padding:"3px 6px",borderRadius:3,marginBottom:8,fontStyle:"italic"}}>"{newCm.text.slice(0,80)}"</div>}<textarea ref={cmRef} value={newCmText} onChange={e=>setNewCmText(e.target.value)} placeholder="Comment…" onKeyDown={e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();addComment()}}} style={{width:"100%",padding:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:42,resize:"vertical"}}/><div style={{display:"flex",gap:6,marginTop:6}}><Btn small primary onClick={addComment} disabled={!newCmText.trim()}>Add</Btn><Btn small ghost onClick={()=>{setNewCm(null);setNewCmText("")}}>Cancel</Btn></div></div></div>}
{openC.length>0&&<div style={{padding:"3px 10px 6px"}}><span style={{fontSize:9.5,fontWeight:650,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Open ({openC.length})</span></div>}
{openC.map(cm=><CmCard key={cm.id} cm={cm} resolved={false}/>)}
{resolvedC.length>0&&<div style={{padding:"8px 10px 4px"}}><span style={{fontSize:9.5,fontWeight:650,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Resolved ({resolvedC.length})</span></div>}
{resolvedC.map(cm=><CmCard key={cm.id} cm={cm} resolved={true}/>)}
<div style={{padding:"8px 10px"}}><div style={{display:"flex",alignItems:"center",gap:5,padding:"7px 9px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"text"}} onClick={()=>setNewCm({text:""})}><I.Plus size={11} color={c.textTer}/><span style={{fontSize:11.5,color:c.textTer}}>Add general comment…</span></div></div>
</div>}
{/* ═══ SEND TO AGENT TAB — FULL from Q_NOTES_FULL ═══ */}
{rightTab==="send"&&<><div style={{flex:1,overflowY:"auto",padding:12,backgroundColor:c.bgPanel}}>
{/* Agent selector */}
<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Agent</div>
<div style={{position:"relative"}}><div onClick={e=>{e.stopPropagation();setAgentDrop(!agentDrop)}} style={{display:"flex",alignItems:"center",gap:6,padding:"7px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"pointer"}}><Av letter={agent.letter} color={agent.color} size={20}/><span style={{flex:1,fontSize:12,fontWeight:600}}>{agent.name}</span><I.ChevD size={11} color={c.textTer}/></div>
{agentDrop&&<div style={{position:"absolute",top:"100%",left:0,right:0,marginTop:2,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,padding:3}}>{agents.map((a,i)=><DItem key={a.name} active={i===agentIdx} onClick={()=>{setAgentIdx(i);setAgentDrop(false)}}><Av letter={a.letter} color={a.color} size={18}/>{a.name}{i===agentIdx&&<I.Check size={12} color={c.accentBtn}/>}</DItem>)}</div>}</div>
</div>
{/* Send in chat */}
<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Send in</div>
<div style={{position:"relative"}}><div onClick={e=>{e.stopPropagation();setChatDrop(!chatDrop)}} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,fontSize:11.5,cursor:"pointer"}}><Dot color={chats[chatIdx].color} size={5}/><span style={{flex:1,color:c.textSec}}>{chats[chatIdx].name}</span>{chats[chatIdx].origin&&<span style={{fontSize:9,color:c.textTer}}>origin</span>}<I.ChevD size={10} color={c.textTer}/></div>
{chatDrop&&<div style={{position:"absolute",top:"100%",left:0,right:0,marginTop:2,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,padding:3}}>{chats.map((ch,i)=><DItem key={ch.name} active={i===chatIdx} onClick={()=>{setChatIdx(i);setChatDrop(false)}}><Dot color={ch.color} size={5}/>{ch.name}{ch.origin&&<span style={{fontSize:9,color:c.textTer}}>origin</span>}{i===chatIdx&&<I.Check size={12} color={c.accentBtn}/>}</DItem>)}</div>}</div>
</div>
{/* Context scope */}
<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Context scope</div>
<Radio selected={sendScope==="full"} label={`Full ${activeTab.type} + all comments`} onClick={()=>setSendScope("full")}/>
<Radio selected={sendScope==="comments_only"} label="Comments & referenced portions" onClick={()=>setSendScope("comments_only")}/>
<Radio selected={sendScope==="select"} label="Select comments & references" onClick={()=>setSendScope("select")}/>
</div>
{/* Comments list */}
{openC.length>0&&<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Comments ({sendScope==="select"?`${selectedCmIds.size} selected`:openC.length})</div>
{openC.map(cm=><div key={cm.id} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${sendScope==="select"&&selectedCmIds.has(cm.id)?c.accentBtn+"50":c.borderLight}`,marginBottom:3,backgroundColor:sendScope==="select"&&selectedCmIds.has(cm.id)?c.accentBtn+"06":c.bgPanelAlt,cursor:sendScope==="select"?"pointer":"default"}} onClick={()=>{if(sendScope==="select")toggleCmSelect(cm.id)}}>
{sendScope==="select"&&<input type="checkbox" checked={selectedCmIds.has(cm.id)} readOnly style={{width:12,height:12,accentColor:c.accentBtn,flexShrink:0}}/>}
<div style={{flex:1,minWidth:0,fontSize:10,color:c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{cm.body}</div>
</div>)}
</div>}
{/* Output mode */}
<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Output mode</div>
<Radio selected={outputMode==="respond_in_chat"} label="Respond in chat" desc="Opens chat with context." onClick={()=>setOutputMode("respond_in_chat")}/>
<Radio selected={outputMode==="send_with_instructions"} label="Send with instructions" desc="Agent processes and produces result." onClick={()=>setOutputMode("send_with_instructions")}/>
</div>
{/* Result format — differs by tab type */}
{outputMode==="send_with_instructions"&&<>
<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Result format</div>
<Radio selected={subMode==="tracked_changes"} label="Apply as tracked changes" disabled={activeTab.type==="web"} onClick={()=>setSubMode("tracked_changes")}/>
<Radio selected={subMode==="revised_copy"} label={isNoteType?"Create revised copy":"Revise artifact (new version)"} onClick={()=>setSubMode("revised_copy")}/>
<Radio selected={subMode==="respond_in_comments"} label="Respond in comments" desc="Agent replies to each comment." onClick={()=>setSubMode("respond_in_comments")}/>
</div>
<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textPri,marginBottom:5}}>Instruction <span style={{color:c.error}}>*</span></div>
<textarea value={instruction} onChange={e=>setInstruction(e.target.value)} placeholder={`Tell ${agent.name} what to do…`} style={{width:"100%",padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${instruction.trim()?c.border:c.warn+"60"}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:50,resize:"vertical"}}/>
{!instruction.trim()&&<div style={{fontSize:9,color:c.warn,marginTop:3}}>Required</div>}
</div>
</>}
{outputMode==="respond_in_chat"&&<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Message (optional)</div>
<textarea value={instruction} onChange={e=>setInstruction(e.target.value)} placeholder="Optional context…" style={{width:"100%",padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:44,resize:"vertical"}}/>
</div>}
<div style={{fontSize:9,color:c.textTer}}>Reference: {activeTab.type}:{activeTab.id} included automatically.</div>
</div>
<div style={{padding:"10px 12px",borderTop:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanel,display:"flex",flexDirection:"column",gap:6}}>
<div style={{display:"flex",gap:6}}>
<Btn primary disabled={outputMode==="send_with_instructions"&&!instruction.trim()} onClick={handleSend} style={{flex:1,justifyContent:"center"}}><I.Spark size={12} color="#fff"/>{outputMode==="respond_in_chat"?"Open in Chat":`Send to ${agent.name}`}</Btn>
<Btn ghost onClick={()=>setRightOpen(false)}>Cancel</Btn>
</div>
<div style={{textAlign:"center"}}><span style={{fontSize:11,color:c.accentBtn,cursor:"pointer",fontWeight:500}}>Continue in full chat →</span></div>
</div></>}
</div>}
</div>
{/* Downloads tray */}
{showDownloads&&<div style={{borderTop:`1px solid ${c.border}`,backgroundColor:c.bgPanelAlt,padding:"6px 12px",display:"flex",alignItems:"center",gap:10,fontSize:11,fontFamily:font.sans,flexShrink:0}}>
<I.Download size={13} color={c.accentBtn}/>
{[{name:"BC587659_MIL_3.pdf",size:"2.1 MB",done:true},{name:"Sanli_Expert.pdf",size:"8.4 MB",done:false,progress:67}].map((d,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"3px 8px",borderRadius:R.sm,backgroundColor:c.bgCard,border:`1px solid ${c.borderLight}`}}>
<span style={{fontWeight:500,color:c.textPri}}>{d.name}</span>
{d.done?<span style={{color:c.green,fontSize:10}}>✓</span>:<div style={{width:40,height:4,backgroundColor:c.bgInput,borderRadius:2,overflow:"hidden"}}><div style={{width:`${d.progress}%`,height:"100%",backgroundColor:c.accentBtn,borderRadius:2}}/></div>}
<span style={{color:c.textTer,fontSize:10}}>{d.size}</span>
{d.done&&<span style={{color:c.accentBtn,fontSize:10,cursor:"pointer"}}>Open</span>}
</div>)}
<span style={{marginLeft:"auto",cursor:"pointer"}} onClick={()=>setShowDownloads(false)}><I.X size={11} color={c.textTer}/></span>
</div>}
{/* ═══ STATUS BAR ═══ */}
<div style={{display:"flex",alignItems:"center",gap:8,padding:"3px 12px",borderTop:`1px solid ${c.border}`,backgroundColor:c.bgPanelAlt,fontSize:10,color:c.textTer,flexShrink:0}}>
<span style={{display:"flex",alignItems:"center",gap:3}}><I.Clock size={9}/>{Math.floor(sessionMinutes/60)}h {sessionMinutes%60}m</span>
<span>·</span><span style={{display:"flex",alignItems:"center",gap:3}}><I.Scissors size={9}/>{clipsCount} clips</span>
<span>·</span><span>{tabs.length} tabs</span>
{!showDownloads&&<><span>·</span><span style={{cursor:"pointer",color:c.accentBtn}} onClick={()=>setShowDownloads(true)}><I.Download size={9}/> 2</span></>}
<span style={{marginLeft:"auto",cursor:"pointer",color:c.accentBtn,fontWeight:500}} onClick={()=>flash("New session started")}>New Session</span>
<span>·</span><span>100%</span>
</div>
</div>
</div>
);
}