Q_PROJECT_V2.jsx
Design Mockups/DOC20 Mockups/Q_PROJECT_V2.jsx
import { useState, useRef, useEffect } from "react";
const font={sans:"'Söhne','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif",mono:"'Söhne Mono','SF Mono','Menlo',monospace"};
const R={sm:"6px",md:"10px",lg:"14px",full:"9999px"};
const c={bgApp:"#F8F8F6",bgPanel:"#FFFFFF",bgPanelAlt:"#F9FAFB",bgCard:"#FFFFFF",bgInput:"#EFF1F3",bgHeader:"#FFFFFF",textPri:"#1A1D21",textSec:"#5E6570",textTer:"#8B919A",accent:"#4A5060",accentLight:"#EDEEF0",accentBtn:"#31588c",accentBtnHover:"#284A78",warn:"#D97706",error:"#B04040",border:"#E0E2E5",borderLight:"#ECEEF0",green:"#2E8B57",neutral:"#6B7280",agentAv:"#a1a7aa"};
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={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"/>,X:p=><Ic {...p} d="M18 6L6 18 M6 6l12 12"/>,Pin:p=><Ic {...p} d="M12 17v5 M9 2l.5 5L7 10l1.5 3h7L17 10l-2.5-3L15 2"/>,Check:p=><Ic {...p} d="M20 6L9 17l-5-5"/>,List:p=><Ic {...p} d="M8 6h13 M8 12h13 M8 18h13 M3 6h.01 M3 12h.01 M3 18h.01"/>,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"/>,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"/>,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"/>,Upload:p=><Ic {...p} d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4 M17 8l-5-5-5 5 M12 3v12"/>,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"/>,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"/>,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 M10 9H8"/>,Bot:p=><Ic {...p} d="M12 2a2 2 0 012 2v1h2a4 4 0 014 4v6a4 4 0 01-4 4H8a4 4 0 01-4-4V9a4 4 0 014-4h2V4a2 2 0 012-2z M9 13h.01 M15 13h.01"/>,Chat:p=><Ic {...p} d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/>,Chain: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"/>,Settings:p=><Ic {...p} d="M12 15a3 3 0 100-6 3 3 0 000 6z"/>,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"/>,Minus:p=><Ic {...p} d="M5 12h14"/>,Layers:p=><Ic {...p} d="M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5"/>,Dollar:p=><Ic {...p} d="M12 1v22 M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>,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"/>,SplitV:p=><Ic {...p} d="M3 3h7v18H3V3z M14 3h7v18h-7V3z"/>,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"/>,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"/>,};
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 Pill=({color:cl,children,style:s})=>{const fg=cl||c.textSec;return(<span style={{display:"inline-flex",alignItems:"center",gap:4,padding:"2px 8px",borderRadius:4,fontSize:11,fontWeight:550,lineHeight:"16px",height:22,boxSizing:"border-box",whiteSpace:"nowrap",color:fg,backgroundColor:fg+"12",border:`1px solid ${fg}26`,...s}}>{children}</span>)};
const Btn=({children,primary,ghost,small,onClick,style:s,...p})=><button onClick={onClick} style={{padding:small?"2px 8px":"5px 14px",borderRadius:R.sm,border:primary?"none":ghost?`1.5px solid ${c.border}`:`1px solid ${c.border}`,backgroundColor:primary?c.accentBtn:"transparent",color:primary?"#fff":ghost?c.textPri:c.textSec,fontSize:small?11:12.5,fontWeight:primary?550:450,cursor:"pointer",fontFamily:font.sans,display:"flex",alignItems:"center",gap:5,height:small?22:28,boxSizing:"border-box",...s}} {...p}>{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 Toggle=({on,onChange})=><div onClick={onChange} style={{width:36,height:20,borderRadius:10,backgroundColor:on?c.accentBtn:c.bgInput,padding:2,cursor:"pointer"}}><div style={{width:16,height:16,borderRadius:8,backgroundColor:"#fff",transform:on?"translateX(16px)":"translateX(0)",boxShadow:"0 1px 2px rgba(0,0,0,0.15)",transition:"transform 0.15s"}}/></div>;
const Select=({value,options})=>{const[open,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{if(!open)return;const h=e=>{if(ref.current&&!ref.current.contains(e.target))setOpen(false)};document.addEventListener("mousedown",h);return()=>document.removeEventListener("mousedown",h)},[open]);return(<div ref={ref} style={{position:"relative",display:"inline-block"}}><button onClick={()=>setOpen(!open)} style={{padding:"5px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgPanel,fontSize:12,color:c.textSec,cursor:"pointer",fontFamily:font.sans,height:28,display:"inline-flex",alignItems:"center",gap:8}}>{value} ▾</button>{open&&options&&<div style={{position:"absolute",top:30,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:2}}>{options.map(o=><button key={o} onClick={()=>setOpen(false)} style={{display:"block",width:"100%",padding:"7px 10px",border:"none",cursor:"pointer",backgroundColor:o===value?c.accentLight:"transparent",color:c.textPri,fontSize:12,textAlign:"left",fontFamily:font.sans,borderRadius:R.sm}}>{o}</button>)}</div>}</div>)};
const TBtn=({icon,title,active,onClick})=><button onClick={onClick} title={title} style={{width:28,height:26,borderRadius:3,border:"none",cursor:"pointer",backgroundColor:active?c.accentBtn+"12":"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:active?c.accentBtn:c.textSec}} onMouseEnter={e=>{if(!active)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{if(!active)e.currentTarget.style.backgroundColor="transparent"}}>{icon}</button>;
const Sep=()=><div style={{width:1,height:18,backgroundColor:c.borderLight,margin:"0 3px",flexShrink:0}}/>;
const SubTab=({label,active,onClick,first,last})=><button onClick={onClick} style={{padding:"8px 16px",fontSize:12.5,fontWeight:active?600:450,color:active?c.accentBtn:"#2A2D35",cursor:"pointer",fontFamily:font.sans,border:`1.5px solid ${active?c.accentBtn+"50":c.border}`,borderRight:last?undefined:"none",backgroundColor:active?c.accentBtn+"06":"#F0F1F3",borderRadius:first?"6px 0 0 6px":last?"0 6px 6px 0":"0"}}>{label}</button>;
/* ── Mock Data ── */
const projects=[{id:1,name:"Henderson v. DataCorp",color:"#31588c"},{id:2,name:"Quark Research",color:"#2E8B57"},{id:3,name:"Internal Ops",color:"#8B7355"}];
const mockNotes=[{id:"n1",title:"Henderson Discovery Priorities",kind:"standard",excerpt:"Key documents to review from batch #4 including privileged communications...",modified:"2h ago",comments:3,pinned:true,pending:true},{id:"n2",title:"Weekly Task List",kind:"todo",excerpt:"□ Review batch #5 □ Draft motion response ☑ Update privilege log...",modified:"4h ago",comments:0,pinned:true,pending:false},{id:"n3",title:"Judge Chen Conference Notes",kind:"standard",excerpt:"Discovery deadline extended to April 15. Privilege log due March 28...",modified:"3d ago",comments:2,pinned:false,pending:false},{id:"n4",title:"Deposition Prep — Henderson",kind:"standard",excerpt:"Key questions for March 20 deposition of DataCorp CTO...",modified:"5d ago",comments:0,pinned:false,pending:false}];
const mockDocs=[{id:"d1",title:"Henderson_Complaint.pdf",type:"PDF",size:"2.4 MB",source:"Project Bucket",modified:"1d ago"},{id:"d2",title:"Discovery_Batch_3.zip",type:"Archive",size:"45 MB",source:"Project Bucket",modified:"2d ago"},{id:"d3",title:"Standing_Orders.md",type:"Markdown",size:"12 KB",source:"Bucket: Firm Rules",modified:"1w ago",viaBucket:true},{id:"d4",title:"CDCA_Local_Rules.pdf",type:"PDF",size:"890 KB",source:"Bucket: Court Procedures",modified:"2w ago",viaBucket:true},{id:"d5",title:"Cost_Analysis_Q4.xlsx",type:"Spreadsheet",size:"340 KB",source:"Project Bucket",modified:"3d ago"},{id:"d6",title:"Privilege_Review_Template.docx",type:"DOCX",size:"56 KB",source:"Project Bucket",modified:"5d ago"}];
const mockGenerated=[{id:"g1",title:"Henderson Timeline v3",origin:"Chat: Henderson discovery",type:"Artifact",modified:"2h ago"},{id:"g2",title:"Privilege Log Draft",origin:"Task: Review batch #4",type:"Document",modified:"1d ago"},{id:"g3",title:"Motion Response Outline",origin:"Chat: Motion brainstorm",type:"Artifact",modified:"3d ago"}];
const mockChats=[{id:"c1",title:"Henderson discovery analysis",subtype:"Chat",msgs:42,lastActive:"2m ago",unread:true},{id:"c2",title:"Motion response brainstorm",subtype:"Chat",msgs:31,lastActive:"3h ago"},{id:"c3",title:"Henderson Doc Review Panel",subtype:"Multi-Agent",msgs:18,lastActive:"1d ago"},{id:"c4",title:"Red Team: Henderson Brief",subtype:"Red-Team",msgs:8,lastActive:"2d ago"}];
const mockTasks=[{id:"t1",title:"Review discovery batch #4",status:"running",agent:"Elnor",cost:"$2.14"},{id:"t2",title:"Draft motion response",status:"waiting",agent:"Elnor",cost:"$0.85"},{id:"t3",title:"Update privilege log",status:"complete",agent:"Elnor",cost:"$1.22"},{id:"t4",title:"Compile patent citations",status:"scheduled",agent:"Scout",cost:"$0.00"}];
const projectContent=[{type:"Chats",icon:<I.Chat size={13}/>,count:4,color:c.green},{type:"Notes",icon:<I.FileText size={13}/>,count:4,color:c.accentBtn},{type:"Tasks",icon:<I.Chain size={13}/>,count:4,color:c.warn},{type:"Panels",icon:<I.MsgCircle size={13}/>,count:1,color:c.accent},{type:"Forums",icon:<I.MsgCircle size={13}/>,count:2,color:c.accent},{type:"Documents",icon:<I.Folder size={13}/>,count:6,color:c.textSec},{type:"Generated",icon:<I.Spark size={13}/>,count:3,color:c.neutral},{type:"Automations",icon:<I.Clock size={13}/>,count:1,color:c.neutral}];
const mockComments=[{id:1,author:"You",color:c.accentBtn,body:"Need to follow up on March 2024 emails.",time:"2h ago",status:"open",anchor:"Email chain: Henderson → Outside Counsel",replies:[{id:11,author:"Elnor",color:c.agentAv,body:"Flagged 8 potentially privileged emails from that range.",time:"1h ago"}]},{id:2,author:"Elnor",color:c.agentAv,body:"Timeline conflict in paragraph 3 vs. deposition transcript.",time:"4h ago",status:"open",anchor:"deposition transcript from February 12",replies:[]}];
export default function ProjectPage() {
const [activeProj,setActiveProj]=useState(0);
const [projDrop,setProjDrop]=useState(false);
const [mainTab,setMainTab]=useState("Home");
const [docSubTab,setDocSubTab]=useState("Generated");
const [actSubTab,setActSubTab]=useState("Chats");
const [selectedNote,setSelectedNote]=useState("n1");
const [commentOpen,setCommentOpen]=useState(true);
const [noteListOpen,setNoteListOpen]=useState(true);
const [noteFilter,setNoteFilter]=useState("All");
const [showBudget,setShowBudget]=useState(true);
const [toggles,setToggles]=useState({overlay:true,autoCtx:true,costAlert:true,budgetOn:true});
const toggle=k=>setToggles(p=>({...p,[k]:!p[k]}));
const note=mockNotes.find(n=>n.id===selectedNote)||mockNotes[0];
const openC=mockComments.filter(x=>x.status==="open");
const proj=projects[activeProj];
const filtNotes=noteFilter==="All"?mockNotes:noteFilter==="Pinned"?mockNotes.filter(n=>n.pinned):noteFilter==="Todo"?mockNotes.filter(n=>n.kind==="todo"):mockNotes;
const mainTabs=["Home","Documents","Activity","Project Context","Configure"];
return (
<div style={{display:"flex",width:"100%",height:"100vh",fontFamily:font.sans,color:c.textPri,backgroundColor:c.bgApp,overflow:"hidden"}}>
<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}@keyframes thinkDot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}`}</style>
<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
{/* ═══ PROJECT HEADER ═══ */}
<div style={{padding:"12px 20px 0",backgroundColor:c.bgPanel,borderBottom:`1px solid ${c.border}`}}>
<div style={{display:"flex",alignItems:"center",gap:10,marginBottom:4}}>
<span style={{width:12,height:12,borderRadius:"50%",backgroundColor:proj.color}}/>
<h1 style={{fontSize:20,fontWeight:700,margin:0}}>{proj.name}</h1>
{/* Switch project */}
<div style={{position:"relative"}}>
<button onClick={()=>setProjDrop(!projDrop)} style={{padding:"3px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:11,color:c.textTer,fontFamily:font.sans,display:"flex",alignItems:"center",gap:3}}>Switch <I.ChevD size={10}/></button>
{projDrop&&<><div style={{position:"fixed",inset:0,zIndex:998}} onClick={()=>setProjDrop(false)}/><div style={{position:"absolute",top:"calc(100% + 4px)",left:0,zIndex:999,minWidth:220,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.12)",padding:4}}>
{projects.map((p,i)=><button key={p.id} onClick={()=>{setActiveProj(i);setProjDrop(false)}} style={{display:"flex",alignItems:"center",gap:8,width:"100%",padding:"7px 10px",border:"none",cursor:"pointer",backgroundColor:i===activeProj?c.accentLight:"transparent",borderRadius:R.sm,textAlign:"left",fontFamily:font.sans}}>
<span style={{width:8,height:8,borderRadius:"50%",backgroundColor:p.color}}/><span style={{fontSize:12,fontWeight:i===activeProj?600:450,color:c.textPri}}>{p.name}</span>
{i===activeProj&&<I.Check size={12} color={c.accentBtn}/>}
</button>)}
</div></>}
</div>
<div style={{flex:1}}/>
{/* Persistent add-to-project + cost below it */}
<div style={{display:"flex",flexDirection:"column",alignItems:"flex-end",gap:4}}>
<div style={{display:"flex",alignItems:"center",gap:8,padding:"10px 24px",borderRadius:R.md,border:`2px dashed ${c.accentBtn}40`,cursor:"pointer",backgroundColor:c.accentBtn+"05",minWidth:260}} onMouseEnter={e=>e.currentTarget.style.borderColor=c.accentBtn} onMouseLeave={e=>e.currentTarget.style.borderColor=c.accentBtn+"40"}>
<I.Plus size={16} color={c.accentBtn}/><span style={{fontSize:13.5,fontWeight:600,color:c.accentBtn}}>Add to Project / Drop here</span>
</div>
{showBudget&&<span style={{fontSize:10,color:c.textTer,padding:"2px 8px",borderRadius:R.full,backgroundColor:c.bgInput,cursor:"pointer"}} onClick={()=>setShowBudget(false)} title="Click to hide">$47.82 / $100</span>}
</div>
</div>
<div style={{margin:"0 0 10px 22px"}}>
<p style={{fontSize:13,color:c.textSec,margin:0}}>Document review and analysis for Henderson litigation</p>
</div>
{/* ═══ TABS ═══ */}
<div style={{display:"flex",gap:0}}>
{mainTabs.map((t,i)=><button key={t} onClick={()=>setMainTab(t)} style={{padding:"9px 18px",fontSize:13,fontWeight:mainTab===t?(t==="Home"||t==="Documents"||t==="Activity"?700:650):450,color:mainTab===t?c.accentBtn:"#2A2D35",cursor:"pointer",fontFamily:font.sans,border:`1.5px solid ${mainTab===t?c.border:"#CDD1D8"}`,borderBottom:mainTab===t?`2px solid ${c.accentBtn}`:`1.5px solid ${c.border}`,backgroundColor:mainTab===t?c.bgPanel:"#E8EAEE",borderRadius:i===0?"6px 0 0 0":i===mainTabs.length-1?"0 6px 0 0":"0",borderRight:i<mainTabs.length-1?"none":undefined,marginBottom:-1,position:"relative",zIndex:mainTab===t?1:0}}>{t}</button>)}
</div>
</div>
<div style={{flex:1,overflow:"hidden",display:"flex",flexDirection:"column"}}>
{/* ═══ HOME TAB (notes workspace) ═══ */}
{mainTab==="Home"&&<div style={{flex:1,display:"flex",overflow:"hidden"}}>
{/* Note list */}
{noteListOpen&&<div style={{width:240,flexShrink:0,borderRight:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanel}}>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"8px 10px",borderBottom:`1px solid ${c.borderLight}`}}>
<span style={{fontSize:12,fontWeight:650}}>Notes</span>
<div style={{display:"flex",gap:4}}>
<button style={{padding:"2px 7px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10.5,color:c.accentBtn,fontFamily:font.sans,display:"flex",alignItems:"center",gap:3}}><I.Plus size={9}/>New</button>
<button onClick={()=>setNoteListOpen(false)} title="Collapse" style={{padding:2,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",color:c.textTer}}><I.SplitV size={12}/></button>
</div>
</div>
<div style={{display:"flex",gap:3,padding:"5px 8px",borderBottom:`1px solid ${c.borderLight}`}}>
{["All","Pinned","Todo"].map(f=><button key={f} onClick={()=>setNoteFilter(f)} style={{padding:"2px 8px",borderRadius:R.full,border:`1px solid ${noteFilter===f?c.accentBtn+"40":c.borderLight}`,backgroundColor:noteFilter===f?c.accentBtn+"10":"transparent",fontSize:10,fontWeight:noteFilter===f?600:400,color:noteFilter===f?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans}}>{f}</button>)}
<div style={{flex:1}}/><span style={{fontSize:9.5,color:c.textTer,cursor:"pointer"}}>Date ▾</span>
</div>
<div style={{flex:1,overflowY:"auto"}}>
{filtNotes.map(n=><div key={n.id} onClick={()=>setSelectedNote(n.id)} style={{padding:"9px 10px",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"}}>
<div style={{display:"flex",alignItems:"center",gap:3,marginBottom:3}}>
{n.pinned&&<I.Pin size={9} color={c.warn}/>}
<span style={{fontSize:12.5,fontWeight:600,color:c.textPri,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{n.title}</span>
{n.pending&&<Dot color={c.green} size={5}/>}
</div>
<div style={{fontSize:11,color:c.textTer,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",lineHeight:1.3,marginBottom:3}}>{n.excerpt}</div>
<div style={{display:"flex",alignItems:"center",gap:4,fontSize:9.5,color:c.textTer}}>
<span>{n.modified}</span>
{n.comments>0&&<>·<span>💬{n.comments}</span></>}
{n.kind==="todo"&&<Pill color={c.warn} style={{height:14,fontSize:8,padding:"0 4px"}}>Todo</Pill>}
</div>
</div>)}
</div>
</div>}
{!noteListOpen&&<div style={{width:28,flexShrink:0,borderRight:`1px solid ${c.border}`,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:10,cursor:"pointer",backgroundColor:c.bgPanelAlt}} onClick={()=>setNoteListOpen(true)}>
<I.ChevR size={12} color={c.textTer}/><div style={{writingMode:"vertical-rl",textOrientation:"mixed",fontSize:10,color:c.textTer,fontWeight:500,marginTop:6,opacity:.6}}>Notes</div>
</div>}
{/* Editor */}
<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden",backgroundColor:c.bgPanel}}>
<div style={{display:"flex",alignItems:"center",gap:1,padding:"4px 10px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanelAlt,flexShrink:0,flexWrap:"wrap"}}>
<select style={{height:22,borderRadius:3,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanel,fontSize:10.5,fontFamily:font.sans,color:c.textSec,padding:"0 4px",cursor:"pointer"}}><option>Paragraph</option><option>Heading 1</option><option>Heading 2</option></select><Sep/>
{["B","I","U"].map(b=><button key={b} style={{width:26,height:24,border:`1px solid ${c.borderLight}`,borderRadius:3,cursor:"pointer",backgroundColor:"transparent",fontWeight:b==="B"?700:400,fontStyle:b==="I"?"italic":"normal",textDecoration:b==="U"?"underline":"none",fontSize:11,color:c.textPri,fontFamily:font.sans}}>{b}</button>)}<Sep/>
<TBtn icon={<I.List size={12}/>} title="Bullet"/><TBtn icon={<span style={{fontSize:10,fontFamily:font.mono}}>1.</span>} title="Numbered"/><TBtn icon={<I.Check size={12}/>} title="Task"/><Sep/>
<TBtn icon={<I.Chain size={12}/>} title="Link"/><TBtn icon={<span style={{fontSize:10,fontFamily:font.mono}}><></span>} title="Code"/><TBtn icon={<I.Minus size={12}/>} title="Rule"/><Sep/>
<TBtn icon={<I.Undo size={12}/>} title="Undo"/><TBtn icon={<I.Redo size={12}/>} title="Redo"/><Sep/>
<TBtn icon={<I.MsgCircle size={12}/>} title="Comments" active={commentOpen} onClick={()=>setCommentOpen(!commentOpen)}/><TBtn icon={<I.Spark size={12}/>} title="AI"/><TBtn icon={<I.Upload size={12}/>} title="Import"/><TBtn icon={<I.Download size={12}/>} title="Export"/><TBtn icon={<I.Clock size={12}/>} title="History"/>
{note.pending&&<><Sep/><Btn small style={{backgroundColor:c.green+"15",color:c.green,border:`1px solid ${c.green}40`,fontSize:9,height:20,gap:2,padding:"0 6px"}}><I.Check size={9}/>Accept All</Btn><Btn small style={{backgroundColor:c.error+"10",color:c.error,border:`1px solid ${c.error}30`,fontSize:9,height:20,gap:2,padding:"0 6px"}}><I.X size={9}/>Reject All</Btn></>}
<div style={{flex:1}}/>
{note.pending&&<div style={{display:"flex",alignItems:"center",gap:3,fontSize:9.5,color:c.agentAv}}><span style={{width:5,height:5,borderRadius:"50%",backgroundColor:c.agentAv,animation:"thinkDot 1.4s infinite"}}/><span>Elnor editing…</span></div>}
<span style={{fontSize:9,color:c.textTer,marginLeft:4}}>Saved 2m ago</span>
</div>
<div style={{flex:1,display:"flex",overflow:"hidden"}}>
<div style={{flex:1,overflowY:"auto",padding:"18px 24px 40px"}}>
<div contentEditable suppressContentEditableWarning style={{fontSize:20,fontWeight:700,color:c.textPri,outline:"none",marginBottom:8}}>{note.title}</div>
<div style={{display:"flex",gap:6,marginBottom:14,fontSize:10.5,color:c.textTer}}><span>Modified {note.modified}</span>{note.kind==="todo"&&<Pill color={c.warn} style={{height:16,fontSize:9,padding:"0 5px"}}>Todo</Pill>}</div>
<div style={{fontSize:13.5,lineHeight:1.75,color:c.textSec}}>
<p style={{marginBottom:12}}>Key documents to review from discovery batch #4, focusing on potentially privileged communications.</p>
<h2 style={{fontSize:16,fontWeight:700,color:c.textPri,margin:"16px 0 8px",paddingBottom:5,borderBottom:`1px solid ${c.borderLight}`}}>Priority Items</h2>
<ul style={{paddingLeft:20,marginBottom:12,lineHeight:1.8}}>
<li style={{marginBottom:3}}><span style={{backgroundColor:c.accentBtn+"12",borderRadius:2,padding:"0 2px",cursor:"pointer"}}>Email chain: Henderson → Outside Counsel (March 12-15)</span> <span style={{fontSize:9,color:c.accentBtn}}>💬1</span></li>
<li style={{marginBottom:3}}>Privileged strategy memo dated March 18, 2024</li>
<li style={{marginBottom:3}}><span style={{color:c.error,textDecoration:"line-through",opacity:.7}}>Draft settlement proposal</span><span style={{color:c.green,textDecoration:"underline"}}> Draft mediation brief and settlement framework</span><span style={{display:"inline-flex",gap:2,marginLeft:4,verticalAlign:"middle"}}><button style={{width:14,height:14,borderRadius:2,border:`1px solid ${c.green}40`,backgroundColor:c.green+"10",cursor:"pointer",display:"inline-flex",alignItems:"center",justifyContent:"center",padding:0}}><I.Check size={9} color={c.green}/></button><button style={{width:14,height:14,borderRadius:2,border:`1px solid ${c.error}30`,backgroundColor:c.error+"08",cursor:"pointer",display:"inline-flex",alignItems:"center",justifyContent:"center",padding:0}}><I.X size={9} color={c.error}/></button><span style={{fontSize:8,color:c.agentAv,fontStyle:"italic"}}>Elnor</span></span></li>
</ul>
</div>
</div>
{commentOpen&&<div style={{width:260,flexShrink:0,borderLeft:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanelAlt,overflow:"hidden"}}>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"10px 12px",borderBottom:`1px solid ${c.borderLight}`}}><span style={{fontSize:12.5,fontWeight:650}}>Comments</span><button onClick={()=>setCommentOpen(false)} style={{padding:2,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",color:c.textTer}}><I.X size={13}/></button></div>
<div style={{flex:1,overflowY:"auto",padding:"8px 0"}}>
{openC.map(cm=><div key={cm.id} style={{margin:"0 8px 10px",borderRadius:R.md,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgCard,overflow:"hidden"}}><div style={{borderLeft:`3px solid ${cm.color}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",cursor:"pointer"}}>"{cm.anchor}"</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",gap:6,fontSize:10.5}}><span style={{color:c.textTer,cursor:"pointer",fontWeight:500}}>Reply</span><span style={{color:c.textTer,cursor:"pointer",fontWeight:500}}>Resolve</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>)}</div>)}
<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"}}><I.Plus size={11} color={c.textTer}/><span style={{fontSize:11.5,color:c.textTer}}>Add comment…</span></div></div>
</div>
</div>}
</div>
</div>
</div>}
{/* ═══ DOCUMENTS TAB ═══ */}
{mainTab==="Documents"&&<div style={{flex:1,overflow:"auto",padding:20}}>
<div style={{display:"flex",gap:0,marginBottom:16}}>
{["Generated","Context Docs","Notes","All"].map((st,i,arr)=><SubTab key={st} label={st} active={docSubTab===st} onClick={()=>setDocSubTab(st)} first={i===0} last={i===arr.length-1}/>)}
</div>
{docSubTab==="Generated"&&<div>
{mockGenerated.map(g=><div key={g.id} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 14px",borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgPanelAlt} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>
<I.Spark size={14} color={c.neutral}/>
<div style={{flex:1,minWidth:0}}><div style={{fontSize:13,fontWeight:550}}>{g.title}</div><div style={{fontSize:11,color:c.textTer,marginTop:1}}>from {g.origin}</div></div>
<Pill style={{height:18,fontSize:9}}>{g.type}</Pill>
<span style={{fontSize:10,color:c.textTer}}>{g.modified}</span>
<button style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.textTer,fontFamily:font.sans}}>Remove</button>
</div>)}
</div>}
{docSubTab==="Context Docs"&&<div>
{mockDocs.map(d=><div key={d.id} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 14px",borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgPanelAlt} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>
<I.FileText size={14} color={c.textSec}/>
<div style={{flex:1,minWidth:0}}><div style={{fontSize:13,fontWeight:550}}>{d.title}</div><div style={{fontSize:11,color:c.textTer,marginTop:1}}>{d.size} · {d.type}</div></div>
<Pill color={d.viaBucket?c.accent:c.accentBtn} style={{height:18,fontSize:9}}>{d.source}</Pill>
<span style={{fontSize:10,color:c.textTer}}>{d.modified}</span>
{!d.viaBucket&&<button style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.textTer,fontFamily:font.sans}}>Remove</button>}
{d.viaBucket&&<span style={{fontSize:9,color:c.textTer,fontStyle:"italic"}} title="Remove via detaching the bucket">via bucket</span>}
</div>)}
</div>}
{docSubTab==="Notes"&&<div>
{mockNotes.map(n=><div key={n.id} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 14px",borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgPanelAlt} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>
{n.pinned&&<I.Pin size={10} color={c.warn}/>}
{!n.pinned&&<I.FileText size={14} color={c.accentBtn}/>}
<div style={{flex:1,minWidth:0}}><div style={{fontSize:13,fontWeight:550}}>{n.title}</div><div style={{fontSize:11,color:c.textTer,marginTop:1}}>{n.excerpt.slice(0,60)}…</div></div>
<span style={{fontSize:10,color:c.textTer}}>{n.modified}</span>
{n.comments>0&&<span style={{fontSize:10,color:c.textTer}}>💬{n.comments}</span>}
<button style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.textTer,fontFamily:font.sans}}>Remove</button>
</div>)}
</div>}
{docSubTab==="All"&&<div style={{padding:20,textAlign:"center",color:c.textTer,fontSize:13}}>All documents — union of Generated + Context Docs + Notes, grouped by type</div>}
</div>}
{/* ═══ ACTIVITY TAB ═══ */}
{mainTab==="Activity"&&<div style={{flex:1,overflow:"auto",padding:20}}>
<div style={{display:"flex",gap:0,marginBottom:16}}>
{["Chats","Panels & Forums","Tasks","Automations","All"].map((st,i,arr)=><SubTab key={st} label={st} active={actSubTab===st} onClick={()=>setActSubTab(st)} first={i===0} last={i===arr.length-1}/>)}
</div>
{actSubTab==="Chats"&&<div>
{mockChats.map(ch=><div key={ch.id} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 14px",borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgPanelAlt} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>
<I.Chat size={14} color={c.green}/>
<div style={{flex:1,minWidth:0}}><div style={{display:"flex",alignItems:"center",gap:6}}>{ch.unread&&<Dot color={c.accentBtn} size={5}/>}<span style={{fontSize:13,fontWeight:ch.unread?600:500}}>{ch.title}</span></div><div style={{fontSize:11,color:c.textTer,marginTop:1}}>{ch.msgs} messages · {ch.lastActive}</div></div>
<Pill style={{height:18,fontSize:9}}>{ch.subtype}</Pill>
<button style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.textTer,fontFamily:font.sans}}>Remove</button>
</div>)}
</div>}
{actSubTab==="Tasks"&&<div>
{mockTasks.map(t=><div key={t.id} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 14px",borderBottom:`1px solid ${c.borderLight}`}}>
<I.Chain size={14} color={c.warn}/>
<div style={{flex:1}}><div style={{fontSize:13,fontWeight:550}}>{t.title}</div><div style={{fontSize:11,color:c.textTer,marginTop:1}}>{t.agent} · {t.cost}</div></div>
<Pill color={t.status==="running"?c.accentBtn:t.status==="waiting"?c.warn:t.status==="complete"?c.green:c.neutral} style={{height:18,fontSize:9}}>{t.status}</Pill>
<button style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.textTer,fontFamily:font.sans}}>Remove</button>
</div>)}
</div>}
{actSubTab!=="Chats"&&actSubTab!=="Tasks"&&<div style={{padding:20,textAlign:"center",color:c.textTer,fontSize:13}}>{actSubTab} for {proj.name}</div>}
</div>}
{/* ═══ PROJECT CONTEXT ═══ */}
{mainTab==="Project Context"&&<div style={{flex:1,overflow:"auto",padding:20}}>
<div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,marginBottom:16}}>
<div style={{backgroundColor:c.bgCard,borderRadius:R.lg,border:`1px solid ${c.border}`,padding:16}}><div style={{display:"flex",alignItems:"center",gap:8,marginBottom:10}}><I.Folder size={15} color={c.accentBtn}/><span style={{fontSize:14,fontWeight:650}}>Primary Bucket</span><Pill color={c.green} style={{height:18,fontSize:9}}>Healthy</Pill></div><div style={{fontSize:12,color:c.textSec,marginBottom:8}}>Henderson Case Files — 6 documents</div><Btn ghost small>Open Full Bucket</Btn></div>
<div style={{backgroundColor:c.bgCard,borderRadius:R.lg,border:`1px solid ${c.border}`,padding:16}}><div style={{display:"flex",alignItems:"center",gap:8,marginBottom:10}}><I.Layers size={15} color={c.accent}/><span style={{fontSize:14,fontWeight:650}}>Attached Buckets</span></div><div style={{fontSize:12,color:c.textSec,marginBottom:4}}>Firm Style Rules</div><div style={{fontSize:12,color:c.textSec,marginBottom:8}}>Court Procedures — CDCA</div><Btn ghost small><I.Plus size={10}/>Attach Bucket</Btn></div>
</div>
<div style={{backgroundColor:c.bgCard,borderRadius:R.lg,border:`1px solid ${c.border}`,padding:16}}>
<div style={{fontSize:14,fontWeight:650,marginBottom:8}}>Project Background / Instructions</div>
<div style={{padding:"10px 14px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgInput,fontSize:13,color:c.textSec,lineHeight:1.6,minHeight:80}} contentEditable suppressContentEditableWarning>Henderson v. DataCorp — securities fraud case. Focus on document review for privilege, discovery deadline April 15. Key contacts: Adam Schall (lead), outside counsel at Morrison Foerster.</div>
</div>
</div>}
{/* ═══ CONFIGURE ═══ */}
{mainTab==="Configure"&&<div style={{flex:1,overflow:"auto",padding:20}}>
{/* General */}
<div style={{backgroundColor:c.bgCard,borderRadius:R.lg,border:`1px solid ${c.border}`,padding:16,marginBottom:16}}>
<div style={{fontSize:14,fontWeight:700,marginBottom:12}}>General</div>
<div style={{display:"flex",alignItems:"center",gap:12,marginBottom:10}}><span style={{fontSize:12,color:c.textSec,width:120}}>Project Name</span><input defaultValue={proj.name} style={{flex:1,padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:13,fontFamily:font.sans,color:c.textPri,outline:"none"}}/></div>
<div style={{display:"flex",alignItems:"flex-start",gap:12,marginBottom:10}}><span style={{fontSize:12,color:c.textSec,width:120,paddingTop:6}}>Description</span><textarea defaultValue="Document review and analysis for Henderson litigation" style={{flex:1,padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:13,fontFamily:font.sans,color:c.textPri,outline:"none",minHeight:50,resize:"vertical"}}/></div>
<div style={{display:"flex",alignItems:"center",gap:12,marginBottom:10}}><span style={{fontSize:12,color:c.textSec,width:120}}>Color</span><div style={{display:"flex",gap:5}}>{["#31588c","#2E8B57","#8B7355","#9E5E5E","#5B5F97","#24527A","#D97706","#B04040","#6B7280","#4A7DB8"].map(col=><button key={col} style={{width:20,height:20,borderRadius:"50%",backgroundColor:col,border:col===proj.color?`2px solid ${c.textPri}`:"2px solid transparent",cursor:"pointer"}}/>)}</div></div>
<div style={{display:"flex",alignItems:"center",gap:12}}><span style={{fontSize:12,color:c.textSec,width:120}}>Status</span><Select value="Active" options={["Active","Paused","Archived"]}/></div>
</div>
{/* Project Content */}
<div style={{backgroundColor:c.bgCard,borderRadius:R.lg,border:`1px solid ${c.border}`,padding:16,marginBottom:16}}>
<div style={{display:"flex",alignItems:"center",gap:12,marginBottom:12}}>
<div style={{fontSize:14,fontWeight:700}}>Project Content</div>
<div style={{display:"flex",alignItems:"center",gap:6,padding:"8px 16px",borderRadius:R.sm,border:`1.5px dashed ${c.accentBtn}40`,cursor:"pointer",backgroundColor:c.accentBtn+"05",flex:1,maxWidth:300}} onMouseEnter={e=>e.currentTarget.style.borderColor=c.accentBtn} onMouseLeave={e=>e.currentTarget.style.borderColor=c.accentBtn+"40"}>
<I.Plus size={14} color={c.accentBtn}/><span style={{fontSize:12,fontWeight:550,color:c.accentBtn}}>Add to Project / Drop items here</span>
</div>
</div>
<table style={{width:"100%",borderCollapse:"collapse",fontSize:12}}>
<thead><tr style={{borderBottom:`1px solid ${c.border}`}}><th style={{textAlign:"left",padding:"6px 10px",fontSize:11,fontWeight:600,color:c.textTer}}>Type</th><th style={{textAlign:"right",padding:"6px 10px",fontSize:11,fontWeight:600,color:c.textTer}}>Count</th><th style={{textAlign:"right",padding:"6px 10px",fontSize:11,fontWeight:600,color:c.textTer}}></th></tr></thead>
<tbody>{projectContent.map(row=><tr key={row.type} style={{borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgPanelAlt} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>
<td style={{padding:"8px 10px"}}><span style={{display:"flex",alignItems:"center",gap:8}}><span style={{color:row.color,display:"flex"}}>{row.icon}</span><span style={{fontWeight:500,color:c.textPri}}>{row.type}</span></span></td>
<td style={{padding:"8px 10px",textAlign:"right",fontWeight:600,color:c.textPri}}>{row.count}</td>
<td style={{padding:"8px 10px",textAlign:"right"}}><span style={{fontSize:10,color:c.accentBtn,cursor:"pointer",fontWeight:500}}>View in Browser →</span></td>
</tr>)}</tbody>
</table>
</div>
{/* Defaults */}
<div style={{backgroundColor:c.bgCard,borderRadius:R.lg,border:`1px solid ${c.border}`,padding:16,marginBottom:16}}>
<div style={{fontSize:14,fontWeight:700,marginBottom:12}}>Defaults</div>
<div style={{display:"flex",alignItems:"center",gap:12,marginBottom:10}}><span style={{fontSize:12,color:c.textSec,width:140}}>Default Agent</span><Select value="Elnor" options={["Elnor","Reviewer","Scout"]}/></div>
<div style={{display:"flex",alignItems:"center",gap:12,marginBottom:10}}><span style={{fontSize:12,color:c.textSec,width:140}}>Default Model</span><Select value="gemini-2.5-pro" options={["gemini-2.5-pro","claude-opus-4-6","claude-sonnet-4-5","gpt-4o"]}/></div>
<div style={{display:"flex",alignItems:"center",gap:12,marginBottom:10}}><span style={{fontSize:12,color:c.textSec,width:140}}>Fallback Chain</span><Select value="claude-sonnet-4-5 → gpt-4o" options={["claude-sonnet-4-5 → gpt-4o","gpt-4o → claude-sonnet-4-5","gemini-2.5-pro → gpt-4o","None"]}/></div>
<div style={{display:"flex",alignItems:"center",gap:12}}><span style={{fontSize:12,color:c.textSec,width:140}}>Think Level</span><Select value="medium" options={["off","minimal","low","medium","high","xhigh"]}/></div>
</div>
{/* Prompt & Overlay (DOC17 — multiple) */}
<div style={{backgroundColor:c.bgCard,borderRadius:R.lg,border:`1px solid ${c.border}`,padding:16,marginBottom:16}}>
<div style={{fontSize:14,fontWeight:700,marginBottom:12}}>Prompt & Overlay</div>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12}}>
<div><div style={{fontSize:12,fontWeight:550}}>Apply overlays to all project chats</div><div style={{fontSize:11,color:c.textTer,marginTop:1}}>DOC17 overlays inherited by new chats in this project</div></div>
<Toggle on={toggles.overlay} onChange={()=>toggle("overlay")}/>
</div>
<div style={{fontSize:12,fontWeight:600,color:c.textSec,marginBottom:6}}>Active Overlays</div>
<div style={{display:"flex",flexDirection:"column",gap:6,marginBottom:10}}>
{["Litigation Review v2","Formal Tone"].map(o=><div key={o} style={{display:"flex",alignItems:"center",gap:8,padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}>
<I.Layers size={12} color={c.accentBtn}/><span style={{flex:1,fontSize:12}}>{o}</span>
<button style={{padding:"1px 4px",borderRadius:3,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.textTer}}>×</button>
</div>)}
</div>
<Btn ghost small><I.Plus size={10}/>Add Overlay</Btn>
</div>
{/* Output & Cost */}
<div style={{backgroundColor:c.bgCard,borderRadius:R.lg,border:`1px solid ${c.border}`,padding:16,marginBottom:16}}>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12}}>
<div style={{fontSize:14,fontWeight:700}}>Output & Cost</div>
<div style={{display:"flex",alignItems:"center",gap:6}}>
<span style={{fontSize:11,color:c.textTer}}>Budget tracking</span>
<Toggle on={toggles.budgetOn} onChange={()=>toggle("budgetOn")}/>
</div>
</div>
<div style={{display:"flex",alignItems:"center",gap:12,marginBottom:10}}><span style={{fontSize:12,color:c.textSec,width:140}}>Output Folder</span><span style={{fontSize:12,color:c.textSec,fontFamily:font.mono}}>~/Documents/Henderson/outputs</span><Btn ghost small>Change</Btn></div>
{toggles.budgetOn&&<>
<div style={{display:"flex",alignItems:"center",gap:12,marginBottom:10}}><span style={{fontSize:12,color:c.textSec,width:140}}>Budget Amount</span><input defaultValue="100.00" style={{width:80,padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,textAlign:"right"}}/><Select value="Monthly" options={["Daily","Weekly","Monthly","Quarterly"]}/></div>
<div style={{display:"flex",alignItems:"center",gap:12,marginBottom:10}}><span style={{fontSize:12,color:c.textSec,width:140}}>Current Spend</span><span style={{fontSize:13,fontWeight:600,color:c.warn}}>$47.82 (47.8%)</span></div>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10}}><div><div style={{fontSize:12,fontWeight:550}}>Alert at threshold</div><div style={{fontSize:11,color:c.textTer}}>Notify when spend exceeds 80%</div></div><Toggle on={toggles.costAlert} onChange={()=>toggle("costAlert")}/></div>
<div style={{display:"flex",alignItems:"center",gap:8}}><span style={{fontSize:11,color:c.textTer}}>Show budget in project header</span><Toggle on={showBudget} onChange={()=>setShowBudget(!showBudget)}/></div>
</>}
</div>
{/* Danger */}
<div style={{backgroundColor:c.bgCard,borderRadius:R.lg,border:`1px solid ${c.border}`,padding:16}}>
<div style={{fontSize:14,fontWeight:700,color:c.textPri,marginBottom:12}}>Project Management</div>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10,paddingBottom:10,borderBottom:`1px solid ${c.borderLight}`}}><div><div style={{fontSize:12,fontWeight:550}}>Duplicate Project</div><div style={{fontSize:11,color:c.textTer}}>Copy settings and content references</div></div><Btn ghost small>Duplicate</Btn></div>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10,paddingBottom:10,borderBottom:`1px solid ${c.borderLight}`}}><div><div style={{fontSize:12,fontWeight:550}}>Archive Project</div><div style={{fontSize:11,color:c.textTer}}>Hide from active views. All content preserved, recoverable.</div></div><Btn ghost small>Archive</Btn></div>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}><div><div style={{fontSize:12,fontWeight:550,color:c.error}}>Delete Project</div><div style={{fontSize:11,color:c.textTer}}>Permanently remove. Choose to detach or delete all content.</div></div><Btn small style={{backgroundColor:c.error+"12",color:c.error,border:`1px solid ${c.error}30`}}>Delete…</Btn></div>
</div>
</div>}
</div>
</div>
</div>
);
}