// AI-MONITOR · Page sections — Nodes, Models, Telemetry

const { NODES: _NODES, MODELS: _MODELS, live: _live, totals: _totals } = window.AIData;

// ── NODES ──────────────────────────────────────────────────────────────
function NodesSection() {
  useLive();
  const { t } = useLang();
  const [active, setActive] = useState(null);
  const [nfilter, setNfilter] = useState("All");
  return (
    <section className="page reveal" id="nodes">
      <div className="eyebrow"><span className="num">03</span>{t("Nodes")}</div>
      <div className="sect-head">
        <div>
          <h2 style={{ margin: 0 }}>{t("{n} machines. ", { n: _NODES.length })}<em>{t("Each a citizen.")}</em></h2>
          <p className="lede" style={{ margin: "14px 0 0" }}>
            {t("Each host runs the LiteLLM gateway, an inference engine, or both. Click a node for the full forensic view.")}
          </p>
        </div>
        <div className="btn-seg" role="tablist">
          {["All","RTX","DGX","Active"].map((k) => (
            <button key={k} data-on={nfilter === k ? "1" : "0"} onClick={() => setNfilter(k)}>{t(k)}</button>
          ))}
        </div>
      </div>

      {/* 列数随 hearth.yaml nodes 数量动态: 1-6 节点对应 .g-1 ~ .g-6;
          7+ 节点用 .g-auto (auto-fill minmax 220px) 自动换行。
          响应式塌缩交给 CSS 媒体查询(≤1180→3 列, ≤820→2 列, 手机→1 列)。 */}
      <div className={"grid " + (_NODES.length <= 6 ? "g-" + _NODES.length : "g-auto")}>
        {_NODES.filter((n) => nfilter === "All" ? true
              : nfilter === "RTX" ? (n.kind || "discrete") === "discrete"
              : nfilter === "DGX" ? (n.kind || "discrete") !== "discrete"
              : (_live.nodes[n.id] && _live.nodes[n.id].cpu.now > 0))
          .map((n) => <NodeCard key={n.id} node={n} onClick={() => setActive(n)} />)}
      </div>

      {active && <NodeDetail node={active} onClose={() => setActive(null)} />}
    </section>
  );
}

function NodeCard({ node, onClick }) {
  const { t } = useLang();
  const ns = _live.nodes[node.id];
  const isHost = /gateway/i.test(node.role || "");
  const offline = ns.up === false;       // 后端权威: 真实离线状态(不再写死 ONLINE)
  return (
    <article className="node" data-offline={offline ? "1" : "0"} onClick={onClick}
             style={offline ? { opacity: 0.55 } : undefined}>
      <div className="node-head">
        <div>
          <div className="node-class">{node.class}</div>
          <div className="node-name">{node.name}</div>
          <div className="node-ip">{node.ip}</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="node-status" style={offline ? { color: "var(--ink-3)" } : undefined}>
            <span className={"dot" + (offline ? " bad" : "")} />{offline ? t("OFFLINE") : t("ONLINE")}
          </div>
          <div style={{ marginTop: 6 }}>
            <span className={"chip " + (offline ? "ghost" : isHost ? "accent" : "violet")} style={{ fontSize: 9.5 }}>
              {isHost ? "GATEWAY" : node.role.split(" ")[2] || "NODE"}
            </span>
          </div>
        </div>
      </div>

      <div className="node-rings">
        <div>
          {node.gpuPending
            ? <div style={{ width: 56, height: 56, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--mono)", fontSize: 8, color: "var(--ink-3)", textAlign: "center", lineHeight: 1.35 }}>GPU<br />{t("maint. pending")}</div>
            : <Ring value={ns.gpu.now} size={56} stroke={5} sub="GPU" />}
          <div className="rl">GPU</div>
        </div>
        <div>
          <Ring value={ns.vram.now} size={56} stroke={5} sub="VRAM" />
          <div className="rl">VRAM</div>
        </div>
        <div>
          <Ring value={ns.cpu.now} size={56} stroke={5} sub="CPU" />
          <div className="rl">CPU</div>
        </div>
      </div>

      {!node.gpuPending &&
        <Sparkline data={ns.gpu.hist} height={30} color={ns.gpu.now > 80 ? "var(--hot)" : "var(--accent)"} />}

      <div className="node-metas">
        <div className="k">GPU</div><div className="v">{node.gpu.name.replace("GeForce ","")}</div>
        <div className="k">VRAM</div><div className="v">{node.gpu.mem} GB</div>
        <div className="k">CPU</div><div className="v">{node.cpu.cores}c / {node.cpu.threads}t</div>
        <div className="k">RAM</div><div className="v">{node.ram} GB</div>
        <div className="k">{t("Net")}</div><div className="v">{node.net}</div>
        <div className="k">{t("Power")}</div><div className="v num">{node.gpuPending ? t("GPU pending · maintenance window") : ns.power.now.toFixed(0) + " W"}</div>
        <div className="k">{t("GPU temp")}</div><div className="v num" style={{ color: !node.gpuPending && ns.tempGpu.now > 80 ? "var(--hot)" : "var(--ink)" }}>{node.gpuPending ? "—" : ns.tempGpu.now.toFixed(0) + " °C"}</div>
      </div>
    </article>
  );
}

function NodeDetail({ node, onClose }) {
  const { t } = useLang();
  const ns = _live.nodes[node.id];
  const nicTemp = (_live.nodeMeta?.[node.id]?.temps || []).find((x) => x.module === "网卡" || x.module === "NIC")?.celsius || 0;
  const hostedModels = _MODELS.filter((m) => m.nodes.includes(node.id));
  return (
    <div className="card" style={{ marginTop: 22 }}>
      <div className="card-head">
        <div>
          <div className="card-title" style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span className="num" style={{ color: "var(--ink-3)", fontSize: 12, fontWeight: 400, fontFamily: "var(--mono)" }}>$ ssh root@{node.ip}</span>
            <span>{node.name} · {t("forensic view")}</span>
          </div>
          <div className="card-sub">{node.gpu.name} · {node.os} · kernel {node.kernel} · NVIDIA {node.driver.split(" ")[1]} · CUDA {node.cuda}</div>
        </div>
        <button onClick={onClose} style={{
          appearance: "none", border: 0, background: "rgba(255,255,255,.04)",
          color: "var(--ink-2)", borderRadius: 7, padding: "5px 10px",
          fontFamily: "var(--mono)", fontSize: 11, cursor: "pointer",
        }}>Close ✕</button>
      </div>

      <div className="nd-grid nd-grid-top" style={{ padding: 22 }}>
        <div>
          <div className="metric-l" style={{ marginBottom: 12 }}>{t("Accelerator activity · 60 ticks")}</div>
          <AreaChart
            series={[ns.gpu.hist]}
            colors={["var(--accent)"]}
            height={180}
            yMax={100}
            unit="%"
          />
          <div style={{ display: "flex", gap: 16, marginTop: 8, fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-3)" }}>
            <span><i style={{ display: "inline-block", width: 8, height: 8, borderRadius: 2, background: "var(--accent)", marginRight: 6 }} />{t("Accelerator activity")}</span>
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <DetailMetric label={t("GPU")}            value={ns.gpu.now.toFixed(0)} unit="%" bar={ns.gpu.now} />
          <DetailMetric label={t("VRAM")}           value={(node.gpu.mem * ns.vram.now / 100).toFixed(1)} unit={` / ${node.gpu.mem} GB`} bar={ns.vram.now} color="violet" />
          <DetailMetric label={t("GPU temp")}       value={ns.tempGpu.now.toFixed(0)} unit=" °C" bar={ns.tempGpu.now} color={ns.tempGpu.now > 80 ? "hot" : "ok"} />
          {nicTemp > 0 && (
            <DetailMetric label={t("NIC temp")}     value={nicTemp.toFixed(0)} unit=" °C" bar={Math.min(100, nicTemp)} color={nicTemp > 85 ? "hot" : nicTemp > 70 ? "warn" : "ok"} />
          )}
          <DetailMetric label={t("Power draw")}     value={ns.power.now.toFixed(0)} unit=" W"  bar={Math.min(100, ns.power.now / (/gateway/i.test(node.role || "") ? 4.5 : 2.5))} color="hot" />
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <DetailMetric label={t("CPU")}            value={ns.cpu.now.toFixed(0)} unit="%" bar={ns.cpu.now} color="teal" />
          <DetailMetric label={t("RAM")}            value={(node.ram * ns.mem.now / 100).toFixed(0)} unit={` / ${node.ram} GB`} bar={ns.mem.now} color="violet" />
          <DetailMetric label={t("Disk usage")}     value={(node.disk * ns.disk.now / 100 / 1024).toFixed(1)} unit={` / ${(node.disk/1024).toFixed(0)} TB`} bar={ns.disk.now} color="ok" />
          <DetailMetric label={t("Net In")}         value={(ns.netIn.now).toFixed(0)} unit=" MB/s" bar={Math.min(100, ns.netIn.now / 12)} color="accent" />
          <DetailMetric label={t("Net Out")}        value={(ns.netOut.now).toFixed(0)} unit=" MB/s" bar={Math.min(100, ns.netOut.now / 12)} color="accent" />
        </div>
      </div>

      <div className="nd-grid nd-grid-bottom" style={{ borderTop: "0.5px solid var(--line)", padding: 22 }}>
        <div>
          <div className="metric-l" style={{ marginBottom: 10 }}>{t("Hosted models")}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {hostedModels.length === 0 && <div style={{ fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--ink-3)" }}>{t("— No models pinned to this node —")}</div>}
            {hostedModels.map((m) => (
              <div key={m.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 10px", borderRadius: 7, background: "rgba(255,255,255,.025)", border: "0.5px solid var(--line)" }}>
                <div>
                  <div style={{ fontFamily: "var(--display)", fontSize: 12.5, fontWeight: 590 }}>{m.display}</div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-3)" }}>{m.framework} · {m.quant} · :{m.port}</div>
                </div>
                <span className={"chip " + (m.state === "serving" ? "ok" : m.state === "online" ? "ok" : m.state === "idle" ? "warn" : m.state === "stopped" ? "bad" : "ghost")}>
                  {t(m.state)}
                </span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="metric-l" style={{ marginBottom: 10 }}>{t("Running services")}</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {node.services.map((s) => <span key={s} className="chip">{s}</span>)}
          </div>
          <div className="metric-l" style={{ marginTop: 18, marginBottom: 10 }}>{t("System")}</div>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "6px 14px", fontFamily: "var(--mono)", fontSize: 11.5 }}>
            <span style={{ color: "var(--ink-3)" }}>CPU</span><span>{node.cpu.model}</span>
            <span style={{ color: "var(--ink-3)" }}>OS</span><span>{node.os}</span>
            <span style={{ color: "var(--ink-3)" }}>{t("Kernel")}</span><span>{node.kernel}</span>
            <span style={{ color: "var(--ink-3)" }}>{t("Driver")}</span><span>{node.driver}</span>
            <span style={{ color: "var(--ink-3)" }}>CUDA</span><span>{node.cuda}</span>
            <span style={{ color: "var(--ink-3)" }}>{t("Net")}</span><span>{node.net}</span>
          </div>
        </div>

        <div>
          <div className="metric-l" style={{ marginBottom: 10 }}>{t("Quick actions")}</div>
          <div style={{ display: "grid", gap: 8 }}>
            {["Open SSH session","Drain & cordon","Restart daemons","Pin model…","Run nvidia-smi dmon","Reboot"].map((a) => (
              <button key={a} style={{
                appearance: "none", border: "0.5px solid var(--line)",
                background: "rgba(255,255,255,.025)",
                color: "var(--ink)", borderRadius: 7, padding: "9px 12px",
                font: "500 12px var(--display)", letterSpacing: "-.005em", textAlign: "left", cursor: "pointer",
                transition: "background .15s, border-color .15s",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,.06)"; e.currentTarget.style.borderColor = "var(--line-2)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(255,255,255,.025)"; e.currentTarget.style.borderColor = "var(--line)"; }}
              >{t(a)}</button>
            ))}
          </div>
        </div>
      </div>

      <div style={{ borderTop: "0.5px solid var(--line)", padding: 22 }}>
        <div className="metric-l" style={{ marginBottom: 12 }}>{t("Hardware sensors")}</div>
        <SensorPanel nodeId={node.id} />
      </div>
    </div>
  );
}

// 按硬件模块分组的可展开传感器面板（温度各组 + 风扇组）。
// 后端 live.{temps,fans} 已全量直采；此处只负责"应看尽看"的分组呈现。
function SensorPanel({ nodeId }) {
  const { t } = useLang();
  const meta = _live.nodeMeta[nodeId] || {};
  const temps = meta.temps || [];
  const fans = meta.fans || [];
  const [open, setOpen] = useState({});
  if (!temps.length && !fans.length)
    return <div style={{ fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--ink-3)" }}>{t("— no temperature data (node unmanaged) —")}</div>;

  const tc = (c) => (c >= 80 ? "var(--hot)" : c >= 70 ? "var(--warn)" : "var(--ink)");
  const moreRow = (n) => ({ label: t("+{n} more").replace("{n}", n), value: "", color: "var(--ink-3)" });
  const order = ["CPU", "水冷", "网卡", "NVMe", "SoC", "平台", "其他"];
  const rank = (m) => { const i = order.indexOf(m); return i < 0 ? 99 : i; };

  const groups = {};
  temps.forEach((x) => { (groups[x.module] = groups[x.module] || []).push(x); });
  const cards = Object.keys(groups).sort((a, b) => rank(a) - rank(b)).map((mod) => {
    const list = groups[mod];                         // already hottest-first (global desc sort)
    const expanded = !!open[mod];
    const rows = (expanded ? list : list.slice(0, 3)).map((x) => ({
      label: x.label, value: `${Math.round(x.celsius)} °C`, color: tc(x.celsius),
    }));
    if (!expanded && list.length > 3) rows.push(moreRow(list.length - 3));
    return <SensorGroup key={mod} title={mod} rep={`${Math.round(list[0].celsius)} °C`}
      repColor={tc(list[0].celsius)} rows={rows} expandable={list.length > 3}
      expanded={expanded} onToggle={() => setOpen((o) => ({ ...o, [mod]: !o[mod] }))} />;
  });

  if (fans.length) {
    const expanded = !!open.__fans;
    const repRpm = Math.max(...fans.map((f) => f.rpm));
    const rows = (expanded ? fans : fans.slice(0, 3)).map((f) => ({
      label: f.label, value: f.rpm > 0 ? `${f.rpm} RPM` : t("stopped"),
      color: f.rpm > 0 ? "var(--ink)" : "var(--ink-3)",
    }));
    if (!expanded && fans.length > 3) rows.push(moreRow(fans.length - 3));
    cards.push(<SensorGroup key="__fans" title={t("Fans")} rep={`${repRpm} RPM`} repColor="var(--ink)"
      rows={rows} expandable={fans.length > 3} expanded={expanded}
      onToggle={() => setOpen((o) => ({ ...o, __fans: !o.__fans }))} />);
  }

  return <div className="sensor-grid">{cards}</div>;
}

function SensorGroup({ title, rep, repColor, rows, expandable, expanded, onToggle }) {
  return (
    <div className="sensor-card">
      <button type="button" className="sensor-card-head" onClick={expandable ? onToggle : undefined}
        style={{ cursor: expandable ? "pointer" : "default" }}>
        <span className="sensor-card-title">{title}</span>
        <span className="sensor-card-rep num" style={{ color: repColor }}>{rep}</span>
        {expandable && <span className="sensor-chev" style={{ transform: expanded ? "rotate(90deg)" : "none" }}>›</span>}
      </button>
      <div className="sensor-rows">
        {rows.map((r, i) => (
          <div className="sensor-row" key={i}>
            <span className="sensor-row-l">{r.label}</span>
            <span className="num" style={{ color: r.color }}>{r.value}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function DetailMetric({ label, value, unit, bar, color = "accent" }) {
  return (
    <div className="metric">
      <div className="metric-h">
        <div className="metric-l">{label}</div>
        <div className="metric-v num">{value}<small>{unit}</small></div>
      </div>
      <div className={"bar " + color}><i style={{ width: `${Math.max(0, Math.min(100, bar))}%` }} /></div>
    </div>
  );
}

// ── MODELS ─────────────────────────────────────────────────────────────
function ModelsSection() {
  useLive();
  const { t } = useLang();
  const [active, setActive] = useState(null);
  const [filter, setFilter] = useState("all");

  const visible = _MODELS.filter((m) => {
    if (filter === "all") return true;
    if (filter === "serving") return m.state === "serving";
    if (filter === "idle") return m.state !== "serving";
    if (filter === "chat") return m.kind === "chat";
    return true;
  });

  return (
    <section className="page reveal" id="models">
      <div className="eyebrow"><span className="num">04</span>{t("Models · LiteLLM gateway")}</div>
      <div className="sect-head">
        <div>
          <h2 style={{ margin: 0 }}>{t("One endpoint. ")}<em>{t("Every model.")}</em></h2>
          <p className="lede" style={{ margin: "14px 0 0" }}>
            {t("All inference is routed through LiteLLM on ")}<span className="num" style={{ color: "var(--accent)" }}>{(_live.cluster && _live.cluster.gatewayHost) || "127.0.0.1:4000"}</span>{t(" — OpenAI-compatible API, smart routing, fallbacks, cost & token accounting. Cold models spin up on demand to fit the VRAM budget.")}
          </p>
        </div>
        <div className="btn-seg">
          {[["all","All"],["serving","Serving"],["idle","Idle"],["chat","Chat"]].map(([k, l]) => (
            <button key={k} data-on={filter === k ? "1" : "0"} onClick={() => setFilter(k)}>{t(l)}</button>
          ))}
        </div>
      </div>

      {/* Gateway header strip */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="gw-strip" style={{ padding: 22, alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 28, height: 28, borderRadius: 8, background: "linear-gradient(135deg, #0a84ff, #bf5af2)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#fff", font: "600 11px var(--mono)" }}>LL</span>
              <b style={{ fontFamily: "var(--display)", fontWeight: 590, fontSize: 16 }}>LiteLLM Gateway</b>
              <span className="chip ok"><span className="dot" />{t("healthy")}</span>
            </div>
            <div className="num" style={{ fontSize: 11.5, color: "var(--ink-3)" }}>
              litellm · {_live.gatewayHost || "127.0.0.1:4000"} · OpenAI-compatible /v1/*
            </div>
          </div>
          <GatewayStat label={t("Catalog models")} value={_MODELS.length} sub={`${_MODELS.filter(m=>m.metricsSource==="vllm"||m.metricsSource==="llamacpp"||m.metricsSource==="sglang").length} ${t("with live metrics")}`} />
          <GatewayStat label={t("Live metric sources")} value={_MODELS.filter(m=>m.metricsSource==="vllm"||m.metricsSource==="llamacpp"||m.metricsSource==="sglang").length} sub={t("vLLM + llama.cpp + SGLang /metrics")} />
          <GatewayStat label={t("Live throughput")} value={Math.round(_MODELS.filter(m=>m.metricsSource==="vllm"||m.metricsSource==="llamacpp"||m.metricsSource==="sglang").reduce((a,m)=>a+(_live.models[m.id]?_live.models[m.id].tps.now:0),0))} sub={t("t/s · measured sum")} />
          <GatewayStat label={t("LiteLLM metrics")} value={t("enterprise")} sub={t("OSS not exposed · documented")} />
        </div>
      </div>

      <div className="models">
        <div className="model-headrow">
          <div>{t("Model")}</div>
          <div>{t("Throughput")}</div>
          <div>{t("TTFT / TPOT")}</div>
          <div>{t("KV-cache")}</div>
          <div>{t("P50 / P95 / P99")}</div>
          <div>{t("Placement · framework")}</div>
          <div style={{ textAlign: "right" }}>{t("State")}</div>
        </div>
        {visible.map((m) => (
          <React.Fragment key={m.id}>
            <div className="model" data-active={active === m.id ? "1" : "0"} onClick={() => setActive(active === m.id ? null : m.id)}>
              <div className="model-name">
                <b>{m.display}</b>
                <span>{m.vendor} · {m.params} · {m.quant} · ctx&nbsp;{m.ctx === 0 ? "—" : m.ctx >= 1e6 ? `${(m.ctx/1e6).toFixed(0)}M` : `${(m.ctx/1024).toFixed(0)}K`}</span>
              </div>
              <div>
                {(m.metricsSource === "vllm" || m.metricsSource === "llamacpp" || m.metricsSource === "sglang") ? (
                  <>
                    <div className="model-bigmetric">{_live.models[m.id].tps.now.toFixed(0)}<small>t/s</small></div>
                    <div className="model-spark"><Sparkline data={_live.models[m.id].tps.hist} color="var(--accent)" height={20} /></div>
                    {/* 并发: tok/s 不带并发数解读不了 (单并发 50t/s vs 4并发 200t/s 截然不同).
                        vLLM/SGLang 暴露 num_requests_running + waiting; llama.cpp 只有 running. */}
                    <div style={{ marginTop: 4, fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-3)" }}>
                      <span style={{ color: "var(--ink-2)" }}>{_live.models[m.id].running.now.toFixed(0)}</span> {t("running")}
                      {_live.models[m.id].waiting.now > 0 && (
                        <> · <span style={{ color: "var(--warn)" }}>{_live.models[m.id].waiting.now.toFixed(0)} {t("queued")}</span></>
                      )}
                    </div>
                  </>
                ) : <div style={{ fontFamily: "var(--mono)", color: "var(--ink-4)", fontSize: 11 }}>{t("no live metrics source")}<br />· {m.framework} ·</div>}
              </div>
              <div className="num" style={{ fontSize: 12, color: "var(--ink-2)" }}>
                {/* TTFT: vLLM 暴露, llama.cpp 不暴露(诚实显—); TPOT: 两者都有 */}
                {(m.metricsSource === "vllm" || m.metricsSource === "sglang") ? (
                  <div><b style={{ color: "var(--ink)" }}>{_live.models[m.id].ttft.now.toFixed(0)}</b> <small style={{ color: "var(--ink-3)", fontFamily: "var(--mono)" }}>ms TTFT</small></div>
                ) : m.metricsSource === "llamacpp" ? (
                  <div><span style={{ color: "var(--ink-4)" }}>—</span> <small style={{ color: "var(--ink-3)", fontFamily: "var(--mono)" }}>ms TTFT</small></div>
                ) : null}
                {(m.metricsSource === "vllm" || m.metricsSource === "llamacpp" || m.metricsSource === "sglang") ? (
                  <div><b style={{ color: "var(--ink)" }}>{_live.models[m.id].tpot.now.toFixed(0)}</b> <small style={{ color: "var(--ink-3)", fontFamily: "var(--mono)" }}>ms/tok</small></div>
                ) : <span style={{ color: "var(--ink-4)" }}>—</span>}
              </div>
              <div>
                {(m.metricsSource === "vllm" || m.metricsSource === "sglang") ? (
                  <>
                    <div style={{ marginBottom: 4, fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-2)" }}>
                      {_live.models[m.id].kv.now.toFixed(1)}%
                    </div>
                    <div className={"bar " + (_live.models[m.id].kv.now > 80 ? "bad" : _live.models[m.id].kv.now > 65 ? "hot" : "violet")}>
                      <i style={{ width: `${Math.min(100, _live.models[m.id].kv.now)}%` }} />
                    </div>
                  </>
                ) : <span style={{ color: "var(--ink-4)", fontFamily: "var(--mono)", fontSize: 10.5 }}>—</span>}
              </div>
              <div className="num" style={{ fontSize: 11.5, color: "var(--ink-2)" }}>
                {(m.metricsSource === "vllm" || m.metricsSource === "sglang") ? <>
                  <span style={{ color: "var(--ink)" }}>{m.p50}</span>
                  <span style={{ color: "var(--ink-4)" }}> / </span>
                  <span>{m.p95}</span>
                  <span style={{ color: "var(--ink-4)" }}> / </span>
                  <span style={{ color: m.p99 > 20000 ? "var(--hot)" : "var(--ink-2)" }}>{m.p99}</span>
                  <small style={{ marginLeft: 4, fontFamily: "var(--mono)", color: "var(--ink-3)" }}>ms</small>
                </> : <span style={{ color: "var(--ink-4)", fontFamily: "var(--mono)", fontSize: 10.5 }}>—</span>}
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-2)" }}>{m.framework}</div>
                <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
                  {m.nodes.map((nid) => <span key={nid} className="chip" style={{ fontSize: 9.5 }}>{nid}</span>)}
                </div>
              </div>
              <div style={{ textAlign: "right" }}>
                <span className={"chip " + (m.state === "serving" ? "ok" : m.state === "online" ? "ok" : m.state === "loading" ? "warn" : m.state === "stopped" ? "bad" : "ghost")}>
                  {(m.state === "serving" || m.state === "online") ? <><span className="dot" />{t(m.state)}</> : t(m.state)}
                </span>
              </div>
            </div>

            {active === m.id && (
              <ModelDetail model={m} />
            )}
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

function GatewayStat({ label, value, sub }) {
  return (
    <div>
      <div className="metric-l" style={{ marginBottom: 6 }}>{label}</div>
      <div style={{ font: "500 22px/1 var(--display)", letterSpacing: "-.022em", color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>{value}</div>
      <div style={{ marginTop: 4, fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-3)" }}>{sub}</div>
    </div>
  );
}

function ModelDetail({ model }) {
  const { t } = useLang();
  const ms = _live.models[model.id];
  return (
    <div className="model-detail">
      <div>
        <div className="metric-l" style={{ marginBottom: 8 }}>{t("Throughput · last 32 ticks")}</div>
        <AreaChart series={[ms.tps.hist]} colors={["var(--accent)"]} height={140} unit={model.kind === "embed" ? " e/s" : " t/s"} padding={{l:42,r:14,t:10,b:18}} ticks={3} />
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {(model.metricsSource === "vllm" || model.metricsSource === "sglang") ? <>
          <DetailMetric label={t("TTFT (first token)")} value={ms.ttft.now.toFixed(0)} unit=" ms" bar={Math.min(100, ms.ttft.now / 8)} color="violet" />
          <DetailMetric label={t("TPOT (per token)")}   value={ms.tpot.now.toFixed(0)} unit=" ms" bar={Math.min(100, ms.tpot.now / 5)} color="teal" />
          <DetailMetric label={t("Concurrency · running")} value={ms.running.now.toFixed(0)} unit={ms.waiting.now > 0 ? ` (+${ms.waiting.now.toFixed(0)} ${t("queued")})` : ""} bar={Math.min(100, ms.running.now * 10)} color={ms.waiting.now > 0 ? "hot" : "ok"} />
          <DetailMetric label={t("Requests / sec")}     value={ms.rps.now.toFixed(2)} unit="" bar={Math.min(100, ms.rps.now * 6)} color="accent" />
          <DetailMetric label={t("KV-cache")}           value={ms.kv.now.toFixed(1)} unit="%" bar={Math.min(100, ms.kv.now)} color={ms.kv.now > 80 ? "bad" : ms.kv.now > 65 ? "hot" : "violet"} />
        </> : model.metricsSource === "llamacpp" ? <>
          {/* llama.cpp /metrics 暴露 TPOT/throughput/running, 不暴露 TTFT/KV/e2e */}
          <DetailMetric label={t("TPOT (per token)")}   value={ms.tpot.now.toFixed(0)} unit=" ms" bar={Math.min(100, ms.tpot.now / 5)} color="teal" />
          <DetailMetric label={t("Concurrency · running")} value={ms.running.now.toFixed(0)} unit="" bar={Math.min(100, ms.running.now * 10)} color="ok" />
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)", lineHeight: 1.7 }}>
            {t("llama.cpp /metrics does not expose TTFT / KV% / e2e histograms · shown as — honestly")}
          </div>
        </> : <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)", lineHeight: 1.7 }}>
          {model.framework} {t("backend has no Prometheus /metrics endpoint. No live-metrics source → honestly marked, not faked. Model still serves normally via LiteLLM route")} {model.route}
        </div>}
      </div>
      <div>
        <div className="metric-l" style={{ marginBottom: 8 }}>{t("Route · ")}{model.route}</div>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "5px 12px", fontFamily: "var(--mono)", fontSize: 11.5 }}>
          <span style={{ color: "var(--ink-3)" }}>{t("Framework")}</span><span>{model.framework}</span>
          <span style={{ color: "var(--ink-3)" }}>{t("Port")}</span><span>:{model.port}</span>
          <span style={{ color: "var(--ink-3)" }}>{t("Quant")}</span><span>{model.quant}</span>
          <span style={{ color: "var(--ink-3)" }}>{t("VRAM")}</span><span>{model.vram} GB</span>
          <span style={{ color: "var(--ink-3)" }}>{t("Context")}</span><span>{model.ctx === 0 ? "—" : model.ctx >= 1e6 ? `${(model.ctx/1e6).toFixed(0)}M tokens` : `${(model.ctx/1024).toFixed(0)}K tokens`}</span>
          <span style={{ color: "var(--ink-3)" }}>{t("Placement")}</span><span>{model.nodes.join(", ")}</span>
        </div>
        <div style={{ marginTop: 14, display: "flex", flexWrap: "wrap", gap: 5 }}>
          {model.tags.map((t) => <span key={t} className="chip violet" style={{ fontSize: 9.5 }}>{t}</span>)}
        </div>
        <div style={{ marginTop: 16, display: "flex", gap: 6 }}>
          <button style={modelBtn(true)}>{t("Open Playground")}</button>
          <button style={modelBtn(false)}>{t("Restart")}</button>
          <button style={modelBtn(false)}>{t("Logs")}</button>
        </div>
      </div>
    </div>
  );
}

function modelBtn(primary) {
  return {
    appearance: "none", border: "0.5px solid " + (primary ? "transparent" : "var(--line)"),
    background: primary ? "var(--ink)" : "transparent",
    color: primary ? "var(--bg)" : "var(--ink)",
    borderRadius: 7, padding: "7px 12px",
    font: "500 11.5px var(--display)", letterSpacing: "-.005em", cursor: "pointer",
  };
}

// ── TELEMETRY ──────────────────────────────────────────────────────────
function _trendCell(v, suffix = "", digits = 1) {
  if (v == null) return "—";
  return (typeof v === "number" ? v.toFixed(digits) : String(v)) + suffix;
}

function TelemetrySection() {
  useLive();
  const { t } = useLang();
  // HA-derived fields are null when the exporter is absent / sensor stale.
  // Render the tm-card strip only when at least one field exists; otherwise
  // the section degrades to its original 2-col grid as if HA never existed.
  const pw = _live.power || null;
  const en = _live.env   || null;
  const haAny = (pw && (pw.wallW != null || pw.tokensPerW != null))
             || (en && (en.rackTempC != null || en.acOn != null));
  const fmt = (v, unit, digits = 1) =>
    v == null ? "—" : (typeof v === "number" ? v.toFixed(digits) : String(v)) + (v == null ? "" : unit);
  return (
    <section className="page reveal" id="telemetry">
      <div className="eyebrow"><span className="num">05</span>{t("Telemetry · alerts")}</div>
      <h2>{t("Signal, not ")}<em>{t("noise.")}</em></h2>
      <p className="lede">
        {t("Every request that lands at the gateway, every anomaly the rules engine catches — surfaced as a quiet, structured stream. No paging unless something actually needs you.")}
      </p>

      {haAny && (
        <div className="grid" style={{ gridTemplateColumns: "repeat(3, minmax(0,1fr))", gap: 14, marginBottom: 18 }}>
          <div className="tm-card" data-metric="wall-power">
            <div className="tm-card-l">{t("Wall power")}</div>
            <div className="tm-card-v num">{fmt(pw?.wallW, " W")}</div>
            <div className="tm-card-s">{t("Σ smart-plug · DCGM GPU ")}{fmt(pw?.gpuW, " W")}</div>
          </div>
          <div className="tm-card" data-metric="efficiency">
            <div className="tm-card-l">{t("Efficiency")}</div>
            <div className="tm-card-v num">{fmt(pw?.tokensPerW, "", 2)}
              {pw?.tokensPerW != null && <small> tok·W⁻¹·s⁻¹</small>}
            </div>
            <div className="tm-card-s">{t("LiteLLM tokens / wall power")}</div>
          </div>
          <div className="tm-card" data-metric="rack-env">
            <div className="tm-card-l">{t("Rack")}</div>
            <div className="tm-card-v num">
              {fmt(en?.rackTempC, " °C")}
              <span style={{ color: "var(--ink-3)", marginLeft: 10 }}>{fmt(en?.rackRH, "%", 0)}</span>
            </div>
            <div className="tm-card-s">
              <span className={"dot " + (en?.acOn === true ? "ok" : en?.acOn === false ? "bad" : "")}
                    style={{ marginRight: 6 }} />
              {t("AC ")}{en?.acOn == null ? "—" : en.acOn ? t("on") : t("off")}
              {en?.acW != null && <span style={{ color: "var(--ink-3)" }}> · {fmt(en.acW, " W")}</span>}
            </div>
          </div>
        </div>
      )}

      {haAny && (
        <div className="card" style={{ marginBottom: 18 }} data-metric="device-power">
          <div className="card-head">
            <div>
              <div className="card-title">{t("Devices · live power draw")}</div>
              <div className="card-sub">{t("Per smart-plug reading from Home Assistant · 15s polled")}</div>
            </div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)" }}>
              Σ <b style={{ color: "var(--ink)" }} className="num">{fmt(pw?.wallW, " W")}</b>
              {pw?.kwh24h != null && <span style={{ marginLeft: 12 }}>· {t("24h ")}
                <b style={{ color: "var(--ink)" }} className="num">{pw.kwh24h.toFixed(2)}<small> kWh</small></b></span>}
              {pw?.kwh30d != null && <span style={{ marginLeft: 8 }}>· {t("30d ")}
                <b style={{ color: "var(--ink)" }} className="num">{pw.kwh30d.toFixed(2)}<small> kWh</small></b></span>}
              {en?.cabinetHeatProxyC != null && <span style={{ marginLeft: 12 }} title="Mean of all spark cuco plug internal temps · proxy for cabinet ambient, ±5°C uncertain">
                · {t("cabinet ~")}
                <b style={{ color: "var(--ink)" }} className="num">{en.cabinetHeatProxyC.toFixed(1)}<small> °C</small></b></span>}
            </div>
          </div>
          <div className="card-body" style={{ padding: "8px 22px 16px" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)", marginBottom: 8, letterSpacing: ".06em" }}>
              {t("Energy = sliding-window integral of live wall power, independent from HA/Mi Home counters. 24h ≤ 30d strictly by construction; values grow as the series matures.")}
            </div>
            <table className="tm-devices">
              <thead>
                <tr>
                  <th style={{ width: "23%" }}>{t("Device")}</th>
                  <th style={{ width: "16%" }}>{t("Type")}</th>
                  <th style={{ width: "11%", textAlign: "right" }}>{t("Power")}</th>
                  <th style={{ width: "12%", textAlign: "right" }}>{t("24h")}</th>
                  <th style={{ width: "12%", textAlign: "right" }}>{t("30d")}</th>
                  <th style={{ width: "12%", textAlign: "right" }} title="Smart-plug internal temperature — proxy for ambient air at that location in the rack">{t("Plug °C")}</th>
                  <th style={{ width: "14%" }}>{t("State")}</th>
                </tr>
              </thead>
              <tbody>
                {_NODES.map((n) => {
                  const w = pw?.byNode?.[n.id];
                  const k24 = pw?.byNode24h?.[n.id];
                  const k30 = pw?.byNode30d?.[n.id];
                  const ptemp = en?.byNodePlugTempC?.[n.id];
                  const has = w != null;
                  const hot = ptemp != null && ptemp >= 50;
                  return (
                    <tr key={n.id} data-device={n.id}>
                      <td><b style={{ color: "var(--ink)" }}>{n.name}</b>
                        <span style={{ color: "var(--ink-4)", marginLeft: 8, fontFamily: "var(--mono)", fontSize: 10.5 }}>{n.ip}</span>
                      </td>
                      <td style={{ color: "var(--ink-3)" }}>{n.class || t("Compute node")}</td>
                      <td className="num" style={{ textAlign: "right", color: has ? "var(--ink)" : "var(--ink-4)" }}>
                        {has ? w.toFixed(0) + " W" : "—"}
                      </td>
                      <td className="num" style={{ textAlign: "right", color: k24 != null ? "var(--ink)" : "var(--ink-4)" }}>
                        {k24 != null ? k24.toFixed(2) + " kWh" : "—"}
                      </td>
                      <td className="num" style={{ textAlign: "right", color: k30 != null ? "var(--ink)" : "var(--ink-4)" }}>
                        {k30 != null ? k30.toFixed(2) + " kWh" : "—"}
                      </td>
                      <td className="num" style={{ textAlign: "right", color: ptemp == null ? "var(--ink-4)" : hot ? "var(--hot)" : "var(--ink)" }}>
                        {ptemp != null ? ptemp.toFixed(0) + " °C" : "—"}
                      </td>
                      <td>
                        {has ? (
                          <><span className="dot ok" style={{ marginRight: 6 }} />{t("on")}</>
                        ) : (
                          <span style={{ color: "var(--ink-4)", fontSize: 11 }}>{t("no smart plug")}</span>
                        )}
                      </td>
                    </tr>
                  );
                })}
                {(en?.acW != null || en?.acOn != null) && (
                  <tr data-device="rack-ac">
                    <td><b style={{ color: "var(--ink)" }}>{t("Rack AC")}</b>
                      <span style={{ color: "var(--ink-4)", marginLeft: 8, fontFamily: "var(--mono)", fontSize: 10.5 }}>—</span>
                    </td>
                    <td style={{ color: "var(--ink-3)" }}>{t("Cabinet HVAC")}</td>
                    <td className="num" style={{ textAlign: "right" }}>
                      {en.acW != null ? en.acW.toFixed(0) + " W" : "—"}
                    </td>
                    <td className="num" style={{ textAlign: "right", color: en.acKwh24h != null ? "var(--ink)" : "var(--ink-4)" }}>
                      {en.acKwh24h != null ? en.acKwh24h.toFixed(2) + " kWh" : "—"}
                    </td>
                    <td className="num" style={{ textAlign: "right", color: en.acKwh30d != null ? "var(--ink)" : "var(--ink-4)" }}>
                      {en.acKwh30d != null ? en.acKwh30d.toFixed(2) + " kWh" : "—"}
                    </td>
                    <td className="num" style={{ textAlign: "right", color: "var(--ink-4)" }} title="AC plug runs hot from compressor — not a useful ambient signal">
                      —
                    </td>
                    <td>
                      <span className={"dot " + (en.acOn === true ? "ok" : en.acOn === false ? "bad" : "")} style={{ marginRight: 6 }} />
                      {en.acOn == null ? t("unknown") : en.acOn ? t("on") : t("off")}
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {_live.energyTrends && (
        <div className="card" style={{ marginBottom: 18 }} data-metric="energy-trends">
          <div className="card-head">
            <div>
              <div className="card-title">{t("Energy trends · A/B for physical changes")}</div>
              <div className="card-sub">
                {t("Day = 06:00–18:00 local · same-window comparison reveals what changes (AC setpoint, sunshade, sensor move) actually moved the bill")}
              </div>
            </div>
          </div>
          <div className="card-body" style={{ padding: "8px 22px 16px" }}>
            <table className="tm-devices">
              <thead>
                <tr>
                  <th style={{ width: "32%" }}>{t("Metric")}</th>
                  <th style={{ width: "22%", textAlign: "right" }}>{t("24h")}</th>
                  <th style={{ width: "22%", textAlign: "right" }}>{t("7d")}</th>
                  <th style={{ width: "24%", textAlign: "right" }}>{t("30d")}</th>
                </tr>
              </thead>
              <tbody>
                {/* AC */}
                <tr><td><b style={{ color: "var(--ink)" }}>{t("AC energy")}</b></td>
                  <td className="num" style={{ textAlign: "right" }}>{_trendCell(_live.energyTrends.ac?.last24h?.kwh, " kWh", 2)}</td>
                  <td className="num" style={{ textAlign: "right" }}>{_trendCell(_live.energyTrends.ac?.last7d?.kwh, " kWh", 2)}</td>
                  <td className="num" style={{ textAlign: "right" }}>{_trendCell(_live.energyTrends.ac?.last30d?.kwh, " kWh", 2)}</td></tr>
                <tr><td style={{ paddingLeft: 22, color: "var(--ink-3)" }}>{t("avg power")}</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-2)" }}>{_trendCell(_live.energyTrends.ac?.last24h?.avgW, " W", 0)}</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-2)" }}>{_trendCell(_live.energyTrends.ac?.last7d?.avgW, " W", 0)}</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-2)" }}>{_trendCell(_live.energyTrends.ac?.last30d?.avgW, " W", 0)}</td></tr>
                <tr><td style={{ paddingLeft: 22, color: "var(--ink-3)" }}>↳ {t("day")} (06-18)</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-3)" }}>{_trendCell(_live.energyTrends.ac?.last24h?.dayAvgW, " W", 0)}</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-3)" }}>{_trendCell(_live.energyTrends.ac?.last7d?.dayAvgW, " W", 0)}</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-3)" }}>{_trendCell(_live.energyTrends.ac?.last30d?.dayAvgW, " W", 0)}</td></tr>
                <tr><td style={{ paddingLeft: 22, color: "var(--ink-3)" }}>↳ {t("night")} (18-06)</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-3)" }}>{_trendCell(_live.energyTrends.ac?.last24h?.nightAvgW, " W", 0)}</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-3)" }}>{_trendCell(_live.energyTrends.ac?.last7d?.nightAvgW, " W", 0)}</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-3)" }}>{_trendCell(_live.energyTrends.ac?.last30d?.nightAvgW, " W", 0)}</td></tr>
                {/* Wall */}
                <tr><td><b style={{ color: "var(--ink)" }}>{t("Wall avg")}</b></td>
                  <td className="num" style={{ textAlign: "right" }}>{_trendCell(_live.energyTrends.wall?.last24h?.avgW, " W", 0)}</td>
                  <td className="num" style={{ textAlign: "right" }}>{_trendCell(_live.energyTrends.wall?.last7d?.avgW, " W", 0)}</td>
                  <td className="num" style={{ textAlign: "right" }}>{_trendCell(_live.energyTrends.wall?.last30d?.avgW, " W", 0)}</td></tr>
                {/* Cabinet */}
                <tr><td><b style={{ color: "var(--ink)" }}>{t("Cabinet mean")}</b></td>
                  <td className="num" style={{ textAlign: "right" }}>{_trendCell(_live.energyTrends.cabinet?.last24h?.meanC, " °C", 1)}</td>
                  <td className="num" style={{ textAlign: "right" }}>{_trendCell(_live.energyTrends.cabinet?.last7d?.meanC, " °C", 1)}</td>
                  <td className="num" style={{ textAlign: "right" }}>{_trendCell(_live.energyTrends.cabinet?.last30d?.meanC, " °C", 1)}</td></tr>
                <tr><td style={{ paddingLeft: 22, color: "var(--ink-3)" }}>{t("min / max")}</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-3)" }}>{_trendCell(_live.energyTrends.cabinet?.last24h?.minC, "", 1)} / {_trendCell(_live.energyTrends.cabinet?.last24h?.maxC, " °C", 1)}</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-3)" }}>{_trendCell(_live.energyTrends.cabinet?.last7d?.minC, "", 1)} / {_trendCell(_live.energyTrends.cabinet?.last7d?.maxC, " °C", 1)}</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-3)" }}>{_trendCell(_live.energyTrends.cabinet?.last30d?.minC, "", 1)} / {_trendCell(_live.energyTrends.cabinet?.last30d?.maxC, " °C", 1)}</td></tr>
                <tr><td style={{ paddingLeft: 22, color: "var(--ink-4)", fontSize: 10.5, fontFamily: "var(--mono)" }}>{t("samples")}</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-4)", fontSize: 10.5, fontFamily: "var(--mono)" }}>{_live.energyTrends.ac?.last24h?.samples || 0} / 96</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-4)", fontSize: 10.5, fontFamily: "var(--mono)" }}>{_live.energyTrends.ac?.last7d?.samples || 0} / 672</td>
                  <td className="num" style={{ textAlign: "right", color: "var(--ink-4)", fontSize: 10.5, fontFamily: "var(--mono)" }}>{_live.energyTrends.ac?.last30d?.samples || 0} / 2880</td></tr>
              </tbody>
            </table>
            <div style={{ fontSize: 10, color: "var(--ink-4)", marginTop: 8, fontFamily: "var(--mono)", letterSpacing: ".06em" }}>
              {t("samples = real data points actually in the window (full = window fully filled). Same value across windows means the series is younger than 24h.")}
            </div>
          </div>
        </div>
      )}

      <div className="grid" style={{ gridTemplateColumns: "1.5fr 1fr", gap: 16 }}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Request stream</div>
              <div className="card-sub">{t("LiteLLM request log · OSS Postgres")} · {_live.log.length}</div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="chip ok"><span className="dot" />{t("streaming")}</span>
              <span className="num" style={{ fontSize: 11, color: "var(--ink-3)" }}>p50 {_live.cluster.latP50}ms · p95 {_live.cluster.latP95}ms</span>
            </div>
          </div>
          <div className="card-body" style={{ padding: "12px 22px 22px" }}>
            <div className="log">
              {_live.log.slice(0, 18).map((e, i) => {
                const stat = e.status;
                const cls = stat === "200" ? "ok" : stat === "4xx" ? "warn" : "bad";
                return (
                  <div className={"log-row " + cls} key={e.t.getTime() + "-" + i}>
                    <span className="t">{window.AIData.formatTime(e.t)}</span>
                    <span className="meth">{stat}</span>
                    <span className="log-meta"><span className="log-path">{e.meth.split(" ")[1]} <span style={{ color: "var(--ink-4)" }}>→</span> </span><b style={{ color: "var(--ink)", fontWeight: 500 }}>{e.model}</b></span>
                    <span className="lat">{typeof e.lat === "number" ? e.lat + " ms" : "—"}</span>
                  </div>
                );
              })}
              <div style={{ position: "absolute", inset: "auto 0 0 0", height: 64, background: "linear-gradient(180deg, transparent, var(--bg-1))", pointerEvents: "none" }} />
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Alerts</div>
              <div className="card-sub">Last 24 h · 0 paged · 4 informational</div>
            </div>
            <span className="chip warn">{_live.alerts.filter((a) => a.sev === "warn" || a.sev === "hot").length} open</span>
          </div>
          <div className="card-body" style={{ padding: "4px 0 0" }}>
            {_live.alerts.map((a, i) => (
              <div key={i} className={"alert " + a.sev}>
                <span className="sev" />
                <div className="msg">
                  <b>{a.msg}</b>
                  <span>{a.sub}</span>
                </div>
                <span className="when">{a.when}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FABRIC (network topology) ──────────────────────────────────────────
function FabricSection() {
  useLive();
  const { t } = useLang();
  const [ref, { w }] = useElementSize();
  const H = 360;
  // 网关节点(default 第一个 role=gateway 或第一个节点) + 推理节点们
  const GW = _NODES.find((n) => /gateway/i.test(n.role || "")) || _NODES[0];
  const ATL = { x: w * 0.5, y: 70, id: GW.id, label: (GW.name + " · gateway") };
  const peers = _NODES.filter((n) => n.id !== GW.id);
  const peerXs = peers.map((_, i) => w * (peers.length === 1 ? 0.5 : 0.18 + i * (0.64 / Math.max(1, peers.length - 1))));
  const sparks = peers.map((n, i) => ({
    x: peerXs[i], y: H - 70, id: n.id, label: n.name,
  }));

  // Throughput on each link (atlas → spark)
  const linkLoad = (id) => {
    const ns = _live.nodes[id];
    return Math.min(1, (ns.netIn.now + ns.netOut.now) / 1200);
  };
  // 东西向 CX-7 RoCE/RDMA 真实吞吐 (MB/s)，驱动 spark↔spark mesh 强度
  const ewLoad = (id) => {
    const ns = _live.nodes[id];
    return Math.min(1, ((ns.rdmaIn ? ns.rdmaIn.now : 0) + (ns.rdmaOut ? ns.rdmaOut.now : 0)) / 4000);
  };

  return (
    <section className="page reveal" id="fabric">
      <div className="eyebrow"><span className="num">06</span>{t("Fabric · network")}</div>
      <div className="sect-head">
        <div>
          <h2 style={{ margin: 0 }}>{t("The wires ")}<em>{t("between everything.")}</em></h2>
          <p className="lede" style={{ margin: "14px 0 0" }}>
            {t("The gateway host peers with every inference node — link intensity & pulse are driven by real node-exporter throughput. Inter-node fabric (RDMA/InfiniBand) is physical topology only (throughput not instrumented by default).")}
          </p>
        </div>
      </div>

      <div className="card">
        <div className="card-body" ref={ref} style={{ padding: 0 }}>
          <div className="fabric">
            {w > 0 && (
              <svg viewBox={`0 0 ${w} ${H}`}>
                <defs>
                  <linearGradient id="linkg" x1="0" x2="1" y1="0" y2="0">
                    <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.05" />
                    <stop offset="50%" stopColor="var(--accent)" stopOpacity="0.6" />
                    <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.05" />
                  </linearGradient>
                </defs>
                {/* spark <-> spark mesh — 强度由真实 RDMA 吞吐驱动 */}
                {sparks.map((a, i) => sparks.slice(i + 1).map((b, j) => {
                  const ld = Math.max(ewLoad(a.id), ewLoad(b.id));
                  return (
                  <line key={`m-${i}-${j}`} x1={a.x} y1={a.y} x2={b.x} y2={b.y}
                        stroke="var(--violet)" strokeWidth={0.8 + ld * 2.4}
                        strokeOpacity={0.16 + ld * 0.5} strokeDasharray="3 4" />
                  );
                }))}
                {/* atlas -> sparks */}
                {sparks.map((s, i) => {
                  const load = linkLoad(s.id);
                  return (
                    <g key={`a-${i}`}>
                      <line x1={ATL.x} y1={ATL.y} x2={s.x} y2={s.y}
                            stroke="var(--accent)" strokeWidth={1 + load * 2.5} strokeOpacity={0.18 + load * 0.4} />
                      {/* packet pulse */}
                      <circle r="2.5" fill="var(--accent)">
                        <animateMotion dur={`${(3 - load * 1.8).toFixed(1)}s`} repeatCount="indefinite"
                                       path={`M${ATL.x},${ATL.y} L${s.x},${s.y}`} />
                      </circle>
                      <circle r="2" fill="var(--violet)">
                        <animateMotion dur={`${(2.4 - load * 1.6).toFixed(1)}s`} repeatCount="indefinite" begin="1s"
                                       path={`M${s.x},${s.y} L${ATL.x},${ATL.y}`} />
                      </circle>
                    </g>
                  );
                })}
                {/* atlas node */}
                <NodeBlob x={ATL.x} y={ATL.y} label={GW.name.toUpperCase() + " · " + (GW.gpu && GW.gpu.name ? GW.gpu.name.split(" ").slice(-2).join(" ") : "")} sub={GW.ip} color="var(--accent)" util={(_live.nodes[GW.id]||{}).gpu?.now || 0} />
                {sparks.map((s) => (
                  <NodeBlob key={s.id} x={s.x} y={s.y}
                            label={s.label.toUpperCase() + " · DGX SPARK"}
                            sub={_NODES.find((n) => n.id === s.id).ip}
                            color="var(--violet)"
                            util={_live.nodes[s.id].gpu.now} />
                ))}
              </svg>
            )}
          </div>
          <div style={{ padding: "0 22px 22px", display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-3)" }}>
            <span><span style={{ display: "inline-block", width: 22, height: 1, background: "var(--accent)", verticalAlign: "middle", marginRight: 6 }} />North-South · 10 GbE</span>
            <span><span style={{ display: "inline-block", width: 22, borderTop: "1px dashed var(--violet)", verticalAlign: "middle", marginRight: 6 }} />{t("East-West · 200 GbE ConnectX-7 RDMA (live)")}</span>
            <span>{t("North-South pulse ∝ real network throughput")}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function NodeBlob({ x, y, label, sub, color, util }) {
  const r = 24;
  return (
    <g>
      <circle cx={x} cy={y} r={r + 8} fill={color} opacity="0.08">
        <animate attributeName="r" values={`${r + 4};${r + 14};${r + 4}`} dur="3s" repeatCount="indefinite" />
      </circle>
      <circle cx={x} cy={y} r={r} fill="var(--bg-1)" stroke={color} strokeWidth="1" />
      <circle cx={x} cy={y} r={r - 4} fill="none" stroke={color} strokeWidth="2"
              strokeDasharray={`${2 * Math.PI * (r-4) * util/100} ${2 * Math.PI * (r-4)}`}
              transform={`rotate(-90 ${x} ${y})`} />
      <text x={x} y={y - 2} textAnchor="middle" style={{ font: "600 11px var(--mono)", fill: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>
        {util.toFixed(0)}%
      </text>
      <text x={x} y={y + r + 18} textAnchor="middle" style={{ font: "600 10px var(--mono)", fill: "var(--ink-2)", letterSpacing: ".06em" }}>
        {label}
      </text>
      <text x={x} y={y + r + 32} textAnchor="middle" style={{ font: "500 9.5px var(--mono)", fill: "var(--ink-4)" }}>
        {sub}
      </text>
    </g>
  );
}

// ── COMMAND PALETTE ────────────────────────────────────────────────────
function CmdK({ open, onClose }) {
  const { t } = useLang();
  const [q, setQ] = useState("");
  const [idx, setIdx] = useState(0);
  const items = useMemo(() => {
    const xs = [
      ..._NODES.map((n) => ({ kind: "node", label: n.name, sub: `${n.class} · ${n.ip}`, href: "#nodes" })),
      ..._MODELS.map((m) => ({ kind: "model", label: m.display, sub: `${m.framework} · ${m.params} · ${m.state}`, href: "#models" })),
      { kind: "view", label: "Overview", sub: "Section · top of page", href: "#overview" },
      { kind: "view", label: "Cluster", sub: "Section · aggregate telemetry", href: "#cluster" },
      { kind: "view", label: "Nodes", sub: t("Section · {n} machines", { n: _NODES.length }), href: "#nodes" },
      { kind: "view", label: "Models", sub: "Section · LiteLLM gateway", href: "#models" },
      { kind: "view", label: "Telemetry", sub: "Section · alerts & log stream", href: "#telemetry" },
      { kind: "view", label: "Fabric", sub: "Section · network topology", href: "#fabric" },
    ];
    if (!q.trim()) return xs;
    const qq = q.toLowerCase();
    return xs.filter((x) => x.label.toLowerCase().includes(qq) || x.sub.toLowerCase().includes(qq));
  }, [q]);
  useEffect(() => { setIdx(0); }, [q]);
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, items.length - 1)); }
      else if (e.key === "ArrowUp")   { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
      else if (e.key === "Enter")     { const it = items[idx]; if (it) { window.location.hash = it.href; onClose(); } }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, items, idx, onClose]);

  if (!open) return null;
  return (
    <div className="cmdk-wrap" onClick={onClose}>
      <div className="cmdk" onClick={(e) => e.stopPropagation()}>
        <input autoFocus placeholder={t("Search nodes, models, sections…")}
               value={q} onChange={(e) => setQ(e.target.value)} />
        <div style={{ maxHeight: 360, overflowY: "auto" }}>
          {items.slice(0, 8).map((it, i) => (
            <div key={i} className="cmdk-item" data-on={i === idx ? "1" : "0"}
                 onMouseEnter={() => setIdx(i)}
                 onClick={() => { window.location.hash = it.href; onClose(); }}>
              <div>
                <div style={{ color: "var(--ink)", fontWeight: 500 }}>{t(it.label)}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-3)", marginTop: 2 }}>{t(it.sub)}</div>
              </div>
              <span className="meta">{it.kind}</span>
            </div>
          ))}
          {items.length === 0 && (
            <div style={{ padding: 22, color: "var(--ink-3)", fontFamily: "var(--mono)", fontSize: 12 }}>{t("No results")}</div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NodesSection, NodeDetail, ModelsSection, TelemetrySection, FabricSection, CmdK });