pi-midcompact 0.2.1 → 0.4.0

package/src/index.ts

@@ -6,6 +6,7 @@ import {
   type ExtensionContext,
   type SessionEntry,
 } from "@earendil-works/pi-coding-agent";
+import type { AutocompleteItem } from "@earendil-works/pi-tui";
 
 import { buildAtoms, formatLocatedAtom, locateAtoms } from "./atoms.js";
 import { messageText } from "./messages.js";
@@ -13,6 +14,7 @@ import { addDraftRange, emptyDraft, formatDraft, removeDraftRange, updateDraftRa
 import { projectMessages } from "./projection.js";
 import { registerStateRenderer, stateTreeLabel } from "./renderers.js";
 import { showReviewUi } from "./review-ui.js";
+import { showReviewWebUi } from "./review-webui.js";
 import {
   DRAFT_ENTRY,
   STATE_ENTRY,
@@ -28,6 +30,7 @@ import type {
   CompressionBlock,
   CompressionState,
   DraftPlan,
+  DraftTelemetry,
   MessageLike,
   TransactionState,
 } from "./types.js";
@@ -89,9 +92,24 @@ export default function (pi: ExtensionAPI) {
 
   pi.registerCommand("midcompact", {
     description: "Start, review, commit, inspect, or abort a branch-isolated mid-context compression transaction",
+    getArgumentCompletions(prefix: string): AutocompleteItem[] | null {
+      const query = prefix.trimStart().toLowerCase();
+      if (/\s/.test(query)) return null;
+      const items: AutocompleteItem[] = [
+        { value: "start", label: "start — Start a new midcompact transaction at the current anchor" },
+        { value: "abort", label: "abort — Abort the active transaction and return to anchor" },
+        { value: "commit", label: "commit — Commit the current draft to the branch state" },
+        { value: "review", label: "review — Open interactive TUI to inspect and edit the draft" },
+        { value: "review-webui", label: "review-webui — Open a local web page to inspect and edit the draft (works without TUI)" },
+        { value: "status", label: "status — Show current transaction and draft status" },
+      ];
+      const filtered = items.filter((item) => item.value.startsWith(query));
+      return filtered.length > 0 ? filtered : null;
+    },
     handler: async (args: string, ctx: ExtensionCommandContext) => {
       await ctx.waitForIdle();
-      const sub = args.trim().toLowerCase();
+      const rawArgs = args.trim();
+      const sub = rawArgs.toLowerCase();
 
       if (sub === "abort") {
         const restored = restoreTransaction(ctx.sessionManager.getBranch() as SessionEntry[]);
@@ -144,7 +162,12 @@ export default function (pi: ExtensionAPI) {
       }
 
       if (sub === "review") {
-        await reviewTransaction(ctx);
+        await reviewTransaction(ctx, "tui");
+        return;
+      }
+
+      if (sub === "review-webui") {
+        await reviewTransaction(ctx, "web");
         return;
       }
 
@@ -164,8 +187,12 @@ export default function (pi: ExtensionAPI) {
         return;
       }
 
-      if (sub) {
-        ctx.ui.notify("Usage: /midcompact | /midcompact review | /midcompact commit | /midcompact status | /midcompact abort", "warning");
+      const startMatch = rawArgs.match(/^start\s+/i);
+      const isStart = sub === "start" || !!startMatch;
+      const customInstructions = startMatch ? rawArgs.slice(startMatch[0].length).trim() : undefined;
+
+      if (!isStart) {
+        ctx.ui.notify("Usage: /midcompact start [instructions] | /midcompact review | /midcompact commit | /midcompact status | /midcompact abort", "warning");
         return;
       }
 
@@ -179,6 +206,16 @@ export default function (pi: ExtensionAPI) {
         ctx.ui.notify("Cannot start midcompact without a session leaf.", "error");
         return;
       }
+      if (ctx.hasUI) {
+        const ok = await ctx.ui.confirm(
+          "Start midcompact transaction?",
+          "The current context snapshot will be frozen as an anchor. You will need to review and explicitly commit (/midcompact commit) or abort (/midcompact abort) later.",
+        );
+        if (!ok) {
+          ctx.ui.notify("Midcompact start cancelled.", "info");
+          return;
+        }
+      }
       transaction = {
         version: 1,
         id: `tx-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`,
@@ -192,13 +229,19 @@ export default function (pi: ExtensionAPI) {
       updateStatus(ctx, transaction, draft);
       const awareness = formatTelemetry(draftTelemetry(transaction, draft));
       ctx.ui.notify(`Midcompact started at anchor ${anchorEntryId}. ${compactUsage(transaction)}`, "info");
-      pi.sendUserMessage([
+      const promptLines = [
         "A mid-compaction transaction is active on a frozen anchor snapshot.",
         awareness,
         "These numbers are context awareness, not a target or optimization constraint. Use them to judge the scale of proposed compression while preserving semantic value.",
+      ];
+      if (customInstructions) {
+        promptLines.push(`User focus: ${customInstructions}`);
+      }
+      promptLines.push(
         "Load the `midcompact` skill, use the `midcompact` tool to locate and draft compression ranges, and present the draft for user review.",
         "The Agent cannot commit. The user can inspect `/midcompact review`, then explicitly run `/midcompact commit` when satisfied.",
-      ].join("\n"));
+      );
+      pi.sendUserMessage(promptLines.join("\n"));
     },
   });
 
@@ -210,7 +253,7 @@ export default function (pi: ExtensionAPI) {
     async execute(_id: string, params: ParamsType, _signal: AbortSignal | undefined, _onUpdate: unknown, ctx: ExtensionContext) {
       try {
         if (params.action === "recall") return toolResult(handleRecall(params, ctx));
-        if (!transaction) return toolResult("No active midcompact transaction. Ask the user to run `/midcompact` first.");
+        if (!transaction) return toolResult("No active midcompact transaction. Ask the user to run `/midcompact start` first.");
         const snapshot = buildAnchorSnapshot(ctx.sessionManager, transaction);
         if (params.action === "locate") return toolResult(handleLocate(params, snapshot.atoms));
         if (params.action === "plan") {
@@ -227,49 +270,69 @@ export default function (pi: ExtensionAPI) {
     },
   });
 
-  async function reviewTransaction(ctx: ExtensionCommandContext): Promise<void> {
+  async function reviewTransaction(ctx: ExtensionCommandContext, mode: "tui" | "web" = "tui"): Promise<void> {
+    const restored = restoreTransaction(ctx.sessionManager.getBranch() as SessionEntry[]);
+    const currentTx = restored.transaction ?? transaction;
+    const currentDraft = restored.draft ?? draft;
+    if (!currentTx) {
+      ctx.ui.notify("No active midcompact transaction.", "warning");
+      return;
+    }
+    const currentPlan = currentDraft ?? emptyDraft(currentTx.id);
+    const snapshot = buildAnchorSnapshot(ctx.sessionManager, currentTx);
+
+    const commitMutation = (next: DraftPlan): void => {
+      draft = next;
+      pi.appendEntry(DRAFT_ENTRY, next);
+      updateStatus(ctx, currentTx, next);
+    };
+
+    if (mode === "web") {
+      const getLatest = (): { draft: DraftPlan; telemetry: DraftTelemetry } => ({
+        draft: draft ?? emptyDraft(currentTx.id),
+        telemetry: draftTelemetry(currentTx, draft),
+      });
+      await showReviewWebUi(ctx, snapshot.atoms, getLatest, {
+        editSummary: (id, summary) => commitMutation(updateDraftRange(draft ?? emptyDraft(currentTx.id), id, { summary })),
+        editTopic: (id, topic) => commitMutation(updateDraftRange(draft ?? emptyDraft(currentTx.id), id, { topic: topic || undefined })),
+        remove: (id) => commitMutation(removeDraftRange(draft ?? emptyDraft(currentTx.id), id)),
+      });
+      ctx.ui.notify("Midcompact review-webui closed.", "info");
+      return;
+    }
+
+    if (ctx.mode !== "tui") {
+      ctx.ui.notify(
+        "Interactive TUI review is only available in interactive (tui) mode. Use /midcompact review-webui to open a local web page instead.",
+        "warning",
+      );
+      return;
+    }
+
     while (true) {
-      const restored = restoreTransaction(ctx.sessionManager.getBranch() as SessionEntry[]);
-      const currentTx = restored.transaction ?? transaction;
-      const currentDraft = restored.draft ?? draft;
-      if (!currentTx) {
-        ctx.ui.notify("No active midcompact transaction.", "warning");
-        return;
-      }
-      const currentPlan = currentDraft ?? emptyDraft(currentTx.id);
-      const snapshot = buildAnchorSnapshot(ctx.sessionManager, currentTx);
-      const telemetry = draftTelemetry(currentTx, currentPlan);
-      if (ctx.mode !== "tui") {
-        ctx.ui.notify(formatDraft(currentPlan, telemetry), "info");
-        return;
-      }
-      const action = await showReviewUi(ctx, snapshot.atoms, currentPlan, telemetry);
+      const plan = draft ?? emptyDraft(currentTx.id);
+      const telemetry = draftTelemetry(currentTx, plan);
+      const action = await showReviewUi(ctx, snapshot.atoms, plan, telemetry);
       if (action.action === "close") return;
-      const range = currentPlan.ranges.find((candidate) => candidate.id === action.draftId);
+      const range = plan.ranges.find((candidate) => candidate.id === action.draftId);
       if (!range) continue;
 
       if (action.action === "edit-summary") {
         const value = await ctx.ui.editor(`Edit ${range.id} summary`, range.summary);
         if (value === undefined || !value.trim()) continue;
-        draft = updateDraftRange(currentPlan, range.id, { summary: value.trim() });
-        pi.appendEntry(DRAFT_ENTRY, draft);
-        updateStatus(ctx, currentTx, draft);
+        commitMutation(updateDraftRange(plan, range.id, { summary: value.trim() }));
         continue;
       }
       if (action.action === "edit-topic") {
         const value = await ctx.ui.input(`Edit ${range.id} topic`, range.topic ?? "");
         if (value === undefined) continue;
-        draft = updateDraftRange(currentPlan, range.id, { topic: value.trim() || undefined });
-        pi.appendEntry(DRAFT_ENTRY, draft);
-        updateStatus(ctx, currentTx, draft);
+        commitMutation(updateDraftRange(plan, range.id, { topic: value.trim() || undefined }));
         continue;
       }
       if (action.action === "remove") {
         const approved = await ctx.ui.confirm("Remove compression range?", `${range.id}: ${range.startRef} → ${range.endRef}`);
         if (!approved) continue;
-        draft = removeDraftRange(currentPlan, range.id);
-        pi.appendEntry(DRAFT_ENTRY, draft);
-        updateStatus(ctx, currentTx, draft);
+        commitMutation(removeDraftRange(plan, range.id));
       }
     }
   }

package/src/review-ui.ts

@@ -4,6 +4,12 @@ import { Key, matchesKey, truncateToWidth, wrapTextWithAnsi } from "@earendil-wo
 import { formatPercent, formatTokenCount } from "./telemetry.js";
 import type { Atom, DraftPlan, DraftRange, DraftTelemetry, ReviewAction } from "./types.js";
 
+/**
+ * Interactive TUI review. Rendered as a centered overlay (not a full-height
+ * editor replacement) so it never flattens the chat transcript. Ranges fold
+ * into single header lines; the selected range expands inline with its detail
+ * and edit affordances, removing the duplicate top "Selected" block.
+ */
 export async function showReviewUi(
   ctx: ExtensionCommandContext,
   atoms: Atom[],
@@ -12,148 +18,180 @@ export async function showReviewUi(
 ): Promise<ReviewAction> {
   if (ctx.mode !== "tui") return { action: "close" };
 
-  return ctx.ui.custom<ReviewAction>((tui, theme, _keybindings, done) => {
-    let scrollOffset = 0;
-    let selectedRange = draft.ranges.length ? 0 : -1;
-    let expandSelected = false;
-    let jumpToSelected = true;
-
-    const selected = (): DraftRange | undefined => selectedRange >= 0 ? draft.ranges[selectedRange] : undefined;
-
-    const component = {
-      render(width: number): string[] {
-        const w = Math.max(30, width);
-        const rows = Math.max(12, tui.terminal.rows);
-        const border = (text: string) => theme.fg("border", text);
-        const dim = (text: string) => theme.fg("dim", text);
-        const accent = (text: string) => theme.fg("accent", text);
-        const success = (text: string) => theme.fg("success", text);
-        const warning = (text: string) => theme.fg("warning", text);
-        const bodyWidth = Math.max(20, w - 4);
-        const framed = (text: string) => `${border("│")} ${truncateToWidth(text, bodyWidth, "…", true)} ${border("│")}`;
-        const horizontal = (left: string, mid = "─", right = "─") => border(`${left}${mid.repeat(Math.max(0, w - 2))}${right}`);
-
-        const header: string[] = [];
-        header.push(horizontal("╭", "─", "╮"));
-        header.push(framed(accent(theme.bold(`Midcompact Review · Draft v${draft.revision}`))));
-        header.push(framed(formatUsageLine(telemetry, theme)));
-        header.push(framed(dim("This is awareness, not a target. Review the linear anchor snapshot before /midcompact commit.")));
-        header.push(horizontal("├", "─", "┤"));
-
-        const range = selected();
-        const selectedInfo: string[] = [];
-        if (range) {
-          selectedInfo.push(framed(`${accent("Selected")} ${range.id}  ${range.startRef} → ${range.endRef}${range.topic ? `  ${range.topic}` : ""}`));
-          selectedInfo.push(framed(dim(`~${formatTokenCount(range.originalApproxTokens)} → ~${formatTokenCount(range.compressedApproxTokens)} tokens`)));
-          for (const line of wrapTextWithAnsi(`${accent("Summary:")} ${range.summary}`, bodyWidth)) selectedInfo.push(framed(line));
-          selectedInfo.push(horizontal("├", "─", "┤"));
-        }
-
-        const body: string[] = [];
-        const atomLineStarts = new Map<number, number>();
-        for (const atom of atoms) {
-          atomLineStarts.set(atom.index, body.length);
-          const owner = owningRange(atom.index, draft.ranges);
-          const isSelected = Boolean(range && owner?.id === range.id);
-          const isRangeStart = owner?.startIndex === atom.index;
-          const isRangeEnd = owner?.endIndex === atom.index;
-          const rangeMark = owner ? (isRangeStart ? "┌" : isRangeEnd ? "└" : "│") : " ";
-          const selectionMark = isSelected ? "▶" : " ";
-          const policy = owner ? warning(owner.id) : success("KEEP");
-          const token = dim(`~${formatTokenCount(atom.approxTokens)}`);
-          const oneLine = firstLine(atom.preview);
-          body.push(framed(`${selectionMark}${rangeMark} ${policy} ${atom.ref} [${atom.kind}] ${token}  ${oneLine}`));
-          if (expandSelected && isSelected) {
-            const detail = wrapTextWithAnsi(atom.preview, Math.max(10, bodyWidth - 4));
-            for (const detailLine of detail.slice(1, 8)) body.push(framed(dim(`    ${detailLine}`)));
+  return ctx.ui.custom<ReviewAction>(
+    (tui, theme, _keybindings, done) => {
+      let scrollOffset = 0;
+      let selectedRange = draft.ranges.length ? 0 : -1;
+      let expandSelected = true;
+      let jumpToSelected = true;
+
+      const selected = (): DraftRange | undefined =>
+        selectedRange >= 0 ? draft.ranges[selectedRange] : undefined;
+
+      const component = {
+        render(width: number): string[] {
+          const w = Math.max(40, width);
+          // Conservative height budget: stay under the overlay's maxHeight so
+          // the overlay never clips and the chat transcript is not crushed.
+          const totalBudget = Math.max(18, Math.floor(tui.terminal.rows * 0.8));
+          const border = (text: string) => theme.fg("border", text);
+          const dim = (text: string) => theme.fg("dim", text);
+          const accent = (text: string) => theme.fg("accent", text);
+          const success = (text: string) => theme.fg("success", text);
+          const warning = (text: string) => theme.fg("warning", text);
+          const inner = Math.max(20, w - 4);
+          const framed = (text: string) => `${border("│")} ${truncateToWidth(text, inner, "…", true)} ${border("│")}`;
+          const h = (l: string, m = "─", r = "─") => border(`${l}${m.repeat(Math.max(0, w - 2))}${r}`);
+
+          const range = selected();
+
+          const header: string[] = [
+            h("╭"),
+            framed(accent(theme.bold(`Midcompact Review · Draft v${draft.revision} · ${draft.ranges.length} range(s)`))),
+            framed(usageLine(telemetry, theme)),
+            h("├"),
+          ];
+
+          // Timeline: KEEP atoms always shown; ranges fold to a header line,
+          // except the selected range which expands with detail + its atoms.
+          const body: string[] = [];
+          const rangeStarts = new Map(draft.ranges.map((r) => [r.startIndex, r]));
+          const rangeLineStarts = new Map<string, number>();
+
+          for (const atom of atoms) {
+            const head = rangeStarts.get(atom.index);
+            if (head) {
+              rangeLineStarts.set(head.id, body.length);
+              const isSel = Boolean(range && range.id === head.id);
+              const save = Math.max(0, head.originalApproxTokens - head.compressedApproxTokens);
+              const atomCount = head.endIndex - head.startIndex + 1;
+              const caret = isSel ? (expandSelected ? "▾" : "▸") : "▸";
+              const caretCol = isSel ? accent(caret) : dim(caret);
+              const idCol = isSel ? theme.bold(warning(head.id)) : warning(head.id);
+              const span = dim(`${head.startRef}→${head.endRef} · ${atomCount} atoms`);
+              const tok = dim(`~${formatTokenCount(head.originalApproxTokens)}→~${formatTokenCount(head.compressedApproxTokens)}`);
+              const saveCol = success(`save ~${formatTokenCount(save)}`);
+              const topicCol = head.topic ? `${accent(head.topic)} ` : "";
+              const sumCol = dim(firstLine(head.summary, 48));
+              const headText = `${caretCol} ${idCol} ${span} ${tok} ${saveCol} ${topicCol}${sumCol}`;
+              body.push(framed(isSel ? accent(headText) : headText));
+
+              if (isSel) {
+                body.push(framed(dim(`  topic: ${head.topic ?? "—"}`)));
+                body.push(framed(dim(`  tokens: ~${formatTokenCount(head.originalApproxTokens)} → ~${formatTokenCount(head.compressedApproxTokens)} (save ~${formatTokenCount(save)})`)));
+                const wrapWidth = Math.max(10, inner - 6);
+                for (const line of wrapTextWithAnsi(`${accent("summary:")} ${head.summary}`, wrapWidth)) {
+                  body.push(framed(`  ${line}`));
+                }
+                body.push(framed(dim(`  [e] edit summary · [t] edit topic · [d] remove · [x] ${expandSelected ? "collapse" : "expand"} atoms`)));
+              }
+            }
+
+            const owner = owningRange(atom.index, draft.ranges);
+            const showAtom = !owner || (Boolean(range) && owner.id === range!.id && expandSelected);
+            if (!showAtom) continue;
+
+            const mark = owner
+              ? atom.index === owner.startIndex
+                ? "┌"
+                : atom.index === owner.endIndex
+                  ? "└"
+                  : "│"
+              : " ";
+            const policy = owner ? warning(owner.id) : success("KEEP");
+            const tok = dim(`~${formatTokenCount(atom.approxTokens)}`);
+            const oneLine = dim(firstLine(atom.preview, 80));
+            body.push(framed(`${mark} ${policy} ${atom.ref} [${atom.kind}] ${tok}  ${oneLine}`));
+          }
+          if (!body.length) body.push(framed(dim("(No atoms in anchor snapshot.)")));
+
+          const footer: string[] = [
+            h("├"),
+            framed(dim(`ranges ${hint("n/p", theme)} · scroll ${hint("↑↓ PgUp PgDn", theme)} · ${hint("Esc", theme)} close`)),
+            framed(dim(`selected: ${hint("e", theme)} summary · ${hint("t", theme)} topic · ${hint("d", theme)} remove · ${hint("x", theme)} expand`)),
+            h("╰"),
+          ];
+
+          const viewportHeight = Math.max(5, totalBudget - header.length - footer.length);
+          if (jumpToSelected && range) {
+            const target = rangeLineStarts.get(range.id) ?? 0;
+            scrollOffset = Math.max(0, target - 2);
+            jumpToSelected = false;
           }
-        }
-        if (!body.length) body.push(framed(dim("(No atoms in anchor snapshot.)")));
-
-        const footerRows = 4;
-        const viewportHeight = Math.max(5, rows - header.length - selectedInfo.length - footerRows - 2);
-        if (jumpToSelected && range) {
-          scrollOffset = atomLineStarts.get(range.startIndex) ?? scrollOffset;
-          jumpToSelected = false;
-        }
-        const maxOffset = Math.max(0, body.length - viewportHeight);
-        scrollOffset = Math.max(0, Math.min(scrollOffset, maxOffset));
-        const visible = body.slice(scrollOffset, scrollOffset + viewportHeight);
-        while (visible.length < viewportHeight) visible.push(framed(""));
-
-        const top = body.length ? scrollOffset + 1 : 0;
-        const bottom = Math.min(body.length, scrollOffset + viewportHeight);
-        const footer = [
-          horizontal("├", "─", "┤"),
-          framed(dim(`Lines ${top}-${bottom} of ${body.length} · n/p select range · ↑↓/PgUp/PgDn scroll · x expand selected`)),
-          framed(dim("e edit summary · t edit topic · d remove selected range · Enter/Esc close")),
-          horizontal("╰", "─", "╯"),
-        ];
-        return [...header, ...selectedInfo, ...visible, ...footer];
-      },
-      invalidate(): void {},
-      handleInput(data: string): void {
-        if (matchesKey(data, Key.escape) || matchesKey(data, Key.enter) || data === "q") {
-          done({ action: "close" });
-          return;
-        }
-        if ((data === "n" || matchesKey(data, Key.right)) && draft.ranges.length) {
-          selectedRange = (selectedRange + 1 + draft.ranges.length) % draft.ranges.length;
-          jumpToSelected = true;
-          tui.requestRender();
-          return;
-        }
-        if ((data === "p" || matchesKey(data, Key.left)) && draft.ranges.length) {
-          selectedRange = (selectedRange - 1 + draft.ranges.length) % draft.ranges.length;
-          jumpToSelected = true;
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.up) || data === "k") {
-          scrollOffset = Math.max(0, scrollOffset - 1);
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.down) || data === "j") {
-          scrollOffset += 1;
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.pageUp)) {
-          scrollOffset = Math.max(0, scrollOffset - 12);
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.pageDown)) {
-          scrollOffset += 12;
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.home)) {
-          scrollOffset = 0;
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.end)) {
-          scrollOffset = Number.MAX_SAFE_INTEGER;
-          tui.requestRender();
-          return;
-        }
-        if (data === "x") {
-          expandSelected = !expandSelected;
-          jumpToSelected = true;
-          tui.requestRender();
-          return;
-        }
-        const range = selected();
-        if (!range) return;
-        if (data === "e") done({ action: "edit-summary", draftId: range.id });
-        else if (data === "t") done({ action: "edit-topic", draftId: range.id });
-        else if (data === "d") done({ action: "remove", draftId: range.id });
-      },
-    };
-    return component;
-  });
+          const maxOffset = Math.max(0, body.length - viewportHeight);
+          scrollOffset = Math.max(0, Math.min(scrollOffset, maxOffset));
+          const visible = body.slice(scrollOffset, scrollOffset + viewportHeight);
+          while (visible.length < viewportHeight) visible.push(framed(""));
+
+          return [...header, ...visible, ...footer];
+        },
+        invalidate(): void {},
+        handleInput(data: string): void {
+          if (matchesKey(data, Key.escape) || matchesKey(data, Key.enter) || data === "q") {
+            done({ action: "close" });
+            return;
+          }
+          if ((data === "n" || matchesKey(data, Key.right)) && draft.ranges.length) {
+            selectedRange = (selectedRange + 1 + draft.ranges.length) % draft.ranges.length;
+            expandSelected = true;
+            jumpToSelected = true;
+            tui.requestRender();
+            return;
+          }
+          if ((data === "p" || matchesKey(data, Key.left)) && draft.ranges.length) {
+            selectedRange = (selectedRange - 1 + draft.ranges.length) % draft.ranges.length;
+            expandSelected = true;
+            jumpToSelected = true;
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.up) || data === "k") {
+            scrollOffset = Math.max(0, scrollOffset - 1);
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.down) || data === "j") {
+            scrollOffset += 1;
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.pageUp)) {
+            scrollOffset = Math.max(0, scrollOffset - 12);
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.pageDown)) {
+            scrollOffset += 12;
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.home)) {
+            scrollOffset = 0;
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.end)) {
+            scrollOffset = Number.MAX_SAFE_INTEGER;
+            tui.requestRender();
+            return;
+          }
+          if (data === "x") {
+            expandSelected = !expandSelected;
+            jumpToSelected = true;
+            tui.requestRender();
+            return;
+          }
+          const range = selected();
+          if (!range) return;
+          if (data === "e") done({ action: "edit-summary", draftId: range.id });
+          else if (data === "t") done({ action: "edit-topic", draftId: range.id });
+          else if (data === "d") done({ action: "remove", draftId: range.id });
+        },
+      };
+      return component;
+    },
+    { overlay: true, overlayOptions: { width: "92%", maxHeight: "86%", anchor: "center" } },
+  );
 }
 
 export function buildReviewText(atoms: Atom[], draft: DraftPlan, telemetry: DraftTelemetry): string {
@@ -165,7 +203,7 @@ export function buildReviewText(atoms: Atom[], draft: DraftPlan, telemetry: Draf
   ];
   for (const atom of atoms) {
     const owner = owningRange(atom.index, draft.ranges);
-    lines.push(`${owner ? owner.id : "KEEP"} ${atom.ref} [${atom.kind}] ~${formatTokenCount(atom.approxTokens)} ${firstLine(atom.preview)}`);
+    lines.push(`${owner ? owner.id : "KEEP"} ${atom.ref} [${atom.kind}] ~${formatTokenCount(atom.approxTokens)} ${firstLine(atom.preview, 120)}`);
   }
   if (draft.ranges.length) {
     lines.push("", "Proposed summaries:");
@@ -178,8 +216,14 @@ function owningRange(atomIndex: number, ranges: DraftRange[]): DraftRange | unde
   return ranges.find((range) => atomIndex >= range.startIndex && atomIndex <= range.endIndex);
 }
 
-function firstLine(text: string): string {
-  return text.replace(/\s+/g, " ").trim();
+function firstLine(text: string, limit = 120): string {
+  const normalized = text.replace(/\s+/g, " ").trim();
+  if (normalized.length <= limit) return normalized;
+  return `${normalized.slice(0, Math.max(0, limit - 1))}…`;
+}
+
+function hint(text: string, theme: ExtensionCommandContext["ui"]["theme"]): string {
+  return theme.fg("accent", text);
 }
 
 function plainUsageLine(telemetry: DraftTelemetry): string {
@@ -192,7 +236,6 @@ function plainUsageLine(telemetry: DraftTelemetry): string {
   return `Anchor ${anchor} · Draft selected ~${formatTokenCount(telemetry.selectedOriginalApproxTokens)}→~${formatTokenCount(telemetry.selectedCompressedApproxTokens)} · Projected ${projected}`;
 }
 
-function formatUsageLine(telemetry: DraftTelemetry, theme: ExtensionCommandContext["ui"]["theme"]): string {
-  const label = theme.fg("accent", "Context");
-  return `${label}: ${plainUsageLine(telemetry)}`;
+function usageLine(telemetry: DraftTelemetry, theme: ExtensionCommandContext["ui"]["theme"]): string {
+  return `${theme.fg("accent", "Context")}: ${plainUsageLine(telemetry)}`;
 }