@gavin-hu/my-pi-agent 0.8.1 → 0.10.0

package/extensions/plan/tools.ts

@@ -22,15 +22,16 @@ import { Type, type Static } from "typebox";
 import { sanitizeLine } from "../../lib/format.ts";
 import { askHuman } from "../../lib/interaction.ts";
 import { TODO_TOOL } from "../../lib/tool-names.ts";
-import { FULL_SCREEN_OVERLAY, reuseText, toolDetails } from "../../lib/tui.ts";
-import { expandHint } from "../../lib/ui.ts";
+import { FULL_SCREEN_OVERLAY, reuseText, toolDetails } from "../../lib/tui/chrome.ts";
+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({
@@ -238,7 +239,7 @@ export function registerTools(
 
 		renderCall(_args, theme, context) {
 			const text = reuseText(context?.lastComponent);
-			text.setText(theme.fg("toolTitle", theme.bold(`${ENTER_TOOL} `)) + theme.fg("muted", "requested plan mode"));
+			text.setText(theme.fg("toolTitle", theme.bold(`${ENTER_TOOL} `)) + paint(theme, "meta", "requested plan mode"));
 			return text;
 		},
 
@@ -250,10 +251,10 @@ export function registerTools(
 				text.setText(first?.type === "text" ? first.text : "");
 				return text;
 			}
-			if (details.unavailable) text.setText(theme.fg("warning", "No UI to confirm plan mode"));
-			else if (details.already) text.setText(theme.fg("muted", "Already in plan mode"));
-			else if (details.entered) text.setText(theme.fg("success", "✓ Plan mode enabled"));
-			else text.setText(theme.fg("muted", "Stayed in normal mode"));
+			if (details.unavailable) text.setText(paint(theme, "warn", "No UI to confirm plan mode"));
+			else if (details.already) text.setText(paint(theme, "meta", "Already in plan mode"));
+			else if (details.entered) text.setText(paint(theme, "ok", "✓ Plan mode enabled"));
+			else text.setText(paint(theme, "meta", "Stayed in normal mode"));
 			return text;
 		},
 	});
@@ -315,7 +316,7 @@ export function registerTools(
 		renderCall(args, theme, context) {
 			const text = reuseText(context?.lastComponent);
 			const title = (args as Partial<WritePlanArgs>).title;
-			const suffix = title ? theme.fg("muted", sanitizeLine(title)) : theme.fg("muted", "plan");
+			const suffix = title ? paint(theme, "meta", sanitizeLine(title)) : paint(theme, "meta", "plan");
 			text.setText(theme.fg("toolTitle", theme.bold(`${WRITE_PLAN_TOOL} `)) + suffix);
 			return text;
 		},
@@ -328,7 +329,7 @@ export function registerTools(
 				text.setText(first?.type === "text" ? first.text : "");
 				return text;
 			}
-			text.setText(theme.fg("success", "✓ Saved plan ") + theme.fg("muted", details.relativePath));
+			text.setText(paint(theme, "ok", "✓ Saved plan ") + paint(theme, "meta", details.relativePath));
 			return text;
 		},
 	});
@@ -393,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
@@ -400,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.
@@ -490,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: {
@@ -508,7 +524,7 @@ export function registerTools(
 
 		renderCall(_args, theme, context) {
 			const text = reuseText(context?.lastComponent);
-			text.setText(theme.fg("toolTitle", theme.bold(`${EXIT_TOOL} `)) + theme.fg("muted", "submitted a plan"));
+			text.setText(theme.fg("toolTitle", theme.bold(`${EXIT_TOOL} `)) + paint(theme, "meta", "submitted a plan"));
 			return text;
 		},
 
@@ -521,25 +537,25 @@ export function registerTools(
 				return text;
 			}
 			const heading = details.unavailable
-				? theme.fg("warning", "No UI to approve the plan")
+				? paint(theme, "warn", "No UI to approve the plan")
 				: details.approved
-					? theme.fg("success", "✓ Plan approved")
+					? paint(theme, "ok", "✓ Plan approved")
 					: details.refined
-						? theme.fg("accent", "Refining the plan")
-						: theme.fg("warning", "Plan not approved");
+						? paint(theme, "accent", "Refining the plan")
+						: paint(theme, "warn", "Plan not approved");
 			const extra =
 				details.refined && details.refinement
-					? `\n${theme.fg("muted", `↳ ${sanitizePlanText(details.refinement)}`)}`
+					? `\n${paint(theme, "meta", `↳ ${sanitizePlanText(details.refinement)}`)}`
 					: "";
 			const shown = details.relativePath ?? details.planPath;
-			const path = shown ? `\n${theme.fg("muted", shown)}` : "";
+			const path = shown ? `\n${paint(theme, "meta", shown)}` : "";
 			const planText = sanitizePlanText(details.plan);
 			let out = `${heading}${extra}${path}`;
 			if (planText) {
 				const { body, more } = expanded ? { body: planText, more: 0 } : preview(planText);
 				// A blank line separates the header block from the plan body.
 				out += `\n\n${theme.fg("toolOutput", body)}`;
-				if (more > 0) out += `\n${theme.fg("dim", `… ${more} more lines`)} ${expandHint(theme)}`;
+				if (more > 0) out += `\n${paint(theme, "faint", `… ${more} more lines`)} ${expandHint(theme)}`;
 			}
 			text.setText(out);
 			return text;
@@ -609,7 +625,7 @@ export function registerTools(
 					: updates && updates.length > 1
 						? `${updates.length} steps`
 						: "steps";
-			text.setText(theme.fg("toolTitle", theme.bold(`${SET_PLAN_STEPS_TOOL} `)) + theme.fg("muted", label));
+			text.setText(theme.fg("toolTitle", theme.bold(`${SET_PLAN_STEPS_TOOL} `)) + paint(theme, "meta", label));
 			return text;
 		},
 
@@ -625,10 +641,10 @@ export function registerTools(
 			const pending = details.updates.filter((update) => update.status === "pending").map((u) => u.step);
 			const heading =
 				completed.length > 0
-					? theme.fg("success", `✓ ${stepLabel(completed)} done`) +
-						(pending.length > 0 ? theme.fg("muted", ` · ${stepLabel(pending)} reopened`) : "")
-					: theme.fg("muted", `${stepLabel(pending)} reopened`);
-			text.setText(heading + theme.fg("dim", ` · ${details.done}/${details.total}`));
+					? paint(theme, "ok", `✓ ${stepLabel(completed)} done`) +
+						(pending.length > 0 ? paint(theme, "meta", ` · ${stepLabel(pending)} reopened`) : "")
+					: paint(theme, "meta", `${stepLabel(pending)} reopened`);
+			text.setText(heading + paint(theme, "faint", ` · ${details.done}/${details.total}`));
 			return text;
 		},
 	});

package/extensions/plan/tui.ts

@@ -33,13 +33,17 @@ import {
 import { stripControlChars } from "../../lib/format.ts";
 import {
 	editorTheme,
-	screenHeader,
 	screenHint,
 	viewportRows,
 	type ScreenHint,
 	type ViewportRowsSource,
-} from "../../lib/tui.ts";
-import { GLYPHS } from "../../lib/ui.ts";
+} from "../../lib/tui/chrome.ts";
+import { isCloseKey } from "../../lib/tui/cursor.ts";
+import { gaugeBar } from "../../lib/tui/gauge.ts";
+import { GLYPHS } from "../../lib/tui/glyphs.ts";
+import { titleRule } from "../../lib/tui/rules.ts";
+import { emptyState, checkbox } from "../../lib/tui/rows.ts";
+import { paint } from "../../lib/tui/tokens.ts";
 import { planTitle, type StoredPlan } from "./plans.ts";
 import { extractPlanSections } from "./steps.ts";
 
@@ -110,14 +114,12 @@ export function sanitizePlanText(text: string): string {
 
 /** A task checkbox in a list marker: `- [x] `, `1. [ ] `. */
 const TASK_MARKER = /^([-*+]|\d+[.)])(\s+)(\[([ xX])\])(\s*)$/;
-/** Task-checkbox markers; three columns wide so list wrapping stays aligned. */
-const TASK_BOX = { done: `[${GLYPHS.check}]`, pending: "[ ]" } as const;
 
 /**
- * Wrap the Markdown theme so task checkboxes read at a glance: done steps get a
- * `success` check, pending steps a `dim` box. The replacement keeps the marker's
- * visible width (`[✓]` and `[ ]` are both three columns), so wrapped list
- * continuation lines stay aligned.
+ * Wrap the Markdown theme so task checkboxes read at a glance with the shared
+ * `◼`/`◻` vocabulary, the same box the bytefly screen and the question dialog
+ * draw. The replacement is one column wide instead of the bracket's three, so a
+ * wrapped list continuation shifts left by two.
  */
 function planMarkdownTheme(theme: Theme, base: MarkdownTheme): MarkdownTheme {
 	return {
@@ -126,27 +128,19 @@ function planMarkdownTheme(theme: Theme, base: MarkdownTheme): MarkdownTheme {
 			const match = TASK_MARKER.exec(text);
 			if (!match) return base.listBullet(text);
 			const [, bullet, gap, , mark, trail] = match;
-			const box = mark.toLowerCase() === "x" ? theme.fg("success", TASK_BOX.done) : theme.fg("dim", TASK_BOX.pending);
-			return `${base.listBullet(`${bullet}${gap}`)}${box}${trail}`;
+			return `${base.listBullet(`${bullet}${gap}`)}${checkbox(theme, mark.toLowerCase() === "x")}${trail}`;
 		},
 	};
 }
 
-/** A fixed-width gauge: `fillSegments` (rounded) in `fill`, the rest dim. */
-function gauge(theme: Theme, fillSegments: number, fill: "accent" | "success"): string {
-	const count = Math.min(GAUGE_SEGMENTS, Math.max(0, Math.round(fillSegments)));
-	return (
-		theme.fg(fill, GLYPHS.gaugeFull.repeat(count)) + theme.fg("dim", GLYPHS.gaugeEmpty.repeat(GAUGE_SEGMENTS - count))
-	);
-}
-
 /** Scroll position below the body: a gauge, the percent, and the visible range. */
 function scrollRow(theme: Theme, width: number, offset: number, end: number, total: number, section?: string): string {
 	const maxOffset = Math.max(0, total - (end - offset));
 	const percent = maxOffset > 0 ? Math.round((offset / maxOffset) * 100) : 100;
-	const head = `${gauge(theme, (percent / 100) * GAUGE_SEGMENTS, "accent")} ${theme.fg("accent", `${percent}%`)}`;
-	const range = theme.fg("dim", `lines ${offset + 1}–${end} of ${total}`);
-	const label = section ? theme.fg("muted", `${GLYPHS.plan} ${section}`) : "";
+	const bar = gaugeBar(theme, { percent, blocks: GAUGE_SEGMENTS, role: "accent", emptyRole: "faint" });
+	const head = `${bar} ${paint(theme, "accent", `${percent}%`)}`;
+	const range = paint(theme, "faint", `lines ${offset + 1}–${end} of ${total}`);
+	const label = section ? paint(theme, "meta", `${GLYPHS.plan} ${section}`) : "";
 	// Keep the gauge and percent; drop the range first, then the section label, on a
 	// narrow terminal.
 	const candidates = [
@@ -295,7 +289,7 @@ export class PlanViewComponent implements Component {
 
 	handleInput(data: string): void {
 		if (this.editing) {
-			if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
+			if (isCloseKey(data)) {
 				this.cancelRefine();
 				return;
 			}
@@ -303,7 +297,7 @@ export class PlanViewComponent implements Component {
 			this.options.requestRender();
 			return;
 		}
-		if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
+		if (isCloseKey(data)) {
 			this.options.onClose("keep");
 			return;
 		}
@@ -361,19 +355,19 @@ export class PlanViewComponent implements Component {
 		this.offset = Math.min(Math.max(0, this.offset), maxOffset);
 		const sectionLabel = this.currentSection(sections)?.title;
 
-		const lines: string[] = [screenHeader(theme, w, truncateToWidth(`Plan Review · ${title}`, Math.max(1, w - 6)))];
+		const lines: string[] = [titleRule(theme, w, truncateToWidth(`Plan Review · ${title}`, Math.max(1, w - 6)))];
 		lines.push("");
 
 		const end = Math.min(body.length, this.offset + visible);
 		for (let i = this.offset; i < end; i++) lines.push(body[i]);
-		if (body.length === 0) lines.push(truncateToWidth(`  ${theme.fg("dim", "This plan is empty.")}`, w));
+		if (body.length === 0) lines.push(...emptyState(theme, w, { label: "This plan is empty." }));
 
 		if (this.editing) {
 			// Keep the scroll position visible while editing: the body above is still
 			// clipped, so the reader needs to know where they are.
 			if (this.maxOffset > 0) lines.push(scrollRow(theme, w, this.offset, end, body.length, sectionLabel));
 			else lines.push("");
-			lines.push(truncateToWidth(`  ${theme.fg("muted", "Refine the plan:")}`, w));
+			lines.push(truncateToWidth(`  ${paint(theme, "meta", "Refine the plan:")}`, w));
 			for (const line of editorLines) lines.push(truncateToWidth(`  ${line}`, w));
 			lines.push("");
 			lines.push(screenHint(theme, w, ["Esc back to plan", { text: "Enter submit", color: "success" }]));