pi-agent-extensions 0.4.2 → 0.4.4

package/docs/dev/handoff/implementation-log.md

@@ -80,7 +80,7 @@ Implementing the `/handoff` command as specified in `docs/spec_handoff.md`. Foll
 | 3 | LLM extraction | Done | - | extraction.ts with retry logic |
 | 3 | Loader UI | Done | - | progress.ts with ProgressLoader + BorderedLoader fallback |
 | 4 | Editor review | Done | - | Using ctx.ui.editor() |
-| 4 | Session creation | Done | - | Using ctx.newSession() with parent tracking |
+| 4 | Session creation | Done | - | Using ctx.newSession() with parent tracking and withSession |
 | 5 | Non-UI mode | Done | - | Print to stdout |
 | 5 | Documentation | Done | - | docs/handoff.md |
 | 5 | Edge cases | Done | - | Error handling, model resolution |

package/docs/dev/handoff/spec.md

@@ -124,8 +124,8 @@ When goal is too short or vague (e.g., “continue”, “fix”):
    - Optionally prepend `/skill:<name>` if a skill was used last.
    - Optionally prepend a short handoff preamble to set expectations in the new thread.
 5. **Create new session**:
-   - `ctx.newSession({ parentSession: currentSessionFile })`
-   - `ctx.ui.setEditorText(compiledPrompt)`
+   - `ctx.newSession({ parentSession: currentSessionFile, withSession })`
+   - inside `withSession(newCtx)`, call `newCtx.ui.setEditorText(compiledPrompt)`
 
 ## Output Schema (LLM → Extension)
 ```json
@@ -441,8 +441,8 @@ The following decisions were made during implementation planning:
 - **Why**: Provides valuable context about the codebase state at handoff time
 
 #### Session Creation Flow
-- **Decision**: Use `ctx.newSession({ parentSession })` then `ctx.ui.setEditorText()`
-- **Why**: Creates proper session lineage tracking; setEditorText prefills the prompt for user to review and submit when ready
+- **Decision**: Use `ctx.newSession({ parentSession, withSession })` and perform editor setup inside `withSession(newCtx)`
+- **Why**: Creates proper session lineage tracking and avoids using a stale command context after session replacement; `newCtx.ui.setEditorText()` prefills the prompt for user review and submission
 
 #### Documentation
 - **Decision**: Create `docs/handoff.md` with usage and examples

package/extensions/handoff/index.ts

@@ -196,19 +196,21 @@ async function runHandoffCommand(
     return;
   }
 
-  // Create new session with parent tracking
+  // Create new session with parent tracking.
+  // Any post-session-replacement work must happen inside withSession,
+  // using the fresh ctx passed by Pi.
   const newSessionResult = await ctx.newSession({
     parentSession: currentSessionFile,
+    withSession: async (newCtx) => {
+      newCtx.ui.setEditorText(editedPrompt);
+      newCtx.ui.notify("Handoff ready. Press Enter to send.", "info");
+    },
   });
 
   if (newSessionResult.cancelled) {
     ctx.ui.notify("New session cancelled", "info");
     return;
   }
-
-  // Set the edited prompt in the editor for submission
-  ctx.ui.setEditorText(editedPrompt);
-  ctx.ui.notify("Handoff ready. Press Enter to send.", "info");
 }
 
 /**

package/extensions/sessions/index.ts

@@ -9,18 +9,27 @@ import {
   Spacer,
   Text,
   matchesKey,
+  truncateToWidth,
+  visibleWidth,
+  wrapTextWithAnsi,
 } from "@mariozechner/pi-tui";
 import {
+  buildPreviewError,
   buildSessionDescription,
   buildSessionLabel,
+  buildSessionPreview,
   buildSessionSearchEntries,
   filterSessionEntries,
+  getSessionPaneLayout,
   parseLimit,
+  type PreviewBlock,
   type SessionInfoLike,
+  type SessionPreview,
 } from "./sessions.js";
 
-const DEFAULT_VISIBLE = 5;
+const DEFAULT_VISIBLE = 12;
 const SNIPPET_MAX = 60;
+const PREVIEW_LOAD_DEBOUNCE_MS = 50;
 
 const isPrintable = (data: string): boolean => {
   if (data.length !== 1) return false;
@@ -37,6 +46,212 @@ const formatPlainLine = (session: SessionInfoLike): string => {
   return `${label}\t${description}`;
 };
 
+const padAnsiRight = (text: string, width: number): string => {
+  const truncated = truncateToWidth(text, width, "");
+  return `${truncated}${" ".repeat(Math.max(0, width - visibleWidth(truncated)))}`;
+};
+
+const themeText = (
+  theme: { fg: (color: any, text: string) => string; bold: (text: string) => string; italic?: (text: string) => string },
+  kind: "title" | "subtitle" | "rule" | "user" | "assistant" | "tool" | "error" | "muted" | "text" | "thinking",
+  text: string,
+): 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 === "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));
+  if (kind === "error") return theme.fg("error", text);
+  if (kind === "muted") return theme.fg("muted", text);
+  if (kind === "thinking") return theme.italic ? theme.italic(theme.fg("dim", text)) : theme.fg("dim", text);
+  return theme.fg("text", text);
+};
+
+interface PreviewRenderOptions {
+  toolsExpanded: boolean;
+  thinkingVisible: boolean;
+}
+
+const splitLines = (text: string): string[] => text.replace(/\r\n/g, "\n").split("\n");
+
+const compactText = (text: string, maxLines: number): { lines: string[]; hidden: number } => {
+  const lines = splitLines(text).map((line) => line.replace(/\s+$/g, "")).filter((line) => line.trim().length > 0);
+  if (lines.length <= maxLines) return { lines, hidden: 0 };
+  return { lines: lines.slice(0, maxLines), hidden: lines.length - maxLines };
+};
+
+const wrapStyled = (
+  prefix: string,
+  text: string,
+  width: number,
+  color: (line: string) => string,
+): string[] => {
+  const contentWidth = Math.max(1, width - visibleWidth(prefix));
+  const wrapped = wrapTextWithAnsi(color(text), contentWidth);
+  return wrapped.map((line) => `${prefix}${line}`);
+};
+
+const renderTextBlock = (
+  label: string,
+  text: string,
+  width: number,
+  theme: { fg: (color: any, text: string) => string; bold: (text: string) => string },
+  labelKind: "user" | "assistant" | "tool" | "muted" | "error" | "thinking",
+): string[] => {
+  const lines = [themeText(theme, labelKind, label)];
+  for (const rawLine of splitLines(text)) {
+    if (!rawLine.trim()) {
+      lines.push("");
+      continue;
+    }
+    lines.push(...wrapStyled("  ", rawLine.trimEnd(), width, (line) => theme.fg("text", line)));
+  }
+  return lines;
+};
+
+const isToolBlock = (block: PreviewBlock): boolean =>
+  block.kind === "toolCall" || block.kind === "toolResult" || block.kind === "bash";
+
+const summarizeToolRun = (blocks: PreviewBlock[]): string => {
+  const names = new Set<string>();
+  let outputLines = 0;
+  let hasError = false;
+
+  for (const block of blocks) {
+    if (block.kind === "toolCall") names.add(block.name);
+    if (block.kind === "toolResult") {
+      if (block.name) names.add(block.name);
+      outputLines += compactText(block.text, Number.MAX_SAFE_INTEGER).lines.length;
+      hasError ||= !!block.isError;
+    }
+    if (block.kind === "bash") {
+      names.add("bash");
+      outputLines += compactText(block.output ?? "", Number.MAX_SAFE_INTEGER).lines.length;
+      hasError ||= !!block.isError;
+    }
+  }
+
+  const nameList = Array.from(names).slice(0, 4).join(", ");
+  const moreNames = names.size > 4 ? ` +${names.size - 4}` : "";
+  const output = outputLines > 0 ? ` · ${outputLines} output lines` : "";
+  return `${hasError ? "✖" : "▸"} Tool activity · ${blocks.length} events${nameList ? ` · ${nameList}${moreNames}` : ""}${output} (press t)`;
+};
+
+const renderPreviewBlock = (
+  block: PreviewBlock,
+  width: number,
+  theme: { fg: (color: any, text: string) => string; bold: (text: string) => string; italic?: (text: string) => string },
+  options: PreviewRenderOptions,
+): string[] => {
+  if (block.kind === "notice") {
+    return wrapTextWithAnsi(themeText(theme, "muted", block.text), width);
+  }
+
+  if (block.kind === "user") {
+    return renderTextBlock("◆ User", block.text, width, theme, "user");
+  }
+
+  if (block.kind === "assistant") {
+    return renderTextBlock("● Assistant", block.text, width, theme, "assistant");
+  }
+
+  if (block.kind === "thinking") {
+    if (!options.thinkingVisible) return [themeText(theme, "thinking", "◌ Thinking hidden")];
+    return renderTextBlock("◌ Thinking", block.text, width, theme, "thinking");
+  }
+
+  if (block.kind === "toolCall") {
+    const header = `▸ Tool call · ${block.name}`;
+    if (!options.toolsExpanded || !block.args) return [themeText(theme, "tool", header)];
+    return [themeText(theme, "tool", header), ...wrapStyled("  ", block.args, width, (line) => theme.fg("muted", line))];
+  }
+
+  if (block.kind === "toolResult") {
+    const label = `${block.isError ? "✖" : "▸"} Tool result${block.name ? ` · ${block.name}` : ""}`;
+    const compact = compactText(block.text, options.toolsExpanded ? 200 : 4);
+    const lines = [themeText(theme, block.isError ? "error" : "tool", label)];
+    for (const line of compact.lines) {
+      lines.push(...wrapStyled("  ", line, width, (value) => theme.fg(block.isError ? "error" : "muted", value)));
+    }
+    if (compact.hidden > 0) lines.push(theme.fg("dim", `  … ${compact.hidden} output lines collapsed (press t to expand tools)`));
+    return lines;
+  }
+
+  if (block.kind === "bash") {
+    const label = `${block.isError ? "✖" : "▸"} Bash`;
+    const lines = [themeText(theme, block.isError ? "error" : "tool", label)];
+    if (block.command) lines.push(...wrapStyled("  ", `$ ${block.command}`, width, (line) => theme.fg("accent", line)));
+    const compact = compactText(block.output ?? "", options.toolsExpanded ? 200 : 4);
+    for (const line of compact.lines) {
+      lines.push(...wrapStyled("  ", line, width, (value) => theme.fg(block.isError ? "error" : "muted", value)));
+    }
+    if (compact.hidden > 0) lines.push(theme.fg("dim", `  … ${compact.hidden} output lines collapsed (press t to expand tools)`));
+    return lines;
+  }
+
+  if (block.kind === "summary") {
+    return renderTextBlock(`◇ ${block.label}`, block.text, width, theme, "muted");
+  }
+
+  return renderTextBlock(`◇ ${block.label}`, block.text, width, theme, "muted");
+};
+
+const renderPreview = (
+  preview: SessionPreview | undefined,
+  width: number,
+  height: number,
+  scrollOffset: number,
+  theme: { fg: (color: any, text: string) => string; bold: (text: string) => string; italic?: (text: string) => string },
+  options: PreviewRenderOptions,
+): { lines: string[]; totalLines: number; maxScroll: number } => {
+  const raw: string[] = [];
+
+  if (!preview) {
+    raw.push(themeText(theme, "title", "Preview"));
+    raw.push(themeText(theme, "subtitle", "Loading selected session…"));
+  } else {
+    raw.push(themeText(theme, preview.error ? "error" : "title", preview.title));
+    raw.push(themeText(theme, "subtitle", preview.subtitle));
+    raw.push(themeText(theme, "rule", "─".repeat(Math.max(0, width))));
+
+    for (let i = 0; i < preview.blocks.length; i++) {
+      const block = preview.blocks[i]!;
+      if (!options.toolsExpanded && isToolBlock(block)) {
+        const run: PreviewBlock[] = [];
+        while (i < preview.blocks.length && isToolBlock(preview.blocks[i]!)) {
+          run.push(preview.blocks[i]!);
+          i++;
+        }
+        i--;
+        if (raw.length > 3) raw.push("");
+        raw.push(...wrapTextWithAnsi(themeText(theme, "tool", summarizeToolRun(run)), width));
+        continue;
+      }
+
+      if (raw.length > 3) raw.push("");
+      raw.push(...renderPreviewBlock(block, width, theme, options));
+    }
+  }
+
+  const maxScroll = Math.max(0, raw.length - height);
+  const boundedOffset = Math.max(0, Math.min(scrollOffset, maxScroll));
+  const visible = raw.slice(boundedOffset, boundedOffset + height).map((line) => padAnsiRight(line, width));
+  while (visible.length < height) visible.push(" ".repeat(width));
+
+  return { lines: visible, totalLines: raw.length, maxScroll };
+};
+
+const loadSessionPreview = async (session: SessionInfoLike): 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);
+  }
+};
+
 async function listSessions(ctx: ExtensionCommandContext): Promise<SessionInfoLike[] | null> {
   if (!ctx.hasUI) {
     const sessions = await SessionManager.list(ctx.cwd);
@@ -113,10 +328,59 @@ async function showSessionPicker(
   const entries = buildSessionSearchEntries(sorted);
   const sessionByPath = new Map(sorted.map((session) => [session.path, session]));
 
-  return ctx.ui.custom<SessionInfoLike | null>((tui, theme, _kb, done) => {
+  return ctx.ui.custom<SessionInfoLike | null>((tui, theme, kb, done) => {
     let filter = "";
     let selectList: SelectList;
-    const container = new Container();
+    let filteredEntries = entries;
+    let selectedPath = sorted[0]?.path ?? "";
+    let previewScrollOffset = 0;
+    let toolsExpanded = false;
+    let thinkingVisible = false;
+    const previewCache = new Map<string, SessionPreview>();
+    let activePreview: SessionPreview | undefined;
+    let previewTimer: ReturnType<typeof setTimeout> | undefined;
+    let previewSeq = 0;
+
+    const previewKey = (session: SessionInfoLike): string => `${session.path}:${session.modified.getTime()}`;
+
+    const schedulePreviewLoad = () => {
+      previewScrollOffset = 0;
+      const session = sessionByPath.get(selectedPath);
+      if (!session) {
+        activePreview = undefined;
+        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;
+      previewTimer = setTimeout(() => {
+        void loadSessionPreview(session).then((preview) => {
+          if (seq !== previewSeq || selectedPath !== session.path) return;
+          previewCache.set(key, preview);
+          activePreview = preview;
+          tui.requestRender();
+        });
+      }, PREVIEW_LOAD_DEBOUNCE_MS);
+    };
+
+    const setSelectedPath = (path: string | undefined) => {
+      if (!path || path === selectedPath) return;
+      selectedPath = path;
+      schedulePreviewLoad();
+    };
 
     const buildItems = (current: typeof entries): SelectItem[] =>
       current.map((entry) => ({
@@ -126,8 +390,8 @@ async function showSessionPicker(
       }));
 
     const rebuild = () => {
-      const filtered = filterSessionEntries(entries, filter);
-      const items = buildItems(filtered);
+      filteredEntries = filterSessionEntries(entries, filter);
+      const items = buildItems(filteredEntries);
       const visible = Math.max(1, Math.min(maxVisible, Math.max(items.length, 1)));
 
       selectList = new SelectList(items, visible, {
@@ -138,32 +402,113 @@ async function showSessionPicker(
         noMatch: () => theme.fg("warning", "  No matching sessions"),
       });
 
+      const selectedIndex = filteredEntries.findIndex((entry) => entry.session.path === selectedPath);
+      if (selectedIndex >= 0) {
+        selectList.setSelectedIndex(selectedIndex);
+      } else {
+        selectedPath = filteredEntries[0]?.session.path ?? "";
+        selectList.setSelectedIndex(0);
+        schedulePreviewLoad();
+      }
+
       selectList.onSelect = (item) => {
         const session = sessionByPath.get(item.value) ?? null;
         done(session);
       };
       selectList.onCancel = () => done(null);
+      selectList.onSelectionChange = (item) => setSelectedPath(item.value);
+    };
 
+    const renderSinglePane = (width: number): string[] => {
+      const container = new Container();
       const filterLine = filter.length
         ? `${theme.fg("muted", "Filter: ")}${theme.fg("text", filter)}`
         : `${theme.fg("muted", "Filter: ")}${theme.fg("dim", "type to filter")}`;
 
-      container.clear();
       container.addChild(new DynamicBorder((text: string) => theme.fg("accent", text)));
       container.addChild(new Text(theme.fg("accent", theme.bold("Sessions")), 1, 0));
       container.addChild(new Text(filterLine, 1, 0));
       container.addChild(selectList);
       container.addChild(new Text(theme.fg("dim", "↑↓ navigate • enter open • esc cancel"), 1, 0));
       container.addChild(new DynamicBorder((text: string) => theme.fg("accent", text)));
+      return container.render(width);
+    };
+
+    const buildTopBorder = (listWidth: number, previewWidth: number): string => {
+      const leftTitle = " Sessions ";
+      const rightTitle = " Preview ";
+      const left = `┌─${leftTitle}${"─".repeat(Math.max(0, listWidth - leftTitle.length - 2))}`;
+      const right = `${rightTitle}${"─".repeat(Math.max(0, previewWidth - rightTitle.length - 1))}┐`;
+      return `${theme.fg("border", left)}${theme.fg("border", "─┬─")}${theme.fg("border", right)}`;
+    };
+
+    const buildBottomBorder = (listWidth: number, previewWidth: number, previewStats: string): string => {
+      const leftHelp = " ↑↓ list • type filter ";
+      const rightHelp = previewStats || " pgup/pgdn preview • esc cancel • enter open ";
+      const left = `└─${leftHelp}${"─".repeat(Math.max(0, listWidth - leftHelp.length - 2))}`;
+      const right = `${rightHelp}${"─".repeat(Math.max(0, previewWidth - rightHelp.length - 1))}┘`;
+      return `${theme.fg("border", left)}${theme.fg("border", "─┴─")}${theme.fg("border", 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);
+      const filterLine = filter.length
+        ? `${theme.fg("muted", "Filter: ")}${theme.fg("text", filter)}`
+        : `${theme.fg("muted", "Filter: ")}${theme.fg("dim", "type to filter")}`;
+      const listHeight = Math.max(1, contentHeight - 1);
+
+      // SelectList height is fixed at creation time; recreate it to use the current full-window height.
+      const items = buildItems(filteredEntries);
+      selectList = new SelectList(items, Math.max(listHeight, Math.min(maxVisible, Math.max(items.length, 1))), {
+        selectedPrefix: (text) => theme.fg("accent", text),
+        selectedText: (text) => theme.fg("accent", 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);
+      selectList.setSelectedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+      selectList.onSelect = (item) => done(sessionByPath.get(item.value) ?? null);
+      selectList.onCancel = () => done(null);
+      selectList.onSelectionChange = (item) => setSelectedPath(item.value);
+
+      const leftLines = [filterLine, ...selectList.render(layout.listWidth)].slice(0, contentHeight);
+      while (leftLines.length < contentHeight) leftLines.push("");
+
+      const renderedPreview = renderPreview(activePreview, layout.previewWidth, contentHeight, previewScrollOffset, theme, {
+        toolsExpanded,
+        thinkingVisible,
+      });
+      previewScrollOffset = Math.min(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} `;
+
+      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", " │ ")}${padAnsiRight(right, layout.previewWidth)}`);
+      }
+      lines.push(buildBottomBorder(layout.listWidth, layout.previewWidth, previewStats));
+      return lines.map((line) => truncateToWidth(line, width, "", true));
     };
 
     rebuild();
+    schedulePreviewLoad();
 
     return {
-      render: (width) => container.render(width),
+      render: (width) => {
+        const layout = getSessionPaneLayout(width);
+        if (layout.mode === "single") return renderSinglePane(width);
+        return renderSplitPane(width);
+      },
       invalidate: () => {
+        previewCache.clear();
         rebuild();
-        container.invalidate();
       },
       handleInput: (data) => {
         if (matchesKey(data, Key.backspace) || matchesKey(data, Key.delete)) {
@@ -175,6 +520,34 @@ async function showSessionPicker(
           return;
         }
 
+        const currentLayout = getSessionPaneLayout(tui.terminal?.columns ?? 80);
+        if (currentLayout.mode === "split") {
+          if (data === "t") {
+            toolsExpanded = !toolsExpanded;
+            previewScrollOffset = 0;
+            tui.requestRender();
+            return;
+          }
+          if (data === "h") {
+            thinkingVisible = !thinkingVisible;
+            previewScrollOffset = 0;
+            tui.requestRender();
+            return;
+          }
+
+          const pageSize = Math.max(4, (tui.terminal?.rows ?? 24) - 4);
+          if (matchesKey(data, Key.pageDown) || matchesKey(data, Key.ctrl("d"))) {
+            previewScrollOffset += pageSize;
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.pageUp) || matchesKey(data, Key.ctrl("u"))) {
+            previewScrollOffset = Math.max(0, previewScrollOffset - pageSize);
+            tui.requestRender();
+            return;
+          }
+        }
+
         if (isPrintable(data)) {
           filter += data;
           rebuild();
@@ -182,10 +555,38 @@ async function showSessionPicker(
           return;
         }
 
+        if (kb.matches(data, "tui.select.pageUp")) {
+          const currentIndex = Math.max(0, filteredEntries.findIndex((entry) => entry.session.path === selectedPath));
+          const nextIndex = Math.max(0, currentIndex - maxVisible);
+          selectList.setSelectedIndex(nextIndex);
+          setSelectedPath(filteredEntries[nextIndex]?.session.path);
+          tui.requestRender();
+          return;
+        }
+
+        if (kb.matches(data, "tui.select.pageDown")) {
+          const currentIndex = Math.max(0, filteredEntries.findIndex((entry) => entry.session.path === selectedPath));
+          const nextIndex = Math.min(filteredEntries.length - 1, currentIndex + maxVisible);
+          selectList.setSelectedIndex(nextIndex);
+          setSelectedPath(filteredEntries[nextIndex]?.session.path);
+          tui.requestRender();
+          return;
+        }
+
         selectList.handleInput(data);
         tui.requestRender();
       },
     };
+  }, {
+    overlay: true,
+    overlayOptions: {
+      anchor: "top-left",
+      row: 0,
+      col: 0,
+      width: "100%",
+      maxHeight: "100%",
+      margin: 0,
+    },
   });
 }
 

package/extensions/sessions/sessions.ts

@@ -5,6 +5,50 @@ export interface SessionInfoLike {
   modified: Date;
   firstMessage: string;
   path: string;
+  messageCount?: number;
+}
+
+export type PreviewContent =
+  | string
+  | Array<
+      | { type: "text"; text: string }
+      | { type: "image"; mimeType?: string }
+      | { type: "toolCall"; name: string; arguments?: Record<string, unknown> }
+      | { type: "thinking"; thinking?: string; redacted?: boolean }
+    >;
+
+export interface PreviewMessageLike {
+  role: string;
+  content?: PreviewContent;
+  toolName?: string;
+  isError?: boolean;
+  command?: string;
+  output?: string;
+  summary?: string;
+}
+
+export type PreviewBlock =
+  | { kind: "notice"; text: string }
+  | { kind: "user"; text: string }
+  | { kind: "assistant"; text: string }
+  | { kind: "thinking"; text: string; redacted?: boolean }
+  | { kind: "toolCall"; name: string; args?: string }
+  | { kind: "toolResult"; name?: string; text: string; isError?: boolean }
+  | { kind: "bash"; command: string; output?: string; isError?: boolean }
+  | { kind: "summary"; label: string; text: string }
+  | { kind: "custom"; label: string; text: string };
+
+export interface SessionPreview {
+  title: string;
+  subtitle: string;
+  blocks: PreviewBlock[];
+  error?: string;
+}
+
+export interface SessionPaneLayout {
+  mode: "single" | "split";
+  listWidth: number;
+  previewWidth: number;
 }
 
 export function parseLimit(args: string | undefined, defaultLimit = 5): number {
@@ -72,3 +116,133 @@ export function filterSessionEntries(entries: SessionSearchEntry[], filter: stri
 export function filterSessionInfos(sessions: SessionInfoLike[], filter: string): SessionInfoLike[] {
   return filterSessionEntries(buildSessionSearchEntries(sessions), filter).map((entry) => entry.session);
 }
+
+export function getSessionPaneLayout(width: number): SessionPaneLayout {
+  if (width < 80) {
+    return { mode: "single", listWidth: width, previewWidth: 0 };
+  }
+
+  const dividerWidth = 3;
+  const available = Math.max(0, width - dividerWidth);
+  let listRatio = 0.36;
+  if (width < 110) {
+    listRatio = 0.42;
+  } else if (width >= 180) {
+    listRatio = 0.32;
+  }
+
+  const listWidth = Math.max(34, Math.min(58, Math.floor(available * listRatio)));
+  return {
+    mode: "split",
+    listWidth,
+    previewWidth: Math.max(0, available - listWidth),
+  };
+}
+
+const cleanPreviewText = (text: string): string => text.replace(/\s+$/g, "");
+
+function textBlocksFromContent(content: PreviewContent | undefined): PreviewBlock[] {
+  if (!content) return [];
+  if (typeof content === "string") return content.trim() ? [{ kind: "assistant", text: cleanPreviewText(content) }] : [];
+
+  const blocks: PreviewBlock[] = [];
+  for (const part of content) {
+    if (part.type === "text" && part.text.trim()) {
+      blocks.push({ kind: "assistant", text: cleanPreviewText(part.text) });
+    } else if (part.type === "image") {
+      blocks.push({ kind: "notice", text: `[image${part.mimeType ? `: ${part.mimeType}` : ""}]` });
+    } else if (part.type === "toolCall") {
+      const args = part.arguments && Object.keys(part.arguments).length > 0 ? JSON.stringify(part.arguments) : undefined;
+      blocks.push({ kind: "toolCall", name: part.name, args });
+    } else if (part.type === "thinking") {
+      blocks.push({
+        kind: "thinking",
+        text: part.redacted ? "[thinking redacted]" : cleanPreviewText(part.thinking ?? "[thinking]"),
+        redacted: part.redacted,
+      });
+    }
+  }
+  return blocks;
+}
+
+function contentToPlainText(content: PreviewContent | undefined): string {
+  if (!content) return "";
+  if (typeof content === "string") return content;
+  return content
+    .map((part) => {
+      if (part.type === "text") return part.text;
+      if (part.type === "image") return `[image${part.mimeType ? `: ${part.mimeType}` : ""}]`;
+      if (part.type === "toolCall") return `[tool call: ${part.name}]`;
+      if (part.type === "thinking") return part.redacted ? "[thinking redacted]" : (part.thinking ?? "[thinking]");
+      return "";
+    })
+    .filter(Boolean)
+    .join("\n");
+}
+
+function messageToBlocks(message: PreviewMessageLike): PreviewBlock[] {
+  if (message.role === "user") {
+    const text = cleanPreviewText(contentToPlainText(message.content));
+    return text ? [{ kind: "user", text }] : [];
+  }
+
+  if (message.role === "assistant") {
+    return textBlocksFromContent(message.content);
+  }
+
+  if (message.role === "toolResult" || message.role === "tool") {
+    const text = cleanPreviewText(contentToPlainText(message.content));
+    return text ? [{ kind: "toolResult", name: message.toolName, text, isError: message.isError }] : [];
+  }
+
+  if (message.role === "bashExecution") {
+    const command = message.command ?? "";
+    return command || message.output
+      ? [{ kind: "bash", command, output: cleanPreviewText(message.output ?? ""), isError: message.isError }]
+      : [];
+  }
+
+  if (message.role === "compactionSummary" || message.role === "branchSummary") {
+    const text = cleanPreviewText(message.summary ?? contentToPlainText(message.content));
+    return text ? [{ kind: "summary", label: message.role === "branchSummary" ? "Branch summary" : "Summary", text }] : [];
+  }
+
+  const text = cleanPreviewText(message.summary ?? contentToPlainText(message.content));
+  return text ? [{ kind: "custom", label: message.role || "Message", text }] : [];
+}
+
+export function buildSessionPreview(
+  session: SessionInfoLike,
+  messages: PreviewMessageLike[],
+  options: { maxMessages?: number } = {},
+): SessionPreview {
+  const maxMessages = options.maxMessages ?? 80;
+  const blocks: PreviewBlock[] = [];
+  const omitted = Math.max(0, messages.length - maxMessages);
+  const visibleMessages = omitted > 0 ? messages.slice(-maxMessages) : messages;
+
+  if (omitted > 0) {
+    blocks.push({ kind: "notice", text: `… ${omitted} earlier messages omitted` });
+  }
+
+  for (const message of visibleMessages) {
+    blocks.push(...messageToBlocks(message));
+  }
+
+  const messageCount = session.messageCount ?? messages.length;
+  return {
+    title: buildSessionLabel(session),
+    subtitle: `${formatTimestamp(session.modified)} · ${messageCount} messages · ${session.cwd}`,
+    blocks: blocks.length > 0 ? blocks : [{ kind: "notice", text: "No previewable messages." }],
+  };
+}
+
+export function buildPreviewError(session: SessionInfoLike, error: unknown): SessionPreview {
+  const message = error instanceof Error ? error.message : String(error);
+  return {
+    title: buildSessionLabel(session),
+    subtitle: `${formatTimestamp(session.modified)} · preview unavailable`,
+    blocks: [{ kind: "notice", text: `Failed to load preview: ${message}` }],
+    error: message,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-agent-extensions",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Collection of extensions for pi coding agent",
   "type": "module",
   "repository": {