@gavin-hu/my-pi-agent 0.14.0 → 0.15.0

package/extensions/plan/web-client.ts

@@ -11,7 +11,7 @@
  * gone; the explicit buttons are the primary save/cancel path.
  */
 
-import { THEME_TOGGLE_JS } from "../../lib/web/index.ts";
+import { keysDialogScript, THEME_TOGGLE_JS } from "../../lib/web/index.ts";
 
 export const REVIEW_CLIENT_JS = String.raw`(function () {
   "use strict";
@@ -47,7 +47,6 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
   var cancelButton = document.getElementById("cancel");
   var outlineList = document.getElementById("outline-list");
   var progressEl = document.getElementById("progress-fill");
-  var keysDialog = document.getElementById("keys-dialog");
 
   function el(tag, className) {
     var node = document.createElement(tag);
@@ -732,23 +731,8 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     pendingQuote = wrap && quote ? { wrap: wrap, quote: quote } : null;
   });
 
-  function toggleKeys(force) {
-    if (!keysDialog) return;
-    var open = force !== undefined ? force : keysDialog.hidden;
-    keysDialog.hidden = !open;
-    if (open) {
-      var close = document.getElementById("keys-close");
-      if (close) close.focus();
-    }
-  }
-
-  if (keysDialog) {
-    keysDialog.addEventListener("click", function (event) { if (event.target === keysDialog) toggleKeys(false); });
-    var keysButton = document.getElementById("shortcuts");
-    if (keysButton) keysButton.addEventListener("click", function () { toggleKeys(); });
-    var keysClose = document.getElementById("keys-close");
-    if (keysClose) keysClose.addEventListener("click", function () { toggleKeys(false); });
-  }
+  // The sheet's own wiring (trigger, close button, backdrop) is shared with browse.
+  ${keysDialogScript("shortcuts")}
 
   function typing(target) {
     var tag = target && target.tagName ? target.tagName : "";
@@ -759,15 +743,15 @@ export const REVIEW_CLIENT_JS = String.raw`(function () {
     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; }
+      if (window.bfKeys.isOpen()) { window.bfKeys.close(); return; }
       cancel();
       return;
     }
     if (typing(event.target)) return;
     if (event.metaKey || event.ctrlKey || event.altKey) return;
-    if (event.key === "?") { event.preventDefault(); toggleKeys(); return; }
+    if (event.key === "?") { event.preventDefault(); window.bfKeys.toggle(); return; }
     // While the shortcut sheet is open it owns the keyboard.
-    if (keysDialog && !keysDialog.hidden) return;
+    if (window.bfKeys.isOpen()) return;
     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; }

package/extensions/plan/web-page.ts

@@ -16,6 +16,8 @@
 import {
 	brandLockup,
 	docHead,
+	type KeyHint,
+	keysSheet,
 	SIDEBAR_COLLAPSE_MAX,
 	themeToggle,
 	WEB_BASE_CSS,
@@ -110,7 +112,7 @@ ${WEB_COMPONENTS_CSS}
 .review-nav .lvl-3 a{padding-left:30px}
 .review-nav .lvl-4 a,.review-nav .lvl-5 a,.review-nav .lvl-6 a{padding-left:42px}
 .review-hints{margin:auto 0 0;padding-top:var(--space-3);color:var(--muted);font-size:var(--fs-xs);line-height:var(--lh-relaxed)}
-.review-hints .review-kbd{margin:0 1px}
+.review-hints .bf-kbd{margin:0 1px}
 /* The document: one measure, centred, with a comment rail in its left margin. */
 .bf-review>.bf-block{position:relative;width:100%;max-width:var(--review-measure);margin:0 auto;padding:3px 8px 3px var(--review-gutter);border-radius:var(--radius-md);overflow-wrap:break-word}
 .bf-block[id]{scroll-margin-top:88px}
@@ -155,13 +157,6 @@ ${WEB_COMPONENTS_CSS}
 .bf-comment__body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:var(--lh-snug)}
 .bf-composer{margin:0}
 .bf-block--composing .bf-block__add{opacity:0}
-/* The keyboard sheet, reusing the shared dialog shell. */
-.bf-dialog__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}
-.bf-dialog__head h2{margin:0;font-size:var(--fs-lg)}
-.review-keys{display:grid;grid-template-columns:auto 1fr;gap:8px var(--space-4);margin:0;padding:var(--space-4)}
-.review-keys dt{white-space:nowrap}
-.review-keys dd{margin:0;color:var(--muted);font-size:var(--fs-sm)}
-.review-kbd{display:inline-block;min-width:20px;padding:1px 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:var(--fs-xs) var(--font-mono);text-align:center}
 @media (max-width:1180px){
 .bf-app__body{grid-template-columns:1fr;align-content:start}
 .bf-app__sidebar{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--border)}
@@ -192,29 +187,23 @@ ${WEB_COMPONENTS_CSS}
  * not have to grow every time a binding is added.
  */
 function reviewHints(canApprove: boolean): string {
-	const approve = canApprove ? `, <kbd class="review-kbd">a</kbd> to approve` : "";
-	return `<p class="review-hints">Press <kbd class="review-kbd">j</kbd>/<kbd class="review-kbd">k</kbd> to move, <kbd class="review-kbd">c</kbd> to comment${approve}, <kbd class="review-kbd">s</kbd> to save, <kbd class="review-kbd">?</kbd> for all shortcuts.</p>`;
+	const approve = canApprove ? `, <kbd class="bf-kbd">a</kbd> to approve` : "";
+	return `<p class="review-hints">Press <kbd class="bf-kbd">j</kbd>/<kbd class="bf-kbd">k</kbd> to move, <kbd class="bf-kbd">c</kbd> to comment${approve}, <kbd class="bf-kbd">s</kbd> to save, <kbd class="bf-kbd">?</kbd> for all shortcuts.</p>`;
 }
 
-/** The keyboard sheet, hidden until the client opens it. */
-function keysDialog(canApprove: boolean): string {
-	const approveRow = canApprove
-		? `<div><dt><kbd class="review-kbd">a</kbd></dt><dd>Approve and run the plan</dd></div>
-`
-		: "";
-	return `<div class="bf-dialog" id="keys-dialog" hidden>
-<div class="bf-dialog__panel" role="dialog" aria-modal="true" aria-labelledby="keys-title">
-<div class="bf-dialog__head"><h2 id="keys-title">Keyboard shortcuts</h2><span class="bf-spacer"></span><button type="button" class="bf-btn" id="keys-close">Close</button></div>
-<dl class="review-keys">
-${approveRow}<div><dt><kbd class="review-kbd">j</kbd> <kbd class="review-kbd">k</kbd></dt><dd>Next and previous block</dd></div>
-<div><dt><kbd class="review-kbd">c</kbd></dt><dd>Comment on the current block</dd></div>
-<div><dt><kbd class="review-kbd">Enter</kbd></dt><dd>Add the comment you are writing</dd></div>
-<div><dt><kbd class="review-kbd">s</kbd></dt><dd>Save feedback and return to Pi</dd></div>
-<div><dt><kbd class="review-kbd">Esc</kbd></dt><dd>Close the composer, the sheet, or the review</dd></div>
-<div><dt><kbd class="review-kbd">?</kbd></dt><dd>Toggle this sheet</dd></div>
-</dl>
-</div>
-</div>`;
+/** The shortcut sheet's rows: the review's own keys, led by approve when offered. */
+function reviewKeys(canApprove: boolean): KeyHint[] {
+	const rows: KeyHint[] = [];
+	if (canApprove) rows.push({ keys: "a", label: "Approve and run the plan" });
+	rows.push(
+		{ keys: ["j", "k"], label: "Next and previous block" },
+		{ keys: "c", label: "Comment on the current block" },
+		{ keys: "Enter", label: "Add the comment you are writing" },
+		{ keys: "s", label: "Save feedback and return to Pi" },
+		{ keys: "Esc", label: "Close the composer, the sheet, or the review" },
+		{ keys: "?", label: "Toggle this sheet" },
+	);
+	return rows;
 }
 
 /**
@@ -268,7 +257,7 @@ ${saveButton}
 <div class="${bodyClass}">
 ${outlinePanel}<main class="bf-app__main bf-review" id="plan" aria-label="Plan"></main>
 </div>
-${keysDialog(data.canApprove)}
+${keysSheet(reviewKeys(data.canApprove))}
 <script type="application/json" id="review-data">${island}</script>
 <script src="/client.js" defer></script>
 </body>

package/extensions/plan/web-router.ts

@@ -12,6 +12,16 @@
  * local page from driving the session.
  */
 
+import {
+	isLocalHostHeader,
+	jsonError,
+	jsonHeaders,
+	jsonResponse,
+	pageHeaders,
+	parseRequestUrl,
+	scriptHeaders,
+	type ServeResponse,
+} from "../../lib/http/index.ts";
 import { THEME_JS } from "../../lib/web/index.ts";
 import { coerceAnnotations, type PlanAnnotation } from "./feedback.ts";
 import { REVIEW_CLIENT_JS } from "./web-client.ts";
@@ -38,42 +48,10 @@ export interface ReviewContext {
 	onCancel: () => void;
 }
 
-export interface ServeResponse {
-	status: number;
-	headers: Record<string, string>;
-	body?: string;
-	/** When true, the node server keeps the connection open as an SSE stream. */
-	stream?: boolean;
-}
-
-const HOST_PATTERN = /^(127\.0\.0\.1|localhost|\[::1\])(:\d+)?$/i;
-
-const HTML_SECURITY: Record<string, string> = {
-	"Content-Type": "text/html; charset=utf-8",
-	// `frame-ancestors` keeps a local page from framing the review and clickjacking
-	// the one control with a side effect (Approve & run); the rest is the same
-	// no-script, no-network envelope the page already relied on.
-	"Content-Security-Policy":
-		"default-src 'none'; img-src 'self' data:; style-src 'unsafe-inline'; script-src 'self'; " +
-		"connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'",
-	"X-Frame-Options": "DENY",
-	"X-Content-Type-Options": "nosniff",
-	"Referrer-Policy": "no-referrer",
-	"Cache-Control": "no-store",
-};
-
-const SCRIPT_HEADERS: Record<string, string> = {
-	...HTML_SECURITY,
-	"Content-Type": "text/javascript; charset=utf-8",
-};
-
-export const JSON_HEADERS: Record<string, string> = {
-	"Content-Type": "application/json; charset=utf-8",
-	"X-Content-Type-Options": "nosniff",
-	"Referrer-Policy": "no-referrer",
-	"Cache-Control": "no-store",
-};
-
+/**
+ * The event stream's headers: the one response that is not the page policy, because
+ * it is a long-lived `text/event-stream` rather than a document.
+ */
 const EVENT_HEADERS: Record<string, string> = {
 	"Content-Type": "text/event-stream; charset=utf-8",
 	"Cache-Control": "no-store",
@@ -81,14 +59,6 @@ const EVENT_HEADERS: Record<string, string> = {
 	"X-Accel-Buffering": "no",
 };
 
-function jsonResponse(status: number, value: unknown): ServeResponse {
-	return { status, headers: { ...JSON_HEADERS }, body: JSON.stringify(value) };
-}
-
-function errorResponse(status: number, message: string): ServeResponse {
-	return jsonResponse(status, { error: message });
-}
-
 /**
  * Parse and validate an `{ annotations }` request body. Returns the annotations,
  * or an error response to send instead.
@@ -98,10 +68,10 @@ function parseAnnotations(body: string): PlanAnnotation[] | ServeResponse {
 	try {
 		parsed = JSON.parse(body);
 	} catch {
-		return errorResponse(400, "The request body must be JSON.");
+		return jsonError(400, "The request body must be JSON.");
 	}
 	const annotations = coerceAnnotations((parsed as { annotations?: unknown } | null)?.annotations);
-	if (!annotations) return errorResponse(400, "The annotations are malformed.");
+	if (!annotations) return jsonError(400, "The annotations are malformed.");
 	return annotations;
 }
 
@@ -118,15 +88,14 @@ function checkEnvelope(
 	const upper = method.toUpperCase();
 	if (upper !== "GET" && upper !== "HEAD" && upper !== "POST") {
 		return {
-			...errorResponse(405, "Only GET, HEAD, and POST are served."),
-			headers: { ...JSON_HEADERS, Allow: "GET, HEAD, POST" },
+			...jsonError(405, "Only GET, HEAD, and POST are served."),
+			headers: { ...jsonHeaders(), Allow: "GET, HEAD, POST" },
 		};
 	}
 	// Fail closed: a missing or non-string Host is rejected too, not just a
 	// foreign one, so the DNS-rebinding guard cannot be skipped.
-	const host = headers.host;
-	if (typeof host !== "string" || !HOST_PATTERN.test(host)) {
-		return errorResponse(403, "Unexpected Host header.");
+	if (!isLocalHostHeader(headers, { required: true })) {
+		return jsonError(403, "Unexpected Host header.");
 	}
 	return undefined;
 }
@@ -145,52 +114,46 @@ export async function handleReviewRequest(
 	const envelope = checkEnvelope(method, headers);
 	if (envelope) return envelope;
 
-	let pathname: string;
-	let search: URLSearchParams;
-	try {
-		const url = new URL(rawUrl, "http://127.0.0.1");
-		pathname = url.pathname;
-		search = url.searchParams;
-	} catch {
-		return errorResponse(400, "Malformed request URL.");
-	}
+	const parsed = parseRequestUrl(rawUrl);
+	if (!parsed) return jsonError(400, "Malformed request URL.");
+	const { pathname, search } = parsed;
 
 	if (pathname === "/favicon.ico") return { status: 204, headers: { "Cache-Control": "no-store" } };
-	if (pathname === "/theme.js") return { status: 200, headers: { ...SCRIPT_HEADERS }, body: THEME_JS };
-	if (pathname === "/client.js") return { status: 200, headers: { ...SCRIPT_HEADERS }, body: REVIEW_CLIENT_JS };
+	if (pathname === "/theme.js") return { status: 200, headers: scriptHeaders(), body: THEME_JS };
+	if (pathname === "/client.js") return { status: 200, headers: scriptHeaders(), body: REVIEW_CLIENT_JS };
 
-	if (search.get("token") !== ctx.token) return errorResponse(403, "Invalid or missing token.");
+	if (search.get("token") !== ctx.token) return jsonError(403, "Invalid or missing token.");
 
 	if (pathname === "/" || pathname === "/index.html") {
-		return { status: 200, headers: { ...HTML_SECURITY }, body: renderReviewPage(await ctx.page()) };
+		return { status: 200, headers: pageHeaders(), body: renderReviewPage(await ctx.page()) };
 	}
 	if (pathname === "/events") return { status: 200, headers: { ...EVENT_HEADERS }, stream: true };
 	if (pathname === "/api/cancel") {
-		if (method.toUpperCase() !== "POST") return errorResponse(405, "Use POST to cancel.");
+		if (method.toUpperCase() !== "POST") return jsonError(405, "Use POST to cancel.");
 		ctx.onCancel();
 		return jsonResponse(200, { ok: true });
 	}
 	if (pathname === "/api/feedback") {
-		if (method.toUpperCase() !== "POST") return errorResponse(405, "Use POST to save feedback.");
+		if (method.toUpperCase() !== "POST") return jsonError(405, "Use POST to save feedback.");
 		const annotations = parseAnnotations(body);
 		if (isResponse(annotations)) return annotations;
 		const result = await ctx.save(annotations);
-		if (!result.ok) return errorResponse(result.status, result.message);
+		if (!result.ok) return jsonError(result.status, result.message);
 		ctx.onSaved(annotations);
 		return jsonResponse(200, { ok: true });
 	}
 	if (pathname === "/api/approve") {
-		if (method.toUpperCase() !== "POST") return errorResponse(405, "Use POST to approve.");
+		if (method.toUpperCase() !== "POST") return jsonError(405, "Use POST to approve.");
 		// Only the exit_plan_mode flow owns the approval side effects, so a comment-only
 		// review refuses this even if a client posts it directly.
-		if (!ctx.canApprove) return errorResponse(403, "This review cannot be approved from the browser.");
+		if (!ctx.canApprove) return jsonError(403, "This review cannot be approved from the browser.");
 		const annotations = parseAnnotations(body);
 		if (isResponse(annotations)) return annotations;
 		const result = await ctx.save(annotations);
-		if (!result.ok) return errorResponse(result.status, result.message);
+		if (!result.ok) return jsonError(result.status, result.message);
 		ctx.onApprove(annotations);
 		return jsonResponse(200, { ok: true });
 	}
 
-	return errorResponse(404, "That page does not exist.");
+	return jsonError(404, "That page does not exist.");
 }

package/extensions/plan/web.ts

@@ -11,9 +11,10 @@
  */
 
 import { randomBytes } from "node:crypto";
-import { createServer, type IncomingMessage, type Server, type ServerResponse } from "node:http";
+import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
 import { basename } from "node:path";
 import { openInBrowser } from "../../lib/browser.ts";
+import { bindLoopback, createCloser, jsonHeaders, respond, type ServeResponse } from "../../lib/http/index.ts";
 import { fenceLanguage, highlightLines } from "../../lib/highlight.ts";
 import { codeBody, fenceInfo, planBlocks } from "./blocks.ts";
 import {
@@ -27,13 +28,7 @@ import {
 import { planTitle, type PlanStore, type StoredPlan } from "./plans.ts";
 import { changedSections, type SectionDigest } from "./plan-text.ts";
 import { extractPlanSections, extractPlanSteps } from "./steps.ts";
-import {
-	handleReviewRequest,
-	JSON_HEADERS,
-	type ReviewContext,
-	type ServeResponse,
-	type SaveResult,
-} from "./web-router.ts";
+import { handleReviewRequest, type ReviewContext, type SaveResult } from "./web-router.ts";
 import type { ReviewPageData } from "./web-page.ts";
 
 /** How a browser review ended. */
@@ -123,19 +118,6 @@ function readBody(request: IncomingMessage, limit: number): Promise<BodyResult>
 	});
 }
 
-async function listen(server: Server, port: number): Promise<number> {
-	await new Promise<void>((resolve, reject) => {
-		const onError = (error: Error) => reject(error);
-		server.once("error", onError);
-		server.listen(port, "127.0.0.1", () => {
-			server.off("error", onError);
-			resolve();
-		});
-	});
-	const address = server.address();
-	return typeof address === "object" && address ? address.port : port;
-}
-
 export function createPlanWebReview(store: PlanStore, deps: PlanWebReviewDeps = {}): PlanWebReview {
 	const sessions = new Set<PlanReviewSession>();
 	// Last bound port per plan path, so the same plan keeps one origin across
@@ -284,7 +266,7 @@ export function createPlanWebReview(store: PlanStore, deps: PlanWebReviewDeps =
 				const read =
 					method.toUpperCase() === "POST" ? await readBody(request, maxBody) : { ok: true as const, body: "" };
 				if (!read.ok) {
-					response.writeHead(413, { ...JSON_HEADERS, Connection: "close" });
+					response.writeHead(413, { ...jsonHeaders(), Connection: "close" });
 					response.end(JSON.stringify({ error: "The request body is too large." }));
 					return;
 				}
@@ -295,7 +277,7 @@ export function createPlanWebReview(store: PlanStore, deps: PlanWebReviewDeps =
 				} catch {
 					result = {
 						status: 500,
-						headers: { ...JSON_HEADERS },
+						headers: jsonHeaders(),
 						body: JSON.stringify({ error: "Internal error" }),
 					};
 				}
@@ -314,11 +296,6 @@ export function createPlanWebReview(store: PlanStore, deps: PlanWebReviewDeps =
 					});
 					return;
 				}
-				response.writeHead(result.status, result.headers);
-				if (method.toUpperCase() === "HEAD") {
-					response.end();
-					return;
-				}
 				// A save or cancel only resolves the session after its response is on the
 				// wire; otherwise `close()` would force-close the socket mid-reply. The
 				// `close` path covers a client that walks away before the flush callback
@@ -329,25 +306,23 @@ export function createPlanWebReview(store: PlanStore, deps: PlanWebReviewDeps =
 					pendingResult = undefined;
 					finish(terminal);
 				};
-				response.end(result.body ?? "", settlePending);
+				respond(request, response, result, settlePending);
 				response.on("close", settlePending);
 			})();
 		});
 
-		// An accept-level error (EMFILE and friends) is emitted on the server, and an
-		// `error` event with no listener would take the host down mid-review. The
-		// review still ends through its own paths: cancel, abort, drop, or shutdown.
-		server.on("error", () => {});
-
+		// The accept-level `error` listener lives in `bindLoopback`, so a transient
+		// failure cannot take the host down; the review still ends through its own
+		// paths: cancel, abort, drop, or shutdown.
 		const preferred = deps.port ?? ports.get(plan.path) ?? 0;
 		let port: number | undefined;
 		try {
-			port = await listen(server, preferred);
+			port = await bindLoopback(server, preferred);
 		} catch {
 			// The remembered port may have been taken between turns; fall back once.
 			if (preferred !== 0) {
 				try {
-					port = await listen(server, 0);
+					port = await bindLoopback(server, 0);
 				} catch {
 					port = undefined;
 				}
@@ -358,6 +333,7 @@ export function createPlanWebReview(store: PlanStore, deps: PlanWebReviewDeps =
 			return undefined;
 		}
 		ports.set(plan.path, port);
+		const closeServer = createCloser(server);
 
 		const url = `http://127.0.0.1:${port}/?token=${token}`;
 		let closed = false;
@@ -370,10 +346,7 @@ export function createPlanWebReview(store: PlanStore, deps: PlanWebReviewDeps =
 			for (const client of clients) client.end();
 			clients.clear();
 			finish({ status: "cancelled" });
-			await new Promise<void>((resolve) => {
-				server.close(() => resolve());
-				(server as { closeAllConnections?: () => void }).closeAllConnections?.();
-			});
+			await closeServer();
 		};
 
 		const session: PlanReviewSession = { url, port, done, close };

package/extensions/question/answers.ts

@@ -2,7 +2,7 @@
  * Answer normalization and model-facing formatting (pure).
  */
 
-import { sanitizeLine } from "../../lib/format.ts";
+import { lineOf, sanitizeLine } from "../../lib/format.ts";
 import type { Answer, AskResult, Question, Selection } from "./types.ts";
 
 export const CANCELLED_TEXT = "User cancelled the question.";
@@ -93,20 +93,15 @@ export interface CallQuestion {
 	options?: unknown;
 }
 
-/** A partial value read as a single line; anything but a string reads empty. */
-function asLine(value: unknown): string {
-	return typeof value === "string" ? sanitizeLine(value) : "";
-}
-
 /** Display headers with positional defaults (`Q1`, `Q2`, …). */
 export function questionHeaders(questions: CallQuestion[]): string[] {
-	return questions.map((question, i) => asLine(question?.header) || `Q${i + 1}`);
+	return questions.map((question, i) => lineOf(question?.header) || `Q${i + 1}`);
 }
 
 /** One `Header: a, b, Other` summary per question that offers options. */
 export function optionSummary(questions: CallQuestion[]): string[] {
 	return questions
-		.map((question, i) => ({ header: asLine(question?.header) || `Q${i + 1}`, options: question?.options }))
+		.map((question, i) => ({ header: lineOf(question?.header) || `Q${i + 1}`, options: question?.options }))
 		.filter(({ options }) => Array.isArray(options) && options.length > 0)
 		.map(({ header, options }) => {
 			// A partial option has no label yet; list the ones that have arrived.

package/extensions/question/tui.ts

@@ -18,7 +18,7 @@ import {
 import { sanitizeLine } from "../../lib/format.ts";
 import { flowCells } from "../../lib/tui/columns.ts";
 import { clampScroll, formatRange, keepVisible, selectionMarker, wheelDelta } from "../../lib/tui/cursor.ts";
-import { editorTheme, screenHint } from "../../lib/tui/chrome.ts";
+import { editorTheme, screenHint, type ScreenHint } from "../../lib/tui/chrome.ts";
 import { GLYPHS } from "../../lib/tui/glyphs.ts";
 import { checkbox } from "../../lib/tui/rows.ts";
 import { plainRule, titleRule } from "../../lib/tui/rules.ts";
@@ -255,7 +255,7 @@ export async function askViaTui(
 				}
 				lines.push("");
 				if (state.message) addWithPrefix(" ", paint(theme, "warn", state.message));
-				lines.push(screenHint(theme, renderWidth, ["Enter to submit", "Esc to go back"]));
+				lines.push(screenHint(theme, renderWidth, [{ text: "Enter to submit", color: "accent" }, "Esc to go back"]));
 			} else if (submitTab) {
 				addWithPrefix(" ", paint(theme, "accent", theme.bold("Ready to submit")));
 				lines.push("");
@@ -285,12 +285,12 @@ export async function askViaTui(
 				// option list can be given exactly the rows that are left.
 				const tail: string[] = [""];
 				if (state.message) tail.push(...prefixWrapped(" ", paint(theme, "warn", state.message)));
-				const hints =
+				const hints: ScreenHint[] =
 					optionCount(question) === 0
-						? ["Enter to type an answer", "Esc cancel"]
+						? [{ text: "Enter to type an answer", color: "accent" }, "Esc cancel"]
 						: question.multiSelect
-							? ["↑/↓ move", "Space toggle", "Enter confirm", "Esc cancel"]
-							: ["↑/↓ choose", "Enter select", "Esc cancel"];
+							? ["↑/↓ move", "Space toggle", { text: "Enter confirm", color: "accent" }, "Esc cancel"]
+							: ["↑/↓ choose", { text: "Enter select", color: "accent" }, "Esc cancel"];
 				if (isMulti) hints.unshift(`Tab/${GLYPHS.prev}${GLYPHS.next} navigate`);
 				tail.push(screenHint(theme, renderWidth, hints));
 				if (question.multiSelect) {