pi-openui 0.1.2 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,102 @@
 
 ## Unreleased
 
+## 0.3.0 (2026-11-14)
+
+- **A cell that was cut to fit can be read whole.** A table with a few columns is squeezed to fit and a long cell ends in `…`; now
+  that cell is a target. Click it, or Tab to it and press Enter, and it opens under the table as plain text (line breaks kept,
+  nothing read as Markdown); click again or Esc closes it. A cut header too, and Markdown tables the same. If the agent gave that
+  cell a tooltip, the tooltip's panel opens with the whole text added. A table that scrolls cuts nothing, so it has none of these.
+- **`/openui-gallery wide`** draws eleven examples of things that do not fit a phone: a wide table with a pinned column, long cells,
+  code with a long line, tabs and tiles that wrap, a wide InfraMap, a Dag, an ERD, a sequence diagram, Markdown with a wide fence
+  and table, and a card with a long title. `docs/gallery-narrow.txt` is the same set as text at 60 columns, `docs/gallery.txt` is
+  current again (it was not regenerated for the pan bar), and `npm run gallery:files` writes both; a test fails when they are stale.
+  `node scripts/langgallery.ts <prefix>` now matches by prefix, as the command does.
+- **New screenshots** for the pan bar, pinned columns, cut and opened cells, code, tabs, tiles, an InfraMap, a Dag and a sequence
+  diagram at phone width, on the pages of the components they show.
+
+- **A table's columns can be pinned.** `Table(columns, rows, tooltips, pin)`: `pin` (new, 4th argument, optional) lists header names
+  that stay in place while a table wider than the pane scrolls, e.g. `Table(cols, rows, null, ["Host", "State"])`. The agent decides:
+  left out, nothing is pinned and the whole table scrolls. Pinned columns never take more than half the pane: they are tried in the
+  order listed and one that does not fit is skipped, never squeezed, so no text is ever out of reach. While the table scrolls they
+  are drawn first, in the order they have in the table; a table that fits is drawn as it was written. A name that is not a column is
+  a validation error that lists the columns. Every source written before this still compiles and draws as it did. The reference the
+  agent reads says when to pin (one or two narrow columns that identify each row) and when not to.
+- **Scrolling in two sizes.** The pan bar is now ` «  ‹ ████░░░ 1–53/87 ›  » `. `‹ ›` move a few cells (`scroll.step`, 8 by default),
+  `« »` a page (three quarters of the pane, to a column edge in a table). Left and Right on a focused bar are fine steps; Shift+arrow,
+  PageUp and PageDown are pages. Dragging the bar's thumb is still cell-precise. A bar too narrow for four arrows keeps the fine pair.
+- **`scroll.step` in the settings file**, with `PI_OPENUI_SCROLL_STEP` and `/openui-config scroll.step <1-40>`. `/openui-config reset`
+  now puts every setting back; `/openui-config <setting> reset` puts one back.
+- **The language cannot be broken by accident any more.** `test/compat/signatures.json` records every component and argument the
+  language has had; a test fails if an argument is inserted, moved, removed or made required, if a list or choice accepts less, or if a
+  limit goes down. New arguments go at the end and are optional. `AGENTS.md` says so.
+
+- **A pan bar says when a widget is wider than the pane.** Tables, Dag, Erd, InfraMap and SequenceDiagram that do not fit now show
+  `‹ ███░░░░░░ 1–53/87 ›` under them (only when something is cut off). Tap or click `‹` and `›`, click or drag the bar, swipe
+  sideways or use a horizontal wheel where your terminal app sends one, Shift+wheel, or Tab to the bar and press Left and Right
+  (also in notes mode). The plain wheel still scrolls the transcript. The old text hint `select a node to pan` is gone.
+- **Tables keep a minimum column width.** A column is squeezed only down to 12 characters (not three) before the table scrolls
+  sideways. Markdown tables are unchanged. Tables that fit are unchanged.
+- **A settings file.** `~/.pi/agent/openui.json` (`{ "table": { "minColumnWidth": 12 } }`, 4 to 40),
+  `PI_OPENUI_TABLE_MIN_COL`, and `/openui-config` to look at it, set it or `reset` it.
+- **Old sessions keep working.** A session stores a widget's source and draws it again, so everything above reaches widgets from
+  earlier versions at once. New widgets store the language version (`details.lang`). A source that no longer compiles under today's
+  strict rules is now read leniently (a value over a limit is cut, extra arguments are ignored, a statement nothing uses is
+  ignored) with one quiet line saying it was redrawn with changes, and one that still cannot be read shows the reason and the start
+  of its source instead of a blank. `AGENTS.md` now says language changes must be additive, and `test/compat/` keeps sources as older
+  versions wrote them so a change that breaks one fails the tests.
+- **Pan rather than cut.** On a narrow pane text used to be shortened with `…` wherever a layout could not give: now it scrolls or wraps
+  instead. Code scrolls inside its box, code fences and tables in Markdown scroll on their own, a row of buttons or metric tiles wraps
+  onto more rows, a tab strip wraps onto more rows, and a title that does not fit a box's border moves inside as a heading. A Dag,
+  InfraMap, Erd or SequenceDiagram that cannot fit scrolls with whole labels instead of 6-character ones (they shrink to 14
+  characters at the least), and a table that scrolls cuts no cell at all (before: at 20 characters). Anything still wider than the pane
+  gets the pan bar. `test/narrow-audit.test.ts` holds every component to it.
+- **A picture's frame says what it is.** If the terminal does not draw the picture (a phone app that reports no cell size, or a second
+  client attached to the same herdr), the frame is no longer an empty box: it names the picture and its size.
+- **`/openui-events`** records what a tap, a swipe or a flick sends to a widget, for five minutes, so what your terminal app really
+  does can be read instead of guessed. It never records what you type.
+- **The agent is told the terminal may be narrow.** The reference `render_widget` returns says a phone is about 60 columns, that
+  wide blocks scroll under a bar, and when to pin a Table's columns.
+- **A tap right after a sideways flick works.** pi-tui does not understand horizontal wheel events and leaves a press unreleased,
+  which made the next tap do nothing; the widget now recognises that tap itself.
+
+## 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,16 +61,54 @@ 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` |
+| The examples that do not fit a phone | `/openui-gallery wide`: a wide table, long cells, long code, tabs, tiles, diagrams. Try it in a narrow pane |
 | Draw a file | `/openui-file path/to/widget.oui` |
 | Use the keyboard without the mouse | `/openui-focus` |
+| Change a setting | `/openui-config`, for example `/openui-config table.minColumnWidth 14` |
+| See what a swipe or tap sends | `/openui-events on`, try it over a widget, `/openui-events show` |
 | 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.
 
+## Small screens
+
+On a narrow terminal (a phone over SSH or herdr, a small split) a widget that is wider than the pane shows a **pan bar**
+under it, `‹ ███░░░░░░ 1–53/87 ›`, and scrolls sideways. Tap the arrows or the bar, swipe or use a horizontal wheel where the
+terminal app sends one, Shift+wheel, or Tab to the bar and use the arrow keys. `‹ ›` move a few cells at a time, `« »` a page.
+A table scrolls whole; the agent can pin a column or two (never more than half the width) to keep them in view, and a table never
+squeezes a column below a minimum width before it scrolls. A cell that was cut to fit ends in `…`: tap it to read it whole.
+
+![A wide table scrolled sideways: Host and State stayed in place, the bar has fine and page arrows](https://raw.githubusercontent.com/newtonapple/pi-openui/main/docs/screenshots/pan-table-scrolled.png)
+
+![A cell cut to fit, tapped: its whole text under the table](https://raw.githubusercontent.com/newtonapple/pi-openui/main/docs/screenshots/table-read-full.png)
+
+`/openui-gallery wide` draws eleven examples of things that would be cut on a phone, so you can see what each does in your pane. Code scrolls inside its box, rows of buttons and tabs wrap, and
+diagrams scroll with whole labels: nothing is cut with `…` when it can be reached another way. Not sure what your app sends for a
+swipe? `/openui-events on`, try it over a widget, `/openui-events show`. Details are in
+[docs/interaction.md](https://github.com/newtonapple/pi-openui/blob/main/docs/interaction.md#wide-diagrams-and-tables).
+
+## Settings
+
+One file, `~/.pi/agent/openui.json` (or `$PI_CODING_AGENT_DIR/openui.json`):
+
+```json
+{ "table": { "minColumnWidth": 12 }, "scroll": { "step": 8 } }
+```
+
+| Setting | Default | Meaning |
+|---|---|---|
+| `table.minColumnWidth` | `12` (4 to 40) | The narrowest a table column is squeezed to. A table that does not fit at that width scrolls sideways. Lower it to see more columns at once; raise it to read more of each cell. |
+| `scroll.step` | `8` (1 to 40) | Cells one tap on a fine arrow (`‹ ›`) scrolls. The page arrows (`« »`) always go about three quarters of the pane. Lower it if scrolling feels jumpy. |
+
+`PI_OPENUI_TABLE_MIN_COL` and `PI_OPENUI_SCROLL_STEP` override the file. `/openui-config` shows what is in force,
+`/openui-config scroll.step 5` writes the file (handy on a phone) and redraws every widget, `/openui-config scroll.step reset` puts
+one setting back, and `/openui-config reset` puts all of them back. A bad value falls back to the
+default with one notice, and the file is never overwritten if it is not valid JSON.
+
 ## Notes
 
 Pin a comment to one part of a widget, then send all your comments to the agent as a single message. Use it to say "this row
@@ -153,7 +195,8 @@ After you change the code, run `/reload` in pi. The rest:
 npm test                 # a few seconds, no network, no model calls
 npm run docs             # regenerate docs/components/ from the signature table
 npm run screenshots      # regenerate docs/screenshots/, and the two README composites (needs Python with Pillow, and the font)
-npm run gallery          # print every component to the terminal (-- --plain for no colour)
+npm run gallery          # print every component to the terminal (-- --plain for no colour; a key prefix, e.g. `wide`, picks some)
+npm run gallery:files    # regenerate docs/gallery.txt and docs/gallery-narrow.txt (a test fails when they are stale)
 make help                # the release process (check, version, publish, tag, push)
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-openui",
-  "version": "0.1.2",
+  "version": "0.3.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",
@@ -52,6 +52,7 @@
     "width": "node --import ./test/register-pi.mjs scripts/width-table.ts",
     "screenshots": "node --import ./test/register-pi.mjs scripts/shots.ts && python3 scripts/render_shots.py && python3 scripts/hero.py",
     "docs": "node scripts/gen_docs.ts",
-    "prepublishOnly": "npm test"
+    "prepublishOnly": "npm test",
+    "gallery:files": "node scripts/gen-gallery.ts"
   }
 }

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/code.ts

@@ -1,5 +1,6 @@
 import { textWidth, truncateText, type Cell } from "../diagram/canvas.ts";
-import type { Block, Target } from "./types.ts";
+import type { Block, Ctx, Target } from "./types.ts";
+import { panBlock } from "./panblock.ts";
 import { boxed, cell, fromRows, textCells, vstack } from "./util.ts";
 
 const KW: Record<string, string[]> = {
@@ -84,8 +85,20 @@ export function codeInner(code: string, lang: string | undefined, width: number)
 	return fromRows(width, rows);
 }
 
-export function codeBlock(code: string, lang: string | undefined, title: string | undefined, width: number, copyId: string | null, copied: boolean): Block {
-	const inner = codeInner(code, lang, Math.max(8, width - 4));
+/** The longest line of the code that is drawn, in cells. */
+const longestLine = (code: string) => Math.max(0, ...String(code ?? "").replace(/\t/g, "  ").replace(/\n$/, "").split("\n").slice(0, 200).map((l) => textWidth(l)));
+
+/** A line longer than this is cut: even a scrolling view needs an end. */
+export const MAX_CODE_COLS = 240;
+
+/**
+ * `pan` (a render context and a key for the scroll offset) lets code wider than its box scroll inside it, with a pan bar under the
+ * last line; the box and its copy button stay where they are. Without it (a quote, a tooltip panel) a long line is cut as it was.
+ */
+export function codeBlock(code: string, lang: string | undefined, title: string | undefined, width: number, copyId: string | null, copied: boolean, pan?: { ctx: Ctx; key: string }): Block {
+	const innerW = Math.max(8, width - 4);
+	const longest = longestLine(code);
+	const inner = pan && longest > innerW ? panBlock(codeInner(code, lang, Math.min(longest, MAX_CODE_COLS)), innerW, pan.key, pan.ctx) : codeInner(code, lang, innerW);
 	const label = [title, lang && !title ? lang : title && lang ? lang : ""].filter(Boolean).join(" · ");
 	const tagText = copyId ? (copied ? "✓ copied" : "[copy]") : undefined;
 	const b = boxed(inner, { role: "code.border", title: label || undefined, titleRole: "code.title", tag: tagText, tagRole: copied ? "code.copied" : "btn" });