// Frame 3 — Collaborative Agents running. Three panes: PM, Legal, Security.

const AgentPane = ({ mono, name, role, chips, children }) => (
  <div className="agent-pane">
    <div className="agent-pane-head">
      <div className="agent-identity">
        <div className="agent-mono">{mono}</div>
        <div>
          <div className="agent-name">{name}</div>
          <div className="agent-role">{role}</div>
        </div>
      </div>
      <div className="agent-chips">{chips}</div>
    </div>
    <div className="agent-stream">{children}</div>
  </div>
);

const StreamBlock = ({ label, icon, children, tool = false }) => (
  <div className={"stream-block" + (tool ? " tool" : "")}>
    <div className="label">{icon && <Icon name={icon}/>} {label}</div>
    <div className="body">{children}</div>
  </div>
);

const Frame3 = () => (
  <div className="app has-right wide" id="frame-3">
    <Sidebar variant="project-run" activeProjectChild="review"/>

    <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">Vendor review team</span>
        </div>
        <div className="status-chip"><span className="ping"/> 3 agents debating</div>
      </div>

      <div className="agents-grid three">
        <AgentPane
          mono="PM"
          name="PM Agent"
          role="Evaluating strategic fit"
          chips={<>
            <span className="chip"><Icon name="sparkles"/> Opus 4.5</span>
            <span className="chip">docs · web</span>
            <span className="chip live"><span className="ping"/> Thinking</span>
          </>}
        >
          <StreamBlock label="Reading" icon="file-text" tool>
            ACME Proposal.pdf · §3 Implementation timeline
          </StreamBlock>
          <StreamBlock label="Position" icon="diamond">
            ACME's onboarding timeline conflicts with our Q2 launch window. Their standard 8-week implementation lands Priya's team in mid-July, two weeks after the executive launch gate.
          </StreamBlock>
          <div className="stream-thought">
            Vendra offers a compressed 4-week path but requires a dedicated integration lead from our side. Northstar is 6 weeks and includes a named CSM through go-live, which is the lowest-risk option for a team already at capacity<span className="typing"/>
          </div>
        </AgentPane>

        <AgentPane
          mono="LG"
          name="Legal Agent"
          role="Reviewing contract terms"
          chips={<>
            <span className="chip"><Icon name="sparkles"/> Opus 4.5</span>
            <span className="chip">docs</span>
            <span className="chip live"><span className="ping"/> Drafting</span>
          </>}
        >
          <StreamBlock label="Flagged" icon="scale">
            Vendra's MSA has an unusual <strong>indemnification cap of 2× fees for IP claims specifically</strong> — uncommon and materially worse than ACME/Northstar (uncapped for IP).
          </StreamBlock>
          <StreamBlock label="Reading" icon="file-text" tool>
            Vendra Proposal.pdf · §11 Liability
          </StreamBlock>
          <div className="stream-thought">
            ACME's data egress window is 45 days, tighter than the 90 days in both other MSAs. On a strict security posture, this matters more than the liability cap, because it bounds the recovery path rather than the recovery amount<span className="typing"/>
          </div>
        </AgentPane>

        <AgentPane
          mono="SEC"
          name="Security Agent"
          role="Posture & compliance"
          chips={<>
            <span className="chip"><Icon name="sparkles"/> Opus 4.5</span>
            <span className="chip">web · docs</span>
            <span className="chip live"><span className="ping"/> Citing</span>
          </>}
        >
          <StreamBlock label="Finding" icon="shield">
            Northstar's SOC 2 Type II is current (attested Jan 2026). ACME's lapsed in Q1 and their renewal is mid-audit — a gap they haven't called out in the proposal.
          </StreamBlock>
          <StreamBlock label="Cross-check" icon="globe" tool>
            trust.acme.com · trust.vendra.com · security.northstar.io
          </StreamBlock>
          <div className="stream-thought">
            Vendra has ISO 27001 + SOC 2 but is missing HIPAA alignment, which matters if the Q3 healthcare pilot gets approved. Flagging to PM for the strategic-fit call<span className="typing"/>
          </div>
        </AgentPane>
      </div>

      <div className="synth-strip">
        <div className="synth-icon"><Icon name="users"/></div>
        <div className="synth-text">
          Team will return a <strong>ranked recommendation</strong> after rebuttal round.
          <div className="sub">3 agents debating · 2 positions disputed · synthesis next</div>
        </div>
        <div className="progress"><div className="progress-bar"/></div>
        <div className="eta">~2 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>Works on strategic deals at a mid-market SaaS company.</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> collaborative review by PM, Legal, Security Agents.
        </MemLine>
      </MemTier>

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

window.Frame3 = Frame3;
window.AgentPane = AgentPane;
window.StreamBlock = StreamBlock;