pi-openui 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 ## Unreleased
 
+## 0.2.0 (2026-11-02)
+
+- **`Choice` takes several answers and an Other answer, and sends them together.** `Choice(question, options, hint, multiple, other)`.
+  `multiple: true` lets you pick several options (square checkboxes and the tag `Choose all that apply`; a single question has
+  round indicators and `Choose one`). `other` is on by default and adds an **Other...** row: it opens pi's own editor (Enter saves,
+  Shift+Enter adds a line, Esc cancels) and the text shows under the row. Write `null` for each skipped argument before `multiple`
+  or `other`; a wrong one is a validation error that gives the argument's position and an example.
+- **A click on a Choice no longer sends anything.** It stages the answer. A bar under the widget, `N of M answered  [ Send answers ]
+  [ Clear ]`, sends the answers of every Choice in the widget (also those on tabs nobody opened) as ONE message and locks the
+  widget. The buttons stack on a narrow terminal. A Choice written for the old behaviour keeps working, now with an Other row and the
+  bar (write `other: false` for a closed list), unless it breaks one of the new limits. Answers live in memory with the widget, so a
+  widget redrawn from a resumed session opens unanswered.
+- **The message.** One question that takes one answer, answered with an option, still sends the line `<question> — <option>`.
+  Anything else is a numbered list that starts ``Answers to the questions in widget `Title` (3):``, with `(no answer)` for a skipped
+  question and `other:` for typed text. The words the agent wrote are cleaned (control and invisible characters removed, whitespace
+  collapsed, `@file:` and similar written `(at)file:`), and a question that would start the message like a command (`/new session?`)
+  uses the list. Your own Other text is sent as you typed it, except for control characters: a tab becomes a space and a run of
+  blank lines becomes one.
+- **Delivery.** The bar says `Sending to the agent…` until pi reports the message, then `Sent to the agent.` If pi does not take it
+  within 3 seconds (no model selected, no credentials) and is not holding one for the end of the agent's turn, the widget is given
+  back with your answers and a notice, and Send answers works again once what pi complained about is fixed. After Send the widget
+  gives the keyboard back to pi.
+- **Layout and keys.** Options are always one per row (the old layout with every option on one line is gone). The whole row is the
+  click target, and a long option wraps under its indicator. Down from the last option reaches Send answers, never Clear. After
+  Clear the focus moves to the first option, and Enter never presses an element other than the focused one. In notes mode the
+  options and the bar do nothing.
+- **New limits**, listed in the model's reference and in docs/components/README.md: 12 Choices per widget, 6 options, a question of
+  at most 200 characters, an option of at most 120, an Other answer of at most 500. An empty question or option is an error too.
+  Over a limit is a validation error with the number in it.
+- **The model is told.** The `render_widget` description and guideline now say that a Button click arrives as the next message and
+  that Choice answers arrive together after Send answers, so the model asks all its questions in one widget. The model's reference
+  grows by about 190 tokens. New sample: `/openui-gallery choice`.
+- **Rows with emoji stay aligned across pi upgrades.** The two-cell character table (`src/diagram/wide.ts`) was a snapshot of one pi.
+  pi 1.4.0 draws a few newer emoji (U+1F6D9, U+1FA8B-1FA8D, U+1FACC, U+1FADD, U+1FAEB, U+1FAF9-1FAFA) two cells wide, so borders
+  slid on rows that contain them. The extension now asks the running pi about the blocks where emoji are added (U+2190-2BFF,
+  U+1F000-1FFFF, about 11 ms) when it loads, and the table is regenerated for pi 1.4.0 (`npm run width`).
+
 ## 0.1.2 (2026-10-31)
 
 - Fixed borders drawn out of line on rows with wide characters. The terminal draws emoji and many symbols (✅ ❌ ⚡ 🚀 ⭐ ☕

package/README.md

@@ -17,8 +17,12 @@ dependency and no network access.
 - **23 components.** Layout and text, metric tiles, tables, tabs, buttons and choices, FAQ, markdown, code with
   highlighting and a copy button, images, bar, line, area, pie and radar charts, a world map, and four diagram types
   (DAG, ER, infrastructure map, sequence). See the [component gallery](https://github.com/newtonapple/pi-openui/blob/main/docs/components/README.md).
-- **Interaction.** Click, or use Tab, the arrow keys, Enter and Esc. A button or a choice sends text to the agent as your next
-  message. See [docs/interaction.md](https://github.com/newtonapple/pi-openui/blob/main/docs/interaction.md).
+- **Interaction.** Click, or use Tab, the arrow keys, Enter and Esc. A button sends text to the agent as your next message.
+  See [docs/interaction.md](https://github.com/newtonapple/pi-openui/blob/main/docs/interaction.md).
+- **Questions.** A `Choice` asks you something with a list of options. A click only stages your answer; a `[ Send answers ]`
+  bar under the widget sends every answer of the widget as one message. A question can allow several options, and every
+  question has an **Other...** row where you type your own answer in pi's editor. See
+  [Choice](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Choice.md).
 - **Notes.** Pin a comment to a table cell, a graph node or a pie slice, then send all of them to the agent as one numbered
   message. You read and edit the message before it goes. See [Notes](#notes).
 - **Tooltips.** An element with a tooltip shows a small `◆`. Hover for a hint bubble, click or press Enter for a panel with
@@ -57,13 +61,13 @@ update pi shows this package's [changelog](CHANGELOG.md). Maintainers: see [docs
 | What | How |
 |---|---|
 | Let the agent draw | Ask for a dashboard, a chart, a diagram, a table. It calls `render_widget`. |
-| One example of every component | `/openui-gallery`, or one kind: `/openui-gallery dag`, `erd`, `infra`, `sequence`, `geo`, `pie`, `line`, `image`, `table`, `tabs`, `markdown` |
+| One example of every component | `/openui-gallery`, or one kind: `/openui-gallery dag`, `erd`, `infra`, `sequence`, `geo`, `pie`, `line`, `image`, `table`, `tabs`, `markdown`, `choice` |
 | Draw a file | `/openui-file path/to/widget.oui` |
 | Use the keyboard without the mouse | `/openui-focus` |
 | Write notes on a widget | Click `[ notes ]` under it, or `/openui-notes` |
 
-Gallery clicks are echoed locally and cost nothing. In a widget the agent drew, a Button or Choice click is sent to the
-agent as your next message.
+Gallery clicks are echoed locally and cost nothing. In a widget the agent drew, a Button click is sent to the agent as your
+next message, and the answers to its Choices are sent together, as one message, when you press **Send answers**.
 
 The mouse needs pi's default fullscreen mode. Everything also works from the keyboard.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-openui",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "description": "Pi extension: interactive dashboards, charts, diagrams and maps in the terminal. The agent draws with OpenUI Lang; you click, hover and pin notes.",
   "license": "MIT",

package/src/blocks/choice.ts

@@ -0,0 +1,152 @@
+// Choice: what an answer is and the one message the user sends. Pure logic, no pi imports.
+// A click stages an answer; nothing is sent until the user presses Send answers, and then every Choice of the widget goes in ONE
+// message. Port of hermes-openui's choice-core.js, on pi-openui's own cleaning rules (notes.ts).
+//
+// The message is the contract with the agent. One single-choice question answered with an option keeps the line agents already
+// know, `<question> — <option>`. Anything else is a numbered list. The agent wrote the question and the options and the message
+// is sent without a review step, so those words are cleaned like a Notes quote: control and invisible characters out, whitespace
+// collapsed, `@file:`-style references defused. The user's own Other text is theirs: only control characters go.
+import type { El } from "../lang/library.ts";
+import { LIMITS } from "../lang/library.ts";
+import { clip, collapse, neutralize, quiet, strip } from "./notes.ts";
+
+export const NO_ANSWER = "(no answer)";
+
+/** A question as the board knows it. `question` and `options` are the cleaned words the message uses. */
+export interface Choice {
+	question: string;
+	options: string[];
+	multiple: boolean;
+	other: boolean;
+	/** a fingerprint of the words and the two flags: Choices with one key are ONE question, they share their answer and count once */
+	key: string;
+}
+
+/** What the user has staged for one question. `picks` are option indexes, ascending. `other` is the Other row being selected. */
+export interface Answer {
+	picks: number[];
+	other: boolean;
+	text: string;
+}
+export type Answers = Record<string, Answer>;
+
+const BLANK: Answer = { picks: [], other: false, text: "" };
+const cur = (a: Answers, c: Choice): Answer => a[c.key] ?? BLANK;
+const word = (raw: unknown, max: number): string => clip(neutralize(collapse(raw)), max);
+
+export function makeChoice(props: Record<string, any>): Choice {
+	const options = (Array.isArray(props?.options) ? props.options : []).map((o: unknown) => word(o, LIMITS.option));
+	const question = word(props?.question, LIMITS.question);
+	const multiple = props?.multiple === true;
+	const other = props?.other !== false;
+	return { question, options, multiple, other, key: JSON.stringify([question, options, multiple, other]) };
+}
+
+/** Every Choice of a compiled tree in document order, whether or not its tab was ever shown. Identical questions are merged. */
+export function collectChoices(root: El | undefined): Choice[] {
+	const out: Choice[] = [];
+	const keys = new Set<string>();
+	// the compiler bounds the depth (LIMITS.depth) and an element reached twice is read once, so the walk needs no bound of its own:
+	// one would silently drop a Choice that is drawn and clickable
+	const seen = new Set<object>();
+	const walk = (x: unknown) => {
+		if (!x || typeof x !== "object" || seen.has(x)) return;
+		seen.add(x);
+		if (Array.isArray(x)) return x.forEach(walk);
+		const el = x as El;
+		if (el.type === "Choice") {
+			const c = makeChoice(el.props);
+			if (!keys.has(c.key)) {
+				keys.add(c.key);
+				out.push(c);
+			}
+			return;
+		}
+		if (el.props && typeof el.props === "object") for (const v of Object.values(el.props)) walk(v);
+	};
+	walk(root);
+	return out;
+}
+
+// ---------- the answers (every function returns new objects) ----------
+
+/** The user's own text, tidied: a tab is a space, trailing blanks and control characters go, a run of blank lines is one blank line. */
+function tidyOther(raw: unknown): string {
+	return strip(raw == null ? "" : String(raw).replace(/\t/g, " "), true)
+		.split("\n")
+		.map((l) => l.replace(/[ \t]+$/g, ""))
+		.join("\n")
+		.replace(/\n{3,}/g, "\n\n")
+		.trim();
+}
+
+/**
+ * The user's own text as it is kept and sent: newlines stay (a run of blank lines is one, so a message cannot be padded), a tab is
+ * a space, trailing blanks and control characters go, at most LIMITS.other characters. Not defused: it is theirs.
+ */
+export function cleanOther(raw: unknown): string {
+	return Array.from(tidyOther(raw)).slice(0, LIMITS.other).join("");
+}
+
+/** How long the text is once tidied and before the cut, so "shortened" is said only when something is cut. */
+export const otherLength = (raw: unknown): number => Array.from(tidyOther(raw)).length;
+
+export function toggleOption(a: Answers, c: Choice, i: number): Answers {
+	if (!Number.isInteger(i) || i < 0 || i >= c.options.length) return a;
+	const now = cur(a, c);
+	let next: Answer;
+	if (c.multiple) next = { ...now, picks: now.picks.includes(i) ? now.picks.filter((x) => x !== i) : [...now.picks, i].sort((x, y) => x - y) };
+	else next = now.picks.length === 1 && now.picks[0] === i ? { ...now, picks: [] } : { ...now, picks: [i], other: false }; // another option moves the pick and replaces Other
+	return { ...a, [c.key]: next };
+}
+
+/** The user saved their own answer. Text selects the Other row (single mode: it replaces the option); empty text unselects it. */
+export function setOther(a: Answers, c: Choice, text: string): Answers {
+	if (!c.other) return a;
+	const clean = cleanOther(text);
+	const now = cur(a, c);
+	if (!clean) return { ...a, [c.key]: { ...now, other: false, text: "" } };
+	return { ...a, [c.key]: { picks: c.multiple ? now.picks : [], other: true, text: clean } };
+}
+
+const otherOf = (c: Choice, a: Answer): string => (c.other && a.other ? cleanOther(a.text) : "");
+
+/** An Other row that is selected but empty is not an answer. */
+export function isAnswered(c: Choice, a: Answers): boolean {
+	const now = cur(a, c);
+	return now.picks.some((i) => i >= 0 && i < c.options.length) || otherOf(c, now) !== "";
+}
+
+export function progress(cs: Choice[], a: Answers): { answered: number; total: number } {
+	return { answered: cs.filter((c) => isAnswered(c, a)).length, total: cs.length };
+}
+
+/** `disk; memory; other: also look at the logs`, or "" when not answered. A second line of Other text is indented under the question. */
+export function answerWords(c: Choice, a: Answers): string {
+	const now = cur(a, c);
+	const parts = now.picks.filter((i) => i >= 0 && i < c.options.length).map((i) => c.options[i]);
+	const text = otherOf(c, now);
+	if (text) parts.push("other: " + text.split("\n").join("\n   "));
+	return parts.join("; ");
+}
+
+// ---------- the message ----------
+
+/** pi, like most hosts, may run a message that starts with `/name` as a command; a question must never be the first words of one. */
+const SLASH_COMMAND = /^\/[^\s/]*(?:\s|$)/;
+export const runsAsCommand = (text: string): boolean => SLASH_COMMAND.test(String(text).trim());
+
+export function buildMessage(cs: Choice[], a: Answers, title: string): string {
+	if (cs.length === 1 && !cs[0].multiple) {
+		const c = cs[0];
+		const now = cur(a, c);
+		if (now.picks.length === 1 && c.options[now.picks[0]] !== undefined && !otherOf(c, now)) {
+			const line = `${c.question} \u2014 ${c.options[now.picks[0]]}`;
+			if (!runsAsCommand(line)) return line;
+		}
+	}
+	const name = title ? quiet(title, 60) : "";
+	const head = name ? `Answers to the questions in widget \`${name}\` (${cs.length}):` : `Answers to the questions in this widget (${cs.length}):`;
+	const lines = cs.map((c, i) => `${i + 1}. ${c.question}\n   ${answerWords(c, a) || NO_ANSWER}`);
+	return `${head}\n\n${lines.join("\n")}`;
+}

package/src/blocks/core.ts

@@ -1,10 +1,11 @@
 // Layout and simple components: Stack, Text, Card, Callout, Metric, Button, Choice, Tabs, Faq, Image + tooltips.
-import { textWidth, truncateText, type Rect } from "../diagram/canvas.ts";
+import { textWidth, truncateText, type Cell, type Rect } from "../diagram/canvas.ts";
 import type { El } from "../lang/library.ts";
+import { buildMessage, cleanOther, makeChoice, progress, type Choice } from "./choice.ts";
 import { codeInner } from "./code.ts";
 import { markdownBlock } from "./markdown.ts";
 import { itemId, itemInfo, NOTEABLE, parentKeyOf, WHOLE_ONLY } from "./notes.ts";
-import type { Block, Ctx, Target, Tip } from "./types.ts";
+import type { Block, Ctx, Target, Tip, WState } from "./types.ts";
 import { blank, boxed, cell, fromRows, hstack, padRow, shiftTargets, textCells, vstack, wrapRuns, wrapText } from "./util.ts";
 
 const ROW_GAP: Record<string, number> = { none: 0, xs: 0, s: 0, m: 1, l: 1, xl: 2 };
@@ -118,36 +119,79 @@ export function button(el: El, width: number, path: string): Block {
 	return fromRows(Math.max(cells.length, 1), [cells], [t]);
 }
 
+const SEND = "[ Send answers ]";
+const CLEAR = "[ Clear ]";
+
+/** One question: its tag, hint, one row per option and (unless `other` is false) an Other row. A click only stages the answer. */
 export function choice(el: El, width: number, ctx: Ctx, path: string): Block {
-	const p = el.props;
-	const q = String(p.question ?? "");
-	const opts: string[] = p.options ?? [];
-	const picked = ctx.state.picked[path];
-	const head = wrapRuns([{ t: q, role: "choice.q" }], width);
-	const hint = p.hint ? wrapText(String(p.hint), width, "text.muted") : [];
+	const c = makeChoice(el.props);
+	const ans = ctx.state.answers[c.key];
+	const locked = ctx.state.sent;
+	const head = wrapRuns([{ t: c.question, role: "choice.q" }], width);
+	const tag = [textCells(c.multiple ? "Choose all that apply" : "Choose one", "choice.tag")];
+	const hint = el.props.hint ? wrapText(String(el.props.hint), width, "text.muted") : [];
+	const rows: Cell[][] = [...head, ...tag, ...hint];
 	const targets: Target[] = [];
-	const lines: Array<ReturnType<typeof textCells>> = [];
-	const optCells = opts.map((o, i) => {
-		const on = picked === o;
-		return { i, cells: [cell(on ? "●" : "○", on ? "choice.picked" : "choice"), cell(" "), ...textCells(truncateText(o, Math.max(4, width - 3)), on ? "choice.picked" : "choice")] };
-	});
-	const total = optCells.reduce((a, o, k) => a + o.cells.length + (k ? 3 : 0), 0);
-	const baseY = head.length + hint.length;
-	if (total <= width) {
-		let line: typeof lines[number] = [];
-		optCells.forEach((o, k) => {
-			if (k) line.push(cell(" "), cell(" "), cell(" "));
-			targets.push({ id: `choice:${path}:${o.i}`, kind: "choice", rect: { x: line.length, y: baseY, w: o.cells.length, h: 1 }, label: opts[o.i], send: `${q} — ${opts[o.i]}` });
-			line.push(...o.cells);
-		});
-		lines.push(line);
+	const row = (on: boolean, label: string, index: number | "other") => {
+		const role = on ? "choice.picked" : locked ? "choice.locked" : "choice";
+		const mark = c.multiple ? (on ? "[✓]" : "[ ]") : on ? "●" : "○";
+		const indent = textWidth(mark) + 1;
+		// the whole option is drawn: what is sent is what the user could read. A long one wraps under its first word.
+		const lines = wrapText(label, Math.max(4, width - indent), role);
+		const y = rows.length;
+		lines.forEach((l, k) => rows.push(k === 0 ? [...textCells(mark, role), cell(" ", role), ...l] : [...Array.from({ length: indent }, () => cell(" ")), ...l]));
+		if (!locked) targets.push({ id: `choice:${path}:${index}`, kind: "choice", rect: { x: 0, y, w: width, h: lines.length }, label, choice: { of: c, index } });
+	};
+	c.options.forEach((o, i) => row(!!ans?.picks.includes(i), o, i));
+	if (c.other) {
+		const typed = ans?.other ? cleanOther(ans.text) : "";
+		row(typed !== "", "Other...", "other");
+		if (typed) {
+			const room = Math.max(4, width - 4);
+			const lines = wrapText(typed.replace(/\n/g, " ¶ "), room, "choice.other");
+			const shown = lines.slice(0, 2);
+			if (lines.length > 2) shown[1] = textCells(truncateText(shown[1].map((x) => x.ch).join("") + "…", room), "choice.other");
+			for (const l of shown) rows.push([cell(" "), cell(" "), cell(" "), cell(" "), ...l]);
+		}
+	}
+	return fromRows(width, rows, targets);
+}
+
+/**
+ * The bar under a widget that has Choices: how many are answered, and the buttons. Send carries the finished message, and has a
+ * target only when something is answered; Clear only when something is staged. After Send the bar only says so.
+ */
+export function answerBar(choices: Choice[], state: WState, title: string, width: number): Block {
+	if (state.sent) return fromRows(width, [state.sending ? textCells("Sending to the agent…", "text.muted") : textCells("Sent to the agent.", "choice.sent")]);
+	const { answered, total } = progress(choices, state.answers);
+	const staged = Object.values(state.answers).some((a) => a.picks.length > 0 || a.other);
+	const count = textCells(`${answered} of ${total} answered`, "text.muted");
+	const sendW = textWidth(SEND);
+	const clearW = textWidth(CLEAR);
+	const send = textCells(SEND, answered > 0 ? "btn" : "choice.locked");
+	const clear = textCells(CLEAR, staged ? "btn" : "choice.locked");
+	const gap = [cell(" "), cell(" ")];
+	// as much as fits on one row: the count and both buttons, else the count above the buttons, else one button per row
+	const rows: Cell[][] = [];
+	let sendAt: { x: number; y: number };
+	let clearAt: { x: number; y: number };
+	if (count.length + 2 + sendW + 2 + clearW <= width) {
+		rows.push([...count, ...gap, ...send, ...gap, ...clear]);
+		sendAt = { x: count.length + 2, y: 0 };
+		clearAt = { x: count.length + 2 + sendW + 2, y: 0 };
+	} else if (sendW + 2 + clearW <= width) {
+		rows.push(count, [...send, ...gap, ...clear]);
+		sendAt = { x: 0, y: 1 };
+		clearAt = { x: sendW + 2, y: 1 };
 	} else {
-		optCells.forEach((o, k) => {
-			targets.push({ id: `choice:${path}:${o.i}`, kind: "choice", rect: { x: 0, y: baseY + k, w: o.cells.length, h: 1 }, label: opts[o.i], send: `${q} — ${opts[o.i]}` });
-			lines.push(o.cells);
-		});
+		rows.push(count, send, clear);
+		sendAt = { x: 0, y: 1 };
+		clearAt = { x: 0, y: 2 };
 	}
-	return fromRows(width, [...head, ...hint, ...lines], targets);
+	const targets: Target[] = [];
+	if (answered > 0) targets.push({ id: "send", kind: "send", rect: { ...sendAt, w: sendW, h: 1 }, label: "Send answers", bar: { choices, title } });
+	if (staged) targets.push({ id: "clear", kind: "clear", rect: { ...clearAt, w: clearW, h: 1 }, label: "Clear" });
+	return fromRows(width, rows, targets);
 }
 
 export function tabs(el: El, width: number, ctx: Ctx, path: string): Block {

package/src/blocks/interact.ts

@@ -1,9 +1,10 @@
 // Interaction logic, independent of any terminal: hit testing, activation, keyboard navigation, pan reveal.
+import { buildMessage, progress, toggleOption } from "./choice.ts";
 import type { Block, Target, WState } from "./types.ts";
 
 export interface Env {
-	/** send text to the assistant as the user's next turn */
-	send(text: string): void;
+	/** send text to the assistant as the user's next turn. `confirm`: the sender will lock something until the host says it took the text */
+	send(text: string, opts?: { confirm?: boolean }): void;
 	/** put text on the clipboard */
 	copy(text: string): void;
 	/** show a short notice under the widget */
@@ -143,7 +144,10 @@ export function nextTarget(block: Block, currentId: string | null, key: NavKey,
 		return order[(i + (key === "next" ? 1 : -1) + order.length) % order.length];
 	}
 	if (!cur) return order[0];
-	return spatial(order, cur, key);
+	const to = spatial(order, cur, key);
+	// Down from the options reaches Send answers. The nearest centre would be Clear, and one Enter on it drops every answer.
+	if ((key === "down" || key === "up") && to.kind === "clear" && cur.kind !== "send" && cur.kind !== "clear") return order.find((t) => t.kind === "send") ?? to;
+	return to;
 }
 
 const lastColon = (id: string) => id.lastIndexOf(":");
@@ -164,12 +168,24 @@ export function activate(t: Target, state: WState, env: Env): boolean {
 			state.faq[t.id] = !state.faq[t.id];
 			return true;
 		case "choice": {
-			const k = lastColon(t.id);
-			const path = t.id.slice(7, k);
-			state.picked[path] = t.label;
-			if (t.send) env.send(t.send);
+			// a click only stages the answer. The Other row opens pi's editor, which the widget handles (it is asynchronous).
+			const x = t.choice;
+			if (!x || state.sent || x.index === "other") return false;
+			state.answers = toggleOption(state.answers, x.of, x.index);
+			return true;
+		}
+		case "send": {
+			// built now, from the answers as they are: an answer staged since the last frame is in the message, a cleared one is not
+			const x = t.bar;
+			if (!x || state.sent || !progress(x.choices, state.answers).answered) return false;
+			env.send(buildMessage(x.choices, state.answers, x.title), { confirm: true });
+			state.sent = true;
 			return true;
 		}
+		case "clear":
+			if (state.sent) return false;
+			state.answers = {};
+			return true;
 		case "button":
 			if (t.send) env.send(t.send);
 			if (t.openUrl) {
@@ -214,7 +230,13 @@ export function describe(t: Target): string {
 			bits.push(`[${t.label}]`, t.send ? `sends "${t.send.length > 70 ? t.send.slice(0, 69) + "…" : t.send}"` : t.openUrl ? `link ${t.openUrl}` : "");
 			break;
 		case "choice":
-			bits.push(t.label, "choose to answer");
+			bits.push(t.label, t.choice?.index === "other" ? "Enter to type your own answer" : t.choice?.of.multiple ? "Enter to toggle" : "Enter to select");
+			break;
+		case "send":
+			bits.push("send all the answers to the agent as one message");
+			break;
+		case "clear":
+			bits.push("clear every answer");
 			break;
 		case "tab":
 			bits.push(`tab ${t.label}`);

package/src/blocks/render.ts

@@ -2,12 +2,13 @@
 import type { El } from "../lang/library.ts";
 import { barChart, lineArea, pieChart, radarChart } from "./charts.ts";
 import { codeBlock } from "./code.ts";
-import { addWholeItem, button, callout, card, choice, faq, image, metric, stack, tabs, text, withTips, type Anchor } from "./core.ts";
+import { addWholeItem, answerBar, button, callout, card, choice, faq, image, metric, stack, tabs, text, withTips, type Anchor } from "./core.ts";
 import { dagBlock, erdBlock, infraBlock, panBlock } from "./diagrams.ts";
 import { geoMap } from "./geo.ts";
 import { markdownBlock } from "./markdown.ts";
 import { sequence } from "./sequence.ts";
-import { decorateNotes } from "./notes.ts";
+import { collectChoices } from "./choice.ts";
+import { decorateNotes, widgetTitle } from "./notes.ts";
 import { tableBlock } from "./table.ts";
 import type { Block, Ctx, Services, WState } from "./types.ts";
 import { blank, textBlock, vstack } from "./util.ts";
@@ -24,8 +25,12 @@ function capRows(block: Block, warnings: string[]): Block {
 export function renderTree(root: El, width: number, state: WState, services: Services = {}): { block: Block; warnings: string[] } {
 	const warnings: string[] = [];
 	const ctx: Ctx = { state, warnings, services, tabs: [], render: (el, w, path) => renderEl(el, w, path, ctx) };
-	const base = capRows(renderEl(root, Math.max(20, width), "0", ctx), warnings);
-	const block = decorateNotes(base, state, Math.max(20, width));
+	const w = Math.max(20, width);
+	let base = capRows(renderEl(root, w, "0", ctx), warnings);
+	// every Choice of the widget, also on tabs nobody opened, shares one bar under the widget (after the row cap, so it is never cut)
+	const choices = collectChoices(root);
+	if (choices.length) base = vstack([base, answerBar(choices, state, widgetTitle(root), w)], 1, Math.max(base.w, w));
+	const block = decorateNotes(base, state, w);
 	return { block, warnings };
 }
 

package/src/blocks/types.ts

@@ -1,5 +1,6 @@
 import type { Cell, Rect } from "../diagram/canvas.ts";
 import type { El } from "../lang/library.ts";
+import type { Answers, Choice } from "./choice.ts";
 
 export interface Tip {
 	hint?: string;
@@ -14,7 +15,12 @@ export interface Tip {
 export type TargetKind =
 	| "tab"
 	| "button"
+	/** one option of a Choice, or its Other row */
 	| "choice"
+	/** the Send answers button under a widget that has Choices */
+	| "send"
+	/** the Clear button next to it */
+	| "clear"
 	| "faq"
 	| "node"
 	| "copy"
@@ -68,6 +74,10 @@ export interface Target {
 	send?: string;
 	openUrl?: string;
 	copy?: string;
+	/** for kind "send": what it sends. The message is built from the answers as they are when it is pressed, never from a picture that may be a frame old. */
+	bar?: { choices: Choice[]; title: string };
+	/** for kind "choice": the question and which row of it this is (an option index, or its Other row) */
+	choice?: { of: Choice; index: number | "other" };
 	/** extra cells (block coordinates) that belong to the target besides its rect, e.g. the wedge of a pie slice */
 	cells?: Array<[number, number]>;
 	/** for kind "item": what a note on it is about */
@@ -89,7 +99,12 @@ export interface Block {
 export interface WState {
 	tab: Record<string, number>;
 	faq: Record<string, boolean>;
-	picked: Record<string, string>;
+	/** what the user has staged for each Choice, by question key. Nothing is sent until Send answers. */
+	answers: Answers;
+	/** the answers have been sent: every Choice is locked */
+	sent: boolean;
+	/** sent, but pi has not said yet that it took the message (the lock is held; the bar says Sending) */
+	sending: boolean;
 	pan: Record<string, number>;
 	tip: string | null;
 	focus: string | null;
@@ -102,7 +117,7 @@ export interface WState {
 	noteSeq: number;
 }
 
-export const newState = (): WState => ({ tab: {}, faq: {}, picked: {}, pan: {}, tip: null, focus: null, hover: null, copied: null, notes: [], noteMode: false, noteSeq: 0 });
+export const newState = (): WState => ({ tab: {}, faq: {}, answers: {}, sent: false, sending: false, pan: {}, tip: null, focus: null, hover: null, copied: null, notes: [], noteMode: false, noteSeq: 0 });
 
 /** Supplied by the host when it can draw bitmaps. Without it, an Image is drawn as a labelled frame. */
 export interface ImageService {

package/src/diagram/canvas.ts

@@ -8,14 +8,21 @@ export function graphemes(s: string): string[] {
 	return seg ? Array.from(seg.segment(s), (x) => x.segment) : Array.from(s);
 }
 
-/** Whether `cp` is in the generated table of code points pi draws two cells wide (binary search over [first, last] pairs). */
+// The code points pi draws two cells wide: the generated table, which src/pi/widths.ts corrects against the running pi when the
+// extension loads (the blocks where Unicode adds emoji). Flat [first, last] pairs, ascending.
+let table: readonly number[] = WIDE;
+export function setWide(t: readonly number[]): void {
+	table = t;
+}
+
+/** Whether `cp` is in the table of code points pi draws two cells wide (binary search over [first, last] pairs). */
 function isWide(cp: number): boolean {
 	let lo = 0;
-	let hi = WIDE.length / 2 - 1;
+	let hi = table.length / 2 - 1;
 	while (lo <= hi) {
 		const mid = (lo + hi) >> 1;
-		if (cp < WIDE[mid * 2]) hi = mid - 1;
-		else if (cp > WIDE[mid * 2 + 1]) lo = mid + 1;
+		if (cp < table[mid * 2]) hi = mid - 1;
+		else if (cp > table[mid * 2 + 1]) lo = mid + 1;
 		else return true;
 	}
 	return false;

package/src/diagram/palette.ts

@@ -112,7 +112,7 @@ export function createPalette(t: PaletteTokens): Palette {
 				f = compose(t.accent, t.bold);
 				break;
 			case "choice":
-				f = a === "q" ? t.bold : a === "picked" ? compose(t.accent, t.bold) : undefined;
+				f = a === "q" ? t.bold : a === "picked" ? compose(t.accent, t.bold) : a === "tag" || a === "other" ? t.dim : a === "locked" ? t.dim : a === "sent" ? t.good : undefined;
 				break;
 			case "tab":
 				f = a === "on" ? t.accent : a === "label" ? compose(t.accent, t.bold) : a === "off" ? t.dim : a === "rule" ? t.muted : undefined;

package/src/diagram/wide.ts

@@ -1,4 +1,4 @@
-// Generated by scripts/width-table.ts from pi's own width function: do not edit. Run `npm run width` after pi updates.
+// Generated by scripts/width-table.ts from pi's own width function: do not edit. Run `npm run width` to refresh it (the extension corrects its emoji blocks from the running pi when it loads).
 // The code points pi draws two cells wide, as inclusive [first, last] pairs in ascending order.
 export const WIDE: readonly number[] = [
 	0x1100, 0x115e, 0x231a, 0x231b, 0x2329, 0x232a, 0x23e9, 0x23ec,
@@ -27,10 +27,9 @@ export const WIDE: readonly number[] = [
 	0x1f3e0, 0x1f3f0, 0x1f3f4, 0x1f3f4, 0x1f3f8, 0x1f43e, 0x1f440, 0x1f440,
 	0x1f442, 0x1f4fc, 0x1f4ff, 0x1f53d, 0x1f54b, 0x1f54e, 0x1f550, 0x1f567,
 	0x1f57a, 0x1f57a, 0x1f595, 0x1f596, 0x1f5a4, 0x1f5a4, 0x1f5fb, 0x1f64f,
-	0x1f680, 0x1f6c5, 0x1f6cc, 0x1f6cc, 0x1f6d0, 0x1f6d2, 0x1f6d5, 0x1f6d8,
+	0x1f680, 0x1f6c5, 0x1f6cc, 0x1f6cc, 0x1f6d0, 0x1f6d2, 0x1f6d5, 0x1f6d9,
 	0x1f6dc, 0x1f6df, 0x1f6eb, 0x1f6ec, 0x1f6f4, 0x1f6fc, 0x1f7e0, 0x1f7eb,
 	0x1f7f0, 0x1f7f0, 0x1f90c, 0x1f93a, 0x1f93c, 0x1f945, 0x1f947, 0x1f9ff,
-	0x1fa70, 0x1fa7c, 0x1fa80, 0x1fa8a, 0x1fa8e, 0x1fac6, 0x1fac8, 0x1fac8,
-	0x1facd, 0x1fadc, 0x1fadf, 0x1faea, 0x1faef, 0x1faf8, 0x20000, 0x2fffd,
-	0x30000, 0x3fffd,
+	0x1fa70, 0x1fa7c, 0x1fa80, 0x1fac6, 0x1fac8, 0x1fac8, 0x1facc, 0x1fadd,
+	0x1fadf, 0x1faeb, 0x1faef, 0x1fafa, 0x20000, 0x2fffd, 0x30000, 0x3fffd,
 ];

package/src/diagram/widefix.ts

@@ -0,0 +1,56 @@
+// Keep the committed table of two-cell characters (wide.ts), but let the running pi decide the blocks where Unicode keeps adding
+// emoji. Pure: the probe is any function from a code point to its width in columns, so nothing here needs pi.
+
+/**
+ * Where new two-cell characters appear with each Unicode release: the arrows, symbols and dingbats that got an emoji form
+ * (U+2190-2BFF) and the emoji blocks (U+1F000-1FFFF). Everything else the table covers (CJK, Hangul, fullwidth forms) is stable.
+ * About 6,800 code points: cheap to ask pi about when the extension loads.
+ */
+export const PROBE_SPANS: ReadonlyArray<readonly [number, number]> = [
+	[0x2190, 0x2bff],
+	[0x1f000, 0x1ffff],
+];
+
+/**
+ * A table (flat [first, last] pairs, ascending, merged) that is `base` outside `spans` and what `probe` says inside them.
+ * `probe` is only ever asked about code points inside the spans.
+ */
+export function healWide(base: readonly number[], probe: (cp: number) => number, spans: ReadonlyArray<readonly [number, number]> = PROBE_SPANS): number[] {
+	// the base ranges with the spans cut out of them
+	const keep: Array<[number, number]> = [];
+	for (let i = 0; i < base.length; i += 2) {
+		let pieces: Array<[number, number]> = [[base[i], base[i + 1]]];
+		for (const [s, e] of spans) {
+			const next: Array<[number, number]> = [];
+			for (const [a, b] of pieces) {
+				if (b < s || a > e) next.push([a, b]);
+				else {
+					if (a < s) next.push([a, s - 1]);
+					if (b > e) next.push([e + 1, b]);
+				}
+			}
+			pieces = next;
+		}
+		keep.push(...pieces);
+	}
+	// what the probe says about the spans
+	const asked: Array<[number, number]> = [];
+	for (const [s, e] of spans) {
+		let start = -1;
+		for (let cp = s; cp <= e; cp++) {
+			const wide = probe(cp) === 2;
+			if (wide && start < 0) start = cp;
+			else if (!wide && start >= 0) {
+				asked.push([start, cp - 1]);
+				start = -1;
+			}
+		}
+		if (start >= 0) asked.push([start, e]);
+	}
+	const out: number[] = [];
+	for (const [a, b] of [...keep, ...asked].sort((x, y) => x[0] - y[0])) {
+		if (out.length && a <= out[out.length - 1] + 1) out[out.length - 1] = Math.max(out[out.length - 1], b);
+		else out.push(a, b);
+	}
+	return out;
+}

package/src/lang/docs.ts

@@ -183,19 +183,51 @@ b = Button("Restart vllm", @ToAssistant("Restart the vllm service on dgx-spark-1
 	},
 	Choice: {
 		group: "Interactive",
-		summary: "A question with clickable options for you to answer.",
-		shots: [{ file: "choice", caption: "Options on one line when they fit, stacked when they do not" }],
-		use: ["Asking a clarifying question instead of guessing."],
+		summary: "A question with a short list of options for you to answer. A click only stages the answer: one **Send answers** button under the widget sends every answer of the widget together, as one message. An option can allow several answers, and every question has an **Other...** row where you type your own.",
+		shots: [
+			{ file: "choice", caption: "One question with a hint: the tag says Choose one, the options have round indicators, Other... is the last row, and the bar counts" },
+			{ file: "choice-card", caption: "Three questions in one Card, two answered. The second allows several answers (square indicators); the third has no Other row" },
+			{ file: "choice-other", caption: "Other... opens pi's editor. The text you save shows under the row, and selects it" },
+			{ file: "choice-sent", caption: "After Send answers every question is locked, the chosen rows stay marked, and the bar says so" },
+		],
+		use: [
+			"A clarifying question with a few known answers: which node, which environment, yes or no. Ask all of them in ONE widget, in a Card or in Tabs: you answer them together and send once.",
+			"A confirmation before something risky, under a Callout that explains the cost.",
+			"A question where several answers can be right (`multiple`), or where you may want to say something that is not listed (the Other row).",
+		],
+		avoid: "a command that should run as written. Use a Button with `@ToAssistant`, which sends exactly the text you give it on one click.",
 		args: {
-			"Choice.question": "The question.",
-			"Choice.options": "Two to six short answers.",
-			"Choice.hint": "A line of explanation under the question.",
+			"Choice.question": "Shown in bold above the options. It is also the first half of the answer sent back. It must have text.",
+			"Choice.options": "One row per entry, each with an indicator: a round radio for a single question, a square checkbox for `multiple`. Two to six, each at most 120 characters. A long option wraps under its indicator, so you can read everything that is sent. An empty option is an error.",
+			"Choice.hint": "A muted line between the tag and the options. The tag already says `Choose one` or `Choose all that apply`, so do not repeat that here.",
+			"Choice.multiple": "`true`: options toggle independently and several can be answered. Default `false`: one answer, and picking another option moves the pick.",
+			"Choice.other": "Default `true`: a last row, `Other...`, where you type your own answer. `false` hides it. Write `null` for every skipped argument before it: `Choice(\"Clear the cache?\", [\"Yes\", \"No\"], null, null, false)`.",
 		},
-		example: `root = Stack([q])
-q = Choice("Which model should serve chat?", ["qwen3-32b", "llama-3.3-70b"], "Pick one")`,
-		interaction: ["Click an option, or move with the arrow keys and press Enter. The pick is filled (●) and `<question> — <option>` is sent as your next message."],
-		tips: ["You can change the pick; each click sends a new message."],
-		related: ["Button"],
+		example: `root = Stack([plan])
+plan = Card([q1, q2, q3], "Before I restart")
+q1 = Choice("Which node should I restart first?", ["web-1", "web-2"])
+q2 = Choice("Which checks should I run?", ["Disk", "Memory", "Network"], null, true)
+q3 = Choice("Clear the cache on db?", ["Yes", "No"], null, null, false)`,
+		exampleNote: "Three questions in one widget: one bar counts and sends them. `null` skips `hint`, and the third question turns the Other row off.\n\nAnswered as in the last screenshot above (web-2, Disk, and the words `also look at the logs`, with the third question skipped), the agent receives this one message:\n\n```text\nAnswers to the questions in widget `Before I restart` (3):\n\n1. Which node should I restart first?\n   web-2\n2. Which checks should I run?\n   Disk; other: also look at the logs\n3. Clear the cache on db?\n   (no answer)\n```\n\nThe widget is named, in backticks, by the first title or heading in it. The words you type in Other are sent as typed. The question and option words come from the agent, so before they go out control and invisible characters are removed, whitespace is collapsed, and anything that could attach a file or run a command is defused: `@file:x` becomes `(at)file:x`, and a single question that starts like a command, such as `/new session?`, uses the numbered list.",
+		interaction: [
+			"Click an option, or move with the arrow keys and press Enter. Nothing is sent. In a single question a second click on the chosen option clears it and another option moves the pick; in a `multiple` question each option toggles on its own.",
+			"Click Other... (or Enter on it). pi's own editor opens with the question as its title: Enter saves, Shift+Enter adds a line, Esc leaves the answer as it was. Saved text selects the row (a single question drops the option, a `multiple` one keeps its options); saving empty text unselects it. The text shows under the row, up to two lines (a line break shows as a ¶). A tab becomes a space, and a run of blank lines becomes one.",
+			"The bar under the widget reads `N of M answered`. It counts every question, also those on a tab you have not opened. **[ Send answers ]** is live once one question is answered; **[ Clear ]** drops every staged answer. Down from the last option reaches Send answers, never Clear.",
+			"Send answers sends one message and locks every question. The chosen rows stay marked and the bar says `Sent to the agent.` A locked widget cannot be answered again, and it gives the keyboard back to pi, so Enter sends your own message. The agent draws a new widget to ask again.",
+			"In notes mode the options, Other and the bar do nothing, like a Button.",
+		],
+		tips: [
+			"This changed from earlier versions: a click used to send `<question> — <option>` at once. Now nothing is sent until Send answers, and a Choice written for the old behaviour gets an Other row and the bar. Write `other: false` to keep a closed list.",
+			"The message for ONE single question answered with an option is still the line `<question> — <option>`, for example `Which node should I restart first? — web-2`. Anything else is a numbered list, with `(no answer)` for a question you skipped and `other: ...` for typed text (shown under the example).",
+			"Ask everything in one widget. A second widget has its own bar and sends its own message.",
+			"Write the question and options so `<question> — <option>` still reads as a sentence: \"Clear the cache on db? — Yes, clear it\" works; \"Are you sure? — OK\" does not say what was agreed.",
+			"`(no answer)` means skipped. Do not read it as a \"no\".",
+			"Options are plain text: no icons, links or per-option descriptions. Put detail in the hint or the question.",
+			"At most 12 questions per widget, 6 options each. A widget that was written for the old behaviour keeps working unless it breaks one of the new limits (a question over 200 characters, an option over 120, more than 12 questions), which is an error the agent is told about.",
+			"The answers live in memory with the widget. They are gone when the session ends or pi restarts, and a widget redrawn from a resumed session opens unanswered, with Send answers live again even if it was sent before.",
+			"The bar says `Sending to the agent…` until pi reports that it took the message, then `Sent to the agent.` If pi cannot take it (no model selected, no credentials), pi shows its own error, and after 3 seconds the widget is given back with your answers and Send answers works again.",
+		],
+		related: ["Button", "Callout", "Card", "Tabs"],
 	},
 	Faq: {
 		group: "Interactive",

package/src/lang/library.ts

@@ -81,6 +81,15 @@ export const LIMITS = {
 	steps: 100,
 	/** pictures in one widget: Image components and `![alt](path)` lines together. Each can be megabytes */
 	images: 12,
+	/** Choice questions in one widget: they share one Send answers bar and one message */
+	choices: 12,
+	/** options of one Choice (the lower bound is 2) */
+	choiceOptions: 6,
+	/** characters in a Choice question and in one of its options (the message carries them as written) */
+	question: 200,
+	option: 120,
+	/** characters of the user's own Other answer */
+	other: 500,
 } as const;
 
 const S: T = "string";
@@ -113,7 +122,7 @@ export const SPECS: CompSpec[] = [
 	{ name: "GeoMap", params: [p("points", { arr: { comp: ["GeoPoint"] }, min: 1, max: LIMITS.geoPoints }), p("links", { arr: { arr: S }, max: LIMITS.links }, true), p("title", S, true), p("tooltips", tips, true)], desc: "Offline world map (coarse coastlines) zoomed to fit the pins. links are [labelA, labelB] pairs drawn dashed." },
 	{ name: "FaqItem", helper: true, params: [p("question", S), p("answer", S, false, LIMITS.answer)], desc: "One Q&A entry (answer is markdown). Only valid inside Faq." },
 	{ name: "Faq", params: [p("items", { arr: { comp: ["FaqItem"] }, min: 1, max: LIMITS.faq }), p("firstOpen", "boolean", true)], desc: "Collapsible Q&A list." },
-	{ name: "Choice", params: [p("question", S), p("options", { arr: S, min: 2, max: 6 }), p("hint", S, true)], desc: 'A question with clickable options for the USER. Clicking sends "<question> — <option>" to the assistant.' },
+	{ name: "Choice", params: [p("question", S, false, LIMITS.question), p("options", { arr: S, min: 2, max: LIMITS.choiceOptions }), p("hint", S, true), p("multiple", "boolean", true), p("other", "boolean", true)], desc: "A question for the USER. Answers are staged and sent together as ONE message when the user presses Send answers. multiple (4th argument) true allows several options. other (5th argument, default true) adds an Other... row where the user types their own answer; false hides it." },
 	{ name: "Series", helper: true, params: [p("category", S), p("values", { arr: "number", max: LIMITS.points })], desc: "One data series: name and numbers parallel to the chart labels." },
 	{ name: "LineChart", params: [p("labels", { arr: S, max: LIMITS.points }), p("series", { arr: { comp: ["Series"] }, min: 1, max: LIMITS.series }), p("variant", e("linear", "natural", "step"), true), p("xLabel", S, true), p("yLabel", S, true), p("height", "number", true), p("tooltips", tips, true)], desc: "Line chart over categories, several series. variant natural (smooth, default), linear or step." },
 	{ name: "AreaChart", params: [p("labels", { arr: S, max: LIMITS.points }), p("series", { arr: { comp: ["Series"] }, min: 1, max: LIMITS.series }), p("variant", e("linear", "natural", "step"), true), p("xLabel", S, true), p("yLabel", S, true), p("height", "number", true), p("tooltips", tips, true)], desc: "Filled STACKED area chart: series stack into a growing total." },
@@ -407,6 +416,7 @@ function compileProgram(source: string): Compiled {
 	let depth = 0;
 	let built = 0;
 	let pictures = 0;
+	let choices = 0;
 	const build = (call: Extract<Expr, { k: "call" }>): El | undefined => {
 		const spec = LIB.get(call.name);
 		if (!spec) {
@@ -436,6 +446,14 @@ function compileProgram(source: string): Compiled {
 				if (!param.opt) errors.push(`${where(call.line)}${spec.name} is missing the required argument "${param.name}" (position ${i + 1})`);
 				return;
 			}
+			if (spec.name === "Choice" && param.name === "hint" && d && d.k === "bool") {
+				errors.push(`${where(d.line)}Choice argument "hint" expects a string but got ${d.v}. hint is the third argument: write null for a skipped optional argument, e.g. Choice("Which checks?", ["Disk", "Memory"], null, true)`);
+				return;
+			}
+			if (spec.name === "Choice" && (param.name === "multiple" || param.name === "other") && d && d.k !== "bool") {
+				errors.push(`${where(d.line)}Choice argument "${param.name}" expects true or false but got ${label(d)}. It is the ${i + 1}th argument: write null for each skipped optional argument, e.g. Choice("Which checks?", ["Disk", "Memory"], null, true)`.replace("1th", "1st").replace("2th", "2nd").replace("3th", "3rd"));
+				return;
+			}
 			props[param.name] = resolve(arg, param.t, `${spec.name} argument "${param.name}"`, param.max);
 		});
 		const el: El = { type: spec.name, props, line: call.line, ...(nameOf.has(call) ? { name: nameOf.get(call) } : {}) };
@@ -515,6 +533,17 @@ function compileProgram(source: string): Compiled {
 				for (const r of (pr.relations ?? []) as El[]) for (const k of ["from", "to"]) if (r.props[k] && !names.includes(r.props[k])) err(`relation ${k} "${r.props[k]}" is not an Entity name. Names: ${names.join(", ")}`);
 				break;
 			}
+			case "Choice": {
+				if (++choices === LIMITS.choices + 1) err(`this is Choice ${LIMITS.choices + 1}: a widget has at most ${LIMITS.choices} Choices. Ask fewer questions, or split them into several widgets`);
+				// empty once control, invisible and blank characters are gone: it would draw as nothing and be sent as nothing
+				const blank = (v: unknown) => String(v ?? "").replace(/[\p{Cc}\p{Cf}\s]/gu, "") === "";
+				if (blank(pr.question)) err("the question is empty. Write the question the user answers");
+				((pr.options ?? []) as string[]).forEach((o, i) => {
+					if (blank(o)) err(`option ${i + 1} is empty. Give every option some text`);
+					else if (o.length > LIMITS.option) err(`option ${i + 1} is ${o.length} characters; the limit is ${LIMITS.option}. Shorten it`);
+				});
+				break;
+			}
 			case "CodeBlock":
 				if (typeof pr.code === "string" && pr.code.split("\n").length > LIMITS.codeLines) err(`the code has more than ${LIMITS.codeLines} lines; show the part that matters`);
 				break;
@@ -590,11 +619,11 @@ An element that has a tooltip shows a small ◆ on it. Hovering shows the hint;
 hint is the short text shown on hover (140 characters). detail (800), code (40 lines) and link (http/https) open in a panel when the element is clicked.
 
 ## Limits
-A widget over a limit is not drawn, and the error says which. Source ${LIMITS.source / 1000} KB, ${LIMITS.elements} components, ${LIMITS.depth} levels of nesting, ${LIMITS.children} children per Stack or Card, ${LIMITS.tabs} tabs. Text ${LIMITS.text} characters, Markdown ${LIMITS.markdown}, any other string ${LIMITS.string}, a table cell ${LIMITS.cell}. Table ${LIMITS.tableRows} rows by ${LIMITS.tableCols} columns. BarChart ${LIMITS.bars} bars. LineChart and AreaChart ${LIMITS.points} points and ${LIMITS.series} series. RadarChart ${LIMITS.axes} axes. Dag ${LIMITS.dagNodes} nodes and ${LIMITS.dagEdges} edges. Erd ${LIMITS.entities} entities, ${LIMITS.fields} fields each, ${LIMITS.relations} relations. InfraMap ${LIMITS.infraNodes} nodes and ${LIMITS.infraLinks} links. GeoMap ${LIMITS.geoPoints} points and ${LIMITS.links} links. Faq ${LIMITS.faq} items. Pictures ${LIMITS.images} (Image components and markdown picture lines together). CodeBlock ${LIMITS.codeLines} lines. A SequenceDiagram ${LIMITS.steps} steps. Prefer far less: the reader sees one terminal screen.
+A widget over a limit is not drawn, and the error says which. Source ${LIMITS.source / 1000} KB, ${LIMITS.elements} components, ${LIMITS.depth} levels of nesting, ${LIMITS.children} children per Stack or Card, ${LIMITS.tabs} tabs. Text ${LIMITS.text} characters, Markdown ${LIMITS.markdown}, any other string ${LIMITS.string}, a table cell ${LIMITS.cell}. Table ${LIMITS.tableRows} rows by ${LIMITS.tableCols} columns. BarChart ${LIMITS.bars} bars. LineChart and AreaChart ${LIMITS.points} points and ${LIMITS.series} series. RadarChart ${LIMITS.axes} axes. Dag ${LIMITS.dagNodes} nodes and ${LIMITS.dagEdges} edges. Erd ${LIMITS.entities} entities, ${LIMITS.fields} fields each, ${LIMITS.relations} relations. InfraMap ${LIMITS.infraNodes} nodes and ${LIMITS.infraLinks} links. GeoMap ${LIMITS.geoPoints} points and ${LIMITS.links} links. Faq ${LIMITS.faq} items. Pictures ${LIMITS.images} (Image components and markdown picture lines together). CodeBlock ${LIMITS.codeLines} lines. Choices ${LIMITS.choices} per widget, a question ${LIMITS.question} characters, an option ${LIMITS.option}, ${LIMITS.choiceOptions} options, the user's Other answer ${LIMITS.other}. A SequenceDiagram ${LIMITS.steps} steps. Prefer far less: the reader sees one terminal screen.
 
 ## Actions
 Button("Restart", @ToAssistant("Restart the vllm service")) sends that text to the assistant as the user's next turn (500 characters at most). A Button without an action sends its label. Several steps: Action([@ToAssistant("...")]). Do not use @OpenUrl: put links in a Text.
-Choice(question, options) asks the user; a click sends "<question> — <option>".
+Choice(question, options, hint, multiple, other) asks the user. A click only stages an answer; the user's Send answers button sends every Choice of the widget together as ONE message (one single question gives "<question> — <option>"; otherwise a numbered list, "(no answer)" for a skipped question, "other: ..." for typed text). Ask all your questions in one widget, in a Card or Tabs. multiple: true allows several options; other (default true) adds an Other... row for the user's own answer. Write null for a skipped optional argument: Choice("Which checks?", ["Disk", "Memory"], null, true).
 
 ## Choosing components
 Metric for a number, Table for comparisons, BarChart for one series of categories, LineChart for trends with several series, AreaChart for stacked volume, PieChart for parts of a whole (8 slices at most), RadarChart for comparing entities across metrics, Dag for task graphs and pipelines, Erd for database schemas, InfraMap for how systems connect, SequenceDiagram for call flows, GeoMap for places, Tabs/Card to organise. Series values must have the same length as labels. All data is literal: no queries, no variables. Image shows a real picture in terminals that support it (Kitty, Ghostty, WezTerm, Warp, herdr): src is an absolute file path (png, jpg, gif, webp) or a data: URI.

package/src/lang/samples.ts

@@ -64,11 +64,20 @@ note = Callout("spark-3 was rebooted on 21 Oct.", "info")`,
 b = Stack([b1, b2], "row")
 b1 = Button("Restart vllm", @ToAssistant("Restart the vllm service on dgx-spark-1"))
 b2 = Button("Drain node")
-ch = Choice("Which model should serve chat?", ["qwen3-32b", "llama-3.3-70b", "gemma-3-27b"], "Pick one; it is sent to the assistant")
+ch = Choice("Which model should serve chat?", ["qwen3-32b", "llama-3.3-70b", "gemma-3-27b"], "I will use it for the next request")
 fq = Faq([q1, q2, q3], true)
 q1 = FaqItem("What does draining do?", "It stops **new** requests and lets running ones finish.\\n\\n1. queue pauses\\n2. in-flight requests complete\\n3. node is marked *drained*")
 q2 = FaqItem("How do I undo it?", "Run \`uncordon\` on the node: it rejoins the pool immediately.")
 q3 = FaqItem("Why did spark-3 reboot?", "A driver update needed it. See the [runbook](https://example.com/runbook).")`,
+	},
+	{
+		key: "choice-card",
+		title: "Choice: several questions, one Send",
+		source: `root = Stack([plan])
+plan = Card([q1, q2, q3], "Before I restart")
+q1 = Choice("Which node should I restart first?", ["web-1", "web-2"])
+q2 = Choice("Which checks should I run?", ["Disk", "Memory", "Network"], null, true)
+q3 = Choice("Clear the cache on db?", ["Yes", "No"], null, null, false)`,
 	},
 	{
 		key: "markdown",

package/src/pi/extension.ts

@@ -8,7 +8,8 @@ import { markdownImages } from "../lang/md.ts";
 import { LANG_SAMPLES } from "../lang/samples.ts";
 import { getCapabilities } from "@earendil-works/pi-tui";
 import { loadImage } from "./images.ts";
-import { active, armNewest, entryOf, handleKey, hooks, OpenUIWidget, resetAll, toggleNotesNewest } from "./widget.ts";
+import { syncWidths } from "./widths.ts";
+import { active, armNewest, confirmDelivery, entryOf, handleKey, hooks, OpenUIWidget, resetAll, toggleNotesNewest } from "./widget.ts";
 
 const compiled = new Map<string, Compiled>();
 let compiledChars = 0;
@@ -57,6 +58,7 @@ export function checkImages(root: El | undefined): string[] {
 }
 
 export default function (pi: ExtensionAPI) {
+	syncWidths(); // our grid must agree with this pi about which characters take two cells
 	hooks.sendLive = (text) => pi.sendUserMessage(text, { deliverAs: "followUp" });
 	hooks.sendEcho = (text) => pi.sendMessage({ customType: "openui-click", content: `[widget click → assistant] ${text}`, display: true });
 
@@ -64,14 +66,14 @@ export default function (pi: ExtensionAPI) {
 		name: "render_widget",
 		label: "render_widget",
 		description:
-			"Draw an interactive widget in the terminal: dashboards, tables, charts (bar, line, area, pie, radar), diagrams (DAG, ER, infrastructure map, sequence), maps, tabs, buttons and choices. Pass OpenUI Lang as `source`. Call with reference=true once to get the component signatures. Clicking a Button or Choice sends its text back to you as the user's next message.",
+			"Draw an interactive widget in the terminal: dashboards, tables, charts (bar, line, area, pie, radar), diagrams (DAG, ER, infrastructure map, sequence), maps, tabs, buttons and choices. Pass OpenUI Lang as `source`. Call with reference=true once to get the component signatures. A Button click sends its text back to you as the user's next message. Choice answers are staged and arrive together as one message when the user presses Send answers.",
 		promptSnippet: "render_widget: draw an interactive terminal widget (dashboards, charts, diagrams) from OpenUI Lang",
 		promptGuidelines: [
 			"Before the first render_widget call in a session, call render_widget with reference=true to read the component signatures. Never guess a signature.",
 			"After render_widget succeeds, reply with at most one short sentence. Do not repeat the widget's data in prose.",
 			"If render_widget returns errors, fix exactly the errors listed and call it again with the full corrected source.",
 			"Use plain text, not a widget, for a single value or a short answer. One widget per reply: use Tabs or Card to organise sections.",
-			"A click on a widget Button or Choice arrives as your next user message: act on it, then render a NEW widget if needed.",
+			"A Button click arrives as your next user message: act on it, then render a NEW widget if needed. Choice answers arrive together as ONE message after the user presses Send answers, so ask all your questions in one widget (a Card or Tabs), then act on the answers.",
 		],
 		parameters: Type.Object({
 			source: Type.Optional(Type.String({ description: "OpenUI Lang source: root = Stack([...]) first, one statement per line" })),
@@ -121,7 +123,7 @@ export default function (pi: ExtensionAPI) {
 	};
 
 	pi.registerCommand("openui-gallery", {
-		description: "Draw one example per OpenUI component (or a key prefix: dashboard, table, tabs, line, pie, radar, image, dag, erd, infra, sequence, geo ...). Clicks echo locally.",
+		description: "Draw one example per OpenUI component (or a key prefix: dashboard, table, tabs, choice, line, pie, radar, image, dag, erd, infra, sequence, geo ...). Clicks echo locally.",
 		handler: async (args: string, ctx: any) => {
 			const which = args.trim() || "all";
 			const picked = LANG_SAMPLES.filter((s) => which === "all" || s.key.startsWith(which));
@@ -157,10 +159,25 @@ export default function (pi: ExtensionAPI) {
 		},
 	});
 
+	// pi reports every user message it takes, whoever sent it: that is how a widget learns its answers were delivered
+	pi.on("message_start", async (event: any) => {
+		const m = event?.message;
+		if (m?.role !== "user") return;
+		const words = typeof m.content === "string" ? m.content : Array.isArray(m.content) ? m.content.filter((p: any) => p?.type === "text").map((p: any) => p.text).join("") : "";
+		confirmDelivery(words);
+	});
+
 	let unsub: (() => void) | undefined;
 	pi.on("session_start", async (_e: any, ctx: any) => {
 		if (!ctx.hasUI) return;
 		unsub?.();
+		hooks.queued = () => {
+			try {
+				return !!ctx.hasPendingMessages();
+			} catch {
+				return false; // a context from a replaced session
+			}
+		};
 		unsub = ctx.ui.onTerminalInput((data: string) => (handleKey(data) ? { consume: true } : undefined));
 		// the note editor is pi's own multi-line editor: Enter saves, Shift+Enter adds a line, Esc cancels
 		hooks.prompt = (title: string, initial: string) => ctx.ui.editor(title, initial);

package/src/pi/widget.ts

@@ -2,14 +2,15 @@
 import { Key, matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
 import { drawBubble } from "../blocks/bubble.ts";
 import { BADGE } from "../blocks/core.ts";
-import { activate, describe, nextTarget, reveal, targetAt, type Env, type NavKey } from "../blocks/interact.ts";
+import { activate, describe, nextTarget, readingOrder, reveal, targetAt, type Env, type NavKey } from "../blocks/interact.ts";
+import { otherLength, setOther } from "../blocks/choice.ts";
 import { buildMessage, cleanNote, NOTE_LIMITS, widgetTitle } from "../blocks/notes.ts";
 import { renderTree } from "../blocks/render.ts";
 import { newState, type Block, type Note, type Target, type WState } from "../blocks/types.ts";
 import { cell, padRow, textCells } from "../blocks/util.ts";
 import { rowsToLines, textWidth, truncateText, type Cell } from "../diagram/canvas.ts";
 import { createPalette } from "../diagram/palette.ts";
-import type { El } from "../lang/library.ts";
+import { LIMITS, type El } from "../lang/library.ts";
 import { imageService } from "./images.ts";
 
 const GUTTER = 2;
@@ -68,6 +69,8 @@ interface Entry {
 	warnings: string[];
 	notice: string | null;
 	noticeTimer: ReturnType<typeof setTimeout> | null;
+	/** answers handed to pi, waiting for its word that it took them (see watchDelivery) */
+	pending: { text: string; timer: ReturnType<typeof setTimeout> | null } | null;
 	/** the finished lines and what they were drawn from: pi asks for them on every frame, so an unchanged widget answers from here */
 	lines: string[] | null;
 	lineKey: string;
@@ -84,6 +87,10 @@ export const hooks = {
 	requestRender: () => {},
 	sendLive: (_text: string) => {},
 	sendEcho: (_text: string) => {},
+	/** Is pi holding messages for later (the agent is busy and a follow-up is queued)? Then a message it has not shown yet is not lost. */
+	queued: (): boolean => false,
+	/** How long to wait for pi to say it took the answers before giving the widget back. */
+	deliveryMs: 3000,
 	/** Ask the user for the text of a note. Resolves undefined when they cancel. */
 	prompt: async (_title: string, _initial: string): Promise<string | undefined> => undefined,
 	/** Put text in pi's message box without sending it. */
@@ -108,7 +115,7 @@ imageService.onLate = () => {
 function getEntry(id: string, root: El, mode: Mode): Entry {
 	let e = entries.get(id);
 	if (!e) {
-		e = { root, state: newState(), mode, block: null, key: "", version: 0, warnings: [], notice: null, noticeTimer: null, lines: null, lineKey: "" };
+		e = { root, state: newState(), mode, block: null, key: "", version: 0, warnings: [], notice: null, noticeTimer: null, pending: null, lines: null, lineKey: "" };
 		entries.set(id, e);
 		newestId.id = id;
 	}
@@ -117,7 +124,11 @@ function getEntry(id: string, root: El, mode: Mode): Entry {
 
 function envFor(id: string, e: Entry): Env {
 	return {
-		send: (t) => (e.mode === "live" ? hooks.sendLive(t) : hooks.sendEcho(t)),
+		send: (t, o) => {
+			if (e.mode !== "live") return hooks.sendEcho(t); // a local echo is delivered when it is shown
+			if (o?.confirm) watchDelivery(id, e, t); // before sending, so a pi that confirms at once finds it waiting
+			hooks.sendLive(t);
+		},
 		copy: (t) => hooks.copy(t),
 		note: (t) => setNotice(id, t),
 	};
@@ -152,6 +163,62 @@ function afterActivate(id: string, e: Entry, t: Target, layoutChanged: boolean)
 	void id;
 }
 
+// ---------- delivery ----------
+
+/**
+ * pi.sendUserMessage returns nothing and swallows its failures (no model selected, no credentials, a compaction in progress), so
+ * "sent" cannot be assumed: a widget that said Sent and locked would leave the user with no way to send again once they have fixed
+ * what pi complained about. The answers are marked as sending until pi reports the user message (message_start, see
+ * confirmDelivery). If it does not within hooks.deliveryMs, and pi is not holding a message for later, the widget is given back
+ * with its answers and says why.
+ */
+function watchDelivery(id: string, e: Entry, text: string): void {
+	if (e.pending?.timer) clearTimeout(e.pending.timer);
+	e.state.sending = true;
+	const pending: NonNullable<Entry["pending"]> = { text, timer: null };
+	e.pending = pending;
+	const check = () => {
+		if (e.pending !== pending) return;
+		let held = false;
+		try {
+			held = hooks.queued();
+		} catch {
+			/* pi's context went stale: treat it as not held */
+		}
+		if (held) return void (pending.timer = later(check)); // the agent is busy: pi has it queued and will show it after the turn
+		e.pending = null;
+		e.state.sent = false;
+		e.state.sending = false;
+		e.version++;
+		setNotice(id, "pi did not take the answers. Fix what it says above, then Send again.");
+		hooks.requestRender();
+	};
+	pending.timer = later(check);
+}
+const later = (f: () => void) => {
+	const t = setTimeout(f, Math.max(1, hooks.deliveryMs));
+	if (typeof (t as any).unref === "function") (t as any).unref();
+	return t;
+};
+
+/**
+ * pi reported a user message with this text: the oldest widget waiting for it has been delivered. One message confirms one widget,
+ * so two widgets that sent the same words are each confirmed by their own message.
+ */
+export function confirmDelivery(text: string): boolean {
+	const want = text.trim();
+	for (const e of entries.values()) {
+		if (!e.pending || e.pending.text.trim() !== want) continue;
+		if (e.pending.timer) clearTimeout(e.pending.timer);
+		e.pending = null;
+		e.state.sending = false;
+		e.version++;
+		hooks.requestRender();
+		return true;
+	}
+	return false;
+}
+
 // ---------- notes ----------
 
 const chipLabel = (s: WState) => (s.noteMode ? "[ notes: on ]" : s.notes.length ? `[ notes ${s.notes.length} ]` : "[ notes ]");
@@ -228,6 +295,29 @@ function clearNotes(id: string, e: Entry) {
 	hooks.requestRender();
 }
 
+// ---------- choices ----------
+
+/**
+ * The Other row of a Choice. The user types their own answer in pi's editor (the one Notes uses), never inside the widget: an
+ * armed widget must not keep letters. Saved text selects Other, empty text unselects it, Esc changes nothing.
+ */
+async function editOther(id: string, e: Entry, t: Target): Promise<void> {
+	const x = t.choice;
+	if (!x || dialog.open || e.state.sent) return;
+	dialog.open = true;
+	let text: string | undefined;
+	try {
+		text = await hooks.prompt(`Your own answer: ${truncateText(x.of.question, 60)}`, e.state.answers[x.of.key]?.text ?? "");
+	} finally {
+		dialog.open = false;
+	}
+	if (text === undefined || e.state.sent) return; // cancelled (the sent check is defence: nothing can send while the editor owns the keys)
+	if (otherLength(text) > LIMITS.other) setNotice(id, `Answer shortened to ${LIMITS.other} characters.`);
+	e.state.answers = setOther(e.state.answers, x.of, text);
+	e.version++;
+	hooks.requestRender();
+}
+
 /** One place for what a click or Enter does, so the mouse and the keyboard cannot drift apart. */
 function perform(id: string, e: Entry, t: Target, shift = false): void {
 	switch (t.kind) {
@@ -249,9 +339,26 @@ function perform(id: string, e: Entry, t: Target, shift = false): void {
 		case "noteclear":
 			clearNotes(id, e);
 			return;
+		case "choice":
+			if (t.choice?.index === "other") {
+				void editOther(id, e, t).catch(() => {
+					// the editor could not open (pi's context went stale): leave the answers as they were
+					setNotice(id, "The editor could not be opened.");
+					hooks.requestRender();
+				});
+				return;
+			}
+			break;
 	}
 	const changed = activate(t, e.state, envFor(id, e));
 	afterActivate(id, e, t, changed);
+	// The button that was pressed is gone from the next picture. Focus must not be left pointing at it: Enter would find nothing
+	// and fall through to the first element of the widget, and that can be a Button that sends a message.
+	if (t.kind === "send" && e.state.sent) {
+		// a locked widget has nothing left to hold the keyboard for: Enter is pi's again, to send the user's own message
+		e.state.focus = null;
+		if (active.id === id) active.id = null;
+	} else if (t.kind === "clear" && e.block) e.state.focus = readingOrder(e.block).find((x) => x.kind === "choice")?.id ?? null;
 }
 
 // ---------- the component ----------
@@ -500,7 +607,15 @@ function keyInner(data: string): boolean {
 		return true;
 	}
 	if (matchesKey(data, Key.enter) || matchesKey(data, Key.shift("enter"))) {
-		const t = block.targets.find((x) => x.id === e.state.focus) ?? nextTarget(block, null, "next", notes);
+		const focused = e.state.focus ? block.targets.find((x) => x.id === e.state.focus) : undefined;
+		if (e.state.focus && !focused) {
+			// the focused element is gone (a button removes itself when it is pressed): never press another one in its place
+			e.state.focus = null;
+			e.state.hover = null;
+			hooks.requestRender();
+			return true;
+		}
+		const t = focused ?? nextTarget(block, null, "next", notes);
 		if (!t) return false;
 		e.state.focus = t.id;
 		e.state.hover = null;
@@ -553,7 +668,10 @@ export function toggleNotesNewest(): boolean {
 
 /** Forget every widget's state (notes, focus, layouts). Called when a session ends: pi processes live for days. */
 export function resetAll() {
-	for (const e of entries.values()) if (e.noticeTimer) clearTimeout(e.noticeTimer);
+	for (const e of entries.values()) {
+		if (e.noticeTimer) clearTimeout(e.noticeTimer);
+		if (e.pending?.timer) clearTimeout(e.pending.timer);
+	}
 	entries.clear();
 	imageService.reset();
 	active.id = null;

package/src/pi/widths.ts

@@ -0,0 +1,16 @@
+// Make our idea of which characters are two cells wide agree with the pi that is running, not only with the pi the committed table
+// (src/diagram/wide.ts) was generated from. Unicode adds emoji with every release, and a character we count as one cell that pi
+// draws as two slides the rest of its row and pushes the right border out of line.
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { setWide } from "../diagram/canvas.ts";
+import { WIDE } from "../diagram/wide.ts";
+import { healWide } from "../diagram/widefix.ts";
+
+/** Ask pi about the blocks where new wide characters appear (see PROBE_SPANS) and use its answers. Never throws: on a failure the committed table stays. */
+export function syncWidths(): void {
+	try {
+		setWide(healWide(WIDE, (cp) => visibleWidth(String.fromCodePoint(cp))));
+	} catch {
+		setWide(WIDE);
+	}
+}