vantage/site/components/InstrumentPanel.tsx

"use client";

import { useEffect, useState } from "react";

/*
 * The hero's signature element: a fleet panel that plays one honest cycle of
 * what the product actually does — a workflow runs three steps, a TLS monitor
 * fails and opens an incident, a key revocation lands — then rests. It is a
 * dramatisation, not live data, so nothing here talks to an API.
 */

type LogLine = { time: string; body: React.ReactNode };

type Beat = {
  at: number;
  line: LogLine;
  effect?: "incident" | "runDone" | "revoked";
};

const BEATS: Beat[] = [
  { at: 600, line: { time: "14:22:02", body: "running · step 1/3 · pull image" } },
  { at: 1500, line: { time: "14:22:04", body: "running · step 2/3 · migrate database" } },
  {
    at: 2600,
    line: { time: "14:22:07", body: <><span className="ok">ok</span> · migrate database · exit 0</> },
  },
  {
    at: 3400,
    line: { time: "14:22:08", body: "running · step 3/3 · restart service" },
    effect: "incident",
  },
  {
    at: 4300,
    line: { time: "14:22:10", body: <><span className="er">monitor</span> · edge-gw-02 tls · connection refused</> },
  },
  {
    at: 5200,
    line: { time: "14:22:11", body: <><span className="ok">ok</span> · restart service · exit 0</> },
    effect: "runDone",
  },
  {
    at: 6000,
    line: { time: "14:22:12", body: <>run finished · <span className="ok">success</span> · 3 steps · 1 server</> },
    effect: "revoked",
  },
];

const FIRST_LINE: LogLine = { time: "14:22:01", body: "queued · deploy-app · 1 server" };
const MAX_LINES = 7;

export function InstrumentPanel() {
  const [lines, setLines] = useState<LogLine[]>([FIRST_LINE]);
  const [incident, setIncident] = useState(false);
  const [runActive, setRunActive] = useState(true);
  const [revoked, setRevoked] = useState(false);
  const [resting, setResting] = useState(false);

  useEffect(() => {
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    const apply = (effect: Beat["effect"]) => {
      if (effect === "incident") setIncident(true);
      if (effect === "runDone") setRunActive(false);
      if (effect === "revoked") setRevoked(true);
    };

    
    if (reduced) {
      setLines([FIRST_LINE, ...BEATS.map((b) => b.line)].slice(-MAX_LINES));
      BEATS.forEach((b) => apply(b.effect));
      setResting(true);
      return;
    }

    const timers = BEATS.map((beat) =>
      window.setTimeout(() => {
        setLines((prev) => [...prev, beat.line].slice(-MAX_LINES));
        apply(beat.effect);
      }, beat.at)
    );
    timers.push(window.setTimeout(() => setResting(true), 6600));

    return () => timers.forEach(window.clearTimeout);
  }, []);

  return (
    <div className="instrument">
      <div className="rail">
        <div className="instrument__bar">
          <span>
            <b>northgate</b> · fleet
          </span>
          <span>12 servers</span>
          <span>{incident ? "10 up" : "11 up"}</span>
          <span>{incident ? "2 down" : "1 down"}</span>
          <span>3 monitors</span>
          <span>{runActive ? "1 run active" : "no runs active"}</span>
          <span className="instrument__clock">14:22:12 UTC</span>
        </div>

        <div className="panes">
          <section className="pane" aria-label="Fleet status">
            <h2 className="pane__h">
              Fleet <span>{revoked ? "key revoked · 1 server updated" : "agents polling"}</span>
            </h2>

            <Row host="proxmox-node-1" sub="4 keys · 12% cpu" state="up" label="Active" />
            <Row host="db-primary" sub="3 keys · 61% cpu" state="up" label="Active" />
            <Row
              host="edge-gw-02"
              sub={incident ? "2 keys · tls refused" : "2 keys · tls 41d"}
              state={incident ? "down" : "up"}
              label={incident ? "Incident" : "Active"}
            />
            <Row host="win-build-01" sub="agent 1.4.1 · update ready" state="pend" label="Pending" />
            <Row
              host="app-worker-03"
              sub={revoked ? "4 keys · 1 revoked" : "5 keys · idle"}
              state="up"
              label="Active"
            />
          </section>

          <section className="pane" aria-label="Workflow run">
            <h2 className="pane__h">
              Run <span>run_8f31c2</span>
            </h2>
            <div className="stream" aria-live="polite">
              {lines.map((line, i) => (
                <div key={`${line.time}-${i}`}>
                  <span className="t">{line.time}</span> {line.body}
                </div>
              ))}
              {resting && (
                <div>
                  <span className="caret">_</span>
                </div>
              )}
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}

function Row({
  host,
  sub,
  state,
  label,
}: {
  host: string;
  sub: string;
  state: "up" | "down" | "pend";
  label: string;
}) {
  return (
    <div className="frow">
      <span className={state === "up" ? "dot" : `dot dot--${state}`} />
      <span className="frow__host">{host}</span>
      <span className="frow__sub">{sub}</span>
      <span className={`chip chip--${state}`}>{label}</span>
    </div>
  );
}