@k2b/cloud 0.39.0 → 0.41.0

package/src/ai/chat/tool-action.tsx

@@ -0,0 +1,456 @@
+import { dates } from "@k2b/stdlib";
+import { Button, ButtonLink, type ChatDecisionState, useLocale } from "@k2b/ui";
+import { createEffect, createMemo, createSignal, For, type JSX, on, onCleanup, Show } from "solid-js";
+import { CapabilityActionReceiptSchema } from "../../contracts/capabilities";
+import { AI_TOOL_CHECK_STALE_MS, type AiActionCheck } from "../action-review";
+import type { AiTurnBlock } from "../protocol";
+import { type ActionCard, type ActionText, actionReceiptText, toolActionCard } from "./action-card";
+import { actionMessages } from "./action-messages";
+import { type ActionLine, ActionQuestion, ActionReceipt } from "./action-question";
+import { useReaderTimeZone } from "./action-sentences";
+import { useAiChatActions } from "./message-actions";
+import { capabilityErrorDescription, isRecord } from "./message-utils";
+import { aiChatMessages } from "./messages";
+import { legacyOutcomeWords } from "./tool-action-words";
+import type { AiTurnActionState, AiTurnPhase } from "./turn-layout";
+
+type ToolBlock = Extract<AiTurnBlock, { kind: "tool" }>;
+
+/**
+ * Codes that say Cloud could not see whether the Action happened; nothing may repeat it blindly. Core rewrites a
+ * failure after it reached the app to ACTION_OUTCOME_UNKNOWN, so a bare transport code such as APP_UNAVAILABLE failed
+ * before the app saw anything, or comes from older history; either way it reads as a failure with its message.
+ */
+const UNKNOWN_CODES = new Set(["ACTION_OUTCOME_UNKNOWN", "IDEMPOTENCY_UNCERTAIN", "IDEMPOTENCY_IN_PROGRESS"]);
+
+/** Cloud's own transport codes: they say the call failed, not that the app refused it, so they never claim "not run". */
+const TRANSPORT_CODES = new Set([
+  "DEADLINE_EXCEEDED",
+  "APP_UNAVAILABLE",
+  "REQUEST_CANCELLED",
+  "INVALID_APP_RESPONSE",
+  "RESPONSE_TOO_LARGE",
+  "INTERNAL",
+]);
+
+/** The framework code of a failed call, from `CODE: message` or a structured error. */
+export const toolErrorCode = (result: unknown): string | null => {
+  if (typeof result === "string") return /^([A-Z][A-Z0-9_]{2,}):/.exec(result.trim())?.[1] ?? null;
+  if (isRecord(result) && typeof result.code === "string") return result.code;
+  return null;
+};
+
+/** The message without its code, so the detail under a line reads as a sentence. */
+const errorDetail = (result: unknown): string => capabilityErrorDescription(result).replace(/^[A-Z][A-Z0-9_]{2,}:\s*/, "");
+
+/** The card of one tool block in the reader's locale and zone. */
+export const useToolActionCard = (block: () => ToolBlock): (() => ActionCard) => {
+  const locale = useLocale();
+  const timeZone = useReaderTimeZone();
+  return createMemo(() =>
+    toolActionCard(block(), { locale: locale(), timeZone, outcome: legacyOutcomeWords(block(), locale(), timeZone) }),
+  );
+};
+
+type LocalAnswer = "approve" | "decline" | null;
+
+/** Which outcome a call reached and what the person did here, as one key per flow. */
+type Flow =
+  | { flow: "run"; current: "running" | "done" }
+  | { flow: "rejected" }
+  | { flow: "expired" }
+  | { flow: "stopped" }
+  | { flow: "error" }
+  | { flow: "failed" }
+  | { flow: "lost" }
+  | {
+      flow: "check";
+      current: "checking" | "checkedDone" | "checkedNotDone" | "pending" | "checkFailed" | "noCheck" | "cutOff";
+    };
+
+const flowOf = (input: {
+  block: ToolBlock;
+  state: AiTurnActionState | "open";
+  answer: LocalAnswer;
+  lost: boolean;
+  check: AiActionCheck | undefined;
+  phase?: AiTurnPhase;
+  /** The stored claim of a running check is older than the stale limit. */
+  staleCheck?: boolean;
+}): Flow => {
+  const { block, check } = input;
+  // A lost answer holds only while the question still waits; the server's own outcome always wins over it.
+  if (input.lost && block.status === "awaiting_approval") return { flow: "lost" };
+  if (block.status === "awaiting_approval") return input.answer === "decline" ? { flow: "rejected" } : { flow: "run", current: "running" };
+  // A check runs only inside a live turn and only for a while; one that history still shows as running, or whose
+  // claim went stale, was cut off and is open again.
+  if (check?.state === "checking")
+    return input.staleCheck || input.phase === "completed" || input.phase === "stopped" || input.phase === "failed"
+      ? { flow: "check", current: "pending" }
+      : { flow: "check", current: "checking" };
+  if (check?.state === "done") return { flow: "check", current: "checkedDone" };
+  if (check?.state === "not_done") return { flow: "check", current: "checkedNotDone" };
+  // An open check stays open whatever the call's own end looked like, such as a turn stopped while it checked.
+  if (check?.state === "pending") return { flow: "check", current: "pending" };
+  if (check?.state === "failed") return { flow: "check", current: "checkFailed" };
+  if (input.state === "rejected") return { flow: "rejected" };
+  // The person's stop ends an open question or a call it cut off; a question nobody answered expired. A call that was
+  // still running when the turn ended any other way may have reached the app, so its outcome is open.
+  if (input.state === "not_run") {
+    if (input.phase === "stopped") return { flow: "stopped" };
+    return block.approved === false ? { flow: "expired" } : { flow: "check", current: "cutOff" };
+  }
+  if (input.state === "failed") {
+    const code = toolErrorCode(block.result);
+    if (code === "ACTION_NOT_DONE") return { flow: "check", current: "checkedNotDone" };
+    if (code && UNKNOWN_CODES.has(code)) {
+      return { flow: "check", current: "noCheck" };
+    }
+    // A failure with an app's code was refused before anything happened; a transport code or none proves nothing.
+    return code && !TRANSPORT_CODES.has(code) ? { flow: "error" } : { flow: "failed" };
+  }
+  if (input.state === "done") return { flow: "run", current: "done" };
+  return { flow: "run", current: "running" };
+};
+
+/**
+ * One call in place 4: the open question, then, in the same element, its outcome line. An answer here collapses the
+ * question at once to the running or declined line and moves the focus there; the server's outcome replaces it in the
+ * same cell. A call that never asked shows only its outcome line.
+ */
+export function ToolActionView(props: {
+  block: ToolBlock;
+  turnId: string;
+  /** The block's place-4 state from the turn layout; `open` while it waits for this person. */
+  state: AiTurnActionState | "open";
+  phase?: AiTurnPhase;
+}) {
+  const actions = useAiChatActions();
+  const timeZone = useReaderTimeZone();
+  const card = useToolActionCard(() => props.block);
+  const t = () => actionMessages(card().locale);
+  const [answer, setAnswer] = createSignal<LocalAnswer>(null);
+  const [lost, setLost] = createSignal(false);
+  const [elsewhere, setElsewhere] = createSignal(false);
+  const [checked, setChecked] = createSignal<AiActionCheck | null>(null);
+  const [checking, setChecking] = createSignal(false);
+  const [checkError, setCheckError] = createSignal(false);
+  // A new approval for the same block, such as the next website a code run asks for, starts a fresh question. `on`
+  // runs again whenever the block changes, so the call id is compared by hand.
+  let answeredCall = props.block.callId;
+  createEffect(
+    on(
+      () => props.block.callId,
+      (callId) => {
+        if (callId === answeredCall) return;
+        answeredCall = callId;
+        // Only a new question starts fresh; the block returning to its parent call after this answer keeps it.
+        if (props.block.status !== "awaiting_approval") return;
+        setAnswer(null);
+        setLost(false);
+        setElsewhere(false);
+      },
+    ),
+  );
+  // A question that leaves this window open without an answer here was decided somewhere else. (`on` with `defer`
+  // never passes the first value as the previous one, so this effect runs from the start.)
+  createEffect(
+    on(
+      () => props.block.status === "awaiting_approval",
+      (open, wasOpen) => {
+        if (wasOpen === true && !open && answer() === null) setElsewhere(true);
+        if (!open) setLost(false);
+      },
+    ),
+  );
+  const request = () => ({ turnId: props.turnId, callId: props.block.callId, name: props.block.name });
+  const submit = async (input: { approved: boolean; remember?: "chat" }) => {
+    if (answer() !== null || !actions.onApproval) return;
+    // A failure belongs to the question it answered: the next question of the same block may already show.
+    const submitted = props.block.callId;
+    setLost(false);
+    setAnswer(input.approved ? "approve" : "decline");
+    try {
+      await actions.onApproval(request(), input);
+    } catch {
+      if (props.block.callId === submitted) setLost(true);
+    }
+  };
+  const reopen = () => {
+    setLost(false);
+    setAnswer(null);
+  };
+  // The stored check wins once it is settled or newer than the one this card asked for, so another window's check
+  // or a reload is never hidden behind an older local answer.
+  const check = () => {
+    const local = checked();
+    const stored = props.block.check;
+    if (!local || !stored) return local ?? stored;
+    if (stored.state === "done" || stored.state === "not_done") return stored;
+    return (stored.at ?? "") > (local.at ?? "") ? stored : local;
+  };
+  // A stored claim of a running check expires at a known moment; past it the card offers to check again. The clock is
+  // read again whenever the claim changes, so a claim that arrives late expires on time too.
+  const [now, setNow] = createSignal(Date.now());
+  const claimAt = () => (check()?.state === "checking" ? check()?.at : undefined);
+  createEffect(
+    on(claimAt, (at) => {
+      setNow(Date.now());
+      if (!at) return;
+      const remaining = Date.parse(at) + AI_TOOL_CHECK_STALE_MS - Date.now();
+      if (remaining <= 0) return;
+      const timer = setTimeout(() => setNow(Date.now()), remaining + 50);
+      onCleanup(() => clearTimeout(timer));
+    }),
+  );
+  const claimAge = () => {
+    const at = claimAt();
+    return at ? now() - Date.parse(at) : null;
+  };
+  const flow = createMemo(() =>
+    flowOf({
+      block: props.block,
+      state: props.state,
+      answer: answer(),
+      lost: lost(),
+      check: check(),
+      phase: props.phase,
+      staleCheck: (claimAge() ?? 0) > AI_TOOL_CHECK_STALE_MS,
+    }),
+  );
+  const decisionState = (): ChatDecisionState => {
+    if (props.block.status === "awaiting_approval") return answer() === null && !lost() ? "open" : "sending";
+    return flow().flow === "expired" ? "expired" : "decided";
+  };
+  const time = () => (props.block.at ? dates.formatTime(props.block.at, { locale: card().locale, timeZone }) : undefined);
+  // A line that waits hidden in the cell reserves room for the time it will show, so it cannot wrap later. The widest
+  // time of the day stands in until the real one is known.
+  const reservedTime = () => time() ?? dates.formatTime("2000-01-01T23:58:00.000Z", { locale: card().locale, timeZone: "UTC" });
+  const receiptText = (): ActionText => {
+    const result = isRecord(props.block.result) ? props.block.result : null;
+    const receipt = CapabilityActionReceiptSchema.safeParse(result?.receipt);
+    return receipt.success ? actionReceiptText(receipt.data, card(), timeZone) : card().forms.done;
+  };
+  const checkAgain = async () => {
+    if (!actions.onCheckAction || checking()) return;
+    setChecking(true);
+    setCheckError(false);
+    try {
+      setChecked(await actions.onCheckAction(request()));
+    } catch {
+      setCheckError(true);
+    } finally {
+      setChecking(false);
+    }
+  };
+  const unknownActions = (withCheck: boolean): JSX.Element => (
+    <>
+      <Show when={card().open}>
+        {(href) => (
+          <ButtonLink href={href()} size="sm" variant="subtle">
+            <i class={card().app.icon} aria-hidden="true" />
+            {t().openIn({ app: card().app.name })}
+          </ButtonLink>
+        )}
+      </Show>
+      <Show when={withCheck && card().hasCheck && actions.onCheckAction}>
+        <Button size="sm" variant="subtle" loading={checking()} onClick={() => void checkAgain()}>
+          <i class="ti ti-refresh" aria-hidden="true" />
+          {t().checkAgain}
+        </Button>
+      </Show>
+    </>
+  );
+  const askAgain = () =>
+    actions.onContinueTurn
+      ? { label: t().askAgain, onSelect: () => actions.onContinueTurn?.(t().askAgainMessage({ sentence: card().short })) }
+      : undefined;
+  const lines = createMemo((): Record<string, ActionLine> => {
+    const current = flow();
+    const c = card();
+    const words = t();
+    switch (current.flow) {
+      case "run":
+        return {
+          running: { tone: "running", text: c.forms.running },
+          done: {
+            tone: "done",
+            text: receiptText(),
+            time: current.current === "done" ? time() : reservedTime(),
+            ...(elsewhere() ? { detail: words.approvedElsewhere } : {}),
+            ...(resultLinks(props.block).length > 0 ? { actions: <ResultLinks links={resultLinks(props.block)} align="start" /> } : {}),
+          },
+        };
+      case "rejected": {
+        const rejected: ActionLine = {
+          tone: "off",
+          text: c.forms.rejected,
+          detail: elsewhere() ? words.declinedElsewhere : words.declined,
+          time: time(),
+        };
+        // The time arrives with the server's answer; a hidden twin with room for it keeps the line from growing then.
+        return time() ? { rejected } : { rejected, rejectedTimed: { ...rejected, time: reservedTime() } };
+      }
+      case "expired":
+        return { expired: { tone: "off", icon: "ti ti-clock-x", text: c.forms.notRun, detail: words.expired, action: askAgain() } };
+      case "stopped":
+        return { stopped: { tone: "off", text: c.forms.notRun, detail: words.stopped } };
+      case "error":
+        return {
+          error: {
+            tone: "error",
+            text: c.forms.notRun,
+            detail: errorDetail(props.block.result) || aiChatMessages(c.locale).actionNotCompleted,
+            time: time(),
+          },
+        };
+      case "failed":
+        return {
+          failed: {
+            tone: "error",
+            text: [{ kind: "text", text: aiChatMessages(c.locale).receiptFailed({ title: c.short }) }],
+            detail: errorDetail(props.block.result) || aiChatMessages(c.locale).actionNotCompleted,
+            time: time(),
+          },
+        };
+      case "lost":
+        return {
+          lost: {
+            tone: "warning",
+            icon: "ti ti-alert-triangle",
+            text: [...splitFrame(words.lostAbout({ subject: "\u0000" }), c.subject)],
+            detail: words.lostDetail,
+            action: { label: words.answerAgain, onSelect: reopen },
+          },
+        };
+      case "check": {
+        const app = c.app.name;
+        const settled = check()?.receipt ? actionReceiptText(check()!.receipt!, c, timeZone) : c.forms.done;
+        const failedDetail = checkError() ? words.checkAgainFailed : undefined;
+        // Only the lines this check can still reach share the cell: a settled outcome stands alone, an open one keeps
+        // the room the next check needs.
+        const all: Record<string, ActionLine> = {
+          checking: { tone: "running", text: c.forms.unknown, detail: words.checking({ app }) },
+          checkedDone: { tone: "done", text: settled, detail: words.checkedDone({ app }), time: time() },
+          checkedNotDone: { tone: "off", text: c.forms.notRun, detail: words.checkedNotDone({ app }), time: time() },
+          pending: {
+            tone: "warning",
+            icon: "ti ti-help-circle",
+            text: c.forms.unknown,
+            detail: failedDetail ?? words.checkPending({ app }),
+            actions: unknownActions(true),
+          },
+          checkFailed: {
+            tone: "warning",
+            icon: "ti ti-help-circle",
+            text: c.forms.unknownStill,
+            detail: failedDetail ?? words.checkFailed({ app }),
+            actions: unknownActions(true),
+          },
+          // No check ran, such as when Core could not store its claim; the review's check, if any, is the person's.
+          noCheck: {
+            tone: "warning",
+            icon: "ti ti-help-circle",
+            text: c.forms.unknown,
+            detail: failedDetail ?? words.noCheck,
+            ...(c.open || c.hasCheck ? { actions: unknownActions(true) } : {}),
+          },
+          // A call the turn's end cut off has no check yet; the review's check, if any, is the person's to start.
+          cutOff: {
+            tone: "warning",
+            icon: "ti ti-help-circle",
+            text: c.forms.unknown,
+            detail: failedDetail ?? words.cutOff,
+            ...(c.open || c.hasCheck ? { actions: unknownActions(true) } : {}),
+          },
+        };
+        const reachable: Record<typeof current.current, (keyof typeof all)[]> = {
+          checking: ["checking", "checkedDone", "checkedNotDone", "pending", "checkFailed"],
+          pending: ["pending", "checkFailed", "checkedDone", "checkedNotDone"],
+          checkFailed: ["pending", "checkFailed", "checkedDone", "checkedNotDone"],
+          checkedDone: ["checkedDone"],
+          checkedNotDone: ["checkedNotDone"],
+          noCheck: ["noCheck", "checkedDone", "checkedNotDone", "pending", "checkFailed"],
+          cutOff: ["cutOff", "checkedDone", "checkedNotDone", "pending", "checkFailed"],
+        };
+        return Object.fromEntries(reachable[current.current].map((key) => [key, all[key]!]));
+      }
+    }
+  });
+  const currentKey = () => {
+    const current = flow();
+    return "current" in current ? current.current : current.flow;
+  };
+  const unavailable = () => {
+    if (!actions.onApproval) return actionMessages(card().locale).unavailable;
+    if (actions.actionDisabled?.()) return actionMessages(card().locale).stopping;
+    return undefined;
+  };
+  const remember = () => {
+    const approval = props.block.approval;
+    if (!approval?.allowChat) return undefined;
+    return {
+      label: approval.website ? t().rememberWebsite : t().remember,
+      onSelect: () => submit({ approved: true, remember: "chat" }),
+    };
+  };
+  return (
+    <ActionQuestion
+      card={card()}
+      state={decisionState()}
+      timeZone={timeZone}
+      anchorId={props.block.id}
+      unavailable={unavailable()}
+      remember={remember()}
+      onConfirm={() => submit({ approved: true })}
+      onDecline={() => submit({ approved: false })}
+      outcome={<ActionReceipt card={card()} lines={lines()} current={currentKey()} />}
+    />
+  );
+}
+
+/** Links a result offers, limited to paths inside this Cloud. */
+export const resultLinks = (block: ToolBlock): Record<string, unknown>[] => {
+  const value = (isRecord(block.result) ? block.result : null)?.links;
+  return Array.isArray(value)
+    ? value.filter(
+        (link): link is Record<string, unknown> =>
+          isRecord(link) && typeof link.href === "string" && /^\/(?![\\/])[^\\\u0000-\u001f\u007f]*$/.test(link.href),
+      )
+    : [];
+};
+
+export function ResultLinks(props: { links: Record<string, unknown>[]; align?: "start" | "end" }) {
+  const locale = useLocale();
+  const t = () => aiChatMessages(locale());
+  const label = (link: Record<string, unknown>) =>
+    typeof link.title === "string" ? link.title : link.rel === "edit" ? t().edit : link.rel === "download" ? t().download : t().open;
+  return (
+    <span class={`flex min-w-0 flex-wrap items-center gap-1 ${props.align === "start" ? "justify-start" : "justify-end"}`}>
+      <For each={props.links}>
+        {(link) => (
+          <ButtonLink
+            class="ai-chat-result-link"
+            href={String(link.href)}
+            target="_blank"
+            rel="noopener noreferrer"
+            size="xs"
+            variant="ghost"
+          >
+            {label(link)}
+          </ButtonLink>
+        )}
+      </For>
+    </span>
+  );
+}
+
+/** Puts a sentence into a frame such as "Your answer about \u0000 didn't arrive." */
+const splitFrame = (frame: string, inner: ActionText): ActionText => {
+  const [before = "", after = ""] = frame.split("\u0000");
+  return [
+    ...(before ? [{ kind: "text" as const, text: before }] : []),
+    ...inner,
+    ...(after ? [{ kind: "text" as const, text: after }] : []),
+  ];
+};

package/src/ai/chat/turn-view.tsx

@@ -1,5 +1,4 @@
-import { dates } from "@k2b/stdlib";
-import { announce, Button, ButtonLink, Chat, NoticeCard, useLocale } from "@k2b/ui";
+import { announce, Button, Chat, NoticeCard, useLocale } from "@k2b/ui";
 import {
   type Accessor,
   createEffect,
@@ -19,34 +18,20 @@ import { markdown } from "../../shared";
 import { type ChatTaskReason, chatTaskReasonSentence, chatTaskReasonState, chatTaskStopSentence } from "../chat-task-reasons";
 import { AI_TURN_LEASE_MS, type AiTurnBlock } from "../protocol";
 import type { AiTurnError } from "../types";
-import { toolOutcome, toolSubject, useReaderTimeZone } from "./action-sentences";
-import {
-  type AiApprovalDecision,
-  ApprovalBlockView,
-  CompactionBlockView,
-  CompactToolRow,
-  SurveyToolView,
-  TextEditorToolView,
-} from "./blocks";
+import { toolSubject, useReaderTimeZone } from "./action-sentences";
+import { CompactionBlockView, CompactToolRow, SurveyToolView, TextEditorToolView } from "./blocks";
 import { CapabilityTablePreview } from "./capability-table";
 import { CloudChartBlock } from "./chart-block";
 import { PresentToolBlock } from "./file-tools";
 import { useAiChatActions } from "./message-actions";
-import {
-  aiToolIcon,
-  capabilityErrorDescription,
-  displayToolName,
-  isCardToolName,
-  isChartToolName,
-  isRecord,
-  isSurveyToolName,
-} from "./message-utils";
+import { aiToolIcon, displayToolName, isCardToolName, isChartToolName, isRecord, isSurveyToolName } from "./message-utils";
 import { aiChatMessages } from "./messages";
 import { AssistantMarkdownBlock } from "./primitives";
+import { ResultLinks, resultLinks, ToolActionView } from "./tool-action";
 import { AiToolActivity, AiToolDisclosureProvider, type AiToolDisclosureState } from "./tool-disclosure";
 import { type AiWorkEntry, type AiWorkItem, countWorkSteps, groupWorkBlocks } from "./tool-groups";
 import { aiTurnErrorCanContinue, aiTurnErrorDescription } from "./turn-error";
-import type { AiTurnAction, AiTurnActionState, AiTurnLayout, AiTurnPhase, AiTurnResult } from "./turn-layout";
+import type { AiTurnAction, AiTurnLayout, AiTurnPhase, AiTurnResult } from "./turn-layout";
 import { CloudCardBlock } from "./visual-tools";
 
 type ToolBlock = Extract<AiTurnBlock, { kind: "tool" }>;
@@ -427,42 +412,6 @@ const resultSummary = (block: ToolBlock): string => {
   return typeof value === "string" && value.trim().length <= 500 ? value.trim() : "";
 };
 
-/** Links a result offers, limited to paths inside this Cloud. */
-const resultLinks = (block: ToolBlock): Record<string, unknown>[] => {
-  const value = resultRecord(block)?.links;
-  return Array.isArray(value)
-    ? value.filter(
-        (link): link is Record<string, unknown> =>
-          isRecord(link) && typeof link.href === "string" && /^\/(?![\\/])[^\\\u0000-\u001f\u007f]*$/.test(link.href),
-      )
-    : [];
-};
-
-function ResultLinks(props: { links: Record<string, unknown>[] }) {
-  const locale = useLocale();
-  const t = () => aiChatMessages(locale());
-  const label = (link: Record<string, unknown>) =>
-    typeof link.title === "string" ? link.title : link.rel === "edit" ? t().edit : link.rel === "download" ? t().download : t().open;
-  return (
-    <span class="flex min-w-0 flex-wrap items-center justify-end gap-1">
-      <For each={props.links}>
-        {(link) => (
-          <ButtonLink
-            class="ai-chat-result-link"
-            href={String(link.href)}
-            target="_blank"
-            rel="noopener noreferrer"
-            size="xs"
-            variant="ghost"
-          >
-            {label(link)}
-          </ButtonLink>
-        )}
-      </For>
-    </span>
-  );
-}
-
 /** The summary and links of a table result, unless its receipt in place 4 already shows them. */
 function CapabilityResultRow(props: { block: ToolBlock }) {
   const locale = useLocale();
@@ -526,87 +475,11 @@ function AiTurnResultView(props: { result: Accessor<AiTurnResult | undefined>; r
   );
 }
 
-type ReceiptState = Exclude<AiTurnActionState, "open" | "interaction">;
-
-/**
- * One line for an action in place 4, the same element while it runs and once it is done, rejected, failed, or not run.
- * It says what happened in the owning app's words: its sentence for the outcome, such as "Moved report.pdf to the
- * trash", else, once done, the application's own summary of the call. Without either it puts the state in the reader's
- * language before what the call does, such as "Rejected: Write report.md", or before its title and target.
- */
-function AiReceipt(props: { block: ToolBlock; state: ReceiptState; stopped: boolean }) {
-  const locale = useLocale();
-  const timeZone = useReaderTimeZone();
-  const t = () => aiChatMessages(locale());
-  const block = () => props.block;
-  const subject = () => {
-    const sentence = toolSubject(block(), locale(), timeZone);
-    if (sentence) return sentence;
-    const title = block().presentation?.title ?? displayToolName(block().name, locale());
-    const target = toolTarget(block());
-    return target ? `${title} · ${target}` : title;
-  };
-  const capabilityAction = () => block().presentation?.kind === "capability";
-  const links = () => (props.state === "done" ? resultLinks(block()) : []);
-  const outcomeLabel = () => {
-    const state = props.state;
-    if (state === "running") return t().receiptRunning({ title: subject() });
-    if (state === "done") {
-      // A tool that is not a Cloud action has no effect of its own to report; the receipt records the decision.
-      if (!capabilityAction()) return t().receiptApproved({ title: subject() });
-      return toolOutcome(block(), "done", locale(), timeZone) || resultSummary(block()) || t().receiptDone({ title: subject() });
-    }
-    if (state === "rejected") return toolOutcome(block(), "rejected", locale(), timeZone) ?? t().receiptRejected({ title: subject() });
-    if (state === "failed") return t().receiptFailed({ title: subject() });
-    const notRun = toolOutcome(block(), "notRun", locale(), timeZone);
-    return notRun
-      ? t().receiptNotRunSentence({ sentence: notRun, stopped: props.stopped })
-      : t().receiptNotRun({ title: subject(), stopped: props.stopped });
-  };
-  const declined = () => props.state === "rejected" || props.state === "not_run";
-  const label = () => {
-    const at = block().at;
-    return at && props.state !== "running" ? `${outcomeLabel()} · ${dates.formatTime(at, { locale: locale(), timeZone })}` : outcomeLabel();
-  };
-  return (
-    <Chat.Activity
-      class="ai-turn-receipt"
-      icon={declined() ? "ti ti-circle-off" : aiToolIcon(block().name, block().presentation?.appIcon)}
-      accent={declined() ? undefined : block().presentation?.appAccent}
-      label={label()}
-      busy={props.state === "running"}
-      description={props.state === "failed" ? capabilityErrorDescription(block().result) : undefined}
-      trailing={links().length > 0 ? <ResultLinks links={links()} /> : undefined}
-    />
-  );
-}
-
 function AiTurnActionView(props: { action: Accessor<AiTurnAction | undefined>; turnId: string; phase: AiTurnPhase }) {
   const locale = useLocale();
   const timeZone = useReaderTimeZone();
-  let row!: HTMLDivElement;
-  // Set while focus is in this place, including after the focused control disappeared with the decided card.
-  let focusedHere = false;
-  // The decision the server accepted for a card here; its receipt replaces the card before the turn reports it. It
-  // belongs to the call it answered: code that asks again shows the next request on the same block as a new card.
-  const [decided, setDecided] = createSignal<AiApprovalDecision | null>(null);
   const action = () => props.action();
   const state = () => action()?.state;
-  const decision = () => {
-    const current = action();
-    const value = decided();
-    return current && value?.callId === current.block.callId ? value.approved : null;
-  };
-  const card = () => {
-    const current = action();
-    return current?.state === "open" && current.block.status === "awaiting_approval" && decision() === null ? current.block : undefined;
-  };
-  const receipt = (): ReceiptState | undefined => {
-    const current = action();
-    if (!current || card()) return undefined;
-    if (current.state === "open" && current.block.status === "awaiting_approval") return decision() ? "running" : "rejected";
-    return current.state === "open" || current.state === "interaction" ? undefined : current.state;
-  };
   // Screen readers hear a waiting approval once, as one short line instead of the whole card, without moving focus.
   createEffect(
     on(state, (next, previous) => {
@@ -622,37 +495,14 @@ function AiTurnActionView(props: { action: Accessor<AiTurnAction | undefined>; t
       );
     }),
   );
-  // A card the user decided becomes its receipt in place, once, as the direct result of the decision. Focus stays on
-  // that place without scrolling.
-  createEffect(
-    on(
-      () => card() !== undefined,
-      (open, wasOpen) => {
-        if (!wasOpen || open || !focusedHere || typeof document === "undefined") return;
-        const focused = document.activeElement;
-        if (!focused || focused === document.body || row.contains(focused)) row.focus({ preventScroll: true });
-      },
-    ),
-  );
   return (
-    <div
-      ref={row}
-      class="ai-turn__action"
-      aria-live="off"
-      tabIndex={-1}
-      onFocusIn={() => {
-        focusedHere = true;
-      }}
-      onFocusOut={(event) => {
-        if (event.relatedTarget instanceof Node && !row.contains(event.relatedTarget)) focusedHere = false;
-      }}
-    >
+    <div class="ai-turn__action" aria-live="off">
       <Show when={action()}>
         {(current) => (
           <Switch>
-            <Match when={card()}>{(block) => <ApprovalBlockView turnId={props.turnId} block={block()} onDecided={setDecided} />}</Match>
-            <Match when={receipt()}>
-              {(receiptState) => <AiReceipt block={current().block} state={receiptState()} stopped={props.phase === "stopped"} />}
+            {/* A question and every outcome of its call share one element, so an answer collapses it in place. */}
+            <Match when={current().state !== "interaction"}>
+              <ToolActionView block={current().block} turnId={props.turnId} state={current().state} phase={props.phase} />
             </Match>
             <Match when={true}>
               <Switch