@visual-z/xeno 0.8.2 → 0.8.4

package/src/store/secrets.ts

@@ -0,0 +1,44 @@
+/**
+ * The per-session vault behind `[[xeno-secret-N]]` placeholders (S.9).
+ *
+ * A separate append-only file, never a log event: projections, handoffs,
+ * exports and history pages read the log, so a value kept here cannot reach a
+ * model request or a shared transcript. 0600 like every session file. It is
+ * read back at start so a placeholder written by an earlier run still expands
+ * after a restart.
+ */
+import { copyFile, readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { durableAppend } from "./atomic.ts";
+import type { SecretEntry } from "../core/secrets.ts";
+
+export const SECRETS_FILE = "secrets.jsonl";
+
+export async function readVault(dir: string): Promise<SecretEntry[]> {
+  let text: string;
+  try { text = await readFile(join(dir, SECRETS_FILE), "utf8"); }
+  catch (error) { if ((error as { code?: string }).code === "ENOENT") return []; throw error; }
+  const entries: SecretEntry[] = [];
+  for (const line of text.split("\n")) {
+    if (!line) continue;
+    // A torn final line from a crash loses that one entry; its placeholder then
+    // stays literal rather than expanding to something else.
+    try {
+      const value = JSON.parse(line) as Partial<SecretEntry>;
+      if (Number.isSafeInteger(value.n) && typeof value.value === "string" && typeof value.rule === "string" &&
+        !entries.some(entry => entry.n === value.n)) entries.push({ n: value.n!, value: value.value, rule: value.rule });
+    } catch { /* see above */ }
+  }
+  return entries;
+}
+
+export async function appendVault(dir: string, entries: readonly SecretEntry[]): Promise<void> {
+  if (entries.length === 0) return;
+  await durableAppend(join(dir, SECRETS_FILE), entries.map(entry => JSON.stringify(entry) + "\n").join(""));
+}
+
+/** A fork's log carries the parent's placeholders, so it needs their values. */
+export async function copyVault(from: string, to: string): Promise<void> {
+  try { await copyFile(join(from, SECRETS_FILE), join(to, SECRETS_FILE)); }
+  catch (error) { if ((error as { code?: string }).code !== "ENOENT") throw error; }
+}

package/src/store/sessions.ts

@@ -35,6 +35,7 @@ import {
   readCursor,
   readCursorAt,
   readNode,
+  forkedAt,
   writeCursor,
   setParentSession,
   type Manifest,
@@ -44,6 +45,7 @@ import { replayContext } from "./replay.ts";
 import { recoverCut } from "./recovery.ts";
 import { planSessionEntry, type SessionEntryFlags } from "../core/session-entry.ts";
 import { assertNever } from "../core/exhaustive.ts";
+import type { LogEvent } from "../core/events.ts";
 import { resolveHistoryPosition } from "./session-position.ts";
 import { importSessionArchive } from "./session-archive.ts";
 
@@ -86,6 +88,10 @@ export type ListedSession =
       workspace?: string;
       parent_session?: string;
       text?: string;
+      /** Details only: whether any node holds a user event (fix-skip-empty-sessions). */
+      conversation?: boolean;
+      /** Details only, forks only: when the copy was made (fix-fork-start-time). */
+      forked_at?: string;
     }
   | {
       ok: false;
@@ -370,8 +376,7 @@ export async function resolveLogDir(
       return { logDir: created.path, created: true };
     }
     case "continue": {
-      const { sessions } = await listSessions(workspace, opts.sessionDir, Infinity);
-      const newest = sessions.find((s) => s.ok);
+      const newest = await newestConversation(workspace, opts.sessionDir);
       if (newest !== undefined) return { logDir: newest.path, created: false };
       break;
     }
@@ -399,7 +404,8 @@ export async function readListed(id: string, path: string, details?: { workspace
     if ((err as { code?: string }).code === "ENOENT") {
       return {
         ok: true, id, path,
-        name: null, model: null, node: null, events: 0, updated_at: null, ...(details ? { workspace: details.workspace } : {}),
+        name: null, model: null, node: null, events: 0, updated_at: null,
+        ...(details ? { workspace: details.workspace, conversation: await hasConversation(path) } : {}),
       };
     }
     return { ok: false, id, path, error: `${path} could not be read: ${(err as Error).message}` };
@@ -414,7 +420,8 @@ export async function readListed(id: string, path: string, details?: { workspace
   if (cursor === undefined) {
     return {
       ok: true, id, path,
-      name: null, model: null, node: null, events: 0, updated_at: null, ...(details ? { workspace: details.workspace } : {}),
+      name: null, model: null, node: null, events: 0, updated_at: null,
+      ...(details ? { workspace: details.workspace, conversation: await hasConversation(path) } : {}),
     };
   }
 
@@ -423,15 +430,18 @@ export async function readListed(id: string, path: string, details?: { workspace
   // bad tree is the same shape as a list that throws for one bad file.
   const events = (await readNode(path, cursor.node)).events.length;
   const text: string[] = [];
+  let conversation = false;
   if (details) for (const node of await listNodes(path)) {
     if (details.signal?.aborted) break;
     const read = await readNode(path, node);
     if (read.corrupt.length) throw new Error(`${path} has corrupt events`);
     for (const event of read.events) {
+      if (userActivity(event)) conversation = true;
       if (event.t === "user") text.push(event.text);
       else if (event.t === "assistant") for (const block of event.blocks) if (block.type === "text") text.push(block.text);
     }
   }
+  const forked = details ? await forkedAt(path) : null;
   return {
     ok: true,
     id,
@@ -441,11 +451,44 @@ export async function readListed(id: string, path: string, details?: { workspace
     node: cursor.node,
     events,
     updated_at: cursor.updated_at,
-    ...(details ? { workspace: cursor.workspace ?? details.workspace, text: text.join("\n"),
-      ...(manifest.parent_session ? { parent_session: manifest.parent_session } : {}) } : {}),
+    ...(details ? { workspace: cursor.workspace ?? details.workspace, text: text.join("\n"), conversation,
+      ...(manifest.parent_session ? { parent_session: manifest.parent_session } : {}),
+      ...(forked === null ? {} : { forked_at: forked }) } : {}),
   };
 }
 
+/**
+ * A session the user opened and left without a word still has a header,
+ * cursor and manifest: Session.start writes them before the first message.
+ * Pi avoids such files by not persisting until a message exists; xeno keeps
+ * its write order and filters on read instead, like Codex's resume picker,
+ * so -c and the pickers land on a conversation (fix-skip-empty-sessions).
+ * A shell command the user ran counts: it is their activity, not setup.
+ */
+function userActivity(event: LogEvent): boolean {
+  return event.t === "user" || event.t === "user_bash";
+}
+
+/**
+ * Stops at the first node holding user activity, so a real session costs one
+ * node read. An unreadable node counts as activity: hiding a session we
+ * cannot judge would silently skip it, while opening it reports the error.
+ */
+export async function hasConversation(path: string): Promise<boolean> {
+  for (const node of await listNodes(path)) {
+    try { if ((await readNode(path, node)).events.some(userActivity)) return true; }
+    catch { return true; }
+  }
+  return false;
+}
+
+/** What -c continues: the newest readable session the user actually spoke in. */
+export async function newestConversation(workspace: string, sessionDir?: string): Promise<Extract<ListedSession, { ok: true }> | undefined> {
+  const { sessions } = await listSessions(workspace, sessionDir, Infinity);
+  for (const session of sessions) if (session.ok && await hasConversation(session.path)) return session;
+  return undefined;
+}
+
 function byRecordedTime(a: ListedSession, b: ListedSession): number {
   const ta = a.ok ? a.updated_at : null;
   const tb = b.ok ? b.updated_at : null;

package/src/tui/ui/branch-panel.ts

@@ -0,0 +1,47 @@
+/**
+ * The rows under the input box, one per unresolved branch (feat-branch-panel).
+ * View-only: the controller owns which branches exist and what keys do (D20).
+ * Claude Code's precedent: background subagents sit below the prompt, ↑/↓
+ * select, Enter opens, x stops, Esc returns to the prompt.
+ */
+import type { Line } from "./status.ts";
+import type { Seg } from "./edge.ts";
+
+export type BranchRowState = "running" | "done" | "stopped" | "failed" | "cancelled" | "unknown";
+export interface BranchRow { readonly node: number; readonly purpose: string; readonly state: BranchRowState }
+
+/**
+ * Rows shown before the rest fold into "+N more". Assumed, not measured: three
+ * keeps the transcript in view on a 24-row terminal; more branches than that
+ * at once is rare because branch capacity is itself small.
+ */
+export const BRANCH_ROWS = 3;
+
+const MARK: Record<BranchRowState, Seg> = {
+  running: { text: "●", role: "accent" },
+  done: { text: "✓", role: "success" },
+  stopped: { text: "◆", role: "warning" },
+  failed: { text: "✗", role: "error" },
+  cancelled: { text: "■", role: "muted" },
+  unknown: { text: "?", role: "muted" },
+};
+
+/** `selected` is the focused row, or undefined while the prompt has focus. The window keeps it visible. */
+export function branchPanelLines(rows: readonly BranchRow[], selected: number | undefined): Line[] {
+  if (rows.length === 0) return [];
+  const start = selected === undefined ? 0 : Math.max(0, Math.min(selected - BRANCH_ROWS + 1, rows.length - BRANCH_ROWS));
+  const shown = rows.slice(start, start + BRANCH_ROWS);
+  const lines: Line[] = shown.map((row, k) => {
+    const focused = start + k === selected;
+    return [
+      { text: focused ? "› " : "  ", role: "accent", bold: true },
+      MARK[row.state],
+      { text: ` ${row.purpose}`, role: focused ? "text" : "muted", bold: focused },
+      { text: ` · ${row.state}`, role: row.state === "failed" ? "error" : "muted" },
+      ...(focused ? [{ text: row.state === "running" ? "   enter open · x stop · esc back" : "   enter open · x clear · esc back", role: "muted" as const }] : []),
+    ];
+  });
+  const hidden = rows.length - shown.length;
+  if (hidden > 0) lines.push([{ text: `  +${hidden} more`, role: "muted" }]);
+  return lines;
+}

package/src/tui/ui/composer.ts

@@ -14,6 +14,7 @@ import { Canvas } from "./canvas.ts";
 import type { UiColors } from "./colors.ts";
 import { draftRows, type DraftRows } from "./draft.ts";
 import type { ListItem } from "./list-model.ts";
+import { emptyHistory, historyPosition, projectHistory, rememberPrompt, stepHistory, type PromptHistory } from "./prompt-history.ts";
 
 export interface Completion {
   readonly kind: "command" | "argument" | "path";
@@ -48,9 +49,7 @@ export class Composer {
   private readonly prompt: Canvas;
   private completion: Completion | undefined;
   private completionIndex = 0;
-  private history: string[] = [];
-  private historyAt = -1;
-  private historyDraft = "";
+  private history: PromptHistory = emptyHistory;
   private maxLines = MAX_LINES;
   private shape: DraftRows = { rows: 1, above: 0, below: 0 };
   onChange: ((text: string) => void) | undefined;
@@ -93,7 +92,9 @@ export class Composer {
   get completionView(): { readonly kind: Completion["kind"]; readonly items: readonly ListItem[]; readonly selected: number } | undefined {
     return this.completion ? { kind: this.completion.kind, items: this.completion.items, selected: this.completionIndex } : undefined;
   }
-  get historyEntries(): readonly string[] { return this.history; }
+  get historyEntries(): readonly string[] { return this.history.entries; }
+  /** Which recalled entry is showing, for the box edge; undefined while editing the draft. */
+  get historyPosition(): { readonly index: number; readonly total: number } | undefined { return historyPosition(this.history); }
   get rows(): number { return Math.max(1, this.area.height); }
   /** Wrapped rows of the draft hidden above / below the box (0 when it all fits). */
   get overflow(): { readonly above: number; readonly below: number } { return { above: this.shape.above, below: this.shape.below }; }
@@ -116,36 +117,34 @@ export class Composer {
   insert(text: string): void { this.draftRevision++; this.area.insertText(text); }
   removeAtom(label: string): void { this.draftRevision++; this.area.replaceText(this.text.split(label).join("")); }
   resetDraft(project: (text: string) => string): void {
-    this.history = this.history.map(project).filter(Boolean);
-    this.historyAt = -1; this.historyDraft = ""; this.area.clearKilledText(); this.setText("");
+    this.history = projectHistory(this.history, project);
+    this.area.clearKilledText(); this.setText("");
   }
   focus(): void { this.area.focus(); }
 
-  remember(entry: string): void {
-    if (!entry.trim()) return;
-    if (this.history[0] !== entry) this.history.unshift(entry);
-    this.history = this.history.slice(0, 200);
-    this.historyAt = -1;
+  remember(entry: string): void { this.history = rememberPrompt(this.history, entry); }
+
+  /**
+   * Up/Down recall history only from the first/last *visual* row, so a
+   * wrapped paragraph is navigable like a multi-line one (Claude Code's
+   * documented rule). Cursor offsets here are display cells, not string
+   * indices, so they are only compared with each other.
+   */
+  /** The cursor is on the draft's last visual row: Down has nowhere to move within it. */
+  get onLastRow(): boolean {
+    const view = this.area.editorView;
+    return !this.area.plainText.slice(this.area.textCursor).includes("\n") && view.getVisualEOL().offset === view.getEOL().offset;
   }
 
-  /** Up/Down walk history only when the cursor is on the first/last line, so multi-line drafts stay editable. */
   historyStep(direction: -1 | 1): boolean {
-    const text = this.area.plainText;
-    const offset = this.area.cursorOffset;
-    const firstLine = !text.slice(0, offset).includes("\n");
-    const lastLine = !text.slice(offset).includes("\n");
-    if (direction < 0 && !firstLine) return false;
-    if (direction > 0 && !lastLine) return false;
-    if (direction < 0) {
-      if (this.historyAt + 1 >= this.history.length) return true;
-      if (this.historyAt === -1) this.historyDraft = text;
-      this.historyAt++;
-      this.setText(this.history[this.historyAt]!);
-      return true;
-    }
-    if (this.historyAt < 0) return false;
-    this.historyAt--;
-    this.setText(this.historyAt < 0 ? this.historyDraft : this.history[this.historyAt]!);
+    const view = this.area.editorView;
+    if (direction < 0 && view.getVisualSOL().offset !== 0) return false;
+    if (direction > 0 && !this.onLastRow) return false;
+    const step = stepHistory(this.history, direction, this.area.plainText);
+    // Up with nothing older is consumed (the cursor is already on the top row); Down from the draft is not.
+    if (!step) return direction < 0;
+    this.history = step.history;
+    this.setText(step.text);
     return true;
   }
 

package/src/tui/ui/image-size.ts

@@ -26,9 +26,13 @@ export function imageCells(pixels: { readonly width: number; readonly height: nu
   return { cols: Math.max(1, Math.min(capCols, cols)), rows: Math.max(1, Math.min(capRows, rows)) };
 }
 
-/** Rows for pictures in the transcript: a quarter of the terminal, 4–12. Assumed, between OpenCode (≤8) and Grok (≤20). */
+/**
+ * Rows for pictures in the transcript: half the terminal, 4–20 (feat-tui-image-full-size).
+ * A quarter left a screenshot's text unreadable; 20 is Grok's ceiling, past which one picture
+ * pushes the conversation off screen. Assumed, not measured. Full size is a click away.
+ */
 export function transcriptImageRows(terminalRows: number): number {
-  return Math.max(4, Math.min(12, Math.floor(terminalRows / 4)));
+  return Math.max(4, Math.min(20, Math.floor(terminalRows / 2)));
 }
 
 /** Rows for the attachment strip above the input box: a sixth of the terminal, 3–6. Assumed. */

package/src/tui/ui/items.ts

@@ -8,7 +8,9 @@
 export type ToolStatus = "pending" | "ok" | "error";
 
 /** A picture the view may draw: its blob address, name and pixel size (from the log's ImageRef). */
-export interface ImageView { readonly sha256: string; readonly name: string; readonly width: number; readonly height: number }
+export interface ImageView { readonly sha256: string; readonly name: string; readonly width: number; readonly height: number;
+  /** The blob a click opens when it differs from `sha256`: what was attached, before any reduction for the model. */
+  readonly full?: string }
 
 export type ViewItem =
   | { readonly kind: "user"; readonly id: string; readonly rev: string; readonly text: string; readonly images?: readonly ImageView[]; readonly interrupted?: boolean }

package/src/tui/ui/pictures.ts

@@ -8,6 +8,10 @@
  * pictures are off, or the terminal can only draw block characters, the
  * row is a single muted line: `▣ shot.png · 1280×720   +2 more`.
  *
+ * A click on a drawn picture asks the source to open its full-size original
+ * (docs/tasks/feat-tui-image-full-size.md): a thumbnail cannot show a
+ * screenshot's text, the system viewer can.
+ *
  * The view never reads a file: the app's source loads and verifies bytes.
  */
 import { BoxRenderable, ImageRenderable, type CliRenderer, type ImageRenderProtocol, type NativeImage } from "@opentui/core";
@@ -28,6 +32,8 @@ export interface PictureSource {
   readonly reason?: string;
   /** The decoded picture for a blob, shared by every node that shows it, or its preparation failure. */
   load(sha256: string): Promise<PictureLoad>;
+  /** Show a blob at full size outside the terminal; absent where nothing can (tests, print mode). */
+  open?(sha256: string): void;
 }
 
 export type PictureLoad = { readonly kind: "ready"; readonly image: NativeImage } |
@@ -72,7 +78,7 @@ export class Pictures extends BoxRenderable {
         const size = imageCells(image, Math.min(each, source.widthCells), options.maxRows, source.cell);
         const picture = new ImageRenderable(ctx, { id: `${id}-${image.sha256.slice(0, 8)}-${serial++}`, width: size.cols, height: size.rows,
           fit: "fit", protocol: source.protocol, flexShrink: 0,
-          onLoad: () => { states[index] = "decoded"; if (!caption.isDestroyed) paintCaption(); },
+          onLoad: () => { states[index] = source.open ? "click to open" : "decoded"; if (!caption.isDestroyed) paintCaption(); },
           onError: () => { states[index] = "preview failed: decode"; picture.visible = false; if (!caption.isDestroyed) paintCaption(); } });
         void source.load(image.sha256).then(result => {
           if (picture.isDestroyed) return;
@@ -82,6 +88,13 @@ export class Pictures extends BoxRenderable {
           if (picture.isDestroyed) return;
           picture.visible = false; states[index] = "preview failed: decode"; paintCaption();
         });
+        const open = source.open;
+        if (open) {
+          // Same rule as a tool card's head: press and release on one cell is a click; anything else is a selection.
+          let down: { x: number; y: number } | undefined;
+          picture.onMouseDown = event => { down = { x: event.x, y: event.y }; };
+          picture.onMouseUp = event => { if (down && down.x === event.x && down.y === event.y && picture.image) open(image.full ?? image.sha256); down = undefined; };
+        }
         pictures.push(picture);
         row.add(picture);
       }

package/src/tui/ui/prompt-history.ts

@@ -0,0 +1,60 @@
+/**
+ * Up/Down prompt recall as a pure value, so its one promise -- navigating
+ * never loses text -- is a property test rather than a hope.
+ *
+ * Readline's precedent: an edit to a recalled line is kept for that line
+ * while the user walks elsewhere, and dropped only when something is
+ * submitted. Without it, walking Down from an edited entry restores the
+ * stashed draft and the edit is gone (docs/tasks/fix-composer-history.md).
+ */
+
+/**
+ * Entries kept, newest first. Assumed, not measured: the composer kept 200
+ * before this module existed and nothing has asked for more. Raising it
+ * only costs memory; lowering it drops the oldest prompts from recall.
+ */
+export const HISTORY_LIMIT = 200;
+
+export type PromptHistory = {
+  /** Submitted prompts, newest first. Navigation never changes them. */
+  readonly entries: readonly string[];
+  /** -1 is the draft; 0.. index entries. */
+  readonly at: number;
+  /** Unsubmitted text per position (-1 included), so leaving a position keeps what was typed there. */
+  readonly edits: ReadonlyMap<number, string>;
+};
+
+export const emptyHistory: PromptHistory = { entries: [], at: -1, edits: new Map() };
+
+/** A submit ends the walk: edits are discarded and the draft starts empty. */
+export function rememberPrompt(history: PromptHistory, entry: string, limit = HISTORY_LIMIT): PromptHistory {
+  if (!entry.trim()) return { ...history, at: -1, edits: new Map() };
+  // A repeat of the newest entry records once, so Up reaches the previous distinct prompt.
+  const entries = history.entries[0] === entry ? history.entries : [entry, ...history.entries].slice(0, limit);
+  return { entries, at: -1, edits: new Map() };
+}
+
+/**
+ * Older (-1) or newer (+1). `current` is the text at the present position.
+ * Null means there is nowhere to go; the caller decides whether that
+ * consumes the key.
+ */
+export function stepHistory(history: PromptHistory, direction: -1 | 1, current: string): { history: PromptHistory; text: string } | null {
+  const at = history.at - direction;
+  if (at < -1 || at >= history.entries.length) return null;
+  const edits = new Map(history.edits);
+  // An unchanged entry needs no edit; the draft is always kept, even when empty.
+  if (history.at === -1 || current !== history.entries[history.at]) edits.set(history.at, current);
+  else edits.delete(history.at);
+  return { history: { entries: history.entries, at, edits }, text: edits.get(at) ?? history.entries[at] ?? "" };
+}
+
+/** 1-based position for the box edge, or undefined while editing the draft. */
+export function historyPosition(history: PromptHistory): { index: number; total: number } | undefined {
+  return history.at < 0 ? undefined : { index: history.at + 1, total: history.entries.length };
+}
+
+/** Rewrites entries (session change: labels that no longer resolve) and starts a fresh walk. */
+export function projectHistory(history: PromptHistory, project: (text: string) => string): PromptHistory {
+  return { entries: history.entries.map(project).filter(Boolean), at: -1, edits: new Map() };
+}

package/src/tui/ui/screen.ts

@@ -85,6 +85,11 @@ export class Screen {
   private readonly body: BoxRenderable;
   private readonly topEdge: Canvas;
   private readonly bottomEdge: Canvas;
+  /** Branch rows under the box (feat-branch-panel); hidden when there are none, so the box stays on the last row. */
+  private readonly below: Canvas;
+  private branchLines: readonly Line[] = [];
+  /** `branch N · purpose` while the transcript shows a branch instead of the main session. */
+  private viewingLabel: string | undefined;
   private readonly sidebar: BoxRenderable;
   private readonly sidebarRows: Canvas;
   private readonly middle: BoxRenderable;
@@ -153,7 +158,8 @@ export class Screen {
     this.body.add(slot); this.body.add(this.composer.row);
     this.bottomEdge = new Canvas(renderer, { id: "dock-bottom", height: 1, flexShrink: 0, colors });
     this.dock.add(this.topEdge); this.dock.add(this.body); this.dock.add(this.bottomEdge);
-    main.add(this.greeting); main.add(area); main.add(this.above); main.add(this.dock);
+    this.below = new Canvas(renderer, { id: "below-dock", visible: false, height: 1, flexShrink: 0, marginLeft: 1, marginRight: 1, colors });
+    main.add(this.greeting); main.add(area); main.add(this.above); main.add(this.dock); main.add(this.below);
     this.sidebar = new BoxRenderable(renderer, { id: "sidebar", flexShrink: 0, border: ["left"], borderColor: colors.line, paddingLeft: 1, paddingRight: 1, paddingTop: 1, flexDirection: "column", overflow: "hidden", backgroundColor: colors.background });
     this.sidebarRows = new Canvas(renderer, { id: "sidebar-rows", flexGrow: 1, colors });
     this.sidebarRows.onSizeChange = () => this.paintStatus();
@@ -208,7 +214,7 @@ export class Screen {
   setColors(colors: UiColors): void {
     this.colors = colors;
     this.renderer.setBackgroundColor(colors.background);
-    for (const canvas of [this.topbar, this.greeting, this.pill, this.completion, this.queueRows, this.widgetRows, this.topEdge, this.bottomEdge, this.sidebarRows]) canvas.setColors(colors);
+    for (const canvas of [this.topbar, this.greeting, this.pill, this.completion, this.queueRows, this.widgetRows, this.topEdge, this.bottomEdge, this.below, this.sidebarRows]) canvas.setColors(colors);
     this.sidebar.borderColor = colors.line;
     this.sidebar.backgroundColor = colors.background;
     this.messages.setColors(colors);
@@ -302,6 +308,7 @@ export class Screen {
     this.paintStatus();
     this.paintEdges();
     this.paintAbove();
+    this.paintBelow();
     this.paintGreeting();
     this.renderer.requestRender();
   }
@@ -313,7 +320,7 @@ export class Screen {
 
   private aboveRows(): number {
     return (this.completion.visible ? this.completion.height as number : 0) + (this.queueRows.visible ? this.queueRows.height as number : 0) + (this.widgetRows.visible ? this.widgetRows.height as number : 0)
-      + (this.attachments.visible ? this.attachments.height : 0);
+      + (this.attachments.visible ? this.attachments.height : 0) + (this.below.visible ? this.below.height as number : 0);
   }
 
   // ------------------------------------------------------------------ status
@@ -398,6 +405,13 @@ export class Screen {
       if (below && !this.toastText) right.push({ segs: [{ text: `↓ ${below} more`, role: "muted" }], priority: 2 });
       if (!above && this.status?.activity) left = [idleActivityLabel(this.status.activity, this.lastTurnMs)];
     }
+    if (this.viewingLabel && !dialog) {
+      left = [{ segs: [{ text: this.viewingLabel, role: "accent", bold: true }], priority: 0, min: 8, shrink: 0 }];
+      right.push({ segs: [{ text: "esc back", role: "muted" }], priority: 4 });
+    }
+    // Which recalled prompt is showing (fix-composer-history). Leads the edge: it describes the text being edited.
+    const recalled = this.composer.historyPosition;
+    if (recalled) left = [{ segs: [{ text: `history ${recalled.index}/${recalled.total}`, role: "accent" }], priority: 0, min: 1 }, ...left];
     this.topEdge.setRows([edgeLine({ width, corners: ["╭", "╮"], role, left, right })]);
     const bottomLeft: Label[] = [...(this.status ? modeLabels(this.status) : []), ...(d.model ? [
       { segs: [{ text: d.model, role: "text" as const, bold: true }], priority: 1, min: 8 },
@@ -446,6 +460,23 @@ export class Screen {
   // ------------------------------------------------------------ above the box
   setQueue(lines: readonly string[]): void { this.queue = lines; this.paintAbove(); }
 
+  // ------------------------------------------------------------ below the box
+  /** Rows from branchPanelLines; an empty list hides the region. */
+  setBranches(lines: readonly Line[]): void {
+    const shown = this.below.visible ? this.below.height as number : 0;
+    this.branchLines = lines;
+    this.paintBelow();
+    if ((lines.length || 0) !== shown) this.layout();
+  }
+  /** The transcript shows a branch: its label leads the top edge (undefined: the main session). */
+  setViewing(label: string | undefined): void { this.viewingLabel = label; this.paintEdges(); }
+  private paintBelow(): void {
+    const width = Math.max(1, this.renderer.width - (this.shape.tier === "sidebar" ? this.shape.sidebarWidth : 0) - 2);
+    this.below.visible = this.branchLines.length > 0;
+    if (this.below.visible) { this.below.height = this.branchLines.length; this.below.setRows(this.branchLines.map(row => clipSegs(row, width))); }
+    this.renderer.requestRender();
+  }
+
   /** How pictures are drawn; the transcript and the attachment strip both follow it (feat-tui-inline-images). */
   setPictures(source: PictureSource): void {
     this.picturesSource = source;