`d47e25d`

perf: skip read_session when target view mode is terminal

Authored by

espadonne 1 month ago

SHA: d47e25dd0eadf616227796945cd3e94eea6ecddf
Parents: 71832a5
Tree: fbfe8c1

2 changed files

Status	File	+	-
M	`src/components/ViewerPane.tsx`	16	5
M	`src/lib/store/sessions.ts`	102	24

src/components/ViewerPane.tsxmodified

 -import { lazy, Suspense, useMemo } from "react";
 +import { lazy, Suspense, useEffect, useMemo } from "react";
  import { ArchiveChatBanner } from "@/components/ArchiveChatBanner";
  import { ChatInput } from "@/components/ChatInput";
    const ptyIds = useSessionStore((s) => s.ptyIds);
    const toggleViewerMode = useSessionStore((s) => s.toggleViewerMode);
    const closeSessionPty = useSessionStore((s) => s.closeSessionPty);
 +  const ensureDetailFor = useSessionStore((s) => s.ensureDetailFor);
    // Prefer the pendingSummary when a new session is mid-load — the
    // header should flip to the *clicked* title instantly, even if
      );
+   }
 -  // If the header is showing a pending session that hasn't loaded
 -  // yet (cache miss), render the skeleton so the user sees an
 -  // instant title-flip + shimmering body instead of a blank pane
 -  // that looks frozen.
    const showingSkeleton = pendingSummary !== null && detail === null;
    const summary = headerSummary;
    const mode = viewerMode.get(summary.id) ?? "cards";
    const hasLivePty = ptyIds.has(summary.id);
 +  // Lazy-load detail if the user is in cards mode for a session
 +  // whose body we skipped fetching on click (because it defaulted
 +  // to terminal mode). Only fires when the detail we need genuinely
 +  // isn't already loaded or in flight.
 +  const needsLazyCardsLoad =
 +    mode === "cards" &&
 +    !isArchive &&
 +    !loading &&
 +    (detail === null || detail.summary.id !== summary.id);
 +  useEffect(() => {
 +    if (!needsLazyCardsLoad) return;
 +    void ensureDetailFor(summary);
 +  }, [needsLazyCardsLoad, summary, ensureDetailFor]);
++
    return (
      <Shell
        subtitle={summary.title}

src/lib/store/sessions.tsmodified

   *  back to A" feel instant without blowing the heap. */
  const DETAIL_CACHE_CAP = 5;
 -/** Insertion-order-based LRU update. JavaScript `Map` iterates in
 - *  insertion order, so to mark a key as "most recently used" we
 - *  delete-then-set. Evicts the oldest entry when the cap is
 - *  exceeded. Returns a new Map (does not mutate the input). */
 +/** Returns a new Map with `id → detail` marked most-recently-used.
 + *  `pinnedId` (the currently-selected session) is never evicted
 + *  even when it's the oldest entry — otherwise opening 5 other
 + *  sessions would silently drop the one the user is looking at,
 + *  and clicking back to it would be a cache miss. */
  function touchDetailCache(
    cache: Map<string, SessionDetail>,
    id: string,
    detail: SessionDetail,
 +  pinnedId: string | null,
  ): Map<string, SessionDetail> {
    const next = new Map(cache);
    next.delete(id);
    next.set(id, detail);
    while (next.size > DETAIL_CACHE_CAP) {
 -    const oldest = next.keys().next().value;
 -    if (oldest === undefined) break;
 -    next.delete(oldest);
 +    let evict: string | undefined;
 +    for (const key of next.keys()) {
 +      if (key !== pinnedId) {
 +        evict = key;
 +        break;
 +      }
 +    }
 +    if (evict === undefined) break;
 +    next.delete(evict);
+   }
    return next;
+ }
    /** Called when the user clicks a session row. Takes the full
     *  SessionSummary so we can thread `source` through to the
 -   *  `read_session` dispatcher. */
 +   *  `read_session` dispatcher. Only fetches the full session
 +   *  detail when the resolved view mode is `cards` — terminal
 +   *  mode skips the fetch entirely to avoid reparsing giant
 +   *  JSONL files on session switch. */
    selectSession: (session: SessionSummary) => Promise<void>;
 +  /** Trigger a lazy detail load for a session that the user is
 +   *  about to view in cards mode (typically after toggling from
 +   *  terminal mode). No-op when the detail is already loaded. */
 +  ensureDetailFor: (summary: SessionSummary) => Promise<void>;
    rescan: () => Promise<void>;
    subscribeToChanges: () => Promise<void>;
    async selectSession(session) {
      if (get().selectedSessionId === session.id) return;
 -    // Default the viewer mode for this session if it hasn't been set
 -    // yet. Archive sessions are locked to cards. Disk sessions open
 -    // in cards mode by default — terminal mode is opt-in per session
 -    // via the toggle (new-thread entries default to terminal inside
 -    // `beginNewSession`). CRITICAL: we do NOT touch viewerMode or
 -    // ptyIds for the *previous* session here — background terminals
 -    // must keep running across session switches. See the
 -    // codex-parallel-threads goal in the v1.1 plan.
 +    // CRITICAL: we do NOT touch viewerMode or ptyIds for the
 +    // *previous* session — background terminals must keep running
 +    // across session switches (codex-parallel-threads).
      const cached = get().detailCache.get(session.id) ?? null;
 +    // Check the resolved view mode for this session. If the user is
 +    // going to see it as a PTY-backed terminal we skip `readSession`
 +    // entirely — parsing 171 MB of JSONL for a session that will be
 +    // rendered as an xterm is pure waste and the largest source of
 +    // session-switch jank we've measured.
 +    const resolvedMode =
 +      get().viewerMode.get(session.id) ??
 +      (session.source === "archive" ? "cards" : "cards");
 +    const needsDetail = resolvedMode === "cards";
++
      set((s) => {
        const nextMode = new Map(s.viewerMode);
        if (!nextMode.has(session.id)) {
+       }
        return {
          selectedSessionId: session.id,
 -        // Cache hit → swap content instantly (main-thread-free).
 -        // Cache miss → clear stale detail, let the viewer render
 -        // its skeleton using `pendingSummary` for the header.
          detail: cached,
 -        pendingSummary: cached ? null : session,
 +        pendingSummary: cached || !needsDetail ? null : session,
          viewerMode: nextMode,
 -        loading: { ...s.loading, detail: true },
 +        loading: { ...s.loading, detail: needsDetail && !cached },
          error: null,
        };
      });
++
 +    if (!needsDetail) return;
++
      // Race guard: if the user clicks session B while session A's
      // readSession is still in flight, A's `set` would otherwise
 -    // overwrite B's state a moment later. Check the still-selected
 -    // id after each await and bail if the user has moved on.
 +    // overwrite B's state a moment later.
      const targetId = session.id;
      try {
        const detail = await readSession(
        set((s) => ({
          detail,
          pendingSummary: null,
 -        detailCache: touchDetailCache(s.detailCache, session.id, detail),
 +        detailCache: touchDetailCache(
 +          s.detailCache,
 +          session.id,
 +          detail,
 +          s.selectedSessionId,
 +        ),
          loading: { ...s.loading, detail: false },
        }));
      } catch (err) {
+     }
    },
 +  /** Lazy-load the full session detail on demand. Called by the
 +   *  ViewerPane when the user toggles to cards mode and we don't
 +   *  have the detail yet (because selectSession skipped it for a
 +   *  terminal-default session). Idempotent — bails if the detail
 +   *  is already loaded or a load is in flight. */
 +  async ensureDetailFor(summary) {
 +    const s = get();
 +    if (s.detail?.summary.id === summary.id) return;
 +    if (s.loading.detail && s.pendingSummary?.id === summary.id) return;
 +    const cached = s.detailCache.get(summary.id);
 +    if (cached) {
 +      set((state) => ({
 +        detail: cached,
 +        detailCache: touchDetailCache(
 +          state.detailCache,
 +          summary.id,
 +          cached,
 +          state.selectedSessionId,
 +        ),
 +      }));
 +      return;
 +    }
 +    set((state) => ({
 +      pendingSummary: summary,
 +      loading: { ...state.loading, detail: true },
 +    }));
 +    try {
 +      const detail = await readSession(
 +        summary.projectId,
 +        summary.id,
 +        summary.source,
 +      );
 +      if (get().selectedSessionId !== summary.id) return;
 +      set((state) => ({
 +        detail,
 +        pendingSummary: null,
 +        detailCache: touchDetailCache(
 +          state.detailCache,
 +          summary.id,
 +          detail,
 +          state.selectedSessionId,
 +        ),
 +        loading: { ...state.loading, detail: false },
 +      }));
 +    } catch (err) {
 +      if (get().selectedSessionId !== summary.id) return;
 +      set((state) => ({
 +        pendingSummary: null,
 +        loading: { ...state.loading, detail: false },
 +        error: formatError(err),
 +      }));
 +    }
 +  },
++
    async rescan() {
      set((s) => ({ loading: { ...s.loading, projects: true }, error: null }));
      try {