ELNOR REPO READER TEXT MIRROR
Original path: Design Mockups/DOC23 Mockups/Q_TASK_EVALUATOR_EXTRACTOR_V3.jsx
Source repo: /Users/OpenClaw1/Elnor/Elnor Specs
Git branch: main
Git commit: dbaa25962edc11ab30e8d4ca1715f9ae5bf77331
Generated: 2026-06-09T01:23:58.539Z

---

import React, { useState } from "react";

// ═══════════════════════════════════════════════════════════════
// EVALUATOR + EXTRACTOR EXPANDED VIEWS — V3
// Changes from V2:
//   • Per-outcome routing as default (each outcome picks its destination)
//   • Aggregate "any_failed_out" port preserved for convenience
//   • Meta-outcome shown as a distinct addable outcome type
//   • Pipeline indicator showing position in a chain of Evaluators
//   • "+ Add Outcome" with three entry paths (type · ask TA · load preset)
//   • Outcome cards default to inferred-plan SUMMARY; Adjust opens form
//   • Findings viewable on demand via drawer (R0.6.5 §26 action buttons)
//   • Findings deliverable as inline document comments option
// ═══════════════════════════════════════════════════════════════

const c = {
  bg:"#0f1117", bgCard:"#161920", bgHover:"#1c1f2a", bgSel:"#1e2233",
  bgPanel:"#131620", bgPopup:"#1a1e2b", border:"#262a36",
  text:"#e2e4ea", textSec:"#8b8fa3", textTer:"#5d6178",
  accent:"#5b8af5", green:"#34d399", red:"#f87171",
  amber:"#fbbf24", purple:"#a78bfa", cyan:"#22d3ee", orange:"#fb923c",
  metaAccent:"#e879f9",
};
const sans = "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
const mono = "'SF Mono','Cascadia Code','Fira Code', monospace";

// ─── Helpers ───
const SectionLabel = ({children, mt}) => (
  <div style={{fontSize:9,fontWeight:700,color:c.textTer,marginTop:mt?20:0,marginBottom:8,letterSpacing:1,textTransform:"uppercase",fontFamily:sans}}>
    {children}
  </div>
);
const FieldLabel = ({children, mt}) => (
  <div style={{fontSize:10,fontWeight:600,color:c.textSec,marginTop:mt?12:0,marginBottom:5,fontFamily:sans}}>{children}</div>
);
const HelperText = ({children}) => (
  <div style={{fontSize:10,color:c.textTer,marginTop:5,lineHeight:1.5,fontStyle:"italic",fontFamily:sans}}>{children}</div>
);
const Select = ({opts, v, onChange, compact}) => (
  <select defaultValue={v} onChange={onChange||(()=>{})} style={{width:"100%",background:c.bg,border:`1px solid ${c.border}`,borderRadius:4,padding:compact?"5px 7px":"7px 9px",fontSize:11,color:c.text,fontFamily:sans,outline:"none"}}>
    {opts.map((o,i)=><option key={i} value={o}>{o}</option>)}
  </select>
);
const Textarea = ({value, h, placeholder, onChange}) => (
  <textarea defaultValue={value} placeholder={placeholder} onChange={onChange||(()=>{})}
    style={{width:"100%",background:c.bg,border:`1px solid ${c.border}`,borderRadius:4,padding:"8px 10px",fontSize:11,color:c.text,fontFamily:sans,resize:"vertical",minHeight:h||60,outline:"none",lineHeight:1.5}} />
);
const Input = ({value, placeholder, onChange, w}) => (
  <input defaultValue={value} placeholder={placeholder} onChange={onChange||(()=>{})}
    style={{width:w||"100%",background:c.bg,border:`1px solid ${c.border}`,borderRadius:4,padding:"6px 9px",fontSize:11,color:c.text,fontFamily:sans,outline:"none"}} />
);
const Check = ({label, checked, onChange, hint}) => (
  <div style={{padding:"3px 0"}}>
    <label style={{display:"flex",alignItems:"center",gap:8,fontSize:11,color:c.text,cursor:"pointer",fontFamily:sans}}>
      <span style={{width:14,height:14,borderRadius:3,border:`1px solid ${checked?c.accent:c.border}`,background:checked?c.accent:"transparent",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
        {checked && <span style={{color:"#fff",fontSize:9,fontWeight:700}}>✓</span>}
      </span>
      <span>{label}</span>
    </label>
    {hint && <div style={{fontSize:9,color:c.textTer,marginLeft:22,marginTop:2,fontStyle:"italic"}}>{hint}</div>}
  </div>
);
const Radio = ({label, checked, hint}) => (
  <div style={{padding:"3px 0"}}>
    <label style={{display:"flex",alignItems:"flex-start",gap:8,fontSize:11,color:c.text,cursor:"pointer",fontFamily:sans}}>
      <span style={{width:14,height:14,borderRadius:"50%",border:`1.5px solid ${checked?c.accent:c.border}`,background:c.bg,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,marginTop:1}}>
        {checked && <span style={{width:7,height:7,borderRadius:"50%",background:c.accent}} />}
      </span>
      <div style={{flex:1}}>
        <div>{label}</div>
        {hint && <div style={{fontSize:9,color:c.textTer,marginTop:2,fontStyle:"italic",lineHeight:1.5}}>{hint}</div>}
      </div>
    </label>
  </div>
);
const Btn = ({children, primary, accent, danger, ghost, sm, onClick}) => {
  const styles = primary ? {background:c.accent,color:"#fff",border:"none"}
    : accent ? {background:`${c.accent}15`,color:c.accent,border:`1px solid ${c.accent}40`}
    : danger ? {background:`${c.red}15`,color:c.red,border:`1px solid ${c.red}40`}
    : ghost ? {background:"transparent",color:c.textSec,border:`1px solid ${c.border}`}
    : {background:c.bgHover,color:c.text,border:`1px solid ${c.border}`};
  return <button onClick={onClick} style={{...styles,padding:sm?"4px 8px":"6px 11px",borderRadius:4,fontSize:sm?9:10,fontWeight:600,cursor:"pointer",fontFamily:sans,whiteSpace:"nowrap"}}>{children}</button>;
};
const Pill = ({children, color}) => (
  <span style={{display:"inline-block",padding:"2px 7px",borderRadius:10,fontSize:9,fontWeight:600,background:`${color}18`,color:color,border:`1px solid ${color}40`,letterSpacing:0.3,textTransform:"uppercase",fontFamily:sans}}>{children}</span>
);
const Tag = ({children, color, removable, onClick}) => (
  <span onClick={onClick} style={{display:"inline-flex",alignItems:"center",gap:5,padding:"3px 8px",borderRadius:3,fontSize:10,background:`${color||c.accent}12`,color:color||c.accent,border:`1px solid ${color||c.accent}30`,fontFamily:sans,cursor:onClick?"pointer":"default"}}>
    {children}
    {removable && <span style={{cursor:"pointer",opacity:0.6,fontSize:11}}>×</span>}
  </span>
);
const StatusBadge = ({status}) => {
  const map = {
    verified: {label:"PASSED", color:c.green, icon:"✓"},
    failed: {label:"FAILED", color:c.red, icon:"✕"},
    incomplete: {label:"INCOMPLETE", color:c.amber, icon:"◐"},
    pending: {label:"PENDING", color:c.textTer, icon:"○"},
    in_progress: {label:"IN PROGRESS", color:c.cyan, icon:"⟳"},
  };
  const m = map[status] || map.pending;
  return (
    <span style={{display:"inline-flex",alignItems:"center",gap:5,padding:"3px 9px",borderRadius:3,fontSize:9,fontWeight:700,background:`${m.color}18`,color:m.color,border:`1px solid ${m.color}40`,letterSpacing:0.3,textTransform:"uppercase",fontFamily:sans}}>
      <span>{m.icon}</span><span>{m.label}</span>
    </span>
  );
};
const ResultTypePill = ({type}) => {
  const map = {
    pass_fail: {label:"PASS/FAIL", color:c.accent},
    checklist: {label:"CHECKLIST", color:c.cyan},
    score: {label:"SCORE", color:c.purple},
    meta: {label:"META", color:c.metaAccent},
  };
  const m = map[type];
  return <Pill color={m.color}>{m.label}</Pill>;
};
const SectionHeader = ({children}) => (
  <div style={{fontSize:9,fontWeight:700,color:c.textTer,letterSpacing:1.5,textTransform:"uppercase",fontFamily:sans,marginTop:18,marginBottom:10,paddingBottom:6,borderBottom:`1px solid ${c.border}`}}>{children}</div>
);
const UploadStrip = ({label, files, hint}) => (
  <div>
    <FieldLabel>{label}</FieldLabel>
    <div style={{border:`1px dashed ${c.border}`,borderRadius:5,padding:files&&files.length?"6px":"12px",background:c.bg,cursor:"pointer"}}>
      {(!files || !files.length) ? (
        <div style={{textAlign:"center",fontSize:10,color:c.textSec,fontFamily:sans}}>
          <span style={{marginRight:6}}>📁</span>Click or drag to add files
        </div>
      ) : (
        <div style={{display:"flex",flexDirection:"column",gap:3}}>
          {files.map((f,i)=>(
            <div key={i} style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"3px 5px",fontSize:10,color:c.text}}>
              <span style={{display:"flex",alignItems:"center",gap:5}}>
                <span style={{color:c.textTer}}>{f.icon}</span>
                <span>{f.name}</span>
                {f.size && <span style={{color:c.textTer,fontSize:9}}>· {f.size}</span>}
              </span>
              <span style={{cursor:"pointer",color:c.textTer,opacity:0.5,fontSize:11}}>×</span>
            </div>
          ))}
        </div>
      )}
    </div>
    {hint && <HelperText>{hint}</HelperText>}
  </div>
);

// ═══════════════════════════════════════════════════════════════
// MAIN
// ═══════════════════════════════════════════════════════════════
export default function Mockup() {
  const [view, setView] = useState("evaluator");
  return (
    <div style={{width:"100%",height:"100vh",background:c.bg,color:c.text,fontFamily:sans,display:"flex",flexDirection:"column",overflow:"hidden"}}>
      <div style={{height:32,minHeight:32,borderBottom:`1px solid ${c.border}`,display:"flex",alignItems:"center",padding:"0 12px",gap:8,background:c.bgPanel,fontSize:9,color:c.textTer,letterSpacing:0.5}}>
        REFERENCE MOCKUP V3 — PER-OUTCOME ROUTING · META-OUTCOME · THREE-PATH CREATION
        <div style={{flex:1}} />
        <div style={{display:"flex",gap:4,padding:2,background:c.bg,borderRadius:5}}>
          {[
            {id:"evaluator",label:"⊜ Evaluator"},
            {id:"extractor",label:"◈ Extractor"},
          ].map(t=>(
            <button key={t.id} onClick={()=>setView(t.id)}
              style={{padding:"3px 10px",fontSize:10,fontWeight:600,color:view===t.id?c.text:c.textSec,background:view===t.id?c.bgHover:"transparent",border:"none",borderRadius:3,cursor:"pointer",fontFamily:sans}}>
              {t.label}
            </button>
          ))}
        </div>
      </div>
      {view === "evaluator" ? <EvaluatorView /> : <ExtractorView />}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// EVALUATOR VIEW
// ═══════════════════════════════════════════════════════════════
function EvaluatorView() {
  const [portsOpen, setPortsOpen] = useState(false);
  const [expanded, setExpanded] = useState("o3");          // outcome adjust form open
  const [adding, setAdding] = useState(false);              // showing add-outcome form
  const [findingsOpen, setFindingsOpen] = useState(null);   // outcome_id whose findings are open
  const [pipelineExpanded, setPipelineExpanded] = useState(false);

  return (
    <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden",position:"relative"}}>

      {/* Header */}
      <div style={{height:52,minHeight:52,borderBottom:`1px solid ${c.border}`,display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 22px",background:c.bgPanel}}>
        <div style={{display:"flex",alignItems:"center",gap:12}}>
          <span style={{fontSize:20}}>⊜</span>
          <div>
            <div style={{fontSize:13,fontWeight:700,color:c.text}}>Final Quality Gate</div>
            <div style={{fontSize:10,color:c.textTer,fontFamily:mono,marginTop:2}}>step.evaluator · stage 5 of 5 in pipeline</div>
          </div>
          <span style={{marginLeft:14}}><StatusBadge status="failed" /></span>
          <span style={{fontSize:11,color:c.textSec}}>7 of 8 outcomes passed · iteration 2 of 3</span>
        </div>
        <div style={{display:"flex",gap:8,alignItems:"center"}}>
          <Btn ghost>Preset…</Btn>
          <Btn primary>▶ Run</Btn>
          <span style={{fontSize:18,color:c.textSec,cursor:"pointer",padding:"0 4px",marginLeft:4}}>✕</span>
        </div>
      </div>

      {/* Pipeline indicator */}
      <PipelineIndicator expanded={pipelineExpanded} setExpanded={setPipelineExpanded} />

      {/* Body */}
      <div style={{flex:1,display:"flex",overflow:"hidden"}}>

        {/* LEFT SIDEBAR */}
        <div style={{width:300,minWidth:300,borderRight:`1px solid ${c.border}`,padding:"18px 16px 22px",overflowY:"auto",background:c.bgPanel}}>

          <SectionLabel>Connected Inputs</SectionLabel>
          <div style={{display:"flex",flexDirection:"column",gap:4,fontSize:10}}>
            <div style={{padding:"5px 7px",background:`${c.accent}10`,borderRadius:3,border:`1px solid ${c.accent}25`}}>
              <span style={{color:c.accent,fontFamily:mono}}>subject_in</span> <span style={{color:c.textSec}}>← ◆ Final Brief Draft</span>
            </div>
            <div style={{padding:"5px 7px",background:`${c.accent}10`,borderRadius:3,border:`1px solid ${c.accent}25`}}>
              <span style={{color:c.accent,fontFamily:mono}}>claims_in</span> <span style={{color:c.textSec}}>← ◈ Brief Claims</span>
            </div>
            <div style={{padding:"5px 7px",background:`${c.accent}10`,borderRadius:3,border:`1px solid ${c.accent}25`}}>
              <span style={{color:c.accent,fontFamily:mono}}>evidence_in.1</span> <span style={{color:c.textSec}}>← ◇ Case Record</span>
            </div>
            <div style={{padding:"5px 7px",background:`${c.accent}10`,borderRadius:3,border:`1px solid ${c.accent}25`}}>
              <span style={{color:c.accent,fontFamily:mono}}>evidence_in.2</span> <span style={{color:c.textSec}}>← ◇ Motion to Dismiss</span>
            </div>
          </div>

          <SectionLabel mt>Overall Pass Criteria</SectionLabel>
          <Select opts={["All required outcomes must pass","Average score ≥ threshold","Weighted score ≥ threshold"]} v="All required outcomes must pass" />

          <SectionLabel mt>Defaults</SectionLabel>
          <FieldLabel>Agent for checks</FieldLabel>
          <Select opts={["(task default)","Elnor","Nova","Atlas"]} v="(task default)" compact />
          <FieldLabel mt>Cost cap per run</FieldLabel>
          <Input value="$1.50" />
          <HelperText>Outcomes can override with their own cost cap.</HelperText>

          <SectionLabel mt>If Verdicts Fail</SectionLabel>
          <div style={{padding:11,background:c.bg,borderRadius:6,border:`1px solid ${c.border}`,fontSize:11,lineHeight:1.65,color:c.text}}>
            Try up to <Input value="3" w={36} /> revisions before giving up.
            <br />
            If the <em>same outcome</em> fails <Input value="3" w={28} /> times, send to human.
            <br />
            If no improvement after <Input value="2" w={28} /> iterations, send to human.
            <br />
            On regression: <Select opts={["revert to prior best","warn and continue","escalate"]} v="revert to prior best" compact />
          </div>

          <SectionLabel mt>When to Involve a Human</SectionLabel>
          <div style={{padding:11,background:c.bg,borderRadius:6,border:`1px solid ${c.border}`}}>
            <Radio label="Only when required outcomes fail (after retries)" checked={true} />
            <Radio label="Before any output (review every verdict)" checked={false} />
            <Radio label="On regression or stuck failures" checked={false} />
            <Radio label="Per outcome (each outcome decides)" checked={false} />
            <Radio label="Never (full auto)" checked={false} />
          </div>

          <SectionLabel mt>Sources & Materials</SectionLabel>
          <UploadStrip label="Reference materials" files={[
            {icon:"📄",name:"Bluebook 21st Ed.pdf",size:"4.2 MB"},
          ]} />
          <div style={{marginTop:10}}>
            <UploadStrip label="Evidence sources" files={[
              {icon:"📁",name:"Case Record",size:"487 docs"},
              {icon:"📄",name:"Motion to Dismiss.pdf"},
            ]} />
          </div>

          <FieldLabel mt>Connected libraries</FieldLabel>
          <div style={{display:"flex",flexDirection:"column",gap:5}}>
            {[
              {label:"DOC73 PBE: Securities Litigation", icon:"📚"},
              {label:"DOC25: Matter file (auto)", icon:"🗂"},
              {label:"CourtListener", icon:"⚖"},
            ].map((l,i)=>(
              <div key={i} style={{padding:"5px 8px",background:c.bgCard,borderRadius:3,border:`1px solid ${c.border}`,fontSize:10,color:c.text,display:"flex",alignItems:"center",gap:7}}>
                <span style={{fontSize:11}}>{l.icon}</span><span>{l.label}</span>
              </div>
            ))}
          </div>

          <SectionLabel mt>Custom Guidance</SectionLabel>
          <Textarea value="Apply strict Bluebook 21st edition standards. Prefer formal legal register. When a citation can't be verified via CourtListener, try Westlaw before marking it unresolvable." h={70} />
        </div>

        {/* MAIN */}
        <div style={{flex:1,overflowY:"auto",background:c.bg}}>

          {/* Verdict banner */}
          <div style={{padding:"18px 28px 0"}}>
            <div style={{padding:14,background:`${c.amber}08`,borderRadius:8,border:`1px solid ${c.amber}30`}}>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:6}}>
                <span style={{fontSize:12,fontWeight:700,color:c.amber}}>↺ NEEDS REVISION — iteration 2 of 3</span>
                <span style={{fontSize:10,color:c.textSec,fontFamily:mono}}>last run: 9:24 AM · cost $0.41 · 14.2s</span>
              </div>
              <div style={{fontSize:11,color:c.text,lineHeight:1.5,marginBottom:8}}>
                7 of 8 outcomes passed. <strong style={{color:c.red}}>Citations resolve to real cases</strong> failed — 3 citations didn't verify. Sent back to <span style={{color:c.accent}}>Brief Drafter</span> with structured feedback.
              </div>
              <div style={{display:"flex",gap:8}}>
                <Btn ghost sm onClick={()=>setFindingsOpen("all")}>View all findings</Btn>
                <Btn ghost sm>Compare to iteration 1</Btn>
                <Btn accent sm>Re-run</Btn>
              </div>
            </div>
          </div>

          {/* Outcomes header */}
          <div style={{padding:"22px 28px 0",display:"flex",alignItems:"center",justifyContent:"space-between"}}>
            <div>
              <div style={{fontSize:15,fontWeight:700,color:c.text,fontFamily:sans}}>Outcomes</div>
              <div style={{fontSize:11,color:c.textSec,marginTop:3}}>Each outcome describes what to check and where to send the work if it fails.</div>
            </div>
            <Btn accent sm onClick={()=>setAdding(!adding)}>{adding ? "Cancel" : "+ Add Outcome"}</Btn>
          </div>

          {/* Add Outcome inline form */}
          {adding && <AddOutcomeForm onClose={()=>setAdding(false)} />}

          {/* Outcome cards */}
          <div style={{padding:"14px 28px 28px",display:"flex",flexDirection:"column",gap:8}}>
            {OUTCOMES.map(o => (
              <OutcomeCard
                key={o.id}
                outcome={o}
                expanded={expanded===o.id}
                onToggle={()=>setExpanded(expanded===o.id?null:o.id)}
                onViewFindings={()=>setFindingsOpen(o.id)}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Port drawer */}
      <div style={{borderTop:`1px solid ${c.border}`,background:c.bgPanel}}>
        <div onClick={()=>setPortsOpen(!portsOpen)} style={{padding:"8px 22px",display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:10,fontFamily:sans,color:c.textSec,fontWeight:600,letterSpacing:0.5,textTransform:"uppercase"}}>
          <span style={{fontSize:11}}>{portsOpen?"▾":"▸"}</span>
          Ports
          <span style={{color:c.textTer,textTransform:"none",letterSpacing:0,fontWeight:400,fontStyle:"italic",marginLeft:4}}>
            6 outputs (5 per-outcome routes + 1 aggregate)
          </span>
        </div>
        {portsOpen && <PortsDrawer />}
      </div>

      {/* Findings drawer */}
      {findingsOpen && <FindingsDrawer outcomeId={findingsOpen} onClose={()=>setFindingsOpen(null)} />}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// PIPELINE INDICATOR
// ═══════════════════════════════════════════════════════════════
function PipelineIndicator({expanded, setExpanded}) {
  const stages = [
    {n:1, name:"Source Sufficiency", status:"verified"},
    {n:2, name:"Research Complete", status:"verified"},
    {n:3, name:"Outline Coverage", status:"verified"},
    {n:4, name:"No Hallucination", status:"verified"},
    {n:5, name:"Final Quality Gate", status:"in_progress", current:true},
  ];
  return (
    <div style={{borderBottom:`1px solid ${c.border}`,background:c.bg}}>
      <div onClick={()=>setExpanded(!expanded)} style={{padding:"8px 22px",display:"flex",alignItems:"center",gap:14,cursor:"pointer"}}>
        <span style={{fontSize:9,fontWeight:700,color:c.textTer,letterSpacing:1,textTransform:"uppercase"}}>Evaluator Pipeline</span>
        <div style={{flex:1,display:"flex",alignItems:"center",gap:6,overflow:"hidden"}}>
          {stages.map((s,i)=>(
            <React.Fragment key={i}>
              <div style={{
                display:"flex",alignItems:"center",gap:5,padding:"3px 9px",
                background:s.current?`${c.amber}15`:s.status==="verified"?`${c.green}10`:c.bgPanel,
                border:`1px solid ${s.current?c.amber+"50":s.status==="verified"?c.green+"30":c.border}`,
                borderRadius:11,
                fontSize:10,fontWeight:s.current?700:500,
                color:s.current?c.amber:s.status==="verified"?c.green:c.textSec,
              }}>
                <span style={{fontSize:8}}>{s.status==="verified"?"✓":s.current?"⟳":"○"}</span>
                <span>⊜ {s.name}</span>
              </div>
              {i<stages.length-1 && <span style={{color:c.textTer,fontSize:9}}>→</span>}
            </React.Fragment>
          ))}
        </div>
        <span style={{fontSize:9,color:c.textTer,fontStyle:"italic"}}>5 evaluators in chain · {expanded?"hide details ▴":"expand ▾"}</span>
      </div>
      {expanded && (
        <div style={{padding:"4px 22px 12px",fontSize:10,color:c.textSec,lineHeight:1.6,fontStyle:"italic"}}>
          This Evaluator is the final stage. Upstream stages each verified their concern; the work product reaches here only after they all passed (or were overridden by user). The final stage applies holistic checks and the meta-outcome ("output achieves the goal").
        </div>
      )}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// ADD OUTCOME FORM (three entry paths + inferred plan)
// ═══════════════════════════════════════════════════════════════
function AddOutcomeForm({onClose}) {
  const [description, setDescription] = useState("");
  const [showInferred, setShowInferred] = useState(false);

  // Simulate auto-detection
  const handleDescriptionChange = (e) => {
    setDescription(e.target.value);
    if (e.target.value.length > 20) setShowInferred(true);
  };

  return (
    <div style={{margin:"14px 28px 0",padding:18,background:c.bgPanel,border:`1px solid ${c.accent}40`,borderRadius:8}}>
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12}}>
        <div style={{fontSize:12,fontWeight:700,color:c.text}}>+ Add Outcome</div>
        <span onClick={onClose} style={{fontSize:14,color:c.textSec,cursor:"pointer"}}>✕</span>
      </div>

      <FieldLabel>Describe what to check</FieldLabel>
      <textarea
        defaultValue="Make sure all citations resolve to real cases. The citation-checker should verify each citation against CourtListener; flag any that can't be found."
        onChange={handleDescriptionChange}
        placeholder="Plain language — what does success look like for this outcome?"
        style={{width:"100%",background:c.bg,border:`1px solid ${c.border}`,borderRadius:4,padding:"9px 11px",fontSize:11,color:c.text,fontFamily:sans,resize:"vertical",minHeight:60,outline:"none",lineHeight:1.5}}
      />

      <div style={{display:"flex",gap:8,alignItems:"center",marginTop:10,flexWrap:"wrap"}}>
        <span style={{fontSize:10,color:c.textTer}}>OR start from:</span>
        <Btn ghost sm>💬 Ask Task Agent</Btn>
        <Btn ghost sm>📋 Load preset</Btn>
        <Btn ghost sm><span style={{color:c.metaAccent}}>⊕</span> Meta — overall quality check</Btn>
      </div>

      {/* Inferred plan */}
      {(showInferred || description.length === 0) && (
        <div style={{marginTop:16,padding:14,background:c.bg,borderRadius:6,border:`1px solid ${c.accent}30`}}>
          <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:8}}>
            <span style={{fontSize:11}}>🪄</span>
            <span style={{fontSize:10,fontWeight:700,color:c.accent,letterSpacing:0.5,textTransform:"uppercase"}}>Inferred Plan</span>
            <span style={{fontSize:9,color:c.textTer,fontStyle:"italic"}}>· you can adjust any of this</span>
          </div>

          <div style={{fontSize:11,color:c.text,lineHeight:1.7,marginBottom:12}}>
            This looks like a <strong style={{color:c.accent}}>citation accuracy check</strong>. I'll use the <strong>citation-checker specialist agent</strong> to verify each citation in the brief against CourtListener.
            <br/><br/>
            <span style={{color:c.textSec}}>Result type:</span> <strong>Checklist</strong> (each citation gets verified individually, threshold 100%)
            <br/>
            <span style={{color:c.textSec}}>Reference materials needed:</span> CourtListener (already connected) · Case Record (already wired)
            <br/>
            <span style={{color:c.textSec}}>If it fails:</span> Route to <Select opts={["⊜ Citation Specialist (revise)","↻ Brief Drafter (revise)","👤 Human Review","+ Pick destination..."]} v="⊜ Citation Specialist (revise)" compact /> 
            <br/>
            <span style={{color:c.textSec}}>Retry:</span> up to 3 attempts · <span style={{color:c.textSec}}>Can it gather more info:</span> yes — allowed to search Westlaw if CourtListener fails (capped at $0.50)
          </div>

          <div style={{display:"flex",gap:8,justifyContent:"flex-end"}}>
            <Btn ghost sm>Adjust details…</Btn>
            <Btn ghost sm>💬 Refine with Task Agent</Btn>
            <Btn primary sm onClick={onClose}>Add outcome →</Btn>
          </div>
        </div>
      )}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// OUTCOME DATA
// ═══════════════════════════════════════════════════════════════
const OUTCOMES = [
  {
    id:"o0", isMeta:true,
    name:"Output achieves the goal",
    desc:"The final brief opposes the motion to dismiss by showing (1) standing exists, (2) the complaint states a claim under Rule 12(b)(6), (3) the heightened pleading standard is met, and (4) loss causation is adequately alleged.",
    resultType:"score",
    required:true,
    score:0.82, threshold:0.85,
    status:"failed",
    routeOnFail:"👤 Human Review",
    summary:"Holistic LLM judgment against the goal statement above. Reads the final draft, checks whether it accomplishes what the user asked for. Threshold 0.85.",
    decomposed:true,
    method:"agent_assess",
  },
  {
    id:"o1", name:"Citations are present",
    desc:"Brief contains at least the citations required to support the argument.",
    resultType:"pass_fail", required:true,
    status:"verified",
    routeOnFail:"↻ Brief Drafter (revise)",
    summary:"Auto-check using regex pattern matching for citation format. Fails if fewer than 5 citations found.",
    method:"auto_check",
    lastResultText:"19 citations found.",
  },
  {
    id:"o2", name:"Brief addresses all motion issues",
    desc:"The motion to dismiss raised 7 issues; the brief addresses each.",
    resultType:"checklist", required:true,
    status:"verified", count:{passed:7, total:7},
    routeOnFail:"↻ Brief Drafter (with missing issues listed)",
    summary:"Extract issues from Motion to Dismiss; verify each is addressed in the brief via agent assessment. Pass when all 7 addressed.",
    method:"check_claims",
  },
  {
    id:"o3", name:"Citations resolve to real cases",
    desc:"All cases cited resolve to real cases in CourtListener. Each citation verified via citation-checker; cases not found within 3 lookup attempts return as failures with the case name and search attempts logged.",
    resultType:"checklist", required:true,
    status:"failed", count:{passed:16, total:19},
    dependsOn:["Citations are present"],
    routeOnFail:"⊜ Citation Specialist (revise + verify)",
    summary:"Citation-checker specialist agent verifies each citation against CourtListener and Westlaw. Each citation is a checkpoint.",
    method:"specialist",
    referenceRequired:"required",
  },
  {
    id:"o4", name:"No factual claims unsupported by record",
    desc:"Every factual assertion in the brief is supported by an explicit reference to the record.",
    resultType:"pass_fail", required:true,
    status:"verified",
    routeOnFail:"↻ Brief Drafter (revise unsupported facts)",
    summary:"Extract FactualAssertion claims from upstream extractor; verify each against the Case Record. 100% pass rate required.",
    method:"check_claims",
    lastResultText:"34 of 34 factual claims supported.",
  },
  {
    id:"o5", name:"Argument is persuasive",
    desc:"The brief constructs a persuasive case, addressing counterarguments and supporting reasoning with cited authority.",
    resultType:"score", required:false,
    status:"verified", score:0.78, threshold:0.7,
    routeOnFail:"↻ Brief Drafter (with rubric feedback)",
    summary:"Agent assessment using 'My legal-arg rubric' (4 sub-criteria, weighted). Threshold 0.7 for desired pass.",
    method:"agent_assess",
    decomposed:true,
  },
  {
    id:"o6", name:"Tone is professional",
    desc:"Consistent with court filing standards.",
    resultType:"score", required:false,
    status:"verified", score:0.85, threshold:0.7,
    routeOnFail:"↻ Brief Drafter (tone notes)",
    summary:"Agent assessment with 1-5 anchored scale. Threshold 0.7 for desired pass.",
    method:"agent_assess",
  },
  {
    id:"o7", name:"Brief between 4000-8000 words",
    desc:"Word count falls within the court's required range.",
    resultType:"pass_fail", required:true,
    status:"verified",
    routeOnFail:"↻ Brief Drafter (trim or expand)",
    summary:"Auto-check on word count. Min 4000, max 8000.",
    method:"auto_check",
    lastResultText:"6,247 words.",
  },
];

// ═══════════════════════════════════════════════════════════════
// OUTCOME CARD
// ═══════════════════════════════════════════════════════════════
function OutcomeCard({outcome, expanded, onToggle, onViewFindings}) {
  const isMeta = outcome.isMeta;
  return (
    <div style={{
      background:c.bgCard,
      border:`1px solid ${expanded ? (isMeta?c.metaAccent+"50":c.accent+"40") : isMeta?c.metaAccent+"30":c.border}`,
      borderRadius:7,overflow:"hidden",transition:"border 0.15s",
      ...(isMeta && {boxShadow:`inset 3px 0 0 ${c.metaAccent}`})
    }}>
      {/* Header row */}
      <div onClick={onToggle} style={{padding:"13px 16px",cursor:"pointer",display:"flex",alignItems:"center",gap:12}}>
        <span style={{color:c.textTer,fontSize:11,minWidth:10}}>{expanded?"▾":"▸"}</span>

        <div style={{flex:1,minWidth:0}}>
          <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4,flexWrap:"wrap"}}>
            {isMeta && <span style={{fontSize:12,color:c.metaAccent}}>⊕</span>}
            <span style={{fontSize:13,fontWeight:600,color:c.text}}>{outcome.name}</span>
            <ResultTypePill type={isMeta?"meta":outcome.resultType} />
            {outcome.required ? <Pill color={c.amber}>REQUIRED</Pill> : <Pill color={c.textTer}>OPTIONAL</Pill>}
            {outcome.dependsOn && <Pill color={c.textSec}>↳ depends on {outcome.dependsOn.length}</Pill>}
            {outcome.routeOnFail && (
              <span style={{fontSize:9,color:c.textTer,fontFamily:sans,marginLeft:"auto"}}>
                if fails → <span style={{color:c.textSec}}>{outcome.routeOnFail}</span>
              </span>
            )}
          </div>
          {!expanded && (
            <div style={{fontSize:10,color:c.textSec,lineHeight:1.4,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>
              {outcome.desc}
            </div>
          )}
        </div>

        <div style={{display:"flex",alignItems:"center",gap:8}}>
          <ResultIndicator outcome={outcome} />
          {outcome.status === "failed" && (
            <Btn ghost sm onClick={(e)=>{e.stopPropagation();onViewFindings();}}>View findings</Btn>
          )}
        </div>
      </div>

      {expanded && (
        <OutcomeCardExpanded outcome={outcome} onViewFindings={onViewFindings} />
      )}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// OUTCOME CARD — EXPANDED (summary view + Adjust panel)
// ═══════════════════════════════════════════════════════════════
function OutcomeCardExpanded({outcome, onViewFindings}) {
  const [adjustOpen, setAdjustOpen] = useState(false);
  const isMeta = outcome.isMeta;

  return (
    <div style={{borderTop:`1px solid ${c.border}`,padding:"4px 22px 22px",background:c.bg}}>

      {/* What this checks */}
      <SectionHeader>What this checks</SectionHeader>
      <Textarea value={outcome.desc} h={isMeta?100:70} />
      <HelperText>
        {isMeta
          ? "This is the meta-outcome: a holistic check against the stated goal. The description above is the goal statement."
          : "This description is the operative spec — what the verifier reads."}
      </HelperText>

      {/* Plain-English plan (summary mode default) */}
      <SectionHeader>The plan</SectionHeader>
      <div style={{padding:13,background:c.bgPanel,borderRadius:6,border:`1px solid ${c.border}`,fontSize:11,color:c.text,lineHeight:1.7}}>
        {outcome.summary}
      </div>
      <div style={{marginTop:10,display:"flex",gap:8,alignItems:"center"}}>
        <Btn ghost sm onClick={()=>setAdjustOpen(!adjustOpen)}>{adjustOpen ? "Hide details ▴" : "Adjust details ▾"}</Btn>
        <Btn ghost sm>💬 Refine with Task Agent</Btn>
        {isMeta && <span style={{fontSize:9,color:c.textTer,fontStyle:"italic",marginLeft:"auto"}}>Goal can be auto-filled from Task Blueprint when available.</span>}
      </div>

      {adjustOpen && <AdjustPanel outcome={outcome} />}

      {/* Routing */}
      <SectionHeader>If this fails</SectionHeader>
      <div style={{padding:13,background:c.bgPanel,borderRadius:6,border:`1px solid ${c.border}`}}>
        <div style={{display:"flex",alignItems:"center",gap:8,flexWrap:"wrap",fontSize:11,color:c.text,lineHeight:1.8}}>
          Send to
          <Select opts={[
            outcome.routeOnFail,
            "↻ Brief Drafter (revise)",
            "⊜ Citation Specialist (re-verify)",
            "📚 Research Module (gather more)",
            "👤 Human Review (with findings)",
            "↺ Loop back (default failed_out)",
            "+ Custom destination..."
          ]} v={outcome.routeOnFail} compact />
          <span style={{fontSize:10,color:c.textTer}}>· Custom port name:</span>
          <Input value={outcome.id === "o3" ? "to_citation_specialist" : "auto"} w={180} />
        </div>

        <div style={{marginTop:10,padding:10,background:c.bg,borderRadius:5}}>
          <Check label="Try again first (up to 3 retries)" checked={true} />
          <Check label="Send findings as inline document comments" checked={outcome.id === "o5"} hint="Comments appear anchored to the relevant sections for human editing." />
          <Check label="Send to human if still failing after retries" checked={true} />
          <Check label="Can gather more info during verification" checked={outcome.id === "o3"} hint="Specialist may search Westlaw if CourtListener fails. Capped at $0.50 and 3 attempts." />
        </div>
      </div>

      {/* Last result */}
      {outcome.status && outcome.status !== "pending" && (
        <>
          <SectionHeader>Last result (iteration 2)</SectionHeader>
          <ResultSummary outcome={outcome} onViewFindings={onViewFindings} />
        </>
      )}
    </div>
  );
}

// ─── Adjust panel (the form-fill power view) ───
function AdjustPanel({outcome}) {
  return (
    <div style={{marginTop:12,padding:14,background:c.bgPanel,borderRadius:6,border:`1px solid ${c.border}`}}>
      <div style={{fontSize:9,fontWeight:700,color:c.textTer,letterSpacing:1,textTransform:"uppercase",marginBottom:10}}>Adjust Details</div>

      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        <div>
          <FieldLabel>Check by</FieldLabel>
          <Select opts={[
            "Auto-check (mechanical)",
            "Check claims (from extractor)",
            "Specialist agent (citation-checker, etc.)",
            "Agent assessment (LLM judge with rubric)",
            "Multiple checks",
          ]} v={
            outcome.method==="auto_check" ? "Auto-check (mechanical)" :
            outcome.method==="check_claims" ? "Check claims (from extractor)" :
            outcome.method==="specialist" ? "Specialist agent (citation-checker, etc.)" :
            "Agent assessment (LLM judge with rubric)"
          } compact />
          <HelperText>Auto-detected from description above. Override if needed.</HelperText>

          <FieldLabel mt>Specialist agent</FieldLabel>
          <Select opts={["citation-checker","fact-checker","legal-researcher","custom…"]} v="citation-checker" compact />

          <FieldLabel mt>Reference materials needed</FieldLabel>
          <Select opts={["Required for verification","Used if available","Audit only","Not needed"]} v={outcome.referenceRequired === "required" ? "Required for verification" : "Used if available"} compact />

          <FieldLabel mt>Iteration policy</FieldLabel>
          <Select opts={["Re-verify always","Re-verify if subject changed","Re-verify only if previously failed","Verify once"]} v="Re-verify if subject changed" compact />
        </div>

        <div>
          <FieldLabel>Pass threshold</FieldLabel>
          {outcome.resultType === "pass_fail" && <div style={{fontSize:11,color:c.text,padding:"7px 9px",background:c.bg,borderRadius:4,border:`1px solid ${c.border}`}}>Passes when check returns true</div>}
          {outcome.resultType === "checklist" && <Select opts={["all items","≥ 95% of items","at least N items"]} v="all items" compact />}
          {outcome.resultType === "score" && <Input value={outcome.threshold?.toString() || "0.7"} />}

          <FieldLabel mt>Cost cap (this outcome)</FieldLabel>
          <Input value="$0.50" />

          <FieldLabel mt>Decomposition</FieldLabel>
          <div style={{padding:10,background:c.bg,borderRadius:5,border:`1px solid ${c.border}`}}>
            <Check label="Break into sub-criteria (rubric)" checked={!!outcome.decomposed} />
            {outcome.decomposed && <Btn ghost sm>⚡ Help me build sub-criteria</Btn>}
          </div>

          <FieldLabel mt>Status</FieldLabel>
          <div style={{display:"flex",gap:14}}>
            <Check label="Required" checked={outcome.required} />
            <Check label="Inverse (must NOT be true)" checked={false} />
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Result indicator (compact, card header) ───
function ResultIndicator({outcome}) {
  const isMeta = outcome.isMeta;
  if (!outcome.status || outcome.status === "pending") return <StatusBadge status="pending" />;

  if (outcome.resultType === "pass_fail") {
    return <StatusBadge status={outcome.status} />;
  }
  if (outcome.resultType === "checklist") {
    return (
      <div style={{display:"flex",alignItems:"center",gap:8}}>
        <span style={{fontSize:10,color:outcome.count.passed===outcome.count.total?c.green:c.red,fontFamily:mono,fontWeight:700}}>
          {outcome.count.passed} / {outcome.count.total}
        </span>
        <StatusBadge status={outcome.status} />
      </div>
    );
  }
  if (outcome.resultType === "score") {
    const passed = outcome.score >= outcome.threshold;
    return (
      <div style={{display:"flex",alignItems:"center",gap:8}}>
        <div style={{position:"relative",width:70,height:6,background:c.bg,borderRadius:3,overflow:"hidden"}}>
          <div style={{width:`${outcome.score*100}%`,height:"100%",background:passed?c.green:c.red,borderRadius:3}} />
          <div style={{position:"absolute",left:`${outcome.threshold*100}%`,top:-2,width:1,height:10,background:c.textTer}} />
        </div>
        <span style={{fontSize:10,color:passed?c.green:c.red,fontFamily:mono,fontWeight:700}}>{outcome.score.toFixed(2)}</span>
        <StatusBadge status={passed?"verified":"failed"} />
      </div>
    );
  }
}

// ─── Result summary (in expanded card body) ───
function ResultSummary({outcome, onViewFindings}) {
  const isFail = outcome.status === "failed";
  if (!isFail) {
    return (
      <div style={{padding:12,background:`${c.green}08`,borderRadius:6,border:`1px solid ${c.green}25`}}>
        <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:6}}>
          <StatusBadge status="verified" />
          {outcome.resultType==="score" && (
            <span style={{fontSize:10,color:c.green,fontFamily:mono}}>score {outcome.score.toFixed(2)} / threshold {outcome.threshold.toFixed(2)}</span>
          )}
          {outcome.resultType==="checklist" && (
            <span style={{fontSize:10,color:c.green,fontFamily:mono}}>{outcome.count.passed} of {outcome.count.total}</span>
          )}
        </div>
        <div style={{fontSize:11,color:c.text}}>{outcome.lastResultText || "Passed."}</div>
      </div>
    );
  }

  // FAIL — show routing status as default, with "View findings" affordance
  return (
    <div style={{padding:12,background:`${c.amber}08`,borderRadius:6,border:`1px solid ${c.amber}30`}}>
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8}}>
        <div style={{display:"flex",alignItems:"center",gap:8}}>
          <Pill color={c.amber}>↻ SENT FOR REVISION</Pill>
          {outcome.resultType==="checklist" && <span style={{fontSize:10,color:c.red,fontFamily:mono}}>{outcome.count.passed} of {outcome.count.total}</span>}
          {outcome.resultType==="score" && <span style={{fontSize:10,color:c.red,fontFamily:mono}}>score {outcome.score.toFixed(2)} / threshold {outcome.threshold.toFixed(2)}</span>}
        </div>
        <span style={{fontSize:10,color:c.textSec,fontFamily:mono}}>iteration 2 of 3</span>
      </div>

      <div style={{fontSize:11,color:c.text,lineHeight:1.6,marginBottom:10}}>
        Work routed to <strong style={{color:c.accent}}>{outcome.routeOnFail}</strong> with structured feedback. Revising now.
      </div>

      <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
        <Btn ghost sm onClick={onViewFindings}>📋 View findings (3)</Btn>
        <Btn ghost sm>💬 Send comments to drafter</Btn>
        <Btn ghost sm>👤 Override — send to human</Btn>
        <Btn ghost sm>↻ Re-evaluate now</Btn>
      </div>

      <div style={{fontSize:9,color:c.textTer,marginTop:10,fontStyle:"italic",lineHeight:1.5}}>
        Findings are written to the audit trail and available here on demand. The system has routed the work to the destination above; you don't need to address the findings unless you want to override or refine.
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// FINDINGS DRAWER
// ═══════════════════════════════════════════════════════════════
function FindingsDrawer({outcomeId, onClose}) {
  const findings = outcomeId === "o3" ? [
    {
      id:"f1", severity:"high", state:"proposed",
      title:"Citation #5 — Smith v. Jones, 432 F.3d 12 (5th Cir. 2007)",
      detail:"Case not found in CourtListener after 3 lookup attempts. Tried alternate reporters (F.2d, F. Supp.). Westlaw also returned no match.",
      authority:["tool_verified", "model_judgment_only"],
      location:"§III ¶4, line 12",
    },
    {
      id:"f2", severity:"high", state:"proposed",
      title:"Citation #8 — In re Acme Corp., 215 B.R. 89 (Bankr. S.D.N.Y. 1997)",
      detail:"Citation format valid but no matching case in CourtListener. Possible alternative: In re Acme Corp., 215 B.R. 89 (Bankr. D.N.J. 1997) — different jurisdiction.",
      authority:["tool_verified"],
      location:"§IV ¶2, line 7",
    },
    {
      id:"f3", severity:"medium", state:"proposed",
      title:"Citation #15 — Doe v. Smith (incomplete)",
      detail:"Citation incomplete — missing reporter, court, and year. Cannot verify.",
      authority:["deterministic_check"],
      location:"§V ¶1, line 3",
    },
  ] : [];

  return (
    <div onClick={onClose} style={{position:"absolute",top:0,right:0,bottom:0,left:0,background:"rgba(0,0,0,0.4)",zIndex:50,display:"flex",justifyContent:"flex-end"}}>
      <div onClick={(e)=>e.stopPropagation()} style={{width:560,maxWidth:"90%",height:"100%",background:c.bgPanel,borderLeft:`1px solid ${c.border}`,display:"flex",flexDirection:"column",boxShadow:"-10px 0 30px #0008"}}>

        {/* Drawer header */}
        <div style={{padding:"14px 18px",borderBottom:`1px solid ${c.border}`,display:"flex",alignItems:"center",justifyContent:"space-between"}}>
          <div>
            <div style={{fontSize:13,fontWeight:700,color:c.text}}>Findings · Citations resolve to real cases</div>
            <div style={{fontSize:10,color:c.textSec,marginTop:2,fontFamily:sans}}>3 findings · all proposed · iteration 2</div>
          </div>
          <span onClick={onClose} style={{fontSize:18,color:c.textSec,cursor:"pointer",padding:"0 6px"}}>✕</span>
        </div>

        {/* Drawer body */}
        <div style={{flex:1,overflowY:"auto",padding:"14px 18px"}}>

          <div style={{padding:12,background:c.bg,borderRadius:6,border:`1px solid ${c.border}`,marginBottom:14,fontSize:11,color:c.text,lineHeight:1.5}}>
            <div style={{fontSize:10,fontWeight:600,color:c.textTer,letterSpacing:0.5,marginBottom:4}}>WHAT HAPPENED</div>
            The system attempted to verify 19 citations. 16 verified successfully. 3 could not be verified after 3 attempts each using CourtListener; alternate reporters and Westlaw lookups also failed.
            <br/><br/>
            <div style={{fontSize:10,fontWeight:600,color:c.textTer,letterSpacing:0.5,marginBottom:4}}>WHAT'S BEING DONE</div>
            <span style={{color:c.amber}}>↻ The work has been routed to Citation Specialist with the structured feedback below.</span> The specialist will attempt re-verification and either correct the citations or remove them. If still failing after retry, this finding escalates to you.
          </div>

          <div style={{fontSize:10,fontWeight:700,color:c.textTer,letterSpacing:1,textTransform:"uppercase",marginBottom:10}}>Findings ({findings.length})</div>

          <div style={{display:"flex",flexDirection:"column",gap:10}}>
            {findings.map((f, i) => (
              <FindingCard key={f.id} finding={f} />
            ))}
          </div>

          <div style={{marginTop:18,padding:12,background:c.bgCard,borderRadius:6,border:`1px solid ${c.border}`}}>
            <div style={{fontSize:10,fontWeight:600,color:c.textTer,letterSpacing:0.5,marginBottom:8,textTransform:"uppercase"}}>Delivery options</div>
            <Check label="Send findings as inline document comments (anchored to brief sections)" checked={false} hint="Useful for human-edit workflows. Comments appear in the Brief draft at the cited locations." />
            <Check label="Post findings to Task Forum / Board" checked={true} />
            <Check label="Save full audit bundle to Run Inspector" checked={true} hint="Always on. Findings are part of the permanent audit trail regardless of UI display." />
          </div>
        </div>

        {/* Drawer footer — actions */}
        <div style={{padding:"12px 18px",borderTop:`1px solid ${c.border}`,display:"flex",gap:8,flexWrap:"wrap",background:c.bg}}>
          <Btn ghost sm>📎 Open evidence</Btn>
          <Btn ghost sm>✓ Accept guidance</Btn>
          <Btn ghost sm>✕ Mark wrong</Btn>
          <Btn ghost sm>⤓ Supersede</Btn>
          <Btn ghost sm>👤 Send to human</Btn>
          <Btn ghost sm>💬 Ask Task Agent</Btn>
          <Btn accent sm>↻ Fork from here</Btn>
        </div>
      </div>
    </div>
  );
}

function FindingCard({finding}) {
  const sevColor = finding.severity === "high" ? c.red : finding.severity === "medium" ? c.amber : c.textSec;
  return (
    <div style={{padding:12,background:c.bgCard,border:`1px solid ${c.border}`,borderRadius:6,borderLeft:`3px solid ${sevColor}`}}>
      <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:6,flexWrap:"wrap"}}>
        <Pill color={sevColor}>{finding.severity}</Pill>
        <Pill color={c.textSec}>{finding.state}</Pill>
        {finding.authority.map((a,i) => <Tag key={i} color={c.textTer}>{a}</Tag>)}
        <span style={{fontSize:9,color:c.textTer,fontFamily:mono,marginLeft:"auto"}}>{finding.location}</span>
      </div>
      <div style={{fontSize:11,color:c.text,fontWeight:600,marginBottom:4}}>{finding.title}</div>
      <div style={{fontSize:10,color:c.textSec,lineHeight:1.5}}>{finding.detail}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// PORT DRAWER
// ═══════════════════════════════════════════════════════════════
function PortsDrawer() {
  const inputs = [
    {label:"subject_in", role:"required · data", color:c.accent, wired:"◆ Final Brief Draft"},
    {label:"reference_in", role:"optional · data", color:c.accent, wired:null},
    {label:"evidence_in.N", role:"optional · expandable", color:c.accent, wired:"◇ Case Record + Motion"},
    {label:"claims_in", role:"optional · data", color:c.accent, wired:"◈ Brief Claims"},
    {label:"human_response_in", role:"optional · data", color:c.amber, wired:null, note:"when human review used"},
  ];
  const outputs = [
    {label:"verdict_out", role:"always · data", color:c.cyan, wired:null},
    {label:"passed_out", role:"signal+data", color:c.green, wired:"↺ Loop.stop_in"},
    {label:"any_failed_out", role:"aggregate fallback", color:c.red, wired:null, note:"fires when any outcome fails (convenience)"},
    {label:"meta_failed_out", role:"per-outcome route", color:c.metaAccent, wired:"👤 Human Review"},
    {label:"citations_present_failed_out", role:"per-outcome route", color:c.red, wired:"↻ Brief Drafter"},
    {label:"motion_issues_failed_out", role:"per-outcome route", color:c.red, wired:"↻ Brief Drafter"},
    {label:"to_citation_specialist", role:"per-outcome route · custom name", color:c.red, wired:"⊜ Citation Specialist"},
    {label:"factual_claims_failed_out", role:"per-outcome route", color:c.red, wired:"↻ Brief Drafter"},
    {label:"persuasive_failed_out", role:"per-outcome route", color:c.red, wired:"↻ Brief Drafter"},
    {label:"tone_failed_out", role:"per-outcome route", color:c.red, wired:"↻ Brief Drafter"},
    {label:"word_count_failed_out", role:"per-outcome route", color:c.red, wired:"↻ Brief Drafter"},
    {label:"feedback_out", role:"data", color:c.purple, wired:"↺ Loop.feedback_in"},
    {label:"findings_out", role:"data · structured", color:c.purple, wired:null, note:"to forum / comments"},
    {label:"signal_out", role:"always · signal", color:c.amber, wired:null},
    {label:"error_out", role:"signal+data", color:c.red, wired:null},
  ];
  return (
    <div style={{padding:"6px 22px 16px",borderTop:`1px solid ${c.border}`,background:c.bg,display:"flex",gap:24,maxHeight:280,overflowY:"auto"}}>
      <div style={{flex:1}}>
        <div style={{fontSize:9,fontWeight:700,color:c.textTer,letterSpacing:0.5,marginBottom:8}}>INPUTS</div>
        {inputs.map((p,i)=><PortRow key={i} port={p} />)}
      </div>
      <div style={{flex:1.6}}>
        <div style={{fontSize:9,fontWeight:700,color:c.textTer,letterSpacing:0.5,marginBottom:8}}>OUTPUTS — per-outcome routes are auto-named from outcomes; custom names override</div>
        {outputs.map((p,i)=><PortRow key={i} port={p} />)}
      </div>
    </div>
  );
}
function PortRow({port}) {
  return (
    <div style={{display:"flex",alignItems:"center",gap:8,padding:"4px 7px",borderRadius:3,marginBottom:2,fontSize:10}}>
      <span style={{width:6,height:6,borderRadius:"50%",background:port.color,flexShrink:0}} />
      <span style={{color:port.color,fontFamily:mono,minWidth:200,fontWeight:600,fontSize:10}}>{port.label}</span>
      <span style={{color:c.textTer,fontFamily:mono,fontSize:9,minWidth:160}}>{port.role}</span>
      {port.wired ? (
        <span style={{color:c.text,fontSize:10}}>→ {port.wired}</span>
      ) : (
        <span style={{color:c.textTer,fontSize:9,fontStyle:"italic"}}>{port.note || "unwired"}</span>
      )}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// EXTRACTOR VIEW (lightly updated for V3 consistency)
// ═══════════════════════════════════════════════════════════════
function ExtractorView() {
  const [portsOpen, setPortsOpen] = useState(false);
  const [expandedType, setExpandedType] = useState("ct1");

  return (
    <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
      <div style={{height:52,minHeight:52,borderBottom:`1px solid ${c.border}`,display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 22px",background:c.bgPanel}}>
        <div style={{display:"flex",alignItems:"center",gap:12}}>
          <span style={{fontSize:20}}>◈</span>
          <div>
            <div style={{fontSize:13,fontWeight:700,color:c.text}}>Claim Extractor</div>
            <div style={{fontSize:10,color:c.textTer,fontFamily:mono,marginTop:2}}>step.claim_extractor · Brief Claims</div>
          </div>
          <span style={{marginLeft:14}}><Pill color={c.green}>50 claims extracted</Pill></span>
          <span><Pill color={c.cyan}>cache hit</Pill></span>
        </div>
        <div style={{display:"flex",gap:8,alignItems:"center"}}>
          <Btn ghost>Preset…</Btn>
          <Btn primary>▶ Run</Btn>
          <span style={{fontSize:18,color:c.textSec,cursor:"pointer",padding:"0 4px",marginLeft:4}}>✕</span>
        </div>
      </div>

      <div style={{flex:1,display:"flex",overflow:"hidden"}}>
        <div style={{width:300,minWidth:300,borderRight:`1px solid ${c.border}`,padding:"18px 16px",overflowY:"auto",background:c.bgPanel}}>
          <SectionLabel>Connected Inputs</SectionLabel>
          <div style={{padding:"5px 7px",background:`${c.accent}10`,borderRadius:3,border:`1px solid ${c.accent}25`,fontSize:10}}>
            <span style={{color:c.accent,fontFamily:mono}}>data_in</span> <span style={{color:c.textSec}}>← ◆ Final Brief Draft</span>
          </div>
          <SectionLabel mt>Downstream Consumers</SectionLabel>
          <div style={{padding:"5px 7px",background:`${c.green}10`,borderRadius:3,border:`1px solid ${c.green}25`,fontSize:10}}>
            <span style={{color:c.green,fontFamily:mono}}>claims_out</span> <span style={{color:c.textSec}}>→ ⊜ Final Quality Gate</span>
          </div>

          <SectionLabel mt>Extraction Agent</SectionLabel>
          <Select opts={["(task default)","Elnor","Nova","claude-haiku-4-5 (cheap)"]} v="claude-haiku-4-5 (cheap)" compact />
          <HelperText>Cheap models work for parsing. Authority-required types auto-upgrade.</HelperText>

          <SectionLabel mt>Defaults</SectionLabel>
          <FieldLabel>Min confidence</FieldLabel>
          <Input value="0.7" />
          <FieldLabel mt>Max claims (cap)</FieldLabel>
          <Input value="50" />
          <FieldLabel mt>Cost cap per run</FieldLabel>
          <Input value="$1.00" />

          <SectionLabel mt>Caching</SectionLabel>
          <Check label="Cache results" checked={true} />

          <SectionLabel mt>Custom Guidance</SectionLabel>
          <Textarea value="Prefer Bluebook format. Skip footnotes that only cross-reference (e.g., 'See supra note 3'). For factual assertions, exclude background; extract only claims the brief asserts as true." h={70} />
        </div>

        <div style={{flex:1,overflowY:"auto",background:c.bg}}>
          <div style={{padding:"18px 28px 0"}}>
            <div style={{padding:14,background:c.bgCard,borderRadius:8,border:`1px solid ${c.border}`}}>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:6}}>
                <span style={{fontSize:12,fontWeight:700,color:c.text}}>Last Run — 50 claims extracted (cached)</span>
                <span style={{fontSize:10,color:c.textSec,fontFamily:mono}}>$0.00 (cached) · was $0.12 fresh</span>
              </div>
              <div style={{display:"grid",gridTemplateColumns:"repeat(5, 1fr)",gap:8,marginTop:10}}>
                {[
                  {name:"CaseCitation",count:19,color:c.accent},
                  {name:"FactualAssertion",count:18,color:c.green},
                  {name:"LegalProposition",count:7,color:c.purple},
                  {name:"OpposingArgument",count:4,color:c.amber},
                  {name:"ProceduralFact",count:2,color:c.cyan},
                ].map((t,i)=>(
                  <div key={i} style={{padding:10,background:c.bg,borderRadius:5,border:`1px solid ${t.color}25`}}>
                    <div style={{fontSize:8,color:t.color,fontWeight:600,letterSpacing:0.5,marginBottom:2}}>{t.name.toUpperCase()}</div>
                    <div style={{fontSize:18,fontWeight:700,color:t.color,fontFamily:mono}}>{t.count}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div style={{padding:"22px 28px 0",display:"flex",alignItems:"center",justifyContent:"space-between"}}>
            <div>
              <div style={{fontSize:15,fontWeight:700,color:c.text}}>Claim Types</div>
              <div style={{fontSize:11,color:c.textSec,marginTop:3}}>What to extract. Each type defines its instruction, fields, and downstream use.</div>
            </div>
            <Btn accent sm>+ Add Claim Type</Btn>
          </div>

          <div style={{padding:"14px 28px 28px",display:"flex",flexDirection:"column",gap:8}}>
            {[
              {id:"ct1", name:"CaseCitation", desc:"Citations to legal cases — full citation, case name, holding as characterized.", count:19, evaluable:true, authority:true, consumedBy:["Citations resolve to real cases","Cited holdings characterized accurately"], expanded:expandedType==="ct1"},
              {id:"ct2", name:"FactualAssertion", desc:"Factual claims about the matter — dates, amounts, events, parties.", count:18, evaluable:true, authority:false, consumedBy:["No factual claims unsupported"], expanded:expandedType==="ct2"},
              {id:"ct3", name:"LegalProposition", desc:"Statements of legal rules or principles.", count:7, evaluable:true, authority:false, consumedBy:[], expanded:expandedType==="ct3"},
              {id:"ct4", name:"OpposingArgument", desc:"References to opposing counsel's arguments.", count:4, evaluable:true, authority:false, consumedBy:[], expanded:expandedType==="ct4"},
              {id:"ct5", name:"ProceduralFact", desc:"Statements about case procedural posture.", count:2, evaluable:false, authority:false, consumedBy:[], expanded:expandedType==="ct5"},
            ].map(t => (
              <div key={t.id} style={{background:c.bgCard,border:`1px solid ${t.expanded?c.accent+"40":c.border}`,borderRadius:7,overflow:"hidden"}}>
                <div onClick={()=>setExpandedType(t.expanded?null:t.id)} style={{padding:"13px 16px",cursor:"pointer",display:"flex",alignItems:"center",gap:12}}>
                  <span style={{color:c.textTer,fontSize:11,minWidth:10}}>{t.expanded?"▾":"▸"}</span>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4}}>
                      <span style={{fontSize:13,fontWeight:600,color:c.text,fontFamily:mono}}>{t.name}</span>
                      {t.evaluable ? <Pill color={c.green}>EVALUABLE</Pill> : <Pill color={c.textTer}>NOT EVALUABLE</Pill>}
                      {t.authority && <Pill color={c.amber}>NEEDS SPECIALIST</Pill>}
                      {t.consumedBy.length>0 && <Pill color={c.cyan}>USED BY {t.consumedBy.length}</Pill>}
                    </div>
                    {!t.expanded && <div style={{fontSize:10,color:c.textSec,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{t.desc}</div>}
                  </div>
                  <span style={{fontSize:14,fontWeight:700,color:t.count>0?c.text:c.textTer,fontFamily:mono}}>{t.count}</span>
                </div>
                {t.expanded && (
                  <div style={{borderTop:`1px solid ${c.border}`,padding:"6px 22px 22px",background:c.bg}}>
                    <SectionHeader>What this extracts</SectionHeader>
                    <FieldLabel>Description</FieldLabel>
                    <Textarea value={t.desc} h={50} />
                    <FieldLabel mt>Extraction instruction</FieldLabel>
                    <Textarea value="Extract every citation to a legal case. Include the full citation, the case name, the holding as characterized by the brief, and the source span (paragraph + line)." h={60} />
                    {t.consumedBy.length>0 && (
                      <>
                        <SectionHeader>Used by these outcomes</SectionHeader>
                        <div style={{padding:11,background:`${c.cyan}08`,borderRadius:5,border:`1px solid ${c.cyan}25`}}>
                          {t.consumedBy.map((o,i)=>(<div key={i} style={{fontSize:11,color:c.text,padding:"3px 0",cursor:"pointer"}}>↗ <span style={{color:c.cyan}}>{o}</span></div>))}
                        </div>
                      </>
                    )}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{borderTop:`1px solid ${c.border}`,background:c.bgPanel}}>
        <div onClick={()=>setPortsOpen(!portsOpen)} style={{padding:"8px 22px",display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:10,fontFamily:sans,color:c.textSec,fontWeight:600,letterSpacing:0.5,textTransform:"uppercase"}}>
          <span style={{fontSize:11}}>{portsOpen?"▾":"▸"}</span> Ports
          <span style={{color:c.textTer,textTransform:"none",letterSpacing:0,fontWeight:400,fontStyle:"italic",marginLeft:4}}>1 input · 4 outputs</span>
        </div>
        {portsOpen && (
          <div style={{padding:"6px 22px 16px",borderTop:`1px solid ${c.border}`,background:c.bg,display:"flex",gap:24}}>
            <div style={{flex:1}}>
              <div style={{fontSize:9,fontWeight:700,color:c.textTer,letterSpacing:0.5,marginBottom:8}}>INPUTS</div>
              <PortRow port={{label:"data_in",role:"required · subject",color:c.accent,wired:"◆ Final Brief Draft"}} />
            </div>
            <div style={{flex:1.4}}>
              <div style={{fontSize:9,fontWeight:700,color:c.textTer,letterSpacing:0.5,marginBottom:8}}>OUTPUTS</div>
              <PortRow port={{label:"claims_out",role:"always · data",color:c.green,wired:"⊜ Final Quality Gate"}} />
              <PortRow port={{label:"metrics_out",role:"optional",color:c.cyan,wired:null,note:"unwired"}} />
              <PortRow port={{label:"signal_out",role:"always",color:c.amber,wired:null,note:"unwired"}} />
              <PortRow port={{label:"error_out",role:"signal+data",color:c.red,wired:null,note:"unwired"}} />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}