@gavin-hu/my-pi-agent 0.9.0 → 0.11.0

package/extensions/job/tui.ts

@@ -21,7 +21,7 @@ import { clip, fitCells } from "../../lib/tui/columns.ts";
 import { fitRows, formatRange, IdCursor, isCloseKey, navIntent, wheelDelta } from "../../lib/tui/cursor.ts";
 import { expandHint, SEPARATORS } from "../../lib/tui/glyphs.ts";
 import { LinePane } from "../../lib/tui/line-pane.ts";
-import { emptyState, listRow } from "../../lib/tui/rows.ts";
+import { emptyState, statusRow, type StatusRow } from "../../lib/tui/rows.ts";
 import { titleRule } from "../../lib/tui/rules.ts";
 import { paint } from "../../lib/tui/tokens.ts";
 import {
@@ -51,21 +51,28 @@ const LOG_CHROME_ROWS = 6;
 const jobId = (job: JobRecord): string => job.id;
 
 /** One job row: selection marker, status glyph, id, label, and a right-aligned
- *  elapsed value. `listRow` owns the clipping and the alignment. */
-function jobRow(job: JobRecord, theme: Theme, width: number, selected = false): string {
-	return listRow(theme, width, {
-		selected,
+ *  elapsed value, tagged `peer` when another session owns it. `statusRow` owns
+ *  the clipping and the alignment. */
+function jobRow(
+	job: JobRecord,
+	theme: Theme,
+	width: number,
+	options: Pick<StatusRow, "selected" | "marker"> & { foreign?: boolean } = {},
+): string {
+	const elapsed = formatDuration(elapsedMs(job, Date.now()));
+	return statusRow(theme, width, {
+		...options,
 		glyph: statusGlyphChar(job.status),
 		glyphRole: statusRole(job.status),
 		label: `${job.id}  ${shortLabel(job)}`,
-		trailing: formatDuration(elapsedMs(job, Date.now())),
-		trailingRole: "faint",
+		// The tag rides the right-aligned cell, which survives a narrow terminal.
+		trailing: options.foreign ? `${elapsed}${SEPARATORS.item}peer` : elapsed,
 	});
 }
 
 /** Input for the transcript result: a themed job list or a log tail. */
 export type JobResultInput =
-	| { kind: "list"; jobs: JobRecord[]; more: number }
+	| { kind: "list"; jobs: JobRecord[]; more: number; sessionId?: string }
 	| { kind: "logs"; lines: string[]; earlier: number };
 
 /**
@@ -95,7 +102,10 @@ export class JobResult implements Component {
 		// A leading blank line separates the result from the call header.
 		const lines: string[] = [""];
 		if (this.input.kind === "list") {
-			for (const job of this.input.jobs) lines.push(jobRow(job, this.theme, w));
+			for (const job of this.input.jobs) {
+				const foreign = this.input.sessionId !== undefined && job.sessionId !== this.input.sessionId;
+				lines.push(jobRow(job, this.theme, w, { marker: false, foreign }));
+			}
 			if (this.input.more > 0) {
 				const note = `${paint(this.theme, "faint", `… ${this.input.more} more`)} ${expandHint(this.theme)}`;
 				lines.push(clip(`  ${note}`, w));
@@ -114,6 +124,8 @@ export class JobResult implements Component {
 }
 
 export interface JobListCallbacks {
+	/** This session's id: a record with another id belongs to a peer session. */
+	sessionId(): string;
 	/** Current sanitized log lines for a job, or undefined when unknown. */
 	logs(id: string): { lines: string[]; more?: boolean } | undefined;
 	kill(id: string): void;
@@ -171,6 +183,11 @@ export class JobListComponent implements Component {
 		return [...this.jobs()].sort(compareJobs);
 	}
 
+	/** Whether another session owns this job, so the screen leaves it alone. */
+	private isForeign(job: JobRecord): boolean {
+		return job.sessionId !== this.callbacks.sessionId();
+	}
+
 	/** Focus job `next` (clamped) and keep it visible. */
 	private select(next: number): void {
 		const jobs = this.ordered;
@@ -252,7 +269,10 @@ export class JobListComponent implements Component {
 		else if (data === "d" || data === "K") {
 			const job = ordered[index];
 			if (!job) return;
-			if (job.status === "running") {
+			if (this.isForeign(job)) {
+				// Another session's job is shown here, not managed from here.
+				this.notice = `${job.id} is another session's job; not killed.`;
+			} else if (job.status === "running") {
 				this.confirm = { kind: "kill", id: job.id, label: shortLabel(job) };
 			} else {
 				// A finished job has nothing to kill; say so instead of a silent no-op.
@@ -260,7 +280,9 @@ export class JobListComponent implements Component {
 			}
 			this.requestRender();
 		} else if (data === "x") {
-			const finished = ordered.filter((job) => job.status !== "running");
+			// Only this session's finished jobs are ours to clear, so the prompt and the
+			// result agree.
+			const finished = ordered.filter((job) => !this.isForeign(job) && job.status !== "running");
 			if (finished.length > 0) {
 				this.confirm = {
 					kind: "clear",
@@ -316,10 +338,11 @@ export class JobListComponent implements Component {
 		if (this.pane.handleKey(data)) this.requestRender();
 	}
 
-	private summary(counts: JobCounts, width: number): string {
+	private summary(counts: JobCounts, width: number, foreign: number): string {
 		const cells = [paint(this.theme, "meta", `${counts.total} job${counts.total === 1 ? "" : "s"}`)];
 		if (counts.running > 0) cells.push(paint(this.theme, "meta", `${counts.running} running`));
 		if (counts.failed > 0) cells.push(paint(this.theme, "bad", `${counts.failed} failed`));
+		if (foreign > 0) cells.push(paint(this.theme, "faint", `${foreign} peer`));
 		const separator = paint(this.theme, "meta", SEPARATORS.item);
 		return clip(`  ${fitCells(cells, Math.max(1, width - 2), separator)}`, width);
 	}
@@ -334,7 +357,7 @@ export class JobListComponent implements Component {
 		this.cursor.clamp(jobs, jobId);
 		const index = this.cursor.indexOf(jobs, jobId);
 		const focused = jobs[index];
-		const detail = focused ? formatJobDetail(focused, Date.now()) : [];
+		const detail = focused ? formatJobDetail(focused, Date.now(), this.callbacks.sessionId()) : [];
 		this.cursor.visible = fitRows(
 			this.viewportRowsSource,
 			jobs.length,
@@ -350,7 +373,10 @@ export class JobListComponent implements Component {
 			body.push(...emptyState(this.theme, w, { label: "No background jobs." }));
 		} else {
 			const end = Math.min(jobs.length, this.cursor.scroll + this.cursor.visible);
-			for (let i = this.cursor.scroll; i < end; i++) body.push(jobRow(jobs[i], this.theme, w, i === index));
+			for (let i = this.cursor.scroll; i < end; i++) {
+				const row = jobs[i];
+				body.push(jobRow(row, this.theme, w, { selected: i === index, foreign: this.isForeign(row) }));
+			}
 			if (this.cursor.scroll > 0 || end < jobs.length) {
 				range = formatRange(this.theme, w, { start: this.cursor.scroll, end, total: jobs.length });
 			}
@@ -371,7 +397,7 @@ export class JobListComponent implements Component {
 
 		return dockListFrame({
 			header: titleRule(this.theme, w, "Jobs"),
-			summary: this.summary(jobCounts(jobs), w),
+			summary: this.summary(jobCounts(jobs), w, jobs.filter((job) => this.isForeign(job)).length),
 			body,
 			range,
 			// The detail pane is separated from the list by a blank line.

package/extensions/job/types.ts

@@ -10,7 +10,7 @@ export const JOB_STATUSES = ["running", "exited", "killed", "failed", "unknown"]
 
 export type JobStatus = (typeof JOB_STATUSES)[number];
 
-export const JOB_ACTIONS = ["start", "list", "status", "logs", "kill", "wait", "clear"] as const;
+export const JOB_ACTIONS = ["start", "list", "status", "logs", "send", "kill", "wait", "clear"] as const;
 
 export type JobAction = (typeof JOB_ACTIONS)[number];
 
@@ -40,6 +40,8 @@ export interface JobRecord {
 	detached: boolean;
 	/** Wake the agent with one triggered turn when the job finishes. */
 	wake: boolean;
+	/** Started with a stdin pipe, so `send` can write to it while this session holds the child. */
+	stdin: boolean;
 	/** Session that started the job. */
 	sessionId: string;
 	/** Whether the completion has already been reported to the model. */
@@ -83,10 +85,16 @@ export interface JobDetails {
 	signalled?: boolean;
 	/** Signal sent by `kill`; defaults to SIGTERM. */
 	signal?: KillSignal;
+	/** Characters of `input` written by `send`, excluding the added newline. */
+	sent?: number;
+	/** True when `send` ended the job's stdin (EOF). */
+	stdinClosed?: boolean;
 	/** True when `wait` hit its timeout. */
 	timedOut?: boolean;
 	/** True when `wait` was cancelled by the tool's abort signal. */
 	cancelled?: boolean;
+	/** Session that made the call, so a transcript can mark another session's rows. */
+	sessionId?: string;
 	/** Model-readable validation message when the call was rejected. */
 	error?: string;
 }

package/extensions/memory/README.md

@@ -13,6 +13,12 @@ pi -e .                               # load the whole @gavin-hu/my-pi-agent pac
 pi install ./                         # install the package
 ```
 
+## Tool rendering
+
+How the `memory` call and its result look in the transcript — the call line as a headline and the body indented under it:
+
+<img src="../../assets/tools/memory.png" alt="The memory tool's result: the call line and an indented body confirming the write and the new project and global counts" width="100%">
+
 ## What it does
 
 - Registers one model-callable tool, `memory`, with four actions: `add` a note,

package/extensions/memory/format.ts

@@ -78,7 +78,9 @@ export function formatResultText(details: MemoryDetails, expanded = false): stri
 			].join("\n");
 		case "add":
 			if (details.changed) {
-				return `Added to ${scopeLabel(details.scope)} memory: ${details.entry ?? ""}\nNow ${countLine(entries)}.`;
+				// The call line already names the note, so the result confirms the write
+				// and the new counts rather than repeating it.
+				return `Added to ${scopeLabel(details.scope)} memory\nNow ${countLine(entries)}.`;
 			}
 			if (details.existing !== undefined && details.existing !== details.entry) {
 				return `Already in ${scopeLabel(details.scope)} memory (near-duplicate): ${details.existing}`;
@@ -86,10 +88,10 @@ export function formatResultText(details: MemoryDetails, expanded = false): stri
 			return `Already in ${scopeLabel(details.scope)} memory: ${details.existing ?? details.entry ?? ""}`;
 		case "update":
 			return details.changed
-				? `Updated ${scopeLabel(details.scope)} memory: ${details.entry ?? ""} → ${details.to ?? ""}\nNow ${countLine(entries)}.`
+				? `Updated ${scopeLabel(details.scope)} memory\nNow ${countLine(entries)}.`
 				: `Already set in ${scopeLabel(details.scope)} memory: ${details.entry ?? ""}`;
 		case "forget":
-			return `Removed from ${scopeLabel(details.scope)} memory: ${details.entry ?? ""}\nNow ${countLine(entries)}.`;
+			return `Removed from ${scopeLabel(details.scope)} memory\nNow ${countLine(entries)}.`;
 	}
 }
 

package/extensions/plan/README.md

@@ -12,6 +12,14 @@ pi -e .                            # load the whole @gavin-hu/my-pi-agent packag
 pi --plan                          # start in plan mode
 ```
 
+## Tool rendering
+
+How the `write_plan` and `exit_plan_mode` calls and their results look in the transcript — the call line as a headline and the body indented under it:
+
+<img src="../../assets/tools/write_plan.png" alt="The write_plan tool's call and result: the call line and an indented body with the saved plan path and byte count" width="100%">
+
+<img src="../../assets/tools/exit_plan_mode.png" alt="The exit_plan_mode tool's call and result: the call line and an indented body with the approval line and the approved plan preview" width="100%">
+
 ## What it does
 
 - **Read-only gating, with one exception.** Tools that are not read-only are
@@ -142,7 +150,9 @@ the user.
 
 Browser review is a local-turn feature: the server binds `127.0.0.1`, so a remote
 (WeChat) turn cannot reach it and `/plan review` there refuses with a notice
-instead of opening a server nobody can use.
+instead of opening a server nobody can use. The browser's **Approve & run** is
+offered only for the review `exit_plan_mode` opens, since only that flow owns
+leaving plan mode; `/plan review` stays comment-only.
 
 ### Transcript
 
@@ -254,15 +264,15 @@ agent file that overrides it.
 
 ## Browser review
 
-<img src="../../assets/plan-review.png" alt="The browser-based plan review: a sticky header with the plan title and Save/Close, a side panel with step progress and a section outline, and the plan as one measured column with a comment rail and an inline review thread" width="100%">
+<img src="../../assets/plan-review.png" alt="The browser-based plan review: a sticky header with the plan title, a status chip, and the Approve & run, Save feedback, and Back to Pi actions, a side panel with step progress and a section outline, and the plan as one measured column with a comment rail and an inline review thread" width="100%">
 
 Press `w` on the review screen — or run `/plan review [path]` — to open the plan
 in the default browser on `127.0.0.1`. The page is a reading-first review
 surface: a sticky header carrying the plan's H1 (falling back to the file-name
 slug), a live status chip (connection, comment count, and unsaved changes), the
-theme toggle, and Save/Close, over a hairline reading-progress bar. A sticky
-side panel shows the plan's step progress and comment count above a **section
-outline**, and the document is GitHub's Markdown content column — one centred
+theme toggle, and the review actions, over a hairline reading-progress bar. A
+sticky side panel shows the plan's step progress and comment count above a
+**section outline**, and the document is GitHub's Markdown content column — one centred
 measure of at most 1012px with a comment rail in its left margin. Every block
 reveals a **+ Comment** action on hover; select
 text first to quote it. **Save feedback** writes the comments into the plan
@@ -284,12 +294,22 @@ file and returns them to the model.
   labelled and indented as a thread, so it reads in place and the plan keeps one
   measure at every width. There is no separate column to reflow.
 - **Keyboard first.** `j`/`k` move to the next or previous block, `c` comments
-  on the current block, `s` saves, `Esc` closes the composer, and `?` opens a
-  shortcut sheet; the header's `?` button opens the same sheet.
+  on the current block, `a` approves (the approval flow only), `s` saves, `Esc`
+  closes the composer or the sheet and then the review, and `?` opens a shortcut
+  sheet; the header's `?` button opens the same sheet.
+- **Decision in place.** A review opened for approval (`w` on the review screen)
+  shows **Approve & run** beside Save feedback: it persists the current comments,
+  ends plan mode, restores write access, seeds `todo`, and hands control back to
+  the model. **Save feedback** keeps plan mode and returns the comments as a
+  refinement; **Back to Pi** closes the review with no decision. Each action
+  settles the page on a terminal state — `Approved`, `Saved`, or `Closed` — so
+  the tab never falls to Offline. `/plan review` is comment-only: it renders no
+  approve action and the server refuses one.
 - **Markdown that reads.** Headings, lists, task items, blockquotes, fenced
-  code, GFM tables, `---` rules, and bare-URL autolinks render; tables honour the
-  alignment row and
-  scroll horizontally when narrow.
+  code, GFM tables, `---` rules, and bare-URL autolinks render; a list item's
+  continuation lines hang under the item's text, inline code is a soft fill
+  rather than a bordered chip, tables honour the alignment row and scroll
+  horizontally when narrow.
 - **Highlighted code.** Fenced code is tokenized by the shared
   `lib/highlight.ts`; the client copies only text and `tok-*` spans through
   `DOMParser`, so a code line is never parsed as markup.
@@ -439,10 +459,10 @@ file and returns them to the model.
 | `tui.ts` | `PlanViewComponent` (sectioned Markdown body, section jump, scroll gauge, approve/refine/browser/keep). |
 | `blocks.ts` | Source-line block model (fence-aware headings, paragraphs, list items, code, quotes, tables, rules, blanks). |
 | `feedback.ts` | Browser-comment codec: `stripFeedback`, `parseFeedback`, `formatFeedback`, `feedbackSummary`, and payload validation. |
-| `web.ts` | `createPlanWebReview`: the loopback server, the section outline and code highlighting, and the save/cancel/abort session. |
+| `web.ts` | `createPlanWebReview`: the loopback server, the section outline and code highlighting, and the save/approve/cancel/abort session. |
 | `web-router.ts` | Pure request handler: token/`Host`/method checks and the review routes. |
 | `web-page.ts` | The review page shell (header, reading progress, review facts, section outline, shortcut sheet), its data island, and inline CSS. |
-| `web-client.ts` | The `/client.js` source (block/thread rendering, the comment rail, outline and facts, inline comments, selection quotes, tables, highlighted code, keyboard nav, save/cancel). |
+| `web-client.ts` | The `/client.js` source (block/thread rendering, the comment rail, outline and facts, inline comments, selection quotes, tables, highlighted code, keyboard nav, save/approve/back). |
 | `path-guard.ts` | Recursive path-argument detection for the read-only backstop. |
 | [`../../lib/browser.ts`](../../lib/browser.ts) | Cross-platform default-browser opener (shared with `file-browse`). |
 | [`../../lib/highlight.ts`](../../lib/highlight.ts) | First-party escape-first syntax tokenizer (shared with `file-browse`). |

package/extensions/plan/tools.ts

@@ -26,12 +26,12 @@ import { FULL_SCREEN_OVERLAY, reuseText, toolDetails } from "../../lib/tui/chrom
 import { paint } from "../../lib/tui/tokens.ts";
 import { expandHint } from "../../lib/tui/glyphs.ts";
 import { READ_ONLY_SUMMARY } from "./policy.ts";
-import { feedbackSummary } from "./feedback.ts";
+import { feedbackSummary, type PlanAnnotation } from "./feedback.ts";
 import { ENTER_TOOL, EXIT_TOOL, SET_PLAN_STEPS_TOOL, WRITE_PLAN_TOOL, type PlanRuntime } from "./runtime.ts";
 import { PLAN_OUTLINE, extractPlanSteps, type PlanStep, type StepUpdate } from "./steps.ts";
 import { PlanViewComponent, sanitizePlanText, type PlanViewAction } from "./tui.ts";
 import type { EnterPlanModeDetails, ExitPlanModeDetails, SetPlanStepsDetails, WritePlanDetails } from "./types.ts";
-import { createPlanWebReview, type PlanWebReview } from "./web.ts";
+import { createPlanWebReview, type PlanReviewResult, type PlanReviewSession, type PlanWebReview } from "./web.ts";
 
 const ExitPlanModeParams = Type.Object({
 	plan_path: Type.String({
@@ -394,6 +394,8 @@ export function registerTools(
 			}
 
 			let outcome = await reviewPlan(ctx, file);
+			// Comments carried by a browser approval, reported alongside the approval.
+			let browserComments: PlanAnnotation[] = [];
 			// Review, refine, and browser review all loop back here until the user
 			// approves, keeps planning, or a refinement is handed to the model. The
 			// dialog-based refine editor carries no text from the review screen, so an
@@ -401,15 +403,25 @@ export function registerTools(
 			// as "not approved".
 			for (;;) {
 				if (outcome.action === "browser") {
-					const session = await web.start(ctx.cwd, file).catch(() => undefined);
+					const session: PlanReviewSession | undefined = await web
+						.start(ctx.cwd, file, { canApprove: true })
+						.catch(() => undefined);
 					if (!session) {
 						ctx.ui.notify("Plan review: could not start the browser review server.", "error");
 						outcome = await reviewPlan(ctx, file);
 						continue;
 					}
 					ctx.ui.notify(`Plan review: opened ${session.url}`, "info");
-					const result = await session.done;
+					const result: PlanReviewResult = await session.done;
 					await session.close();
+					if (result.status === "approved") {
+						// Approve from the browser is the TUI's approve: keep the comments it
+						// carried and fall through to the shared approval path below.
+						file = result.plan;
+						browserComments = result.annotations;
+						outcome = { action: "approve" };
+						continue;
+					}
 					if (result.status === "saved") {
 						// The comments are already in the file; hand them back as a refinement so
 						// the model revises the same plan and calls exit_plan_mode again.
@@ -491,11 +503,14 @@ export function registerTools(
 					: steps.length > 0
 						? ` Could not record the steps in the todo list${error ? `: ${error}` : ""}. Keep these steps in mind and tick them off with ${SET_PLAN_STEPS_TOOL} as you go.`
 						: " If the todo tool is available, record the steps with it before you start.";
+			const browserNote = browserComments.length
+				? `\n\nThe user approved from the browser review with these comments:\n${feedbackSummary(browserComments)}`
+				: "";
 			return {
 				content: [
 					{
 						type: "text",
-						text: `Plan approved. Plan mode is off and write access is restored. The plan file ${file.relativePath} is the source of truth; follow its steps.${tail}${listing}`,
+						text: `Plan approved. Plan mode is off and write access is restored. The plan file ${file.relativePath} is the source of truth; follow its steps.${browserNote}${tail}${listing}`,
 					},
 				],
 				details: {

package/extensions/plan/web-client.ts

@@ -25,6 +25,7 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
   var token = typeof data.token === "string" ? data.token : "";
   var annotations = Array.isArray(data.annotations) ? data.annotations.slice() : [];
   var saved = false;
+  var approved = false;
   var closed = false;
   var connected = null;
   var everConnected = false;
@@ -37,6 +38,7 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
   var planEl = document.getElementById("plan");
   var statusEl = document.getElementById("status");
   var stateEl = document.getElementById("review-state");
+  var approveButton = document.getElementById("approve");
   var saveButton = document.getElementById("save");
   var cancelButton = document.getElementById("cancel");
   var outlineList = document.getElementById("outline-list");
@@ -62,9 +64,15 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     if (!stateEl) return;
     var label;
     var tone = "";
-    if (saved) {
+    if (approved) {
+      label = "Approved";
+      tone = "success";
+    } else if (saved) {
       label = "Saved";
       tone = "success";
+    } else if (closed) {
+      // Settled by the user, not by a dropped stream: never flash Offline.
+      label = "Closed";
     } else if (connected === true) {
       label = "Connected";
       tone = "success";
@@ -78,7 +86,7 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     }
     var count = annotations.length;
     label += " \u00b7 " + count + (count === 1 ? " comment" : " comments");
-    if (dirty && !saved) {
+    if (dirty && !saved && !approved && !closed) {
       label += " \u00b7 unsaved";
       if (!tone) tone = "warn";
     }
@@ -254,9 +262,14 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
       return;
     }
     if (block.kind === "list") {
+      var items = [];
       lines.forEach(function (line) {
         var match = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/.exec(line);
         if (!match) {
+          // A following unmarked line is a CommonMark lazy continuation of the
+          // item above; join it so the paragraph hangs under the item's text.
+          var last = items[items.length - 1];
+          if (last) { if (line.trim()) last.rest += " " + line.trim(); return; }
           var plain = el("p"); renderInline(plain, line); wrap.appendChild(plain); return;
         }
         var row = el("div", "bf-block__li");
@@ -272,9 +285,12 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
           rest = box[2];
         }
         marker.textContent = markerText;
-        var body = el("span"); renderInline(body, rest);
+        var body = el("span");
         row.appendChild(marker); row.appendChild(body); wrap.appendChild(row);
+        items.push({ body: body, rest: rest });
       });
+      // Render each body once, after its continuation lines are collected.
+      items.forEach(function (item) { renderInline(item.body, item.rest); });
       return;
     }
     var paragraph = el("p");
@@ -600,6 +616,7 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
   }
 
   function lockActions() {
+    if (approveButton) approveButton.disabled = true;
     if (saveButton) saveButton.disabled = true;
     if (cancelButton) cancelButton.disabled = true;
   }
@@ -618,51 +635,67 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     controls.appendChild(reload);
   }
 
-  function save() {
-    if (saved) return;
-    setStatus("Saving\u2026");
-    fetch("/api/feedback?token=" + encodeURIComponent(token), {
+  // Save and approve share the same POST shape; only the route, the settled
+  // flag, and the wording differ. Both persist the current annotations.
+  function submit(url, okText, failText, mark) {
+    fetch(url + "?token=" + encodeURIComponent(token), {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ annotations: annotations })
     }).then(function (response) {
       if (response.ok) {
-        saved = true;
+        mark();
         dirty = false;
-        setStatus("Saved \u2014 return to Pi to continue.", "saved");
+        setStatus(okText, "saved");
         lockActions();
         updateState();
         return;
       }
       if (response.status === 409) {
         setStatus("The plan changed on disk \u2014 reload to review again.", "error");
+        if (approveButton) approveButton.disabled = true;
         if (saveButton) saveButton.disabled = true;
         offerReload();
         return;
       }
       throw new Error("server returned " + response.status);
     }).catch(function (error) {
-      setStatus("Could not save: " + error.message, "error");
+      setStatus(failText + error.message, "error");
     });
   }
 
+  function save() {
+    if (saved || approved || closed) return;
+    setStatus("Saving\u2026");
+    submit("/api/feedback", "Saved \u2014 return to Pi to continue.", "Could not save: ", function () { saved = true; });
+  }
+
+  function approve() {
+    if (saved || approved || closed) return;
+    setStatus("Approving\u2026");
+    submit("/api/approve", "Approved \u2014 return to Pi to continue.", "Could not approve: ", function () { approved = true; });
+  }
+
   function cancel() {
-    if (saved || closed) return;
+    if (saved || approved || closed) return;
     closed = true;
     lockActions();
     setStatus("Closing\u2026");
+    updateState();
     fetch("/api/cancel?token=" + encodeURIComponent(token), { method: "POST" }).catch(function () {}).then(function () {
-      setStatus("Closed without saving.");
+      setStatus("Closed \u2014 return to Pi.");
+      updateState();
     });
   }
 
+  if (approveButton) approveButton.addEventListener("click", approve);
   if (saveButton) saveButton.addEventListener("click", save);
   if (cancelButton) cancelButton.addEventListener("click", cancel);
 
   // Remember a selection made inside a block so clicking the rail button can
   // still quote it after the button press has collapsed the selection.
   document.addEventListener("mouseup", function (event) {
-    if (!planEl || saved) return;
+    if (!planEl || saved || approved || closed) return;
     var wrap = event.target && event.target.closest ? event.target.closest(".bf-block") : null;
     var quote = wrap && !wrap.querySelector(".bf-composer") ? selectionIn(wrap) : "";
     pendingQuote = wrap && quote ? { wrap: wrap, quote: quote } : null;
@@ -692,7 +725,13 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
   }
 
   document.addEventListener("keydown", function (event) {
-    if (event.key === "Escape") { closeComposer(); toggleKeys(false); return; }
+    if (event.key === "Escape") {
+      // Esc peels one layer at a time: the composer, then the sheet, then the review.
+      if (planEl && planEl.querySelector(".bf-composer")) { closeComposer(); return; }
+      if (keysDialog && !keysDialog.hidden) { toggleKeys(false); return; }
+      cancel();
+      return;
+    }
     if (typing(event.target)) return;
     if (event.metaKey || event.ctrlKey || event.altKey) return;
     if (event.key === "?") { event.preventDefault(); toggleKeys(); return; }
@@ -701,11 +740,12 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     if (event.key === "j") { event.preventDefault(); moveActive(1); return; }
     if (event.key === "k") { event.preventDefault(); moveActive(-1); return; }
     if (event.key === "c") { event.preventDefault(); commentOnActive(); return; }
+    if (event.key === "a" && approveButton) { event.preventDefault(); approve(); return; }
     if (event.key === "s") { event.preventDefault(); save(); return; }
   });
 
   window.addEventListener("beforeunload", function () {
-    if (saved || closed) return;
+    if (saved || approved || closed) return;
     var url = "/api/cancel?token=" + encodeURIComponent(token);
     if (navigator.sendBeacon) navigator.sendBeacon(url);
   });
@@ -718,8 +758,9 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     var stream = new EventSource("/events?token=" + encodeURIComponent(token));
     stream.addEventListener("open", function () { connected = true; everConnected = true; updateState(); });
     stream.addEventListener("error", function () {
-      // The server ends the stream on save; keep showing Saved rather than Offline.
-      if (!saved) { connected = false; updateState(); }
+      // The server ends the stream once the review is settled; keep showing the
+      // terminal state rather than Offline.
+      if (!saved && !approved && !closed) { connected = false; updateState(); }
     });
   } catch (error) {
     // The server still sees the POST; the stream is only for close detection.