Q_WEB_BROWSER_VIEW_V2.jsx
Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Archived Mockups/Q_WEB_BROWSER_VIEW_V2.jsx
ELNOR REPO READER TEXT MIRROR
Original path: Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Archived Mockups/Q_WEB_BROWSER_VIEW_V2.jsx
Source repo: /Users/OpenClaw1/Elnor/Elnor Specs
Git branch: main
Git commit: dbaa25962edc11ab30e8d4ca1715f9ae5bf77331
Generated: 2026-06-09T01:23:58.539Z
---
import { useState, useRef, useEffect } from "react";
const font={sans:"'Söhne','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif",mono:"'SF Mono','Cascadia Code','Fira Code',monospace"};
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",agentAv:"#a1a7aa",borderDark:"#263040",incognito:"#3D2E5C",incognitoBg:"#2A1F3D"};
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={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"/>,X:p=><Ic {...p} d="M18 6L6 18 M6 6l12 12"/>,Search:p=><Ic {...p} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>,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"/>,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"/>,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"/>,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 M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/>,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"/>,ChevD:p=><Ic {...p} d="M6 9l6 6 6-6"/>,ChevR:p=><Ic {...p} d="M9 18l6-6-6-6"/>,Pin:p=><Ic {...p} d="M12 17v5 M9 2h6l-1 7h4l-7 8 1-5H8l1-10z"/>,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"/>,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"/>,Shield:p=><Ic {...p} d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,Key:p=><Ic {...p} d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>,Send:p=><Ic {...p} d="M22 2L11 13 M22 2l-7 20-4-9-9-4 20-7z"/>,Plus:p=><Ic {...p} d="M12 5v14 M5 12h14"/>,Speaker:p=><Ic {...p} d="M11 5L6 9H2v6h4l5 4V5z M19.07 4.93a10 10 0 010 14.14 M15.54 8.46a5 5 0 010 7.07"/>,Eye:p=><Ic {...p} d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>,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"/>,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 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/>};
const Dot=({color,size=8})=><span style={{display:"inline-block",width:size,height:size,borderRadius:"50%",backgroundColor:color,flexShrink:0}}/>;
const Btn=({children,primary,ghost,small,onClick,style:s})=><button onClick={onClick} style={{padding:small?"2px 8px":"5px 14px",borderRadius:R.sm,border:primary?"none":`1px solid ${c.border}`,backgroundColor:primary?c.accentBtn:"transparent",color:primary?"#fff":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,...s}}>{children}</button>;
const TBtn=({icon,title,active,onClick,label,disabled,accent})=><button onClick={onClick} title={title} disabled={disabled} 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:disabled?"not-allowed":"pointer",display:"flex",alignItems:"center",gap:4,color:accent?c.accentBtn:active?c.accentBtn:disabled?c.textTer:c.textSec,fontFamily:font.sans,fontSize:10.5,fontWeight:active||accent?600:450,height:26,opacity:disabled?.4:1}} onMouseEnter={e=>{if(!active&&!disabled)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor=active?c.accentBtn+"08":"transparent"}}>{icon}{label&&<span>{label}</span>}</button>;
const Sep=()=><div style={{width:1,height:18,backgroundColor:c.borderLight,margin:"0 3px",flexShrink:0}}/>;
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 Toast=({msg,onDone})=>{useEffect(()=>{const t=setTimeout(onDone,3000);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.sm,fontSize:12,fontWeight:500,fontFamily:font.sans,zIndex:9999,boxShadow:"0 4px 16px rgba(0,0,0,0.2)"}}>{msg}</div>};
// === TAB COMPONENT ===
const Tab=({title,icon,active,incognito,pinned,audio,onClose,onClick,groupColor})=>(
<div onClick={onClick} style={{display:"flex",alignItems:"center",gap:5,padding:pinned?"0 8px":"0 10px",height:32,minWidth:pinned?40:120,maxWidth:pinned?40:220,borderRadius:"8px 8px 0 0",backgroundColor:active?(incognito?c.incognitoBg:c.bgPanel):(incognito?"#1e1530":"#e8eaed"),borderBottom:active?"none":`1px solid ${c.border}`,cursor:"pointer",position:"relative",flexShrink:0,borderLeft:groupColor?`3px solid ${groupColor}`:"none"}}>
{incognito&&!pinned&&<I.Mask size={11} color={incognito&&active?"#a78bfa":"#8b8b9a"}/>}
{!incognito&&icon&&<span style={{fontSize:11}}>{icon}</span>}
{!pinned&&<span style={{flex:1,fontSize:11,fontWeight:active?550:400,color:active?(incognito?"#d4c4f0":c.textPri):c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:font.sans}}>{title}</span>}
{audio&&<span onClick={e=>{e.stopPropagation()}} style={{cursor:"pointer",display:"flex"}}><I.Speaker size={10} color={c.textTer}/></span>}
{!pinned&&<span onClick={e=>{e.stopPropagation();onClose?.()}} style={{cursor:"pointer",display:"flex",opacity:active?1:0,padding:2,borderRadius:3}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.X size={10} color={c.textTer}/></span>}
</div>
);
// === TAB GROUP HEADER ===
const TabGroupHeader=({label,color,collapsed,onClick})=>(
<div onClick={onClick} style={{display:"flex",alignItems:"center",gap:4,padding:"0 6px",height:32,cursor:"pointer",borderRadius:"8px 8px 0 0",backgroundColor:color+"18"}}>
<div style={{width:8,height:8,borderRadius:"50%",backgroundColor:color}}/>
<span style={{fontSize:10,fontWeight:600,color:color,fontFamily:font.sans}}>{label}</span>
<span style={{fontSize:9,color:c.textTer,transform:collapsed?"rotate(-90deg)":"none",transition:"transform 0.15s"}}>▾</span>
</div>
);
// === AUTOFILL PROMPT ===
const AutofillPrompt=({domain,onSave,onNever,onDismiss})=>(
<div style={{position:"absolute",top:38,left:"50%",transform:"translateX(-50%)",zIndex:900,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.md,boxShadow:"0 6px 24px rgba(0,0,0,0.15)",padding:"12px 16px",display:"flex",alignItems:"center",gap:10,minWidth:340}}>
<I.Key size={18} color={c.accentBtn}/>
<div style={{flex:1}}>
<div style={{fontSize:12,fontWeight:600,color:c.textPri}}>Save password for {domain}?</div>
<div style={{fontSize:11,color:c.textSec}}>wbrody@gmail.com</div>
</div>
<Btn primary small onClick={onSave}>Save</Btn>
<Btn small onClick={onNever}>Never</Btn>
<span onClick={onDismiss} style={{cursor:"pointer",display:"flex"}}><I.X size={12} color={c.textTer}/></span>
</div>
);
// === DOWNLOADS TRAY ===
const DownloadsTray=({items,onClose})=>(
<div style={{borderTop:`1px solid ${c.border}`,backgroundColor:c.bgPanelAlt,padding:"6px 12px",display:"flex",alignItems:"center",gap:10,fontSize:11,fontFamily:font.sans}}>
<I.Download size={13} color={c.accentBtn}/>
{items.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={onClose}><I.X size={11} color={c.textTer}/></span>
</div>
);
// === WEB PAGE CONTENT ===
const WebPage=({onSelect,readerMode})=>{
const [selected,setSelected]=useState(null);
const handleMouseUp=()=>{
const sel=window.getSelection();
if(sel&&sel.toString().trim().length>3){
const rect=sel.getRangeAt(0).getBoundingClientRect();
setSelected({text:sel.toString(),x:rect.left,y:rect.top-45,w:rect.width});
onSelect?.(sel.toString());
}else{setSelected(null)}
};
const pageStyle=readerMode?{fontFamily:font.sans,color:c.textPri,lineHeight:1.8,fontSize:15,padding:"30px 60px 60px",maxWidth:680,margin:"0 auto",backgroundColor:"#fafaf8"}:{fontFamily:"'Georgia','Times New Roman',serif",color:"#222",lineHeight:1.7,fontSize:14.5,padding:"20px 40px 60px",maxWidth:900,margin:"0 auto"};
return <div onMouseUp={handleMouseUp} style={{...pageStyle,position:"relative",userSelect:"text"}}>
{selected&&<div style={{position:"fixed",left:Math.min(selected.x,window.innerWidth-500),top:selected.y,zIndex:999,display:"flex",gap:3,padding:"4px 6px",borderRadius:R.sm,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,boxShadow:"0 4px 16px rgba(0,0,0,0.12)"}}>
<TBtn icon={<I.MsgCircle size={12}/>} label="Comment" onClick={()=>setSelected(null)}/>
<Sep/>
<TBtn icon={<I.Spark size={12}/>} label="Ask Elnor" onClick={()=>setSelected(null)}/>
<TBtn label="Summarize" onClick={()=>setSelected(null)}/>
<Sep/>
<TBtn icon={<I.Scissors size={12}/>} label="Clip" onClick={()=>setSelected(null)}/>
<TBtn icon={<I.Pin size={12}/>} label="Pin" onClick={()=>setSelected(null)}/>
<Sep/>
<TBtn icon={<I.X size={10}/>} onClick={()=>setSelected(null)}/>
</div>}
{readerMode&&<div style={{fontSize:11,color:c.accentBtn,fontWeight:600,marginBottom:4,display:"flex",alignItems:"center",gap:5}}><I.Book size={13} color={c.accentBtn}/>READER MODE</div>}
<div style={{textAlign:"center",borderBottom:readerMode?`2px solid ${c.border}`:"2px solid #333",paddingBottom:16,marginBottom:20}}>
<div style={{fontSize:11,color:"#666",letterSpacing:".1em",textTransform:"uppercase",marginBottom:4}}>United States District Court</div>
<div style={{fontSize:13,color:"#666",marginBottom:8}}>Central District of California</div>
<div style={{fontSize:readerMode?17:18,fontWeight:700,marginBottom:4}}>PARAMOUNT CONTRACTORS & DEVELOPERS, INC.,</div>
<div style={{fontSize:14,color:"#555",marginBottom:2}}>Plaintiff,</div>
<div style={{fontSize:14,color:"#555",marginBottom:4}}>v.</div>
<div style={{fontSize:readerMode?17:18,fontWeight:700,marginBottom:4}}>CITY OF LOS ANGELES, et al.,</div>
<div style={{fontSize:14,color:"#555",marginBottom:8}}>Defendants.</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>Plaintiff Paramount Contractors & Developers, Inc. ("Paramount") respectfully moves this Court for an order excluding the expert testimony and report of Dr. Mehmet Sanli, Defendants' designated economic expert, on the grounds that his opinions are unreliable, speculative, and based on flawed methodology that does not satisfy the requirements of <em>Sargon Enterprises, Inc. v. University of Southern California</em> (2012) 55 Cal.4th 747.</p>
<h3 style={{fontSize:14,fontWeight:600,margin:"20px 0 8px",fontFamily:font.sans,color:"#444"}}>I. BACKGROUND</h3>
<p>On January 15, 2026, Defendants designated Dr. Sanli as their expert on economic damages. Dr. Sanli's report, dated February 28, 2026, opines that Paramount's claimed damages are "speculative and overstated" and offers an alternative damages calculation reducing Paramount's claim from $4.2 million to approximately $380,000.</p>
<p>Dr. Sanli's methodology suffers from three fundamental defects: (1) he improperly applies a "willing buyer-willing seller" valuation framework to signage rights that are not freely transferable on the open market; (2) he fails to account for the City's own valuation of the permits at issue, as established in the <em>Henderson v. Pacific</em> line of cases; and (3) his discount rate of 18% is unsupported by any comparable transaction data and appears to have been selected solely to minimize Paramount's recovery.</p>
<div style={{margin:"24px 0",padding:"16px 20px",backgroundColor:readerMode?"#f0f0ec":"#f7f7f0",border:`1px solid ${readerMode?"#ddd":"#e0ddd0"}`,borderRadius:4}}>
<div style={{fontSize:12,fontWeight:600,color:"#666",marginBottom:6,fontFamily:font.sans}}>EXHIBIT A — 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 Expert</th><th style={{textAlign:"right",padding:"6px 8px",fontFamily:font.sans,fontSize:12}}>Dr. Sanli</th><th style={{textAlign:"right",padding:"6px 8px",fontFamily:font.sans,fontSize:12}}>Difference</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><td style={{textAlign:"right",padding:"6px 8px",color:c.error}}>-$2,630,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><td style={{textAlign:"right",padding:"6px 8px",color:c.error}}>-$860,000</td></tr>
<tr style={{borderBottom:"1px solid #eee"}}><td style={{padding:"6px 8px"}}>Consequential damages</td><td style={{textAlign:"right",padding:"6px 8px"}}>$380,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$50,000</td><td style={{textAlign:"right",padding:"6px 8px",color:c.error}}>-$330,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><td style={{textAlign:"right",padding:"6px 8px",color:c.error}}>-$3,820,000</td></tr>
</tbody>
</table>
</div>
<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 a "gatekeeper" to exclude expert opinion that is based on "assumptions of fact without evidentiary support, or on speculative or conjectural factors." 55 Cal.4th at 770.</p>
<p>Expert testimony must be based on "reasons and a reasoned explanation connecting the factual predicates to the ultimate conclusion." <em>Jennings v. Palomar Pomerado Health Systems, Inc.</em> (2003) 114 Cal.App.4th 1108, 1117.</p>
</div>
};
// === MAIN COMPONENT ===
export default function QBrowserV2(){
const [activeTab,setActiveTab]=useState("t1");
const [tabs]=useState([
{id:"t1",title:"Paramount MIL No. 3",url:"https://ecf.cacd.uscourts.gov/doc1/031139485672",icon:"📄",group:"research"},
{id:"t2",title:"Henderson v. Pacific — Docket",url:"https://ecf.cacd.uscourts.gov/cgi-bin/DktRpt.pl?178432",icon:"📋",group:"research"},
{id:"t3",title:"Westlaw — Sargon Enterprises",url:"https://www.westlaw.com/Document/I...",icon:"⚖️",group:null},
{id:"t4",title:"Nike Q4 Earnings",url:"https://www.sec.gov/cgi-bin/browse-edgar?...",icon:"📊",group:null,incognito:true},
{id:"t5",title:"PACER Login",url:"https://pacer.uscourts.gov",icon:"🔐",pinned:true,group:null},
]);
const [tabGroups]=useState([{id:"research",label:"Paramount Research",color:"#4CAF50"}]);
const [readerMode,setReaderMode]=useState(false);
const [bookmarked,setBookmarked]=useState(false);
const [commentsOpen,setCommentsOpen]=useState(false);
const [rightTab,setRightTab]=useState("comments");
const [toast,setToast]=useState(null);
const [selectedText,setSelectedText]=useState("");
const [showAutofill,setShowAutofill]=useState(false);
const [showDownloads,setShowDownloads]=useState(true);
const [browserOpen,setBrowserOpen]=useState(false);
const [zoom,setZoom]=useState(100);
const [clipsCount,setClipsCount]=useState(2);
const flash=msg=>setToast(msg);
const currentTab=tabs.find(t=>t.id===activeTab);
const comments=[
{id:"c1",author:"You",color:c.accentBtn,text:"Need to check if Sanli's discount rate has any support in comparable transactions",anchor:"discount rate of 18%",time:"2m ago"},
{id:"c2",author:"Elnor",color:c.agentAv,text:"I found 3 comparable transactions in the signage rights space. Average discount rates ranged from 8-12%. Sanli's 18% is an outlier with no stated basis. This supports the MIL argument.",anchor:"discount rate of 18%",time:"1m ago"},
];
return (
<div style={{display:"flex",width:"100%",height:"100vh",fontFamily:font.sans,color:c.textPri,backgroundColor:c.bgApp}}>
<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)}/>}
{/* SIDEBAR RAIL */}
<div style={{width:44,flexShrink:0,backgroundColor:c.bgSidebar,borderRight:`1px solid ${c.borderDark}`,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:10,gap: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}}>Q</div>
{[
{icon:<I.Search size={15}/>,label:"Browser",active:browserOpen,onClick:()=>setBrowserOpen(!browserOpen)},
{icon:<I.FileText size={15}/>,label:"Notes"},
{icon:<I.Globe size={15}/>,label:"Web",active:true},
{icon:<I.MsgCircle size={15}/>,label:"Chat"},
{icon:<I.Settings size={15}/>,label:"Settings"},
].map((item,i)=><button key={i} onClick={item.onClick} title={item.label} style={{width:32,height:32,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:item.active?"#ffffff18":"transparent",color:item.active?"#fff":"#777",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",gap:1}}>
{item.icon}
<span style={{fontSize:7,opacity:.7}}>{item.label}</span>
</button>)}
<div style={{marginTop:"auto",marginBottom:12}}>
{clipsCount>0&&<div style={{position:"relative"}} title={`${clipsCount} clips collected`}>
<I.Scissors size={14} color="#fff"/>
<span style={{position:"absolute",top:-4,right:-6,fontSize:8,backgroundColor:c.warn,color:"#fff",borderRadius:R.full,width:12,height:12,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:700}}>{clipsCount}</span>
</div>}
</div>
</div>
{/* BOOKMARK SIDEBAR */}
{browserOpen&&<div style={{width:240,flexShrink:0,backgroundColor:c.bgPanel,borderRight:`1px solid ${c.border}`,display:"flex",flexDirection:"column",fontSize:11}}>
<div style={{padding:"10px 12px",borderBottom:`1px solid ${c.borderLight}`,display:"flex",alignItems:"center",justifyContent:"space-between"}}><span style={{fontWeight:650}}>Bookmarks</span><button onClick={()=>setBrowserOpen(false)} style={{border:"none",background:"none",cursor:"pointer",display:"flex",color:c.textTer}}><I.X size={12}/></button></div>
<div style={{flex:1,overflowY:"auto",padding:8}}>
{/* Folders */}
{[{name:"Legal Research",open:true,items:["PACER — CACD","Westlaw","CM/ECF Login","EDGAR Full-Text"]},{name:"Clients",open:false,items:["Henderson Portal","Paramount SharePoint"]},{name:"Reference",open:false,items:["Cal. Rules of Court","LAMC Full Text"]}].map((folder,fi)=><div key={fi} style={{marginBottom:4}}>
<div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 6px",borderRadius:R.sm,cursor:"pointer",fontWeight:600,color:c.textSec}} onClick={()=>{}}>{folder.open?<I.ChevD size={10}/>:<I.ChevR size={10}/>}<I.Star size={10} color={c.warn}/>{folder.name}</div>
{folder.open&&folder.items.map((item,ii)=><div key={ii} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 6px 4px 24px",borderRadius:R.sm,cursor:"pointer",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={{marginTop:12,fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".05em",padding:"0 6px",marginBottom:4}}>Recent Pages</div>
{["Paramount MIL No. 3","SEC Filing — Brooge Energy","Christensen CV (Expert)","LAMC § 14.4.4","Nike Q4 Earnings Call"].map((t,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 6px",borderRadius:R.sm,cursor:"pointer",color:i===0?c.accentBtn:c.textPri,fontWeight:i===0?600:400,backgroundColor:i===0?c.accentBtn+"08":"transparent"}} onMouseEnter={e=>{if(i)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{if(i)e.currentTarget.style.backgroundColor="transparent"}}><I.Globe size={9} color={i===0?c.accentBtn:c.textTer}/>{t}</div>)}
</div>
</div>}
{/* MAIN AREA */}
<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden",position:"relative"}}>
{/* 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}}>
{/* Grouped tabs */}
{tabGroups.map(g=>{
const groupTabs=tabs.filter(t=>t.group===g.id);
return <div key={g.id} style={{display:"flex",gap:1,alignItems:"flex-end"}}>
<TabGroupHeader label={g.label} color={g.color}/>
{groupTabs.map(t=><Tab key={t.id} title={t.title} icon={t.icon} active={t.id===activeTab} incognito={t.incognito} pinned={t.pinned} groupColor={g.color} onClick={()=>setActiveTab(t.id)} onClose={()=>flash(`Closed: ${t.title}`)}/>)}
</div>
})}
{/* Ungrouped tabs */}
{tabs.filter(t=>!t.group).map(t=><Tab key={t.id} title={t.title} icon={t.icon} active={t.id===activeTab} incognito={t.incognito} pinned={t.pinned} audio={t.id==="t3"} onClick={()=>{setActiveTab(t.id);if(t.id==="t5")setShowAutofill(true)}} onClose={()=>flash(`Closed: ${t.title}`)}/>)}
{/* New tab + */}
<button onClick={()=>flash("New tab")} 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}} onMouseEnter={e=>e.currentTarget.style.backgroundColor="#d0d3d8"} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Plus size={14}/></button>
</div>
{/* URL BAR + TOOLBAR */}
<div style={{display:"flex",alignItems:"center",gap:4,padding:"5px 8px",borderBottom:`1px solid ${c.border}`,backgroundColor:currentTab?.incognito?c.incognitoBg:c.bgPanel,flexShrink:0,position:"relative"}}>
{/* Autofill prompt */}
{showAutofill&&<AutofillPrompt domain="pacer.uscourts.gov" onSave={()=>{setShowAutofill(false);flash("Password saved")}} onNever={()=>{setShowAutofill(false);flash("Won't ask for this site")}} onDismiss={()=>setShowAutofill(false)}/>}
<button style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:currentTab?.incognito?"#a78bfa":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:currentTab?.incognito?"#665588":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:currentTab?.incognito?"#a78bfa":c.textSec}}><I.Refresh size={14}/></button>
{/* URL / Search bar */}
<div style={{flex:1,display:"flex",alignItems:"center",gap:6,padding:"5px 12px",borderRadius:R.full,backgroundColor:currentTab?.incognito?"#1a1428":c.bgInput,border:`1px solid ${currentTab?.incognito?"#3d2e5c":c.borderLight}`,minWidth:0}}>
{currentTab?.incognito?<I.Mask size={12} color="#a78bfa"/>:<I.Lock size={12} color={c.green}/>}
<input value={currentTab?.url||""} readOnly style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:13,fontFamily:font.sans,outline:"none",color:currentTab?.incognito?"#d4c4f0":c.textPri,minWidth:0}} placeholder="Search or enter URL"/>
</div>
<button onClick={()=>{setBookmarked(!bookmarked);flash(bookmarked?"Bookmark 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:currentTab?.incognito?"#665588":c.textTer}/></button>
<Sep/>
<TBtn icon={<I.Book size={13} color={readerMode?c.accentBtn:undefined}/>} title="Reader Mode" active={readerMode} onClick={()=>{setReaderMode(!readerMode);flash(readerMode?"Page view":"Reader mode")}}/>
<TBtn icon={<I.Copy size={13}/>} title="Copy page text" onClick={()=>flash("Page text copied")}/>
<TBtn icon={<I.Save size={13}/>} label="Save" onClick={()=>flash("Save options…")}/>
<TBtn icon={<I.Send size={13}/>} label="Chat" onClick={()=>flash("Sent to chat")}/>
<Sep/>
<TBtn icon={<I.MsgCircle size={13}/>} label={comments.length+""} active={commentsOpen&&rightTab==="comments"} onClick={()=>{if(commentsOpen&&rightTab==="comments")setCommentsOpen(false);else{setCommentsOpen(true);setRightTab("comments")}}}/>
<button onClick={()=>{if(commentsOpen&&rightTab==="send")setCommentsOpen(false);else{setCommentsOpen(true);setRightTab("send")}}} style={{padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,backgroundColor:(commentsOpen&&rightTab==="send")?c.accentBtn:c.accentBtn+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:(commentsOpen&&rightTab==="send")?"#fff":c.accentBtn,fontFamily:font.sans,fontSize:10.5,fontWeight:600,height:26}}><I.Spark size={12}/>Ask Elnor</button>
</div>
{/* CONTENT + RIGHT PANEL */}
<div style={{flex:1,display:"flex",overflow:"hidden"}}>
{/* WEB PAGE */}
<div style={{flex:1,overflowY:"auto",backgroundColor:readerMode?"#fafaf8":"#fff"}}>
{currentTab?.incognito&&<div style={{backgroundColor:c.incognitoBg,color:"#a78bfa",padding:"6px 16px",fontSize:11,display:"flex",alignItems:"center",gap:6,borderBottom:"1px solid #3d2e5c"}}><I.Mask size={12} color="#a78bfa"/>Incognito — browsing data won't be saved or sent to ELNOR</div>}
<WebPage onSelect={setSelectedText} readerMode={readerMode}/>
</div>
{/* RIGHT PANEL */}
{commentsOpen&&<div style={{width:rightTab==="send"?300:270,flexShrink:0,borderLeft:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanelAlt}}>
<div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`,flexShrink:0}}>
<button onClick={()=>setRightTab("comments")} style={{flex:1,padding:"7px 0",border:"none",cursor:"pointer",backgroundColor:rightTab==="comments"?c.bgPanelAlt:c.bgInput,color:rightTab==="comments"?c.accentBtn:c.textTer,fontSize:10.5,fontWeight:rightTab==="comments"?650:450,fontFamily:font.sans,borderBottom:rightTab==="comments"?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}><I.MsgCircle size={10}/>Comments</button>
<button onClick={()=>setRightTab("send")} style={{flex:1,padding:"7px 0",border:"none",cursor:"pointer",backgroundColor:rightTab==="send"?c.bgPanel:c.bgInput,color:rightTab==="send"?c.accentBtn:c.textTer,fontSize:10.5,fontWeight:rightTab==="send"?650:450,fontFamily:font.sans,borderBottom:rightTab==="send"?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}><I.Spark size={10}/>Ask Elnor</button>
<button onClick={()=>setCommentsOpen(false)} style={{width:26,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}}><I.X size={11}/></button>
</div>
{rightTab==="comments"&&<div style={{flex:1,overflowY:"auto",padding:10}}>
<div style={{fontSize:10,fontWeight:600,color:c.textTer,marginBottom:8}}>OPEN ({comments.length})</div>
{comments.map(cm=><div key={cm.id} style={{marginBottom:10,borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgCard,overflow:"hidden"}}>
<div style={{borderLeft:`3px solid ${cm.color}`,padding:"8px 10px"}}>
<div style={{display:"flex",alignItems:"center",gap:5,marginBottom:4}}>
<Av letter={cm.author[0]} color={cm.color} size={18}/>
<span style={{fontSize:11,fontWeight:650,color:cm.color}}>{cm.author}</span>
<span style={{fontSize:9,color:c.textTer,marginLeft:"auto"}}>{cm.time}</span>
</div>
{cm.anchor&&<div style={{fontSize:10,color:c.textTer,fontStyle:"italic",marginBottom:4,padding:"2px 6px",backgroundColor:c.bgInput,borderRadius:3,display:"inline-block"}}>"{cm.anchor}"</div>}
<div style={{fontSize:12,lineHeight:1.5}}>{cm.text}</div>
<div style={{display:"flex",gap:8,marginTop:6}}>
<span style={{fontSize:10,color:c.textSec,cursor:"pointer"}}>Reply</span>
<span style={{fontSize:10,color:c.textSec,cursor:"pointer"}}>Resolve</span>
<span style={{fontSize:10,color:c.agentAv,cursor:"pointer",display:"flex",alignItems:"center",gap:2,marginLeft:"auto"}}><I.Spark size={8}/>Send</span>
</div>
</div>
</div>)}
<div style={{marginTop:8,padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgCard}}>
<textarea placeholder="Add a comment on this page…" style={{width:"100%",border:"none",outline:"none",fontSize:12,fontFamily:font.sans,resize:"none",minHeight:36,backgroundColor:"transparent"}}/>
<div style={{display:"flex",justifyContent:"flex-end",marginTop:4}}><Btn small primary onClick={()=>flash("Comment added")}>Add</Btn></div>
</div>
</div>}
{rightTab==="send"&&<div style={{flex:1,overflowY:"auto",padding:12}}>
<div style={{marginBottom:10}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Agent</div>
<div style={{display:"flex",alignItems:"center",gap:6,padding:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"pointer"}}><Av letter="E" color={c.agentAv} size={18}/><span style={{flex:1,fontSize:12,fontWeight:500}}>Elnor</span><I.ChevD size={10} color={c.textTer}/></div>
</div>
<div style={{marginBottom:10}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Page context</div>
<div style={{padding:"6px 8px",borderRadius:R.sm,backgroundColor:c.bgInput,fontSize:11,color:c.textSec}}>
<div style={{fontWeight:600,marginBottom:2}}>Paramount MIL No. 3</div>
<div>ecf.cacd.uscourts.gov · 4,200 words</div>
{selectedText&&<div style={{marginTop:4,padding:"4px 6px",backgroundColor:c.accentBtn+"08",borderRadius:3,color:c.accentBtn,fontSize:10}}>Selected: "{selectedText.substring(0,80)}…"</div>}
</div>
</div>
<div style={{marginBottom:10}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Ask about this page</div>
<textarea placeholder="e.g., Is Sanli's methodology consistent with Henderson?" style={{width:"100%",padding:"8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:60,resize:"vertical"}}/>
</div>
<div style={{marginBottom:10}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Include</div>
<div style={{display:"flex",flexDirection:"column",gap:4}}>
{[{label:"Page content + comments",checked:true},{label:"Paramount project context",checked:true},{label:"Recent case notes",checked:false},{label:"Clippings (2 items)",checked:false}].map((opt,i)=><label key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:11.5,cursor:"pointer"}}><input type="checkbox" defaultChecked={opt.checked} style={{accentColor:c.accentBtn}}/>{opt.label}</label>)}
</div>
</div>
<Btn primary onClick={()=>flash("Sent to Elnor")} style={{width:"100%",justifyContent:"center"}}><I.Spark size={12}/>Ask Elnor</Btn>
<div style={{marginTop:12,borderTop:`1px solid ${c.borderLight}`,paddingTop:10,display:"flex",flexDirection:"column",gap:4}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:2}}>Quick Actions</div>
<div style={{display:"flex",gap:4,flexWrap:"wrap"}}>
<Btn small onClick={()=>flash("Saved as artifact")}><I.Save size={10}/>Artifact</Btn>
<Btn small onClick={()=>flash("Saved as note")}><I.FileText size={10}/>Note</Btn>
<Btn small onClick={()=>flash("Pinned to Paramount bucket")}><I.Pin size={10}/>Pin</Btn>
</div>
</div>
</div>}
</div>}
</div>
{/* DOWNLOADS TRAY */}
{showDownloads&&<DownloadsTray items={[
{name:"BC587659_MIL_3.pdf",size:"2.1 MB",done:true,progress:100},
{name:"Sanli_Expert_Report.pdf",size:"8.4 MB",done:false,progress:67},
]} onClose={()=>setShowDownloads(false)}/>}
{/* STATUS BAR */}
<div style={{display:"flex",alignItems:"center",gap:8,padding:"3px 12px",borderTop:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt,fontSize:10,color:c.textTer,flexShrink:0}}>
<span>{currentTab?.incognito?"Incognito":"ecf.cacd.uscourts.gov"}</span>
<span>·</span>
<span>4,200 words</span>
<span>·</span>
<span style={{display:"flex",alignItems:"center",gap:3}}><Dot color={c.green} size={5}/>Paramount project</span>
{currentTab?.incognito&&<><span>·</span><span style={{color:"#a78bfa",display:"flex",alignItems:"center",gap:3}}><I.Shield size={9} color="#a78bfa"/>No signals emitted</span></>}
<span style={{marginLeft:"auto",cursor:"pointer"}} onClick={()=>{const z=zoom===100?110:zoom===110?125:zoom===125?150:100;setZoom(z);flash(`Zoom: ${z}%`)}}>{zoom}%</span>
<span>·</span>
<span style={{display:"flex",alignItems:"center",gap:3}}><I.Scissors size={9}/>{clipsCount} clips</span>
</div>
</div>
</div>
);
}