@k2b/cloud 0.29.0 → 0.30.0

package/src/ai/chat/blocks.tsx

@@ -2,12 +2,15 @@ import { dates } from "@k2b/stdlib";
 import { mutation } from "@k2b/stdlib/solid";
 import { Button, ButtonLink, Chat, isStructuredDataValue, MarkdownView, SplitButton, StructuredDataPreview, useLocale } from "@k2b/ui";
 import { createSignal, createUniqueId, For, type JSX, Match, Show, Switch, untrack } from "solid-js";
+import { capabilityApprovalReason, capabilityApprovalReasonLabel } from "../../_internal/capability-sentences";
 import type { CapabilityActionReview } from "../../contracts/capabilities";
 import { markdown } from "../../shared";
 import type { AiTurnBlock } from "../protocol";
+import { toolOutcome, toolSubject } from "./action-sentences";
 import { hasSpecializedBuiltinToolView, SpecializedBuiltinToolBlock } from "./builtin-tools";
 import { hasCapabilityTable } from "./capability-result";
 import { CapabilityTablePreview } from "./capability-table";
+import { CloudChartBlock } from "./chart-block";
 import { PresentToolBlock } from "./file-tools";
 import { useAiChatActions } from "./message-actions";
 import {
@@ -18,6 +21,7 @@ import {
   fetchFileErrorPresentation,
   formatToolDetailText,
   isCardToolName,
+  isChartToolName,
   isRecord,
   isSurveyToolName,
   isTextEditorToolName,
@@ -183,7 +187,14 @@ function ToolResultDisclosure(props: {
   );
 }
 
-export function ApprovalBlockView(props: { turnId: string; block: ToolBlock }) {
+/** A decision the server accepted, for the call it answered. */
+export type AiApprovalDecision = { callId: string; approved: boolean };
+
+/**
+ * The pending approval: a calm tinted card that says what will happen, with its fields and the decision. `onDecided`
+ * hears an accepted decision with the call it answered, so the turn can show its receipt in the card's place right away.
+ */
+export function ApprovalBlockView(props: { turnId: string; block: ToolBlock; onDecided?: (decision: AiApprovalDecision) => void }) {
   const actions = useAiChatActions();
   const locale = useLocale();
   const t = () => aiChatMessages(locale());
@@ -192,21 +203,34 @@ export function ApprovalBlockView(props: { turnId: string; block: ToolBlock }) {
   const actionDisabled = () => actions.actionDisabled?.() ?? false;
   const [submitted, setSubmitted] = createSignal(false);
   const [detailsOpen, setDetailsOpen] = createSignal(false);
+  // The call this card answered: a later approval for the same block may already have arrived when the server accepts.
+  let decision: AiApprovalDecision | null = null;
   const approval = mutation.create<void, { approved: boolean; remember?: "always" }>({
     mutation: async (input) => {
       if (!actions.onApproval) throw new Error("Approval is unavailable.");
       await actions.onApproval(request(), input);
     },
-    onSuccess: () => setSubmitted(true),
+    onSuccess: () => {
+      setSubmitted(true);
+      if (decision) props.onDecided?.(decision);
+    },
   });
   const submit = (input: { approved: boolean; remember?: "always" }) => {
-    if (!actionDisabled() && !approval.loading()) void approval.mutate(input);
+    if (actionDisabled() || approval.loading()) return;
+    decision = { callId: props.block.callId, approved: input.approved };
+    void approval.mutate(input);
   };
-  const title = () => props.block.presentation?.title ?? displayToolName(props.block.name, locale());
+  // The heading says what will happen in the owning app's words; the app or the assistant name stays beside it.
+  const title = () => toolSubject(props.block, locale()) ?? props.block.presentation?.title ?? displayToolName(props.block.name, locale());
   const ownerName = () => props.block.presentation?.appName ?? t().assistant;
+  const capability = () => props.block.presentation?.kind === "capability";
+  // The model's own reason, labelled as such, only where Cloud offered it; it adds to the app's sentence and never replaces it.
+  const reason = () => (props.block.presentation?.approvalReason ? capabilityApprovalReason(props.block.args) : null);
   const description = () => {
     const reviewMessage = props.block.approval?.review?.message.trim();
     if (reviewMessage) return reviewMessage;
+    // An app Action's approval text repeats its heading and reason for text-only readers; the card shows them itself.
+    if (capability()) return null;
     const message = props.block.approval?.message?.trim();
     if (!message) return null;
     const duplicateTitle = props.block.presentation ? `${props.block.presentation.appName}: ${props.block.presentation.title}` : "";
@@ -239,199 +263,174 @@ export function ApprovalBlockView(props: { turnId: string; block: ToolBlock }) {
       download: t().download,
     })[rel];
   const detailData = () => (isStructuredDataValue(props.block.args) ? props.block.args : undefined);
-  const appAccent = () => props.block.presentation?.appAccent;
   const detailsId = `approval-details-${props.block.callId}`;
   return (
-    <div class="w-full">
-      <section
-        class={`w-full overflow-hidden rounded-xl border border-[var(--k2b-border)] bg-[var(--k2b-surface)] text-sm text-primary ${appAccent() ? "app-accent-scope" : ""}`}
-        style={{ "--app-accent": appAccent() }}
-        aria-label={t().approvalRequired({ title: title() })}
-      >
-        <div class="p-4">
-          <div class="flex min-w-0 items-center gap-3">
-            <span
-              class="inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-base leading-none"
-              style={{
-                color: appAccent() ? "var(--ui-app-accent-text)" : "var(--k2b-ai-accent)",
-                background: appAccent()
-                  ? "color-mix(in srgb, var(--app-accent) 10%, var(--k2b-surface))"
-                  : "color-mix(in srgb, var(--k2b-ai-accent) 10%, var(--k2b-surface))",
-              }}
-              aria-hidden="true"
-            >
-              <i class={`${aiToolIcon(props.block.name, props.block.presentation?.appIcon)} leading-none`} />
-            </span>
-            <div class="min-w-0">
-              <h3 class="truncate text-sm font-semibold leading-5 text-primary">
-                {ownerName()} · {title()}
-              </h3>
-              <p class="text-xs text-dimmed">{t().action}</p>
-            </div>
-          </div>
-          <Show when={reviewLines().length > 0}>
-            <div class="mt-4 flex flex-col gap-1 text-xs leading-5 text-secondary">
-              <For each={reviewLines()}>
-                {(line) => (
-                  <p class="whitespace-pre-wrap">
-                    <Show when={line.label}>{(label) => <strong class="font-semibold text-primary">{label()}: </strong>}</Show>
-                    {line.value}
-                  </p>
-                )}
-              </For>
-            </div>
-          </Show>
-          <Show when={props.block.approval?.review}>
-            <div class="mt-4 flex flex-col gap-4 text-xs leading-5 text-secondary">
-              <p class="whitespace-pre-wrap">{description()}</p>
-              <Show when={inlineReviewDetails().length > 0}>
-                <dl class="grid gap-x-5 gap-y-1.5 sm:grid-cols-[max-content_minmax(0,1fr)]">
-                  <For each={inlineReviewDetails()}>
-                    {(detail) => (
-                      <>
-                        <dt class="font-semibold text-primary">{detail.label}</dt>
-                        <dd class="min-w-0 whitespace-pre-wrap break-words">
-                          <ReviewDetailValue detail={detail} />
-                        </dd>
-                      </>
-                    )}
-                  </For>
-                </dl>
+    <section class="ai-approval" aria-label={t().approvalRequired({ title: title() })}>
+      <div class="ai-approval__head">
+        <i class={`ai-approval__icon ${aiToolIcon(props.block.name, props.block.presentation?.appIcon)}`} aria-hidden="true" />
+        <div class="min-w-0">
+          <h3 class="ai-approval__title">{title()}</h3>
+          <p class="ai-approval__sub">
+            {ownerName()} · {t().approvalRunsAfter}
+          </p>
+        </div>
+      </div>
+      <Show when={reviewLines().length > 0}>
+        <div class="ai-approval__text">
+          <For each={reviewLines()}>
+            {(line) => (
+              <p class="whitespace-pre-wrap">
+                <Show when={line.label}>{(label) => <strong class="ai-approval__label">{label()}: </strong>}</Show>
+                {line.value}
+              </p>
+            )}
+          </For>
+        </div>
+      </Show>
+      <Show when={props.block.approval?.review}>
+        <p class="ai-approval__text whitespace-pre-wrap">{description()}</p>
+        <Show when={inlineReviewDetails().length > 0}>
+          <dl class="ai-approval__fields">
+            <For each={inlineReviewDetails()}>
+              {(detail) => (
+                <>
+                  <dt>{detail.label}</dt>
+                  <dd class="whitespace-pre-wrap">
+                    <ReviewDetailValue detail={detail} />
+                  </dd>
+                </>
+              )}
+            </For>
+          </dl>
+        </Show>
+        <For each={blockReviewDetails()}>
+          {(detail) => (
+            <section class="ai-approval__text min-w-0" aria-label={detail.label}>
+              <h4 class="ai-approval__label mb-1">{detail.label}</h4>
+              <Show
+                when={detail.format === "markdown"}
+                fallback={
+                  <pre
+                    class="ai-approval__preview whitespace-pre-wrap break-words font-sans"
+                    role="region"
+                    tabIndex={0}
+                    aria-label={t().contentOf({ label: detail.label })}
+                  >
+                    <ReviewDetailValue detail={detail} />
+                  </pre>
+                }
+              >
+                <div class="ai-approval__preview" role="region" tabIndex={0} aria-label={detail.label}>
+                  <MarkdownView class="cloud-ai-approval-detail" markdown={detail.value} headingScale="compact" allowImages={false} />
+                </div>
               </Show>
-              <For each={blockReviewDetails()}>
-                {(detail) => (
-                  <section class="min-w-0" aria-label={detail.label}>
-                    <h4 class="mb-1.5 font-semibold text-primary">{detail.label}</h4>
-                    <Show
-                      when={detail.format === "markdown"}
-                      fallback={
-                        <pre
-                          class="max-h-72 overflow-auto whitespace-pre-wrap break-words pr-2 font-sans text-xs leading-5 text-secondary"
-                          role="region"
-                          tabIndex={0}
-                          aria-label={t().contentOf({ label: detail.label })}
-                        >
-                          <ReviewDetailValue detail={detail} />
-                        </pre>
-                      }
-                    >
-                      <div
-                        class="-mx-2 max-h-72 overflow-auto px-2 text-xs text-secondary"
-                        role="region"
-                        tabIndex={0}
-                        aria-label={detail.label}
-                      >
-                        <MarkdownView class="cloud-ai-approval-detail" markdown={detail.value} headingScale="compact" allowImages={false} />
-                      </div>
-                    </Show>
-                  </section>
-                )}
-              </For>
-            </div>
+            </section>
+          )}
+        </For>
+      </Show>
+      <Show when={reason()}>
+        {(text) => (
+          <p class="ai-approval__text whitespace-pre-wrap">
+            <strong class="ai-approval__label">{capabilityApprovalReasonLabel(locale())}: </strong>
+            {text()}
+          </p>
+        )}
+      </Show>
+      <Show when={detailsOpen()}>
+        <div id={detailsId} class="w-full min-w-0" role="region" aria-label={t().detailsFor({ title: title() })}>
+          <Show when={detailData()} fallback={<pre class="ai-approval__preview text-[11px]">{jsonPreview(props.block.args)}</pre>}>
+            {(data) => <StructuredDataPreview data={data()} class="w-full" />}
           </Show>
         </div>
-        {/* The decision continues the card below its content: spacing, not a line or a band, sets it apart. */}
-        <footer class="flex min-h-12 flex-wrap items-center gap-2 px-4 pb-3" data-ai-approval-footer>
-          {/* Present from the start, so screen readers announce progress after the decision buttons leave. */}
-          <span class="k2b-sr-only" role="status" aria-live="polite">
-            {approval.loading() ? t().submitting : submitted() ? t().submitted : ""}
-          </span>
-          <Show when={reviewLinks().length > 0}>
-            <nav class="flex flex-wrap gap-1" aria-label={t().linksFor({ title: title() })}>
-              <For each={reviewLinks()}>
-                {(link) => (
-                  <ButtonLink href={link.href} target="_blank" rel="noopener noreferrer" size="xs" variant="ghost">
-                    {link.title ?? reviewLinkTitle(link.rel)}
-                  </ButtonLink>
-                )}
-              </For>
-            </nav>
-          </Show>
-          <Show when={approval.error()}>
-            <p class="text-xs text-red-700 dark:text-red-300" role="alert">
-              {t().approvalFailed}
-            </p>
-          </Show>
-          <div class="ml-auto shrink-0">
-            <Show
-              when={pending()}
-              fallback={
-                <span class="text-xs font-medium text-secondary">
-                  {title()} · {props.block.status === "rejected" ? t().rejected : t().approved}
-                </span>
-              }
-            >
-              <Show when={actions.onApproval} fallback={<span class="text-xs font-medium text-secondary">{t().approvalUnavailable}</span>}>
+      </Show>
+      {/* The decision continues the card below its content: spacing, not a line or a band, sets it apart. */}
+      <footer class="ai-approval__foot" data-ai-approval-footer>
+        {/* Present from the start, so screen readers announce progress after the decision buttons leave. */}
+        <span class="k2b-sr-only" role="status" aria-live="polite">
+          {approval.loading() ? t().submitting : submitted() ? t().submitted : ""}
+        </span>
+        <Show when={reviewLinks().length > 0}>
+          <nav class="flex flex-wrap gap-1" aria-label={t().linksFor({ title: title() })}>
+            <For each={reviewLinks()}>
+              {(link) => (
+                <ButtonLink href={link.href} target="_blank" rel="noopener noreferrer" size="xs" variant="ghost">
+                  {link.title ?? reviewLinkTitle(link.rel)}
+                </ButtonLink>
+              )}
+            </For>
+          </nav>
+        </Show>
+        <Show when={approval.error()}>
+          <p class="text-xs text-red-700 dark:text-red-300" role="alert">
+            {t().approvalFailed}
+          </p>
+        </Show>
+        <div class="ai-approval__actions">
+          <Show
+            when={pending()}
+            fallback={
+              <span class="ai-approval__state">
+                {title()} · {props.block.status === "rejected" ? t().rejected : t().approved}
+              </span>
+            }
+          >
+            <Show when={actions.onApproval} fallback={<span class="ai-approval__state">{t().approvalUnavailable}</span>}>
+              <Show
+                when={!actionDisabled()}
+                fallback={
+                  <span class="ai-approval__state">
+                    <i class="ti ti-player-stop" aria-hidden="true" />
+                    {t().stoppingResponse}
+                  </span>
+                }
+              >
                 <Show
-                  when={!actionDisabled()}
+                  when={!submitted()}
                   fallback={
-                    <span class="inline-flex items-center gap-1 text-xs font-medium text-secondary">
-                      <i class="ti ti-player-stop" aria-hidden="true" />
-                      {t().stoppingResponse}
+                    <span class="ai-approval__state">
+                      <i class="ti ti-check" aria-hidden="true" />
+                      {t().submitted}
                     </span>
                   }
                 >
-                  <Show
-                    when={!approval.loading() && !submitted()}
-                    fallback={
-                      <span class="inline-flex items-center gap-1 text-xs font-medium text-secondary">
-                        <i class={`ti ${submitted() ? "ti-check" : "ti-loader-2 animate-spin"}`} aria-hidden="true" />
-                        {submitted() ? t().submitted : t().submitting}
-                      </span>
-                    }
+                  {/* The buttons stay while the decision is sent, so the card does not change its height before it
+                      becomes its receipt. */}
+                  <Button size="sm" variant="ghost" disabled={approval.loading()} onClick={() => submit({ approved: false })}>
+                    {t().reject}
+                  </Button>
+                  <SplitButton
+                    size="sm"
+                    variant="ai"
+                    loading={approval.loading()}
+                    onClick={() => submit({ approved: true })}
+                    menuLabel={t().moreOptions({ title: title() })}
+                    menuPosition="bottom-right"
+                    items={[
+                      {
+                        label: detailsOpen() ? t().hideDetails : t().details,
+                        icon: detailsOpen() ? "ti ti-eye-off" : "ti ti-eye",
+                        action: () => setDetailsOpen((open) => !open),
+                      },
+                      ...(props.block.approval?.allowAlways
+                        ? [
+                            {
+                              label: t().alwaysApprove,
+                              icon: "ti ti-shield-check",
+                              action: () => submit({ approved: true, remember: "always" }),
+                            },
+                          ]
+                        : []),
+                    ]}
                   >
-                    <div class="flex flex-wrap justify-end gap-1">
-                      <Button size="xs" variant="ghost" onClick={() => submit({ approved: false })}>
-                        {t().reject}
-                      </Button>
-                      <SplitButton
-                        size="xs"
-                        variant="ai"
-                        onClick={() => submit({ approved: true })}
-                        menuLabel={t().moreOptions({ title: title() })}
-                        menuPosition="bottom-right"
-                        items={[
-                          {
-                            label: detailsOpen() ? t().hideDetails : t().details,
-                            icon: detailsOpen() ? "ti ti-eye-off" : "ti ti-eye",
-                            action: () => setDetailsOpen((open) => !open),
-                          },
-                          ...(props.block.approval?.allowAlways
-                            ? [
-                                {
-                                  label: t().alwaysApprove,
-                                  icon: "ti ti-shield-check",
-                                  action: () => submit({ approved: true, remember: "always" }),
-                                },
-                              ]
-                            : []),
-                        ]}
-                      >
-                        {title()}
-                      </SplitButton>
-                    </div>
-                  </Show>
+                    {title()}
+                  </SplitButton>
                 </Show>
               </Show>
             </Show>
-          </div>
-        </footer>
-      </section>
-      <Show when={detailsOpen()}>
-        <div id={detailsId} class="mt-2 w-full" role="region" aria-label={t().detailsFor({ title: title() })}>
-          <Show
-            when={detailData()}
-            fallback={
-              <pre class="max-h-40 overflow-auto rounded-md bg-white/55 p-2 text-[11px] text-primary dark:bg-black/20">
-                {jsonPreview(props.block.args)}
-              </pre>
-            }
-          >
-            {(data) => <StructuredDataPreview data={data()} class="w-full" />}
           </Show>
         </div>
-      </Show>
-    </div>
+      </footer>
+    </section>
   );
 }
 
@@ -537,11 +536,11 @@ function CapabilityToolView(props: { block: ToolBlock }) {
 function RejectedToolView(props: { block: ToolBlock }) {
   const locale = useLocale();
   const presentation = () => props.block.presentation;
-  const title = () => presentation()?.title ?? displayToolName(props.block.name, locale());
+  const title = () => toolSubject(props.block, locale()) ?? presentation()?.title ?? displayToolName(props.block.name, locale());
   return (
     <Chat.Activity
       icon={aiToolIcon(props.block.name, presentation()?.appIcon)}
-      label={aiChatMessages(locale()).toolRejected({ title: title() })}
+      label={toolOutcome(props.block, "rejected", locale()) ?? aiChatMessages(locale()).toolRejected({ title: title() })}
       accent={presentation()?.appAccent}
     />
   );
@@ -713,6 +712,9 @@ function ToolBlockView(props: { turnId: string; block: ToolBlock; active?: boole
         <Match when={isCardToolName(props.block.name) && !props.block.isError}>
           <CloudCardBlock args={props.block.args} />
         </Match>
+        <Match when={isChartToolName(props.block.name) && !props.block.isError}>
+          <CloudChartBlock args={props.block.args} completed={status() === "completed"} />
+        </Match>
         <Match when={isSurveyToolName(props.block.name) && !props.block.isError}>
           <SurveyToolView turnId={props.turnId} block={props.block} active={props.active} />
         </Match>
@@ -810,7 +812,22 @@ export function CompactToolRow(props: { block: ToolBlock; busy?: boolean }) {
   const locale = useLocale();
   const t = () => aiChatMessages(locale());
   const args = () => (isRecord(props.block.args) ? props.block.args : {});
-  const detail = () => [args().path, args().name, args().query, args().title].find((value) => typeof value === "string");
+  /**
+   * A call that acts on something reads as its sentence, which already names what it acts on: what it will do while
+   * it runs or waits, what it did once done, and what did not happen when it was rejected.
+   */
+  const sentence = () => {
+    const status = props.block.status;
+    const outcome =
+      status === "completed" && !props.block.isError
+        ? toolOutcome(props.block, "done", locale())
+        : status === "rejected"
+          ? toolOutcome(props.block, "rejected", locale())
+          : null;
+    return outcome ?? toolSubject(props.block, locale());
+  };
+  const detail = () =>
+    sentence() ? undefined : [args().path, args().name, args().query, args().title].find((value) => typeof value === "string");
   const waiting = () => props.block.status === "awaiting_client" || props.block.status === "awaiting_approval";
   const state = () =>
     waiting() ? t().stepWaiting : props.block.status === "rejected" ? t().stepRejected : isFailedTool(props.block) ? t().stepFailed : "";
@@ -838,7 +855,7 @@ export function CompactToolRow(props: { block: ToolBlock; busy?: boolean }) {
   return (
     <AiToolActivity
       blockId={props.block.id}
-      label={props.block.presentation?.title ?? displayToolName(props.block.name, locale())}
+      label={sentence() ?? props.block.presentation?.title ?? displayToolName(props.block.name, locale())}
       description={[
         props.block.status === "running" ? (props.block.progress ?? "") : "",
         typeof detail() === "string" ? String(detail()) : "",
@@ -849,6 +866,7 @@ export function CompactToolRow(props: { block: ToolBlock; busy?: boolean }) {
         .join(" · ")}
       icon={icon()}
       busy={props.busy && props.block.status === "running"}
+      bodyInset={false}
       renderBody={() => (
         <div class="flex min-w-0 flex-col gap-2">
           <div

package/src/ai/chat/chart-block.tsx

@@ -0,0 +1,79 @@
+import { ChartExplorer, type ChartExplorerColumn, prepareChartSnapshot, useLocale } from "@k2b/ui";
+import { createMemo, Show } from "solid-js";
+import {
+  type CloudAiChartColumn,
+  type CloudAiChartRow,
+  cloudAiChartMarkKey,
+  cloudAiChartRenderOptions,
+  cloudAiChartRows,
+} from "../chart-block";
+import { parseCloudAiChartInput } from "../default-tool-contracts";
+import { aiChatMessages } from "./messages";
+
+const tooltip = (columns: CloudAiChartColumn[], row: CloudAiChartRow) => {
+  const [first, ...rest] = columns;
+  const named = first && !first.numeric;
+  return {
+    title: named ? row.cells[first.id] : undefined,
+    rows: (named ? rest : columns).map((column) => ({ label: column.label, value: row.cells[column.id] ?? "" })),
+  };
+};
+
+/**
+ * One `chart` tool call: the shared chart with its data table and Copy data. The block takes its full size with its
+ * first frame and keeps it; switching to the table scrolls inside the same height. A call whose arguments are not a
+ * valid chart shows nothing while it runs, because the model gets the validation error and the call fails.
+ */
+export function CloudChartBlock(props: { args: unknown; completed: boolean }) {
+  const locale = useLocale();
+  // Live updates replace the block with equal arguments; only a real change redraws.
+  const source = createMemo(() => JSON.stringify(props.args ?? null));
+  const chart = createMemo(() => {
+    // The tool schema drew the chart once to accept it; here it is drawn once more, for display, and the table is
+    // filled from that drawing.
+    const input = parseCloudAiChartInput(JSON.parse(source()));
+    if (!input) return null;
+    try {
+      const rows = cloudAiChartRows(input, locale());
+      const snapshot = prepareChartSnapshot(cloudAiChartRenderOptions(input, locale()), {
+        key: ({ datum }) => cloudAiChartMarkKey(datum),
+        tooltip: ({ datum }) => {
+          const row = rows.add(datum);
+          return tooltip(rows.columns(), row);
+        },
+      });
+      return snapshot.marks.length > 0 ? { input, table: rows.table(), snapshot } : null;
+    } catch {
+      return null;
+    }
+  });
+  return (
+    <Show
+      when={chart()}
+      fallback={
+        <Show when={props.completed}>
+          <p class="text-sm text-secondary">{aiChatMessages(locale()).chartUnavailable}</p>
+        </Show>
+      }
+    >
+      {(value) => (
+        <ChartExplorer
+          title={value().input.title}
+          description={value().input.subtitle ? <span class="text-sm text-secondary">{value().input.subtitle}</span> : undefined}
+          height={value().input.kind === "sparkline" ? "8rem" : "18rem"}
+          data={{ chart: value().snapshot, rows: value().table.rows }}
+          columns={value().table.columns.map(
+            (column): ChartExplorerColumn<CloudAiChartRow> => ({
+              id: column.id,
+              label: column.label,
+              value: (row) => row.cells[column.id] ?? "",
+              sortValue: (row) => row.values[column.id] ?? null,
+              align: column.numeric ? "right" : "left",
+            }),
+          )}
+          renderDetails={false}
+        />
+      )}
+    </Show>
+  );
+}

package/src/ai/chat/live-turn.browser-harness.tsx

@@ -11,15 +11,18 @@ import { AiChatActionsProvider, createAiChatTimeline } from "./presentation";
  * controller does. `window.emit(event)` applies one event,
  * `window.steer(text)` appends a pending steer as the controller does,
  * `window.reconnect(on)` sets whether the stream reconnects,
- * `window.continued` lists the messages that **Continue** sent, and
+ * `window.continued` lists the messages that **Continue** sent,
+ * `window.approvals` lists the approval decisions, and
  * `window.opened` lists the chat files the timeline opened. Chat files load from `/files?path=`.
  */
 const [state, setState] = createStore(emptyProjection());
 const [reconnecting, setReconnecting] = createSignal(false);
 const continued: string[] = [];
 const opened: string[] = [];
+const approvals: unknown[] = [];
 Object.assign(window, {
   continued,
+  approvals,
   opened,
   reconnect: (on: boolean) => setReconnecting(on),
   emit: (event: AiWireEvent) => setState(reconcile(reduceProjection(state, event), { key: "id", merge: true })),
@@ -38,6 +41,7 @@ render(
     <AiChatActionsProvider
       actions={{
         onContinueTurn: (message) => void continued.push(message),
+        onApproval: async (request, input) => void approvals.push({ callId: request.callId, ...input }),
         fileUrl: (path) => `/files?path=${encodeURIComponent(path)}`,
         onOpenFile: (path) => void opened.push(path),
       }}

package/src/ai/chat/message-utils.ts

@@ -311,6 +311,8 @@ export const isRecord = (value: unknown): value is Record<string, unknown> =>
 
 export const isCardToolName = (name: string) => name === "card" || name === "cloud_card";
 
+export const isChartToolName = (name: string) => name === "chart";
+
 export const isSurveyToolName = (name: string) => name === "survey" || name === "cloud_survey";
 
 export const isTextEditorToolName = (name: string) => name === "text_editor" || name === "cloud_text_editor";
@@ -326,6 +328,7 @@ export const displayToolName = (name: string, locale: string) => {
 const BUILT_IN_TOOL_ICONS = new Map<string, string>([
   ["card", "ti ti-layout-cards"],
   ["cloud_card", "ti ti-layout-cards"],
+  ["chart", "ti ti-chart-bar"],
   ["survey", "ti ti-forms"],
   ["cloud_survey", "ti ti-forms"],
   ["text_editor", "ti ti-edit"],