@hugpy/video-intelligence-ui 0.1.0 → 0.3.0

package/src/stations/ToksPanel.tsx

@@ -0,0 +1,188 @@
+// ToksPanel — the LIVE "tok/s" overview for the generate workbench, contributed
+// as ONE TAB to the unified drawer (drawerShell.tsx → WorkbenchDrawer.tsx), the
+// same window as Console / ComfyUI / Active and framed with the same
+// `.vi-active-panel-body` chrome. It mirrors ActivePanel: a real component whose
+// MOUNT starts the poll, so `keepMounted: false` IS the pause — the 2s cadence
+// runs exactly when the operator is looking at this tab (see ActivePanel's note).
+//
+// Three compact sections, all fed by `useToks` (two same-origin `/api` endpoints
+// polled together every 2s, error-tolerant, mount-gated):
+//   1. Live tail        — the last ~25 recent samples, newest on top.
+//   2. Per-worker strip  — recent grouped by worker → last tok/s + window avg.
+//   3. Best-config board — /report's top ~10, best mean first.
+// Every field is guarded: the server side is being built in parallel, so a
+// missing number renders as "—", never a crash.
+import { useEffect, useState } from "react";
+import type { DrawerTab } from "./drawerShell";
+import {
+  useToks,
+  rollupByWorker,
+  tokAgo,
+  TOKS_POLL_MS,
+  type TokEntry,
+  type TokGroup,
+} from "../video/useToks";
+
+const TAIL_LIMIT = 25;
+const BOARD_LIMIT = 10;
+
+/** A number to N decimals, or "—" when the server sent nothing honest. */
+function fmt(v: number | null | undefined, digits = 1): string {
+  return typeof v === "number" && isFinite(v) ? v.toFixed(digits) : "—";
+}
+
+/** The ok/err badge for one sample (null ok → no badge, we just don't know). */
+function OkBadge({ ok }: { ok: boolean | null }) {
+  if (ok == null) return null;
+  return (
+    <span
+      className={`vi-assistlog-badge ${ok ? "vi-assistlog-badge--ok" : "vi-assistlog-badge--err"}`}
+      title={ok ? "completed ok" : "errored"}
+    >
+      {ok ? "ok" : "err"}
+    </span>
+  );
+}
+
+function LiveTail({ entries, nowMs }: { entries: TokEntry[]; nowMs: number }) {
+  const tail = entries.slice(0, TAIL_LIMIT);
+  return (
+    <div>
+      <h3 className="vi-toks-heading">Live tail</h3>
+      {tail.length === 0 ? (
+        <p className="vi-knob-hint">No samples yet — run an inference and it lands here.</p>
+      ) : (
+        <ul className="vi-assistlog-list vi-toks-list">
+          {tail.map((e, i) => (
+            <li
+              key={`${e.workerId ?? "?"}-${e.ts ?? i}-${i}`}
+              className="vi-assistlog-row vi-toks-row"
+            >
+              <span className="vi-toks-tok">{fmt(e.tokS)}<span className="vi-knob-hint"> tok/s</span></span>
+              <span className="vi-toks-model" title={e.modelKey ?? undefined}>
+                {e.modelKey ?? "—"}
+              </span>
+              <span className="vi-knob-hint vi-toks-worker">{e.workerName ?? e.workerId ?? "—"}</span>
+              <span className="vi-knob-hint">ttft {fmt(e.ttftS, 2)}s</span>
+              <span className="vi-knob-hint">{e.completionTokens ?? "—"} tok</span>
+              {e.configKey ? <span className="vi-assistlog-chip">{e.configKey}</span> : null}
+              <OkBadge ok={e.ok} />
+              <span className="vi-knob-hint vi-toks-ago">{tokAgo(e.ts, nowMs)}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function WorkerStrip({ entries }: { entries: TokEntry[] }) {
+  const rows = rollupByWorker(entries);
+  return (
+    <div>
+      <h3 className="vi-toks-heading">Per-worker</h3>
+      {rows.length === 0 ? (
+        <p className="vi-knob-hint">No workers reporting.</p>
+      ) : (
+        <div className="vi-toks-strip">
+          {rows.map((w) => (
+            <div key={w.workerId} className="vi-toks-worker-card">
+              <div className="vi-toks-worker-name" title={w.modelKey ?? undefined}>
+                {w.workerName}
+              </div>
+              <div className="vi-toks-worker-nums">
+                <span className="vi-toks-tok">{fmt(w.lastTokS)}</span>
+                <span className="vi-knob-hint"> now · avg {fmt(w.avgTokS)} · n{w.n}</span>
+              </div>
+              {w.modelKey ? <div className="vi-knob-hint vi-toks-worker-model">{w.modelKey}</div> : null}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Leaderboard({ groups }: { groups: TokGroup[] }) {
+  const top = groups.slice(0, BOARD_LIMIT);
+  return (
+    <div>
+      <h3 className="vi-toks-heading">Best config</h3>
+      {top.length === 0 ? (
+        <p className="vi-knob-hint">No rollup yet — the report fills in as samples accrue.</p>
+      ) : (
+        <ul className="vi-assistlog-list vi-toks-list">
+          {top.map((g, i) => (
+            <li
+              key={`${g.workerName ?? "?"}-${g.modelKey ?? "?"}-${g.configKey ?? i}`}
+              className="vi-assistlog-row vi-toks-row"
+            >
+              <span className="vi-knob-hint vi-toks-rank">#{i + 1}</span>
+              <span className="vi-toks-tok">{fmt(g.meanTokS)}<span className="vi-knob-hint"> mean</span></span>
+              <span className="vi-knob-hint">p50 {fmt(g.p50TokS)}</span>
+              <span className="vi-knob-hint">p95 {fmt(g.p95TokS)}</span>
+              <span className="vi-toks-model">{g.modelKey ?? "—"}</span>
+              <span className="vi-knob-hint vi-toks-worker">{g.workerName ?? "—"}</span>
+              {g.configKey ? <span className="vi-assistlog-chip">{g.configKey}</span> : null}
+              <span className="vi-knob-hint">n{g.n ?? "—"}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+/** The panel body — a station card with the three sections + a live header. */
+export function ToksStation() {
+  const { entries, groups, live } = useToks();
+  // A 1s clock so the "Ns ago" column ages between the 2s polls, exactly as the
+  // Active panel drives its ProcessTimeline.
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  useEffect(() => {
+    const id = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, []);
+
+  return (
+    <section className="station-card station-wide vi-toks-station">
+      <div className="vi-toks-header">
+        <h2>tok/s</h2>
+        <span className="vi-assistlog-conn vi-toks-cadence">
+          <span
+            className={`vi-assistlog-dot ${live ? "vi-assistlog-dot--live" : "vi-assistlog-dot--disconnected"}`}
+            aria-hidden
+          />
+          {live ? "live" : "paused"} · every {Math.round(TOKS_POLL_MS / 1000)}s
+        </span>
+      </div>
+      <p className="vi-knob-hint">
+        Live inference throughput across the LLM workers — the newest samples, a
+        per-worker last/avg strip, and the best-performing configs by mean tok/s.
+      </p>
+      <LiveTail entries={entries} nowMs={nowMs} />
+      <WorkerStrip entries={entries} />
+      <Leaderboard groups={groups} />
+    </section>
+  );
+}
+
+/** The tok/s tab in the unified drawer — mount starts the 2s poll, so
+ *  `keepMounted: false` is the pause (see ActivePanel's polling note). */
+export function toksDrawerTab(): DrawerTab<"toks"> {
+  return {
+    id: "toks",
+    label: "tok/s",
+    hint: "Open the live tok/s overview alongside this station — no tab switch",
+    toggleClassName: "vi-toks-toggle",
+    toggleLabel: "⚡ tok/s",
+    ariaLabel: "Live tokens-per-second overview",
+    panelClassName: "vi-toks-panel",
+    keepMounted: false, // mount IS the pause — same policy as the Active tab
+    body: (
+      <div className="vi-active-panel-body">
+        <ToksStation />
+      </div>
+    ),
+  };
+}

package/src/stations/WorkbenchDrawer.tsx

@@ -31,14 +31,15 @@
 import { useComfyDrawerTab } from "./ComfyPanel";
 import { consoleDrawerTab } from "./ConsolePanel";
 import { activeDrawerTab } from "./ActivePanel";
+import { toksDrawerTab } from "./ToksPanel";
 import { DrawerShell, useDrawerState, type LegacyDrawerKey } from "./drawerShell";
 
-type DrawerTabId = "console" | "comfy" | "active";
+type DrawerTabId = "console" | "comfy" | "active" | "toks";
 
 // Strip order = the order the panels arrived in (Console t52, ComfyUI 2026-08-04,
 // Active 2026-08-06), which is also the toolbar's existing left-to-right order —
 // so the tab strip and the deep-link row read the same way round.
-const TAB_IDS = ["console", "comfy", "active"] as const;
+const TAB_IDS = ["console", "comfy", "active", "toks"] as const;
 
 // ONE key now holds {open, size, tab}, replacing the three per-panel records.
 const STORAGE_KEY = "vi.workbench.drawer.v1";
@@ -58,7 +59,7 @@ export function WorkbenchDrawer() {
   // descriptors. All three are rebuilt every render — a descriptor is just JSX,
   // and an unselected tab's body element is only MOUNTED if the shell renders it.
   const comfy = useComfyDrawerTab();
-  const tabs = [consoleDrawerTab(), comfy, activeDrawerTab()];
+  const tabs = [consoleDrawerTab(), comfy, activeDrawerTab(), toksDrawerTab()];
 
   return (
     <DrawerShell state={drawer} tabs={tabs} tablistLabel="Overlay panels" />

package/src/stations/WorkbenchSidebar.tsx

@@ -1029,7 +1029,30 @@ function LibraryPanel({
   items: LibraryItem[];
   onGenerate: boolean;
 }) {
-  const works = useMemo(() => groupLibrary(items), [items]);
+  // TYPE SECTIONS (operator 2026-08-13): the library splits into Images and
+  // Videos (plus a rare Other for audio/unknown), each holding its work groups
+  // newest-first — groupLibrary already sorts both levels freshest-first, so
+  // the per-type ordering is "most recent on top" by construction.
+  const sections = useMemo(() => {
+    const imgs = items.filter((it) => it.ref.kind === "image");
+    const vids = items.filter((it) => it.ref.kind === "video");
+    const rest = items.filter((it) => it.ref.kind !== "image" && it.ref.kind !== "video");
+    return [
+      { id: "images", label: "🖼 Images", count: imgs.length, works: groupLibrary(imgs) },
+      { id: "videos", label: "🎞 Videos", count: vids.length, works: groupLibrary(vids) },
+      { id: "other", label: "📎 Other", count: rest.length, works: groupLibrary(rest) },
+    ].filter((sec) => sec.count > 0);
+  }, [items]);
+  // Both type sections start OPEN (hiding freshly-landed work behind a closed
+  // header is how "it never populates" reports happen); the caret remembers.
+  const [closedTypes, setClosedTypes] = useState<Set<string>>(() => new Set());
+  const toggleType = (id: string) =>
+    setClosedTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
   // Expand state keyed by work key — the established discipline (a Set that
   // survives the library's refresh cadence: the works array is rebuilt on every
   // change, but the keys are stable, so an expanded work stays open across a
@@ -1052,17 +1075,42 @@ function LibraryPanel({
   }
 
   return (
-    <ul className="vi-lib-list">
-      {works.map((w) => (
-        <WorkSection
-          key={w.key}
-          group={w}
-          open={openKeys.has(w.key)}
-          onToggle={() => toggle(w.key)}
-          onGenerate={onGenerate}
-        />
-      ))}
-    </ul>
+    <>
+      {sections.map((sec) => {
+        const isOpen = !closedTypes.has(sec.id);
+        return (
+          <div key={sec.id} className="vi-lib-typegroup">
+            <button
+              type="button"
+              className="vi-lib-group-toggle vi-lib-typegroup-head"
+              aria-expanded={isOpen}
+              onClick={() => toggleType(sec.id)}
+            >
+              <span className="vi-lib-group-caret" aria-hidden>
+                {isOpen ? "▾" : "▸"}
+              </span>{" "}
+              {sec.label} <span className="vi-proc-count">{sec.count}</span>
+            </button>
+            {isOpen && (
+              <ul className="vi-lib-list">
+                {sec.works.map((w) => (
+                  <WorkSection
+                    key={`${sec.id}:${w.key}`}
+                    group={w}
+                    // Expand state is NAMESPACED by type section: origin-keyed works
+                    // (uploads/frames/legacy history) can carry the SAME work key in
+                    // both Images and Videos, and a shared key would open both.
+                    open={openKeys.has(`${sec.id}:${w.key}`)}
+                    onToggle={() => toggle(`${sec.id}:${w.key}`)}
+                    onGenerate={onGenerate}
+                  />
+                ))}
+              </ul>
+            )}
+          </div>
+        );
+      })}
+    </>
   );
 }