// Frame 4 — Parallel Agents. Four independent workstreams, no debate, one Project.

const Frame4 = () => (
  <div className="app has-right wide" id="frame-4">
    <Sidebar variant="project-parallel" activeProjectChild="parallel"/>

    <div className="agents-stage">
      <div className="agents-head">
        <div className="title">
          <Icon name="folder" size={14} style={{color:'var(--accent)'}}/>
          <span className="crumb">Q2 Vendor Eval</span>
          <span className="crumb-sep">›</span>
          <span className="crumb">Parallel exploration</span>
        </div>
        <div className="status-chip"><span className="ping"/> 4 threads running</div>
      </div>

      <div className="agents-grid four">
        <AgentPane
          mono="$"
          name="Pricing model"
          role="Quantify 3-yr TCO"
          chips={<>
            <span className="chip">Sonnet 4.7</span>
            <span className="chip live"><span className="ping"/> Running</span>
          </>}
        >
          <StreamBlock label="Computing" icon="dollar">
            3-year TCO at assumed 1,200 seats, 18% YoY growth.
          </StreamBlock>
          <div className="run-log">
            <div className="row done"><span className="t">00:12</span> Parsed tier pricing · 3 files</div>
            <div className="row done"><span className="t">00:28</span> Normalized to seat-year</div>
            <div className="row done"><span className="t">00:41</span> Applied growth curve</div>
            <div className="row"><span className="t">01:04</span> Modeling overage bands…</div>
          </div>
          <StreamBlock label="Preliminary">
            Northstar cheapest at steady-state; ACME cheapest year 1 due to migration credits; Vendra most expensive in all scenarios.
          </StreamBlock>
        </AgentPane>

        <AgentPane
          mono="SEC"
          name="Security review"
          role="Posture, attestations, gaps"
          chips={<>
            <span className="chip">Sonnet 4.7</span>
            <span className="chip live"><span className="ping"/> Running</span>
          </>}
        >
          <StreamBlock label="Checking" icon="shield">
            SOC 2, ISO 27001, HIPAA, pen-test history, subprocessor lists.
          </StreamBlock>
          <div className="run-log">
            <div className="row done"><span className="t">00:09</span> Pulled trust-center pages · 3 vendors</div>
            <div className="row done"><span className="t">00:35</span> Cross-checked attestation dates</div>
            <div className="row"><span className="t">01:10</span> Comparing subprocessor overlap…</div>
          </div>
          <StreamBlock label="Finding" icon="shield">
            ACME SOC 2 lapsed Q1, renewal in progress. Flagged as highest-risk gap.
          </StreamBlock>
        </AgentPane>

        <AgentPane
          mono="DR"
          name="Draft recommendation"
          role="Exec-summary memo"
          chips={<>
            <span className="chip">Sonnet 4.7</span>
            <span className="chip"><Icon name="clock"/> Queued</span>
          </>}
        >
          <StreamBlock label="Waiting on" icon="layers">
            Pricing model · Security review
          </StreamBlock>
          <div className="run-log">
            <div className="row"><span className="t">—</span> Will synthesize into 1-page memo</div>
            <div className="row"><span className="t">—</span> Ranked recommendation + risk register</div>
            <div className="row"><span className="t">—</span> Exec-summary framing (per memory)</div>
          </div>
          <div style={{fontSize:12, color:'var(--ink-muted)', fontStyle:'italic', marginTop:'auto'}}>
            Starts automatically when both upstream threads complete.
          </div>
        </AgentPane>

        <AgentPane
          mono="RFP"
          name="RFP questions"
          role="Fill remaining unknowns"
          chips={<>
            <span className="chip">Sonnet 4.7</span>
            <span className="chip live"><span className="ping"/> Running</span>
          </>}
        >
          <StreamBlock label="Extracting gaps" icon="file-text">
            Items the 3 proposals don't answer.
          </StreamBlock>
          <div className="run-log">
            <div className="row done"><span className="t">00:18</span> Inventoried your eval criteria · 14 items</div>
            <div className="row done"><span className="t">00:44</span> Matched against proposals</div>
            <div className="row"><span className="t">01:02</span> Drafting 6 follow-ups per vendor…</div>
          </div>
          <StreamBlock label="Example">
            "Confirm whether single-tenant deployment is available on the Enterprise tier, or only on Scale+."
          </StreamBlock>
        </AgentPane>
      </div>

      <div className="synth-strip">
        <div className="synth-icon"><Icon name="git-branch"/></div>
        <div className="synth-text">
          <strong>4 parallel threads</strong> under this project · draft memo compiles when upstream completes.
          <div className="sub">No debate between threads — each returns to you independently.</div>
        </div>
        <div className="progress"><div className="progress-bar" style={{width:'48%'}}/></div>
        <div className="eta">~3 min</div>
      </div>
    </div>

    <aside className="rail">
      <div className="rail-head">
        <div>
          <div className="rail-title">Project memory</div>
          <div className="rail-title-sub">Updated live</div>
        </div>
        <button className="icon-btn"><Icon name="sliders" size={14}/></button>
      </div>

      <MemTier label="About you" count="1" defaultOpen={false}>
        <MemLine>Prefers exec-summary framing.</MemLine>
      </MemTier>

      <MemTier label="This project" count="4">
        <MemLine>Evaluating three vendors — ACME, Vendra, Northstar.</MemLine>
        <MemLine>Decision by Friday, Apr 24.</MemLine>
        <MemLine>Priority: security &gt; price &gt; onboarding.</MemLine>
        <MemLine added>
          <strong>Active:</strong> 4 parallel agents (pricing, security, draft, RFP-gaps).
        </MemLine>
      </MemTier>

      <MemTier label="This chat" count="1" defaultOpen={false}>
        <MemLine>Parallel exploration, Tuesday AM.</MemLine>
      </MemTier>
    </aside>
  </div>
);

window.Frame4 = Frame4;