@tt-a1i/openpi 0.3.1 → 0.5.0

package/extensions/sessions/index.ts

@@ -5,22 +5,36 @@ import type {
 } from "@earendil-works/pi-coding-agent";
 import {
   DynamicBorder,
-  SessionManager,
   keyHint,
+  SessionManager,
 } from "@earendil-works/pi-coding-agent";
 import {
   CancellableLoader,
   Container,
   Key,
-  SelectList,
+  matchesKey,
   type SelectItem,
+  SelectList,
   Spacer,
   Text,
-  matchesKey,
   truncateToWidth,
   visibleWidth,
   wrapTextWithAnsi,
 } from "@earendil-works/pi-tui";
+import { hintLine } from "../shared/screen-chrome.ts";
+import {
+  createSessionStatsLoader,
+  type SessionStatsState,
+} from "./git-stats.js";
+import {
+  createSessionPreviewCache,
+  measureSessionPreviewBytes,
+  previewCacheKey,
+} from "./preview-cache.js";
+import {
+  loadSessionPreviewData,
+  readPreviewFileIdentity,
+} from "./preview-loader.js";
 import {
   buildPreviewError,
   buildSessionDescription,
@@ -28,14 +42,15 @@ import {
   buildSessionPreview,
   buildSessionSearchEntries,
   filterSessionEntries,
+  formatRelativeTime,
   getSessionPaneLayout,
-  parseLimit,
   type PreviewBlock,
+  type PreviewMessageLike,
+  parseLimit,
+  selectSessionStatsWindow,
   type SessionInfoLike,
   type SessionPreview,
-  formatRelativeTime,
 } from "./sessions.js";
-import { createSessionStatsLoader, type SessionStats } from "./git-stats.js";
 
 const DEFAULT_VISIBLE = 12;
 const SNIPPET_MAX = 60;
@@ -82,7 +97,7 @@ const themeText = (
 ): string => {
   if (kind === "title") return theme.fg("accent", theme.bold(text));
   if (kind === "subtitle") return theme.fg("dim", text);
-  if (kind === "rule") return theme.fg("border", text);
+  if (kind === "rule") return theme.fg("borderMuted", text);
   if (kind === "user") return theme.fg("accent", theme.bold(text));
   if (kind === "assistant") return theme.fg("warning", theme.bold(text));
   if (kind === "tool") return theme.fg("muted", theme.bold(text));
@@ -290,20 +305,16 @@ const renderPreviewBlock = (
   return renderTextBlock(`◇ ${block.label}`, block.text, width, theme, "muted");
 };
 
-/** Cached across picker openings, while the loader bounds process-wide Git work. */
-const statsLoader = createSessionStatsLoader();
-const statsCache = statsLoader.cache;
-
 const formatItemLabel = (
   session: SessionInfoLike,
   width: number,
   theme: any,
-  statsCache: Map<string, SessionStats>,
+  statsState: SessionStatsState | undefined,
 ): string => {
   const itemWidth = width - 4;
   const timeStr = formatRelativeTime(session.modified);
 
-  const stats = statsCache.get(session.path);
+  const stats = statsState?.status === "ready" ? statsState.stats : undefined;
   let statsStr = "";
   let statsLen = 0;
   if (stats && (stats.add > 0 || stats.mod > 0 || stats.del > 0)) {
@@ -318,6 +329,12 @@ const formatItemLabel = (
       (stats.del > 0 ? `${stats.del}`.length + 1 : 0) +
       parts.length -
       1;
+  } else if (statsState?.status === "pending") {
+    statsStr = theme.fg("dim", "…");
+    statsLen = 1;
+  } else if (statsState?.status === "unavailable") {
+    statsStr = theme.fg("warning", "?");
+    statsLen = 1;
   }
 
   const title = buildSessionLabel(session);
@@ -357,31 +374,20 @@ const renderPreview = (
 ): { lines: string[]; totalLines: number; maxScroll: number } => {
   const raw: string[] = [];
 
+  // Left-aligned, like every other OpenPI heading: centred titles read as a
+  // different application than the panel they sit inside, and they wander as
+  // the pane resizes.
   if (!preview) {
-    raw.push(
-      " ".repeat(Math.max(0, Math.floor((width - 7) / 2))) +
-        themeText(theme, "title", "Preview"),
-    );
-    raw.push(
-      " ".repeat(Math.max(0, Math.floor((width - 25) / 2))) +
-        themeText(theme, "subtitle", "Loading selected session…"),
-    );
+    raw.push(themeText(theme, "title", "Preview"));
+    raw.push(themeText(theme, "subtitle", "Loading selected session…"));
   } else {
-    const titleStr = "Thread Preview";
-    const titleColor =
+    const titleStr = "Thread preview";
+    raw.push(
       focus === "preview"
         ? themeText(theme, "title", titleStr)
-        : themeText(theme, "subtitle", titleStr);
-    const titlePadding = " ".repeat(
-      Math.max(0, Math.floor((width - titleStr.length) / 2)),
+        : themeText(theme, "subtitle", titleStr),
     );
-    raw.push(`${titlePadding}${titleColor}`);
-
-    const subStr = preview.subtitle;
-    const subPadding = " ".repeat(
-      Math.max(0, Math.floor((width - visibleWidth(subStr)) / 2)),
-    );
-    raw.push(`${subPadding}${themeText(theme, "subtitle", subStr)}`);
+    raw.push(themeText(theme, "subtitle", preview.subtitle));
 
     raw.push(themeText(theme, "rule", "─".repeat(Math.max(0, width))));
 
@@ -438,10 +444,10 @@ const renderPreview = (
       if (i >= thumbStart && i < thumbStart + thumbSize) {
         scrollChar = theme.fg("text", "█");
       } else {
-        scrollChar = theme.fg("border", "│");
+        scrollChar = theme.fg("borderMuted", "│");
       }
     } else {
-      scrollChar = theme.fg("border", "│");
+      scrollChar = theme.fg("borderMuted", "│");
     }
 
     visible.push(padAnsiRight(line, width - 1) + scrollChar);
@@ -452,14 +458,28 @@ const renderPreview = (
 
 const loadSessionPreview = async (
   session: SessionInfoLike,
+  cache: ReturnType<typeof createSessionPreviewCache>,
+  signal: AbortSignal,
 ): Promise<SessionPreview> => {
-  try {
-    const manager = SessionManager.open(session.path);
-    const context = manager.buildSessionContext();
-    return buildSessionPreview(session, context.messages as any[]);
-  } catch (error) {
-    return buildPreviewError(session, error);
-  }
+  const initialIdentity = await readPreviewFileIdentity(session.path);
+  const cached = cache.get(previewCacheKey(initialIdentity));
+  if (cached) return cached;
+
+  const data = await loadSessionPreviewData(session.path, { signal });
+  const preview = buildSessionPreview(
+    session,
+    data.messages as PreviewMessageLike[],
+    {
+      totalMessages: data.totalMessages,
+      truncatedBytes: data.truncatedBytes,
+    },
+  );
+  cache.set(
+    previewCacheKey(data.identity),
+    preview,
+    measureSessionPreviewBytes(preview),
+  );
+  return preview;
 };
 
 async function listSessions(
@@ -474,7 +494,9 @@ async function listSessions(
   const sessions = await ctx.ui.custom<SessionInfoLike[] | null>(
     (tui, theme, _kb, done) => {
       const container = new Container();
-      const borderColor = (text: string) => theme.fg("border", text);
+      // Same tone as the split-pane frame and every other OpenPI panel; this
+      // was the last `border` call left in the package.
+      const borderColor = (text: string) => theme.fg("borderMuted", text);
 
       const loader = new CancellableLoader(
         tui,
@@ -559,12 +581,17 @@ async function showSessionPicker(
       let previewScrollOffset = 0;
       let toolsExpanded = false;
       let thinkingVisible = false;
-      const previewCache = new Map<string, SessionPreview>();
+      const previewCache = createSessionPreviewCache();
       let activePreview: SessionPreview | undefined;
       let previewTimer: ReturnType<typeof setTimeout> | undefined;
+      let previewController: AbortController | undefined;
       let previewSeq = 0;
-      let statsController = new AbortController();
-      let statsGeneration = 0;
+      // Stats use a picker-scoped, per-query first-observation cache. Rows that
+      // become visible later may observe later repository state; reopening the
+      // picker refreshes every row without polling repositories while idle.
+      const statsLoader = createSessionStatsLoader();
+      let statsUniverseVersion = 0;
+      let statsWindowSignature = "";
       let workspaceLoadSeq = 0;
       let disposed = false;
       let settled = false;
@@ -573,14 +600,22 @@ async function showSessionPicker(
       let showAllWorkspaces = false;
       let isLoading = false;
 
+      const cancelPreviewLoad = () => {
+        previewSeq++;
+        if (previewTimer) clearTimeout(previewTimer);
+        previewTimer = undefined;
+        previewController?.abort();
+        previewController = undefined;
+      };
+
       const disposePicker = () => {
         if (disposed) return;
         disposed = true;
         workspaceLoadSeq++;
-        statsGeneration++;
-        statsController.abort();
-        previewSeq++;
-        if (previewTimer) clearTimeout(previewTimer);
+        statsLoader.cancel();
+        cancelPreviewLoad();
+        previewCache.clear();
+        activePreview = undefined;
       };
       const finishPicker = (result: SessionInfoLike | null) => {
         if (settled) return;
@@ -588,30 +623,29 @@ async function showSessionPicker(
         disposePicker();
         done(result);
       };
-      const previewKey = (session: SessionInfoLike): string =>
-        `${session.path}:${session.modified.getTime()}`;
-
-      const cancelStatsLoad = () => {
-        statsGeneration++;
-        statsController.abort();
-      };
-      const triggerStatsLoad = (list: SessionInfoLike[]) => {
-        cancelStatsLoad();
-        statsController = new AbortController();
-        const generation = statsGeneration;
-        const signal = statsController.signal;
-        void statsLoader.load(list, signal, () => {
-          if (disposed || signal.aborted || generation !== statsGeneration)
-            return;
-          tui.requestRender();
+      const ensureStatsWindowLoad = (visibleCount: number) => {
+        const targets = selectSessionStatsWindow(
+          filteredEntries.map((entry) => entry.session),
+          selectedPath,
+          visibleCount,
+        );
+        const signature = `${statsUniverseVersion}:${targets
+          .map((session) => session.path)
+          .join("\0")}`;
+        if (signature === statsWindowSignature) return;
+        statsWindowSignature = signature;
+        void statsLoader.reconcile(targets, sorted, () => {
+          if (!disposed) tui.requestRender();
         });
       };
 
-      triggerStatsLoad(sorted);
-
       const loadWorkspaceSessions = async (allWorkspaces: boolean) => {
         const loadSeq = ++workspaceLoadSeq;
-        cancelStatsLoad();
+        statsLoader.cancel();
+        statsWindowSignature = "";
+        cancelPreviewLoad();
+        previewCache.clear();
+        activePreview = undefined;
         isLoading = true;
         tui.requestRender();
         try {
@@ -624,11 +658,11 @@ async function showSessionPicker(
           if (disposed || loadSeq !== workspaceLoadSeq) return;
 
           sorted = sortSessions(results);
+          statsUniverseVersion++;
           for (const s of sorted) {
             sessionByPath.set(s.path, s);
           }
           entries = buildSessionSearchEntries(sorted);
-          triggerStatsLoad(sorted);
 
           filteredEntries = filterSessionEntries(entries, filter);
           const matchedIndex = filteredEntries.findIndex(
@@ -656,6 +690,7 @@ async function showSessionPicker(
       };
 
       const schedulePreviewLoad = () => {
+        cancelPreviewLoad();
         previewScrollOffset = 0;
         const session = sessionByPath.get(selectedPath);
         if (!session) {
@@ -663,28 +698,45 @@ async function showSessionPicker(
           return;
         }
 
-        const key = previewKey(session);
-        const cached = previewCache.get(key);
-        if (cached) {
-          activePreview = cached;
-          return;
-        }
-
         activePreview = {
           title: buildSessionLabel(session),
           subtitle: `${session.modified.toLocaleString()} · loading preview`,
           blocks: [{ kind: "notice", text: "Loading selected session…" }],
         };
 
-        if (previewTimer) clearTimeout(previewTimer);
-        const seq = ++previewSeq;
+        const seq = previewSeq;
         previewTimer = setTimeout(() => {
-          void loadSessionPreview(session).then((preview) => {
-            if (seq !== previewSeq || selectedPath !== session.path) return;
-            previewCache.set(key, preview);
-            activePreview = preview;
-            tui.requestRender();
-          });
+          previewTimer = undefined;
+          const controller = new AbortController();
+          previewController = controller;
+          void loadSessionPreview(session, previewCache, controller.signal)
+            .then((preview) => {
+              if (
+                controller.signal.aborted ||
+                seq !== previewSeq ||
+                selectedPath !== session.path
+              ) {
+                return;
+              }
+              activePreview = preview;
+              tui.requestRender();
+            })
+            .catch((error) => {
+              if (
+                controller.signal.aborted ||
+                seq !== previewSeq ||
+                selectedPath !== session.path
+              ) {
+                return;
+              }
+              activePreview = buildPreviewError(session, error);
+              tui.requestRender();
+            })
+            .finally(() => {
+              if (previewController === controller) {
+                previewController = undefined;
+              }
+            });
         }, PREVIEW_LOAD_DEBOUNCE_MS);
       };
 
@@ -700,7 +752,12 @@ async function showSessionPicker(
       ): SelectItem[] =>
         current.map((entry) => ({
           value: entry.session.path,
-          label: formatItemLabel(entry.session, listWidth, theme, statsCache),
+          label: formatItemLabel(
+            entry.session,
+            listWidth,
+            theme,
+            statsLoader.get(entry.session),
+          ),
         }));
 
       const rebuild = () => {
@@ -732,24 +789,25 @@ async function showSessionPicker(
         if (isLoading) {
           container.addChild(new Spacer(1));
           container.addChild(
-            new Text(theme.fg("muted", "  Loading sessions..."), 1, 0),
+            new Text(theme.fg("muted", "  Loading sessions…"), 1, 0),
           );
           container.addChild(new Spacer(1));
         } else {
-          const items = buildItems(filteredEntries, width);
-          selectList = new SelectList(
-            items,
-            Math.max(1, Math.min(maxVisible, Math.max(items.length, 1))),
-            {
-              selectedPrefix: (text) =>
-                theme.fg(focus === "list" ? "accent" : "muted", text),
-              selectedText: (text) =>
-                theme.fg(focus === "list" ? "accent" : "muted", text),
-              description: (text) => theme.fg("muted", text),
-              scrollInfo: (text) => theme.fg("dim", text),
-              noMatch: () => theme.fg("warning", "  No matching sessions"),
-            },
+          const effectiveVisible = Math.max(
+            1,
+            Math.min(maxVisible, Math.max(filteredEntries.length, 1)),
           );
+          ensureStatsWindowLoad(effectiveVisible);
+          const items = buildItems(filteredEntries, width);
+          selectList = new SelectList(items, effectiveVisible, {
+            selectedPrefix: (text) =>
+              theme.fg(focus === "list" ? "accent" : "muted", text),
+            selectedText: (text) =>
+              theme.fg(focus === "list" ? "accent" : "muted", text),
+            description: (text) => theme.fg("muted", text),
+            scrollInfo: (text) => theme.fg("dim", text),
+            noMatch: () => theme.fg("warning", "  No matching sessions"),
+          });
           const selectedIndex = filteredEntries.findIndex(
             (entry) => entry.session.path === selectedPath,
           );
@@ -762,7 +820,15 @@ async function showSessionPicker(
         }
         container.addChild(
           new Text(
-            theme.fg("dim", "↑↓ navigate • enter open • esc cancel"),
+            hintLine(
+              theme,
+              [
+                ["↑↓", "navigate"],
+                ["enter", "open"],
+                ["esc", "cancel"],
+              ],
+              Math.max(1, width - 2),
+            ),
             1,
             0,
           ),
@@ -777,29 +843,29 @@ async function showSessionPicker(
         listWidth: number,
         previewWidth: number,
       ): string => {
-        const leftTitle = " Switch Thread ";
+        const leftTitle = " sessions ";
+        const rightTitle = " preview ";
         const left = `┌─${leftTitle}${"─".repeat(Math.max(0, listWidth - leftTitle.length - 2))}`;
-        const right = "─".repeat(Math.max(0, previewWidth - 1)) + "┐";
-        return `${theme.fg("border", left)}${theme.fg("border", "─┬─")}${theme.fg("border", right)}`;
+        const right =
+          `─${rightTitle}${"─".repeat(Math.max(0, previewWidth - rightTitle.length - 2))}` +
+          "┐";
+        return `${theme.fg("borderMuted", left)}${theme.fg("borderMuted", "─┬─")}${theme.fg("borderMuted", right)}`;
       };
 
       const buildBottomBorder = (
         listWidth: number,
         previewWidth: number,
-        previewStats: string,
       ): string => {
-        const help = showAllWorkspaces
-          ? " Opt+W/Ctrl+T current workspace  ·  Esc close "
-          : " Opt+W/Ctrl+T all workspaces  ·  Esc close ";
         const left = `└${"─".repeat(Math.max(0, listWidth - 1))}`;
-        const right = `${"─".repeat(Math.max(0, previewWidth - help.length - 1))}${help}┘`;
-        return `${theme.fg("border", left)}${theme.fg("border", "─┴─")}${theme.fg("border", right)}`;
+        const right = `${"─".repeat(Math.max(0, previewWidth - 1))}┘`;
+        return `${theme.fg("borderMuted", left)}${theme.fg("borderMuted", "─┴─")}${theme.fg("borderMuted", right)}`;
       };
 
       const renderSplitPane = (width: number): string[] => {
         const layout = getSessionPaneLayout(width);
         const termRows = Math.max(12, tui.terminal?.rows ?? 24);
-        const contentHeight = Math.max(8, termRows - 2);
+        // Frame (2) + hint line (1).
+        const contentHeight = Math.max(8, termRows - 3);
         const filterLine = filter.length
           ? `${theme.fg("muted", "Filter: ")}${theme.fg("text", filter)}`
           : `${theme.fg("muted", "Filter: ")}${theme.fg("dim", "type to filter")}`;
@@ -811,23 +877,21 @@ async function showSessionPicker(
           leftLines.push("");
           leftLines.push(theme.fg("muted", "  Loading sessions..."));
         } else {
-          const items = buildItems(filteredEntries, layout.listWidth);
-          selectList = new SelectList(
-            items,
-            Math.max(
-              listHeight,
-              Math.min(maxVisible, Math.max(items.length, 1)),
-            ),
-            {
-              selectedPrefix: (text) =>
-                theme.fg(focus === "list" ? "accent" : "muted", text),
-              selectedText: (text) =>
-                theme.fg(focus === "list" ? "accent" : "muted", text),
-              description: (text) => theme.fg("muted", text),
-              scrollInfo: (text) => theme.fg("dim", text),
-              noMatch: () => theme.fg("warning", "  No matching sessions"),
-            },
+          const effectiveVisible = Math.max(
+            listHeight,
+            Math.min(maxVisible, Math.max(filteredEntries.length, 1)),
           );
+          ensureStatsWindowLoad(effectiveVisible);
+          const items = buildItems(filteredEntries, layout.listWidth);
+          selectList = new SelectList(items, effectiveVisible, {
+            selectedPrefix: (text) =>
+              theme.fg(focus === "list" ? "accent" : "muted", text),
+            selectedText: (text) =>
+              theme.fg(focus === "list" ? "accent" : "muted", text),
+            description: (text) => theme.fg("muted", text),
+            scrollInfo: (text) => theme.fg("dim", text),
+            noMatch: () => theme.fg("warning", "  No matching sessions"),
+          });
           const selectedIndex = filteredEntries.findIndex(
             (entry) => entry.session.path === selectedPath,
           );
@@ -861,26 +925,41 @@ async function showSessionPicker(
           previewScrollOffset,
           renderedPreview.maxScroll,
         );
-        const modeHints = `t ${toolsExpanded ? "compact" : "tools"} • h ${thinkingVisible ? "hide thinking" : "thinking"}`;
-        const previewStats =
-          renderedPreview.maxScroll > 0
-            ? ` ${previewScrollOffset + 1}-${Math.min(previewScrollOffset + contentHeight, renderedPreview.totalLines)}/${renderedPreview.totalLines} • pgup/pgdn • ${modeHints} `
-            : ` esc/enter • ${modeHints} `;
+        // Hints live on their own line under the frame instead of being packed
+        // into the bottom border, where they had to compete with the border for
+        // the same row and lost the keys in a wall of dim text.
+        const hints = hintLine(
+          theme,
+          [
+            renderedPreview.maxScroll > 0
+              ? ([
+                  "",
+                  `${previewScrollOffset + 1}-${Math.min(previewScrollOffset + contentHeight, renderedPreview.totalLines)}/${renderedPreview.totalLines}`,
+                ] as const)
+              : undefined,
+            renderedPreview.maxScroll > 0
+              ? (["pgup/pgdn", "scroll"] as const)
+              : undefined,
+            ["t", toolsExpanded ? "compact" : "tools"],
+            ["h", thinkingVisible ? "hide thinking" : "thinking"],
+            [
+              "opt+w/ctrl+t",
+              showAllWorkspaces ? "current workspace" : "all workspaces",
+            ],
+            ["esc", "close"],
+          ],
+          width,
+        );
 
         const lines = [buildTopBorder(layout.listWidth, layout.previewWidth)];
         for (let i = 0; i < contentHeight; i++) {
           const left = padAnsiRight(leftLines[i] ?? "", layout.listWidth);
           const right =
             renderedPreview.lines[i] ?? " ".repeat(layout.previewWidth);
-          lines.push(`${left}${theme.fg("border", " │ ")}${right}`);
+          lines.push(`${left}${theme.fg("borderMuted", " │ ")}${right}`);
         }
-        lines.push(
-          buildBottomBorder(
-            layout.listWidth,
-            layout.previewWidth,
-            previewStats,
-          ),
-        );
+        lines.push(buildBottomBorder(layout.listWidth, layout.previewWidth));
+        lines.push(hints);
         return lines.map((line) => truncateToWidth(line, width, "", true));
       };
 
@@ -894,8 +973,11 @@ async function showSessionPicker(
           return renderSplitPane(width);
         },
         invalidate: () => {
+          cancelPreviewLoad();
           previewCache.clear();
+          activePreview = undefined;
           rebuild();
+          schedulePreviewLoad();
         },
         dispose: disposePicker,
         handleInput: (data) => {