fix(desktop): preserve batch transcript panel (#5283)

Hide record-only bottom accessory chrome while keeping batch regeneration progress visible in the transcript panel.

Author: ComputelessComputer

apps/desktop/src/session/components/bottom-accessory/during-session.test.tsx

@@ -62,6 +62,22 @@ describe("DuringSessionAccessory", () => {
     });
   });
 
+  it("does not render a footer while recording for batch transcription", () => {
+    useListenerMock.mockImplementation((selector) =>
+      selector({
+        live: {
+          requestedLiveTranscription: false,
+          liveTranscriptionActive: false,
+        },
+        liveSegments,
+      }),
+    );
+
+    const view = render(<DuringSessionAccessory sessionId="session-1" />);
+
+    expect(view.container.firstChild).toBeNull();
+  });
+
   it("lets manual scrolling override expanded live transcript bottom pinning", () => {
     const view = render(
       <DuringSessionAccessory sessionId="session-1" isExpanded />,

apps/desktop/src/session/components/bottom-accessory/during-session.tsx

@@ -64,29 +64,45 @@ function LiveTranscriptFooter({
   fillHeight: boolean;
   isExpanded?: boolean;
 }) {
-  const store = main.UI.useStore(main.STORE_ID);
-  const segments = useLiveTranscriptSegments(sessionId);
   const requestedLiveTranscription = useListener(
     (state) => state.live.requestedLiveTranscription,
   );
   const liveTranscriptionActive = useListener(
     (state) => state.live.liveTranscriptionActive,
   );
-  const labelContext = useMemo(
-    () => (store ? defaultRenderLabelContext(store) : undefined),
-    [store],
-  );
   const captureMode = getLiveCaptureUiMode({
     requestedLiveTranscription,
     liveTranscriptionActive,
   });
-  const mode =
-    captureMode === "live"
-      ? { kind: "live" as const }
-      : {
-          kind: "record_only" as const,
-          isFallbackFromLive: captureMode === "fallback_record_only",
-        };
+
+  if (captureMode !== "live") {
+    return null;
+  }
+
+  return (
+    <LiveTranscriptFooterContent
+      sessionId={sessionId}
+      fillHeight={fillHeight}
+      isExpanded={isExpanded}
+    />
+  );
+}
+
+function LiveTranscriptFooterContent({
+  sessionId,
+  fillHeight,
+  isExpanded = false,
+}: {
+  sessionId: string;
+  fillHeight: boolean;
+  isExpanded?: boolean;
+}) {
+  const store = main.UI.useStore(main.STORE_ID);
+  const segments = useLiveTranscriptSegments(sessionId);
+  const labelContext = useMemo(
+    () => (store ? defaultRenderLabelContext(store) : undefined),
+    [store],
+  );
 
   const speakerLabelManager = useMemo(() => {
     if (!store) {
@@ -107,40 +123,20 @@ function LiveTranscriptFooter({
           fillHeight && "h-full min-h-0",
         ])}
       >
-        {mode.kind === "record_only" ? (
-          <RecordOnlyFooter isFallbackFromLive={mode.isFallbackFromLive} />
-        ) : (
-          <LiveTranscriptContent
-            fillHeight={fillHeight}
-            isExpanded={isExpanded}
-            previewText={previewText}
-            scrollRef={scrollRef}
-            segments={segments}
-            labelContext={labelContext}
-            speakerLabelManager={speakerLabelManager}
-          />
-        )}
+        <LiveTranscriptContent
+          fillHeight={fillHeight}
+          isExpanded={isExpanded}
+          previewText={previewText}
+          scrollRef={scrollRef}
+          segments={segments}
+          labelContext={labelContext}
+          speakerLabelManager={speakerLabelManager}
+        />
       </div>
     </div>
   );
 }
 
-function RecordOnlyFooter({
-  isFallbackFromLive,
-}: {
-  isFallbackFromLive: boolean;
-}) {
-  return (
-    <div className="flex items-center justify-center px-4 py-1">
-      <p className="text-[11px] leading-none text-neutral-400">
-        {isFallbackFromLive
-          ? "Live transcription stopped. Transcript will be created after you stop."
-          : "Recording only. Transcript will be created after you stop."}
-      </p>
-    </div>
-  );
-}
-
 function LiveTranscriptContent({
   fillHeight,
   isExpanded,

apps/desktop/src/session/components/bottom-accessory/index.test.tsx

@@ -12,6 +12,10 @@ const hoisted = vi.hoisted(() => ({
       };
     }
   >(),
+  live: {
+    requestedLiveTranscription: true as boolean | null,
+    liveTranscriptionActive: true as boolean | null,
+  },
 }));
 
 vi.mock("react-hotkeys-hook", () => ({
@@ -44,10 +48,7 @@ vi.mock("~/stt/contexts", () => ({
     }) => unknown,
   ) =>
     selector({
-      live: {
-        requestedLiveTranscription: true,
-        liveTranscriptionActive: true,
-      },
+      live: hoisted.live,
     }),
 }));
 
@@ -64,6 +65,8 @@ import { useSessionBottomAccessory } from "./index";
 describe("useSessionBottomAccessory", () => {
   beforeEach(() => {
     hoisted.hotkeys.clear();
+    hoisted.live.requestedLiveTranscription = true;
+    hoisted.live.liveTranscriptionActive = true;
     useShellMock.mockReturnValue({
       chat: {
         mode: "Closed",
@@ -164,6 +167,82 @@ describe("useSessionBottomAccessory", () => {
     expect(result.current.bottomAccessory).not.toBeNull();
   });
 
+  it("hides the bottom accessory while recording for batch transcription", () => {
+    hoisted.live.requestedLiveTranscription = false;
+    hoisted.live.liveTranscriptionActive = false;
+
+    const { result } = renderHook(() =>
+      useSessionBottomAccessory({
+        sessionId: "session-1",
+        sessionMode: "active",
+        audioUrl: null,
+        hasTranscript: false,
+      }),
+    );
+
+    expect(result.current.bottomAccessoryState).toBeNull();
+    expect(result.current.bottomAccessory).toBeNull();
+    expect(result.current.bottomBorderHandle).toBeNull();
+  });
+
+  it("keeps batch progress visible while batch transcription is running", () => {
+    const { result } = renderHook(() =>
+      useSessionBottomAccessory({
+        sessionId: "session-1",
+        sessionMode: "running_batch",
+        audioUrl: "file:///session.wav",
+        hasTranscript: true,
+      }),
+    );
+
+    expect(result.current.bottomAccessoryState).toEqual({
+      mode: "playback",
+      expanded: false,
+    });
+    expect(result.current.bottomAccessory).not.toBeNull();
+    expect(result.current.bottomBorderHandle).not.toBeNull();
+  });
+
+  it("keeps the transcript panel expanded when regeneration starts", () => {
+    const { result, rerender } = renderHook(
+      ({ sessionMode }: { sessionMode: string }) =>
+        useSessionBottomAccessory({
+          sessionId: "session-1",
+          sessionMode,
+          audioUrl: "file:///session.wav",
+          hasTranscript: true,
+        }),
+      {
+        initialProps: {
+          sessionMode: "inactive",
+        },
+      },
+    );
+
+    const toggle = result.current.bottomBorderHandle;
+    expect(isValidElement<{ onToggle: () => void }>(toggle)).toBe(true);
+    if (!isValidElement<{ onToggle: () => void }>(toggle)) {
+      return;
+    }
+
+    act(() => {
+      toggle.props.onToggle();
+    });
+
+    expect(result.current.bottomAccessoryState).toEqual({
+      mode: "playback",
+      expanded: true,
+    });
+
+    rerender({ sessionMode: "running_batch" });
+
+    expect(result.current.bottomAccessoryState).toEqual({
+      mode: "playback",
+      expanded: true,
+    });
+    expect(result.current.bottomAccessory).not.toBeNull();
+  });
+
   it("keeps the expanded live handle on neutral 50", () => {
     const { result } = renderHook(() =>
       useSessionBottomAccessory({

apps/desktop/src/session/components/bottom-accessory/index.tsx

@@ -32,13 +32,14 @@ export function useSessionBottomAccessory({
   const [isExpanded, setIsExpanded] = useState(false);
   const isLive = sessionMode === "active";
   const isFinalizing = sessionMode === "finalizing";
-  const isBatching = sessionMode === "running_batch";
-  const isInactive = sessionMode === "inactive" || isBatching;
-  const hasAudio = Boolean(audioUrl) && isInactive;
+  const isInactive = sessionMode === "inactive";
+  const isRunningBatch = sessionMode === "running_batch";
+  const hasAudio = Boolean(audioUrl) && (isInactive || isRunningBatch);
   const live = useListener((state) => state.live);
   const { chat } = useShell();
   const liveCaptureMode = getLiveCaptureUiMode(live);
-  const canExpandLiveTranscript = isLive && liveCaptureMode === "live";
+  const showLiveAccessory = isLive && liveCaptureMode === "live";
+  const canExpandLiveTranscript = showLiveAccessory;
   const effectiveExpanded =
     isLive && !canExpandLiveTranscript ? false : isExpanded;
   const isChatVisible = chat.mode === "RightPanelOpen";
@@ -58,7 +59,7 @@ export function useSessionBottomAccessory({
   }, [isLive, canExpandLiveTranscript, isExpanded]);
 
   const showPostSession =
-    isInactive && (isBatching || hasAudio || hasTranscript);
+    (isInactive && (hasAudio || hasTranscript)) || isRunningBatch;
 
   useHotkeys(
     "esc",
@@ -74,22 +75,23 @@ export function useSessionBottomAccessory({
     [showPostSession, isExpanded, isChatVisible],
   );
 
-  const mode: NonNullable<BottomAccessoryState>["mode"] | null = isLive
-    ? "live"
-    : isFinalizing
-      ? "finalizing"
-      : showPostSession
-        ? hasAudio
-          ? "playback"
-          : "transcript_only"
-        : null;
+  const mode: NonNullable<BottomAccessoryState>["mode"] | null =
+    showLiveAccessory
+      ? "live"
+      : isFinalizing
+        ? "finalizing"
+        : showPostSession
+          ? hasAudio || isRunningBatch
+            ? "playback"
+            : "transcript_only"
+          : null;
 
   const bottomAccessoryState: BottomAccessoryState = useMemo(
     () => (mode ? { mode, expanded: effectiveExpanded } : null),
     [effectiveExpanded, mode],
   );
 
-  if (isLive || isFinalizing) {
+  if (showLiveAccessory || isFinalizing) {
     return {
       bottomAccessory: (
         <DuringSessionAccessory
@@ -114,7 +116,7 @@ export function useSessionBottomAccessory({
   }
 
   if (showPostSession) {
-    const hasAccessoryContent = isExpanded || isBatching || hasAudio;
+    const hasAccessoryContent = isExpanded || hasAudio || isRunningBatch;
     return {
       bottomAccessory: hasAccessoryContent ? (
         <PostSessionAccessory