@k2b/cloud 0.25.0 → 0.27.0

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

@@ -38,6 +38,10 @@ const text = (value: unknown): string => (typeof value === "string" ? value : ""
 const number = (value: unknown): number => (typeof value === "number" && Number.isFinite(value) ? value : 0);
 const records = (value: unknown): Record<string, unknown>[] => (Array.isArray(value) ? value.filter(isRecord) : []);
 const basename = (path: string): string => path.slice(path.lastIndexOf("/") + 1) || path;
+const useMessages = () => {
+  const locale = useLocale();
+  return () => aiChatMessages(locale());
+};
 
 function DetailSurface(props: { children: JSX.Element }) {
   return (
@@ -101,11 +105,12 @@ function SearchToolsView(props: { block: ToolBlock }) {
   const args = () => (isRecord(props.block.args) ? props.block.args : {});
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
   const tools = () => records(result().tools);
-  const query = () => text(args().query) || "Tools";
+  const t = useMessages();
+  const query = () => text(args().query) || t().tools;
   return (
-    <CompletedActivity block={props.block} label={`Search tools: ${query()}`} description={`${tools().length} found`}>
+    <CompletedActivity block={props.block} label={t().searchTools({ query: query() })} description={t().found({ count: tools().length })}>
       <ResultList>
-        <Show when={tools().length > 0} fallback={<EmptyRow>No tools found.</EmptyRow>}>
+        <Show when={tools().length > 0} fallback={<EmptyRow>{t().noTools}</EmptyRow>}>
           <For each={tools()}>
             {(tool) => (
               <ResultRow
@@ -128,10 +133,11 @@ function ListAppsView(props: { block: ToolBlock }) {
     const value = result().apps;
     return isRecord(value) ? Object.entries(value) : [];
   };
+  const t = useMessages();
   return (
-    <CompletedActivity block={props.block} label="List apps" description={`${apps().length} available`}>
+    <CompletedActivity block={props.block} label={t().listApps} description={t().available({ count: apps().length })}>
       <ResultList>
-        <Show when={apps().length > 0} fallback={<EmptyRow>No capability apps available.</EmptyRow>}>
+        <Show when={apps().length > 0} fallback={<EmptyRow>{t().noApps}</EmptyRow>}>
           <For each={apps()}>{([appId, description]) => <ResultRow icon="ti-apps" title={appId} description={text(description)} />}</For>
         </Show>
       </ResultList>
@@ -139,37 +145,46 @@ function ListAppsView(props: { block: ToolBlock }) {
   );
 }
 
+/** Entries are `{name}` records; turns stored before #528 hold plain names and a `missing` list. */
+const toolNames = (value: unknown): string[] =>
+  Array.isArray(value)
+    ? value.flatMap((item) => (typeof item === "string" ? [item] : isRecord(item) && typeof item.name === "string" ? [item.name] : []))
+    : [];
+
 function LoadToolsView(props: { block: ToolBlock }) {
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
   const titles = (): Record<string, unknown> => {
     const value = result().titles;
     return isRecord(value) ? value : {};
   };
-  const groups = () =>
-    (
-      [
-        ["Loaded", result().loaded],
-        ["Already loaded", result().alreadyLoaded],
-        ["Missing", result().missing],
-        ["Evicted", result().evicted],
-      ] as const
-    ).flatMap(([label, value]) =>
-      Array.isArray(value) && value.length > 0 ? [{ label, names: value.filter((name): name is string => typeof name === "string") }] : [],
-    );
-  const loadedCount = () => {
-    const value = result().loaded;
-    return Array.isArray(value) ? value.length : 0;
-  };
+  const t = useMessages();
+  const unavailableLabel = (reason: unknown) =>
+    reason === "not_offered_in_turn"
+      ? t().toolNotOffered
+      : reason === "not_allowed"
+        ? t().toolNotAllowed
+        : reason === "app_offline"
+          ? t().toolAppOffline
+          : t().toolUnknown;
+  const rows = () => [
+    ...toolNames(result().loaded).map((name) => ({ name, label: t().toolsLoaded })),
+    ...toolNames(result().alreadyLoaded).map((name) => ({ name, label: t().toolsAlreadyLoaded })),
+    ...records(result().unavailable).flatMap((item) =>
+      typeof item.name === "string" ? [{ name: item.name, label: unavailableLabel(item.reason) }] : [],
+    ),
+    ...toolNames(result().missing).map((name) => ({ name, label: t().toolUnknown })),
+    ...toolNames(result().evicted).map((name) => ({ name, label: t().toolsEvicted })),
+  ];
   return (
-    <CompletedActivity block={props.block} label="Load tools" description={`${loadedCount()} loaded`}>
-      <Show when={groups().length > 0}>
+    <CompletedActivity
+      block={props.block}
+      label={t().loadTools}
+      description={t().loadedCount({ count: toolNames(result().loaded).length })}
+    >
+      <Show when={rows().length > 0}>
         <ResultList>
-          <For each={groups()}>
-            {(group) => (
-              <For each={group.names}>
-                {(name) => <ResultRow icon={aiToolIcon(name)} title={text(titles()[name]) || name} meta={group.label} />}
-              </For>
-            )}
+          <For each={rows()}>
+            {(row) => <ResultRow icon={aiToolIcon(row.name)} title={text(titles()[row.name]) || row.name} meta={row.label} />}
           </For>
         </ResultList>
       </Show>
@@ -179,8 +194,9 @@ function LoadToolsView(props: { block: ToolBlock }) {
 
 function LoadSkillView(props: { block: ToolBlock }) {
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
+  const t = useMessages();
   return (
-    <CompletedActivity block={props.block} label={`Loaded skill ${text(result().name)}`}>
+    <CompletedActivity block={props.block} label={t().loadedSkill({ name: text(result().name) })}>
       <DetailSurface>
         <p class="whitespace-pre-wrap px-2 py-1.5 leading-5 text-secondary">{text(result().description)}</p>
       </DetailSurface>
@@ -192,11 +208,16 @@ function SearchHelpView(props: { block: ToolBlock }) {
   const args = () => (isRecord(props.block.args) ? props.block.args : {});
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
   const documents = () => records(result().documents);
-  const query = () => text(args().query) || "Help";
+  const t = useMessages();
+  const query = () => text(args().query) || t().help;
   return (
-    <CompletedActivity block={props.block} label={`Search help: ${query()}`} description={`${documents().length} found`}>
+    <CompletedActivity
+      block={props.block}
+      label={t().searchHelp({ query: query() })}
+      description={t().found({ count: documents().length })}
+    >
       <ResultList>
-        <Show when={documents().length > 0} fallback={<EmptyRow>No Help articles found.</EmptyRow>}>
+        <Show when={documents().length > 0} fallback={<EmptyRow>{t().noHelp}</EmptyRow>}>
           <For each={documents()}>
             {(document) => (
               <ResultRow
@@ -219,11 +240,12 @@ function ReadHelpView(props: { block: ToolBlock }) {
     const value = result().document;
     return isRecord(value) ? value : null;
   };
+  const t = useMessages();
   return (
     <CompletedActivity
       block={props.block}
-      label={document() ? `Read help: ${text(document()!.title)}` : "Read help"}
-      description={document() ? text(document()!.appName) || text(document()!.appId) : "Article not found"}
+      label={document() ? t().readHelpArticle({ title: text(document()!.title) }) : t().readHelp}
+      description={document() ? text(document()!.appName) || text(document()!.appId) : t().articleNotFound}
     />
   );
 }
@@ -233,14 +255,15 @@ function SearchProjectView(props: { block: ToolBlock }) {
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
   const items = () => records(result().items);
   const query = () => text(args().query);
+  const t = useMessages();
   return (
     <CompletedActivity
       block={props.block}
-      label={query() ? `Search Project: ${query()}` : "List Project sources"}
-      description={`${items().length} found${result().truncated === true ? "+" : ""}`}
+      label={query() ? t().searchProject({ query: query() }) : t().listProjectSources}
+      description={t().found({ count: items().length, more: result().truncated === true })}
     >
       <ResultList>
-        <Show when={items().length > 0} fallback={<EmptyRow>No Project sources found.</EmptyRow>}>
+        <Show when={items().length > 0} fallback={<EmptyRow>{t().noProjectSources}</EmptyRow>}>
           <For each={items()}>
             {(item) => {
               const kind = text(item.kind);
@@ -270,21 +293,23 @@ function SearchProjectView(props: { block: ToolBlock }) {
 
 function ReadProjectKnowledgeView(props: { block: ToolBlock }) {
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
-  return <CompletedActivity block={props.block} label={`Read Project knowledge: ${text(result().title) || "Entry"}`} />;
+  const t = useMessages();
+  return <CompletedActivity block={props.block} label={t().readProjectKnowledge({ title: text(result().title) || t().projectEntry })} />;
 }
 
 function ListFilesView(props: { block: ToolBlock }) {
   const args = () => (isRecord(props.block.args) ? props.block.args : {});
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
   const files = () => records(result().files);
+  const t = useMessages();
   return (
     <CompletedActivity
       block={props.block}
-      label={`List files: ${text(args().path) || "/"}`}
-      description={`${files().length} found${result().truncated === true ? "+" : ""}`}
+      label={t().listFiles({ path: text(args().path) || "/" })}
+      description={t().found({ count: files().length, more: result().truncated === true })}
     >
       <ResultList>
-        <Show when={files().length > 0} fallback={<EmptyRow>No files found.</EmptyRow>}>
+        <Show when={files().length > 0} fallback={<EmptyRow>{t().noFiles}</EmptyRow>}>
           <For each={files()}>
             {(file) => {
               const path = text(file.path);
@@ -309,10 +334,11 @@ function FileOperationView(props: { block: ToolBlock; verb: string; resultPath?:
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
   const path = () => props.resultPath || text(result().path) || text(args().path);
   const size = () => number(result().size);
+  const t = useMessages();
   return (
     <CompletedActivity
       block={props.block}
-      label={`${props.verb}: ${basename(path()) || "File"}`}
+      label={`${props.verb}: ${basename(path()) || t().file}`}
       description={[path(), size() > 0 ? formatAiFileSize(size()) : ""].filter(Boolean).join(" · ")}
     />
   );
@@ -334,11 +360,12 @@ function ReadFileView(props: { block: ToolBlock }) {
     const t = aiChatMessages(locale());
     return end > start ? t.byteRange({ start: start.toLocaleString(locale()), end: end.toLocaleString(locale()) }) : t.read;
   };
+  const t = () => aiChatMessages(locale());
   return (
     <CompletedActivity
       block={props.block}
-      label={`Read file: ${basename(path())}`}
-      description={`${range()}${result().eof === true ? " · complete" : " · more available"}`}
+      label={t().readFile({ name: basename(path()) })}
+      description={`${range()} · ${result().eof === true ? t().fileComplete : t().fileMoreAvailable}`}
     />
   );
 }
@@ -346,15 +373,17 @@ function ReadFileView(props: { block: ToolBlock }) {
 function CalculateView(props: { block: ToolBlock }) {
   const args = () => (isRecord(props.block.args) ? props.block.args : {});
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
-  return <CompletedActivity block={props.block} label={text(args().expression) || "Calculate"} description={text(result().result)} />;
+  const t = useMessages();
+  return <CompletedActivity block={props.block} label={text(args().expression) || t().calculate} description={text(result().result)} />;
 }
 
 function ViewImageView(props: { block: ToolBlock }) {
   const args = () => (isRecord(props.block.args) ? props.block.args : {});
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
   const path = () => text(result().path) || text(args().path);
+  const t = useMessages();
   return (
-    <CompletedActivity block={props.block} label={`Inspect image: ${basename(path())}`} defaultOpen>
+    <CompletedActivity block={props.block} label={t().inspectImage({ name: basename(path()) })} defaultOpen>
       <DetailSurface>
         <p class="whitespace-pre-wrap px-2 py-1.5 leading-5 text-secondary">{text(result().description)}</p>
       </DetailSurface>
@@ -382,15 +411,21 @@ function CloudResourceView(props: { block: ToolBlock }) {
   const args = () => (isRecord(props.block.args) ? props.block.args : {});
   const result = () => (isRecord(props.block.result) ? props.block.result : {});
   const summary = () => text(result().summary);
+  const t = useMessages();
   return (
     <CompletedActivity
       block={props.block}
-      label={`Read resource: ${text(args().type)}:${text(args().id)}`}
+      label={t().readResource({ ref: `${text(args().type)}:${text(args().id)}` })}
       description={summary() || undefined}
     />
   );
 }
 
+function WriteFileView(props: { block: ToolBlock }) {
+  const t = useMessages();
+  return <FileOperationView block={props.block} verb={t().wroteFile} />;
+}
+
 export function SpecializedBuiltinToolBlock(props: { block: ToolBlock }) {
   switch (props.block.name) {
     case "search_tools":
@@ -414,7 +449,7 @@ export function SpecializedBuiltinToolBlock(props: { block: ToolBlock }) {
     case "read_file":
       return <ReadFileView block={props.block} />;
     case "write_file":
-      return <FileOperationView block={props.block} verb="Wrote file" />;
+      return <WriteFileView block={props.block} />;
     case "calculate":
       return <CalculateView block={props.block} />;
     case "view_image":

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

@@ -40,7 +40,10 @@ export function PresentToolBlock(props: { block: ToolBlock }) {
         </Show>
       }
     >
-      <div class="inline-flex min-h-7 max-w-full items-center gap-1.5 py-1 text-xs leading-none text-dimmed">
+      <div
+        data-call-id={props.block.callId}
+        class="inline-flex min-h-7 max-w-full items-center gap-1.5 py-1 text-xs leading-none text-dimmed"
+      >
         <i class={`ti ${icon()} shrink-0 text-base leading-none`} aria-hidden="true" />
         <Show
           when={actions.onOpenFile}

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

@@ -0,0 +1,44 @@
+import { Chat } from "@k2b/ui";
+import { createMemo, createSignal } from "solid-js";
+import { createStore, reconcile } from "solid-js/store";
+import { render } from "solid-js/web";
+import { emptyProjection, reduceProjection, visibleMessages } from "../client/projection";
+import type { AiTurnBlock, AiWireEvent } from "../protocol";
+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.
+ */
+const [state, setState] = createStore(emptyProjection());
+const [reconnecting, setReconnecting] = createSignal(false);
+Object.assign(window, {
+  reconnect: (on: boolean) => setReconnecting(on),
+  emit: (event: AiWireEvent) => setState(reconcile(reduceProjection(state, event), { key: "id", merge: true })),
+  steer: (text: string) =>
+    setState("activeTurn", "blocks", (blocks): AiTurnBlock[] => [
+      ...blocks,
+      { id: `steer-request-${blocks.length}`, kind: "steer_message", steerId: String(blocks.length), text, status: "pending" },
+    ]),
+});
+
+const root = document.createElement("main");
+root.style.cssText = "display: flex; flex-direction: column; height: 100dvh; max-width: 48rem; margin: 0 auto;";
+document.body.append(root);
+render(
+  () => (
+    <AiChatActionsProvider actions={{}}>
+      {(() => {
+        const items = createAiChatTimeline({
+          messages: createMemo(() => visibleMessages(state)),
+          activeTurn: () => state.activeTurn,
+          reconnecting,
+        });
+        return <Chat.Timeline items={items()} />;
+      })()}
+    </AiChatActionsProvider>
+  ),
+  root,
+);

package/src/ai/chat/message-actions.tsx

@@ -28,8 +28,12 @@ type RetryMessageHandler = (entry: AiStoredMessage, input?: AiRetryMessageInput)
 type RetrySteerHandler = (block: Extract<AiTurnBlock, { kind: "steer_message" }>) => void | Promise<void>;
 
 export type AiChatActions = {
-  /** Host-owned visualizations, persisted independently of the execution session. */
-  renderCodePresentation?: (result: unknown) => JSX.Element;
+  /**
+   * Host-owned visualizations, persisted independently of the execution session. Called once per `code_present`
+   * call, from its first event: `result()` is undefined while the call runs and the saved result afterwards, so
+   * the host reserves the frame early and keeps its state when the turn ends.
+   */
+  renderCodePresentation?: (result: () => unknown) => JSX.Element;
   /** Prevents turn-continuation actions while the current turn is stopping. */
   actionDisabled?: () => boolean;
   onApproval?: ApprovalHandler;

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

@@ -8,6 +8,7 @@ import { type AiResourceMarker, parseAiResourceMarker } from "../resource-marker
 import { assistantVisibleTextFromMessage } from "../timeline";
 import type { AiStoredMessage, AiUserContentPart } from "../types";
 import { AI_IMAGE_MEDIA_TYPES, isAiImageMediaType } from "../types";
+import { aiChatMessages } from "./messages";
 
 type AssistantToolResultMessage = Extract<Message, { role: "tool_result" }>;
 
@@ -401,20 +402,23 @@ const boundedErrorText = (value: string): string => {
   return compact.length > 500 ? `${compact.slice(0, 497)}...` : compact;
 };
 
-/** Canonical capability failure text for the compact chat row. Raw input and output remain in the audit trail. */
+/**
+ * Canonical capability failure text for the compact chat row, or "" when the result carries none and the row
+ * shows its localized fallback. Raw input and output remain in the audit trail.
+ */
 export const capabilityErrorDescription = (result: unknown): string => {
-  if (typeof result === "string") return boundedErrorText(result) || "The action could not be completed.";
+  if (typeof result === "string") return boundedErrorText(result);
   if (isRecord(result)) {
     const message = typeof result.message === "string" ? result.message : typeof result.error === "string" ? result.error : "";
     const code = typeof result.code === "string" ? result.code : "";
     const text = code && message && !message.startsWith(code) ? `${code}: ${message}` : message || code;
     if (text) return boundedErrorText(text);
   }
-  return "The action could not be completed.";
+  return "";
 };
 
 /** Compact user-facing copy for fetch_file failures; the full response remains in the disclosure and audit trail. */
-export const fetchFileErrorPresentation = (result: unknown): FetchFileErrorPresentation => {
+export const fetchFileErrorPresentation = (result: unknown, locale = "en"): FetchFileErrorPresentation => {
   const message =
     typeof result === "string"
       ? result.trim()
@@ -425,25 +429,24 @@ export const fetchFileErrorPresentation = (result: unknown): FetchFileErrorPrese
   if (separator > 0) {
     return { label: message.slice(0, separator), description: message.slice(separator + 3) };
   }
-  return {
-    label: "File download failed",
-    description: message || "The linked file could not be imported into this chat.",
-  };
+  const t = aiChatMessages(locale);
+  return { label: t.fileDownloadFailed, description: message || t.fileNotImported };
 };
 
 /** End-user copy for memory updates; full tool input/result remains available in persisted audit data. */
-export const memoryToolPresentation = (args: unknown, result: unknown): MemoryToolPresentation | null => {
+export const memoryToolPresentation = (args: unknown, result: unknown, locale = "en"): MemoryToolPresentation | null => {
   if (!isRecord(args) || !["list", "search", "add", "update", "delete"].includes(String(args.action))) return null;
   if (!isRecord(result) || typeof result.ok !== "boolean" || typeof result.message !== "string") return null;
+  const t = aiChatMessages(locale);
 
-  if (!result.ok) return { label: "Memory not updated", description: result.message, failed: true };
+  if (!result.ok) return { label: t.memoryNotUpdated, description: result.message, failed: true };
   if (args.action === "add")
-    return { label: "Remembered", description: typeof args.content === "string" ? args.content.trim() : result.message, failed: false };
+    return { label: t.remembered, description: typeof args.content === "string" ? args.content.trim() : result.message, failed: false };
   if (args.action === "update")
-    return { label: "Updated memory", description: result.message.replace(/^Updated memory:\s*/, ""), failed: false };
+    return { label: t.memoryUpdated, description: result.message.replace(/^Updated memory:\s*/, ""), failed: false };
   if (args.action === "delete")
-    return { label: "Forgot memory", description: result.message.replace(/^Forgot memory:\s*/, ""), failed: false };
-  return { label: args.action === "search" ? "Searched memories" : "Listed memories", description: result.message, failed: false };
+    return { label: t.memoryForgotten, description: result.message.replace(/^Forgot memory:\s*/, ""), failed: false };
+  return { label: args.action === "search" ? t.memoriesSearched : t.memoriesListed, description: result.message, failed: false };
 };
 
 export const toolResultSummary = (message: AssistantToolResultMessage | null | undefined): string => {