@k2b/cloud 0.29.1 → 0.31.0

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

@@ -1,7 +1,7 @@
 import { type AiTurnBlock, isRenderableTurnBlock } from "../protocol";
 import type { AiStoredMessage } from "../types";
 import { hasCapabilityTable } from "./capability-result";
-import { isCardToolName, isRecord, isSurveyToolName, isTextEditorToolName } from "./message-utils";
+import { isCardToolName, isChartToolName, isRecord, isSurveyToolName, isTextEditorToolName } from "./message-utils";
 import { isFailedTool } from "./tool-groups";
 
 type ToolBlock = Extract<AiTurnBlock, { kind: "tool" }>;
@@ -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. */
@@ -69,7 +74,7 @@ const isResult = (block: ToolBlock, phase: AiTurnPhase, codePresentations: boole
   // A running delivery reserves its place once its arguments arrived: a new version of an earlier result must find the
   // earlier place before it takes one of its own.
   const delivered = block.status === "completed" || (live(phase) && block.status === "running" && block.args !== undefined);
-  if (block.name === "present" || isCardToolName(block.name)) return delivered;
+  if (block.name === "present" || isCardToolName(block.name) || isChartToolName(block.name)) return delivered;
   if (block.name === "code_present") return codePresentations && delivered;
   return hasCapabilityTable(block);
 };
@@ -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

@@ -17,6 +17,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 {
   type AiApprovalDecision,
   ApprovalBlockView,
@@ -26,9 +27,18 @@ import {
   TextEditorToolView,
 } from "./blocks";
 import { CapabilityTablePreview } from "./capability-table";
+import { CloudChartBlock } from "./chart-block";
 import { PresentToolBlock } from "./file-tools";
 import { useAiChatActions } from "./message-actions";
-import { aiToolIcon, capabilityErrorDescription, displayToolName, isCardToolName, isRecord, isSurveyToolName } from "./message-utils";
+import {
+  aiToolIcon,
+  capabilityErrorDescription,
+  displayToolName,
+  isCardToolName,
+  isChartToolName,
+  isRecord,
+  isSurveyToolName,
+} from "./message-utils";
 import { aiChatMessages } from "./messages";
 import { AssistantMarkdownBlock } from "./primitives";
 import { AiToolActivity, AiToolDisclosureProvider, type AiToolDisclosureState } from "./tool-disclosure";
@@ -133,7 +143,8 @@ const stepPhrase = (block: AiTurnBlock | null, t: Messages, withTargets: boolean
   if (name === "present") return withTarget(t.stepDeliveringFile);
   if (name === "code_present") return withTarget(t.stepPreparingView);
   if (isCardToolName(name)) return t.stepPreparingCard;
-  if (["code_write", "code_create", "code_update", "code_fork", "code_remove", "code_restore"].includes(name))
+  if (isChartToolName(name)) return t.stepPreparingChart;
+  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;
@@ -225,6 +236,7 @@ function AiWorkLine(props: { segment: Accessor<AiTurnSegment> }) {
       tone={working() ? "ai" : "neutral"}
       busy={working()}
       trailing={trailing()}
+      bodyInset={false}
       renderBody={() => <AiWorkSteps blocks={layout().work} active={working()} />}
     />
   );
@@ -264,7 +276,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)!;
@@ -272,17 +304,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} />}
     />
   );
 }
@@ -300,13 +348,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>();
@@ -333,12 +387,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>
           );
         }}
@@ -436,6 +497,9 @@ function AiTurnResultView(props: { result: Accessor<AiTurnResult | undefined>; r
           <Match when={isCardToolName(current().name)}>
             <CloudCardBlock args={current().args} />
           </Match>
+          <Match when={isChartToolName(current().name)}>
+            <CloudChartBlock args={current().args} completed={current().status === "completed"} />
+          </Match>
           <Match when={true}>
             <Show when={!props.receipt()}>
               <CapabilityResultRow block={current()} />
@@ -455,33 +519,37 @@ type ReceiptState = Exclude<AiTurnActionState, "open" | "interaction">;
 
 /**
  * One line for an action in place 4, the same element while it runs and once it is done, rejected, failed, or not run.
- * It names the action in the reader's language with what it acted on, such as "Rejected: Run code · report.ts", or the
- * application's own summary of what it did.
+ * It says what happened in the owning app's words: its sentence for the outcome, such as "Moved report.pdf to the
+ * trash", else, once done, the application's own summary of the call. Without either it puts the state in the reader's
+ * language before what the call does, such as "Rejected: Write report.md", or before its title and target.
  */
 function AiReceipt(props: { block: ToolBlock; state: ReceiptState; stopped: boolean }) {
   const locale = useLocale();
   const t = () => aiChatMessages(locale());
   const block = () => props.block;
   const subject = () => {
+    const sentence = toolSubject(block(), locale());
+    if (sentence) return sentence;
     const title = block().presentation?.title ?? displayToolName(block().name, locale());
     const target = toolTarget(block());
     return target ? `${title} · ${target}` : title;
   };
+  const capabilityAction = () => block().presentation?.kind === "capability";
   const links = () => (props.state === "done" ? resultLinks(block()) : []);
   const label = () => {
     const state = props.state;
     if (state === "running") return t().receiptRunning({ title: subject() });
     if (state === "done") {
-      const summary = resultSummary(block());
-      if (summary) return summary;
       // A tool that is not a Cloud action has no effect of its own to report; the receipt records the decision.
-      return block().presentation?.kind === "capability"
-        ? t().receiptDone({ title: subject() })
-        : t().receiptApproved({ title: subject() });
+      if (!capabilityAction()) return t().receiptApproved({ title: subject() });
+      return toolOutcome(block(), "done", locale()) || resultSummary(block()) || t().receiptDone({ title: subject() });
     }
-    if (state === "rejected") return t().receiptRejected({ title: subject() });
+    if (state === "rejected") return toolOutcome(block(), "rejected", locale()) ?? t().receiptRejected({ title: subject() });
     if (state === "failed") return t().receiptFailed({ title: subject() });
-    return t().receiptNotRun({ title: subject(), stopped: props.stopped });
+    const notRun = toolOutcome(block(), "notRun", locale());
+    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";
   return (
@@ -529,7 +597,7 @@ 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: current.block.presentation?.title ?? displayToolName(current.block.name, locale()),
+          title: toolSubject(current.block, locale()) ?? current.block.presentation?.title ?? displayToolName(current.block.name, locale()),
         }),
       );
     }),
@@ -623,14 +691,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>;
 }) {
@@ -644,6 +716,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;
@@ -655,14 +728,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);
@@ -683,6 +763,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}
     >
@@ -739,7 +820,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/web-tools.tsx

@@ -1,8 +1,10 @@
-import { Chat, ScrollArea } from "@k2b/ui";
+import { Button, Chat, ScrollArea, useLocale } from "@k2b/ui";
 import { createSignal, For, Show } from "solid-js";
 import { formatAiFileSize } from "../attachments";
 import type { AiTurnBlock } from "../protocol";
+import { useAiChatActions } from "./message-actions";
 import { isRecord } from "./message-utils";
+import { aiChatMessages } from "./messages";
 import { AiToolActivity } from "./tool-disclosure";
 
 type ToolBlock = Extract<AiTurnBlock, { kind: "tool" }>;
@@ -200,3 +202,95 @@ export function FetchFileToolBlock(props: { block: ToolBlock }) {
     </Show>
   );
 }
+
+type WebsiteReceipt = { method: string; url: string };
+
+/**
+ * Requests a website approval for this chat let through without asking, from a code run or a page read. The call
+ * reports them as they go out, so they are there whether it succeeded, failed, or its turn stopped.
+ */
+export const websiteReceipts = (block: ToolBlock): WebsiteReceipt[] => block.receipts ?? [];
+
+const originOf = (url: string): string => {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return url;
+  }
+};
+
+/**
+ * The receipt of every request a website approval let through: one row per website with each full URL, query
+ * included, and a revoke action that makes the next request ask again.
+ */
+export function WebsiteReceipts(props: { block: ToolBlock }) {
+  const actions = useAiChatActions();
+  const locale = useLocale();
+  const t = () => aiChatMessages(locale());
+  const groups = () => {
+    const byOrigin = new Map<string, WebsiteReceipt[]>();
+    for (const receipt of websiteReceipts(props.block)) {
+      const origin = originOf(receipt.url);
+      byOrigin.set(origin, [...(byOrigin.get(origin) ?? []), receipt]);
+    }
+    return [...byOrigin].map(([origin, receipts]) => ({ origin, receipts }));
+  };
+  return (
+    <For each={groups()}>
+      {(group) => {
+        const [state, setState] = createSignal<"idle" | "busy" | "revoked" | "failed">("idle");
+        const host = () => domainOf(group.origin);
+        const revoke = async () => {
+          if (!actions.onRevokeWebsite || state() === "busy") return;
+          setState("busy");
+          try {
+            await actions.onRevokeWebsite(group.origin);
+            setState("revoked");
+          } catch {
+            setState("failed");
+          }
+        };
+        return (
+          <Chat.Activity
+            icon="ti ti-world-check"
+            label={host()}
+            description={
+              state() === "revoked"
+                ? t().websiteRevoked
+                : state() === "failed"
+                  ? t().revokeFailed
+                  : t().websiteAllowedForChat({ count: group.receipts.length })
+            }
+            defaultOpen
+            bodyInset={false}
+            trailing={
+              // The button keeps its place and label once revoked, so nothing moves; the description says it is revoked.
+              <Show when={actions.onRevokeWebsite}>
+                <Button
+                  size="xs"
+                  variant="ghost"
+                  loading={state() === "busy"}
+                  disabled={state() === "revoked"}
+                  aria-label={t().revokeWebsiteFor({ host: host() })}
+                  onClick={() => void revoke()}
+                >
+                  {t().revoke}
+                </Button>
+              </Show>
+            }
+          >
+            <ul class="flex w-full min-w-0 flex-col gap-0.5 rounded-md bg-zinc-100/70 px-2 py-1.5 text-xs [box-shadow:var(--ui-control-recess)] dark:bg-zinc-950/70">
+              <For each={group.receipts}>
+                {(receipt) => (
+                  <li class="min-w-0 break-all font-mono text-[11px] text-secondary">
+                    <span class="font-semibold text-primary">{receipt.method}</span> {receipt.url}
+                  </li>
+                )}
+              </For>
+            </ul>
+          </Chat.Activity>
+        );
+      }}
+    </For>
+  );
+}

package/src/ai/client/controller.ts

@@ -1284,7 +1284,7 @@ export const createAiChatController = (options: CreateAiChatControllerOptions) =
     conversationId: string,
     turnId: string,
     callId: string,
-    action: { type: "approval_response"; approved: boolean; remember?: "always" } | { type: "tool_result"; result: unknown },
+    action: { type: "approval_response"; approved: boolean; remember?: "chat" | "always" } | { type: "tool_result"; result: unknown },
   ) => {
     if (isActiveConversation(conversationId) && runStatus() === "stopping") return false;
     try {
@@ -1325,7 +1325,7 @@ export const createAiChatController = (options: CreateAiChatControllerOptions) =
   const submitTurnAction = (
     turnId: string,
     callId: string,
-    action: { type: "approval_response"; approved: boolean; remember?: "always" } | { type: "tool_result"; result: unknown },
+    action: { type: "approval_response"; approved: boolean; remember?: "chat" | "always" } | { type: "tool_result"; result: unknown },
   ) => {
     const conversationId = activeConversationId();
     if (!conversationId) return Promise.resolve(false);
@@ -1333,7 +1333,10 @@ export const createAiChatController = (options: CreateAiChatControllerOptions) =
     return submitTurnActionForConversation(conversationId, turnId, callId, action);
   };
 
-  const respondToApproval = async (request: { turnId: string; callId: string }, input: { approved: boolean; remember?: "always" }) => {
+  const respondToApproval = async (
+    request: { turnId: string; callId: string },
+    input: { approved: boolean; remember?: "chat" | "always" },
+  ) => {
     const conversationId = activeConversationId();
     if (!conversationId) return false;
     const submitted = await submitTurnAction(request.turnId, request.callId, {