feat(v7-h42): useGenerateStream hook + LiveGenPanel for /ws/gen/{job_id}

Closes plan item #42. Backend already publishes per-token events to
gen_event_bus and exposes them via /ws/gen/{job_id}, but the UI had
no consumer — gen.run looked like a single-shot RPC even though the
streaming infrastructure was there.

- useGenerateStream(baseUrl, jobId, active): mirror of
  useLiveTrainStream — collects {step, token_id, finish_reason}
  events into a buffer, exponential-backoff reconnect on unexpected
  drop, finish:'ok' frame flips one-shot toast, reset + dismissToast
  helpers.
- LiveGenPanel: rolling tail of last N token ids (default 64),
  per-second dead-man-switch update, finish toast with dismiss,
  reconnect counter pill.

5/5 useGenerateStream vitest cover URL construction, inactive no-op,
event collect + finish + close, reset/dismissToast lifecycle.
6/6 LiveGenPanel vitest cover empty-state, waiting placeholder,
token-count + tail, tail window cap, finish toast, reconnect pill.

Author: apstenku123

vbgui/src/components/LiveGenPanel.tsx

@@ -0,0 +1,114 @@
+// V7-H42: live gen.run token stream display.
+//
+// Mirror of LiveTrainPanel for the generation path:
+//   * rolling tail of last N tokens (default 64),
+//   * dead-man-switch when no event for > stallSeconds,
+//   * finish:'ok' toast.
+//
+// Consumes useGenerateStream's events array.
+
+import { useEffect, useState } from "react";
+import type { GenTokenEvent } from "@/hooks/useGenerateStream";
+
+export interface LiveGenPanelProps {
+  events: GenTokenEvent[];
+  genInFlight: boolean;
+  finishToast?: boolean;
+  reconnectAttempts?: number;
+  stallSeconds?: number;
+  onDismissToast?: () => void;
+  /** Window of latest tokens to render. */
+  tail?: number;
+}
+
+export function LiveGenPanel({
+  events, genInFlight, finishToast = false,
+  reconnectAttempts = 0, stallSeconds = 8, onDismissToast,
+  tail = 64,
+}: LiveGenPanelProps): JSX.Element {
+  // Dead-man-switch tick — refreshes every second while gen is active
+  // so "stalled X.Xs" updates without a fresh event.
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    if (!genInFlight) return;
+    const id = setInterval(() => setTick((t) => t + 1), 1000);
+    return () => clearInterval(id);
+  }, [genInFlight]);
+
+  const last = events.length > 0 ? events[events.length - 1] : null;
+  const window = events.slice(-tail);
+  const stalled = last && genInFlight
+    ? ((Date.now() / 1000)
+        - ((last as { ts?: number }).ts ?? 0))
+    : 0;
+
+  if (!genInFlight && events.length === 0 && !finishToast) {
+    return <></>;
+  }
+
+  return (
+    <div data-testid="live-gen-panel"
+         style={{ padding: 8, border: "1px solid #e5e7eb",
+                  borderRadius: 4, background: "#f9fafb",
+                  fontFamily: "system-ui, sans-serif", fontSize: 11 }}>
+      <div style={{ display: "flex", justifyContent: "space-between",
+                    marginBottom: 4 }}>
+        <strong>live gen</strong>
+        {reconnectAttempts > 0 && (
+          <span data-testid="live-gen-panel-reconnects"
+                style={{ color: "#d97706" }}>
+            reconnects: {reconnectAttempts}
+          </span>
+        )}
+      </div>
+      {events.length === 0 ? (
+        <div data-testid="live-gen-panel-empty" style={{ color: "#9ca3af" }}>
+          waiting for first token…
+        </div>
+      ) : (
+        <>
+          <div data-testid="live-gen-panel-pill"
+               style={{ display: "flex", gap: 8, flexWrap: "wrap",
+                        marginBottom: 4 }}>
+            <span data-testid="live-gen-panel-token-count">
+              tokens {events.length}
+            </span>
+            <span data-testid="live-gen-panel-last-token">
+              last id {last?.token_id ?? "?"}
+            </span>
+            {stalled > stallSeconds && (
+              <span data-testid="live-gen-panel-stalled"
+                    style={{ color: "#dc2626" }}>
+                ⚠ stalled {stalled.toFixed(1)}s
+              </span>
+            )}
+          </div>
+          <div data-testid="live-gen-panel-tail"
+               style={{ fontFamily: "monospace", color: "#374151",
+                        whiteSpace: "pre-wrap", maxHeight: 80,
+                        overflowY: "auto" }}>
+            {window.map((e) => e.token_id).join(" ")}
+          </div>
+        </>
+      )}
+      {finishToast && (
+        <div data-testid="live-gen-panel-toast"
+             style={{ marginTop: 6, padding: 6,
+                      background: "#dcfce7", color: "#166534",
+                      borderRadius: 4, display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center" }}>
+          <span>✓ gen done</span>
+          {onDismissToast && (
+            <button data-testid="live-gen-panel-toast-dismiss"
+                    onClick={onDismissToast}
+                    style={{ background: "transparent", border: "none",
+                             color: "#166534", cursor: "pointer" }}>
+              ×
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

vbgui/src/hooks/useGenerateStream.ts

@@ -0,0 +1,105 @@
+// V7-H42: WebSocket subscriber for /ws/gen/{job_id}.
+//
+// Mirror of useLiveTrainStream for the gen.run token stream. Collects
+// per-token events into an in-memory buffer (consumer decides how to
+// render — LiveGenPanel just shows the rolling token tail). Backs off
+// on unexpected drops; treats {finish:'ok'} as a one-shot toast.
+//
+// Backend: cppmega_v4/runtime/gen_event_bus.publish per token and
+//          /ws/gen/{job_id} endpoint in cppmega_v4/jsonrpc/server.py.
+
+import { useEffect, useRef, useState } from "react";
+
+export interface GenTokenEvent {
+  step: number;
+  token_id: number;
+  finish_reason?: string | null;
+  [k: string]: unknown;
+}
+
+export interface UseGenerateStreamState {
+  events: GenTokenEvent[];
+  reconnectAttempts: number;
+  finishToast: boolean;
+  reset: () => void;
+  dismissToast: () => void;
+}
+
+export function useGenerateStream(
+  baseUrl: string,
+  jobId: string | null,
+  active: boolean,
+): UseGenerateStreamState {
+  const [events, setEvents] = useState<GenTokenEvent[]>([]);
+  const [reconnectAttempts, setReconnectAttempts] = useState(0);
+  const [finishToast, setFinishToast] = useState(false);
+  const socketRef = useRef<WebSocket | null>(null);
+  // Tracks normal completion so reconnect only fires on unexpected drops.
+  const completedRef = useRef<boolean>(false);
+
+  const reset = () => {
+    setEvents([]);
+    setReconnectAttempts(0);
+    setFinishToast(false);
+    completedRef.current = false;
+  };
+  const dismissToast = () => setFinishToast(false);
+
+  useEffect(() => {
+    if (!jobId || !active) return;
+    let cancelled = false;
+    let reconnectTimer: ReturnType<typeof setTimeout> | undefined;
+    let attempt = 0;
+    completedRef.current = false;
+
+    const wsUrl = `${baseUrl.replace(/^http/, "ws")}/ws/gen/${jobId}`;
+
+    const connect = () => {
+      let socket: WebSocket;
+      try {
+        socket = new WebSocket(wsUrl);
+      } catch {
+        scheduleReconnect();
+        return;
+      }
+      socketRef.current = socket;
+      socket.onmessage = (msg) => {
+        try {
+          const frame = JSON.parse(msg.data) as
+            { event?: GenTokenEvent; finish?: string };
+          if (frame.event) {
+            setEvents((prev) => [...prev, frame.event!]);
+          } else if (frame.finish === "ok") {
+            completedRef.current = true;
+            setFinishToast(true);
+            try { socket.close(); } catch { /* noop */ }
+          }
+        } catch { /* ignore malformed */ }
+      };
+      socket.onclose = () => {
+        if (cancelled) return;
+        if (!completedRef.current && active) {
+          scheduleReconnect();
+        }
+      };
+      socket.onerror = () => { /* close handles reconnect */ };
+    };
+
+    const scheduleReconnect = () => {
+      attempt += 1;
+      setReconnectAttempts(attempt);
+      const delay = Math.min(5_000, 500 * 2 ** Math.min(attempt - 1, 4));
+      reconnectTimer = setTimeout(connect, delay);
+    };
+
+    connect();
+    return () => {
+      cancelled = true;
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      try { socketRef.current?.close(); } catch { /* noop */ }
+      socketRef.current = null;
+    };
+  }, [baseUrl, jobId, active]);
+
+  return { events, reconnectAttempts, finishToast, reset, dismissToast };
+}

vbgui/tests/LiveGenPanel.test.tsx

@@ -0,0 +1,64 @@
+// V7-H42: LiveGenPanel renders rolling token tail + finish toast.
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { LiveGenPanel } from "@/components/LiveGenPanel";
+import type { GenTokenEvent } from "@/hooks/useGenerateStream";
+
+const EVS: GenTokenEvent[] = [
+  { step: 0, token_id: 100 },
+  { step: 1, token_id: 200 },
+  { step: 2, token_id: 300 },
+];
+
+describe("V7-H42 LiveGenPanel", () => {
+  it("returns empty when nothing happened yet", () => {
+    const { container } = render(
+      <LiveGenPanel events={[]} genInFlight={false} />,
+    );
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders waiting-for-first-token placeholder when active + empty",
+     () => {
+    render(<LiveGenPanel events={[]} genInFlight={true} />);
+    expect(screen.getByTestId("live-gen-panel-empty")).toBeTruthy();
+  });
+
+  it("renders token count + last id + rolling tail", () => {
+    render(<LiveGenPanel events={EVS} genInFlight={true} />);
+    expect(screen.getByTestId("live-gen-panel-token-count").textContent)
+      .toContain("3");
+    expect(screen.getByTestId("live-gen-panel-last-token").textContent)
+      .toContain("300");
+    expect(screen.getByTestId("live-gen-panel-tail").textContent)
+      .toBe("100 200 300");
+  });
+
+  it("respects tail window — only last N tokens rendered", () => {
+    const many: GenTokenEvent[] = Array.from({ length: 80 },
+      (_, i) => ({ step: i, token_id: i }));
+    render(<LiveGenPanel events={many} genInFlight={true} tail={5} />);
+    // Last 5 tokens: 75..79.
+    expect(screen.getByTestId("live-gen-panel-tail").textContent)
+      .toBe("75 76 77 78 79");
+  });
+
+  it("shows finish toast and dismiss button", () => {
+    const onDismiss = vi.fn();
+    render(<LiveGenPanel events={EVS} genInFlight={false}
+                          finishToast={true}
+                          onDismissToast={onDismiss} />);
+    expect(screen.getByTestId("live-gen-panel-toast").textContent)
+      .toContain("gen done");
+    expect(screen.getByTestId("live-gen-panel-toast-dismiss"))
+      .toBeTruthy();
+  });
+
+  it("shows reconnect counter when reconnectAttempts > 0", () => {
+    render(<LiveGenPanel events={EVS} genInFlight={true}
+                          reconnectAttempts={3} />);
+    expect(screen.getByTestId("live-gen-panel-reconnects").textContent)
+      .toContain("3");
+  });
+});

vbgui/tests/useGenerateStream.test.tsx

@@ -0,0 +1,111 @@
+// V7-H42: useGenerateStream opens /ws/gen/{job_id}, collects events,
+// surfaces finish toast, reconnects on unexpected drop.
+
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { useGenerateStream } from "@/hooks/useGenerateStream";
+
+class MockSocket {
+  static instances: MockSocket[] = [];
+  static reset(): void { MockSocket.instances = []; }
+  url: string;
+  onmessage: ((e: MessageEvent) => void) | null = null;
+  onclose: ((e: CloseEvent) => void) | null = null;
+  onerror: ((e: Event) => void) | null = null;
+  closed = false;
+  constructor(url: string) {
+    this.url = url;
+    MockSocket.instances.push(this);
+  }
+  close(): void {
+    this.closed = true;
+    this.onclose?.(new CloseEvent("close"));
+  }
+  push(frame: unknown): void {
+    this.onmessage?.(new MessageEvent("message",
+      { data: JSON.stringify(frame) }));
+  }
+  drop(): void {
+    // Simulate unexpected disconnect (no finish frame).
+    this.onclose?.(new CloseEvent("close"));
+  }
+}
+
+describe("V7-H42 useGenerateStream", () => {
+  beforeEach(() => {
+    MockSocket.reset();
+    (globalThis as unknown as { WebSocket: typeof WebSocket })
+      .WebSocket = MockSocket as unknown as typeof WebSocket;
+  });
+  afterEach(() => {
+    (globalThis as unknown as { WebSocket: typeof WebSocket | null })
+      .WebSocket = null as unknown as typeof WebSocket;
+  });
+
+  it("opens /ws/gen/{job_id} URL with backend base", async () => {
+    renderHook(() => useGenerateStream(
+      "http://127.0.0.1:8765", "job-1", true));
+    await waitFor(() => {
+      expect(MockSocket.instances.length).toBe(1);
+    });
+    expect(MockSocket.instances[0]?.url)
+      .toBe("ws://127.0.0.1:8765/ws/gen/job-1");
+  });
+
+  it("does not open socket while inactive", () => {
+    renderHook(() => useGenerateStream("http://x", "job-2", false));
+    expect(MockSocket.instances).toEqual([]);
+  });
+
+  it("collects token events and flips finishToast on finish frame",
+     async () => {
+    const { result } = renderHook(() => useGenerateStream(
+      "http://x", "job-3", true));
+    await waitFor(() => {
+      expect(MockSocket.instances.length).toBe(1);
+    });
+    const sock = MockSocket.instances[0]!;
+    act(() => {
+      sock.push({ event: { step: 0, token_id: 42 } });
+      sock.push({ event: { step: 1, token_id: 99 } });
+      sock.push({ finish: "ok" });
+    });
+    await waitFor(() => {
+      expect(result.current.finishToast).toBe(true);
+    });
+    expect(result.current.events.map((e) => e.token_id))
+      .toEqual([42, 99]);
+    expect(sock.closed).toBe(true);
+  });
+
+  it("reset clears events + finishToast + reconnectAttempts",
+     async () => {
+    const { result } = renderHook(() => useGenerateStream(
+      "http://x", "job-4", true));
+    await waitFor(() => expect(MockSocket.instances.length).toBe(1));
+    act(() => {
+      MockSocket.instances[0]!.push({ event: { step: 0, token_id: 1 } });
+      MockSocket.instances[0]!.push({ finish: "ok" });
+    });
+    await waitFor(() => expect(result.current.finishToast).toBe(true));
+    act(() => result.current.reset());
+    expect(result.current.events).toEqual([]);
+    expect(result.current.finishToast).toBe(false);
+    expect(result.current.reconnectAttempts).toBe(0);
+  });
+
+  it("dismissToast clears the finish toast only", async () => {
+    const { result } = renderHook(() => useGenerateStream(
+      "http://x", "job-5", true));
+    await waitFor(() => expect(MockSocket.instances.length).toBe(1));
+    act(() => {
+      MockSocket.instances[0]!.push({ event: { step: 0, token_id: 7 } });
+      MockSocket.instances[0]!.push({ finish: "ok" });
+    });
+    await waitFor(() => expect(result.current.finishToast).toBe(true));
+    act(() => result.current.dismissToast());
+    expect(result.current.finishToast).toBe(false);
+    // Events survive.
+    expect(result.current.events).toHaveLength(1);
+  });
+});