@k2b/cloud 0.28.0 → 0.29.1

package/src/ai/chat/blocks.tsx

@@ -1,7 +1,7 @@
 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, For, type JSX, Match, Show, Switch, untrack } from "solid-js";
+import { createSignal, createUniqueId, For, type JSX, Match, Show, Switch, untrack } from "solid-js";
 import type { CapabilityActionReview } from "../../contracts/capabilities";
 import { markdown } from "../../shared";
 import type { AiTurnBlock } from "../protocol";
@@ -13,6 +13,7 @@ import { useAiChatActions } from "./message-actions";
 import {
   aiToolIcon,
   capabilityErrorDescription,
+  codeCheckOutcome,
   displayToolName,
   fetchFileErrorPresentation,
   formatToolDetailText,
@@ -22,6 +23,7 @@ import {
   isTextEditorToolName,
   jsonPreview,
   memoryToolPresentation,
+  viewedChatImage,
 } from "./message-utils";
 import { aiChatMessages } from "./messages";
 import { AssistantMarkdownBlock } from "./primitives";
@@ -181,7 +183,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());
@@ -190,17 +199,24 @@ 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);
+  const title = () => props.block.presentation?.title ?? displayToolName(props.block.name, locale());
   const ownerName = () => props.block.presentation?.appName ?? t().assistant;
   const description = () => {
     const reviewMessage = props.block.approval?.review?.message.trim();
@@ -237,199 +253,166 @@ 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">
+            {ownerName()} · {title()}
+          </h3>
+          <p class="ai-approval__sub">{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={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>
   );
 }
 
@@ -535,7 +518,7 @@ 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);
+  const title = () => presentation()?.title ?? displayToolName(props.block.name, locale());
   return (
     <Chat.Activity
       icon={aiToolIcon(props.block.name, presentation()?.appIcon)}
@@ -664,7 +647,7 @@ function ToolBlockView(props: { turnId: string; block: ToolBlock; active?: boole
         fallback={
           <ToolResultDisclosure
             blockId={props.block.id}
-            name={displayToolName(props.block.name)}
+            name={displayToolName(props.block.name, locale())}
             toolName={props.block.name}
             args={props.block.args}
             result={props.block.result}
@@ -718,11 +701,14 @@ function ToolBlockView(props: { turnId: string; block: ToolBlock; active?: boole
           <TextEditorToolView turnId={props.turnId} block={props.block} active={props.active} />
         </Match>
         <Match when={status() === "running" || status() === "awaiting_client"}>
-          <Chat.Activity label={displayToolName(props.block.name)} icon={aiToolIcon(props.block.name)} busy />
+          <Chat.Activity label={displayToolName(props.block.name, locale())} icon={aiToolIcon(props.block.name)} busy />
         </Match>
       </Switch>
       <Show when={hasCapabilityTable(props.block)}>
-        <CapabilityTablePreview result={props.block.result} label={props.block.presentation?.title ?? displayToolName(props.block.name)} />
+        <CapabilityTablePreview
+          result={props.block.result}
+          label={props.block.presentation?.title ?? displayToolName(props.block.name, locale())}
+        />
       </Show>
     </>
   );
@@ -751,7 +737,56 @@ export function AiTurnBlockView(props: { block: AiTurnBlock; turnId: string; str
   );
 }
 
-/** One step in the expanded work list: its title, target, and state, with input and output on demand. */
+/** An alt text is a short description: the first line of the image description, clipped at a word. */
+const altText = (description: string): string => {
+  const line =
+    description
+      .split("\n")
+      .find((entry) => entry.trim())
+      ?.trim() ?? "";
+  if (line.length <= 240) return line;
+  const clipped = line.slice(0, 240);
+  return `${clipped.slice(0, Math.max(clipped.lastIndexOf(" "), 160))}…`;
+};
+
+/**
+ * The image a view_image step looked at, as a small fixed-size thumbnail: it loads lazily through the chat's own file
+ * route, so it shows only what the viewer may read, and it keeps its box while it loads or fails. A host that opens
+ * chat files shows it larger on click; the button is named for that action and described by the image's alt text.
+ */
+function StepImage(props: { path: string; src: string; description: string }) {
+  const actions = useAiChatActions();
+  const locale = useLocale();
+  const imageId = createUniqueId();
+  const [failed, setFailed] = createSignal(false);
+  const name = () => props.path.slice(props.path.lastIndexOf("/") + 1) || props.path;
+  const alt = () => altText(props.description);
+  const image = () => (
+    <Show when={!failed()} fallback={<i class="ti ti-photo-off text-lg text-dimmed" aria-hidden="true" />}>
+      <img id={imageId} src={props.src} alt={alt() || name()} loading="lazy" decoding="async" onError={() => setFailed(true)} />
+    </Show>
+  );
+  return (
+    <Show when={actions.onOpenFile} fallback={<div class="ai-step-image">{image()}</div>}>
+      {(open) => (
+        <button
+          type="button"
+          class="ai-step-image focus-ui"
+          aria-label={aiChatMessages(locale()).openImage({ name: name() })}
+          aria-describedby={!failed() && alt() ? imageId : undefined}
+          onClick={() => open()(props.path)}
+        >
+          {image()}
+        </button>
+      )}
+    </Show>
+  );
+}
+
+/**
+ * One step in the expanded work list: its title, target, state, and outcome, with input and output on demand. An app
+ * check names its outcome in words and with its own icon, so a passed and a failed check differ without colour.
+ */
 export function CompactToolRow(props: { block: ToolBlock; busy?: boolean }) {
   const locale = useLocale();
   const t = () => aiChatMessages(locale());
@@ -760,28 +795,55 @@ export function CompactToolRow(props: { block: ToolBlock; busy?: boolean }) {
   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 : "";
+  const finished = () => props.block.status === "completed" && !props.block.isError;
+  const check = () => (finished() ? codeCheckOutcome(props.block.name, props.block.result) : null);
+  const outcome = () => {
+    const value = check();
+    if (!value) return "";
+    const result = value.passed ? t().checkPassed : value.errors > 0 ? t().checkFindings({ count: value.errors }) : t().checkNotPassed;
+    return value.warnings > 0 ? `${result} · ${t().checkWarnings({ count: value.warnings })}` : result;
+  };
+  const actions = useAiChatActions();
+  /** Only a host that resolves chat file URLs shows the image; without one there is no preview, not an empty box. */
+  const image = () => {
+    const viewed = finished() ? viewedChatImage(props.block.name, props.block.result) : null;
+    const src = viewed ? actions.fileUrl?.(viewed.path) : null;
+    return viewed && src ? { ...viewed, src } : null;
+  };
+  const icon = () => {
+    if (waiting()) return "ti ti-clock";
+    const value = check();
+    if (value) return value.passed ? "ti ti-circle-check" : "ti ti-alert-triangle";
+    return aiToolIcon(props.block.name, props.block.presentation?.appIcon);
+  };
   return (
     <AiToolActivity
       blockId={props.block.id}
-      label={props.block.presentation?.title ?? displayToolName(props.block.name)}
+      label={props.block.presentation?.title ?? displayToolName(props.block.name, locale())}
       description={[
         props.block.status === "running" ? (props.block.progress ?? "") : "",
         typeof detail() === "string" ? String(detail()) : "",
         state(),
+        outcome(),
       ]
         .filter(Boolean)
         .join(" · ")}
-      icon={waiting() ? "ti ti-clock" : aiToolIcon(props.block.name, props.block.presentation?.appIcon)}
+      icon={icon()}
       busy={props.busy && props.block.status === "running"}
+      bodyInset={false}
       renderBody={() => (
-        <div
-          class="max-h-72 overflow-auto overscroll-contain rounded-md bg-zinc-100 p-3 dark:bg-zinc-950"
-          tabIndex={0}
-          role="region"
-          aria-label={t().toolInputOutput}
-        >
-          <ToolDetail title={t().input} toolName={props.block.name} value={props.block.args} />
-          <ToolDetail title={t().output} toolName={props.block.name} value={props.block.result} />
+        <div class="flex min-w-0 flex-col gap-2">
+          <div
+            class="max-h-72 overflow-auto overscroll-contain rounded-md bg-zinc-100 p-3 dark:bg-zinc-950"
+            tabIndex={0}
+            role="region"
+            aria-label={t().toolInputOutput}
+          >
+            <ToolDetail title={t().input} toolName={props.block.name} value={props.block.args} />
+            <ToolDetail title={t().output} toolName={props.block.name} value={props.block.result} />
+          </div>
+          {/* Below the input and output, so an image that arrives in an open step grows in like its output and moves nothing above. */}
+          <Show when={image()}>{(viewed) => <StepImage path={viewed().path} src={viewed().src} description={viewed().description} />}</Show>
         </div>
       )}
     />

package/src/ai/chat/builtin-tools.tsx

@@ -106,6 +106,7 @@ function SearchToolsView(props: { block: ToolBlock }) {
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
   const tools = () => records(result().tools);
   const t = useMessages();
+  const locale = useLocale();
   const query = () => text(args().query) || t().tools;
   return (
     <CompletedActivity block={props.block} label={t().searchTools({ query: query() })} description={t().found({ count: tools().length })}>
@@ -115,7 +116,8 @@ function SearchToolsView(props: { block: ToolBlock }) {
             {(tool) => (
               <ResultRow
                 icon={tool.kind === "action" ? "ti-bolt" : tool.kind === "query" ? "ti-search" : aiToolIcon(text(tool.name))}
-                title={text(tool.title) || displayToolName(text(tool.name))}
+                // The catalog titles a built-in tool in English, so the reader's language names it; a capability brings its own title.
+                title={tool.kind !== "builtin" && text(tool.title) ? text(tool.title) : displayToolName(text(tool.name), locale())}
                 description={text(tool.description)}
                 meta={text(tool.appId) || text(tool.kind)}
               />

package/src/ai/chat/composer-adapter.ts

@@ -11,6 +11,7 @@ import {
   type PendingAiVfsFile,
   readImageFile,
   readVfsFile,
+  VFS_FILE_MAX_BYTES,
 } from "./message-utils";
 
 export type { AiComposerAttachment } from "./message-utils";
@@ -37,6 +38,13 @@ export type AiComposerFileResult = {
 
 export const aiComposerFileAccept = FILE_INPUT_ACCEPT;
 
+/**
+ * The `maxBytes` for `chooseFiles` while a composer holds `attached` attachments. Files from Cloud apps are read into
+ * the browser before `readAiComposerFiles` checks them, so together they stay within what the draft can still take:
+ * each free slot at most the largest file the composer attaches. 0 when every slot is taken.
+ */
+export const aiComposerChooseMaxBytes = (attached: number): number => Math.max(0, MAX_ATTACHMENTS - attached) * VFS_FILE_MAX_BYTES;
+
 export const aiChatModelOptions = (profiles: readonly AiPublicModelProfile[]): ChatModelOption[] =>
   profiles.map((profile) => ({
     id: profile.id,