Restore active session live transcript

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

@@ -12,7 +12,13 @@ const hoisted = vi.hoisted(() => ({
 }));
 
 vi.mock("./during-session", () => ({
-  DuringSessionAccessory: () => null,
+  DuringSessionAccessory: () => <div data-testid="during-session-accessory" />,
+}));
+
+vi.mock("./expand-toggle", () => ({
+  ExpandToggle: ({ label }: { label?: string }) => (
+    <button type="button">{label}</button>
+  ),
 }));
 
 vi.mock("~/stt/contexts", () => ({
@@ -295,7 +301,7 @@ describe("useSessionBottomAccessory", () => {
     expect(result.current.bottomBorderHandle).toBeNull();
   });
 
-  it("does not show a local bottom panel while live transcription is active", () => {
+  it("shows a local bottom panel while the current session has live transcription active", () => {
     hoisted.live.status = "active";
     hoisted.live.sessionId = "session-1";
 
@@ -308,8 +314,11 @@ describe("useSessionBottomAccessory", () => {
       }),
     );
 
-    expect(result.current.bottomAccessoryState).toBeNull();
-    expect(result.current.bottomAccessory).toBeNull();
-    expect(result.current.bottomBorderHandle).toBeNull();
+    expect(result.current.bottomAccessoryState).toEqual({
+      mode: "live",
+      expanded: false,
+    });
+    expect(result.current.bottomAccessory).not.toBeNull();
+    expect(result.current.bottomBorderHandle).not.toBeNull();
   });
 });

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

@@ -1,11 +1,17 @@
-import { type ReactNode } from "react";
+import { useState, type ReactNode } from "react";
+
+import { DuringSessionAccessory } from "./during-session";
+import { ExpandToggle } from "./expand-toggle";
+
+import { getLiveCaptureUiMode } from "~/store/zustand/listener/general-shared";
+import { useListener } from "~/stt/contexts";
 
 export type BottomAccessoryState = {
-  mode: "playback";
+  mode: "playback" | "live";
   expanded: boolean;
 } | null;
 
-export function useSessionBottomAccessory(_params: {
+export function useSessionBottomAccessory(params: {
   sessionId: string;
   sessionMode: string;
   audioExists?: boolean;
@@ -17,6 +23,42 @@ export function useSessionBottomAccessory(_params: {
   bottomBorderHandle: ReactNode;
   bottomAccessoryState: BottomAccessoryState;
 } {
+  const [liveExpanded, setLiveExpanded] = useState(false);
+  const live = useListener((state) => ({
+    status: state.live.status,
+    sessionId: state.live.sessionId,
+    requestedLiveTranscription: state.live.requestedLiveTranscription,
+    liveTranscriptionActive: state.live.liveTranscriptionActive,
+  }));
+
+  const isCurrentLiveSession =
+    params.sessionMode === "active" &&
+    live.status === "active" &&
+    live.sessionId === params.sessionId &&
+    getLiveCaptureUiMode(live) === "live";
+
+  if (isCurrentLiveSession) {
+    return {
+      bottomAccessory: (
+        <DuringSessionAccessory
+          sessionId={params.sessionId}
+          isExpanded={liveExpanded}
+        />
+      ),
+      bottomBorderHandle: (
+        <ExpandToggle
+          isExpanded={liveExpanded}
+          onToggle={() => setLiveExpanded((value) => !value)}
+          label="Live"
+        />
+      ),
+      bottomAccessoryState: {
+        mode: "live",
+        expanded: liveExpanded,
+      },
+    };
+  }
+
   return {
     bottomAccessory: null,
     bottomBorderHandle: null,