// Mission Control — autonomous agent operations real-time view
function MissionControl() {
  const [selected, setSelected] = React.useState(null);
  const archCount = {
    hermes: AGENTS.filter(a => a.arch === 'hermes').length,
    openclaw: AGENTS.filter(a => a.arch === 'openclaw').length,
    custom: AGENTS.filter(a => a.arch === 'custom').length,
  };
  const totalAutonomous = AGENTS.filter(a => a.autonomy === 'autonomous').length;
  const totalApproval = AGENTS.filter(a => a.autonomy === 'approval').length;

  return (
    <div>
      <div className="page-hd">
        <div className="page-hd-l">
          <div className="page-eyebrow">Operations · live · {AGENTS.filter(a => a.status === 'live').length} working autonomously</div>
          <h1 className="page-title">Mission Control</h1>
          <div className="page-sub">Every agent decision, every conversation, every workflow run — in real time. You set the objectives. They execute.</div>
        </div>
        <div className="page-hd-r">
          <button className="btn" style={{ color: 'var(--danger)', borderColor: 'rgba(255, 93, 110, 0.3)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--danger)' }}/>
            Emergency stop
          </button>
          <button className="btn"><Icon.Pause className="icon"/>Pause all</button>
          <button className="btn primary"><Icon.Plus className="icon"/>Deploy agent</button>
        </div>
      </div>

      {/* Architecture banner */}
      <div style={{ padding: '20px 24px 0' }}>
        <div className="panel" style={{
          background: 'linear-gradient(135deg, rgba(75, 232, 255, 0.04), rgba(139, 107, 255, 0.06), rgba(255, 122, 217, 0.04))',
          borderColor: 'rgba(139, 107, 255, 0.2)',
        }}>
          <div className="panel-body" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24, alignItems: 'center' }}>
            <ArchitectureBlock kind="hermes" count={archCount.hermes} desc="Native operators · pre-built playbooks · learns from your stack"/>
            <ArchitectureBlock kind="openclaw" count={archCount.openclaw} desc="External AI workers · browser-capable · plug-and-play"/>
            <ArchitectureBlock kind="custom" count={archCount.custom} desc="Custom agents · your tools, memory, MCP servers"/>
            <AutonomyBlock total={totalAutonomous} label="FULLY AUTONOMOUS" sub="acting without approval"/>
            <AutonomyBlock total={totalApproval} label="APPROVAL MODE" sub="awaiting your sign-off"/>
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 24px 0', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
        <div className="panel">
          <div className="panel-hd">
            <h3><span className="tag live">ACTIVE</span>Agents in flight</h3>
            <span className="panel-meta">{AGENTS.filter(a => a.status === 'live').length} working · last sync 4s ago</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, padding: 14 }}>
            {AGENTS.map(a => <AgentMissionCard key={a.id} agent={a} selected={selected === a.id} onSelect={() => setSelected(a.id)}/>)}
          </div>
        </div>

        <div className="panel">
          <div className="panel-hd">
            <h3>Approval queue</h3>
            <span className="tag" style={{ color: 'var(--warn)', borderColor: 'rgba(255, 177, 75, 0.3)', background: 'rgba(255, 177, 75, 0.06)' }}>4 pending</span>
          </div>
          <div style={{ maxHeight: 540, overflowY: 'auto' }}>
            {[
              { agent: 'Atlas', kind: 'EMAIL', t: 'Send to Priya Shah · Glassblock', body: '"Yes, the SLA changes look reasonable. Updating the contract tonight and re-circulating in the morning."', risk: 'low', wait: '2m' },
              { agent: 'Calliope', kind: 'BROADCAST', t: 'Send to 1,408 founders · sequence v3', body: '"Most SDR tools want each other more than they want to talk to your customers. Here\'s what happens when you trust one operator to own the whole thread…"', risk: 'medium', wait: '8m' },
              { agent: 'Hermes', kind: 'CALL', t: 'Dial +44 161 873 4421 · Precision Barbers owner', body: 'Quarterly review call · 5 talking points prepared from last 90 days of usage data', risk: 'low', wait: '14m' },
              { agent: 'Orion', kind: 'BUDGET', t: 'Increase Meta · "Demiurge for ops" daily budget', body: 'From £200 → £340/day. ROAS is 3.4x. Confidence: 87%.', risk: 'high', wait: '24m' },
            ].map((q, i) => (
              <ApprovalCard key={i} {...q}/>
            ))}
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 24px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <div className="panel">
          <div className="panel-hd">
            <h3>Current objectives</h3>
            <span className="panel-meta">Q2 · 4 active goals</span>
          </div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              { obj: 'Generate £50k pipeline from outbound', progress: 64, owner: 'Atlas + Vesta', delta: '+£8.2k this week' },
              { obj: 'Reduce CAC by 25%', progress: 88, owner: 'Orion', delta: 'on pace · CAC £42 vs £56 target' },
              { obj: 'Book 400 meetings · Q2', progress: 60, owner: 'Atlas + Vesta + Hermes', delta: '+41 this week' },
              { obj: '95% trial activation within 14 days', progress: 42, owner: 'Iris + Calliope', delta: 'tracking · 87.2% current' },
            ].map((o, i) => (
              <div key={i}>
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 6 }}>
                  <span style={{ fontSize: 13 }}>{o.obj}</span>
                  <span className="mono" style={{ fontSize: 11, color: o.progress > 70 ? 'var(--cyan)' : 'var(--text-dim)' }}>{o.progress}%</span>
                </div>
                <div className="bar-track" style={{ height: 5 }}>
                  <div className="bar-fill flat" style={{ width: `${o.progress}%` }}/>
                </div>
                <div className="row" style={{ justifyContent: 'space-between', fontSize: 11, marginTop: 5 }}>
                  <span className="mono dim">owned by <span className="gradient-text" style={{ fontWeight: 600 }}>{o.owner.toUpperCase()}</span></span>
                  <span className="mono" style={{ color: 'var(--cyan)' }}>{o.delta}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="panel">
          <div className="panel-hd">
            <h3>Upcoming actions</h3>
            <span className="panel-meta">scheduled · next 24h</span>
          </div>
          <div style={{ maxHeight: 400, overflowY: 'auto' }}>
            {[
              { time: 'In 14m', agent: 'Hermes', t: 'Outbound dial batch · 18 calls' },
              { time: 'In 28m', agent: 'Calliope', t: 'A/B test resolution · "Founders v3 vs v4"' },
              { time: 'In 1h', agent: 'Orion', t: 'Bid adjustment sweep · 4 active campaigns' },
              { time: 'In 2h', agent: 'Atlas', t: 'Follow-up sequence step 3 · 412 prospects' },
              { time: 'Tomorrow 08:00', agent: 'Kairos', t: 'Generate weekly LinkedIn post' },
              { time: 'Tomorrow 09:00', agent: 'Calliope', t: 'Trial D-3 nudge · 218 users' },
              { time: 'Tomorrow 10:30', agent: 'Atlas', t: 'Outbound batch · "Series A founders"' },
              { time: 'Tomorrow 14:00', agent: 'Hermes', t: 'Quarterly check-in calls · 6 clients' },
            ].map((u, i, arr) => (
              <div key={i} style={{ padding: '11px 18px', borderBottom: i < arr.length - 1 ? '1px solid var(--border)' : 'none', display: 'grid', gridTemplateColumns: '110px 70px 1fr', gap: 12, alignItems: 'baseline' }}>
                <span className="mono faint" style={{ fontSize: 10, letterSpacing: '0.08em' }}>{u.time.toUpperCase()}</span>
                <span className="mono gradient-text" style={{ fontSize: 10, fontWeight: 600 }}>{u.agent.toUpperCase()}</span>
                <span style={{ fontSize: 12, color: 'var(--text)' }}>{u.t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 24px 0', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 14 }}>
        <div className="panel">
          <div className="panel-hd">
            <h3><span className="tag live">LIVE</span>Activities feed</h3>
            <button className="btn ghost sm">Pause stream</button>
          </div>
          <div style={{ maxHeight: 480, overflowY: 'auto' }}>
            {FEED.map((f, i) => (
              <div key={i} className="feed-item">
                <span className="feed-time mono">{f.t}</span>
                <span className={`feed-dot ${f.dot}`}/>
                <span className="feed-msg">
                  <span className="actor">{f.actor}</span>{' '}{f.msg}{' '}<span className="obj">{f.obj}</span>
                </span>
                <span className="feed-meta">{f.meta}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="col" style={{ gap: 14 }}>
          <div className="panel">
            <div className="panel-hd">
              <h3>Performance attribution · 30D</h3>
              <span className="panel-meta">pipeline by agent</span>
            </div>
            <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { agent: 'Atlas', val: 184, share: 38 },
                { agent: 'Vesta', val: 142, share: 30 },
                { agent: 'Hermes', val: 96, share: 20 },
                { agent: 'Calliope', val: 32, share: 7 },
                { agent: 'Other', val: 24, share: 5 },
              ].map((a, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '100px 1fr 70px', gap: 10, alignItems: 'center', fontSize: 12 }}>
                  <span className="mono gradient-text" style={{ fontSize: 11, fontWeight: 600 }}>{a.agent.toUpperCase()}</span>
                  <div className="bar-track" style={{ height: 6 }}>
                    <div className="bar-fill flat" style={{ width: `${a.share * 2.6}%` }}/>
                  </div>
                  <span className="mono tnum" style={{ textAlign: 'right' }}>£{a.val}k</span>
                </div>
              ))}
            </div>
          </div>
          <div className="panel">
            <div className="panel-hd"><h3>ROI · agent stack</h3></div>
            <div className="panel-body" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <div>
                <div className="mono faint" style={{ fontSize: 10, letterSpacing: '0.12em', marginBottom: 6 }}>SPENT · 30D</div>
                <div className="serif" style={{ fontSize: 24, fontStyle: 'italic' }}>£3,841</div>
              </div>
              <div>
                <div className="mono faint" style={{ fontSize: 10, letterSpacing: '0.12em', marginBottom: 6 }}>RETURNED</div>
                <div className="serif" style={{ fontSize: 24, fontStyle: 'italic', color: 'var(--cyan)' }}>£412k</div>
              </div>
              <div style={{ gridColumn: '1 / -1' }}>
                <div className="mono faint" style={{ fontSize: 10, letterSpacing: '0.12em', marginBottom: 6 }}>ROI MULTIPLIER</div>
                <div className="row" style={{ alignItems: 'baseline', gap: 8 }}>
                  <span className="serif gradient-text" style={{ fontSize: 38, fontStyle: 'italic', fontWeight: 600 }}>107×</span>
                  <span className="mono dim" style={{ fontSize: 11 }}>vs prior 30d 68×</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 24px 28px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
        <X402SpendPanel/>
        <div className="panel">
          <div className="panel-hd">
            <h3>Agent conversations</h3>
            <span className="panel-meta">inter-agent · last 1h</span>
          </div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { from: 'Vesta', to: 'Atlas', msg: 'Marcus Liu qualified · score 87. Routing to your queue for follow-up.', t: '2m' },
              { from: 'Orion', to: 'Calliope', msg: 'Meta audience overlap with founders email. Suggest pausing email send to Meta-reached cohort.', t: '8m' },
              { from: 'Nyx', to: 'Atlas', msg: 'jdoe@acme.io enrichment failed · no LinkedIn match. Removing from sequence.', t: '14m' },
              { from: 'Iris', to: 'Calliope', msg: 'Trial dropout signal · 12 users idle >7d. Trigger D14 sequence?', t: '32m' },
            ].map((c, i) => (
              <div key={i} className="row" style={{ padding: '10px 12px', background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', gap: 10, alignItems: 'flex-start' }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 90 }}>
                  <span className="mono gradient-text" style={{ fontSize: 10, fontWeight: 600 }}>{c.from.toUpperCase()}</span>
                  <span className="mono faint" style={{ fontSize: 9 }}>→ {c.to.toUpperCase()}</span>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12, lineHeight: 1.5 }}>{c.msg}</div>
                  <span className="mono faint" style={{ fontSize: 9, marginTop: 4, display: 'block' }}>{c.t} ago</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="panel">
          <div className="panel-hd">
            <h3>Workflow executions</h3>
            <span className="panel-meta">8.4k runs · last 24h</span>
          </div>
          <div className="panel-body">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 14 }}>
              {[
                { l: 'SUCCEEDED', v: '8,182', c: 'var(--cyan)' },
                { l: 'FAILED', v: '218', c: 'var(--danger)' },
                { l: 'RETRYING', v: '14', c: 'var(--warn)' },
              ].map(s => (
                <div key={s.l} style={{ padding: 10, background: 'rgba(0,0,0,0.25)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
                  <div className="mono faint" style={{ fontSize: 9, letterSpacing: '0.12em' }}>{s.l}</div>
                  <div className="serif" style={{ fontSize: 18, fontStyle: 'italic', color: s.c }}>{s.v}</div>
                </div>
              ))}
            </div>
            <Sparkline data={fakeStream(80, 48, 360, 80)} w={280} h={70} gradient/>
            <div className="row faint mono" style={{ fontSize: 9, marginTop: 6, justifyContent: 'space-between' }}>
              <span>−24H</span><span>−18H</span><span>−12H</span><span>−6H</span><span>NOW</span>
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-hd">
            <h3>Agent memory &amp; knowledge</h3>
            <span className="panel-meta">indexed corpora</span>
          </div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { name: 'Brand voice & banned phrases', size: '4 docs · 12k tokens', age: 'updated 2h ago', live: true },
              { name: 'Past customer conversations', size: '2,184 threads · 1.8M tokens', age: 'live · streaming', live: true },
              { name: 'Top-100 winning emails', size: '100 examples · indexed', age: '3d ago', live: true },
              { name: 'Competitor monitoring', size: '14 sources · weekly', age: 'last crawl 9h ago', live: true },
              { name: 'Sales playbook · enterprise', size: '38 pages · sectioned', age: '1w ago', live: false },
            ].map((k, i) => (
              <div key={i} className="row" style={{ padding: '10px 12px', background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', justifyContent: 'space-between' }}>
                <div style={{ flex: 1 }}>
                  <div className="row" style={{ gap: 8, marginBottom: 2 }}>
                    <Icon.Book style={{ width: 12, height: 12, color: 'var(--violet)' }}/>
                    <span style={{ fontSize: 12 }}>{k.name}</span>
                  </div>
                  <span className="mono faint" style={{ fontSize: 10 }}>{k.size}</span>
                </div>
                <div style={{ textAlign: 'right' }}>
                  {k.live && <span className="tag live" style={{ marginBottom: 4 }}>LIVE</span>}
                  <div className="mono faint" style={{ fontSize: 9 }}>{k.age}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function AgentMissionCard({ agent: a, selected, onSelect }) {
  const I = Icon[a.icon] || Icon.Bolt;
  const archInfo = {
    hermes: { l: 'HERMES', c: 'var(--cyan)' },
    openclaw: { l: 'OPENCLAW', c: 'var(--magenta)' },
    custom: { l: 'CUSTOM', c: 'var(--violet)' },
  };
  const autoInfo = {
    manual: { l: 'MANUAL', c: 'var(--text-faint)' },
    approval: { l: 'APPROVAL', c: 'var(--warn)' },
    autonomous: { l: 'AUTONOMOUS', c: 'var(--good)' },
  };
  const stateInfo = {
    live: { l: 'RUNNING', c: 'var(--cyan)', anim: true },
    paused: { l: 'WAITING', c: 'var(--text-faint)' },
    error: { l: 'ERROR', c: 'var(--danger)', anim: true },
  };
  const arch = archInfo[a.arch];
  const auto = autoInfo[a.autonomy];
  const state = stateInfo[a.status];

  return (
    <div onClick={onSelect} style={{
      padding: 14,
      background: 'rgba(255, 255, 255, 0.025)',
      border: `1px solid ${selected ? 'rgba(139, 107, 255, 0.4)' : 'var(--border)'}`,
      borderRadius: 'var(--radius-lg)',
      cursor: 'pointer',
      position: 'relative',
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div className="row" style={{ justifyContent: 'space-between' }}>
        <div className="row" style={{ gap: 10 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8,
            background: `linear-gradient(135deg, ${arch.c}22, ${arch.c}08)`,
            border: `1px solid ${arch.c}40`,
            display: 'grid', placeItems: 'center',
          }}>
            <I style={{ width: 15, height: 15, color: arch.c }}/>
          </div>
          <div>
            <div className="row" style={{ gap: 6 }}>
              <span style={{ fontSize: 13, fontWeight: 500 }}>{a.name}</span>
              <span className="mono" style={{ fontSize: 9, color: arch.c, letterSpacing: '0.12em' }}>{arch.l}</span>
            </div>
            <span className="mono faint" style={{ fontSize: 10, letterSpacing: '0.06em' }}>{a.spec}</span>
          </div>
        </div>
        <div className="row" style={{ gap: 4 }}>
          <span className="row" style={{ gap: 5, padding: '2px 7px', borderRadius: 3, fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.1em', color: state.c, background: `${state.c}10`, border: `1px solid ${state.c}30` }}>
            {state.anim && <span style={{ width: 4, height: 4, borderRadius: '50%', background: state.c, animation: 'pulse 1.6s ease-in-out infinite' }}/>}
            {state.l}
          </span>
        </div>
      </div>

      <div style={{ padding: 10, background: 'rgba(0, 0, 0, 0.25)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
        <div className="mono faint" style={{ fontSize: 9, letterSpacing: '0.12em', marginBottom: 4 }}>CURRENT TASK</div>
        <div style={{ fontSize: 11, color: 'var(--text)', lineHeight: 1.4 }}>{a.currentTask}</div>
      </div>

      <div className="row" style={{ justifyContent: 'space-between', fontSize: 10, fontFamily: 'var(--font-mono)' }}>
        <span style={{ color: auto.c }}>● {auto.l}</span>
        <span className="dim">{a.sent24.toLocaleString()} actions · 24h</span>
        <span style={{ color: 'var(--cyan)' }}>+{a.booked} booked</span>
      </div>
    </div>
  );
}

function ArchitectureBlock({ kind, count, desc }) {
  const labels = {
    hermes: { name: 'Hermes', sub: 'native', c: 'var(--cyan)' },
    openclaw: { name: 'OpenClaw', sub: 'external', c: 'var(--magenta)' },
    custom: { name: 'Custom', sub: 'built by you', c: 'var(--violet)' },
  };
  const l = labels[kind];
  return (
    <div>
      <div className="row" style={{ gap: 8, marginBottom: 6 }}>
        <span className="serif" style={{ fontSize: 22, fontStyle: 'italic', color: l.c }}>{count}</span>
        <div>
          <div className="row" style={{ gap: 6 }}>
            <span style={{ fontSize: 13 }}>{l.name}</span>
            <span className="mono faint" style={{ fontSize: 9, letterSpacing: '0.12em' }}>{l.sub.toUpperCase()}</span>
          </div>
        </div>
      </div>
      <div className="dim" style={{ fontSize: 11, lineHeight: 1.5 }}>{desc}</div>
    </div>
  );
}

function AutonomyBlock({ total, label, sub }) {
  return (
    <div>
      <div className="mono faint" style={{ fontSize: 10, letterSpacing: '0.14em', marginBottom: 6 }}>{label}</div>
      <div className="serif" style={{ fontSize: 28, fontStyle: 'italic' }}>{total}<span className="mono dim" style={{ fontSize: 11, fontFamily: 'var(--font-mono)', fontStyle: 'normal', marginLeft: 4 }}>agents</span></div>
      <div className="dim mono" style={{ fontSize: 10, marginTop: 4 }}>{sub}</div>
    </div>
  );
}

function ApprovalCard({ agent, kind, t, body, risk, wait }) {
  const riskColor = risk === 'high' ? 'var(--danger)' : risk === 'medium' ? 'var(--warn)' : 'var(--good)';
  return (
    <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
      <div className="row" style={{ justifyContent: 'space-between', marginBottom: 8 }}>
        <div className="row" style={{ gap: 8 }}>
          <span className="mono gradient-text" style={{ fontSize: 10, fontWeight: 600 }}>{agent.toUpperCase()}</span>
          <span className="channel-chip" style={{ fontSize: 9 }}>{kind}</span>
          <span className="row" style={{ gap: 5, fontSize: 9, fontFamily: 'var(--font-mono)', color: riskColor, letterSpacing: '0.1em' }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: riskColor }}/>
            {risk.toUpperCase()} RISK
          </span>
        </div>
        <span className="mono faint" style={{ fontSize: 10 }}>waiting {wait}</span>
      </div>
      <div style={{ fontSize: 12, marginBottom: 6 }}>{t}</div>
      <div className="dim" style={{ fontSize: 11, lineHeight: 1.5, marginBottom: 10, fontStyle: 'italic' }}>{body}</div>
      <div className="row" style={{ gap: 6 }}>
        <button className="btn primary sm">Approve</button>
        <button className="btn sm">Edit</button>
        <button className="btn ghost sm" style={{ color: 'var(--danger)', marginLeft: 'auto' }}>Reject</button>
      </div>
    </div>
  );
}

window.MissionControl = MissionControl;

function X402SpendPanel() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 2400);
    return () => clearInterval(id);
  }, []);
  const txns = [
    { agent: 'Nyx', svc: 'clearbit.com/enrich', amt: 0.012, t: '2s ago', status: '200' },
    { agent: 'Hermes', svc: 'vapi.ai/call/minute', amt: 0.184, t: '4s ago', status: '200' },
    { agent: 'Atlas', svc: 'api.anthropic.com', amt: 0.008, t: '8s ago', status: '200' },
    { agent: 'Orion', svc: 'soltrk.xyz/price-feed', amt: 0.002, t: '11s ago', status: '200' },
    { agent: 'Nyx', svc: 'people-api.io/match', amt: 0.014, t: '14s ago', status: '200' },
    { agent: 'Calliope', svc: 'sendgrid.com/send', amt: 0.001, t: '18s ago', status: '200' },
    { agent: 'Hermes', svc: 'elevenlabs.io/tts', amt: 0.046, t: '22s ago', status: '200' },
    { agent: 'Vesta', svc: 'apollo.io/enrich', amt: 0.018, t: '24s ago', status: '402→200' },
    { agent: 'Atlas', svc: 'api.anthropic.com', amt: 0.011, t: '28s ago', status: '200' },
    { agent: 'Nyx', svc: 'clearbit.com/enrich', amt: 0.012, t: '32s ago', status: '402→200' },
  ];
  const total24h = 18.42;
  const todayPct = 37;

  return (
    <div className="panel" style={{ borderColor: 'rgba(0, 217, 126, 0.2)', background: 'linear-gradient(135deg, rgba(0, 217, 126, 0.04), rgba(75, 232, 255, 0.02))' }}>
      <div className="panel-hd">
        <h3>
          <span style={{
            padding: '1px 6px', borderRadius: 3,
            background: 'rgba(0, 217, 126, 0.1)',
            color: '#00d97e',
            border: '1px solid rgba(0, 217, 126, 0.3)',
            fontFamily: 'var(--font-mono)',
            fontSize: 9,
            letterSpacing: '0.12em',
          }}>x402</span>
          Agent autonomous spend
        </h3>
        <span className="tag live">LIVE</span>
      </div>
      <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <div style={{ padding: 10, background: 'rgba(0, 0, 0, 0.25)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
            <div className="mono faint" style={{ fontSize: 9, letterSpacing: '0.12em' }}>SPEND · 24H</div>
            <div className="serif" style={{ fontSize: 22, fontStyle: 'italic', color: '#00d97e' }}>£{total24h.toFixed(2)}</div>
            <div className="mono dim" style={{ fontSize: 10 }}>1,408 txns · avg £0.013</div>
          </div>
          <div style={{ padding: 10, background: 'rgba(0, 0, 0, 0.25)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
            <div className="mono faint" style={{ fontSize: 9, letterSpacing: '0.12em' }}>DAILY CAP</div>
            <div className="serif" style={{ fontSize: 22, fontStyle: 'italic' }}>£50</div>
            <div className="bar-track" style={{ marginTop: 6, height: 4 }}>
              <div className="bar-fill" style={{ width: `${todayPct}%`, background: '#00d97e', boxShadow: '0 0 6px rgba(0, 217, 126, 0.4)' }}/>
            </div>
          </div>
        </div>
        <div className="row mono faint" style={{ fontSize: 10, justifyContent: 'space-between' }}>
          <span>USDC · Base + Solana</span>
          <span>Facilitator: x402.coinbase</span>
        </div>
        <div style={{ maxHeight: 220, overflowY: 'auto', margin: '0 -18px -18px', borderTop: '1px solid var(--border)' }}>
          {txns.slice(0, 8).map((tx, i) => (
            <div key={i} style={{ padding: '8px 18px', borderBottom: i < 7 ? '1px solid var(--border)' : 'none', display: 'grid', gridTemplateColumns: '70px 1fr 60px 50px', gap: 8, alignItems: 'center', fontSize: 11 }}>
              <span className="mono gradient-text" style={{ fontSize: 10, fontWeight: 600 }}>{tx.agent.toUpperCase()}</span>
              <span className="mono dim" style={{ fontSize: 10, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{tx.svc}</span>
              <span className="mono" style={{ fontSize: 10, color: '#00d97e', textAlign: 'right' }}>£{tx.amt.toFixed(3)}</span>
              <span className="mono faint" style={{ fontSize: 9 }}>{tx.status}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}