Reduce session note render cost

ComputelessComputer · ComputelessComputer · commit 7700404aba12 · 2026-07-04T13:41:03.000+09:00
Reuse derived transcript and tab state across the session note surface, avoid fallback NoteInput subscriptions when parent state is provided, and move pending upload processing out of TabContentNoteInner.
diff --git a/apps/desktop/src/session/components/note-input/header.tsx b/apps/desktop/src/session/components/note-input/header.tsx
@@ -1568,7 +1568,7 @@ export function useEditorTabs({
   });
 }
 
-function createEditorTabs({
+export function createEditorTabs({
   enhancedNoteIds,
   canShowInsights,
   canShowTranscript,
diff --git a/apps/desktop/src/session/components/note-input/index.tsx b/apps/desktop/src/session/components/note-input/index.tsx
@@ -38,58 +38,122 @@ export interface NoteInputHandle {
   prepareForTabChange: () => void;
 }
 
+type NoteInputProps = {
+  tab: Extract<Tab, { type: "sessions" }>;
+  onNavigateToTitle?: (pixelWidth?: number) => void;
+  onScroll?: UIEventHandler<HTMLDivElement>;
+  editorTabs?: TabEditorView[];
+  currentTab?: TabEditorView;
+  handleTabChange?: (view: TabEditorView) => void;
+  hideHeader?: boolean;
+  sessionMode?: SessionMode;
+};
+
 export function shouldShowTranscriptTabSpinner(sessionMode: SessionMode) {
   return sessionMode === "finalizing" || sessionMode === "running_batch";
 }
 
-export const NoteInput = forwardRef<
+export const NoteInput = forwardRef<NoteInputHandle, NoteInputProps>(
+  function NoteInput(props, ref) {
+    if (
+      props.editorTabs &&
+      props.currentTab &&
+      props.handleTabChange &&
+      props.sessionMode !== undefined
+    ) {
+      return (
+        <NoteInputContent
+          {...props}
+          ref={ref}
+          editorTabs={props.editorTabs}
+          currentTab={props.currentTab}
+          commitTabChange={props.handleTabChange}
+          sessionMode={props.sessionMode}
+        />
+      );
+    }
+
+    return <NoteInputWithDerivedState {...props} ref={ref} />;
+  },
+);
+
+const NoteInputWithDerivedState = forwardRef<NoteInputHandle, NoteInputProps>(
+  function NoteInputWithDerivedState(
+    { tab, editorTabs, currentTab, handleTabChange, ...props },
+    ref,
+  ) {
+    const fallbackEditorTabs = useEditorTabs({ sessionId: tab.id });
+    const fallbackCurrentTab: TabEditorView = useCurrentNoteTab(tab);
+    const updateSessionTabState = useTabs(
+      (state) => state.updateSessionTabState,
+    );
+    const tabRef = useRef(tab);
+    tabRef.current = tab;
+    const sessionMode = useListener((state) => state.getSessionMode(tab.id));
+
+    const commitTabChange = useCallback(
+      (tabView: TabEditorView) => {
+        if (handleTabChange) {
+          handleTabChange(tabView);
+          return;
+        }
+
+        updateSessionTabState(tabRef.current, {
+          ...tabRef.current.state,
+          view: tabView,
+        });
+      },
+      [handleTabChange, updateSessionTabState],
+    );
+
+    return (
+      <NoteInputContent
+        {...props}
+        ref={ref}
+        tab={tab}
+        editorTabs={editorTabs ?? fallbackEditorTabs}
+        currentTab={currentTab ?? fallbackCurrentTab}
+        commitTabChange={commitTabChange}
+        sessionMode={props.sessionMode ?? sessionMode}
+      />
+    );
+  },
+);
+
+const NoteInputContent = forwardRef<
   NoteInputHandle,
-  {
-    tab: Extract<Tab, { type: "sessions" }>;
-    onNavigateToTitle?: (pixelWidth?: number) => void;
-    onScroll?: UIEventHandler<HTMLDivElement>;
-    editorTabs?: TabEditorView[];
-    currentTab?: TabEditorView;
-    handleTabChange?: (view: TabEditorView) => void;
-    hideHeader?: boolean;
+  Omit<NoteInputProps, "editorTabs" | "currentTab" | "handleTabChange"> & {
+    editorTabs: TabEditorView[];
+    currentTab: TabEditorView;
+    commitTabChange: (view: TabEditorView) => void;
+    sessionMode: SessionMode;
   }
 >(
   (
     {
       tab,
       onNavigateToTitle,
       onScroll,
-      editorTabs: providedEditorTabs,
-      currentTab: providedCurrentTab,
-      handleTabChange: providedHandleTabChange,
+      editorTabs,
+      currentTab,
+      commitTabChange,
       hideHeader = false,
+      sessionMode,
     },
     ref,
   ) => {
-    const fallbackEditorTabs = useEditorTabs({ sessionId: tab.id });
-    const updateSessionTabState = useTabs(
-      (state) => state.updateSessionTabState,
-    );
     const internalEditorRef = useRef<NoteEditorRef>(null);
     const [container, setContainer] = useState<HTMLDivElement | null>(null);
     const [view, setView] = useState<EditorView | null>(null);
 
     const sessionId = tab.id;
-
-    const tabRef = useRef(tab);
-    tabRef.current = tab;
-
-    const fallbackCurrentTab: TabEditorView = useCurrentNoteTab(tab);
-    const editorTabs = providedEditorTabs ?? fallbackEditorTabs;
-    const currentTab = providedCurrentTab ?? fallbackCurrentTab;
     const deferredCurrentTab = useDeferredValue(currentTab);
     const renderedCurrentTab = editorTabs.some((editorTab) =>
       isSameEditorView(editorTab, deferredCurrentTab),
     )
       ? deferredCurrentTab
       : currentTab;
 
-    const sessionMode = useListener((state) => state.getSessionMode(sessionId));
     const isMeetingInProgress =
       sessionMode === "active" ||
       sessionMode === "finalizing" ||
@@ -127,22 +191,9 @@ export const NoteInput = forwardRef<
         }
 
         onBeforeTabChange();
-        if (providedHandleTabChange) {
-          providedHandleTabChange(tabView);
-        } else {
-          updateSessionTabState(tabRef.current, {
-            ...tabRef.current.state,
-            view: tabView,
-          });
-        }
+        commitTabChange(tabView);
       },
-      [
-        currentTab,
-        onBeforeTabChange,
-        providedHandleTabChange,
-        renderedCurrentTab,
-        updateSessionTabState,
-      ],
+      [commitTabChange, currentTab, onBeforeTabChange, renderedCurrentTab],
     );
 
     const handleAdjacentViewShortcut = useCallback(
diff --git a/apps/desktop/src/session/components/shared.tsx b/apps/desktop/src/session/components/shared.tsx
@@ -8,6 +8,7 @@ import { extractPlainText } from "~/search/contexts/engine/utils";
 import { useCanShowInsights } from "~/session/insights/past-notes";
 import { useMainStoreRowsRevision } from "~/store/tinybase/hooks";
 import * as main from "~/store/tinybase/store/main";
+import type { SessionMode } from "~/store/zustand/listener/general";
 import type { Tab } from "~/store/zustand/tabs/schema";
 import { type EditorView } from "~/store/zustand/tabs/schema";
 import { useListener } from "~/stt/contexts";
@@ -116,13 +117,36 @@ export function useCanShowTranscript(
   const hasTranscript = useHasTranscript(sessionId);
   const sessionMode = useListener((state) => state.getSessionMode(sessionId));
   const batchError = useListener((state) => state.batch[sessionId]?.error);
-  const isLiveCapture =
-    sessionMode === "active" || sessionMode === "finalizing";
   const hasLiveSegments = useListener(
     (state) =>
       state.live.sessionId === sessionId && state.liveSegments.length > 0,
   );
 
+  return getCanShowTranscript({
+    audioExists,
+    batchError: Boolean(batchError),
+    hasLiveSegments,
+    hasTranscript,
+    sessionMode,
+  });
+}
+
+export function getCanShowTranscript({
+  audioExists = false,
+  batchError = false,
+  hasLiveSegments = false,
+  hasTranscript,
+  sessionMode,
+}: {
+  audioExists?: boolean;
+  batchError?: boolean;
+  hasLiveSegments?: boolean;
+  hasTranscript: boolean;
+  sessionMode: SessionMode;
+}): boolean {
+  const isLiveCapture =
+    sessionMode === "active" || sessionMode === "finalizing";
+
   return (
     hasTranscript ||
     (audioExists && !isLiveCapture) ||
diff --git a/apps/desktop/src/session/hooks/useEnhancedNotes.test.tsx b/apps/desktop/src/session/hooks/useEnhancedNotes.test.tsx
@@ -65,7 +65,10 @@ vi.mock("~/stt/contexts", () => ({
     }),
 }));
 
-import { useEnsureDefaultSummary } from "./useEnhancedNotes";
+import {
+  useEnsureDefaultSummary,
+  useEnsureDefaultSummaryFromState,
+} from "./useEnhancedNotes";
 
 describe("useEnsureDefaultSummary", () => {
   beforeEach(() => {
@@ -121,6 +124,23 @@ describe("useEnsureDefaultSummary", () => {
     });
   });
 
+  it("does not create the summary row before hydration enables it", async () => {
+    renderHook(() =>
+      useEnsureDefaultSummaryFromState({
+        batchError: false,
+        enabled: false,
+        enhancedNoteCount: 0,
+        hasTranscript: true,
+        sessionId: "session-1",
+        sessionMode: "inactive",
+      }),
+    );
+
+    await waitFor(() => {
+      expect(hoisted.service.ensureNote).not.toHaveBeenCalled();
+    });
+  });
+
   it("does not create the summary row while finalizing recording", async () => {
     hoisted.sessionMode = "finalizing";
 
diff --git a/apps/desktop/src/session/hooks/useEnhancedNotes.ts b/apps/desktop/src/session/hooks/useEnhancedNotes.ts
@@ -6,6 +6,7 @@ import { useHasTranscript } from "~/session/components/shared";
 import * as main from "~/store/tinybase/store/main";
 import * as settings from "~/store/tinybase/store/settings";
 import { createTaskId } from "~/store/zustand/ai-task/task-configs";
+import type { SessionMode } from "~/store/zustand/listener/general";
 import { useListener } from "~/stt/contexts";
 
 export function useEnhancedNotes(sessionId: string) {
@@ -54,35 +55,63 @@ export function useEnsureDefaultSummary(sessionId: string) {
     sessionId,
     main.STORE_ID,
   );
+  useEnsureDefaultSummaryFromState({
+    batchError: Boolean(batchError),
+    enhancedNoteCount: enhancedNoteIds?.length ?? 0,
+    hasTranscript,
+    sessionId,
+    sessionMode,
+  });
+}
+
+export function useEnsureDefaultSummaryFromState({
+  batchError,
+  enabled = true,
+  enhancedNoteCount,
+  hasTranscript,
+  sessionId,
+  sessionMode,
+}: {
+  batchError: boolean;
+  enabled?: boolean;
+  enhancedNoteCount: number;
+  hasTranscript: boolean;
+  sessionId: string;
+  sessionMode: SessionMode;
+}) {
   const selectedTemplateId = settings.UI.useValue(
     "selected_template_id",
     settings.STORE_ID,
   ) as string | undefined;
+  const templateId = selectedTemplateId || undefined;
 
   useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
     const service = getEnhancerService();
     if (!service) {
       return;
     }
 
-    const hasEnhancedNotes = enhancedNoteIds && enhancedNoteIds.length > 0;
-    const templateId = selectedTemplateId || undefined;
     const isLiveCapture =
       sessionMode === "active" || sessionMode === "finalizing";
     const canCreateSummary =
       !isLiveCapture &&
-      (hasTranscript || sessionMode === "running_batch" || Boolean(batchError));
+      (hasTranscript || sessionMode === "running_batch" || batchError);
 
-    if (!hasEnhancedNotes && canCreateSummary) {
+    if (enhancedNoteCount === 0 && canCreateSummary) {
       service.ensureNote(sessionId, templateId);
     }
   }, [
     sessionId,
-    enhancedNoteIds?.length,
-    selectedTemplateId,
+    enhancedNoteCount,
+    templateId,
     hasTranscript,
     sessionMode,
     batchError,
+    enabled,
   ]);
 }
 
diff --git a/apps/desktop/src/session/index.tsx b/apps/desktop/src/session/index.tsx
@@ -12,14 +12,20 @@ import {
   type NoteInputHandle,
 } from "./components/note-input";
 import {
+  createEditorTabs,
   Header as NoteInputHeader,
-  useEditorTabs,
 } from "./components/note-input/header";
 import { SearchProvider } from "./components/note-input/search/context";
 import { OuterHeader } from "./components/outer-header";
 import { SessionSurface } from "./components/session-surface";
-import { useCurrentNoteTab } from "./components/shared";
+import {
+  computeCurrentNoteTab,
+  getCanShowTranscript,
+  useHasTranscript,
+} from "./components/shared";
 import { useAutoEnhance } from "./hooks/useAutoEnhance";
+import { useEnsureDefaultSummaryFromState } from "./hooks/useEnhancedNotes";
+import { useCanShowInsights } from "./insights/past-notes";
 import { shouldShowSessionTopAudioPlayer } from "./top-audio-player";
 
 import * as AudioPlayer from "~/audio-player";
@@ -155,14 +161,15 @@ function TabContentNoteInner({
       main.STORE_ID,
     ) ?? [];
   const firstEnhancedNoteId = enhancedNoteIds[0];
+  const contentHydrated = useHydrateSessionContent(sessionId);
   useEnsureDefaultSummaryFromState({
     batchError: Boolean(batchError),
+    enabled: contentHydrated,
     enhancedNoteCount: enhancedNoteIds.length,
     hasTranscript,
     sessionId,
     sessionMode,
   });
-  const contentHydrated = useHydrateSessionContent(sessionId);
   const updateSessionTabState = useTabs((state) => state.updateSessionTabState);
 
   const { skipReason } = useAutoEnhance(tab);

Original file line number	Diff line number	Diff line change
`@@ -1568,7 +1568,7 @@ export function useEditorTabs({`
`1568`	`1568`	`});`
`1569`	`1569`	`}`
`1570`	`1570`
`1571`		`-function createEditorTabs({`
	`1571`	`+export function createEditorTabs({`
`1572`	`1572`	`enhancedNoteIds,`
`1573`	`1573`	`canShowInsights,`
`1574`	`1574`	`canShowTranscript,`