@k2b/cloud 0.30.0 → 0.32.0

package/src/ai/chat/tool-groups.ts

@@ -1,18 +1,20 @@
 import { aiSkillFilePathFromMount } from "../file-mount";
 import type { AiTurnBlock } from "../protocol";
+import { isRecord } from "./message-utils";
 import { aiChatMessages } from "./messages";
 
 type Tool = Extract<AiTurnBlock, { kind: "tool" }>;
 type Text = Extract<AiTurnBlock, { kind: "text" }>;
 export type AiWorkEntry = Exclude<AiTurnBlock, { kind: "text" } | { kind: "steer_message" }>;
 /**
- * One row of the expanded work, all at one indent: an intermediate text, a step, or a group that folds housekeeping
- * steps and opens in place.
+ * One row of the expanded work: an intermediate text, a step, or a group that folds housekeeping or repeated calls
+ * on one target and opens in place.
  */
 export type AiWorkItem =
   | { kind: "text"; block: Text }
   | { kind: "step"; entry: AiWorkEntry }
-  | { kind: "housekeeping"; id: string; entries: AiWorkEntry[] };
+  | { kind: "housekeeping"; id: string; entries: AiWorkEntry[] }
+  | { kind: "repeat"; id: string; target: string; entries: AiWorkEntry[] };
 
 /** A failed call, including a code run that reported an error. A rejected approval is a decision, not a failure. */
 export function isFailedTool(tool: Tool): boolean {
@@ -30,6 +32,7 @@ export function isFailedTool(tool: Tool): boolean {
 
 const HOUSEKEEPING_TOOLS = new Set([
   "load_skill",
+  "load_local_skill",
   "search_skills",
   "load_tools",
   "search_tools",
@@ -50,33 +53,85 @@ export const isHousekeepingTool = (tool: Tool): boolean => {
 
 const isStep = (entry: AiWorkEntry) => entry.kind === "tool" || entry.kind === "compaction";
 
+/** The file, address, or query a folded row shows. A call without one never folds with others. */
+const callTarget = (tool: Tool): string | undefined => {
+  const args = isRecord(tool.args) ? tool.args : {};
+  return [args.path, args.url, args.query].find((value): value is string => typeof value === "string" && value.trim() !== "")?.trim();
+};
+
+/** Arguments that page through one call's result, such as read_file's byte slices or an app's cursor and page size. */
+const PAGING_ARGUMENTS = new Set(["offset", "length", "limit", "cursor", "after", "page", "pageSize"]);
+
+type Fold = { kind: "housekeeping" } | { kind: "repeat"; name: string; target: string; identity: string };
+
+/**
+ * What a step folds with: housekeeping with housekeeping, a running or finished call with the same call apart from
+ * paging, such as reading one file in parts. Repeated calls need a target; failed, rejected, and waiting calls never repeat.
+ */
+const foldOf = (tool: Tool): Fold | null => {
+  if (isHousekeepingTool(tool)) return { kind: "housekeeping" };
+  const target = callTarget(tool);
+  if (!target || isFailedTool(tool) || (tool.status !== "completed" && tool.status !== "running")) return null;
+  const args = isRecord(tool.args) ? tool.args : {};
+  const identity = JSON.stringify(
+    Object.fromEntries(Object.entries(args).filter(([key]) => !PAGING_ARGUMENTS.has(key))),
+    (_key: string, value: unknown) =>
+      typeof value === "string"
+        ? value.trim()
+        : isRecord(value)
+          ? Object.fromEntries(
+              Object.keys(value)
+                .sort()
+                .map((key) => [key, value[key]]),
+            )
+          : value,
+  );
+  return { kind: "repeat", name: tool.name, target, identity };
+};
+
+const sameFold = (a: Fold, b: Fold): boolean =>
+  a.kind === "housekeeping" ? b.kind === "housekeeping" : b.kind === "repeat" && a.name === b.name && a.identity === b.identity;
+
 /**
- * The rows of the expanded work, in the original order. A run of at least two housekeeping steps, with the reasoning
- * between them, folds into one group, unless it would hold all but one of the work's steps: then the steps show
- * directly, so the work line never opens to a summary of itself. Entries listed in `shown` already show as rows of
- * their own and never fold into a group, so nothing a reader sees folds away under them. A group is keyed by its first
- * tool, whose id is the same live and in history.
+ * The rows of the expanded work, in the original order. A run of at least two steps that fold together, with the
+ * reasoning between them, becomes one row: housekeeping, or consecutive instances of the same call apart from paging,
+ * such as reading one file in parts. Anything else between them, such as an intermediate text, ends the run. A run that
+ * would hold all but one of the work's steps shows its steps directly, so the work line never opens to a summary of
+ * itself. Entries listed in `shown` already show as rows of their own and never fold, so nothing a reader sees folds
+ * away under them.
+ * A folded row is keyed by its first tool, whose id is the same live and in history.
  */
 export function groupWorkBlocks(blocks: readonly AiTurnBlock[], shown: ReadonlySet<string> = new Set()): AiWorkItem[] {
   const entries = blocks.filter((block): block is AiWorkEntry | Text => block.kind !== "steer_message");
   const steps = entries.filter((entry) => entry.kind !== "text" && isStep(entry)).length;
   const items: AiWorkItem[] = [];
+  let fold: Fold | null = null;
   let run: AiWorkEntry[] = [];
   let trailing: AiWorkEntry[] = [];
   const flush = () => {
-    if (run.length > 0) {
+    if (fold && run.length > 0) {
       const runSteps = run.filter(isStep).length;
-      if (runSteps >= 2 && steps - runSteps >= 2) items.push({ kind: "housekeeping", id: run[0]!.id, entries: run });
+      const id = run[0]!.id;
+      if (runSteps >= 2 && steps - runSteps >= 2)
+        items.push(
+          fold.kind === "housekeeping"
+            ? { kind: "housekeeping", id, entries: run }
+            : { kind: "repeat", id, target: fold.target, entries: run },
+        );
       else for (const entry of run) items.push({ kind: "step", entry });
     }
-    // Reasoning after the last housekeeping step belongs to what comes next.
+    // Reasoning after the last folded step belongs to what comes next.
     for (const entry of trailing) items.push({ kind: "step", entry });
+    fold = null;
     run = [];
     trailing = [];
   };
   for (const entry of entries) {
     const foldable = !shown.has(entry.id);
-    if (foldable && entry.kind === "tool" && isHousekeepingTool(entry)) {
+    const next = foldable && entry.kind === "tool" ? foldOf(entry) : null;
+    if (next && entry.kind === "tool") {
+      if (fold && !sameFold(fold, next)) flush();
+      fold = next;
       run.push(...trailing, entry);
       trailing = [];
     } else if (foldable && entry.kind === "thinking" && run.length > 0) trailing.push(entry);

package/src/ai/chat/tool-names.ts

@@ -14,6 +14,13 @@ const toolNames = i18n.define({
       survey: "Survey",
       text_editor: "Text editor",
       local_bash: "Local Bash",
+      local_list: "List local files",
+      local_read: "Read local file",
+      local_upload: "Upload local files",
+      local_download: "Save to local folder",
+      local_write: "Write local file",
+      local_move: "Move local files",
+      load_local_skill: "Load local Skill",
       todo_write: "Working plan",
       memory: "Memory",
       list_files: "List files",
@@ -72,7 +79,8 @@ const toolNames = i18n.define({
       code_restore: "Restore app version",
       code_update: "Update app details",
       code_create: "Create app",
-      code_write: "Save app files",
+      code_write: "Save app file",
+      code_import: "Import app files",
       code_remove: "Remove app file",
     },
     de: {
@@ -82,6 +90,13 @@ const toolNames = i18n.define({
       survey: "Umfrage",
       text_editor: "Texteditor",
       local_bash: "Lokale Bash",
+      local_list: "Lokale Dateien auflisten",
+      local_read: "Lokale Datei lesen",
+      local_upload: "Lokale Dateien hochladen",
+      local_download: "In lokalen Ordner speichern",
+      local_write: "Lokale Datei schreiben",
+      local_move: "Lokale Dateien verschieben",
+      load_local_skill: "Lokalen Skill laden",
       todo_write: "Arbeitsplan",
       memory: "Gedächtnis",
       list_files: "Dateien auflisten",
@@ -140,7 +155,8 @@ const toolNames = i18n.define({
       code_restore: "App-Version wiederherstellen",
       code_update: "App-Details ändern",
       code_create: "App erstellen",
-      code_write: "App-Dateien speichern",
+      code_write: "App-Datei speichern",
+      code_import: "App-Dateien importieren",
       code_remove: "App-Datei entfernen",
     },
   },

package/src/ai/chat/turn-layout.ts

@@ -35,6 +35,11 @@ export type AiTurnLayout = {
   results: AiTurnResult[];
   /** Place 3: the newest text. Live it is a status; finished it is the final message. */
   text: TextBlock[];
+  /**
+   * Place 3 is only a status: the turn runs and a step started after its text. A trailing text may still be the answer
+   * and keeps answer typography; it turns quiet when the next step starts, together with the work line's new label.
+   */
+  textIsStatus: boolean;
   /** Place 4: effects in Cloud and decisions, open as a card or finished as a receipt. */
   actions: AiTurnAction[];
   /** The newest block, which names the current step of a live turn. */
@@ -124,6 +129,8 @@ export function layoutAiTurn(input: readonly AiTurnBlock[], options: { phase: Ai
     }
   }
   const visible = new Set(text);
+  const lastStep = blocks.findLastIndex((block) => block.kind === "tool" || block.kind === "compaction");
+  const shownAt = text.length > 0 ? blocks.indexOf(text.at(-1)!) : -1;
   const work = blocks.filter((block) => !visible.has(block as TextBlock));
 
   const waits = tools.filter(waitsForUser);
@@ -135,6 +142,7 @@ export function layoutAiTurn(input: readonly AiTurnBlock[], options: { phase: Ai
     showWork: steps > 0 || ((options.phase === "stopped" || options.phase === "failed") && work.length > 0),
     results,
     text,
+    textIsStatus: live(options.phase) && shownAt >= 0 && shownAt < lastStep,
     actions,
     current: blocks.at(-1) ?? null,
     waitingFor,

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

@@ -1,3 +1,4 @@
+import { dates } from "@k2b/stdlib";
 import { announce, Button, ButtonLink, Chat, NoticeCard, useLocale } from "@k2b/ui";
 import {
   type Accessor,
@@ -17,7 +18,7 @@ import {
 import { markdown } from "../../shared";
 import { AI_TURN_LEASE_MS, type AiTurnBlock } from "../protocol";
 import type { AiTurnError } from "../types";
-import { toolOutcome, toolSubject } from "./action-sentences";
+import { toolOutcome, toolSubject, useReaderTimeZone } from "./action-sentences";
 import {
   type AiApprovalDecision,
   ApprovalBlockView,
@@ -144,7 +145,7 @@ const stepPhrase = (block: AiTurnBlock | null, t: Messages, withTargets: boolean
   if (name === "code_present") return withTarget(t.stepPreparingView);
   if (isCardToolName(name)) return t.stepPreparingCard;
   if (isChartToolName(name)) return t.stepPreparingChart;
-  if (["code_write", "code_create", "code_update", "code_fork", "code_remove", "code_restore"].includes(name))
+  if (["code_write", "code_import", "code_create", "code_update", "code_fork", "code_remove", "code_restore"].includes(name))
     return withTarget(t.stepWritingCode);
   if (["code_run", "code_action", "code_sql"].includes(name)) return withTarget(t.stepRunningCode);
   if (name === "code_check") return t.stepCheckingApp;
@@ -236,6 +237,7 @@ function AiWorkLine(props: { segment: Accessor<AiTurnSegment> }) {
       tone={working() ? "ai" : "neutral"}
       busy={working()}
       trailing={trailing()}
+      bodyInset={false}
       renderBody={() => <AiWorkSteps blocks={layout().work} active={working()} />}
     />
   );
@@ -275,7 +277,27 @@ function WorkEntryRow(props: { entry: AiWorkEntry; busy: boolean }) {
   );
 }
 
-/** Housekeeping folded into one row at step level. It opens in place: its steps follow at the same indent. */
+/** The steps of an opened group, keyed by block id, so a row keeps its element and focus when its block is replaced. */
+function WorkEntries(props: { entries: AiWorkEntry[]; active: boolean }) {
+  const entries = createMemo(() => new Map(props.entries.map((entry) => [entry.id, entry])));
+  const ids = createMemo(() => [...entries().keys()]);
+  return (
+    <div class="ai-turn-steps">
+      <For each={ids()}>
+        {(id, index) => (
+          <Show when={entries().get(id)}>
+            {(entry) => <WorkEntryRow entry={entry()} busy={props.active && index() === ids().length - 1} />}
+          </Show>
+        )}
+      </For>
+    </div>
+  );
+}
+
+/**
+ * Housekeeping folded into one row at step level, with its count at the end like the work line's. It opens in place:
+ * its steps follow at the same indent.
+ */
 function HousekeepingGroup(props: { id: string; entries: AiWorkEntry[]; active: boolean }) {
   const locale = useLocale();
   const last = () => props.entries.at(-1)!;
@@ -283,17 +305,33 @@ function HousekeepingGroup(props: { id: string; entries: AiWorkEntry[]; active:
     <AiToolActivity
       blockId={`group:${props.id}`}
       label={aiChatMessages(locale()).groupLoad}
-      description={countWorkSteps(props.entries, locale())}
+      trailing={<span class="ai-turn-work__meta">{countWorkSteps(props.entries, locale())}</span>}
       icon="ti ti-stack-2"
       bodyInset={false}
       busy={props.active && last().kind === "tool" && (last() as ToolBlock).status === "running"}
-      renderBody={() => (
-        <div class="ai-turn-steps">
-          <For each={props.entries}>
-            {(entry, index) => <WorkEntryRow entry={entry} busy={props.active && index() === props.entries.length - 1} />}
-          </For>
-        </div>
-      )}
+      renderBody={() => <WorkEntries entries={props.entries} active={props.active} />}
+    />
+  );
+}
+
+/**
+ * Consecutive instances of one call apart from paging, such as reading one file in parts, folded into one row that
+ * opens in place. Its count sits at the end like the work line's, so a narrow screen cuts the target short, never the count.
+ */
+function RepeatedSteps(props: { id: string; target: string; entries: AiWorkEntry[]; active: boolean }) {
+  const locale = useLocale();
+  const tools = () => props.entries.filter((entry): entry is ToolBlock => entry.kind === "tool");
+  const first = () => tools()[0]!;
+  return (
+    <AiToolActivity
+      blockId={`repeat:${props.id}`}
+      label={first().presentation?.title ?? displayToolName(first().name, locale())}
+      description={props.target}
+      trailing={<span class="ai-turn-work__meta">{aiChatMessages(locale()).repeatCount({ count: tools().length })}</span>}
+      icon={aiToolIcon(first().name, first().presentation?.appIcon)}
+      bodyInset={false}
+      busy={props.active && tools().at(-1)?.status === "running"}
+      renderBody={() => <WorkEntries entries={props.entries} active={props.active} />}
     />
   );
 }
@@ -311,13 +349,19 @@ function WorkText(props: { text: string }) {
 }
 
 const workItemKey = (item: AiWorkItem): string =>
-  item.kind === "text" ? `text:${item.block.id}` : item.kind === "step" ? `step:${item.entry.id}` : `group:${item.id}`;
+  item.kind === "text"
+    ? `text:${item.block.id}`
+    : item.kind === "step"
+      ? `step:${item.entry.id}`
+      : item.kind === "repeat"
+        ? `repeat:${item.id}`
+        : `group:${item.id}`;
 
 /**
- * Expanded work, one indent below the work line and one size: intermediate texts as quiet paragraphs, the steps between
- * them directly, and housekeeping folded at step level. A row shown while this list is open never folds away under the
- * reader, also when reasoning or arguments that would fold it arrive later; the next time it opens, it folds like in
- * history.
+ * Expanded work, at the work line's indent and one size: intermediate texts as quiet paragraphs, the steps between
+ * them directly, and housekeeping or repeated steps folded at step level. A row shown while this list is open never
+ * folds away under the reader, also when reasoning or arguments that would fold it arrive later; the next time it
+ * opens, it folds like in history.
  */
 function AiWorkSteps(props: { blocks: AiTurnBlock[]; active: boolean }) {
   const shown = new Set<string>();
@@ -344,12 +388,19 @@ function AiWorkSteps(props: { blocks: AiTurnBlock[]; active: boolean }) {
             const value = item();
             return value?.kind === "housekeeping" ? value : undefined;
           };
+          const repeat = () => {
+            const value = item();
+            return value?.kind === "repeat" ? value : undefined;
+          };
           const active = () => props.active && index() === keys().length - 1;
           return (
             <Switch>
               <Match when={text()}>{(value) => <WorkText text={value()} />}</Match>
               <Match when={step()}>{(entry) => <WorkEntryRow entry={entry()} busy={active()} />}</Match>
               <Match when={group()}>{(value) => <HousekeepingGroup id={value().id} entries={value().entries} active={active()} />}</Match>
+              <Match when={repeat()}>
+                {(value) => <RepeatedSteps id={value().id} target={value().target} entries={value().entries} active={active()} />}
+              </Match>
             </Switch>
           );
         }}
@@ -475,10 +526,11 @@ type ReceiptState = Exclude<AiTurnActionState, "open" | "interaction">;
  */
 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());
+    const sentence = toolSubject(block(), locale(), timeZone);
     if (sentence) return sentence;
     const title = block().presentation?.title ?? displayToolName(block().name, locale());
     const target = toolTarget(block());
@@ -486,22 +538,26 @@ function AiReceipt(props: { block: ToolBlock; state: ReceiptState; stopped: bool
   };
   const capabilityAction = () => block().presentation?.kind === "capability";
   const links = () => (props.state === "done" ? resultLinks(block()) : []);
-  const label = () => {
+  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()) || resultSummary(block()) || t().receiptDone({ title: subject() });
+      return toolOutcome(block(), "done", locale(), timeZone) || resultSummary(block()) || t().receiptDone({ title: subject() });
     }
-    if (state === "rejected") return toolOutcome(block(), "rejected", locale()) ?? t().receiptRejected({ 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());
+    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"
@@ -517,6 +573,7 @@ function AiReceipt(props: { block: ToolBlock; state: ReceiptState; stopped: bool
 
 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;
@@ -547,7 +604,10 @@ function AiTurnActionView(props: { action: Accessor<AiTurnAction | undefined>; t
       if (next !== "open" || previous === "open" || !isLive(props.phase) || current?.block.status !== "awaiting_approval") return;
       announce(
         aiChatMessages(locale()).approvalNeeded({
-          title: toolSubject(current.block, locale()) ?? current.block.presentation?.title ?? displayToolName(current.block.name, locale()),
+          title:
+            toolSubject(current.block, locale(), timeZone) ??
+            current.block.presentation?.title ??
+            displayToolName(current.block.name, locale()),
         }),
       );
     }),
@@ -641,14 +701,18 @@ function AiTurnErrorNotice(props: { error: AiTurnError; continuable: boolean })
 }
 
 /**
- * Place 3. Live it is a status that switches in this same element; it keeps its height until the turn ends. A status
- * is not read token by token: screen readers hear each status once it is complete, and that the answer is ready.
+ * Place 3. Live it is a status that switches in this same element; it keeps its height until the turn ends. Once a step
+ * started after it, it reads quietly like the texts in the expanded work; a trailing text may still be the answer and
+ * keeps answer typography. A status is not read token by token: screen readers hear each status once it is complete,
+ * and that the answer is ready.
  */
 function AiTurnText(props: {
   blocks: Accessor<Extract<AiTurnBlock, { kind: "text" }>[]>;
   live: Accessor<boolean>;
   /** The turn has work steps, so its live text is a status rather than the answer itself. */
   folding: Accessor<boolean>;
+  /** A step started after the text, so it can no longer be the answer: it reads quietly. */
+  quiet: Accessor<boolean>;
   /** An earlier segment of a split turn: it stops being live while the turn goes on. */
   earlier: Accessor<boolean>;
 }) {
@@ -662,6 +726,7 @@ function AiTurnText(props: {
   );
   const html = createMemo(() => markdown.renderSync(source(), { locale: locale() }));
   const shownId = createMemo(() => props.blocks()[0]?.id);
+  const quiet = createMemo(() => props.quiet());
   const [minHeight, setMinHeight] = createSignal<number | null>(null);
   let element!: HTMLDivElement;
   let lastHeight = 0;
@@ -673,14 +738,21 @@ function AiTurnText(props: {
     observer.observe(element);
     onCleanup(() => observer.disconnect());
   });
+  /** The quiet text's height in answer typography, measured in place before the browser paints. */
+  const answerHeight = () => {
+    element.classList.remove("ai-turn__text--status");
+    const height = element.offsetHeight;
+    element.classList.add("ai-turn__text--status");
+    return height;
+  };
+  // A new status keeps the height of the one before it. A quiet status keeps the height it has as the answer, also when
+  // it first shows quietly after a reload, so nothing below moves when it is replaced or becomes the answer again.
   createEffect(
-    on(
-      shownId,
-      () => {
-        if (props.live() && lastHeight > 0) setMinHeight((current) => Math.max(current ?? 0, lastHeight));
-      },
-      { defer: true },
-    ),
+    on([shownId, quiet], ([id, isQuiet], previous) => {
+      if (!props.live()) return;
+      const height = Math.max(previous && previous[0] !== id ? lastHeight : 0, isQuiet ? answerHeight() : 0);
+      if (height > 0) setMinHeight((current) => Math.max(current ?? 0, height));
+    }),
   );
   createEffect(() => {
     if (!props.live()) setMinHeight(null);
@@ -701,6 +773,7 @@ function AiTurnText(props: {
     <div
       ref={element}
       class="ai-turn__text"
+      classList={{ "ai-turn__text--status": quiet() }}
       aria-live={status() ? "off" : undefined}
       style={minHeight() ? { "min-height": `${minHeight()}px` } : undefined}
     >
@@ -757,7 +830,13 @@ export function AiTurnView(props: { segment: Accessor<AiTurnSegment>; disclosure
         </Show>
         <For each={resultIds()}>{(id) => <AiTurnResultView result={() => results().get(id)} receipt={() => actions().has(id)} />}</For>
         <Show when={layout().text.length > 0}>
-          <AiTurnText blocks={() => layout().text} live={live} folding={() => layout().steps > 0} earlier={() => props.segment().earlier} />
+          <AiTurnText
+            blocks={() => layout().text}
+            live={live}
+            folding={() => layout().steps > 0}
+            quiet={() => layout().textIsStatus}
+            earlier={() => props.segment().earlier}
+          />
         </Show>
         <For each={actionIds()}>
           {(id) => <AiTurnActionView action={() => actions().get(id)} turnId={props.segment().turnId} phase={props.segment().phase} />}

package/src/ai/chat/view-block.browser-harness.tsx

@@ -0,0 +1,35 @@
+import { createSignal, For } from "solid-js";
+import { render } from "solid-js/web";
+import type { CloudResourceRef } from "../../contracts/capabilities";
+import type { AiTurnBlock } from "../protocol";
+import { PresentToolBlock } from "./file-tools";
+import { AiChatActionsProvider } from "./presentation";
+import { CloudCardBlock } from "./visual-tools";
+
+/**
+ * Presented files for a browser test, in a chat-wide column. `window.show(blocks)` replaces the shown `present`
+ * blocks and `window.showCards(args)` the shown `card` calls. Chat files load from `/files?path=`; `window.opened`
+ * records the references a reader opened.
+ */
+const [blocks, setBlocks] = createSignal<Extract<AiTurnBlock, { kind: "tool" }>[]>([]);
+const [cards, setCards] = createSignal<unknown[]>([]);
+const opened: { title: string; ref: CloudResourceRef }[] = [];
+Object.assign(window, { show: setBlocks, showCards: setCards, opened });
+
+const root = document.createElement("main");
+root.style.cssText = "display: flex; flex-direction: column; gap: 1.5rem; max-width: 48rem; margin: 0 auto; padding: 1rem;";
+document.body.append(root);
+render(
+  () => (
+    <AiChatActionsProvider
+      actions={{
+        fileUrl: (path) => `/files?path=${encodeURIComponent(path)}`,
+        onOpenReference: (title, ref) => opened.push({ title, ref }),
+      }}
+    >
+      <For each={blocks()}>{(block) => <PresentToolBlock block={block} />}</For>
+      <For each={cards()}>{(args) => <CloudCardBlock args={args} />}</For>
+    </AiChatActionsProvider>
+  ),
+  root,
+);