@teaflask/assistant 0.0.0 → 0.3.0

package/src/components/tool-views/file-edit-view.ts

@@ -0,0 +1,276 @@
+// teaflask.file-edit — the recorded edit as a diff (tool-views.md,
+// rung 3). The diff derives from the ARGS — str_replace carries the
+// full old/new pair, insert its added lines, create the whole file —
+// because the result carries only a post-edit snippet. On a settled
+// call the editor applied exactly this change (unique-occurrence
+// enforced backend-side); before it settles the same shape is labeled
+// a proposal, so the view never claims an edit that hasn't happened.
+// Producer transforms, argument ledger and the boundary-newline
+// cross-product: docs/tool-view-ledgers.md. Arm reachability and the
+// two truncation channels (the diff arms derive from the ARGS and are
+// immune to both): the tool-view arm-reachability record.
+//   settledOutcomeNotesOf arms — REACHABLE: tool-row no longer gates
+//     output, so the refused/output-error/denied/cancelled/superseded/
+//     offloaded settles render their arms in production (a
+//     still-running call renders none — the switch breaks out); see
+//     view-dom.ts.
+//   elision marking (_diffPane) — every recorded line the Myers pane
+//     does not render is marked with a ⋯: leading, between hunks, and
+//     trailing. A pane without ⋯ IS the whole recorded fragment.
+
+import { unifiedDiffOf } from "../../reader/line-diff.js";
+import type { ToolViewProps } from "../../core/tool-view.js";
+import {
+  LABEL_CLASS,
+  PANE_CLASS,
+  PANE_WRAPPER_CLASS,
+  el,
+  note,
+  pane,
+  settledOutcomeNotesOf,
+  settledWithResult,
+  statelessToolView,
+  stringOf,
+} from "./view-dom.js";
+
+export const fileEditToolView = statelessToolView(_renderFileEdit);
+
+function _renderFileEdit({ call }: ToolViewProps): HTMLElement {
+  const root = el("div", "tf:flex tf:flex-col tf:gap-2");
+  root.dataset.tfFileEditView = "";
+  const path = stringOf(call.args.path);
+  if (path !== null && path !== "") {
+    root.append(el("p", "tf:font-mono tf:text-xs tf:text-tf-foreground", path));
+  }
+  root.append(...settledOutcomeNotesOf(call));
+  const settled = settledWithResult(call);
+  switch (stringOf(call.args.command)) {
+    case "str_replace":
+      root.append(_strReplaceReadingOf(call, settled));
+      break;
+    case "create":
+      root.append(_createReadingOf(call, settled));
+      break;
+    case "insert":
+      root.append(_insertReadingOf(call, settled));
+      break;
+    case "view": {
+      const read = _viewedContentsReadingOf(call, settled);
+      if (read !== null) {
+        root.append(read);
+      }
+      break;
+    }
+    default:
+      root.append(note("No rendered edit for this call."));
+  }
+  return root;
+}
+
+function _strReplaceReadingOf(
+  call: ToolViewProps["call"],
+  settled: boolean,
+): HTMLElement {
+  const oldStr = stringOf(call.args.old_str);
+  // new_str is optional for str_replace and omitting it DELETES the
+  // match (the editor expands a missing or empty new_str to "") — so an
+  // absent value is a deletion to render, and only a wrong-typed one is
+  // unrenderable.
+  const rawNewStr = call.args.new_str;
+  const newStr =
+    rawNewStr === undefined || rawNewStr === null ? "" : stringOf(rawNewStr);
+  if (oldStr === null || newStr === null) {
+    return note("No rendered edit for this call.");
+  }
+  // The editor matches and writes tab-EXPANDED fragments, so the file
+  // received these bytes, and equality is judged on them.
+  const expandedOld = _expandedTabs(oldStr);
+  const expandedNew = _expandedTabs(newStr);
+  if (newStr === "" && oldStr !== "") {
+    return _diffPane(
+      settled ? "Deletion" : "Proposed deletion",
+      _prefixedLines(_withoutBoundaryNewlines(expandedOld), "-"),
+    );
+  }
+  const diff = unifiedDiffOf(expandedOld, expandedNew);
+  if (diff === "") {
+    return note("The replacement matches the original — no change to render.");
+  }
+  return _diffPane(
+    settled ? "Edit" : "Proposed edit",
+    diff,
+    expandedOld.split("\n").length,
+  );
+}
+
+function _createReadingOf(
+  call: ToolViewProps["call"],
+  settled: boolean,
+): HTMLElement {
+  const fileText = stringOf(call.args.file_text);
+  if (fileText === null) {
+    return note("No rendered edit for this call.");
+  }
+  if (fileText === "") {
+    // An empty file has no added lines; a bare "+" would claim one.
+    return note(settled ? "Created an empty file." : "Proposes an empty file.");
+  }
+  // Verbatim on purpose: create is the one command the editor does NOT
+  // tab-expand, and a leading newline really is a blank first line —
+  // only the trailing terminator drops.
+  return _diffPane(
+    settled ? "New file" : "Proposed new file",
+    _prefixedLines(_withoutTrailingNewline(fileText), "+"),
+  );
+}
+
+function _insertReadingOf(
+  call: ToolViewProps["call"],
+  settled: boolean,
+): HTMLElement {
+  const newStr = stringOf(call.args.new_str);
+  if (newStr === null) {
+    return note("No rendered edit for this call.");
+  }
+  const line = call.args.insert_line;
+  // insert_line counts the existing lines that PRECEDE the insertion —
+  // the editor splices at file_text_lines[:insert_line] and accepts
+  // only integers in [0, n_lines] — so 0 is the top of the file, a
+  // positive integer reads as the ordinary "after line N" (1-indexed
+  // reading), and anything the editor would refuse (negative,
+  // fractional, non-number) claims no position at all. The vended
+  // docstring says "0-indexed"; its own splice contradicts it, and the
+  // splice is what runs.
+  const where =
+    typeof line !== "number" || !Number.isInteger(line) || line < 0
+      ? ""
+      : line === 0
+        ? " at the top of the file"
+        : ` after line ${String(line)}`;
+  // Tab-expanded (the splice inserts expanded lines), but no boundary
+  // drops: split("\n") is spliced verbatim, so leading and trailing
+  // newlines really insert blank lines.
+  return _diffPane(
+    settled ? `Inserted${where}` : `Proposed insertion${where}`,
+    _prefixedLines(_expandedTabs(newStr), "+"),
+  );
+}
+
+function _viewedContentsReadingOf(
+  call: ToolViewProps["call"],
+  settled: boolean,
+): HTMLElement | null {
+  if (!settled) {
+    return null;
+  }
+  if (call.resultText === undefined || call.resultText === "") {
+    return note("Nothing to show for this read.");
+  }
+  // "Contents", not "File": a view over a directory returns a listing,
+  // and the recorded args cannot tell the two apart.
+  return pane("Contents", _withoutViewPreamble(call.resultText));
+}
+
+/** The editor's own transform: "\t" → 8 spaces, applied to old_str and
+ *  new_str (never file_text) before matching and writing. */
+function _expandedTabs(text: string): string {
+  return text.replaceAll("\t", "        ");
+}
+
+/** One trailing "\n" is a terminator, not a line. */
+function _withoutTrailingNewline(text: string): string {
+  return text.endsWith("\n") ? text.slice(0, -1) : text;
+}
+
+/** Deletion drops one newline at EACH boundary: the leading one is the
+ *  preceding line's terminator consumed as the joint, the trailing one
+ *  the last deleted line's own (the cross-product above). */
+function _withoutBoundaryNewlines(text: string): string {
+  return _withoutTrailingNewline(text.startsWith("\n") ? text.slice(1) : text);
+}
+
+/** A view result is never bare contents: the vended tool opens with one
+ *  deterministic model-facing sentence (file or directory form, both
+ *  ending in ":"), restating the path the header line above already
+ *  shows — dropped so the pane holds the recorded read alone. */
+function _withoutViewPreamble(text: string): string {
+  const newline = text.indexOf("\n");
+  if (newline === -1) {
+    return text;
+  }
+  const firstLine = text.slice(0, newline);
+  const isPreamble =
+    (firstLine.startsWith("Here's the result of running") ||
+      firstLine.startsWith("Here's the files and directories")) &&
+    firstLine.endsWith(":");
+  return isPreamble ? text.slice(newline + 1) : text;
+}
+
+function _prefixedLines(text: string, prefix: "+" | "-"): string {
+  return text
+    .split("\n")
+    .map((line) => `${prefix}${line}`)
+    .join("\n");
+}
+
+/** The diff register: additions in foreground ink, deletions in the
+ *  status voice, context muted (no success token exists in Graphite —
+ *  none is minted). Hunk headers render as quiet ⋯ separators: their
+ *  offsets are relative to the recorded fragment, and printing numbers
+ *  that read as file lines would be a wrong claim — but every ELISION
+ *  is marked: a first hunk opening past the
+ *  fragment's first line gets a leading ⋯, and when `oldLineCount` is
+ *  given (the Myers arm), recorded lines past the last hunk get a
+ *  trailing ⋯ — the pane never reads as a complete diff of a fragment
+ *  it elided. Lines join with prepended newlines so the pane carries no
+ *  trailing empty line box. */
+function _diffPane(
+  label: string,
+  diff: string,
+  oldLineCount?: number,
+): HTMLElement {
+  const wrapper = el("div", PANE_WRAPPER_CLASS);
+  wrapper.append(el("p", LABEL_CLASS, label));
+  const pre = el("pre", PANE_CLASS);
+  const code = el("code", "tf:font-mono");
+  let rendered = 0;
+  const append = (className: string, text: string) => {
+    code.append(el("span", className, rendered === 0 ? text : `\n${text}`));
+    rendered += 1;
+  };
+  // The first recorded-fragment line AFTER the last hunk (1-indexed),
+  // from the header's own `-start,count` — the only place the diff
+  // says how far it reached.
+  let afterLastHunk: number | null = null;
+  for (const line of diff.split("\n")) {
+    if (line.startsWith("@@")) {
+      const header = /^@@ -(\d+),(\d+)/.exec(line);
+      if (header !== null) {
+        afterLastHunk = Number(header[1]) + Number(header[2]);
+      }
+      // A hunk opening at the fragment's first line elides nothing
+      // before it; every other header stands for skipped recorded
+      // lines and must say so.
+      if (rendered > 0 || !line.startsWith("@@ -1,")) {
+        append("tf:text-tf-muted-foreground", "⋯");
+      }
+      continue;
+    }
+    const className = line.startsWith("+")
+      ? "tf:text-tf-foreground"
+      : line.startsWith("-")
+        ? "tf:text-tf-destructive"
+        : "tf:text-tf-muted-foreground";
+    append(className, line);
+  }
+  if (
+    oldLineCount !== undefined &&
+    afterLastHunk !== null &&
+    afterLastHunk <= oldLineCount
+  ) {
+    append("tf:text-tf-muted-foreground", "⋯");
+  }
+  pre.append(code);
+  wrapper.append(pre);
+  return wrapper;
+}

package/src/components/tool-views/parts-classes.ts

@@ -0,0 +1,104 @@
+// The one visual vocabulary every tool view speaks — the package's own
+// built-ins (vanilla, view-dom.ts) and host views (React, parts.tsx) share
+// these strings, so a customer's view and ours read as one system: a
+// hairline card at rest, dense list rows with a title line and a muted
+// second line, a trailing badge, property rows, a quiet caption, a
+// scrolling body region. Graphite: 13px labels, hairline borders, no
+// shadow, and a compact vertical rhythm — 6px row padding, 24px tiles.
+
+export const CARD_CLASS =
+  "tf:overflow-hidden tf:rounded-lg tf:border tf:border-tf-border tf:bg-tf-card";
+
+export const CARD_TITLE_CLASS =
+  "tf:mb-1 tf:text-tf-label tf:font-medium tf:text-tf-foreground";
+
+export const ROW_CLASS =
+  "tf:flex tf:min-w-0 tf:items-center tf:gap-2.5 tf:border-t tf:border-tf-border tf:px-2.5 tf:py-1.5 tf:first:border-t-0";
+
+export const ROW_LINK_CLASS = "tf:no-underline tf:hover:bg-tf-accent";
+
+export const ROW_ICON_CLASS =
+  "tf:flex tf:size-6 tf:shrink-0 tf:items-center tf:justify-center tf:rounded-[5px] tf:bg-tf-muted tf:text-tf-muted-foreground";
+
+export const ROW_TEXT_CLASS =
+  "tf:flex tf:min-w-0 tf:flex-1 tf:flex-col tf:leading-[1.35]";
+
+export const ROW_TITLE_CLASS =
+  "tf:truncate tf:text-tf-label tf:font-medium tf:text-tf-foreground";
+
+export const ROW_SECONDARY_CLASS =
+  "tf:truncate tf:text-xs tf:text-tf-muted-foreground";
+
+export const ROW_TRAIL_CLASS =
+  "tf:ms-auto tf:flex tf:shrink-0 tf:items-center tf:gap-2";
+
+export const BADGE_CLASS =
+  "tf:inline-flex tf:shrink-0 tf:items-center tf:rounded-[3px] tf:border tf:border-tf-border tf:px-1.5 tf:py-px tf:text-[11px] tf:leading-4 tf:font-medium tf:text-tf-foreground";
+
+/** The property-row list: a hairline above it when it follows a caption
+ *  or a row, none when it opens the card — the rows' own first-child rule,
+ *  applied to their container. */
+export const FACT_LIST_CLASS =
+  "tf:m-0 tf:border-t tf:border-tf-border tf:first:border-t-0";
+
+export const FACT_ROW_CLASS =
+  "tf:grid tf:grid-cols-[minmax(6rem,30%)_minmax(0,1fr)] tf:gap-x-3 tf:border-t tf:border-tf-border tf:px-2.5 tf:py-1.5 tf:first:border-t-0";
+
+export const FACT_LABEL_CLASS =
+  "tf:min-w-0 tf:text-xs tf:text-tf-muted-foreground tf:wrap-anywhere";
+
+export const FACT_VALUE_CLASS =
+  "tf:m-0 tf:min-w-0 tf:text-xs tf:text-tf-foreground tf:wrap-anywhere";
+
+export const CAPTION_ROW_CLASS =
+  "tf:flex tf:items-center tf:justify-between tf:gap-3 tf:border-t tf:border-tf-border tf:px-2.5 tf:py-1.5 tf:text-xs tf:text-tf-muted-foreground tf:first:border-t-0";
+
+/** A block child of a card that is not a row — a pretty-printed value,
+ *  an inset pane, a body: the same hairline above (none when it opens
+ *  the card) and the same inset the rows keep. */
+export const CARD_BLOCK_CLASS =
+  "tf:border-t tf:border-tf-border tf:px-2.5 tf:py-2 tf:first:border-t-0";
+
+export const BODY_REGION_CLASS = `tf:max-h-72 tf:overflow-auto ${CARD_BLOCK_CLASS}`;
+
+export const NOTE_CLASS = "tf:text-xs tf:text-tf-muted-foreground";
+
+/** Skeleton lines where the result will land: the first a half-width
+ *  title, the rest full-width text — pending is a shape, not a sentence,
+ *  and it draws no edges: no card, no border, the lines alone. */
+export const BONES_CLASS = "tf:flex tf:flex-col tf:gap-2 tf:py-1";
+
+export const BONE_CLASS =
+  "tf:h-2.5 tf:animate-tf-pulse tf:rounded tf:bg-tf-muted";
+
+/** A label over a pane: the one label-to-pane rhythm (the pane carries
+ *  no margin of its own, so a host's reset cannot collapse the gap). */
+export const PANE_WRAPPER_CLASS = "tf:flex tf:flex-col tf:gap-1";
+
+/** The mono pane for text that IS text (a command's output, a diff): on
+ *  the muted ground inside a card, never a second border. */
+export const PANE_CLASS =
+  "tf:m-0 tf:max-h-60 tf:overflow-auto tf:rounded-md tf:bg-tf-muted tf:p-2 tf:text-xs tf:whitespace-pre-wrap tf:text-tf-foreground";
+
+/** A command and what it printed, as one terminal block: the prompt line
+ *  in the foreground, the streams beneath it in the muted register. */
+export const TERMINAL_CLASS =
+  "tf:m-0 tf:max-h-72 tf:overflow-auto tf:rounded-lg tf:border tf:border-tf-border tf:bg-tf-muted tf:px-3 tf:py-2.5 tf:font-mono tf:text-xs tf:leading-5 tf:whitespace-pre-wrap tf:wrap-anywhere tf:text-tf-foreground";
+
+export const TERMINAL_PROMPT_CLASS =
+  "tf:select-none tf:text-tf-muted-foreground";
+
+export const TERMINAL_OUTPUT_CLASS =
+  "tf:mt-1 tf:block tf:text-tf-muted-foreground";
+
+export const TERMINAL_STDERR_CLASS =
+  "tf:mt-1 tf:block tf:text-tf-muted-foreground tf:italic";
+
+/** A long list or value inside a card scrolls in a bounded well instead
+ *  of growing the transcript — a card child itself (hairline above unless
+ *  first; its first child's own hairline yields), so one line per edge. */
+export const SCROLL_REGION_CLASS =
+  "tf:max-h-72 tf:overflow-auto tf:border-t tf:border-tf-border tf:first:border-t-0";
+
+export const LABEL_CLASS =
+  "tf:text-xs tf:font-medium tf:text-tf-muted-foreground";

package/src/components/tool-views/parts.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+// The React spelling of the tool-view vocabulary (parts-classes.ts) for
+// host-authored views: a card, list rows, property rows, a caption, a
+// body region, a scrolling region, a badge, notes, and skeleton lines. A host composes these
+// and gets the package's look for free — the same classes the built-ins
+// paint with, so ours and theirs are one system.
+
+import type { ReactNode } from "react";
+
+import {
+  BADGE_CLASS,
+  BODY_REGION_CLASS,
+  BONES_CLASS,
+  BONE_CLASS,
+  CAPTION_ROW_CLASS,
+  CARD_CLASS,
+  CARD_TITLE_CLASS,
+  FACT_LABEL_CLASS,
+  FACT_LIST_CLASS,
+  FACT_ROW_CLASS,
+  FACT_VALUE_CLASS,
+  NOTE_CLASS,
+  ROW_CLASS,
+  ROW_ICON_CLASS,
+  ROW_LINK_CLASS,
+  ROW_SECONDARY_CLASS,
+  ROW_TEXT_CLASS,
+  ROW_TITLE_CLASS,
+  ROW_TRAIL_CLASS,
+  SCROLL_REGION_CLASS,
+} from "./parts-classes.js";
+
+/** The small label over a card — or over a skeleton, which draws no card. */
+export function ToolViewTitle({ children }: { children: ReactNode }) {
+  return <p className={CARD_TITLE_CLASS}>{children}</p>;
+}
+
+export function ToolViewCard({
+  title,
+  children,
+  ...rest
+}: {
+  title?: string;
+  children: ReactNode;
+} & Record<`data-${string}`, string | number | undefined>) {
+  return (
+    <div {...rest}>
+      {title !== undefined && <ToolViewTitle>{title}</ToolViewTitle>}
+      <div className={CARD_CLASS} data-tf-tool-view-card="">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function ToolViewRow({
+  icon,
+  title,
+  secondary,
+  trailing,
+  href,
+  ...rest
+}: {
+  icon?: ReactNode;
+  title: ReactNode;
+  secondary?: ReactNode;
+  trailing?: ReactNode;
+  /** A plain anchor: a view lives in its own React root, outside any
+   *  host router, so a row that navigates is a full navigation. */
+  href?: string;
+} & Record<`data-${string}`, string | number | undefined>) {
+  const content = (
+    <>
+      {icon !== undefined && <span className={ROW_ICON_CLASS}>{icon}</span>}
+      <span className={ROW_TEXT_CLASS}>
+        <span className={ROW_TITLE_CLASS}>{title}</span>
+        {secondary !== undefined && secondary !== null && (
+          <span className={ROW_SECONDARY_CLASS}>{secondary}</span>
+        )}
+      </span>
+      {trailing !== undefined && trailing !== null && (
+        <span className={ROW_TRAIL_CLASS}>{trailing}</span>
+      )}
+    </>
+  );
+  return href === undefined ? (
+    <div className={ROW_CLASS} {...rest}>
+      {content}
+    </div>
+  ) : (
+    <a href={href} className={`${ROW_CLASS} ${ROW_LINK_CLASS}`} {...rest}>
+      {content}
+    </a>
+  );
+}
+
+export function ToolViewFacts({
+  facts,
+  ...rest
+}: {
+  facts: readonly { label: string; value: ReactNode }[];
+} & Record<`data-${string}`, string | number | undefined>) {
+  return (
+    <dl className={FACT_LIST_CLASS} {...rest}>
+      {/* Positional on purpose: the list is the API's own order, and two
+          problems may name one field (or none) — labels are not keys. */}
+      {facts.map((fact, index) => (
+        <div key={index} className={FACT_ROW_CLASS}>
+          <dt className={FACT_LABEL_CLASS}>{fact.label}</dt>
+          <dd className={FACT_VALUE_CLASS}>{fact.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+export function ToolViewCaption({
+  children,
+  trailing,
+  ...rest
+}: {
+  children: ReactNode;
+  trailing?: ReactNode;
+} & Record<`data-${string}`, string | number | undefined>) {
+  return (
+    <div className={CAPTION_ROW_CLASS} {...rest}>
+      <span className="tf:min-w-0">{children}</span>
+      {trailing !== undefined && trailing !== null && (
+        <span className="tf:shrink-0">{trailing}</span>
+      )}
+    </div>
+  );
+}
+
+export function ToolViewBody({
+  label,
+  children,
+  ...rest
+}: {
+  label: string;
+  children: ReactNode;
+} & Record<`data-${string}`, string | number | undefined>) {
+  return (
+    <section aria-label={label} className={BODY_REGION_CLASS} {...rest}>
+      {children}
+    </section>
+  );
+}
+
+/** A bounded, scrolling region for a long list inside a card. */
+export function ToolViewScroll({
+  children,
+  ...rest
+}: { children: ReactNode } & Record<
+  `data-${string}`,
+  string | number | undefined
+>) {
+  return (
+    <div className={SCROLL_REGION_CLASS} data-tf-scroll-region="" {...rest}>
+      {children}
+    </div>
+  );
+}
+
+export function ToolViewBadge({
+  children,
+  ...rest
+}: { children: ReactNode } & Record<
+  `data-${string}`,
+  string | number | undefined
+>) {
+  return (
+    <span className={BADGE_CLASS} {...rest}>
+      {children}
+    </span>
+  );
+}
+
+/** One quiet sentence in the muted register — for what is absent,
+ *  degraded, or not renderable, never for invented structure. */
+export function ToolViewNote({
+  children,
+  ...rest
+}: { children: ReactNode } & Record<
+  `data-${string}`,
+  string | number | undefined
+>) {
+  return (
+    <p className={NOTE_CLASS} {...rest}>
+      {children}
+    </p>
+  );
+}
+
+/** Skeleton lines where the result will land — pending is a shape. */
+export function ToolViewBones({
+  lines = 3,
+  ...rest
+}: { lines?: number } & Record<`data-${string}`, string | number | undefined>) {
+  return (
+    <div className={BONES_CLASS} aria-hidden {...rest}>
+      {Array.from({ length: lines }, (_, index) => (
+        <span
+          key={index}
+          className={`${BONE_CLASS} ${index === 0 ? "tf:w-1/2" : "tf:w-full"}`}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/tool-views/questions-view.ts

@@ -0,0 +1,88 @@
+// The read-only record of ask_user. Answering remains in QuestionPanel;
+// this registered view presents the recorded questions and answers.
+import type { QuestionModel } from "../../core/elicitation-pickers.js";
+import { settledQuestionsReceiptOf } from "../../core/question-receipt.js";
+import type { ToolViewProps } from "../../core/tool-view.js";
+import {
+  card,
+  el,
+  note,
+  settledOutcomeNotesOf,
+  settledWithResult,
+  statelessToolView,
+} from "./view-dom.js";
+
+export const questionsToolView = statelessToolView(renderQuestions);
+
+function renderQuestions({ call }: ToolViewProps): HTMLElement {
+  const root = el("div", "tf:min-w-0");
+  root.dataset.tfQuestionsView = "";
+  root.append(...settledOutcomeNotesOf(call));
+  const receipt =
+    settledWithResult(call) && call.truncated !== true
+      ? settledQuestionsReceiptOf(
+          call.toolName,
+          JSON.stringify(call.args),
+          call.resultText,
+        )
+      : null;
+  // The active QuestionPanel owns unanswered questions. Keep this view
+  // empty until there is a durable answer record to inspect.
+  if (receipt === null) {
+    if (settledWithResult(call)) {
+      root.append(note("No answers are available in this record."));
+    }
+    return root;
+  }
+  root.dataset.tfElicitationReceipt = "";
+  root.dataset.tfQuestionsReceipt = "";
+  const answers = new Map(
+    receipt.answers.map((answer) => [answer.id, answer.text]),
+  );
+  const list = el("dl", "tf:m-0");
+  receipt.questions.forEach((question) => {
+    list.append(
+      questionSection(question, answers.get(question.id) ?? "Answered."),
+    );
+  });
+  root.append(card([list]));
+  return root;
+}
+
+function questionSection(
+  question: QuestionModel,
+  answer: string | undefined,
+): HTMLElement {
+  const section = el(
+    "div",
+    "tf:min-w-0 tf:border-t tf:border-tf-border tf:p-4 tf:first:border-t-0",
+  );
+  const title = el("dt", "");
+  title.append(
+    el(
+      "span",
+      "tf:wrap-anywhere tf:text-tf-label tf:font-medium tf:text-tf-foreground",
+      question.heading,
+    ),
+  );
+  const prompt = el(
+    "dd",
+    "tf:m-0 tf:mt-1.5 tf:wrap-anywhere tf:whitespace-pre-wrap tf:text-tf-label tf:leading-relaxed tf:text-tf-muted-foreground",
+    question.prompt,
+  );
+  prompt.dataset.tfElicitationReceiptQuestion = "";
+  section.append(title, prompt);
+  if (answer !== undefined) {
+    const value = el(
+      "dd",
+      "tf:m-0 tf:mt-3 tf:rounded-md tf:bg-tf-muted tf:px-3 tf:py-2.5 tf:wrap-anywhere tf:whitespace-pre-wrap tf:text-tf-label tf:leading-relaxed tf:text-tf-foreground",
+    );
+    value.dataset.tfElicitationReceiptAnswer = "";
+    value.append(
+      el("span", "tf:sr-only", "Answered: "),
+      document.createTextNode(answer),
+    );
+    section.append(value);
+  }
+  return section;
+}