@k2b/cloud 0.30.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/live-turn.browser-harness.tsx

@@ -12,7 +12,7 @@ import { AiChatActionsProvider, createAiChatTimeline } from "./presentation";
  * `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,
- * `window.approvals` lists the approval decisions, and
+ * `window.approvals` lists the approval decisions, `window.revoked` the websites a receipt revoked, and
  * `window.opened` lists the chat files the timeline opened. Chat files load from `/files?path=`.
  */
 const [state, setState] = createStore(emptyProjection());
@@ -20,9 +20,11 @@ const [reconnecting, setReconnecting] = createSignal(false);
 const continued: string[] = [];
 const opened: string[] = [];
 const approvals: unknown[] = [];
+const revoked: string[] = [];
 Object.assign(window, {
   continued,
   approvals,
+  revoked,
   opened,
   reconnect: (on: boolean) => setReconnecting(on),
   emit: (event: AiWireEvent) => setState(reconcile(reduceProjection(state, event), { key: "id", merge: true })),
@@ -42,6 +44,7 @@ render(
       actions={{
         onContinueTurn: (message) => void continued.push(message),
         onApproval: async (request, input) => void approvals.push({ callId: request.callId, ...input }),
+        onRevokeWebsite: async (origin) => void revoked.push(origin),
         fileUrl: (path) => `/files?path=${encodeURIComponent(path)}`,
         onOpenFile: (path) => void opened.push(path),
       }}

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 {
@@ -26,7 +27,7 @@ import { aiChatMessages } from "./messages";
 /** The active-turn coordinates an approval/tool action needs to resolve on the server. */
 export type AiTurnActionRequest = { turnId: string; callId: string; name: string };
 
-type ApprovalHandler = (request: AiTurnActionRequest, input: { approved: boolean; remember?: "always" }) => void | Promise<void>;
+type ApprovalHandler = (request: AiTurnActionRequest, input: { approved: boolean; remember?: "chat" | "always" }) => void | Promise<void>;
 type FrontendToolResultHandler = (request: AiTurnActionRequest, result: unknown) => void | Promise<void>;
 type ForkMessageHandler = (entry: AiStoredMessage, input?: AiForkMessageInput) => void | Promise<void>;
 type RetryMessageHandler = (entry: AiStoredMessage, input?: AiRetryMessageInput) => void | Promise<void>;
@@ -42,6 +43,8 @@ export type AiChatActions = {
   /** Prevents turn-continuation actions while the current turn is stopping. */
   actionDisabled?: () => boolean;
   onApproval?: ApprovalHandler;
+  /** Revoke the approval that lets this chat read `origin` without asking; the next request asks again. */
+  onRevokeWebsite?: (origin: string) => Promise<void>;
   onFrontendToolResult?: FrontendToolResultHandler;
   onForkMessage?: ForkMessageHandler;
   onRetryMessage?: RetryMessageHandler;
@@ -60,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",
@@ -98,6 +105,7 @@ const messages = i18n.define({
       openImage: ({ name }: { name: string }) => `Open image ${name}`,
       steered: "Conversation steered",
       groupLoad: "Loaded tools and guidance",
+      repeatCount: ({ count }: { count: number }) => `${count} times`,
       groupFailed: ({ count }: { count: number }) => `${count} failed`,
       groupRejected: ({ count }: { count: number }) => `${count} rejected`,
       receiptDone: ({ title }: { title: string }) => `Done: ${title}`,
@@ -120,6 +128,14 @@ const messages = i18n.define({
       approved: "Approved",
       rejected: "Rejected",
       alwaysApprove: "Always approve",
+      chatApprove: "Approve for this chat",
+      allowWebsiteForChat: "Allow this website for this chat",
+      websiteAllowedForChat: ({ count }: { count: number }) =>
+        `Allowed for this chat · ${count === 1 ? "1 request without asking" : `${count} requests without asking`}`,
+      revoke: "Revoke",
+      revokeFailed: "Could not revoke. Try again.",
+      revokeWebsiteFor: ({ host }: { host: string }) => `Revoke the approval for ${host}`,
+      websiteRevoked: "Revoked. The next request asks again.",
       details: "Details",
       hideDetails: "Hide details",
       moreOptions: ({ title }: { title: string }) => `More options for ${title}`,
@@ -180,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",
@@ -294,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.",
@@ -389,6 +413,7 @@ const messages = i18n.define({
       openImage: ({ name }) => `Bild ${name} öffnen`,
       steered: "Richtung geändert",
       groupLoad: "Werkzeuge und Wissen geladen",
+      repeatCount: ({ count }) => `${count}-mal`,
       groupFailed: ({ count }) => `${count} fehlgeschlagen`,
       groupRejected: ({ count }) => `${count} abgelehnt`,
       receiptDone: ({ title }) => `Erledigt: ${title}`,
@@ -411,6 +436,14 @@ const messages = i18n.define({
       approved: "Freigegeben",
       rejected: "Abgelehnt",
       alwaysApprove: "Immer freigeben",
+      chatApprove: "Für diesen Chat freigeben",
+      allowWebsiteForChat: "Diese Website für diesen Chat erlauben",
+      websiteAllowedForChat: ({ count }: { count: number }) =>
+        `Für diesen Chat erlaubt · ${count === 1 ? "1 Abruf ohne Rückfrage" : `${count} Abrufe ohne Rückfrage`}`,
+      revoke: "Entziehen",
+      revokeFailed: "Konnte nicht entzogen werden. Versuche es erneut.",
+      revokeWebsiteFor: ({ host }: { host: string }) => `Freigabe für ${host} entziehen`,
+      websiteRevoked: "Entzogen. Der nächste Abruf fragt wieder.",
       details: "Details",
       hideDetails: "Details ausblenden",
       moreOptions: ({ title }) => `Weitere Optionen für ${title}`,
@@ -471,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>
+  );
+}