import { useState } from "react";

const styles = `
  @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --bg: #0d1117;
    --surface: #161b22;
    --surface2: #1c2330;
    --border: #21262d;
    --teal: #2dd4bf;
    --teal-dark: #0d9488;
    --indigo: #818cf8;
    --muted: #5a7a96;
    --text: #cdd9e5;
    --text-dim: #8b949e;
    --red: #f85149;
    --amber: #d29922;
    --green: #3fb950;
  }

  body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; }

  .shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
  }

  /* SIDEBAR */
  .sidebar {
    width: 220px;
    min-width: 220px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .logo-area {
    padding: 20px 18px 16px;
    border-bottom: 1px solid var(--border);
  }

  .logo-word {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: var(--teal);
    letter-spacing: -0.5px;
  }

  .logo-sub {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 2px;
  }

  .nav {
    padding: 12px 10px;
    flex: 1;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 2px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
  }

  .nav-item:hover { background: var(--surface2); color: var(--text); }
  .nav-item.active { background: rgba(45, 212, 191, 0.08); color: var(--teal); }

  .nav-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--muted);
    flex-shrink: 0;
  }
  .nav-item.active .nav-dot { background: var(--teal); box-shadow: 0 0 6px var(--teal); }

  .nav-section {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 12px 10px 6px;
  }

  /* MAIN */
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .topbar {
    height: 52px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    background: var(--surface);
  }

  .topbar-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    flex: 1;
  }

  .badge {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
  }

  .badge-teal { background: rgba(45,212,191,0.1); color: var(--teal); border: 1px solid rgba(45,212,191,0.2); }
  .badge-red { background: rgba(248,81,73,0.1); color: var(--red); border: 1px solid rgba(248,81,73,0.2); }
  .badge-amber { background: rgba(210,153,34,0.1); color: var(--amber); border: 1px solid rgba(210,153,34,0.2); }
  .badge-muted { background: rgba(90,122,150,0.1); color: var(--muted); border: 1px solid rgba(90,122,150,0.2); }
  .badge-indigo { background: rgba(129,140,248,0.1); color: var(--indigo); border: 1px solid rgba(129,140,248,0.2); }

  .filter-row {
    padding: 12px 20px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    align-items: center;
  }

  .filter-chip {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.3px;
  }

  .filter-chip:hover { border-color: var(--teal); color: var(--teal); }
  .filter-chip.active { border-color: var(--teal); color: var(--teal); background: rgba(45,212,191,0.06); }

  .search-box {
    margin-left: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 12px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--text);
    width: 200px;
    outline: none;
    transition: border-color 0.15s;
  }
  .search-box:focus { border-color: var(--teal); }
  .search-box::placeholder { color: var(--muted); }

  /* TABLE */
  .table-wrap {
    flex: 1;
    overflow-y: auto;
  }

  .table-wrap::-webkit-scrollbar { width: 6px; }
  .table-wrap::-webkit-scrollbar-track { background: transparent; }
  .table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  .trace-table {
    width: 100%;
    border-collapse: collapse;
  }

  .trace-table th {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: 400;
  }

  .trace-row {
    border-bottom: 1px solid rgba(33,38,45,0.6);
    cursor: pointer;
    transition: background 0.1s;
  }

  .trace-row:hover { background: rgba(22,27,34,0.8); }
  .trace-row.selected { background: rgba(45,212,191,0.04); border-left: 2px solid var(--teal); }

  .trace-row td {
    padding: 11px 16px;
    font-size: 12.5px;
    vertical-align: middle;
  }

  .trace-id {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--teal);
    letter-spacing: 0.3px;
  }

  .agent-name {
    font-weight: 500;
    color: var(--text);
    font-size: 13px;
  }

  .agent-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    font-family: 'DM Mono', monospace;
  }

  .span-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }

  .span-pill {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid;
  }

  .pill-agent { color: var(--teal); border-color: rgba(45,212,191,0.3); background: rgba(45,212,191,0.05); }
  .pill-tool { color: var(--indigo); border-color: rgba(129,140,248,0.3); background: rgba(129,140,248,0.05); }
  .pill-llm { color: var(--amber); border-color: rgba(210,153,34,0.3); background: rgba(210,153,34,0.05); }
  .pill-block { color: var(--red); border-color: rgba(248,81,73,0.3); background: rgba(248,81,73,0.05); }

  .latency {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: var(--text);
  }

  .latency-bar {
    height: 3px;
    border-radius: 2px;
    margin-top: 4px;
    background: linear-gradient(90deg, var(--teal-dark), var(--teal));
    max-width: 80px;
    transition: width 0.3s;
  }

  .status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
  }
  .dot-ok { background: var(--green); box-shadow: 0 0 4px var(--green); }
  .dot-err { background: var(--red); box-shadow: 0 0 4px var(--red); }
  .dot-warn { background: var(--amber); box-shadow: 0 0 4px var(--amber); }

  .time-col {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
  }

  /* DETAIL PANEL */
  .detail-panel {
    width: 380px;
    min-width: 380px;
    border-left: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .detail-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .detail-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
  }

  .detail-id {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--teal);
    margin-top: 3px;
  }

  .close-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    width: 24px; height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .close-btn:hover { border-color: var(--teal); color: var(--teal); }

  .detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
  }

  .detail-body::-webkit-scrollbar { width: 4px; }
  .detail-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .detail-section {
    margin-bottom: 20px;
  }

  .detail-section-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }

  .kv-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 0;
    font-size: 12px;
    gap: 12px;
  }

  .kv-key {
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    flex-shrink: 0;
  }

  .kv-val {
    color: var(--text);
    text-align: right;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    word-break: break-all;
  }

  /* WATERFALL */
  .waterfall {
    margin-top: 4px;
  }

  .wf-span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 11px;
    border-left: 1px solid var(--border);
    padding-left: 12px;
    margin-left: 8px;
    position: relative;
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 0 4px 4px 0;
  }

  .wf-span:hover { background: rgba(45,212,191,0.04); }

  .wf-span::before {
    content: '';
    position: absolute;
    left: -1px; top: 50%;
    width: 8px; height: 1px;
    background: var(--border);
  }

  .wf-name {
    font-family: 'DM Mono', monospace;
    color: var(--text-dim);
    flex: 1;
  }

  .wf-kind {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 2px;
    border: 1px solid;
  }

  .wf-bar-wrap {
    flex: 1;
    height: 4px;
    background: var(--surface2);
    border-radius: 2px;
    overflow: hidden;
    max-width: 60px;
  }

  .wf-bar {
    height: 100%;
    border-radius: 2px;
    background: var(--teal);
    opacity: 0.7;
  }

  .wf-ms {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    min-width: 36px;
    text-align: right;
  }

  .code-block {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: 'DM Mono', monospace;
    font-size: 10.5px;
    color: var(--text-dim);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 120px;
    overflow-y: auto;
  }

  /* METRICS BAR */
  .metrics-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }

  .metric-item {
    flex: 1;
    padding: 12px 16px;
    border-right: 1px solid var(--border);
    text-align: center;
  }

  .metric-item:last-child { border-right: none; }

  .metric-val {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--teal);
    letter-spacing: -1px;
  }

  .metric-val.red { color: var(--red); }
  .metric-val.amber { color: var(--amber); }

  .metric-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
  }

  .live-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 6px;
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
`;

const TRACES = [
  {
    id: "trc_9f2a1b3c",
    session: "sess_marathon_01",
    agent: "PlannerAgent",
    framework: "LangGraph",
    status: "ok",
    spans: [
      { kind: "agent", label: "3 agent" },
      { kind: "tool", label: "7 tool" },
      { kind: "llm", label: "4 llm" },
    ],
    latency: 4820,
    latencyPct: 72,
    tokens: "3.2k",
    time: "2m ago",
    detail: {
      input: "Plan a research pipeline for market analysis on EV sector",
      output: "Decomposed into 4 subtasks: data retrieval, sentiment, financials, synthesis",
      spans: [
        { name: "planner.run", kind: "agent", ms: 4820, pct: 100 },
        { name: "web_search", kind: "tool", ms: 1240, pct: 26 },
        { name: "llm.reason", kind: "llm", ms: 980, pct: 20 },
        { name: "executor.handoff", kind: "agent", ms: 820, pct: 17 },
        { name: "summarize", kind: "llm", ms: 640, pct: 13 },
        { name: "file.write", kind: "tool", ms: 120, pct: 3 },
      ]
    }
  },
  {
    id: "trc_3d8e2f4a",
    session: "sess_marathon_01",
    agent: "ExecutorAgent",
    framework: "LangGraph",
    status: "blocked",
    spans: [
      { kind: "agent", label: "1 agent" },
      { kind: "tool", label: "2 tool" },
      { kind: "block", label: "1 block" },
    ],
    latency: 1230,
    latencyPct: 18,
    tokens: "890",
    time: "2m ago",
    detail: {
      input: "Delete all rows in users table where last_login < 90 days",
      output: "BLOCKED by plyra-guard: policy.destructive_db_ops — escalated to human",
      spans: [
        { name: "executor.run", kind: "agent", ms: 1230, pct: 100 },
        { name: "db.query_plan", kind: "tool", ms: 340, pct: 28 },
        { name: "guard.evaluate", kind: "block", ms: 80, pct: 7 },
      ]
    }
  },
  {
    id: "trc_7c1b9e0d",
    session: "sess_coding_44",
    agent: "CoderAgent",
    framework: "AutoGen",
    status: "ok",
    spans: [
      { kind: "agent", label: "1 agent" },
      { kind: "tool", label: "5 tool" },
      { kind: "llm", label: "3 llm" },
    ],
    latency: 8110,
    latencyPct: 100,
    tokens: "6.1k",
    time: "8m ago",
    detail: {
      input: "Refactor auth module to use JWT with refresh token rotation",
      output: "Refactored 4 files, added 2 new endpoints, 12 tests passing",
      spans: [
        { name: "coder.run", kind: "agent", ms: 8110, pct: 100 },
        { name: "file.read", kind: "tool", ms: 90, pct: 1 },
        { name: "llm.plan", kind: "llm", ms: 2100, pct: 26 },
        { name: "code.write", kind: "tool", ms: 3200, pct: 40 },
        { name: "llm.review", kind: "llm", ms: 1400, pct: 17 },
        { name: "test.run", kind: "tool", ms: 880, pct: 11 },
      ]
    }
  },
  {
    id: "trc_0a4f6c8b",
    session: "sess_research_12",
    agent: "ResearchAgent",
    framework: "CrewAI",
    status: "warn",
    spans: [
      { kind: "agent", label: "2 agent" },
      { kind: "tool", label: "9 tool" },
      { kind: "llm", label: "5 llm" },
    ],
    latency: 12400,
    latencyPct: 95,
    tokens: "9.8k",
    time: "15m ago",
    detail: {
      input: "Compile competitive analysis: Stripe vs Braintree vs Adyen",
      output: "Report generated with warning: 2 web sources returned 429, used cached data",
      spans: [
        { name: "research.run", kind: "agent", ms: 12400, pct: 100 },
        { name: "web_search x3", kind: "tool", ms: 4200, pct: 34 },
        { name: "llm.synthesize", kind: "llm", ms: 3100, pct: 25 },
        { name: "competitor.agent", kind: "agent", ms: 2800, pct: 23 },
        { name: "report.write", kind: "tool", ms: 940, pct: 8 },
      ]
    }
  },
  {
    id: "trc_5e2d7a1f",
    session: "sess_coding_44",
    agent: "ReviewAgent",
    framework: "Plain Python",
    status: "ok",
    spans: [
      { kind: "agent", label: "1 agent" },
      { kind: "tool", label: "1 tool" },
      { kind: "llm", label: "2 llm" },
    ],
    latency: 2760,
    latencyPct: 34,
    tokens: "2.4k",
    time: "22m ago",
    detail: {
      input: "Review PR #244: new billing microservice",
      output: "3 critical findings, 7 suggestions — PR review comment posted",
      spans: [
        { name: "review.run", kind: "agent", ms: 2760, pct: 100 },
        { name: "github.fetch_pr", kind: "tool", ms: 340, pct: 12 },
        { name: "llm.analyze", kind: "llm", ms: 1620, pct: 59 },
        { name: "llm.summarize", kind: "llm", ms: 560, pct: 20 },
      ]
    }
  },
];

const KIND_COLORS = {
  agent: "pill-agent",
  tool: "pill-tool",
  llm: "pill-llm",
  block: "pill-block",
};

const WF_KIND_STYLE = {
  agent: { color: "#2dd4bf", borderColor: "rgba(45,212,191,0.3)", bg: "rgba(45,212,191,0.05)" },
  tool: { color: "#818cf8", borderColor: "rgba(129,140,248,0.3)", bg: "rgba(129,140,248,0.05)" },
  llm: { color: "#d29922", borderColor: "rgba(210,153,34,0.3)", bg: "rgba(210,153,34,0.05)" },
  block: { color: "#f85149", borderColor: "rgba(248,81,73,0.3)", bg: "rgba(248,81,73,0.05)" },
};

export default function PlyrTraceUI() {
  const [selected, setSelected] = useState(TRACES[0]);
  const [filter, setFilter] = useState("all");

  const filtered = filter === "all" ? TRACES : TRACES.filter(t => t.status === filter);

  const statusCounts = {
    all: TRACES.length,
    ok: TRACES.filter(t => t.status === "ok").length,
    blocked: TRACES.filter(t => t.status === "blocked").length,
    warn: TRACES.filter(t => t.status === "warn").length,
  };

  return (
    <>
      <style>{styles}</style>
      <div className="shell">
        {/* SIDEBAR */}
        <div className="sidebar">
          <div className="logo-area">
            <div className="logo-word">plyra</div>
            <div className="logo-sub">trace</div>
          </div>
          <div className="nav">
            <div className="nav-section">observe</div>
            {["Traces", "Sessions", "Agents", "Tools"].map((item, i) => (
              <button key={item} className={`nav-item ${i === 0 ? "active" : ""}`}>
                <span className="nav-dot" />
                {item}
              </button>
            ))}
            <div className="nav-section">analyze</div>
            {["Graph View", "Spans", "Policies"].map((item) => (
              <button key={item} className="nav-item">
                <span className="nav-dot" />
                {item}
              </button>
            ))}
            <div className="nav-section">system</div>
            {["Settings", "Exporters"].map((item) => (
              <button key={item} className="nav-item">
                <span className="nav-dot" />
                {item}
              </button>
            ))}
          </div>
        </div>

        {/* MAIN */}
        <div className="main">
          <div className="topbar">
            <div className="topbar-title">
              <span className="live-dot" />
              Traces
            </div>
            <span className="badge badge-teal">v0.1.0</span>
            <span className="badge badge-muted">localhost:7432</span>
          </div>

          {/* METRICS */}
          <div className="metrics-bar">
            <div className="metric-item">
              <div className="metric-val">{TRACES.length}</div>
              <div className="metric-label">Total Traces</div>
            </div>
            <div className="metric-item">
              <div className="metric-val red">1</div>
              <div className="metric-label">Blocked</div>
            </div>
            <div className="metric-item">
              <div className="metric-val amber">1</div>
              <div className="metric-label">Warnings</div>
            </div>
            <div className="metric-item">
              <div className="metric-val">5.8k</div>
              <div className="metric-label">Avg Tokens</div>
            </div>
            <div className="metric-item">
              <div className="metric-val">5.9s</div>
              <div className="metric-label">Avg Latency</div>
            </div>
          </div>

          {/* FILTERS */}
          <div className="filter-row">
            {["all", "ok", "blocked", "warn"].map(f => (
              <button
                key={f}
                className={`filter-chip ${filter === f ? "active" : ""}`}
                onClick={() => setFilter(f)}
              >
                {f === "all" ? `all (${statusCounts.all})` : `${f} (${statusCounts[f]})`}
              </button>
            ))}
            <input className="search-box" placeholder="search trace id, agent..." />
          </div>

          {/* TABLE + DETAIL */}
          <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
            <div className="table-wrap">
              <table className="trace-table">
                <thead>
                  <tr>
                    <th>Trace ID</th>
                    <th>Agent</th>
                    <th>Spans</th>
                    <th>Latency</th>
                    <th>Tokens</th>
                    <th>Status</th>
                    <th>Time</th>
                  </tr>
                </thead>
                <tbody>
                  {filtered.map(trace => (
                    <tr
                      key={trace.id}
                      className={`trace-row ${selected?.id === trace.id ? "selected" : ""}`}
                      onClick={() => setSelected(trace)}
                    >
                      <td>
                        <div className="trace-id">{trace.id}</div>
                        <div className="agent-sub">{trace.session}</div>
                      </td>
                      <td>
                        <div className="agent-name">{trace.agent}</div>
                        <div className="agent-sub">{trace.framework}</div>
                      </td>
                      <td>
                        <div className="span-pills">
                          {trace.spans.map((s, i) => (
                            <span key={i} className={`span-pill ${KIND_COLORS[s.kind]}`}>{s.label}</span>
                          ))}
                        </div>
                      </td>
                      <td>
                        <div className="latency">{(trace.latency / 1000).toFixed(2)}s</div>
                        <div className="latency-bar" style={{ width: `${trace.latencyPct}%` }} />
                      </td>
                      <td>
                        <div className="latency">{trace.tokens}</div>
                      </td>
                      <td>
                        <span className={`status-dot dot-${trace.status === "ok" ? "ok" : trace.status === "blocked" ? "err" : "warn"}`} />
                        <span className={`badge badge-${trace.status === "ok" ? "teal" : trace.status === "blocked" ? "red" : "amber"}`}>
                          {trace.status}
                        </span>
                      </td>
                      <td className="time-col">{trace.time}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* DETAIL PANEL */}
            {selected && (
              <div className="detail-panel">
                <div className="detail-header">
                  <div>
                    <div className="detail-title">{selected.agent}</div>
                    <div className="detail-id">{selected.id}</div>
                  </div>
                  <button className="close-btn" onClick={() => setSelected(null)}>×</button>
                </div>
                <div className="detail-body">
                  <div className="detail-section">
                    <div className="detail-section-label">metadata</div>
                    <div className="kv-row"><span className="kv-key">session</span><span className="kv-val">{selected.session}</span></div>
                    <div className="kv-row"><span className="kv-key">framework</span><span className="kv-val">{selected.framework}</span></div>
                    <div className="kv-row"><span className="kv-key">latency</span><span className="kv-val">{(selected.latency / 1000).toFixed(3)}s</span></div>
                    <div className="kv-row"><span className="kv-key">tokens</span><span className="kv-val">{selected.tokens}</span></div>
                    <div className="kv-row"><span className="kv-key">status</span>
                      <span className={`badge badge-${selected.status === "ok" ? "teal" : selected.status === "blocked" ? "red" : "amber"}`}>{selected.status}</span>
                    </div>
                  </div>

                  <div className="detail-section">
                    <div className="detail-section-label">input</div>
                    <div className="code-block">{selected.detail.input}</div>
                  </div>

                  <div className="detail-section">
                    <div className="detail-section-label">output</div>
                    <div className="code-block" style={{ color: selected.status === "blocked" ? "#f85149" : selected.status === "warn" ? "#d29922" : "#3fb950" }}>
                      {selected.detail.output}
                    </div>
                  </div>

                  <div className="detail-section">
                    <div className="detail-section-label">span waterfall</div>
                    <div className="waterfall">
                      {selected.detail.spans.map((span, i) => {
                        const s = WF_KIND_STYLE[span.kind] || WF_KIND_STYLE.agent;
                        return (
                          <div key={i} className="wf-span">
                            <span className="wf-name">{span.name}</span>
                            <span className="wf-kind" style={{ color: s.color, borderColor: s.borderColor, background: s.bg, fontSize: 9, padding: "1px 5px", borderRadius: 2 }}>{span.kind}</span>
                            <div className="wf-bar-wrap">
                              <div className="wf-bar" style={{ width: `${span.pct}%`, background: s.color }} />
                            </div>
                            <span className="wf-ms">{span.ms}ms</span>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
}
