@k2b/cloud 0.27.0 → 0.29.0

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";
@@ -200,7 +202,7 @@ export function ApprovalBlockView(props: { turnId: string; block: ToolBlock }) {
   const submit = (input: { approved: boolean; remember?: "always" }) => {
     if (!actionDisabled() && !approval.loading()) 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();
@@ -283,7 +285,7 @@ export function ApprovalBlockView(props: { turnId: string; block: ToolBlock }) {
             <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 border-t border-[var(--k2b-border)] pt-3 sm:grid-cols-[max-content_minmax(0,1fr)]">
+                <dl class="grid gap-x-5 gap-y-1.5 sm:grid-cols-[max-content_minmax(0,1fr)]">
                   <For each={inlineReviewDetails()}>
                     {(detail) => (
                       <>
@@ -313,7 +315,12 @@ export function ApprovalBlockView(props: { turnId: string; block: ToolBlock }) {
                         </pre>
                       }
                     >
-                      <div class="max-h-72 overflow-auto text-xs text-secondary" role="region" tabIndex={0} aria-label={detail.label}>
+                      <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>
@@ -323,10 +330,12 @@ export function ApprovalBlockView(props: { turnId: string; block: ToolBlock }) {
             </div>
           </Show>
         </div>
-        <footer
-          class="flex min-h-12 flex-wrap items-center gap-2 border-t border-[var(--k2b-border)] bg-[var(--k2b-surface-subtle)] px-4 py-2.5"
-          data-ai-approval-footer
-        >
+        {/* 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()}>
@@ -339,7 +348,9 @@ export function ApprovalBlockView(props: { turnId: string; block: ToolBlock }) {
             </nav>
           </Show>
           <Show when={approval.error()}>
-            <p class="text-xs text-red-700 dark:text-red-300">{t().approvalFailed}</p>
+            <p class="text-xs text-red-700 dark:text-red-300" role="alert">
+              {t().approvalFailed}
+            </p>
           </Show>
           <div class="ml-auto shrink-0">
             <Show
@@ -526,7 +537,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)}
@@ -655,7 +666,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}
@@ -709,11 +720,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>
     </>
   );
@@ -742,7 +756,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());
@@ -751,28 +814,54 @@ 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"}
       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,

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

@@ -9,12 +9,18 @@ import { AiChatActionsProvider, createAiChatTimeline } from "./presentation";
 /**
  * The live chat timeline for a browser test, folded from wire events like the
  * controller does. `window.emit(event)` applies one event,
- * `window.steer(text)` appends a pending steer as the controller does, and
- * `window.reconnect(on)` sets whether the stream reconnects.
+ * `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.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[] = [];
 Object.assign(window, {
+  continued,
+  opened,
   reconnect: (on: boolean) => setReconnecting(on),
   emit: (event: AiWireEvent) => setState(reconcile(reduceProjection(state, event), { key: "id", merge: true })),
   steer: (text: string) =>
@@ -29,7 +35,13 @@ root.style.cssText = "display: flex; flex-direction: column; height: 100dvh; max
 document.body.append(root);
 render(
   () => (
-    <AiChatActionsProvider actions={{}}>
+    <AiChatActionsProvider
+      actions={{
+        onContinueTurn: (message) => void continued.push(message),
+        fileUrl: (path) => `/files?path=${encodeURIComponent(path)}`,
+        onOpenFile: (path) => void opened.push(path),
+      }}
+    >
       {(() => {
         const items = createAiChatTimeline({
           messages: createMemo(() => visibleMessages(state)),