@k2b/cloud 0.25.0 → 0.27.0

package/src/ai/chat/presentation.tsx

@@ -1,16 +1,28 @@
-import { Button, Chat, type ChatTimelineItem, useLocale } from "@k2b/ui";
-import { type Accessor, createEffect, createMemo, createSignal, type JSX, onCleanup, Show } from "solid-js";
+import type { ChatTimelineItem } from "@k2b/ui";
+import { useLocale } from "@k2b/ui";
+import {
+  type Accessor,
+  createEffect,
+  createMemo,
+  createRoot,
+  createSignal,
+  getOwner,
+  type JSX,
+  onCleanup,
+  type Setter,
+  Show,
+} from "solid-js";
 import type { AiActiveTurn } from "../client/projection";
-import { type AiActiveTurnSegment, splitActiveTurnBlocks } from "../protocol";
-import { type AiAssistantTimelineItem, buildAiMessageTimeline, copyTextFromAssistantEntries } from "../timeline";
+import { type AiActiveTurnSegment, type AiTurnBlock, splitActiveTurnBlocks } from "../protocol";
+import { type AiAssistantTimelineItem, buildAiMessageTimeline } from "../timeline";
 import type { AiConversationTimelineEntry, AiStoredMessage } from "../types";
-import { AiTurnBlockList } from "./blocks";
 import { type AiChatActions, AiChatActionsProvider, createAssistantMessageActions, useAiChatActions } from "./message-actions";
-import { formatWorkedDuration, isRecord, isSurveyToolName, textFromMessage } from "./message-utils";
-import { aiChatMessages } from "./messages";
+import { isRecord, isSurveyToolName, textFromMessage } from "./message-utils";
 import { type AiToolDisclosureState, createAiToolDisclosureState } from "./tool-disclosure";
+import { type AiTurnLayout, type AiTurnPhase, layoutAiTurn, waitsForUser } from "./turn-layout";
 import { TurnNavigator } from "./turn-navigator";
 import { activeTimelineSeq } from "./turn-navigator-utils";
+import { type AiTurnDuration, type AiTurnSegment, AiTurnView } from "./turn-view";
 import {
   aiSteerMessageText,
   aiUserMessageAttachments,
@@ -28,14 +40,6 @@ export type AiChatTimelineSession = {
 export { type AiChatActions, AiChatActionsProvider };
 
 type AssistantBlock = AiAssistantTimelineItem["blocks"][number];
-
-// Activity blocks span the full message column so disclosure chevrons share one
-// right edge. Tool and compaction blocks count even while busy; reasoning counts
-// only once it has text, because empty reasoning renders at most a busy row and
-// must not widen a prose-only reply.
-const isWideBlock = (block: AssistantBlock) =>
-  block.kind === "tool" || block.kind === "compaction" || (block.kind === "thinking" && block.text.trim().length > 0);
-
 type SurveyResultBlock = Extract<AssistantBlock, { kind: "tool" }>;
 type SurveySegment = { type: "assistant"; blocks: AssistantBlock[] } | { type: "survey"; block: SurveyResultBlock };
 
@@ -68,31 +72,104 @@ const surveyItem = (block: SurveyResultBlock, turnId: string): ChatTimelineItem
   content: <CloudSurveyResultBlock args={block.args} result={block.result} />,
 });
 
-export function AiAssistantContent(props: {
-  item: AiAssistantTimelineItem;
-  disclosureState?: AiToolDisclosureState;
-  segmentId?: string;
-}): JSX.Element {
-  const locale = useLocale();
-  const turnId = () => props.item.loopId ?? props.item.id;
-  return (
-    <div class="flex flex-col gap-2">
-      <Chat.Activity
-        icon="ti ti-route"
-        label={`${locale().startsWith("de") ? "Gearbeitet für" : "Worked for"} ${formatWorkedDuration(props.item.workedMs)}`}
-      />
-      <AiTurnBlockList blocks={props.item.blocks} turnId={turnId()} disclosureState={props.disclosureState} />
-    </div>
-  );
-}
+/**
+ * Timeline ids of a turn's assistant segments. A segment is named by what opened it: `start`, the steering message, or
+ * the accepted survey answer before it. A live turn and its history produce the same ids, also for consecutive steering
+ * messages, and loading older history does not rename a segment, so the timeline keeps the same elements.
+ */
+const createSegmentIds = () => {
+  const used = new Map<string, number>();
+  return (turnId: string, opener: string) => {
+    const base = `ai-turn:${turnId}:${opener}`;
+    // A turn that was compacted while it ran is split in history; its later part continues the same name.
+    const count = used.get(base) ?? 0;
+    used.set(base, count + 1);
+    return count === 0 ? base : `${base}:${count}`;
+  };
+};
+
+const steerOpener = (steerId: string) => `steer:${steerId}`;
+const surveyOpener = (callId: string) => `survey:${callId}`;
+
+/** History stores consecutive steering messages before the blocks they steered; the last one opened the segment. */
+const leadingSteerOpener = (blocks: readonly AssistantBlock[]): string | null => {
+  let opener: string | null = null;
+  for (const block of blocks) {
+    if (block.kind !== "steer_applied") break;
+    opener = steerOpener(block.steerId);
+  }
+  return opener;
+};
+
+/** History phase of a finished loop, from how its loop ended. */
+const storedPhase = (entries: readonly AiStoredMessage[]): AiTurnPhase => {
+  const reason = entries.findLast((entry) => entry.loopDoneReason)?.loopDoneReason;
+  if (!reason || reason === "stop") return "completed";
+  return reason === "aborted" ? "stopped" : "failed";
+};
+
+/** Responses with a work line or rich places span the message column so their right edges align. */
+const isWideLayout = (layout: AiTurnLayout) => layout.showWork || layout.results.length > 0 || layout.actions.length > 0;
+
+const isEmptyLayout = (layout: AiTurnLayout) => !isWideLayout(layout) && layout.text.length === 0;
+
+/**
+ * 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 owner = getOwner();
+  const views = new Map<string, { set: Setter<AiTurnSegment>; content: JSX.Element; dispose: () => void }>();
+  onCleanup(() => {
+    for (const view of views.values()) view.dispose();
+    views.clear();
+  });
+  return {
+    content(segment: AiTurnSegment): JSX.Element {
+      const existing = views.get(segment.id);
+      if (existing) {
+        existing.set(() => segment);
+        return existing.content;
+      }
+      return createRoot((dispose) => {
+        const [current, set] = createSignal(segment);
+        const content = <AiTurnView segment={current} disclosureState={disclosureState} />;
+        views.set(segment.id, { set, content, dispose });
+        return content;
+      }, owner);
+    },
+    retain(ids: ReadonlySet<string>) {
+      for (const [id, view] of views) {
+        if (ids.has(id)) continue;
+        view.dispose();
+        views.delete(id);
+      }
+    },
+  };
+};
+
+type TurnViews = ReturnType<typeof createTurnViews>;
+
+/** A segment's final text is what Copy copies; intermediate texts stay in the work line. */
+const finalText = (layout: AiTurnLayout) =>
+  layout.text
+    .map((block) => block.text)
+    .join("\n\n")
+    .trim();
 
 const storedItems = (
   messages: readonly AiStoredMessage[],
   actions: AiChatActions,
-  disclosureState: AiToolDisclosureState,
+  views: TurnViews,
   locale: string,
-): ChatTimelineItem[] =>
-  buildAiMessageTimeline([...messages]).flatMap((item): ChatTimelineItem | ChatTimelineItem[] => {
+): ChatTimelineItem[] => {
+  const timeline = buildAiMessageTimeline([...messages]);
+  const lastItemOfLoop = new Map<string, number>();
+  timeline.forEach((item, index) => {
+    if (item.type === "assistant" && item.loopId) lastItemOfLoop.set(item.loopId, index);
+  });
+  const segmentId = createSegmentIds();
+  return timeline.flatMap((item, itemIndex): ChatTimelineItem | ChatTimelineItem[] => {
     if (item.type === "user") {
       const text = aiUserMessageText(item.entry);
       const agentMessage = item.entry.meta?.agentMessage;
@@ -167,72 +244,96 @@ const storedItems = (
     }
 
     const actionEntry = item.actionEntry?.compactedAt ? null : item.actionEntry;
-    const copyText = copyTextFromAssistantEntries(item.entries);
+    const lastOfLoop = !item.loopId || lastItemOfLoop.get(item.loopId) === itemIndex;
+    const phase = lastOfLoop ? storedPhase(item.entries) : "completed";
     const segments = splitSurveyResults(item.blocks);
     if (segments.length === 0) segments.push({ type: "assistant", blocks: [] });
     const lastAssistant = segments.findLastIndex((segment) => segment.type === "assistant");
-    return segments.map((segment, index): ChatTimelineItem => {
-      if (segment.type === "survey") return surveyItem(segment.block, item.loopId ?? item.id);
-      return {
-        kind: "message",
-        id: index === 0 ? item.id : `${item.id}:${segment.blocks[0]!.id}`,
-        role: "assistant",
-        createdAt: actionEntry?.createdAt ?? item.entries.at(-1)?.createdAt,
-        class: segment.blocks.some(isWideBlock) ? "ai-chat-message-wide" : undefined,
-        content: (
-          <>
-            <Show when={index === 0 && item.entries.find((entry) => entry.meta?.scheduledTask)?.meta?.scheduledTask}>
-              {(task) => (
-                <Button
-                  variant="ghost"
-                  size="xs"
-                  class="mb-2"
-                  onClick={() => actions.onOpenScheduledTaskRun?.(task().taskId, task().occurrenceId)}
-                  disabled={!actions.onOpenScheduledTaskRun}
-                >
-                  <i class="ti ti-calendar-time" aria-hidden="true" /> {aiChatMessages(locale).backgroundRun}
-                </Button>
-              )}
-            </Show>
-            <AiAssistantContent
-              item={{ ...item, blocks: segment.blocks }}
-              segmentId={segments.length > 1 ? `${item.id}:${index}` : undefined}
-              disclosureState={disclosureState}
-            />
-          </>
-        ),
-        actions:
-          actionEntry && index === lastAssistant
-            ? createAssistantMessageActions({ entry: actionEntry, entries: item.entries, copyText, actions })
-            : undefined,
-        actionDisplay: "inline",
-      };
+    const scheduledTask = item.entries.find((entry) => entry.meta?.scheduledTask)?.meta?.scheduledTask ?? null;
+    let firstSegment = true;
+    let opener = leadingSteerOpener(item.blocks) ?? "start";
+    return segments.flatMap((segment, index): ChatTimelineItem[] => {
+      const turnId = item.loopId ?? item.id;
+      if (segment.type === "survey") {
+        opener = surveyOpener(segment.block.callId);
+        return [surveyItem(segment.block, turnId)];
+      }
+      const segmentOpener = opener;
+      const last = lastOfLoop && index === lastAssistant;
+      const segmentPhase = last ? phase : "completed";
+      const layout = layoutAiTurn(segment.blocks, { phase: segmentPhase, codePresentations: Boolean(actions.renderCodePresentation) });
+      const messageActions =
+        actionEntry && index === lastAssistant
+          ? createAssistantMessageActions({ entry: actionEntry, entries: item.entries, copyText: finalText(layout), actions })
+          : undefined;
+      const task = firstSegment ? scheduledTask : null;
+      firstSegment = false;
+      if (isEmptyLayout(layout) && !messageActions && !task) return [];
+      const id = item.loopId ? segmentId(item.loopId, segmentOpener) : `${item.id}:${index}`;
+      return [
+        {
+          kind: "message",
+          id,
+          role: "assistant",
+          createdAt: actionEntry?.createdAt ?? item.entries.at(-1)?.createdAt,
+          class: isWideLayout(layout) ? "ai-chat-message-wide" : undefined,
+          content: views.content({
+            id,
+            turnId,
+            phase: segmentPhase,
+            layout,
+            earlier: !last,
+            duration: last ? () => ({ workedMs: item.workedMs, waitingMs: null }) : () => null,
+            scheduledTask: task,
+          }),
+          actions: messageActions,
+          actionDisplay: "inline",
+        },
+      ];
     });
   });
+};
 
-const activeItems = (turn: AiActiveTurn | null, actions: AiChatActions, disclosureState: AiToolDisclosureState): ChatTimelineItem[] => {
+const activeItems = (
+  turn: AiActiveTurn | null,
+  actions: AiChatActions,
+  views: TurnViews,
+  duration: Accessor<AiTurnDuration | null>,
+  reconnecting: boolean,
+): ChatTimelineItem[] => {
   if (!turn) return [];
   const segments = splitActiveTurnBlocks(turn.blocks).flatMap((segment): (AiActiveTurnSegment | SurveySegment)[] =>
     segment.type === "steer" ? [segment] : splitSurveyResults(segment.blocks),
   );
-  // Keep the shared assistant progress indicator after the accepted answer.
-  if (turn.status === "running" && segments.at(-1)?.type === "survey") segments.push({ type: "assistant", blocks: [] });
-  if (segments.length === 0) {
-    return [
-      {
-        kind: "message",
-        id: `${turn.turnId}-pending`,
-        role: "assistant",
-        status: "streaming",
-        anchorId: turn.seq,
-      },
-    ];
-  }
+  // A running turn ends with an assistant item, so its progress indicator and a retry wait stay at the end: before the
+  // first model block, after an accepted answer, and below a steering message that waits for the next model call.
+  const tail = segments.at(-1)?.type;
+  const steerTail = turn.status === "running" && tail === "steer";
+  if (segments.length === 0 || steerTail || (turn.status === "running" && tail === "survey"))
+    segments.push({ type: "assistant", blocks: [] });
+  const lastAssistant = segments.findLastIndex((segment) => segment.type === "assistant");
+  // Until the model takes up the steering message, the segment above it is still the one at work.
+  const above = steerTail ? segments.findLastIndex((segment, index) => segment.type === "assistant" && index < lastAssistant) : -1;
+  const working = above >= 0 ? above : lastAssistant;
+  const phaseOf = (index: number): AiTurnPhase =>
+    index !== working ? "completed" : turn.status === "waiting_for_action" ? "waiting" : "running";
+  const layoutOf = (blocks: AiTurnBlock[], index: number) =>
+    layoutAiTurn(blocks, { phase: phaseOf(index), codePresentations: Boolean(actions.renderCodePresentation) });
+  // The work line says in place that the turn reconnects. A turn without one yet says it in a row at its end, where a
+  // row that comes and goes moves nothing above it.
+  const workingSegment = segments[working];
+  const reconnectInLine = reconnecting && workingSegment?.type === "assistant" && layoutOf(workingSegment.blocks, working).showWork;
+  const segmentId = createSegmentIds();
+  let opener = "start";
 
-  return segments.map((segment, index): ChatTimelineItem => {
-    if (segment.type === "survey") return surveyItem(segment.block, turn.turnId);
+  return segments.flatMap((segment, index): ChatTimelineItem | ChatTimelineItem[] => {
+    if (segment.type === "survey") {
+      opener = surveyOpener(segment.block.callId);
+      return surveyItem(segment.block, turn.turnId);
+    }
     if (segment.type === "steer") {
       const block = segment.block;
+      opener = steerOpener(block.steerId);
       return {
         kind: "message",
         id: `${turn.turnId}-steer-${block.id}`,
@@ -245,29 +346,94 @@ const activeItems = (turn: AiActiveTurn | null, actions: AiChatActions, disclosu
       };
     }
 
-    const blocks = segment.blocks;
+    const last = index === lastAssistant;
+    const live = index === working;
+    const phase = phaseOf(index);
+    const layout = layoutOf(segment.blocks, index);
+    // Consecutive steering messages leave empty segments between them; history has none. The last segment stays, since
+    // it carries the progress indicator.
+    if (!last && isEmptyLayout(layout)) return [];
+    const id = segmentId(turn.turnId, opener);
     return {
       kind: "message",
-      id: `${turn.turnId}-assistant-${index}`,
+      id,
       role: "assistant",
-      status: turn.status === "running" && index === segments.length - 1 ? "streaming" : "complete",
-      class: blocks.some(isWideBlock) ? "ai-chat-message-wide" : undefined,
-      content: (
-        <AiTurnBlockList
-          blocks={blocks}
-          turnId={turn.turnId}
-          streaming={turn.status === "running" && index === segments.length - 1}
-          active={index === segments.length - 1}
-          disclosureState={disclosureState}
-        />
-      ),
+      status: turn.status === "running" && last ? "streaming" : "complete",
+      class: isWideLayout(layout) ? "ai-chat-message-wide" : undefined,
+      content: views.content({
+        id,
+        turnId: turn.turnId,
+        phase,
+        layout,
+        earlier: !live,
+        duration: live ? duration : () => null,
+        reconnect: live && reconnectInLine ? "line" : last && reconnecting && !reconnectInLine ? "row" : undefined,
+      }),
     };
   });
 };
 
+/**
+ * Work time of the active turn: wall time minus time spent waiting for the user. A state snapshot seeds it after a
+ * reconnect; the clock stands while the turn waits for an approval or an answer and continues from the same value
+ * afterwards. While `paused`, the shown time stands too and then jumps to the true work time; the clock itself keeps
+ * running, so a step that starts right after the pause is timed from the true work time.
+ */
+const createActiveTurnClock = (source: AiChatTimelineSource, paused: Accessor<boolean>): Accessor<AiTurnDuration | null> => {
+  const [now, setNow] = createSignal(Date.now());
+  const running = createMemo(() => source.activeTurn() !== null);
+  createEffect(() => {
+    if (!running() || typeof window === "undefined") return;
+    setNow(Date.now());
+    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+    onCleanup(() => window.clearInterval(timer));
+  });
+  let state: { turnId: string; seed: string; startedAt: number; waitMs: number; waitingSince: number | null } | null = null;
+  const duration = createMemo(() => {
+    const turn = source.activeTurn();
+    const time = now();
+    if (!turn) {
+      state = null;
+      return null;
+    }
+    const seed = `${turn.createdAt}|${turn.actionWaitMs}|${turn.waitingSince}`;
+    if (!state || state.turnId !== turn.turnId || state.seed !== seed) {
+      const userMessage = source.messages().find((message) => message.loopId === turn.turnId && message.message.role === "user");
+      const started = Date.parse(turn.createdAt ?? userMessage?.createdAt ?? "");
+      const waitingSince = turn.waitingSince ? Date.parse(turn.waitingSince) : Number.NaN;
+      state = {
+        turnId: turn.turnId,
+        seed,
+        startedAt: Number.isFinite(started) ? Math.min(started, time) : state?.turnId === turn.turnId ? state.startedAt : time,
+        waitMs: turn.actionWaitMs ?? (state?.turnId === turn.turnId ? state.waitMs : 0),
+        waitingSince: Number.isFinite(waitingSince) ? Math.min(waitingSince, time) : null,
+      };
+    }
+    // A tool the browser runs by itself is work; only an approval or an answer the person owes stops the clock.
+    const waiting = turn.blocks.some(waitsForUser);
+    if (waiting && state.waitingSince === null) state.waitingSince = time;
+    if (!waiting && state.waitingSince !== null) {
+      state.waitMs += time - state.waitingSince;
+      state.waitingSince = null;
+    }
+    return {
+      workedMs: Math.max(0, (state.waitingSince ?? time) - state.startedAt - state.waitMs),
+      waitingMs: state.waitingSince === null ? null : Math.max(0, time - state.waitingSince),
+    };
+  });
+  let shown: AiTurnDuration | null = null;
+  return createMemo(() => {
+    const current = duration();
+    if (!paused() || !shown || !current) shown = current;
+    return shown;
+  });
+};
+
 export type AiChatTimelineSource = {
   messages: Accessor<readonly AiStoredMessage[]>;
   activeTurn: Accessor<AiActiveTurn | null>;
+  /** The conversation stream lost its connection and reconnects, such as `streamStatus() === "reconnecting"`. */
+  reconnecting?: Accessor<boolean>;
 };
 
 /**
@@ -279,9 +445,17 @@ export function createAiChatTimeline(source: AiChatTimelineSource): Accessor<rea
   const actions = useAiChatActions();
   const locale = useLocale();
   const disclosureState = createAiToolDisclosureState();
-  const stored = createMemo(() => storedItems(source.messages(), actions, disclosureState, locale()));
-  const active = createMemo(() => activeItems(source.activeTurn(), actions, disclosureState));
-  return createMemo(() => [...stored(), ...active()]);
+  const views = createTurnViews(disclosureState);
+  // 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);
+  const stored = createMemo(() => storedItems(source.messages(), actions, views, locale()));
+  const active = createMemo(() => activeItems(source.activeTurn(), actions, views, clock, reconnecting()));
+  return createMemo(() => {
+    const items = [...stored(), ...active()];
+    views.retain(new Set(items.map((item) => item.id)));
+    return items;
+  });
 }
 
 export type AiChatTurnNavigatorProps = {

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

@@ -1,12 +1,15 @@
 import type { AiTurnBlock } from "../protocol";
-import { hasCapabilityTable } from "./capability-result";
-import { isCardToolName, isSurveyToolName, isTextEditorToolName } from "./message-utils";
+import { aiChatMessages } from "./messages";
 
 type Tool = Extract<AiTurnBlock, { kind: "tool" }>;
-type Group = { kind: "tools"; blocks: Tool[] } | { kind: "block"; block: AiTurnBlock };
+type Text = Extract<AiTurnBlock, { kind: "text" }>;
+export type AiWorkEntry = Exclude<AiTurnBlock, { kind: "text" } | { kind: "steer_message" }>;
+export type AiWorkGroup = { kind: "text"; block: Text } | { kind: "steps"; id: string; entries: AiWorkEntry[] };
 
+/** A failed call, including a code run that reported an error. A rejected approval is a decision, not a failure. */
 export function isFailedTool(tool: Tool): boolean {
-  if (tool.isError || tool.status === "failed" || tool.status === "rejected") return true;
+  if (tool.status === "rejected") return false;
+  if (tool.isError || tool.status === "failed") return true;
   const result = tool.result;
   return (
     ["code_run", "code_inspect", "code_interact"].includes(tool.name) &&
@@ -17,43 +20,60 @@ export function isFailedTool(tool: Tool): boolean {
   );
 }
 
-/** Visible content and interactive decisions are boundaries; model request boundaries are not. */
-export function groupToolBlocks(blocks: readonly AiTurnBlock[]): Group[] {
-  const groups: Group[] = [];
+/**
+ * Split folded work into intermediate texts and the step groups between them. Reasoning stays inside its group so it
+ * does not break up the tools around it. A group is keyed by its first tool, whose id is the same live and in history.
+ */
+export function groupWorkBlocks(blocks: readonly AiTurnBlock[]): AiWorkGroup[] {
+  const groups: AiWorkGroup[] = [];
   for (const block of blocks) {
-    const ordinary =
-      block.kind === "tool" &&
-      !block.approval &&
-      block.status !== "awaiting_approval" &&
-      !["present", "code_present", "view_image", "code_secret"].includes(block.name) &&
-      !isCardToolName(block.name) &&
-      !isSurveyToolName(block.name) &&
-      !isTextEditorToolName(block.name) &&
-      !hasCapabilityTable(block);
-    if (ordinary) {
-      const last = groups.at(-1);
-      if (last?.kind === "tools") last.blocks.push(block);
-      else groups.push({ kind: "tools", blocks: [block] });
-    } else groups.push({ kind: "block", block });
+    if (block.kind === "steer_message") continue;
+    if (block.kind === "text") {
+      groups.push({ kind: "text", block });
+      continue;
+    }
+    const last = groups.at(-1);
+    if (last?.kind === "steps") last.entries.push(block);
+    else groups.push({ kind: "steps", id: block.id, entries: [block] });
+  }
+  for (const group of groups) {
+    if (group.kind === "steps") group.id = (group.entries.find((entry) => entry.kind === "tool") ?? group.entries[0]!).id;
   }
   return groups;
 }
 
+/** What a group of tools did, in categories; failures and rejections are counted separately. */
 export function summarizeToolGroup(tools: readonly Tool[], locale: string): string {
-  const de = locale.startsWith("de");
+  const t = aiChatMessages(locale);
   const categories = tools.map((tool) => {
-    if (tool.name === "todo_write") return de ? "Arbeitsplan aktualisiert" : "Updated working plan";
-    if (tool.name.startsWith("code_")) return de ? "Mit Code gearbeitet" : "Worked with code";
-    if (tool.presentation?.kind === "capability" || tool.name === "read_cloud_resource")
-      return de ? "Cloud-Integration verwendet" : "Used Cloud integration";
-    if (["read_file", "list_files", "view_image"].includes(tool.name)) return de ? "Dateien gelesen" : "Read files";
-    if (tool.name === "write_file") return de ? "Dateien geschrieben" : "Wrote files";
-    if (["markdown_to_pdf", "html_to_pdf"].includes(tool.name)) return de ? "PDFs erstellt" : "Created PDFs";
-    if (["load_skill", "load_tools", "search_tools"].includes(tool.name))
-      return de ? "Werkzeuge und Wissen geladen" : "Loaded tools and guidance";
-    if (tool.name.startsWith("web_") || tool.name === "fetch_file") return de ? "Im Web recherchiert" : "Searched the web";
-    return de ? "Werkzeuge verwendet" : "Used tools";
+    if (tool.name === "todo_write") return t.groupPlan;
+    if (tool.name === "present" || tool.name === "code_present" || tool.name === "card" || tool.name === "cloud_card")
+      return t.groupDelivered;
+    if (tool.name.startsWith("code_")) return t.groupCode;
+    if (tool.presentation?.kind === "capability" || tool.name === "read_cloud_resource") return t.groupCloud;
+    if (["read_file", "list_files", "view_image"].includes(tool.name)) return t.groupReadFiles;
+    if (tool.name === "write_file") return t.groupWriteFiles;
+    if (["markdown_to_pdf", "html_to_pdf"].includes(tool.name)) return t.groupPdf;
+    if (["load_skill", "load_tools", "search_tools", "list_apps"].includes(tool.name)) return t.groupLoad;
+    if (tool.name.startsWith("web_") || tool.name === "fetch_file") return t.groupWeb;
+    if (tool.name === "memory") return t.groupMemory;
+    return t.groupTools;
   });
-  const errors = tools.filter(isFailedTool).length;
-  return [...new Set(categories)].join(", ") + (errors ? ` · ${errors} ${de ? "fehlgeschlagen" : "failed"}` : "");
+  return [...new Set(categories)].join(", ");
+}
+
+/** "9 steps · 1 failed · 1 rejected" for a group of steps. */
+export function countWorkSteps(entries: readonly AiWorkEntry[], locale: string): string {
+  const t = aiChatMessages(locale);
+  const tools = entries.filter((entry): entry is Tool => entry.kind === "tool");
+  const steps = tools.length + entries.filter((entry) => entry.kind === "compaction").length;
+  const failed = tools.filter(isFailedTool).length;
+  const rejected = tools.filter((tool) => tool.status === "rejected").length;
+  return [
+    steps ? t.steps({ count: steps }) : "",
+    failed ? t.groupFailed({ count: failed }) : "",
+    rejected ? t.groupRejected({ count: rejected }) : "",
+  ]
+    .filter(Boolean)
+    .join(" · ");
 }