pi-ask-lite 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Gerhard Schwanzer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,116 @@
+# pi-ask-lite
+
+A tiny, pleasant Markdown ask tool for Pi.
+
+`pi-ask-lite` registers one tool, `ask`. The agent passes one complete Markdown prompt; the user selects, edits, or writes a free-text answer; the tool returns the final answer as Markdown/text.
+
+## Install
+
+```bash
+pi install npm:pi-ask-lite
+```
+
+## Tool
+
+Tool name: `ask`
+
+Parameter:
+
+```ts
+{
+  markdown: string
+}
+```
+
+## Example
+
+Ask with this Markdown:
+
+```md
+Choose what to do next:
+
+* The implementation is complete.
+* Checks passed locally.
+
+- Release now
+- Run one more smoke test
+- Make a small polish pass
+```
+
+The user sees a TUI-native choice prompt and the agent receives the selected answer as Markdown/text.
+
+## Markdown interaction syntax
+
+Use normal Markdown for explanation and a few lightweight conventions for choices.
+
+Non-interactive context bullets use `*`:
+
+```md
+Given:
+
+* non-interactive context bullet
+* another context fact
+```
+
+Single choice uses `- option`:
+
+```md
+- Option A
+- Option B
+```
+
+Multi choice uses `- [ ] option`:
+
+```md
+- [ ] Option A
+- [ ] Option B
+```
+
+Independent required groups can be separated with headings:
+
+```md
+## Color
+- Red
+- Blue
+
+## Size
+- Small
+- Large
+```
+
+Dependent subchoices are expressed by indentation:
+
+```md
+- [ ] Parent
+    - Child A
+    - Child B
+```
+
+Do not preselect options with `- [x]` in prompts. Express recommendations in normal Markdown text or emphasis instead.
+
+## User interaction
+
+The extension uses a focused TUI overlay during the tool call:
+
+- `Space` selects/toggles the focused option.
+- `Shift+Space` selects/toggles and marks the answer for draft editing.
+- `Enter` sends a valid selection, or opens the selected Markdown as an editable draft when draft mode is active.
+- `Esc` / `Ctrl+C` opens an empty free-text editor.
+
+Direct selections return only the selected Markdown structure. Free-text and edited drafts are returned unchanged.
+
+## Development
+
+Run locally:
+
+```bash
+pi --extension ./src/index.ts
+```
+
+Checks:
+
+```bash
+npm run check
+npm test
+npm run pack:dry
+```

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "pi-ask-lite",
+  "version": "0.1.0",
+  "description": "A tiny, pleasant Markdown ask tool for Pi.",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "pi-package",
+    "pi",
+    "pi-coding-agent",
+    "extension",
+    "ask-lite"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/geri1701/pi-ask-lite.git"
+  },
+  "homepage": "https://github.com/geri1701/pi-ask-lite#readme",
+  "bugs": {
+    "url": "https://github.com/geri1701/pi-ask-lite/issues"
+  },
+  "pi": {
+    "extensions": [
+      "./src/index.ts"
+    ]
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "test": "node --test --import tsx test/*.test.ts",
+    "pack:dry": "npm pack --dry-run"
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-ai": "*",
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-tui": "*",
+    "typebox": "*"
+  },
+  "devDependencies": {
+    "@earendil-works/pi-ai": "^0.74.0",
+    "@earendil-works/pi-coding-agent": "^0.74.0",
+    "@earendil-works/pi-tui": "^0.74.0",
+    "tsx": "^4.22.0",
+    "typebox": "^1.1.33",
+    "typescript": "^6.0.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,53 @@
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { Type } from "typebox";
+
+import { parseAskMarkdown } from "./parse.js";
+import { runAskUi } from "./ui.js";
+
+const AskParams = Type.Object({
+  markdown: Type.String({
+    description: "Complete Markdown prompt to show to the user. The tool returns the final user answer as Markdown/text.",
+  }),
+});
+
+type AskDetails = {
+  answer: string;
+};
+
+const askDescription = `Ask the user with a Markdown prompt.
+
+Use exactly:
+- \`- option\` for single choice.
+- \`- [ ] option\` for multi choice.
+- \`* item\` for non-interactive context bullets.
+- Headings split independent required groups.
+- Indented options create dependent subchoices.
+- Never use \`- [x]\` in prompts; express recommendations in normal Markdown.
+
+The tool returns the user's final answer as Markdown/text.`;
+
+export default function askUserLite(pi: ExtensionAPI) {
+  pi.registerTool({
+    name: "ask",
+    label: "Ask User",
+    description: askDescription,
+    promptSnippet: "Ask the user with one complete Markdown prompt; returns the user's final Markdown/text answer.",
+    parameters: AskParams,
+
+    async execute(_toolCallId, params, signal, _onUpdate, ctx) {
+      if (signal?.aborted) throw new Error("Operation aborted");
+      if (!ctx.hasUI) throw new Error("Interactive UI is not available for ask.");
+
+      const document = parseAskMarkdown(params.markdown);
+      if (signal?.aborted) throw new Error("Operation aborted");
+
+      const answer = await runAskUi(ctx, document);
+      if (signal?.aborted) throw new Error("Operation aborted");
+
+      return {
+        content: [{ type: "text", text: `User answer:\n\n${answer}` }],
+        details: { answer } satisfies AskDetails,
+      };
+    },
+  });
+}

package/src/parse.ts

@@ -0,0 +1,186 @@
+import type { AskDocument, AskOption, AskSection, GroupMode, OptionGroup, TextBlock } from "./types.js";
+
+interface GroupContext {
+  indent: number;
+  group: OptionGroup;
+  lastOption?: AskOption;
+}
+
+interface ParsedOptionLine {
+  indent: number;
+  mode: GroupMode;
+  label: string;
+  rawLabel: string;
+}
+
+const headingPattern = /^(#{1,6})\s+(.+?)\s*#*\s*$/;
+const optionPattern = /^([ \t]*)-\s+(?:\[([ xX])\](?:\s+(.*)|\s*)|(.*))$/;
+const fencePattern = /^\s*(```|~~~)/;
+
+export function parseAskMarkdown(markdown: string): AskDocument {
+  const sections: AskSection[] = [{ blocks: [] }];
+  let groupStack: GroupContext[] = [];
+  let optionCounter = 0;
+  let inFence = false;
+
+  const currentSection = () => sections[sections.length - 1];
+
+  const resetOptionContext = () => {
+    groupStack = [];
+  };
+
+  const appendTextLine = (line: string) => {
+    const section = currentSection();
+    const lastBlock = section.blocks[section.blocks.length - 1];
+    if (lastBlock?.type === "text") {
+      lastBlock.lines.push(line);
+      return;
+    }
+
+    const block: TextBlock = { type: "text", lines: [line] };
+    section.blocks.push(block);
+  };
+
+  const startSection = (level: number, text: string) => {
+    const section = currentSection();
+    resetOptionContext();
+
+    if (!section.heading && section.blocks.length === 0) {
+      section.heading = { level, text };
+      return;
+    }
+
+    sections.push({ heading: { level, text }, blocks: [] });
+  };
+
+  const addOption = (parsed: ParsedOptionLine, lineNumber: number) => {
+    const option: AskOption = {
+      id: `opt-${++optionCounter}`,
+      label: parsed.label.trim(),
+      rawLabel: parsed.rawLabel,
+      indent: parsed.indent,
+      line: lineNumber,
+      children: [],
+    };
+
+    if (!option.label) {
+      throw invalidAskMarkdown(
+        "Interactive options must not be empty.",
+        "Write a visible label after `-` or `- [ ]`.",
+        lineNumber,
+      );
+    }
+
+    while (groupStack.length > 0 && parsed.indent < groupStack[groupStack.length - 1].indent) {
+      groupStack.pop();
+    }
+
+    const existingGroup = groupStack[groupStack.length - 1]?.indent === parsed.indent
+      ? groupStack[groupStack.length - 1]
+      : undefined;
+
+    if (existingGroup) {
+      ensureSameMode(existingGroup.group, parsed.mode, lineNumber);
+      existingGroup.group.options.push(option);
+      existingGroup.lastOption = option;
+      return;
+    }
+
+    const parentGroup = groupStack[groupStack.length - 1];
+    const group: OptionGroup = {
+      type: "group",
+      mode: parsed.mode,
+      options: [option],
+      required: true,
+      indent: parsed.indent,
+    };
+
+    if (parentGroup && parsed.indent > parentGroup.indent && parentGroup.lastOption) {
+      parentGroup.lastOption.children.push(group);
+    } else {
+      currentSection().blocks.push(group);
+      groupStack = [];
+    }
+
+    groupStack.push({ indent: parsed.indent, group, lastOption: option });
+  };
+
+  markdown.split(/\r?\n/).forEach((line, index) => {
+    const lineNumber = index + 1;
+
+    if (fencePattern.test(line)) {
+      inFence = !inFence;
+      resetOptionContext();
+      appendTextLine(line);
+      return;
+    }
+
+    if (inFence) {
+      appendTextLine(line);
+      return;
+    }
+
+    const headingMatch = line.match(headingPattern);
+    if (headingMatch) {
+      startSection(headingMatch[1].length, headingMatch[2].trim());
+      return;
+    }
+
+    const parsedOption = parseOptionLine(line, lineNumber);
+    if (parsedOption) {
+      addOption(parsedOption, lineNumber);
+      return;
+    }
+
+    resetOptionContext();
+    appendTextLine(line);
+  });
+
+  return { sections };
+}
+
+function parseOptionLine(line: string, lineNumber: number): ParsedOptionLine | undefined {
+  const match = line.match(optionPattern);
+  if (!match) return undefined;
+
+  const checkbox = match[2];
+  if (checkbox && checkbox.toLowerCase() === "x") {
+    throw invalidAskMarkdown(
+      "Preselected options are not allowed.",
+      "Use `- [ ] option` for multi choice and describe recommendations in normal Markdown text.",
+      lineNumber,
+    );
+  }
+
+  const rawLabel = checkbox ? (match[3] ?? "") : match[4];
+
+  return {
+    indent: indentationWidth(match[1]),
+    mode: checkbox === " " ? "multi" : "single",
+    label: rawLabel.trim(),
+    rawLabel,
+  };
+}
+
+function ensureSameMode(group: OptionGroup, mode: GroupMode, lineNumber: number) {
+  if (group.mode === mode) return;
+
+  throw invalidAskMarkdown(
+    "Mixed selection styles in the same option group.",
+    "Use either `- option` for single choice or `- [ ] option` for multi choice within one sibling group.",
+    lineNumber,
+  );
+}
+
+function indentationWidth(indent: string): number {
+  let width = 0;
+  for (const character of indent) {
+    width += character === "\t" ? 4 : 1;
+  }
+  return width;
+}
+
+function invalidAskMarkdown(reason: string, fix: string, lineNumber?: number): Error {
+  const location = typeof lineNumber === "number" ? `\nLine: ${lineNumber}` : "";
+  return new Error(`Invalid ask markdown.\n\nReason: ${reason}${location}\nFix: ${fix}`);
+}

package/src/state.ts

@@ -0,0 +1,141 @@
+import type { AskBlock, AskDocument, AskOption, AskSection, AskState, OptionGroup } from "./types.js";
+
+export function createAskState(): AskState {
+  return {
+    selected: new Set<string>(),
+    draftMode: false,
+  };
+}
+
+export function selectOption(document: AskDocument, state: AskState, optionId: string, asDraft = false): void {
+  const location = findOption(document, optionId);
+  if (!location || !isOptionActive(document, state, optionId)) return;
+
+  if (asDraft) state.draftMode = true;
+
+  if (location.group.mode === "single") {
+    for (const option of location.group.options) {
+      if (option.id !== optionId) clearOptionAndChildren(state, option);
+    }
+    state.selected.add(optionId);
+    return;
+  }
+
+  if (state.selected.has(optionId)) {
+    clearOptionAndChildren(state, location.option);
+  } else {
+    state.selected.add(optionId);
+  }
+}
+
+export function isSelectionValid(document: AskDocument, state: AskState): boolean {
+  return document.sections.every((section) => section.blocks.every((block) => {
+    if (block.type !== "group") return true;
+    return isGroupValid(block, state);
+  }));
+}
+
+export function buildAnswerMarkdown(document: AskDocument, state: AskState): string {
+  const sections = document.sections
+    .map((section) => renderSection(section, state))
+    .filter((lines) => lines.length > 0);
+
+  return sections.map((lines) => lines.join("\n")).join("\n\n");
+}
+
+export function isOptionActive(document: AskDocument, state: AskState, optionId: string): boolean {
+  for (const section of document.sections) {
+    for (const block of section.blocks) {
+      if (block.type === "group" && optionActiveInGroup(block, state, optionId, true)) return true;
+    }
+  }
+
+  return false;
+}
+
+function isGroupValid(group: OptionGroup, state: AskState): boolean {
+  const selectedOptions = group.options.filter((option) => state.selected.has(option.id));
+
+  if (group.mode === "single" && selectedOptions.length !== 1) return false;
+  if (group.mode === "multi" && selectedOptions.length < 1) return false;
+
+  return selectedOptions.every((option) => option.children.every((childGroup) => isGroupValid(childGroup, state)));
+}
+
+function renderSection(section: AskSection, state: AskState): string[] {
+  const body = section.blocks.flatMap((block) => renderBlock(block, state, 0));
+  if (body.length === 0) return [];
+
+  if (!section.heading) return body;
+
+  return [`${"#".repeat(section.heading.level)} ${section.heading.text}`, ...body];
+}
+
+function renderBlock(block: AskBlock, state: AskState, depth: number): string[] {
+  if (block.type === "text") return [];
+  return renderGroup(block, state, depth);
+}
+
+function renderGroup(group: OptionGroup, state: AskState, depth: number): string[] {
+  return group.options.flatMap((option) => {
+    if (!state.selected.has(option.id)) return [];
+
+    const prefix = group.mode === "multi" ? "- [x]" : "-";
+    const indent = "    ".repeat(depth);
+    const lines = [`${indent}${prefix} ${option.label}`];
+
+    for (const childGroup of option.children) {
+      lines.push(...renderGroup(childGroup, state, depth + 1));
+    }
+
+    return lines;
+  });
+}
+
+function optionActiveInGroup(group: OptionGroup, state: AskState, optionId: string, active: boolean): boolean {
+  for (const option of group.options) {
+    if (option.id === optionId) return active;
+
+    const childActive = active && state.selected.has(option.id);
+    for (const childGroup of option.children) {
+      if (optionActiveInGroup(childGroup, state, optionId, childActive)) return true;
+    }
+  }
+
+  return false;
+}
+
+function findOption(document: AskDocument, optionId: string): { group: OptionGroup; option: AskOption } | undefined {
+  for (const section of document.sections) {
+    for (const block of section.blocks) {
+      if (block.type !== "group") continue;
+      const result = findOptionInGroup(block, optionId);
+      if (result) return result;
+    }
+  }
+
+  return undefined;
+}
+
+function findOptionInGroup(group: OptionGroup, optionId: string): { group: OptionGroup; option: AskOption } | undefined {
+  for (const option of group.options) {
+    if (option.id === optionId) return { group, option };
+
+    for (const childGroup of option.children) {
+      const result = findOptionInGroup(childGroup, optionId);
+      if (result) return result;
+    }
+  }
+
+  return undefined;
+}
+
+function clearOptionAndChildren(state: AskState, option: AskOption): void {
+  state.selected.delete(option.id);
+
+  for (const childGroup of option.children) {
+    for (const child of childGroup.options) {
+      clearOptionAndChildren(state, child);
+    }
+  }
+}

package/src/types.ts

@@ -0,0 +1,44 @@
+export type GroupMode = "single" | "multi";
+
+export interface AskDocument {
+  sections: AskSection[];
+}
+
+export interface AskSection {
+  heading?: AskHeading;
+  blocks: AskBlock[];
+}
+
+export interface AskHeading {
+  level: number;
+  text: string;
+}
+
+export type AskBlock = TextBlock | OptionGroup;
+
+export interface TextBlock {
+  type: "text";
+  lines: string[];
+}
+
+export interface OptionGroup {
+  type: "group";
+  mode: GroupMode;
+  options: AskOption[];
+  required: true;
+  indent: number;
+}
+
+export interface AskOption {
+  id: string;
+  label: string;
+  rawLabel: string;
+  indent: number;
+  line: number;
+  children: OptionGroup[];
+}
+
+export interface AskState {
+  selected: Set<string>;
+  draftMode: boolean;
+}

package/src/ui.ts

@@ -0,0 +1,308 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { Editor, type EditorTheme, Key, matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
+
+import { buildAnswerMarkdown, createAskState, isOptionActive, isSelectionValid, selectOption } from "./state.js";
+import type { AskBlock, AskDocument, AskOption, AskSection, OptionGroup, TextBlock } from "./types.js";
+
+interface OptionRow {
+  option: AskOption;
+  group: OptionGroup;
+  depth: number;
+  active: boolean;
+}
+
+interface RenderRow {
+  text: string;
+  optionId?: string;
+}
+
+const maxBodyLines = 24;
+
+export async function runAskUi(ctx: ExtensionContext, document: AskDocument): Promise<string> {
+  return ctx.ui.custom<string>((tui, theme, _keybindings, done) => {
+    const state = createAskState();
+    let focusedId = firstActiveOptionId(document, state);
+    let editMode = focusedId === undefined;
+    let scrollOffset = 0;
+    let cachedWidth: number | undefined;
+    let cachedLines: string[] | undefined;
+
+    const editorTheme: EditorTheme = {
+      borderColor: (s) => theme.fg("accent", s),
+      selectList: {
+        selectedPrefix: (s) => theme.fg("accent", s),
+        selectedText: (s) => theme.fg("accent", s),
+        description: (s) => theme.fg("muted", s),
+        scrollInfo: (s) => theme.fg("dim", s),
+        noMatch: (s) => theme.fg("warning", s),
+      },
+    };
+    const editor = new Editor(tui, editorTheme);
+
+    editor.onSubmit = (value) => {
+      done(value);
+    };
+
+    function refresh() {
+      cachedWidth = undefined;
+      cachedLines = undefined;
+      tui.requestRender();
+    }
+
+    function ensureFocus() {
+      const rows = collectOptionRows(document, state).filter((row) => row.active);
+      if (rows.length === 0) {
+        focusedId = undefined;
+        return;
+      }
+      if (!focusedId || !rows.some((row) => row.option.id === focusedId)) {
+        focusedId = rows[0].option.id;
+      }
+    }
+
+    function moveFocus(delta: number) {
+      const rows = collectOptionRows(document, state).filter((row) => row.active);
+      if (rows.length === 0) return;
+
+      const current = Math.max(0, rows.findIndex((row) => row.option.id === focusedId));
+      const next = Math.max(0, Math.min(rows.length - 1, current + delta));
+      focusedId = rows[next].option.id;
+      refresh();
+    }
+
+    function enterEditMode(prefill: string) {
+      editMode = true;
+      editor.setText(prefill);
+      refresh();
+    }
+
+    function handleInput(data: string) {
+      if (editMode) {
+        if (focusedId && matchesKey(data, Key.escape)) {
+          editMode = false;
+          refresh();
+          return;
+        }
+        editor.handleInput(data);
+        refresh();
+        return;
+      }
+
+      ensureFocus();
+
+      if (matchesKey(data, Key.up)) {
+        moveFocus(-1);
+        return;
+      }
+      if (matchesKey(data, Key.down)) {
+        moveFocus(1);
+        return;
+      }
+      if (matchesKey(data, Key.pageUp)) {
+        moveFocus(-8);
+        return;
+      }
+      if (matchesKey(data, Key.pageDown)) {
+        moveFocus(8);
+        return;
+      }
+
+      if (matchesKey(data, "shift+space")) {
+        if (focusedId) selectOption(document, state, focusedId, true);
+        ensureFocus();
+        refresh();
+        return;
+      }
+
+      if (matchesKey(data, Key.space) || data === " ") {
+        if (focusedId) selectOption(document, state, focusedId);
+        ensureFocus();
+        refresh();
+        return;
+      }
+
+      if (matchesKey(data, Key.enter)) {
+        if (!isSelectionValid(document, state)) return;
+
+        const answer = buildAnswerMarkdown(document, state);
+        if (state.draftMode) {
+          enterEditMode(answer);
+        } else {
+          done(answer);
+        }
+        return;
+      }
+
+      if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
+        enterEditMode("");
+      }
+    }
+
+    function render(width: number): string[] {
+      if (cachedLines && cachedWidth === width) return cachedLines;
+
+      ensureFocus();
+      const lines: string[] = [];
+      const add = (line: string) => lines.push(truncateToWidth(line, width));
+
+      add(theme.fg("accent", "─".repeat(width)));
+      add(theme.fg("accent", " Ask User"));
+      add(theme.fg("dim", editMode ? " Freitext/Draft: Enter sendet • Esc zurück zur Auswahl" : " ↑↓ bewegen • Space wählen • Shift+Space Draft • Enter senden • Esc Freitext"));
+      lines.push("");
+
+      const bodyRows = renderDocumentRows(document, state, focusedId, {
+        heading: (s) => theme.fg("accent", s),
+        text: (s) => theme.fg("text", s),
+        muted: (s) => theme.fg("muted", s),
+        dim: (s) => theme.fg("dim", s),
+        focus: (s) => theme.fg("accent", s),
+      });
+
+      if (editMode) {
+        bodyRows.push({ text: "" }, { text: theme.fg("muted", "Antwort:") });
+        for (const editorLine of editor.render(Math.max(10, width - 2))) {
+          bodyRows.push({ text: ` ${editorLine}` });
+        }
+      }
+
+      if (editMode) {
+        scrollOffset = Math.max(0, bodyRows.length - maxBodyLines);
+      } else {
+        const focusedLine = bodyRows.findIndex((row) => row.optionId === focusedId);
+        if (focusedLine >= 0) {
+          if (focusedLine < scrollOffset) scrollOffset = focusedLine;
+          if (focusedLine >= scrollOffset + maxBodyLines) scrollOffset = focusedLine - maxBodyLines + 1;
+        }
+        scrollOffset = Math.max(0, Math.min(scrollOffset, Math.max(0, bodyRows.length - maxBodyLines)));
+      }
+
+      const visibleRows = bodyRows.slice(scrollOffset, scrollOffset + maxBodyLines);
+      if (scrollOffset > 0) add(theme.fg("dim", `… ${scrollOffset} Zeilen darüber`));
+      for (const row of visibleRows) add(row.text);
+      if (scrollOffset + maxBodyLines < bodyRows.length) {
+        add(theme.fg("dim", `… ${bodyRows.length - scrollOffset - maxBodyLines} Zeilen darunter`));
+      }
+
+      lines.push("");
+      add(theme.fg("accent", "─".repeat(width)));
+
+      cachedWidth = width;
+      cachedLines = lines;
+      return lines;
+    }
+
+    return {
+      get focused() {
+        return editor.focused;
+      },
+      set focused(value: boolean) {
+        editor.focused = value;
+      },
+      render,
+      invalidate: () => {
+        cachedWidth = undefined;
+        cachedLines = undefined;
+        editor.invalidate();
+      },
+      handleInput,
+    };
+  }, {
+    overlay: true,
+    overlayOptions: {
+      width: "100%",
+      minWidth: 50,
+      maxHeight: "65%",
+      anchor: "bottom-center",
+      offsetY: -2,
+      margin: 1,
+    },
+  });
+}
+
+function collectOptionRows(document: AskDocument, state: ReturnType<typeof createAskState>): OptionRow[] {
+  return document.sections.flatMap((section) => section.blocks.flatMap((block) => collectBlockRows(document, state, block, 0)));
+}
+
+function collectBlockRows(document: AskDocument, state: ReturnType<typeof createAskState>, block: AskBlock, depth: number): OptionRow[] {
+  if (block.type !== "group") return [];
+  return collectGroupRows(document, state, block, depth);
+}
+
+function collectGroupRows(document: AskDocument, state: ReturnType<typeof createAskState>, group: OptionGroup, depth: number): OptionRow[] {
+  return group.options.flatMap((option) => {
+    const active = isOptionActive(document, state, option.id);
+    return [
+      { option, group, depth, active },
+      ...option.children.flatMap((childGroup) => collectGroupRows(document, state, childGroup, depth + 1)),
+    ];
+  });
+}
+
+function firstActiveOptionId(document: AskDocument, state: ReturnType<typeof createAskState>): string | undefined {
+  return collectOptionRows(document, state).find((row) => row.active)?.option.id;
+}
+
+function renderDocumentRows(
+  document: AskDocument,
+  state: ReturnType<typeof createAskState>,
+  focusedId: string | undefined,
+  style: {
+    heading: (s: string) => string;
+    text: (s: string) => string;
+    muted: (s: string) => string;
+    dim: (s: string) => string;
+    focus: (s: string) => string;
+  },
+): RenderRow[] {
+  return document.sections.flatMap((section) => renderSectionRows(document, state, section, focusedId, style));
+}
+
+function renderSectionRows(
+  document: AskDocument,
+  state: ReturnType<typeof createAskState>,
+  section: AskSection,
+  focusedId: string | undefined,
+  style: Parameters<typeof renderDocumentRows>[3],
+): RenderRow[] {
+  const rows: RenderRow[] = [];
+  if (section.heading) rows.push({ text: style.heading(`${"#".repeat(section.heading.level)} ${section.heading.text}`) });
+
+  for (const block of section.blocks) {
+    if (block.type === "text") {
+      rows.push(...renderTextRows(block, style));
+    } else {
+      rows.push(...renderGroupRows(document, state, block, focusedId, 0, style));
+    }
+  }
+
+  return rows;
+}
+
+function renderTextRows(block: TextBlock, style: Parameters<typeof renderDocumentRows>[3]): RenderRow[] {
+  return block.lines.map((line) => ({ text: line.trim() ? style.text(line) : "" }));
+}
+
+function renderGroupRows(
+  document: AskDocument,
+  state: ReturnType<typeof createAskState>,
+  group: OptionGroup,
+  focusedId: string | undefined,
+  depth: number,
+  style: Parameters<typeof renderDocumentRows>[3],
+): RenderRow[] {
+  return group.options.flatMap((option) => {
+    const active = isOptionActive(document, state, option.id);
+    const selected = state.selected.has(option.id);
+    const focused = active && option.id === focusedId;
+    const marker = group.mode === "multi" ? (selected ? "[x]" : "[ ]") : (selected ? "(•)" : "( )");
+    const cursor = focused ? ">" : " ";
+    const indent = "  ".repeat(depth);
+    const raw = `${cursor} ${indent}${marker} ${option.label}`;
+    const text = !active ? style.dim(raw) : focused ? style.focus(raw) : style.muted(raw);
+
+    return [
+      { text, optionId: option.id },
+      ...option.children.flatMap((childGroup) => renderGroupRows(document, state, childGroup, focusedId, depth + 1, style)),
+    ];
+  });
+}