@teaflask/assistant 0.3.0 → 0.7.0

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

@@ -1,276 +0,0 @@
-// 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

@@ -1,104 +0,0 @@
-// 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

@@ -1,211 +0,0 @@
-"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

@@ -1,88 +0,0 @@
-// 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;
-}