one-code-extension 0.4.0 → 0.5.0

package/extensions/artifacts/viewer.ts

@@ -0,0 +1,199 @@
+/**
+ * An artifact's viewer page, `<id>/view.html` (pure, no fs): the stored page in
+ * a frame under a slim bar, One Code's version of the header Claude Code's web
+ * viewer puts over an artifact. The bar keeps what works without a server: a
+ * home link to the gallery, a title menu (details, Download HTML, Copy file
+ * path, Reload, the page without the bar, the version list, All artifacts) and
+ * a Download button. Share, Chat, Rename, Duplicate and Pin need claude.ai and
+ * are left out.
+ *
+ * `view.html#v<N>` shows an earlier version with a banner back to the latest.
+ * Download loads the version's payload script (`download.js`, or
+ * `versions/v<N>.js`) and saves it through a `blob:` link, for the same reason
+ * the gallery does (gallery.ts).
+ */
+
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { tildify } from "../lib/paths.ts";
+import { CLIENT_RUNTIME, escapeHtml, THEME_TOKENS, utcStamp } from "./gallery.ts";
+import type { ArtifactMeta } from "./store.ts";
+
+/** Inline SVG icons; `currentColor` so they follow the theme. */
+const HOME_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 7.5 8 3l5.5 4.5V13a.5.5 0 0 1-.5.5H9.5V10h-3v3.5H3a.5.5 0 0 1-.5-.5z"/></svg>`;
+const CHEVRON_ICON = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="m3 4.5 3 3 3-3"/></svg>`;
+const DOWNLOAD_ICON = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 2v7m-3-3 3 3 3-3M2.5 11.5h9"/></svg>`;
+
+/** `<id>/view.html` for `meta`, whose folder is `dir`. */
+export function renderViewer(meta: ArtifactMeta, dir: string, home: string = homedir()): string {
+	const title = escapeHtml(meta.title);
+	const versions: string[] = [`<a role="menuitem" href="#" data-version="latest">Version ${meta.version} (latest)</a>`];
+	for (let n = meta.version - 1; n >= 1; n--) versions.push(`<a role="menuitem" href="#v${n}" data-version="${n}">Version ${n}</a>`);
+	const details = [
+		`Version ${meta.version}`,
+		`Updated <time datetime="${escapeHtml(meta.updatedAt)}">${escapeHtml(utcStamp(meta.updatedAt))}</time>`,
+		meta.project ? escapeHtml(tildify(meta.project, home)) : "",
+	].filter(Boolean);
+	// The page paths the script copies, for the current version and each earlier one.
+	const paths = JSON.stringify({ latest: join(dir, "index.html"), versions: join(dir, "versions") }).replace(/</g, "\\u003c");
+	return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title}</title>
+<style>
+${THEME_TOKENS}
+* { box-sizing: border-box; }
+html, body { margin: 0; height: 100%; }
+body {
+  background: var(--bg); color: var(--text);
+  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  display: flex; flex-direction: column;
+}
+.bar {
+  display: flex; align-items: center; gap: 6px; padding: 6px 16px; min-height: 44px;
+  background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 2;
+}
+.icon-link, .title-button, .primary, .menu [role="menuitem"] {
+  font: inherit; color: var(--text); background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none;
+}
+.icon-link { display: inline-flex; padding: 6px; color: var(--muted); }
+.icon-link:hover, .title-button:hover, .title-button[aria-expanded="true"] { background: var(--hover); color: var(--text); }
+.title-button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; max-width: min(60vw, 480px); }
+.title-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.spacer { flex: 1; }
+.primary {
+  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-weight: 600; font-size: 13px;
+  border: 1px solid var(--line);
+}
+.primary:hover { background: var(--hover); }
+.menu {
+  position: absolute; top: calc(100% - 2px); left: 44px; min-width: 250px; max-width: calc(100vw - 32px);
+  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); display: flex; flex-direction: column;
+}
+.menu[hidden] { display: none; }
+.menu .details { padding: 6px 10px 8px; color: var(--muted); font-size: 13px; display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
+.menu .details span:last-child { overflow-wrap: anywhere; }
+.menu [role="menuitem"] { display: block; text-align: left; padding: 7px 10px; }
+.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus-visible { background: var(--hover); outline: none; }
+.menu [aria-current="true"] { font-weight: 600; }
+.menu .label { padding: 8px 10px 2px; color: var(--muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
+.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
+.versions { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; }
+.banner { padding: 8px 16px; background: var(--hover); border-bottom: 1px solid var(--line); font-size: 13px; }
+.banner[hidden] { display: none; }
+.banner a { color: var(--accent); }
+.toast {
+  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 3;
+  background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 6px; font-size: 13px;
+}
+.toast[hidden] { display: none; }
+iframe { flex: 1; width: 100%; border: 0; display: block; background: var(--bg); }
+a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+</style>
+</head>
+<body>
+<header class="bar">
+  <a class="icon-link" href="../index.html" title="All artifacts" aria-label="All artifacts">${HOME_ICON}</a>
+  <button type="button" class="title-button" id="title-button" aria-haspopup="menu" aria-expanded="false" aria-controls="menu"><span>${title}</span>${CHEVRON_ICON}</button>
+  <div class="menu" id="menu" role="menu" hidden>
+    <div class="details">${details.map((line) => `<span>${line}</span>`).join("")}</div>
+    <hr>
+    <button type="button" role="menuitem" data-action="download">Download HTML</button>
+    <button type="button" role="menuitem" data-action="copy-path">Copy file path</button>
+    <button type="button" role="menuitem" data-action="reload">Reload</button>
+    <a role="menuitem" id="raw-link" href="index.html">Open without this bar</a>
+    ${meta.version > 1 ? `<hr><div class="label">Versions</div><div class="versions">${versions.join("")}</div>` : ""}
+    <hr>
+    <a role="menuitem" href="../index.html">All artifacts</a>
+  </div>
+  <span class="spacer"></span>
+  <button type="button" class="primary" data-action="download">${DOWNLOAD_ICON}Download</button>
+</header>
+<div class="banner" id="banner" hidden>You are viewing version <span id="banner-version"></span> of ${meta.version}. <a href="#">Show the latest</a></div>
+<iframe id="page" src="index.html" title="${title}"></iframe>
+<div class="toast" id="toast" role="status" hidden></div>
+<script>
+(function () {
+  var LATEST = ${meta.version};
+  var PATHS = ${paths};
+  var SEP = PATHS.latest.indexOf("\\\\") !== -1 ? "\\\\" : "/";
+  var frame = document.getElementById("page");
+  var menu = document.getElementById("menu");
+  var button = document.getElementById("title-button");
+  var banner = document.getElementById("banner");
+  var toast = document.getElementById("toast");
+  var shown = null;
+
+  function current() {
+    var match = /^#v(\\d+)$/.exec(location.hash);
+    var n = match ? parseInt(match[1], 10) : NaN;
+    return n >= 1 && n < LATEST ? n : null;
+  }
+  function show() {
+    shown = current();
+    var src = shown ? "versions/v" + shown + ".html" : "index.html";
+    if (frame.getAttribute("src") !== src) frame.setAttribute("src", src);
+    document.getElementById("raw-link").setAttribute("href", src);
+    banner.hidden = !shown;
+    if (shown) document.getElementById("banner-version").textContent = shown;
+    menu.querySelectorAll("[data-version]").forEach(function (link) {
+      var v = link.getAttribute("data-version");
+      link.setAttribute("aria-current", String(v === "latest" ? !shown : Number(v) === shown));
+    });
+  }
+  function note(text) {
+    toast.textContent = text;
+    toast.hidden = false;
+    clearTimeout(note.timer);
+    note.timer = setTimeout(function () { toast.hidden = true; }, 1800);
+  }
+  function setMenu(open) {
+    menu.hidden = !open;
+    button.setAttribute("aria-expanded", String(open));
+  }
+${CLIENT_RUNTIME}
+  function download() {
+    var script = document.createElement("script");
+    script.src = shown ? "versions/v" + shown + ".js" : "download.js";
+    script.onload = function () { script.remove(); };
+    script.onerror = function () { script.remove(); note("Download failed. Use Open without this bar, then save the page."); };
+    document.head.appendChild(script);
+  }
+  function copyPath() {
+    var path = shown ? PATHS.versions + SEP + "v" + shown + ".html" : PATHS.latest;
+    var done = function () { note("Copied " + path); };
+    var fallback = function () { window.prompt("File path", path); };
+    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(path).then(done, fallback);
+    else fallback();
+  }
+
+  button.addEventListener("click", function () { setMenu(menu.hidden); });
+  document.addEventListener("click", function (event) {
+    var action = event.target.closest && event.target.closest("[data-action]");
+    if (action) {
+      var name = action.getAttribute("data-action");
+      if (name === "download") download();
+      else if (name === "copy-path") copyPath();
+      else if (name === "reload") location.reload();
+      setMenu(false);
+      return;
+    }
+    if (event.target.closest && event.target.closest("[data-version], #raw-link")) { setMenu(false); return; }
+    if (!menu.hidden && !menu.contains(event.target) && !button.contains(event.target)) setMenu(false);
+  });
+  document.addEventListener("keydown", function (event) {
+    if (event.key === "Escape" && !menu.hidden) { setMenu(false); button.focus(); }
+  });
+  // A click in the frame never reaches this document; losing focus to it closes the menu.
+  window.addEventListener("blur", function () { setMenu(false); });
+  window.addEventListener("hashchange", show);
+  show();
+})();
+</script>
+</body>
+</html>
+`;
+}

package/extensions/ask-user/description.ts

@@ -0,0 +1,67 @@
+/**
+ * ask_user_question's model-facing texts: Claude Code's AskUserQuestion
+ * description and parameter texts (pure).
+ *
+ * The short form goes to frontier and workhorse models; the long form, the
+ * same text without the "Reserve this for decisions…" paragraph, to cheap
+ * and tiny ones (lib/tool-variants.ts). The plan-mode note names One Code's
+ * tools and drops "the user cannot see the plan until you call ExitPlanMode":
+ * One Code's plan is a file the user can open at any time.
+ */
+
+import type { DescriptionForm } from "../lib/tool-variants.ts";
+
+export const ASK_SHORT_DESCRIPTION = `Use this tool only when you are blocked on a decision that is genuinely the user's to make: one you cannot resolve from the request, the code, or sensible defaults.
+
+Usage notes:
+- Users will always be able to select "Other" to provide custom text input
+- Use multiSelect: true to allow multiple answers to be selected for a question
+- If you recommend a specific option, make that the first option in the list and add "(Recommended)" at the end of the label
+
+Plan mode note: To switch into plan mode, use enter_plan_mode (not this tool). Once in plan mode, use this tool to clarify requirements or choose between approaches BEFORE finalizing your plan. Do NOT use this tool to ask "Is my plan ready?", "Should I proceed?", or otherwise reference "the plan" in questions — plan approval goes through exit_plan_mode.
+
+Reserve this for decisions where the user's answer changes what you do next — not for choices with a conventional default or facts you can verify in the codebase yourself. In those cases pick the obvious option, mention it in your response, and proceed.
+
+Preview feature:
+Use the optional \`preview\` field on options when presenting concrete artifacts that users need to visually compare:
+- ASCII mockups of UI layouts or components
+- Code snippets showing different implementations
+- Diagram variations
+- Configuration examples
+
+Preview content is rendered as markdown in a monospace box. Multi-line text with newlines is supported. When any option has a preview, the UI switches to a side-by-side layout with a vertical option list on the left and preview on the right. Do not use previews for simple preference questions where labels and descriptions suffice. Note: previews are only supported for single-select questions (not multiSelect).
+`;
+
+export const ASK_LONG_DESCRIPTION = `Use this tool only when you are blocked on a decision that is genuinely the user's to make: one you cannot resolve from the request, the code, or sensible defaults.
+
+Usage notes:
+- Users will always be able to select "Other" to provide custom text input
+- Use multiSelect: true to allow multiple answers to be selected for a question
+- If you recommend a specific option, make that the first option in the list and add "(Recommended)" at the end of the label
+
+Plan mode note: To switch into plan mode, use enter_plan_mode (not this tool). Once in plan mode, use this tool to clarify requirements or choose between approaches BEFORE finalizing your plan. Do NOT use this tool to ask "Is my plan ready?", "Should I proceed?", or otherwise reference "the plan" in questions — plan approval goes through exit_plan_mode.
+
+Preview feature:
+Use the optional \`preview\` field on options when presenting concrete artifacts that users need to visually compare:
+- ASCII mockups of UI layouts or components
+- Code snippets showing different implementations
+- Diagram variations
+- Configuration examples
+
+Preview content is rendered as markdown in a monospace box. Multi-line text with newlines is supported. When any option has a preview, the UI switches to a side-by-side layout with a vertical option list on the left and preview on the right. Do not use previews for simple preference questions where labels and descriptions suffice. Note: previews are only supported for single-select questions (not multiSelect).
+`;
+
+export function askDescription(form: DescriptionForm): string {
+	return form === "long" ? ASK_LONG_DESCRIPTION : ASK_SHORT_DESCRIPTION;
+}
+
+export const ASK_PARAMS = {
+	questions: `Questions to ask the user (1-4 questions)`,
+	question: `The complete question to ask the user. Should be clear, specific, and end with a question mark. Example: "Which library should we use for date formatting?" If multiSelect is true, phrase it accordingly, e.g. "Which features do you want to enable?"`,
+	header: `Very short label displayed as a chip/tag (max 12 chars). Examples: "Auth method", "Library", "Approach".`,
+	options: `The available choices for this question. Must have 2-4 options. Each option should be a distinct, mutually exclusive choice (unless multiSelect is enabled). There should be no 'Other' option, that will be provided automatically.`,
+	multiSelect: `Set to true to allow the user to select multiple options instead of just one. Use when choices are not mutually exclusive.`,
+	label: `The display text for this option that the user will see and select. Should be concise (1-5 words) and clearly describe the choice.`,
+	optionDescription: `Explanation of what this option means or what will happen if chosen. Useful for providing context about trade-offs or implications.`,
+	preview: `Optional preview content rendered when this option is focused. Use for mockups, code snippets, or visual comparisons that help users compare options. See the tool description for the expected content format.`,
+} as const;

package/extensions/ask-user/dialogs.ts

@@ -0,0 +1,80 @@
+/**
+ * ask_user_question through pi's plain dialogs (pure).
+ *
+ * pi's RPC mode returns `undefined` from `ctx.ui.custom()` ("Custom UI not
+ * supported in RPC mode"), so the tabbed widget never reaches an RPC client and
+ * the tool used to report "The user cancelled without answering." RPC does
+ * forward `select` and `input` as `extension_ui_request`s, so this asks each
+ * question with them and returns the widget's result shape: the same tool
+ * result the TUI produces. A dismissed dialog cancels with the answers given so
+ * far, as Esc does in the widget.
+ */
+
+import type { Answer, Question } from "./questions.ts";
+import type { WidgetResult } from "./widget.ts";
+
+export const TYPE_OWN = "Type my own answer";
+export const CHAT = "Chat about this";
+export const DONE = "Done";
+
+export interface DialogUI {
+	select(title: string, options: string[], opts?: { signal?: AbortSignal }): Promise<string | undefined>;
+	input(title: string, placeholder?: string, opts?: { signal?: AbortSignal }): Promise<string | undefined>;
+}
+
+/** One option's row: its label, and its description after a dash when it has one. */
+export function optionRow(option: { label: string; description?: string }): string {
+	return option.description ? `${option.label} — ${option.description}` : option.label;
+}
+
+export async function askThroughDialogs(questions: Question[], ui: DialogUI, signal?: AbortSignal): Promise<WidgetResult> {
+	const answers: Answer[] = [];
+	for (const question of questions) {
+		const plainRows = question.options.map(optionRow);
+		// RPC identifies a selection by its displayed string. Number every option
+		// when a row collides with another option or one of our control rows.
+		const numbered = new Set(plainRows).size !== plainRows.length || plainRows.some((row) => [DONE, TYPE_OWN, CHAT].includes(row));
+		const rows = plainRows.map((row, index) => (numbered ? `${index + 1}. ${row}` : row));
+		const previews = question.options.flatMap((option, index) => (option.preview ? [`${rows[index]}:\n${option.preview}`] : []));
+		const title = [`${question.header}: ${question.question}`, ...previews].join("\n\n");
+		// By option index: two options may share a label (with different descriptions).
+		const selected: number[] = [];
+		const labels = () => selected.map((index) => question.options[index].label);
+		let typed: string | undefined;
+		for (;;) {
+			const choices = [
+				...rows.flatMap((row, index) => (selected.includes(index) ? [] : [row])),
+				...(question.multiSelect && selected.length > 0 ? [DONE] : []),
+				TYPE_OWN,
+				CHAT,
+			];
+			const picked = await ui.select(question.multiSelect && selected.length > 0 ? `${title} (selected: ${labels().join(", ")})` : title, choices, { signal });
+			if (signal?.aborted || picked === undefined || !choices.includes(picked)) return { kind: "cancel", answers };
+			if (picked === CHAT) return { kind: "chat" };
+			if (picked === DONE) break;
+			if (picked === TYPE_OWN) {
+				const text = (await ui.input(title, "Type something.", { signal }))?.trim();
+				if (signal?.aborted || text === undefined) return { kind: "cancel", answers };
+				// A blank answer is no answer: ask the question again.
+				if (!text) continue;
+				typed = text;
+				break;
+			}
+			const index = rows.indexOf(picked);
+			if (index < 0) return { kind: "cancel", answers };
+			selected.push(index);
+			if (!question.multiSelect || selected.length === question.options.length) break;
+		}
+		const all = typed === undefined ? labels() : [...labels(), typed];
+		const single = !question.multiSelect && selected.length === 1 ? question.options[selected[0]] : undefined;
+		answers.push({
+			question: question.question,
+			header: question.header,
+			selected: all,
+			freeform: typed !== undefined && selected.length === 0,
+			...(typed !== undefined ? { typed: true } : {}),
+			...(single?.preview ? { preview: single.preview } : {}),
+		});
+	}
+	return { kind: "submit", answers };
+}

package/extensions/ask-user/index.ts

@@ -11,57 +11,60 @@
  * pulled in a second, conflicting TypeBox.
  */
 
-import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { defineTool, type ExtensionAPI } from "@earendil-works/pi-coding-agent";
 import { Type } from "typebox";
+import { canShowCustomUi } from "../lib/headless-output.ts";
 import { ccToolRenderers, safeThemeBold, safeThemeInverse, safeThemePaint } from "../lib/tui-render.ts";
-import { type Answer, formatAnswers, formatDecline, type Question } from "./questions.ts";
+import { registerFormTool } from "../lib/tool-variants.ts";
+import { ASK_PARAMS, askDescription } from "./description.ts";
+import { askThroughDialogs } from "./dialogs.ts";
+import { type Answer, answerPairs, formatAnswers, formatDecline, type Question } from "./questions.ts";
 import { applyWidgetKey, createWidgetState, decodeWidgetKey, renderWidget, type WidgetResult } from "./widget.ts";
+import { panelUi } from "../lib/panel-focus.ts";
 
 const NON_INTERACTIVE =
 	"This session has no interactive UI, so the user cannot be shown a dialog. Ask your question in your reply instead and stop, or proceed under a stated assumption.";
 
+const AskParams = Type.Object({
+	questions: Type.Array(
+		Type.Object({
+			question: Type.String({ description: ASK_PARAMS.question }),
+			header: Type.String({ description: ASK_PARAMS.header }),
+			options: Type.Array(
+				Type.Object({
+					label: Type.String({ description: ASK_PARAMS.label }),
+					description: Type.Optional(Type.String({ description: ASK_PARAMS.optionDescription })),
+					preview: Type.Optional(Type.String({ description: ASK_PARAMS.preview })),
+				}),
+				{ minItems: 2, maxItems: 4, description: ASK_PARAMS.options },
+			),
+			multiSelect: Type.Optional(Type.Boolean({ description: ASK_PARAMS.multiSelect })),
+		}),
+		{ minItems: 1, maxItems: 4, description: ASK_PARAMS.questions },
+	),
+});
+
 export default function askUserExtension(pi: ExtensionAPI) {
-	pi.registerTool({
+	// Claude Code's AskUserQuestion text, short or long by the model's tier
+	// (description.ts, lib/tool-variants.ts); registered again when the form changes.
+	const tool = defineTool({
 		name: "ask_user_question",
 		label: "Ask User",
 		...ccToolRenderers<{ questions?: Array<{ question?: string }> }>("Ask User", {
 			title: (a) => a?.questions?.[0]?.question,
 		}),
-		description:
-			"Ask the user to choose between options when you are blocked on a decision that is genuinely theirs — one you cannot resolve from the request, the code, or a sensible default. Ask up to four questions in one call; the user answers them in one tabbed dialog and can decline into a chat discussion instead. Options on single-select questions may carry a `preview` — an ASCII mockup, diagram, or code snippet rendered beside the list while the user compares choices; use previews when seeing the alternatives helps (UI layouts, code style variants), never for plain preference questions. Non-preview questions get a free-text 'Other' row automatically, so never add an 'Other' option yourself. If you recommend a specific option, make it the first in the list and end its label with '(Recommended)'. To switch into plan mode use enter_plan_mode (not this tool); once in plan mode, use this tool only to clarify requirements or choose between approaches before finalizing the plan. Do not use this tool for choices with an obvious default or for facts you can verify yourself.",
+		description: askDescription("short"),
 		promptSnippet: "Ask the user to decide between options when genuinely blocked",
-		parameters: Type.Object({
-			questions: Type.Array(
-				Type.Object({
-					question: Type.String({ description: "The question, ending in a question mark" }),
-					header: Type.String({ description: "Very short label for the question (a few words)" }),
-					multiSelect: Type.Optional(
-						Type.Boolean({ description: "Allow choosing several options (default false)" }),
-					),
-					options: Type.Array(
-						Type.Object({
-							label: Type.String({ description: "Short choice text" }),
-							description: Type.Optional(Type.String({ description: "What choosing this means" })),
-							preview: Type.Optional(
-								Type.String({
-									description:
-										"Preview shown beside the options while this option is focused: an ASCII mockup, diagram, or code snippet that helps the user compare choices. Single-select questions only.",
-								}),
-							),
-						}),
-						{ minItems: 2, maxItems: 4 },
-					),
-				}),
-				{ minItems: 1, maxItems: 4, description: "Questions to ask (1-4)" },
-			),
-		}),
-		async execute(_toolCallId, params, _signal, _onUpdate, ctx) {
+		parameters: AskParams,
+		async execute(_toolCallId, params, signal, _onUpdate, ctx) {
 			if (!ctx.hasUI) {
 				return { content: [{ type: "text", text: NON_INTERACTIVE }], details: {}, isError: true };
 			}
 
 			const questions = params.questions as Question[];
-			const outcome = await ctx.ui.custom<WidgetResult>((tui, theme, _keybindings, done) => {
+			// RPC has no custom UI (its custom() resolves undefined); ask through the
+			// select/input requests it forwards to the client instead (dialogs.ts).
+			const outcome = !canShowCustomUi(ctx) ? await askThroughDialogs(questions, ctx.ui, signal) : await panelUi(pi.events, ctx.ui).custom<WidgetResult>((tui, theme, _keybindings, done) => {
 				const style = {
 					paint: safeThemePaint(theme),
 					bold: safeThemeBold(theme),
@@ -94,7 +97,7 @@ export default function askUserExtension(pi: ExtensionAPI) {
 				const partial = outcome?.kind === "cancel" ? outcome.answers : [];
 				const text =
 					partial.length > 0
-						? `The user cancelled without submitting. They had made these selections before cancelling (NOT submitted — do not treat them as final answers):\n\n${formatAnswers(partial)}`
+						? `The user cancelled without submitting. They had made these selections before cancelling (NOT submitted — do not treat them as final answers): ${answerPairs(partial)}.`
 						: "The user cancelled without answering.";
 				return {
 					content: [{ type: "text", text }],
@@ -115,4 +118,5 @@ export default function askUserExtension(pi: ExtensionAPI) {
 			};
 		},
 	});
+	registerFormTool(pi, tool, askDescription);
 }

package/extensions/ask-user/questions.ts

@@ -22,20 +22,45 @@ export interface Answer {
 	selected: string[];
 	/** True when the user typed their own answer instead of picking. */
 	freeform: boolean;
+	/** True when the answer includes text the user typed (the "Other" row), alone or beside picked options. */
+	typed?: boolean;
+	/** The preview of the single option picked, when it carries one. */
+	preview?: string;
 	/** Free-text notes the user attached to this answer. */
 	notes?: string;
 }
 
-export function formatAnswers(answers: Answer[]): string {
-	if (answers.length === 0) return "The user did not answer.";
+/**
+ * Claude Code's answer list: `"question"="answer"` per answered question, with
+ * the picked option's preview and the user's notes, joined by ", ". A question
+ * left unanswered is listed only when it carries notes.
+ */
+export function answerPairs(answers: Answer[]): string {
 	return answers
 		.map((answer) => {
-			const value = answer.selected.length > 0 ? answer.selected.join(", ") : "(no answer)";
-			const typed = answer.freeform ? " (typed by the user)" : "";
-			const notes = answer.notes ? `\n→ notes: ${answer.notes}` : "";
-			return `${answer.question}\n→ ${value}${typed}${notes}`;
+			const answered = answer.selected.length > 0;
+			if (!answered && !answer.notes) return undefined;
+			const parts = [answered ? `"${answer.question}"="${answer.selected.join(", ")}"` : `"${answer.question}"=(no option selected)`];
+			if (answer.preview) parts.push(`selected preview:\n${answer.preview}`);
+			if (answer.notes) parts.push(`notes: ${answer.notes}`);
+			return parts.join(" ");
 		})
-		.join("\n\n");
+		.filter((pair): pair is string => pair !== undefined)
+		.join(", ");
+}
+
+/**
+ * ask_user_question's result, in Claude Code's words. Answers picked from the
+ * offered options are confirmed; an answer the user typed, or one with notes,
+ * may redirect the task, so the model is told to read it carefully.
+ */
+export function formatAnswers(answers: Answer[]): string {
+	const pairs = answerPairs(answers);
+	if (!pairs) return "The user did not answer the questions.";
+	const fromOptions = answers.every((answer) => !answer.notes && !answer.typed && !answer.freeform);
+	return fromOptions
+		? `Your questions have been answered: ${pairs}. You can now continue with these answers in mind.`
+		: `The user answered: ${pairs}. Read the answers carefully — they may request clarification, changes, or that you not proceed — and follow what they actually say.`;
 }
 
 /** Tool result when the user picks "Chat about this" instead of answering. */

package/extensions/ask-user/widget.ts

@@ -14,8 +14,9 @@
  * painting wherever it can along the way.
  */
 
-import { cutPlainText, padPlainText, truncateLine, visibleWidth, wrapPlainText } from "../lib/tui-render.ts";
+import { cutPlainText, padPlainText, truncateLine, visibleWidth, wrapHints, wrapPlainText } from "../lib/tui-render.ts";
 import type { Answer, Question } from "./questions.ts";
+import { keyId, keyText } from "../lib/key-input.ts";
 
 export type Paint = (color: string, text: string) => string;
 export type Bold = (text: string) => string;
@@ -124,35 +125,29 @@ export type WidgetKey =
 	| { kind: "text"; text: string };
 
 export function decodeWidgetKey(data: string): WidgetKey | undefined {
-	switch (data) {
-		case "\x1b[A":
-		case "\x1bOA":
+	switch (keyId(data)) {
+		case "up":
 			return { kind: "up" };
-		case "\x1b[B":
-		case "\x1bOB":
+		case "down":
 			return { kind: "down" };
-		case "\x1b[D":
-		case "\x1bOD":
-		case "\x1b[Z": // shift+tab
+		case "left":
+		case "shift+tab":
 			return { kind: "prevTab" };
-		case "\x1b[C":
-		case "\x1bOC":
-		case "\t":
+		case "right":
+		case "tab":
 			return { kind: "nextTab" };
-		case "\r":
-		case "\n":
+		case "enter":
 			return { kind: "enter" };
-		case "\x1b":
-		case "\x03": // ctrl+c — same intent as escape while the dialog is focused
+		case "escape":
+		case "ctrl+c": // same intent as escape while the dialog is focused
 			return { kind: "esc" };
-		case "\x7f":
-		case "\b":
+		case "backspace":
+		case "ctrl+backspace":
 			return { kind: "backspace" };
 		default: {
-			// Unrecognized escape sequences (home/end/F-keys) must not leak their
-			// tail characters into a text draft.
-			if (data.startsWith("\x1b")) return undefined;
-			const text = [...data].filter((char) => char >= " " && char !== "\x7f").join("");
+			// Unrecognized escape sequences (home/end/F-keys) type nothing, so
+			// their tail characters never leak into a text draft.
+			const text = keyText(data);
 			return text ? { kind: "text", text } : undefined;
 		}
 	}
@@ -204,6 +199,12 @@ export function applyWidgetKey(state: WidgetState, key: WidgetKey): WidgetResult
 		case "enter":
 			return activateRow(state, rows[questionState.cursor]);
 		case "text": {
+			// The free-text row is an input: typing on it starts the answer, as in
+			// Claude Code, instead of being dropped until Enter opens it.
+			if (rows[questionState.cursor]?.kind === "other") {
+				state.editing = { field: "other", draft: questionState.otherText + key.text };
+				return;
+			}
 			if (key.text === "n" && hasPreviews(question)) {
 				state.editing = { field: "notes", draft: questionState.notes };
 				return;
@@ -303,11 +304,14 @@ function advance(state: WidgetState): void {
 function collectAnswer(question: Question, state: QuestionState): Answer {
 	const labels = [...state.selected].sort((a, b) => a - b).map((index) => question.options[index].label);
 	if (state.otherChosen) labels.push(state.otherText);
+	const picked = !question.multiSelect && state.selected.length === 1 && !state.otherChosen ? question.options[state.selected[0]] : undefined;
 	return {
 		question: question.question,
 		header: question.header,
 		selected: labels,
 		freeform: labels.length > 0 && state.selected.length === 0,
+		...(state.otherChosen ? { typed: true } : {}),
+		...(picked?.preview?.trim() ? { preview: picked.preview } : {}),
 		notes: state.notes || undefined,
 	};
 }
@@ -333,7 +337,9 @@ export function renderWidget(state: WidgetState, style: WidgetStyle, width: numb
 	if (state.tab === state.questions.length) renderSubmitTab(state, paint, width, out);
 	else renderQuestionTab(state, style, width, out);
 	out.push("");
-	out.push(paint("dim", cutPlainText(footerFor(state), Math.max(1, width - 1))));
+	// The key hints wrap at their separators on a narrow terminal, so "Esc to
+	// cancel" is never the part cut off.
+	for (const line of wrapHints(footerFor(state), Math.max(1, width - 1))) out.push(paint("dim", line));
 	// Final ANSI-aware guard: pi-tui crashes the app on an overwide line, and
 	// the painted tab bar can exceed narrow widths.
 	return out.map((line) => truncateLine(line, width));
@@ -440,7 +446,9 @@ function renderStackedRows(state: WidgetState, style: WidgetStyle, width: number
 				const editing = state.editing?.field === "other";
 				const check = question.multiSelect ? (questionState.otherChosen ? "[✔] " : "[ ] ") : "";
 				if (editing) {
-					out.push(paint("accent", cut(`❯ ${number} ${check}${state.editing?.draft ?? ""}▏`)));
+					// A long answer wraps under its row while typing; nothing is cut.
+					const prefix = `❯ ${number} ${check}`;
+					for (const line of wrapUnder(prefix, `${state.editing?.draft ?? ""}▏`, width)) out.push(paint("accent", line));
 				} else if (questionState.otherText) {
 					out.push(labelRow(`${pointer} ${number} ${check}`, questionState.otherText, focused || questionState.otherChosen));
 				} else {
@@ -505,7 +513,7 @@ function renderPreviewRows(state: WidgetState, style: WidgetStyle, width: number
 	const notesIndent = " ".repeat(sideBySide ? leftWidth : 2);
 	out.push("");
 	if (state.editing?.field === "notes") {
-		out.push(`${notesIndent}${paint("accent", "Notes: ")}${cut(state.editing.draft)}▏`);
+		out.push(...wrapUnder(`${notesIndent}Notes: `, `${state.editing.draft}▏`, width, `${notesIndent}${paint("accent", "Notes: ")}`));
 	} else if (questionState.notes) {
 		out.push(`${notesIndent}${paint("accent", "Notes: ")}${cut(questionState.notes)}`);
 	} else {
@@ -516,6 +524,18 @@ function renderPreviewRows(state: WidgetState, style: WidgetStyle, width: number
 	pushChatRow(state, rows, style, width, out);
 }
 
+/**
+ * `prefix` then `text`, wrapped to the row width with continuation lines
+ * indented under the text, so a typed answer shows whole. `painted` replaces
+ * the plain prefix on the first line (same width, with colour).
+ */
+function wrapUnder(prefix: string, text: string, width: number, painted = prefix): string[] {
+	const indent = visibleWidth(prefix);
+	const room = Math.max(4, width - 1 - indent);
+	const wrapped = wrapPlainText(text, room);
+	return wrapped.map((line, i) => (i === 0 ? painted : " ".repeat(indent)) + line);
+}
+
 function previewBox(preview: string, maxOuter: number, paint: Paint): string[] {
 	const inner = Math.max(8, maxOuter - 4);
 	const wrapped = wrapPlainText(preview.replace(/\t/g, "  "), inner);