/* global React, HashBadge, AttestationStatePill, ReasonCodeChip, LatencyBudgetMeter, TimelineAxis, ThresholdGateIndicator, PartyAttestationRow, Spark, MerkleProofTree */

/* =========================================================
   SCA / 3DS ATTESTATION CONSOLE
   ========================================================= */
function ScaConsole() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", height: "100%" }}>
      <div style={{ overflow: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 16 }}>
        {/* header */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="mono" style={{ fontSize: "var(--ak-fs-20)", color: "var(--ak-fg-0)" }}>3DS-9A41C2E7</span>
              <AttestationStatePill state="finalized"/>
              <span className="mono" style={{ fontSize: 10, color: "var(--ak-fg-3)" }}>ACS vendor: stratus / PSD2 RTS Art.18</span>
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 6, color: "var(--ak-fg-2)", fontSize: "var(--ak-fs-11)" }}>
              <span className="mono">14:22:06.998441 UTC</span>
              <span style={{ color: "var(--ak-fg-4)" }}>·</span>
              <span>CAVV attested · ECI 05</span>
              <span style={{ color: "var(--ak-fg-4)" }}>·</span>
              <span>liability shift → issuer</span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <button className="ak-btn">challenge log</button>
            <button className="ak-btn" data-variant="primary">generate liability proof</button>
          </div>
        </div>

        {/* Auth chain timeline */}
        <div className="ak-panel">
          <div className="ak-panel__h"><span>authentication chain</span><span className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>end-to-end · sub-ms</span></div>
          <div className="ak-panel__b">
            <TimelineAxis
              mode="submillisecond"
              startMs={0} endMs={42}
              title=""
              height={82}
              events={[
                { t: 0, label: "areq", state: "signed" },
                { t: 3.2, label: "challenge issued", state: "witnessed" },
                { t: 18.6, label: "response · passkey", state: "witnessed" },
                { t: 22.1, label: "ECI/CAVV attested", state: "finalized" },
                { t: 24.8, label: "liability shift", state: "finalized" },
              ]}
            />
            <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, marginTop: 14, border: "1px solid var(--ak-line)", borderRadius: 2 }}>
              {[
                { step: "01", name: "AReq received", m: "0.00ms", ok: true },
                { step: "02", name: "Frictionless eval", m: "2.14ms", ok: true },
                { step: "03", name: "Challenge: passkey", m: "+15.4ms", ok: true },
                { step: "04", name: "CAVV signed", m: "+3.5ms", ok: true },
                { step: "05", name: "Liability shift", m: "+2.7ms", ok: true },
              ].map((s, i, a) => (
                <div key={s.step} style={{
                  padding: 10, borderRight: i < a.length - 1 ? "1px solid var(--ak-line)" : "none",
                  background: "var(--ak-bg-2)",
                }}>
                  <div className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>{s.step}</div>
                  <div style={{ color: "var(--ak-fg-0)", fontSize: 12, marginTop: 3 }}>{s.name}</div>
                  <div className="mono num" style={{ fontSize: 11, color: s.ok ? "var(--ak-state-finalized-fg)" : "var(--ak-state-failed-fg)", marginTop: 4 }}>{s.m}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Per auth method breakdown */}
        <div className="ak-panel">
          <div className="ak-panel__h"><span>per-auth-method · last 24h</span><span className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>n = 184,221</span></div>
          <div className="ak-panel__b" style={{ padding: 0 }}>
            <table className="ak-table">
              <thead>
                <tr>
                  <th>method</th>
                  <th style={{ width: 90 }}>volume</th>
                  <th style={{ width: 90 }}>success</th>
                  <th style={{ width: 90 }}>abandon</th>
                  <th style={{ width: 140 }}>p50 / p99</th>
                  <th style={{ width: 180 }}>latency distribution</th>
                  <th style={{ width: 90 }}>liability</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { name: "Passkey (FIDO2)", vol: 86420, succ: 98.4, abd: 0.7, p50: 1.8, p99: 6.4, liab: "issuer", spark: [12, 14, 11, 15, 18, 16, 17, 19, 20, 22, 21, 24] },
                  { name: "Biometric (in-app)", vol: 51204, succ: 96.1, abd: 1.8, p50: 2.4, p99: 9.1, liab: "issuer", spark: [18, 16, 17, 19, 16, 18, 17, 15, 14, 13, 15, 16] },
                  { name: "OTP · SMS", vol: 32144, succ: 74.2, abd: 21.0, p50: 41.2, p99: 182.0, liab: "issuer", spark: [42, 44, 41, 38, 40, 47, 52, 49, 44, 46, 48, 44] },
                  { name: "OTP · Email", vol: 8802, succ: 62.8, abd: 29.1, p50: 68.4, p99: 240.0, liab: "merchant", spark: [60, 62, 68, 70, 72, 68, 66, 64, 70, 74, 72, 68] },
                  { name: "Push (bank app)", vol: 5651, succ: 91.4, abd: 5.2, p50: 8.2, p99: 38.6, liab: "issuer", spark: [10, 9, 11, 12, 10, 11, 9, 8, 10, 12, 11, 10] },
                ].map(m => (
                  <tr key={m.name}>
                    <td style={{ color: "var(--ak-fg-0)" }}>{m.name}</td>
                    <td className="mono num">{m.vol.toLocaleString()}</td>
                    <td className="mono num" style={{ color: m.succ > 90 ? "var(--ak-state-finalized-fg)" : m.succ > 80 ? "var(--ak-state-signed-fg)" : "var(--ak-state-failed-fg)" }}>{m.succ.toFixed(1)}%</td>
                    <td className="mono num" style={{ color: "var(--ak-fg-2)" }}>{m.abd.toFixed(1)}%</td>
                    <td className="mono num">{m.p50}ms <span style={{ color: "var(--ak-fg-3)" }}>/</span> {m.p99}ms</td>
                    <td><Spark values={m.spark} w={160} h={20}/></td>
                    <td className="mono" style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: ".08em", color: m.liab === "issuer" ? "var(--ak-state-finalized-fg)" : "var(--ak-state-signed-fg)" }}>{m.liab}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* right rail — liability proof */}
      <div style={{ borderLeft: "1px solid var(--ak-line)", padding: 16, overflow: "auto", background: "var(--ak-bg-0)", display: "flex", flexDirection: "column", gap: 16 }}>
        <div>
          <div className="cap" style={{ marginBottom: 8 }}>liability proof</div>
          <div style={{ border: "1px solid var(--ak-line-2)", borderRadius: 2, padding: 14, background: "var(--ak-bg-1)", fontFamily: "var(--ak-font-mono)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
              <span style={{ fontSize: "var(--ak-fs-16)", color: "var(--ak-fg-0)" }}>Shifted → ISSUER</span>
              <AttestationStatePill state="finalized" label="LIABILITY"/>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 11, color: "var(--ak-fg-2)" }}>
              <Row k="ECI" v="05"/>
              <Row k="CAVV" v={<HashBadge value="0xa4c3b88def122f" kind="CAVV" short={4}/>}/>
              <Row k="method" v="passkey · AAL3"/>
              <Row k="auth result" v={<span style={{ color: "var(--ak-state-finalized-fg)" }}>Y · authenticated</span>}/>
              <Row k="PSD2 exemption" v="none — challenged"/>
              <Row k="merchant liable?" v={<span style={{ color: "var(--ak-fg-0)" }}>no</span>}/>
              <Row k="issuer liable?" v={<span style={{ color: "var(--ak-state-finalized-fg)" }}>yes</span>}/>
            </div>
            <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid var(--ak-line)", display: "flex", gap: 6 }}>
              <button className="ak-btn" style={{ flex: 1, justifyContent: "center" }}>copy JWS</button>
              <button className="ak-btn" style={{ flex: 1, justifyContent: "center" }} data-variant="primary">export</button>
            </div>
          </div>
        </div>
        <div>
          <div className="cap" style={{ marginBottom: 8 }}>challenge payload · hash-only</div>
          <div style={{ background: "var(--ak-bg-inset)", border: "1px solid var(--ak-line)", borderRadius: 2, padding: 10, fontFamily: "var(--ak-font-mono)", fontSize: 10, color: "var(--ak-fg-1)", lineHeight: 1.7 }}>
            <div>challenge_type: <span style={{ color: "var(--ak-state-witnessed-fg)" }}>passkey_assertion</span></div>
            <div>rp_id_hash: <HashBadge value="0x12eef2" short={3}/></div>
            <div>client_data_hash: <HashBadge value="0x881fc2" short={3}/></div>
            <div>auth_data_hash: <HashBadge value="0x04aa9b" short={3}/></div>
            <div>sig: <HashBadge value="0x7b4c8a" kind="SIG" short={3}/></div>
            <div style={{ color: "var(--ak-fg-3)", marginTop: 6 }}>// no raw credential, no biometric template</div>
          </div>
        </div>
      </div>
    </div>
  );
}
function Row({ k, v }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 8 }}>
      <span style={{ color: "var(--ak-fg-3)" }}>{k}</span>
      <span style={{ color: "var(--ak-fg-0)" }}>{v}</span>
    </div>
  );
}

/* =========================================================
   ORCHESTRATION AUDIT
   ========================================================= */
function OrchConsole() {
  const cascade = [
    { name: "Adyen",       cost: 0.42, auth: 98.1, p99: 142, picked: true,  err: null },
    { name: "Stripe",      cost: 0.58, auth: 97.4, p99: 168, picked: false, err: null },
    { name: "Checkout.com",cost: 0.51, auth: 96.8, p99: 201, picked: false, err: "timeout_budget" },
    { name: "Worldpay",    cost: 0.48, auth: 94.2, p99: 244, picked: false, err: "auth_score_low" },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", height: "100%" }}>
      <div style={{ overflow: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 16 }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="mono" style={{ fontSize: "var(--ak-fs-20)", color: "var(--ak-fg-0)" }}>ROUTE-44C812</span>
              <AttestationStatePill state="finalized"/>
              <span className="mono" style={{ fontSize: 10, color: "var(--ak-fg-3)" }}>merchant: ACME-EU · region: DE</span>
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 6, color: "var(--ak-fg-2)", fontSize: "var(--ak-fs-11)" }}>
              <span className="mono">€1,240.00 · MCC 7995 · SCA attested</span>
              <span style={{ color: "var(--ak-fg-4)" }}>·</span>
              <span>ruleset <HashBadge value="0xff1c4d" kind="RULESET" short={3}/> v18</span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <button className="ak-btn">diff ruleset</button>
            <button className="ak-btn" data-variant="primary">savings proof</button>
          </div>
        </div>

        {/* Cascade visualizer */}
        <div className="ak-panel">
          <div className="ak-panel__h"><span>routing cascade · attested decision</span><span className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>4 candidates · selected 1 · fallback 0</span></div>
          <div className="ak-panel__b">
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {cascade.map((c, i) => (
                <div key={c.name} style={{
                  display: "grid",
                  gridTemplateColumns: "28px 140px 1fr 140px 110px 140px 110px",
                  alignItems: "center",
                  gap: 12,
                  padding: "10px 0",
                  borderBottom: i < cascade.length - 1 ? "1px solid var(--ak-line)" : "none",
                  opacity: c.err ? 0.6 : 1,
                }}>
                  <div className="mono" style={{ color: c.picked ? "var(--ak-state-finalized-fg)" : "var(--ak-fg-3)", fontSize: 11 }}>
                    {c.picked ? "▶" : String(i + 1).padStart(2, "0")}
                  </div>
                  <div>
                    <div style={{ color: "var(--ak-fg-0)", fontWeight: c.picked ? 600 : 400 }}>{c.name}</div>
                    <div className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>processor.{c.name.toLowerCase().replace(/\./g, "")}</div>
                  </div>
                  {/* bar stack */}
                  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                    <BarRow label="auth prob" value={c.auth} max={100} unit="%" color={c.picked ? "var(--ak-state-finalized-fg)" : "var(--ak-fg-2)"} />
                    <BarRow label="cost /auth" value={c.cost} max={1.0} unit="€" color={c.picked ? "var(--ak-state-witnessed-fg)" : "var(--ak-fg-2)"} invert />
                  </div>
                  <LatencyBudgetMeter value={c.p99} budget={260} ticks={[100, 200]} showLabel={false}/>
                  <span className="mono num" style={{ fontSize: 11, color: c.p99 > 200 ? "var(--ak-latency-hot)" : "var(--ak-fg-1)" }}>{c.p99}ms p99</span>
                  <div>
                    {c.err ? <ReasonCodeChip code="E" label={c.err} weight="med"/> : <AttestationStatePill state={c.picked ? "finalized" : "unsigned"} label={c.picked ? "SELECTED" : "SKIPPED"}/>}
                  </div>
                  <HashBadge value={["0x42aa1c","0x88fc20","0xdd901b","0x10ff23"][i]} kind="BID" short={3}/>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Cost savings proof */}
        <div className="ak-panel">
          <div className="ak-panel__h"><span>cost-savings attestation</span><span className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>signed against ruleset v18</span></div>
          <div className="ak-panel__b" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
            <div style={{ border: "1px solid var(--ak-line)", padding: 14, borderRadius: 2, background: "var(--ak-bg-2)" }}>
              <div className="cap">chose</div>
              <div style={{ fontSize: "var(--ak-fs-16)", color: "var(--ak-fg-0)", marginTop: 4 }}>Adyen</div>
              <div className="mono num" style={{ fontSize: "var(--ak-fs-24)", color: "var(--ak-state-finalized-fg)", marginTop: 4 }}>€0.42</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ak-fg-3)" }}>per-auth cost</div>
            </div>
            <div style={{ border: "1px solid var(--ak-line)", padding: 14, borderRadius: 2, background: "var(--ak-bg-2)" }}>
              <div className="cap">vs counterfactual</div>
              <div style={{ fontSize: "var(--ak-fs-16)", color: "var(--ak-fg-0)", marginTop: 4 }}>Stripe (next best)</div>
              <div className="mono num" style={{ fontSize: "var(--ak-fs-24)", color: "var(--ak-fg-2)", marginTop: 4 }}>€0.58</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ak-fg-3)" }}>+ 0.7pt lower auth</div>
            </div>
            <div style={{ border: "1px solid color-mix(in srgb, var(--ak-state-finalized-fg) 40%, var(--ak-line))", padding: 14, borderRadius: 2, background: "var(--ak-state-finalized-bg)" }}>
              <div className="cap" style={{ color: "var(--ak-state-finalized-fg)" }}>savings proof</div>
              <div style={{ fontSize: "var(--ak-fs-16)", color: "var(--ak-fg-0)", marginTop: 4 }}>Δ per-auth</div>
              <div className="mono num" style={{ fontSize: "var(--ak-fs-24)", color: "var(--ak-state-finalized-fg)", marginTop: 4 }}>−€0.16</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ak-fg-3)" }}>monthly extrap · −€42,180</div>
            </div>
          </div>
        </div>
      </div>

      {/* right — ruleset diff */}
      <div style={{ borderLeft: "1px solid var(--ak-line)", padding: 16, overflow: "auto", background: "var(--ak-bg-0)" }}>
        <div className="cap" style={{ marginBottom: 8 }}>ruleset diff · v17 → v18</div>
        <div style={{ fontFamily: "var(--ak-font-mono)", fontSize: 11, border: "1px solid var(--ak-line)", borderRadius: 2, background: "var(--ak-bg-inset)", padding: 10 }}>
          {[
            { s: "@@", l: "merchant.acme-eu.routing", t: "ctx" },
            { s: "-", l: "priority_weight: auth_prob: 0.55" },
            { s: "+", l: "priority_weight: auth_prob: 0.48" },
            { s: "-", l: "priority_weight: cost: 0.30" },
            { s: "+", l: "priority_weight: cost: 0.37" },
            { s: " ", l: "priority_weight: latency: 0.15" },
            { s: "@@", l: "mcc 7995 — gambling", t: "ctx" },
            { s: "+", l: "min_3ds_version: >= 2.2" },
            { s: "+", l: "require_passkey_if_amount > 1000" },
          ].map((d, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "16px 1fr", gap: 4,
              color: d.s === "+" ? "var(--ak-state-finalized-fg)" : d.s === "-" ? "var(--ak-state-failed-fg)" : d.t === "ctx" ? "var(--ak-fg-3)" : "var(--ak-fg-1)",
              background: d.s === "+" ? "color-mix(in srgb, var(--ak-state-finalized-bg) 40%, transparent)" : d.s === "-" ? "color-mix(in srgb, var(--ak-state-failed-bg) 40%, transparent)" : "transparent",
              padding: "1px 0",
            }}>
              <span>{d.s}</span>
              <span>{d.l}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14 }}>
          <div className="cap" style={{ marginBottom: 8 }}>signed versions</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 11 }}>
            <VerRow v="v18" cur/>
            <VerRow v="v17" />
            <VerRow v="v16" />
            <VerRow v="v15" />
          </div>
        </div>
      </div>
    </div>
  );
}
function BarRow({ label, value, max, unit, color, invert }) {
  const pct = Math.min(100, (value / max) * 100);
  return (
    <div style={{ display: "grid", gridTemplateColumns: "80px 1fr 50px", gap: 8, alignItems: "center" }}>
      <span className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)", textTransform: "uppercase", letterSpacing: ".06em" }}>{label}</span>
      <div style={{ height: 4, background: "var(--ak-bg-inset)", border: "1px solid var(--ak-line)", borderRadius: 1, overflow: "hidden" }}>
        <div style={{ width: (invert ? 100 - pct : pct) + "%", height: "100%", background: color }}/>
      </div>
      <span className="mono num" style={{ fontSize: 10, color: "var(--ak-fg-1)", textAlign: "right" }}>{unit === "€" ? unit + value.toFixed(2) : value.toFixed(1) + unit}</span>
    </div>
  );
}
function VerRow({ v, cur }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "40px 1fr auto", alignItems: "center", gap: 8, padding: "6px 8px", background: cur ? "var(--ak-bg-3)" : "var(--ak-bg-1)", border: "1px solid var(--ak-line)", borderRadius: 2 }}>
      <span className="mono" style={{ color: cur ? "var(--ak-fg-0)" : "var(--ak-fg-2)" }}>{v}</span>
      <HashBadge value={"0x" + Math.random().toString(16).slice(2, 10)} short={3}/>
      <span className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>{cur ? "current" : "archived"}</span>
    </div>
  );
}

/* =========================================================
   SETTLEMENT THRESHOLD GATE
   ========================================================= */
function SettleConsole() {
  const [met, setMet] = React.useState(3);
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", height: "100%" }}>
      <div style={{ overflow: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 16 }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="mono" style={{ fontSize: "var(--ak-fs-20)", color: "var(--ak-fg-0)" }}>STL-B0C1-4421</span>
              <AttestationStatePill state={met >= 3 ? "finalized" : "threshold"}/>
              <ThresholdGateIndicator met={met} needed={3} total={4} label="M-of-N signers"/>
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 6, color: "var(--ak-fg-2)", fontSize: "var(--ak-fs-11)" }}>
              <span className="mono">batch · €14.2M · 12,480 auths · cycle 2026-04-22/17</span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <button className="ak-btn" onClick={() => setMet(Math.max(0, met - 1))}>− sign</button>
            <button className="ak-btn" onClick={() => setMet(Math.min(4, met + 1))} data-variant="primary">+ sign</button>
          </div>
        </div>

        {/* Party rows */}
        <div className="ak-panel" style={{ position: "relative", overflow: "hidden" }}>
          <div className="ak-panel__h">
            <span>multi-party attestation · acquirer → processor → network → issuer</span>
            <span className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>threshold M=3 of N=4</span>
          </div>
          <div>
            {[
              { party: "ACQ · Barclaycard DE",   role: "acquirer",  state: met >= 1 ? "finalized" : "unsigned", signer: "HSM · 0x7a1c…",  t: "17:02:11.004", sig: "0x88aa01..." },
              { party: "PROC · Nexi Processing", role: "processor", state: met >= 2 ? "finalized" : "unsigned", signer: "HSM · 0x44e2…",  t: "17:02:11.086", sig: "0x12cd4f..." },
              { party: "NET · Visa Europe",      role: "network",   state: met >= 3 ? "finalized" : "unsigned", signer: "KMS · 0xff90…",  t: "17:02:11.210", sig: "0x9b01ee..." },
              { party: "ISS · Deutsche Bank",    role: "issuer",    state: met >= 4 ? "finalized" : "signed",   signer: "HSM · 0x22b1…",  t: met >= 4 ? "17:02:11.294" : "pending…", sig: met >= 4 ? "0x4409ca..." : "0x00000000", isLast: true },
            ].map((p, i, arr) => (
              <PartyAttestationRow key={p.party} {...p} isLast={i === arr.length - 1}/>
            ))}
          </div>
          {met >= 3 && met < 4 && <div className="ak-sweep" style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 2 }}/>}
        </div>

        {/* Cross-party root diff */}
        <div className="ak-panel">
          <div className="ak-panel__h"><span>cross-party Merkle-root diff · O(1) reconcile</span><span className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>batch root comparison</span></div>
          <div className="ak-panel__b">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
              {["acquirer", "processor", "network", "issuer"].map((p, i) => (
                <div key={p} style={{ border: "1px solid var(--ak-line)", padding: 12, borderRadius: 2, background: "var(--ak-bg-2)" }}>
                  <div className="cap">{p} root</div>
                  <div style={{ marginTop: 6 }}><HashBadge value={["0xa1b2c3d4e5f67890","0xa1b2c3d4e5f67890","0xa1b2c3d4e5f67890","0xa1b2c3d4e5f67890"][i]} kind="ROOT" short={5} ver="verified"/></div>
                  <div className="mono" style={{ fontSize: 10, color: "var(--ak-state-finalized-fg)", marginTop: 6 }}>● identical</div>
                  <div className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>12,480 leaves · depth 14</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 12, padding: 10, background: "var(--ak-state-finalized-bg)", border: "1px solid color-mix(in srgb, var(--ak-state-finalized-fg) 40%, var(--ak-line))", borderRadius: 2, display: "flex", alignItems: "center", gap: 10 }}>
              <AttestationStatePill state="finalized" label="RECONCILED"/>
              <span className="mono" style={{ fontSize: 11, color: "var(--ak-fg-1)" }}>4/4 parties agree · batch hash 0xa1b2c3d4e5f67890fedcba012345 · no spreadsheet required</span>
            </div>
          </div>
        </div>
      </div>

      {/* right — day-scale timeline */}
      <div style={{ borderLeft: "1px solid var(--ak-line)", padding: 16, overflow: "auto", background: "var(--ak-bg-0)" }}>
        <div className="cap" style={{ marginBottom: 8 }}>settlement cycle · day-scale</div>
        <TimelineAxis
          mode="day"
          startMs={Date.parse("2026-04-22T00:00:00Z")}
          endMs={Date.parse("2026-04-23T00:00:00Z")}
          height={96}
          events={[
            { t: Date.parse("2026-04-22T06:00:00Z"), label: "capture window open", state: "signed" },
            { t: Date.parse("2026-04-22T12:00:00Z"), label: "acq cutoff", state: "witnessed" },
            { t: Date.parse("2026-04-22T17:00:00Z"), label: "batch root sealed", state: "threshold" },
            { t: Date.parse("2026-04-22T17:02:00Z"), label: "threshold met", state: "finalized" },
            { t: Date.parse("2026-04-22T22:00:00Z"), label: "funds move", state: "finalized" },
          ]}
        />
        <div style={{ marginTop: 16 }}>
          <div className="cap" style={{ marginBottom: 8 }}>signers on batch</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 11 }}>
            {["ACQ · HSM · 0x7a1c","PROC · HSM · 0x44e2","NET · KMS · 0xff90","ISS · HSM · 0x22b1"].map((s, i) => (
              <div key={s} style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 8, padding: "6px 10px", background: "var(--ak-bg-1)", border: "1px solid var(--ak-line)", borderRadius: 2 }}>
                <span className="mono" style={{ color: "var(--ak-fg-1)" }}>{s}</span>
                <AttestationStatePill state={i < met ? "finalized" : "unsigned"}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScaConsole, OrchConsole, SettleConsole });