clawmates/frontend/src/components/dashboard/MissionLiveEvents.tsx

"use client";

// Live event stream for a mission — subscribes to every ACTIVE
// topology_run bound to this mission via /api/topology-runs/{id}/events
// (SSE, resumes on Last-Event-ID). Renders as a chronological scrolling
// feed with per-run color coding + event kind pills.
//
// The list of runs itself is fetched from /api/missions/{id}/runs and
// re-polled every 5s while any run is running, so newly-spawned runs
// (a coding phase kicking off after research completes) automatically
// attach without a page reload.

import { useEffect, useMemo, useRef, useState } from "react";

import { listMissionRuns, type MissionRunSummary } from "@/lib/api/missions";

const mono =
  "ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace";

interface FeedItem {
  key: number;
  runId: string;
  ts: string;
  kind: string;
  text: string;
}

export function MissionLiveEvents({
  missionId,
  visible,
}: {
  missionId: string;
  visible: boolean;
}) {
  const [runs, setRuns] = useState<MissionRunSummary[]>([]);
  const [feed, setFeed] = useState<FeedItem[]>([]);
  const [error, setError] = useState<string | null>(null);
  const seq = useRef(0);
  const scrollRef = useRef<HTMLDivElement | null>(null);

  // Poll the run list every 5s while there's any activity — cheap and
  // lets a newly-enqueued run auto-attach without a manual refresh.
  useEffect(() => {
    let alive = true;
    const load = async () => {
      try {
        const r = await listMissionRuns(missionId);
        if (alive) setRuns(r.runs);
      } catch (e) {
        if (alive) setError(e instanceof Error ? e.message : "runs load failed");
      }
    };
    void load();
    const t = setInterval(load, 5000);
    return () => {
      alive = false;
      clearInterval(t);
    };
  }, [missionId]);

  // Deduped set of run ids to open SSE on. We watch every run, not
  // just running ones — that way a run that flips to completed while
  // this tab was closed still replays its checkpoint records.
  const runIds = useMemo(
    () =>
      runs
        .filter((r) => r.status === "running" || r.status === "queued")
        .map((r) => r.id),
    [runs],
  );

  // Open one EventSource per active run. React re-runs this effect
  // whenever runIds changes; the cleanup closes stale connections.
  useEffect(() => {
    if (!visible) return;
    const sources: EventSource[] = [];
    for (const rid of runIds) {
      const es = new EventSource(`/api/topology-runs/${rid}/events`);
      const push = (kind: string, text: string) => {
        seq.current += 1;
        setFeed((prev) =>
          [
            ...prev,
            {
              key: seq.current,
              runId: rid,
              ts: new Date().toISOString(),
              kind,
              text,
            },
          ].slice(-400),
        );
      };
      es.addEventListener("step", (ev) => {
        try {
          const data = JSON.parse((ev as MessageEvent<string>).data ?? "{}");
          const kind = String(data.kind ?? data.step_type ?? "step");
          const text =
            data.summary ??
            data.text ??
            data.tool ??
            data.node ??
            JSON.stringify(data).slice(0, 200);
          push(kind, String(text));
        } catch {
          push("step", (ev as MessageEvent<string>).data ?? "");
        }
      });
      es.addEventListener("done", (ev) => {
        try {
          const data = JSON.parse((ev as MessageEvent<string>).data ?? "{}");
          push(
            data.status === "failed" ? "failed" : "done",
            String(data.error ?? data.final_output ?? data.status ?? "done"),
          );
        } catch {
          push("done", (ev as MessageEvent<string>).data ?? "");
        }
        es.close();
      });
      es.onerror = () => {
        // Retry-on-error is built into EventSource; log-and-continue
        // is what we want unless the run is terminal — in which case
        // 'done' already closed above.
      };
      sources.push(es);
    }
    return () => {
      for (const es of sources) es.close();
    };
  }, [runIds, visible]);

  // Auto-scroll to bottom on new events (unless the operator scrolled up).
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
    if (nearBottom) el.scrollTop = el.scrollHeight;
  }, [feed.length]);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10, height: "70vh" }}>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 10,
          fontFamily: mono,
          fontSize: 10,
          letterSpacing: ".14em",
          color: "#7cd6e0",
          textTransform: "uppercase",
        }}
      >
        <span>Live events</span>
        <span style={{ color: "#8a8a92" }}>
          · {runs.length} run{runs.length === 1 ? "" : "s"} · {runIds.length}{" "}
          active
        </span>
        {error && <span style={{ color: "#ff8a7a" }}>{error}</span>}
      </div>
      {runs.length === 0 ? (
        <div style={{ padding: 24, color: "#8a8a92", fontSize: 13 }}>
          No runs yet. Runs appear here once phases start executing.
        </div>
      ) : (
        <div
          ref={scrollRef}
          style={{
            flex: 1,
            minHeight: 0,
            overflowY: "auto",
            padding: 12,
            background: "#0a0a0d",
            border: "1px solid rgba(255,255,255,.06)",
            borderRadius: 10,
            display: "flex",
            flexDirection: "column",
            gap: 4,
            fontFamily: mono,
            fontSize: 11,
          }}
        >
          {feed.length === 0 ? (
            <div style={{ color: "#6a6a72", fontSize: 12 }}>
              Waiting for events…
            </div>
          ) : (
            feed.map((f) => (
              <div key={f.key} style={{ display: "flex", gap: 8 }}>
                <span style={{ color: "#6a6a72", flex: "none", width: 62 }}>
                  {f.ts.slice(11, 19)}
                </span>
                <span
                  style={{
                    color:
                      f.kind === "failed"
                        ? "#ff8a7a"
                        : f.kind === "done"
                          ? "#5fd08a"
                          : "#c9a0ff",
                    flex: "none",
                    width: 90,
                    textTransform: "uppercase",
                    letterSpacing: ".06em",
                    fontSize: 10,
                  }}
                >
                  {f.kind}
                </span>
                <span
                  style={{
                    color: "#6a6a72",
                    flex: "none",
                    width: 78,
                    fontSize: 10,
                  }}
                  title={f.runId}
                >
                  {f.runId.slice(0, 8)}
                </span>
                <span
                  style={{
                    color: "#cfcfd5",
                    flex: 1,
                    whiteSpace: "pre-wrap",
                    wordBreak: "break-word",
                  }}
                >
                  {f.text}
                </span>
              </div>
            ))
          )}
        </div>
      )}
    </div>
  );
}