@hugpy/video-intelligence-ui 0.1.0 → 0.3.0

package/src/video/useToks.ts

@@ -0,0 +1,193 @@
+// LIVE tok/s telemetry for the generate workbench's Toks panel. Polls TWO
+// same-origin `/api` endpoints together every 2s, MOUNT-GATED exactly like
+// `useMediaJobs` (mount → immediate fetch + 2s interval; unmount → interval
+// cleared and a mounted-ref flipped so a late response never setStates). A fetch
+// error keeps the last-good data rather than flashing empty, and every field is
+// guarded — the server side is being built in parallel, so missing/extra fields
+// must never throw.
+//
+//   • GET /api/llm/toks/recent?limit=100 → { entries:[{ ts, worker_id,
+//     worker_name, model_key, tok_s, ttft_s, completion_tokens, config_key, ok }] }
+//     newest-first — the live tail + the per-worker strip.
+//   • GET /api/llm/toks/report → { groups:[{ worker_name, model_key, config_key,
+//     n, mean_tok_s, p50_tok_s, p95_tok_s }] } sorted best mean first — the
+//     best-config leaderboard.
+import { useCallback, useEffect, useRef, useState } from "react";
+import { hugpyConfig } from "../config";
+import { request, okValue } from "../transport/client";
+
+const POLL_MS = 2000;
+const RECENT_LIMIT = 100;
+
+/** One recent inference sample (omit-when-unset tolerated on the wire). */
+export interface TokEntry {
+  ts: number | null; // epoch seconds when the sample was recorded
+  workerId: string | null;
+  workerName: string | null;
+  modelKey: string | null;
+  tokS: number | null; // tokens/second
+  ttftS: number | null; // time-to-first-token, seconds
+  completionTokens: number | null;
+  configKey: string | null;
+  ok: boolean | null;
+}
+
+/** One best-config rollup row from /report. */
+export interface TokGroup {
+  workerName: string | null;
+  modelKey: string | null;
+  configKey: string | null;
+  n: number | null;
+  meanTokS: number | null;
+  p50TokS: number | null;
+  p95TokS: number | null;
+}
+
+function str(v: unknown): string | null {
+  return typeof v === "string" && v.trim() ? v : null;
+}
+function num(v: unknown): number | null {
+  return typeof v === "number" && isFinite(v) ? v : null;
+}
+function bool(v: unknown): boolean | null {
+  return typeof v === "boolean" ? v : null;
+}
+
+function parseEntries(raw: unknown): TokEntry[] {
+  const entries = (raw as { entries?: unknown } | null)?.entries;
+  if (!Array.isArray(entries)) return [];
+  const out: TokEntry[] = [];
+  for (const e of entries) {
+    if (!e || typeof e !== "object") continue;
+    const r = e as Record<string, unknown>;
+    out.push({
+      ts: num(r.ts),
+      workerId: str(r.worker_id),
+      workerName: str(r.worker_name),
+      modelKey: str(r.model_key),
+      tokS: num(r.tok_s),
+      ttftS: num(r.ttft_s),
+      completionTokens: num(r.completion_tokens),
+      configKey: str(r.config_key),
+      ok: bool(r.ok),
+    });
+  }
+  return out;
+}
+
+function parseGroups(raw: unknown): TokGroup[] {
+  const groups = (raw as { groups?: unknown } | null)?.groups;
+  if (!Array.isArray(groups)) return [];
+  const out: TokGroup[] = [];
+  for (const g of groups) {
+    if (!g || typeof g !== "object") continue;
+    const r = g as Record<string, unknown>;
+    out.push({
+      workerName: str(r.worker_name),
+      modelKey: str(r.model_key),
+      configKey: str(r.config_key),
+      n: num(r.n),
+      meanTokS: num(r.mean_tok_s),
+      p50TokS: num(r.p50_tok_s),
+      p95TokS: num(r.p95_tok_s),
+    });
+  }
+  return out;
+}
+
+/**
+ * The live tok/s feed: recent samples (newest-first) + the best-config report,
+ * refreshed together every 2s while a consumer is mounted. `live` reports whether
+ * the last poll cycle succeeded, so the panel can show a live/paused dot.
+ */
+export function useToks(): {
+  entries: TokEntry[];
+  groups: TokGroup[];
+  live: boolean;
+} {
+  const [entries, setEntries] = useState<TokEntry[]>([]);
+  const [groups, setGroups] = useState<TokGroup[]>([]);
+  const [live, setLive] = useState(false);
+  const mounted = useRef(true);
+
+  const load = useCallback(async () => {
+    // Both endpoints in parallel; each is independent, so one failing keeps the
+    // other's last-good data instead of blanking the whole panel.
+    const [recent, report] = await Promise.all([
+      request<unknown>(`${hugpyConfig.toksRecentUrl}?limit=${RECENT_LIMIT}`, {
+        meta: { specKey: "llm", operation: "llm.toks.recent" },
+      }),
+      request<unknown>(hugpyConfig.toksReportUrl, {
+        meta: { specKey: "llm", operation: "llm.toks.report" },
+      }),
+    ]);
+    if (!mounted.current) return;
+    if (recent.ok) setEntries(parseEntries(okValue(recent)));
+    if (report.ok) setGroups(parseGroups(okValue(report)));
+    setLive(recent.ok || report.ok);
+  }, []);
+
+  useEffect(() => {
+    mounted.current = true;
+    void load();
+    const id = window.setInterval(() => void load(), POLL_MS);
+    return () => {
+      mounted.current = false;
+      window.clearInterval(id);
+    };
+  }, [load]);
+
+  return { entries, groups, live };
+}
+
+/** The poll cadence, exported so the panel header can label it ("every 2s"). */
+export const TOKS_POLL_MS = POLL_MS;
+
+/** "12s ago" / "3m ago" from an epoch-seconds ts, "" when unknown. */
+export function tokAgo(ts: number | null, nowMs: number): string {
+  if (ts == null) return "";
+  const secs = Math.max(0, Math.floor(nowMs / 1000 - ts));
+  if (secs < 60) return `${secs}s ago`;
+  if (secs < 3600) return `${Math.floor(secs / 60)}m ago`;
+  return `${Math.floor(secs / 3600)}h ago`;
+}
+
+/** Group recent entries by worker → { last tok/s, avg tok/s over the window }. */
+export interface WorkerRollup {
+  workerId: string;
+  workerName: string;
+  modelKey: string | null;
+  lastTokS: number | null;
+  avgTokS: number | null;
+  n: number;
+}
+
+export function rollupByWorker(entries: TokEntry[]): WorkerRollup[] {
+  const byWorker = new Map<string, TokEntry[]>();
+  for (const e of entries) {
+    const key = e.workerId ?? e.workerName;
+    if (!key) continue;
+    const list = byWorker.get(key);
+    if (list) list.push(e);
+    else byWorker.set(key, [e]);
+  }
+  const out: WorkerRollup[] = [];
+  for (const [key, list] of byWorker) {
+    // Entries arrive newest-first, so the first tok_s we see is the latest.
+    const samples = list.map((e) => e.tokS).filter((v): v is number => v != null);
+    const avg =
+      samples.length > 0
+        ? samples.reduce((a, b) => a + b, 0) / samples.length
+        : null;
+    const first = list[0];
+    out.push({
+      workerId: key,
+      workerName: first?.workerName ?? key,
+      modelKey: first?.modelKey ?? null,
+      lastTokS: samples.length > 0 ? samples[0] : null,
+      avgTokS: avg,
+      n: list.length,
+    });
+  }
+  return out;
+}

package/src/stations/ActiveProcessesStation.tsx.bak-sessions-20260812

@@ -1,228 +0,0 @@
-// ACTIVE PROCESSES — the console-wide, placement-aware view of every in-flight
-// media-bus job (studio / movie / identity / generate / crop / extract), fed by
-// GET /video/jobs. Promotes the studio-only StudioActiveProcesses pattern to the
-// whole console and adds the two things that were invisible before:
-//
-//   • WHERE a job physically executes — the `placement` line ("ae · cuda:0 ·
-//     P-studio"), with an "external" cue when it runs OFF the central box (an ae
-//     worker, ComfyUI, or the identity-render service on :9750), plus reserved
-//     VRAM when a GPU reservation is held.
-//   • The reservation HOLD phase — a job that can't fit the card yet sits as
-//     `awaiting_capacity` (with the shortfall reason on hover + the overtaken
-//     count), not a fake "running".
-//   • WHAT it is doing right now — a moving progress bar (segments done plus the
-//     within-segment denoise fraction the runner reports) and the TAIL of the job's
-//     stage timeline, so a running render shows its last few events instead of an
-//     opaque "running" chip.
-//   • WHY it broke — a terminal-failed job renders its failure envelope VERBATIM
-//     (code + message + the stage it died in), never a generic "failed". Terminal
-//     rows arrive only with the "Show finished" filter on.
-//
-// HONEST rendering only: no fabricated progress bars — a numeric progress/stage
-// shows only when the server sends one. Cancel hits the same /video/jobs/<id>/
-// cancel seam every station uses; a held job cancels exactly like any queued job.
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { StationSpec } from "./types";
-import { request } from "../transport/client";
-import { jobCancelUrl } from "../config";
-import { ProcessTimeline, shortId } from "./studio/studioShared";
-import {
-  useMediaJobs,
-  placementLine,
-  isExternal,
-  reservedGib,
-  elapsedSince,
-  progressLabel,
-  latestEvent,
-  type MediaJob,
-} from "../video/useMediaJobs";
-
-function PhaseChip({ job }: { job: MediaJob }) {
-  if (job.phase === "awaiting_capacity") {
-    const reason = job.hold?.reason ? JSON.stringify(job.hold.reason) : "";
-    const overtaken = job.hold?.overtaken ?? 0;
-    return (
-      <span
-        className="vi-status vi-status-awaiting_capacity"
-        title={
-          reason
-            ? `Held — waiting for GPU capacity. Shortfall: ${reason}`
-            : "Held — waiting for GPU capacity"
-        }
-      >
-        awaiting capacity{overtaken > 0 ? ` · jumped ${overtaken}×` : ""}
-      </span>
-    );
-  }
-  return <span className={`vi-status vi-status-${job.phase}`}>{job.phase}</span>;
-}
-
-/** The bar + its honest label. Renders nothing when the server sent no number. */
-function ProgressBar({ job }: { job: MediaJob }) {
-  if (job.progress == null) return null;
-  const pct = Math.max(0, Math.min(100, job.progress * 100));
-  return (
-    <div className="vi-job-progress">
-      <div className="vi-job-progress-track">
-        <div className="vi-job-progress-fill" style={{ width: `${pct}%` }} />
-      </div>
-      <span className="vi-job-progress-label">{progressLabel(job)}</span>
-    </div>
-  );
-}
-
-// `spec` is optional because this body has TWO mounts: the registry's /active
-// station (which always passes one) and the sidebar's ActivePanel overlay
-// (2026-08-06), which mounts it inside the shared drawer shell and has no spec
-// to hand it. The prop was already unused here, so optional costs nothing and
-// keeps ONE renderer for the feed instead of an overlay-only copy.
-export function ActiveProcessesStation({ spec: _spec }: { spec?: StationSpec } = {}) {
-  const [showFinished, setShowFinished] = useState(false);
-  const { jobs, refetch } = useMediaJobs(showFinished);
-  // Expanded rows + a 1s clock, exactly as the studio tab's sibling panel does —
-  // ProcessTimeline needs `nowMs` to age its "…since last movement" line.
-  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-  const [nowMs, setNowMs] = useState(() => Date.now());
-  useEffect(() => {
-    const id = window.setInterval(() => setNowMs(Date.now()), 1000);
-    return () => window.clearInterval(id);
-  }, []);
-  const toggle = useCallback((id: string) => {
-    setExpanded((prev) => {
-      const n = new Set(prev);
-      if (n.has(id)) n.delete(id);
-      else n.add(id);
-      return n;
-    });
-  }, []);
-  const [cancelBusy, setCancelBusy] = useState<Set<string>>(new Set());
-  const mounted = useRef(true);
-
-  const onCancel = useCallback(
-    async (jobId: string) => {
-      setCancelBusy((prev) => new Set(prev).add(jobId));
-      try {
-        await request<unknown>(jobCancelUrl(jobId), {
-          method: "POST",
-          meta: { specKey: "media", operation: "media.job.cancel" },
-        });
-        if (!mounted.current) return;
-        refetch();
-      } finally {
-        if (mounted.current)
-          setCancelBusy((prev) => {
-            const n = new Set(prev);
-            n.delete(jobId);
-            return n;
-          });
-      }
-    },
-    [refetch],
-  );
-
-  return (
-    <section className="station-card station-wide vi-studio-active">
-      <h2>Active Processes</h2>
-      <p className="vi-knob-hint">
-        Every in-flight media build across the console, and WHERE it physically runs.
-        A build marked <strong>external</strong> is executing off this box — on the{" "}
-        ae worker, ComfyUI, or the identity-render service.
-      </p>
-      <label className="vi-knob-hint vi-job-filter">
-        <input
-          type="checkbox"
-          checked={showFinished}
-          onChange={(e) => setShowFinished(e.target.checked)}
-        />{" "}
-        Show finished — recent done/failed/cancelled builds, with each failure&apos;s
-        full stage timeline and its exact error.
-      </label>
-      {jobs.length === 0 ? (
-        <p className="vi-knob-hint">
-          No active builds — enqueue a render and it appears here with its placement.
-        </p>
-      ) : (
-        <ul className="vi-studio-active-list">
-          {jobs.map((j) => {
-            const line = placementLine(j.placement);
-            const gib = reservedGib(j.placement);
-            const external = isExternal(j.placement);
-            const isOpen = expanded.has(j.id);
-            const elided = j.stageLogTotal - j.stageLog.length;
-            const event = latestEvent(j);
-            return (
-              <li key={j.id} className="vi-studio-active-row">
-                <div className="vi-studio-active-head">
-                  <button
-                    type="button"
-                    className="vi-timeline-toggle"
-                    onClick={() => toggle(j.id)}
-                    aria-expanded={isOpen}
-                    title={isOpen ? "Hide detail" : "Show what it's doing"}
-                  >
-                    <span className="vi-timeline-caret" aria-hidden>
-                      {isOpen ? "▾" : "▸"}
-                    </span>
-                  </button>
-                  <PhaseChip job={j} />
-                  <span className="vi-studio-active-id">
-                    {j.name || "job"} · {shortId(j.id)}
-                  </span>
-                </div>
-                <div className="vi-studio-active-meta">
-                  {line ? (
-                    <span
-                      className={`vi-placement${external ? " vi-placement-external" : ""}`}
-                      title={external ? "Runs off the central box" : undefined}
-                    >
-                      {external ? "⇄ " : ""}
-                      {line}
-                      {external ? " · external" : ""}
-                    </span>
-                  ) : null}
-                  {gib ? <span>· {gib}</span> : null}
-                  {j.stage ? <span>· {j.stage}</span> : null}
-                  <span>· {elapsedSince(j.createdAt)}</span>
-                </div>
-                <ProgressBar job={j} />
-                {event ? <p className="vi-job-latest">{event}</p> : null}
-                {isOpen ? (
-                  <div className="vi-timeline-panel">
-                    {/* The SAME renderer the studio tab uses: the failure envelope
-                        verbatim (code · stage · message), the live "now" line, and
-                        every stage the render moved through. A live row carries a
-                        tail; a terminal one carries the whole sequence. */}
-                    <ProcessTimeline
-                      stageLog={j.stageLog}
-                      failure={j.failure}
-                      currentStage={j.stage}
-                      lastMovementTs={j.progressedAt}
-                      terminal={j.terminal}
-                      nowMs={nowMs}
-                    />
-                    {elided > 0 ? (
-                      <p className="vi-knob-hint">
-                        …{elided} earlier event{elided === 1 ? "" : "s"} — open the
-                        job for its full history.
-                      </p>
-                    ) : null}
-                  </div>
-                ) : null}
-                {j.terminal ? null : (
-                  <button
-                    type="button"
-                    className="vi-btn vi-btn-sm vi-btn-ghost"
-                    onClick={() => void onCancel(j.id)}
-                    disabled={cancelBusy.has(j.id)}
-                  >
-                    {cancelBusy.has(j.id) ? "Cancelling…" : "✕ Cancel"}
-                  </button>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      )}
-    </section>
-  );
-}