@k2b/cloud 0.31.0 → 0.32.0

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

@@ -0,0 +1,276 @@
+import {
+  ChartExplorer,
+  type ChartExplorerColumn,
+  type ChartExplorerData,
+  type ChartExplorerRequest,
+  ChartFilterControls,
+  type ChartSnapshot,
+  createChartExplorer,
+  prepareChartSnapshot,
+  useLocale,
+} from "@k2b/ui";
+import { createMemo, createSignal, type JSX, Show } from "solid-js";
+import { type CloudAiChartRow, cloudAiChartMarkKey, cloudAiChartReferenceMark, cloudAiChartRenderOptions } from "../chart-block";
+import {
+  type CloudAiExplorerRequest,
+  type CloudAiExplorerView,
+  type CloudAiViewSummary,
+  cloudAiExplorerControls,
+  cloudAiExplorerState,
+  cloudAiViewCellOf,
+  cloudAiViewTable,
+} from "../view-block";
+import { aiChatMessages } from "./messages";
+import { ReferenceText } from "./reference-text";
+
+type ExplorerSummary = Extract<CloudAiViewSummary, { view: "explorer" }>;
+type Charts = Record<string, ChartExplorerData<CloudAiChartRow>>;
+
+/** Rows the table renders inline, as table views do; sorting and Copy data use all of them. */
+const VISIBLE_ROWS = 100;
+/** Every explorer chart kind draws a plot with axes, so all share the chart block's viewport. */
+const HEIGHT = "18rem";
+/** createChartExplorer holds the shown rows as its only entry; views are drawn from them on demand. */
+const TABLE = "table";
+
+const emptySnapshot = (kind: ChartSnapshot["kind"]): ChartSnapshot => ({
+  kind,
+  svg: "",
+  width: 480,
+  height: 280,
+  stretch: true,
+  marks: [],
+});
+
+/** One state of the explorer: the rows its request shows, as the table, and every view projected from them. */
+function explorerState(view: CloudAiExplorerView, table: CloudAiChartRow[], request: CloudAiExplorerRequest, locale: string) {
+  const state = cloudAiExplorerState(view, request, locale);
+  const rows = state.rows.map((index) => table[index]!);
+  const charts: Charts = { [TABLE]: { chart: emptySnapshot("bar"), rows } };
+  return { snapshot: { request: { ...request }, charts }, rows, charts: state.charts };
+}
+type ExplorerState = ReturnType<typeof explorerState>;
+
+/**
+ * One view of a state, drawn. Drawing is the expensive part, so only a view someone shows is drawn. A view that
+ * draws no mark of the shown rows returns undefined, so its frame says why instead of showing an empty plot.
+ */
+function drawExplorerView(
+  view: CloudAiExplorerView,
+  spec: CloudAiExplorerView["views"][number],
+  table: CloudAiChartRow[],
+  state: ExplorerState,
+  locale: string,
+): ChartExplorerData<CloudAiChartRow> | undefined {
+  const chart = state.charts[spec.id];
+  if (!chart) return undefined;
+  const columnLabel = (id: string) => view.columns.find((column) => column.id === id)?.label ?? id;
+  const rowOf = (datum: { seriesIndex?: number; index: number }) => chart.marks[datum.seriesIndex ?? 0]?.[datum.index];
+  // The tooltip names what this view encodes; the table and Copy data carry every column.
+  const encoded = (seriesIndex: number) => {
+    const ys = Array.isArray(spec.y) ? spec.y : [spec.y];
+    // Several y columns are one series each; with a series column every series shows the single y.
+    const y = spec.kind === "line" || spec.kind === "scatter" ? ys[ys.length > 1 ? seriesIndex % 8 : 0] : spec.y;
+    return [
+      spec.x,
+      ...(y ? [y] : []),
+      ...(spec.kind === "heatmap" ? [spec.value] : []),
+      ...(spec.kind !== "heatmap" && spec.kind !== "bar" && spec.series ? [spec.series] : []),
+      ...(view.controls?.step ? [view.controls.step] : []),
+    ];
+  };
+  try {
+    const snapshot = prepareChartSnapshot(cloudAiChartRenderOptions(chart.input, locale, { legend: "outside" }), {
+      key: ({ datum }) => cloudAiChartMarkKey(datum),
+      rowKey: ({ datum }) => String(rowOf(datum)),
+      tooltip: ({ datum }) => {
+        const row = table[rowOf(datum) ?? -1];
+        const series =
+          chart.input.kind === "line" || chart.input.kind === "scatter" ? chart.input.series[datum.seriesIndex ?? 0] : undefined;
+        return {
+          title: series?.label ?? (row ? row.cells[spec.x] : undefined),
+          rows: row
+            ? [...new Set(encoded(datum.seriesIndex ?? 0))].map((id) => ({ label: columnLabel(id), value: row.cells[id] ?? "" }))
+            : [],
+        };
+      },
+      reference: ({ datum }) => cloudAiChartReferenceMark(chart.input, datum),
+    });
+    // createChartExplorer rejects a mark without a row; such a view shows why instead of failing the block.
+    const shown = new Set(state.rows.map((row) => row.key));
+    if (!snapshot.marks.length || !snapshot.marks.every((mark) => shown.has(mark.rowKey))) return undefined;
+    return { chart: snapshot, rows: state.rows };
+  } catch {
+    return undefined;
+  }
+}
+
+const hasControls = (summary: ExplorerSummary) => summary.step || summary.filter;
+
+/** The frame of an explorer whose file is loading or unavailable, at the size the loaded explorer takes. */
+function ExplorerPlaceholder(props: { summary: ExplorerSummary; message: JSX.Element }) {
+  const locale = useLocale();
+  return (
+    <ChartExplorer
+      title={props.summary.title}
+      description={props.summary.subtitle ? <span class="text-sm text-secondary">{props.summary.subtitle}</span> : undefined}
+      height={HEIGHT}
+      data={{ chart: emptySnapshot(props.summary.views[0]?.kind ?? "bar"), rows: [] }}
+      columns={[{ id: "value", label: aiChatMessages(locale()).chartUnavailable, value: () => "" }]}
+      charts={props.summary.views}
+      chart={props.summary.views[0]?.id}
+      controls={
+        hasControls(props.summary) ? (
+          <ChartFilterControls
+            request={{ step: props.summary.step ? "0" : undefined }}
+            displayedRequest={{}}
+            steps={props.summary.step ? [{ key: "0", label: "" }] : undefined}
+            series={props.summary.filter ? [{ key: "0", label: "", color: "var(--stdlib-chart-c1)" }] : undefined}
+            compare={props.summary.compare}
+            dimensionLabel={"\u00a0"}
+            seriesLabel={"\u00a0"}
+            disabled
+            onRequest={() => {}}
+          />
+        ) : undefined
+      }
+      empty={props.message}
+      renderDetails={false}
+    />
+  );
+}
+
+/**
+ * The loaded explorer. Every filter, step and comparison is computed here from the file's rows; the selection is
+ * shared by every view and the table, and all of it is local to this block.
+ */
+function LoadedExplorer(props: { summary: ExplorerSummary; input: CloudAiExplorerView }) {
+  const locale = useLocale();
+  const t = () => aiChatMessages(locale());
+  const table = createMemo(() => cloudAiViewTable({ ...props.input, view: "table" }, locale()).rows);
+  const controls = createMemo(() => cloudAiExplorerControls(props.input, locale()));
+  // createChartExplorer owns the request and the selection over the shown rows; each view is drawn when shown, once
+  // per state, so a filter or step change draws one view instead of all of them.
+  const states = new WeakMap<Charts, { state: ExplorerState; drawn: Map<string, ChartExplorerData<CloudAiChartRow> | undefined> }>();
+  const build = (request: ChartExplorerRequest) => {
+    const next = explorerState(props.input, table(), request, locale());
+    states.set(next.snapshot.charts, { state: next, drawn: new Map() });
+    return next.snapshot;
+  };
+  const explorer = createChartExplorer<Charts>({ snapshot: () => build(controls().initial), load: build });
+  const [chart, setChart] = createSignal(props.input.views[0]!.id);
+  const [view, setView] = createSignal<"chart" | "table">("chart");
+  const spec = () => props.input.views.find((entry) => entry.id === chart()) ?? props.input.views[0]!;
+  const shown = createMemo(() => {
+    const charts = explorer.snapshot().charts;
+    const entry = states.get(charts)!;
+    if (view() === "table") return { data: charts[TABLE]!, failed: false };
+    const id = spec().id;
+    if (!entry.drawn.has(id)) entry.drawn.set(id, drawExplorerView(props.input, spec(), table(), entry.state, locale()));
+    const data = entry.drawn.get(id);
+    return data ? { data, failed: false } : { data: { chart: emptySnapshot(spec().kind), rows: [] }, failed: true };
+  });
+  const legend = () =>
+    view() === "chart" && !shown().failed ? states.get(explorer.snapshot().charts)?.state.charts[spec().id]?.legend : undefined;
+  // Swatches name chart colors only where the shown view colors its series by the filter column.
+  const colored = () => {
+    const current = spec();
+    return view() === "chart" && (current.kind === "line" || current.kind === "scatter") && current.series === props.input.controls?.filter;
+  };
+  const columns = createMemo(() =>
+    props.input.columns.map(
+      (column): ChartExplorerColumn<CloudAiChartRow> => ({
+        id: column.id,
+        label: column.label ?? column.id,
+        value: (row) => row.cells[column.id] ?? "",
+        sortValue: (row) => (Object.hasOwn(row.values, column.id) ? (row.values[column.id] ?? null) : null),
+        align: column.type === "number" ? "right" : "left",
+        ...(column.type === "ref"
+          ? {
+              render: (row: CloudAiChartRow) => {
+                const cells = props.input.rows[Number(row.key)];
+                const cell = cells ? cloudAiViewCellOf(cells, column.id) : null;
+                const text = row.cells[column.id] ?? "";
+                return cell && typeof cell === "object" ? <ReferenceText text={text} reference={cell} /> : text;
+              },
+            }
+          : {}),
+      }),
+    ),
+  );
+  const columnLabel = (id: string | undefined) =>
+    id === undefined ? undefined : (props.input.columns.find((column) => column.id === id)?.label ?? id);
+  return (
+    <ChartExplorer<CloudAiChartRow>
+      title={props.input.title}
+      description={props.input.subtitle ? <span class="text-sm text-secondary">{props.input.subtitle}</span> : undefined}
+      height={HEIGHT}
+      data={shown().data}
+      columns={columns()}
+      charts={props.input.views}
+      chart={chart()}
+      onChartChange={setChart}
+      view={view()}
+      onViewChange={setView}
+      legend={legend()}
+      selectedKey={explorer.selectedKey()}
+      onSelectedKeyChange={explorer.select}
+      tableRows={VISIBLE_ROWS}
+      controls={
+        hasControls(props.summary) ? (
+          <ChartFilterControls
+            request={explorer.desired()}
+            displayedRequest={explorer.snapshot().request}
+            steps={controls().steps.length ? controls().steps : props.summary.step ? [{ key: "0", label: "" }] : undefined}
+            series={
+              controls().series.length
+                ? controls().series.map(({ key, label, color }) => ({
+                    key,
+                    label,
+                    ...(colored() ? { color: `var(--stdlib-chart-c${(color % 8) + 1})` } : {}),
+                  }))
+                : props.summary.filter
+                  ? [{ key: "0", label: "", color: "var(--stdlib-chart-c1)" }]
+                  : undefined
+            }
+            disabled={!props.input.rows.length}
+            compare={props.summary.compare}
+            dimensionLabel={columnLabel(props.input.controls?.step)}
+            seriesLabel={columnLabel(props.input.controls?.filter)}
+            onRequest={explorer.setRequest}
+          />
+        ) : undefined
+      }
+      empty={
+        <span role="status">
+          {shown().failed && explorer.snapshot().charts[TABLE]!.rows.length ? t().explorerUndrawable : t().explorerNoRows}
+        </span>
+      }
+      renderDetails={false}
+    />
+  );
+}
+
+/**
+ * An explorer view file: one dataset, several charts of it, a shared selection, local filters and the table of the
+ * rows shown. It stands at its final size from the `present` summary while the file loads (`input` undefined) and
+ * when it is unavailable (`input` null).
+ */
+export function CloudExplorerView(props: { summary: ExplorerSummary; input: CloudAiExplorerView | null | undefined }) {
+  const locale = useLocale();
+  const t = () => aiChatMessages(locale());
+  return (
+    <Show
+      when={props.input}
+      keyed
+      fallback={
+        <ExplorerPlaceholder
+          summary={props.summary}
+          message={<span role="status">{props.input === undefined ? t().viewLoading : t().viewUnavailable}</span>}
+        />
+      }
+    >
+      {(input) => <LoadedExplorer summary={props.summary} input={input} />}
+    </Show>
+  );
+}

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

@@ -1,10 +1,12 @@
 import { fileIcons } from "@k2b/stdlib";
 import { Chat } from "@k2b/ui";
-import { Show } from "solid-js";
+import { createMemo, Show } from "solid-js";
 import { formatAiFileSize } from "../attachments";
 import type { AiTurnBlock } from "../protocol";
+import { CloudAiViewSummarySchema, isAiViewFile } from "../view-block";
 import { useAiChatActions } from "./message-actions";
 import { aiToolIcon, isRecord } from "./message-utils";
+import { CloudViewBlock } from "./view-block";
 
 type ToolBlock = Extract<AiTurnBlock, { kind: "tool" }>;
 type PresentResult = { path: string; size: number; mediaType: string };
@@ -20,7 +22,44 @@ const presentResult = (block: ToolBlock): PresentResult | null => {
   return null;
 };
 
+/** The summary `present` returns for a view file; Cloud gives it only for assistant files below /views. */
+const presentedView = (block: ToolBlock) => {
+  if (block.status !== "completed" || block.isError || !isRecord(block.result) || typeof block.result.path !== "string") return null;
+  const summary = CloudAiViewSummarySchema.safeParse(block.result.view);
+  return summary.success && isAiViewFile({ path: block.result.path, origin: "assistant" })
+    ? { path: block.result.path, summary: summary.data }
+    : null;
+};
+
+/**
+ * A view's size comes with the finished call's summary. Until then the work line names the step and the result slot
+ * stays empty, so no one-line placeholder grows into the chart or table.
+ */
+const preparingView = (block: ToolBlock) =>
+  block.status === "running" && isRecord(block.args) && typeof block.args.path === "string"
+    ? isAiViewFile({ path: block.args.path.trim(), origin: "assistant" })
+    : false;
+
+/** A presented file: a view file shows as its chart or table, every other file as a chip to open and download. */
 export function PresentToolBlock(props: { block: ToolBlock }) {
+  // Live updates replace the block with an equal result; only a different view loads again.
+  const view = createMemo(() => presentedView(props.block), null, { equals: (a, b) => JSON.stringify(a) === JSON.stringify(b) });
+  return (
+    <Show
+      when={view()}
+      keyed
+      fallback={
+        <Show when={!preparingView(props.block)}>
+          <PresentedFile block={props.block} />
+        </Show>
+      }
+    >
+      {(view) => <CloudViewBlock path={view.path} summary={view.summary} />}
+    </Show>
+  );
+}
+
+function PresentedFile(props: { block: ToolBlock }) {
   const actions = useAiChatActions();
   const file = () => presentResult(props.block);
   const title = () => (isRecord(props.block.args) && typeof props.block.args.title === "string" ? props.block.args.title : null);

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

@@ -11,6 +11,7 @@ import {
   useLocale,
 } from "@k2b/ui";
 import { createContext, createSignal, For, type JSX, Show, useContext } from "solid-js";
+import type { CloudResourceRef } from "../../contracts/capabilities";
 import type { AiTurnBlock } from "../protocol";
 import type { AiMessageFeedback, AiMessageFeedbackReason, AiStoredMessage } from "../types";
 import {
@@ -62,6 +63,11 @@ export type AiChatActions = {
   resolveFileLink?: (href: string) => { path: string; href: string } | null;
   /** Download URL for a conversation VFS file (present blocks, attachment chips). */
   fileUrl?: (path: string) => string | null;
+  /**
+   * Open a Cloud object a view references. The host resolves it through the owning app's reader with the viewer's
+   * access and confirms before it opens; without this action, references show as text.
+   */
+  onOpenReference?: (title: string, ref: CloudResourceRef) => void;
 };
 
 const assistantBlocks = (message: Message): Extract<Message, { role: "assistant" }>["content"] =>

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

@@ -334,6 +334,13 @@ const BUILT_IN_TOOL_ICONS = new Map<string, string>([
   ["text_editor", "ti ti-edit"],
   ["cloud_text_editor", "ti ti-edit"],
   ["local_bash", "ti ti-terminal-2"],
+  ["local_list", "ti ti-folder"],
+  ["local_read", "ti ti-file-text"],
+  ["local_upload", "ti ti-upload"],
+  ["local_download", "ti ti-download"],
+  ["local_write", "ti ti-file-pencil"],
+  ["local_move", "ti ti-arrows-move"],
+  ["load_local_skill", "ti ti-book"],
   ["list_files", "ti ti-file-spark"],
   ["read_file", "ti ti-file-spark"],
   ["write_file", "ti ti-file-spark"],

package/src/ai/chat/messages.ts

@@ -10,6 +10,13 @@ const messages = i18n.define({
       tableOpen: "Open",
       tableEmpty: "No matching rows.",
       chartUnavailable: "This chart cannot be shown.",
+      viewLoading: "Loading…",
+      viewUnavailable: "This view is no longer available. Its file was changed or deleted.",
+      viewCopyData: "Copy data",
+      viewRowsCapped: ({ shown, total }: { shown: string; total: string }) =>
+        `Showing ${shown} of ${total} rows. Sort to see others; Copy data copies all of them.`,
+      explorerNoRows: "No rows match this selection.",
+      explorerUndrawable: "This view cannot be drawn for this selection. The table shows its rows.",
       tableCapped: "Showing the first 100 returned rows. The full tool result remains available in details.",
       tableMore: "More rows are available. Ask for the next page or open the result in the application.",
       assistantTurns: "Assistant turns",
@@ -189,6 +196,7 @@ const messages = i18n.define({
       toolsLoaded: "Loaded",
       toolsAlreadyLoaded: "Already loaded",
       toolUnknown: "Not found",
+      toolIsSkill: "A skill, not a tool",
       toolNotOffered: "Not available here",
       toolNotAllowed: "Not allowed",
       toolAppOffline: "App not reachable",
@@ -303,6 +311,13 @@ const messages = i18n.define({
       tableOpen: "Öffnen",
       tableEmpty: "Keine passenden Zeilen.",
       chartUnavailable: "Dieses Diagramm kann nicht angezeigt werden.",
+      viewLoading: "Wird geladen …",
+      viewUnavailable: "Diese Ansicht ist nicht mehr verfügbar. Ihre Datei wurde geändert oder gelöscht.",
+      viewCopyData: "Daten kopieren",
+      viewRowsCapped: ({ shown, total }: { shown: string; total: string }) =>
+        `${shown} von ${total} Zeilen werden angezeigt. Sortiere, um andere zu sehen; „Daten kopieren“ kopiert alle.`,
+      explorerNoRows: "Keine Zeilen passen zu dieser Auswahl.",
+      explorerUndrawable: "Diese Ansicht lässt sich für diese Auswahl nicht zeichnen. Die Tabelle zeigt ihre Zeilen.",
       tableCapped:
         "Die ersten 100 zurückgegebenen Zeilen werden angezeigt. Das vollständige Werkzeugergebnis bleibt in den Details verfügbar.",
       tableMore: "Weitere Zeilen sind verfügbar. Frage nach der nächsten Seite oder öffne das Ergebnis in der Anwendung.",
@@ -489,6 +504,7 @@ const messages = i18n.define({
       toolsLoaded: "Geladen",
       toolsAlreadyLoaded: "Bereits geladen",
       toolUnknown: "Nicht gefunden",
+      toolIsSkill: "Ein Skill, kein Werkzeug",
       toolNotOffered: "Hier nicht verfügbar",
       toolNotAllowed: "Nicht erlaubt",
       toolAppOffline: "App nicht erreichbar",

package/src/ai/chat/presentation.tsx

@@ -16,6 +16,7 @@ import type { AiActiveTurn } from "../client/projection";
 import { type AiActiveTurnSegment, type AiTurnBlock, splitActiveTurnBlocks } from "../protocol";
 import { type AiAssistantTimelineItem, buildAiMessageTimeline } from "../timeline";
 import type { AiConversationTimelineEntry, AiStoredMessage, AiTurnError } from "../types";
+import { AiReaderTimeZoneProvider } from "./action-sentences";
 import { type AiChatActions, AiChatActionsProvider, createAssistantMessageActions, useAiChatActions } from "./message-actions";
 import { isRecord, isSurveyToolName, textFromMessage } from "./message-utils";
 import { aiChatMessages } from "./messages";
@@ -112,7 +113,7 @@ const isEmptyLayout = (layout: AiTurnLayout) => !isWideLayout(layout) && layout.
  * Turn views live in their own roots, keyed by timeline id. A changed segment updates its view instead of
  * replacing it, so host state inside a turn, such as a running Studio session, survives every update.
  */
-const createTurnViews = (disclosureState: AiToolDisclosureState) => {
+const createTurnViews = (disclosureState: AiToolDisclosureState, timeZone: string | undefined) => {
   const owner = getOwner();
   const views = new Map<string, { set: Setter<AiTurnSegment>; content: JSX.Element; dispose: () => void }>();
   onCleanup(() => {
@@ -128,7 +129,11 @@ const createTurnViews = (disclosureState: AiToolDisclosureState) => {
       }
       return createRoot((dispose) => {
         const [current, set] = createSignal(segment);
-        const content = <AiTurnView segment={current} disclosureState={disclosureState} />;
+        const content = (
+          <AiReaderTimeZoneProvider value={timeZone}>
+            <AiTurnView segment={current} disclosureState={disclosureState} />
+          </AiReaderTimeZoneProvider>
+        );
         views.set(segment.id, { set, content, dispose });
         return content;
       }, owner);
@@ -472,6 +477,11 @@ export type AiChatTimelineSource = {
   activeTurn: Accessor<AiActiveTurn | null>;
   /** The conversation stream lost its connection and reconnects, such as `streamStatus() === "reconnecting"`. */
   reconnecting?: Accessor<boolean>;
+  /**
+   * The reader's IANA time zone, such as the page's `getTimeZone(c)`, so times in server-rendered history match the
+   * browser. Defaults to the browser's own zone, and to UTC outside a browser.
+   */
+  timeZone?: string;
 };
 
 /**
@@ -483,7 +493,7 @@ export function createAiChatTimeline(source: AiChatTimelineSource): Accessor<rea
   const actions = useAiChatActions();
   const locale = useLocale();
   const disclosureState = createAiToolDisclosureState();
-  const views = createTurnViews(disclosureState);
+  const views = createTurnViews(disclosureState, source.timeZone);
   // While the stream reconnects or a model call waits for its retry, the live turn says so and its clock stands.
   const reconnecting = createMemo(() => source.activeTurn()?.providerRetry === true || source.reconnecting?.() === true);
   const clock = createActiveTurnClock(source, reconnecting);

package/src/ai/chat/reference-text.tsx

@@ -0,0 +1,34 @@
+import { markdownReferenceIcon } from "@k2b/ui";
+import { Show } from "solid-js";
+import type { CloudAiViewReference } from "../view-block";
+import { useAiChatActions } from "./message-actions";
+
+/**
+ * A Cloud object a view names. It carries no URL: the host resolves it on click with the viewer's access and confirms
+ * before it opens. It looks like a reference to Cloud content in Markdown, a calm pill, and stays text without a host.
+ * A Cloud reference names an object of the owning app, not a kind the chat knows, such as a task or an event, so the
+ * pill keeps the neutral page icon that relative links in chat Markdown also show. Without a reference it only takes
+ * the pill's room, for a hidden copy that reserves it.
+ */
+export function ReferenceText(props: { text: string; reference?: CloudAiViewReference }) {
+  const actions = useAiChatActions();
+  return (
+    <Show when={actions.onOpenReference} fallback={props.text}>
+      {(open) => (
+        <button
+          type="button"
+          // The pill's fill reaches past the text without making a compact table row taller than the one reserved.
+          class="k2b-reference -my-[0.125em] cursor-pointer text-left"
+          data-reference="page"
+          onClick={() => {
+            const reference = props.reference;
+            if (reference) open()(props.text, { type: reference.type, id: reference.id });
+          }}
+        >
+          <i class={`k2b-reference__icon ti ${markdownReferenceIcon("page")}`} aria-hidden="true" />
+          {props.text}
+        </button>
+      )}
+    </Show>
+  );
+}

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

@@ -32,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",

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",
@@ -83,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",

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,
@@ -525,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());
@@ -536,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"
@@ -567,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;
@@ -597,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()),
         }),
       );
     }),

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,
+);