Show live transcript in standalone note windows

Expose active capture snapshots and attach standalone note routes to listener events.

Author: ComputelessComputer

apps/desktop/src/routes/app/-note.$sessionId.test.tsx

@@ -4,6 +4,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { resetTabsStore } from "~/store/zustand/tabs/test-utils";
 
 const mocks = vi.hoisted(() => ({
+  attachLiveSession: vi.fn(),
   close: vi.fn(),
 }));
 
@@ -13,7 +14,16 @@ vi.mock("@tauri-apps/api/window", () => ({
   }),
 }));
 
+vi.mock("~/stt/contexts", () => ({
+  useListener: (
+    selector: (state: {
+      attachLiveSession: typeof mocks.attachLiveSession;
+    }) => unknown,
+  ) => selector({ attachLiveSession: mocks.attachLiveSession }),
+}));
+
 import {
+  useAttachStandaloneNoteToLiveSession,
   useCloseStandaloneNoteWindowOnEscape,
   useStandaloneNoteTab,
 } from "./note.$sessionId";
@@ -22,6 +32,7 @@ import { useTabs } from "~/store/zustand/tabs";
 
 describe("standalone note window route", () => {
   beforeEach(() => {
+    mocks.attachLiveSession.mockClear();
     mocks.close.mockClear();
     resetTabsStore();
   });
@@ -71,6 +82,12 @@ describe("standalone note window route", () => {
 
     expect(result.current.state.view).toEqual({ type: "raw" });
   });
+
+  it("attaches the standalone note to live session events", () => {
+    renderHook(() => useAttachStandaloneNoteToLiveSession("session-1"));
+
+    expect(mocks.attachLiveSession).toHaveBeenCalledWith("session-1");
+  });
 });
 
 function dispatchKeyDown(key: string) {

apps/desktop/src/routes/app/note.$sessionId.tsx

@@ -6,6 +6,7 @@ import { ClassicMainLayout } from "~/main/layout";
 import { TabContentNote } from "~/session";
 import { StandaloneWindowShell } from "~/shared/window-shell";
 import { type Tab, useTabs } from "~/store/zustand/tabs";
+import { useListener } from "~/stt/contexts";
 
 export const Route = createFileRoute("/app/note/$sessionId")({
   component: Component,
@@ -14,6 +15,7 @@ export const Route = createFileRoute("/app/note/$sessionId")({
 function Component() {
   const { sessionId } = Route.useParams();
   useCloseStandaloneNoteWindowOnEscape();
+  useAttachStandaloneNoteToLiveSession(sessionId);
   const tab = useStandaloneNoteTab(sessionId);
 
   return (
@@ -27,6 +29,14 @@ function Component() {
   );
 }
 
+export function useAttachStandaloneNoteToLiveSession(sessionId: string) {
+  const attachLiveSession = useListener((state) => state.attachLiveSession);
+
+  useEffect(() => {
+    void attachLiveSession(sessionId);
+  }, [attachLiveSession, sessionId]);
+}
+
 export function useStandaloneNoteTab(sessionId: string) {
   const tab = useMemo(
     () =>

apps/desktop/src/store/zustand/listener/general-live.ts

@@ -12,6 +12,7 @@ import {
   type CaptureDataEvent,
   type CaptureConfigUpdate,
   type CaptureLifecycleEvent,
+  type CaptureSnapshot,
   type CaptureParams,
   type CaptureStatusEvent,
   type LiveTranscriptDelta,
@@ -255,6 +256,13 @@ export const startLiveSession = <T extends LiveStore>(
   targetSessionId: string,
   params: CaptureParams,
 ): Promise<boolean> => {
+  clearLiveEventUnlisteners(
+    get().live.eventUnlistenersBySession[targetSessionId],
+  );
+  setLiveState(set, (live) => {
+    delete live.eventUnlistenersBySession[targetSessionId];
+  });
+
   const handlers = createSessionEventHandlers(set, get, targetSessionId);
 
   const program = Effect.gen(function* () {
@@ -339,6 +347,92 @@ export const startLiveSession = <T extends LiveStore>(
   );
 };
 
+export const attachLiveSession = <T extends LiveStore>(
+  set: StoreApi<T>["setState"],
+  get: StoreApi<T>["getState"],
+  targetSessionId: string,
+): Promise<void> => {
+  const currentLive = get().live;
+  if (currentLive.eventUnlistenersBySession[targetSessionId]) {
+    return Promise.resolve();
+  }
+
+  const handlers = createSessionEventHandlers(set, get, targetSessionId);
+
+  const program = Effect.gen(function* () {
+    const unlisteners = yield* listenToAllSessionEvents(handlers);
+    setLiveState(set, (live) => {
+      live.eventUnlistenersBySession[targetSessionId] = unlisteners;
+    });
+
+    const snapshot = yield* fromResult(listenerCommands.getCaptureSnapshot());
+    applyCaptureSnapshot(set, get, targetSessionId, snapshot);
+  });
+
+  return Effect.runPromiseExit(program).then((exit) =>
+    Exit.match(exit, {
+      onFailure: (cause) => {
+        console.error("[listener] failed to attach live session:", cause);
+        clearLiveEventUnlisteners(
+          get().live.eventUnlistenersBySession[targetSessionId],
+        );
+        setLiveState(set, (live) => {
+          delete live.eventUnlistenersBySession[targetSessionId];
+        });
+      },
+      onSuccess: () => undefined,
+    }),
+  );
+};
+
+function applyCaptureSnapshot<T extends GeneralState>(
+  set: StoreApi<T>["setState"],
+  get: StoreApi<T>["getState"],
+  targetSessionId: string,
+  snapshot: CaptureSnapshot,
+) {
+  if (
+    snapshot.state === "active" &&
+    snapshot.activeSessionId === targetSessionId
+  ) {
+    const currentLive = get().live;
+    const intervalId =
+      currentLive.sessionId === targetSessionId && currentLive.intervalId
+        ? currentLive.intervalId
+        : setInterval(() => {
+            setLiveState(set, (live) => {
+              if (
+                live.sessionId === targetSessionId &&
+                live.status === "active"
+              ) {
+                live.seconds += 1;
+              }
+            });
+          }, 1000);
+
+    setLiveState(set, (live) => {
+      markLiveActive(
+        live,
+        targetSessionId,
+        intervalId,
+        snapshot.requestedLiveTranscription ?? true,
+        snapshot.liveTranscriptionActive ?? true,
+        null,
+      );
+    });
+    return;
+  }
+
+  if (
+    snapshot.state === "finalizing" &&
+    snapshot.finalizingSessionIds.includes(targetSessionId)
+  ) {
+    setLiveState(set, (live) => {
+      markLiveFinalizing(live, targetSessionId);
+    });
+  }
+}
+
 export const stopLiveSession = <T extends GeneralState>(
   set: StoreApi<T>["setState"],
   get: StoreApi<T>["getState"],

apps/desktop/src/store/zustand/listener/general.test.ts

@@ -3,12 +3,20 @@ import { beforeEach, describe, expect, test, vi } from "vitest";
 
 const {
   getIdentifierMock,
+  getCaptureSnapshotMock,
+  listenCaptureDataMock,
+  listenCaptureLifecycleMock,
+  listenCaptureStatusMock,
   runEventHooksMock,
   setRecordingIndicatorMock,
   stopCaptureMock,
   vaultBaseMock,
 } = vi.hoisted(() => ({
   getIdentifierMock: vi.fn(),
+  getCaptureSnapshotMock: vi.fn(),
+  listenCaptureDataMock: vi.fn(),
+  listenCaptureLifecycleMock: vi.fn(),
+  listenCaptureStatusMock: vi.fn(),
   runEventHooksMock: vi.fn(),
   setRecordingIndicatorMock: vi.fn(),
   stopCaptureMock: vi.fn(),
@@ -45,6 +53,7 @@ vi.mock("@hypr/plugin-settings", () => ({
 
 vi.mock("@hypr/plugin-transcription", () => ({
   commands: {
+    getCaptureSnapshot: getCaptureSnapshotMock,
     setMicMuted: vi.fn(),
     startCapture: vi.fn(),
     startTranscription: vi.fn(),
@@ -54,13 +63,13 @@ vi.mock("@hypr/plugin-transcription", () => ({
   },
   events: {
     captureDataEvent: {
-      listen: vi.fn(),
+      listen: listenCaptureDataMock,
     },
     captureLifecycleEvent: {
-      listen: vi.fn(),
+      listen: listenCaptureLifecycleMock,
     },
     captureStatusEvent: {
-      listen: vi.fn(),
+      listen: listenCaptureStatusMock,
     },
   },
 }));
@@ -79,6 +88,19 @@ describe("General Listener Slice", () => {
     store = createListenerStore();
     vi.clearAllMocks();
     getIdentifierMock.mockResolvedValue("com.hyprnote.stable");
+    getCaptureSnapshotMock.mockResolvedValue({
+      status: "ok",
+      data: {
+        activeSessionId: null,
+        finalizingSessionIds: [],
+        liveTranscriptionActive: null,
+        requestedLiveTranscription: null,
+        state: "inactive",
+      },
+    });
+    listenCaptureDataMock.mockResolvedValue(() => {});
+    listenCaptureLifecycleMock.mockResolvedValue(() => {});
+    listenCaptureStatusMock.mockResolvedValue(() => {});
     runEventHooksMock.mockResolvedValue({ status: "ok", data: null });
     setRecordingIndicatorMock.mockResolvedValue({ status: "ok", data: null });
     stopCaptureMock.mockResolvedValue({ status: "ok", data: null });
@@ -632,6 +654,46 @@ describe("General Listener Slice", () => {
       expect(typeof start).toBe("function");
     });
 
+    test("attachLiveSession hydrates the active native capture for the same session", async () => {
+      getCaptureSnapshotMock.mockResolvedValueOnce({
+        status: "ok",
+        data: {
+          activeSessionId: "session-a",
+          finalizingSessionIds: [],
+          liveTranscriptionActive: true,
+          requestedLiveTranscription: true,
+          state: "active",
+        },
+      });
+
+      await store.getState().attachLiveSession("session-a");
+
+      expect(store.getState().getSessionMode("session-a")).toBe("active");
+      expect(store.getState().live.sessionId).toBe("session-a");
+      expect(store.getState().live.liveTranscriptionActive).toBe(true);
+      expect(listenCaptureLifecycleMock).toHaveBeenCalledTimes(1);
+      expect(listenCaptureStatusMock).toHaveBeenCalledTimes(1);
+      expect(listenCaptureDataMock).toHaveBeenCalledTimes(1);
+    });
+
+    test("attachLiveSession does not mark a different active native capture as current", async () => {
+      getCaptureSnapshotMock.mockResolvedValueOnce({
+        status: "ok",
+        data: {
+          activeSessionId: "session-b",
+          finalizingSessionIds: [],
+          liveTranscriptionActive: true,
+          requestedLiveTranscription: true,
+          state: "active",
+        },
+      });
+
+      await store.getState().attachLiveSession("session-a");
+
+      expect(store.getState().getSessionMode("session-a")).toBe("inactive");
+      expect(store.getState().live.sessionId).toBeNull();
+    });
+
     test("start returns false while another session is active", async () => {
       store.setState((state) =>
         mutate(state, (draft) => {

apps/desktop/src/store/zustand/listener/general.ts

@@ -10,6 +10,7 @@ import type { TranscriptionParams } from "@hypr/plugin-transcription";
 import type { BatchActions, BatchState } from "./batch";
 import { runBatchSession } from "./general-batch";
 import {
+  attachLiveSession,
   startLiveSession,
   stopLiveSession,
   updateLiveSessionConfig,
@@ -41,6 +42,7 @@ export type GeneralActions = {
     },
   ) => Promise<boolean>;
   stop: () => void;
+  attachLiveSession: (sessionId: string) => Promise<void>;
   setMuted: (value: boolean) => void;
   setTriggerAppIds: (appIds: string[] | null) => void;
   updateCaptureConfig: (
@@ -118,6 +120,13 @@ export const createGeneralSlice = <
   stop: () => {
     stopLiveSession(set, get);
   },
+  attachLiveSession: async (sessionId) => {
+    if (!sessionId) {
+      return;
+    }
+
+    await attachLiveSession(set, get, sessionId);
+  },
   setMuted: (value) => {
     set((state) =>
       mutate(state, (draft) => {