@athenaintel/react 0.28.1 → 0.30.0

package/dist/chat/super-grouping/SuperGroupingTranscript.js

@@ -0,0 +1,350 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useAuiState, MessagePrimitive, getExternalStoreMessages } from "@assistant-ui/react";
+import { LoaderCircle, Circle, AlertCircle, Check, ChevronRight } from "lucide-react";
+import { memo, useMemo, useId, useState, useRef, useEffect } from "react";
+import { StepText } from "../../tools/step-text.js";
+import { ToolFallback } from "../../tools/tool-fallback.js";
+import { collectAssetTitles } from "../../tools/tool-summary.js";
+import { readMessageCreatedAt } from "../message-time.js";
+import { buildActivityTimeline, resolveActivityPhase, countActivityTools, getActivitySummary } from "./activity-timeline.js";
+import { CollapsibleGroup, SuperGroupingProvider } from "./CollapsibleGroup.js";
+import { createToolBasedGroupingFunction } from "./grouping-function.js";
+import { useActivityExpansion } from "./SuperGroupingCard.js";
+import { ToolTimeline } from "./ToolTimeline.js";
+import { toTimelineStep } from "./timeline-step.js";
+import { defaultGetToolGroupKey } from "./toolkit-map.js";
+import { splitTurnSegments, summarizeSegment, scopeGroupingToSegment } from "./turn-segments.js";
+import { observedTurnEndMs, recordObservedTurnEnd, workedDurationMs, formatWorkDuration, readTurnTiming, firstSeenMs, workingLabel } from "./turn-timing.js";
+import { cn } from "cnfast";
+const DEFAULT_MAX_VISIBLE_STEPS = 6;
+const EMPTY_CONTENT = [];
+const EMPTY_STEPS = [];
+function useTurnTimingSources() {
+  const message = useAuiState((s) => s.message);
+  const promptCreatedAt = useAuiState((s) => {
+    var _a;
+    const previous = s.thread.messages[s.message.index - 1];
+    return (previous == null ? void 0 : previous.role) === "user" ? readMessageCreatedAt((_a = previous.metadata) == null ? void 0 : _a.custom) : null;
+  });
+  const promptId = useAuiState((s) => {
+    const previous = s.thread.messages[s.message.index - 1];
+    return (previous == null ? void 0 : previous.role) === "user" ? previous.id : "";
+  });
+  const timing = useMemo(
+    () => {
+      var _a;
+      return readTurnTiming({
+        promptCreatedAt,
+        custom: (_a = message.metadata) == null ? void 0 : _a.custom,
+        sourceMessages: getExternalStoreMessages(message)
+      });
+    },
+    [message, promptCreatedAt]
+  );
+  return { timing, clockKey: `${promptId}:${message.id}` };
+}
+function WorkingFor({ startMs, clockKey }) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(timer);
+  }, []);
+  const anchor = startMs ?? firstSeenMs(clockKey, now);
+  return /* @__PURE__ */ jsx(Fragment, { children: workingLabel(Math.max(0, now - anchor)) });
+}
+function TurnStatus({
+  phase,
+  cancelled,
+  activitySummary,
+  toolCount,
+  summaryDetails
+}) {
+  const { timing, clockKey } = useTurnTimingSources();
+  const [observedEndMs, setObservedEndMs] = useState(() => observedTurnEndMs(clockKey));
+  const wasActive = useRef(phase === "running" || phase === "waiting");
+  useEffect(() => {
+    const active = phase === "running" || phase === "waiting";
+    if (wasActive.current && !active) setObservedEndMs(recordObservedTurnEnd(clockKey));
+    wasActive.current = active;
+  }, [phase, clockKey]);
+  if (phase === "running") return /* @__PURE__ */ jsx(WorkingFor, { startMs: timing.startMs, clockKey });
+  if (phase === "waiting") return /* @__PURE__ */ jsx(Fragment, { children: "Waiting for you" });
+  const workedMs = workedDurationMs(timing, observedEndMs);
+  if (phase === "error") {
+    if (!cancelled) return /* @__PURE__ */ jsx(Fragment, { children: "Something went wrong" });
+    return /* @__PURE__ */ jsx(Fragment, { children: workedMs !== null ? `Run stopped after ${formatWorkDuration(workedMs)}` : "Run stopped" });
+  }
+  const label = [
+    ...workedMs !== null ? [`Worked for ${formatWorkDuration(workedMs)}`] : [],
+    ...workedMs === null || toolCount > 0 || activitySummary !== "Reasoning complete" ? [activitySummary] : [],
+    ...summaryDetails ?? []
+  ].join(" · ");
+  return /* @__PURE__ */ jsx(Fragment, { children: label });
+}
+function TurnGlyph({ phase }) {
+  const className = "size-3.5 shrink-0";
+  if (phase === "running") {
+    return /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true", className: cn(className, "motion-safe:animate-spin") });
+  }
+  if (phase === "waiting") {
+    return /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", className: cn(className, "text-amber-600 dark:text-amber-400") });
+  }
+  if (phase === "error") {
+    return /* @__PURE__ */ jsx(AlertCircle, { "aria-hidden": "true", className: cn(className, "text-destructive") });
+  }
+  return /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: cn(className, "opacity-70") });
+}
+const ProseSegment = memo(function ProseSegment2({
+  text,
+  TextComponent
+}) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "transcript-prose", className: "min-w-0", children: /* @__PURE__ */ jsx(TextComponent, { type: "text", text, status: { type: "complete" } }) });
+});
+function ActivitySegment({
+  segment,
+  steps,
+  turnPhase,
+  expansionKey,
+  expandWhileWaiting,
+  mountDetails,
+  maxVisibleSteps,
+  grouping,
+  components,
+  classNames
+}) {
+  var _a, _b, _c;
+  const summary = summarizeSegment(steps);
+  const phase = summary.phase;
+  const { expanded, toggleExpanded } = useActivityExpansion({
+    expansionKey: `${expansionKey}:${segment.key}`,
+    phase,
+    expandWhileWaiting
+  });
+  const { expanded: detailsExpanded, toggleExpanded: toggleDetails } = useActivityExpansion({
+    expansionKey: `${expansionKey}:${segment.key}:details`,
+    phase,
+    expandWhileWaiting
+  });
+  const indicesKey = segment.partIndices.join(",");
+  const scopedGrouping = useMemo(
+    () => scopeGroupingToSegment(grouping, indicesKey.split(",").map(Number)),
+    [grouping, indicesKey]
+  );
+  const groupingContext = useMemo(() => ({ groupingFunction: scopedGrouping }), [scopedGrouping]);
+  const detailsPanelId = `aui-sg-segment-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const isTurnActive = turnPhase === "running" || turnPhase === "waiting";
+  const detailsMounted = isTurnActive || mountDetails || expanded && detailsExpanded;
+  const hasToolSteps = steps.some((step) => step.kind === "tool");
+  const meta = [(_a = summary.step) == null ? void 0 : _a.chip, summary.meta].filter(Boolean).join(" · ");
+  if (steps.length === 0) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "transcript-parts", className: cn("flex min-w-0 flex-col gap-2", classNames == null ? void 0 : classNames.detailsParts), children: /* @__PURE__ */ jsx(SuperGroupingProvider, { value: groupingContext, children: /* @__PURE__ */ jsx(MessagePrimitive.Unstable_PartsGrouped, { groupingFunction: scopedGrouping, components }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { "data-slot": "activity-segment", "data-phase": phase, "data-segment-key": segment.key, className: "min-w-0", children: /* @__PURE__ */ jsx(
+    ToolTimeline,
+    {
+      steps,
+      open: expanded,
+      onOpenChange: toggleExpanded,
+      label: /* @__PURE__ */ jsx(StepText, { text: summary.label, code: (_b = summary.step) == null ? void 0 : _b.code }),
+      labelTitle: (_c = summary.step) == null ? void 0 : _c.detail,
+      phase,
+      maxVisibleSteps,
+      keepMounted: isTurnActive || mountDetails,
+      meta: meta ? /* @__PURE__ */ jsx("span", { "data-slot": "activity-segment-meta", children: meta }) : null,
+      children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 pl-5", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: toggleDetails,
+            "aria-expanded": detailsExpanded,
+            "aria-controls": detailsPanelId,
+            className: "flex items-center gap-1.5 rounded py-1 text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: [
+              /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "size-3 transition-transform motion-reduce:transition-none",
+                    detailsExpanded && "rotate-90"
+                  )
+                }
+              ),
+              detailsExpanded ? hasToolSteps ? "Hide tool details" : "Hide thinking" : hasToolSteps ? "Show tool details" : "Show thinking"
+            ]
+          }
+        ),
+        detailsMounted ? /* @__PURE__ */ jsx(
+          "section",
+          {
+            id: detailsPanelId,
+            "aria-label": "Step details",
+            hidden: !expanded || !detailsExpanded,
+            className: cn(
+              "min-w-0 overflow-hidden border-l border-border/60 py-2 pl-3",
+              classNames == null ? void 0 : classNames.details
+            ),
+            children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", classNames == null ? void 0 : classNames.detailsParts), children: /* @__PURE__ */ jsx(SuperGroupingProvider, { value: groupingContext, children: /* @__PURE__ */ jsx(MessagePrimitive.Unstable_PartsGrouped, { groupingFunction: scopedGrouping, components }) }) })
+          }
+        ) : null
+      ] })
+    }
+  ) });
+}
+const SuperGroupingTranscript = memo(function SuperGroupingTranscript2({
+  toolUIs,
+  ToolFallback: ToolFallbackComponent = ToolFallback,
+  TextComponent,
+  ReasoningComponent,
+  GroupComponent = CollapsibleGroup,
+  getToolGroupKey = defaultGetToolGroupKey,
+  groupingFunction,
+  waitingTools,
+  passThroughTools,
+  waitingForInput = false,
+  resolveToolDisplayName,
+  expansionKey: expansionKeyProp,
+  expandWhileWaiting = false,
+  mountDetails = false,
+  maxVisibleSteps = DEFAULT_MAX_VISIBLE_STEPS,
+  summaryDetails,
+  renderHeaderActions,
+  renderRunningMeta,
+  className,
+  classNames
+}) {
+  const messageId = useAuiState((s) => s.message.id);
+  const messageContent = useAuiState(
+    (s) => s.message.role === "assistant" ? s.message.content : EMPTY_CONTENT
+  );
+  const messageStatus = useAuiState((s) => s.message.status);
+  const timeline = useMemo(
+    () => buildActivityTimeline(messageContent, messageStatus, { waitingTools, passThroughTools }),
+    [messageContent, messageStatus, waitingTools, passThroughTools]
+  );
+  const phase = useMemo(
+    () => resolveActivityPhase(messageStatus, timeline, { waitingForInput }),
+    [messageStatus, timeline, waitingForInput]
+  );
+  const assetTitles = useMemo(() => collectAssetTitles(messageContent), [messageContent]);
+  const stepsByPart = useMemo(() => {
+    const byPart = /* @__PURE__ */ new Map();
+    timeline.forEach((item, index) => {
+      if (item.partIndex === void 0) return;
+      byPart.set(item.partIndex, toTimelineStep({ item, index, resolveToolDisplayName, assetTitles }));
+    });
+    return byPart;
+  }, [timeline, resolveToolDisplayName, assetTitles]);
+  const segments = useMemo(() => splitTurnSegments(messageContent), [messageContent]);
+  const grouping = useMemo(
+    () => groupingFunction ?? createToolBasedGroupingFunction(getToolGroupKey),
+    [groupingFunction, getToolGroupKey]
+  );
+  const components = useMemo(
+    () => ({
+      tools: {
+        ...toolUIs ? { by_name: toolUIs } : {},
+        Fallback: ToolFallbackComponent
+      },
+      Text: TextComponent,
+      ...ReasoningComponent ? { Reasoning: ReasoningComponent } : {},
+      Group: GroupComponent
+    }),
+    [toolUIs, ToolFallbackComponent, TextComponent, ReasoningComponent, GroupComponent]
+  );
+  const statusId = `aui-sg-turn-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const hasText = messageContent.some((part) => part.type === "text" && part.text.trim() !== "");
+  const isVisible = timeline.length > 0 || phase === "waiting" || phase === "error" || phase === "running" && !hasText;
+  if (!isVisible) return null;
+  const expansionKey = expansionKeyProp ?? messageId;
+  const toolCount = countActivityTools(timeline);
+  const runningStep = [...stepsByPart.values()].filter((step) => step.state === "running").at(-1);
+  const cancelled = (messageStatus == null ? void 0 : messageStatus.type) === "incomplete" && messageStatus.reason === "cancelled";
+  const activitySummary = getActivitySummary(timeline);
+  const announcement = phase === "running" ? (runningStep == null ? void 0 : runningStep.verb) ?? "Working" : phase === "waiting" ? "Waiting for your input" : phase === "error" ? cancelled ? "Run stopped" : "Something went wrong" : activitySummary;
+  const actions = renderHeaderActions == null ? void 0 : renderHeaderActions({ phase, messageContent });
+  const meta = phase === "running" ? renderRunningMeta == null ? void 0 : renderRunningMeta({ phase }) : null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "super-grouping-transcript",
+      "data-phase": phase,
+      "data-tool-count": toolCount,
+      className: cn("my-3 flex min-w-0 flex-col gap-1", className, classNames == null ? void 0 : classNames.root),
+      "aria-busy": phase === "running" ? "true" : "false",
+      "aria-describedby": statusId,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "turn-header",
+            className: cn(
+              "flex min-w-0 items-center gap-2 py-1 text-[13px] text-muted-foreground",
+              classNames == null ? void 0 : classNames.header
+            ),
+            children: [
+              /* @__PURE__ */ jsx(TurnGlyph, { phase }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "turn-status",
+                  className: cn(
+                    "min-w-0 flex-1 truncate tabular-nums leading-5",
+                    phase === "error" && !cancelled && "text-destructive"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    TurnStatus,
+                    {
+                      phase,
+                      cancelled,
+                      activitySummary,
+                      toolCount,
+                      summaryDetails
+                    }
+                  )
+                }
+              ),
+              meta ? /* @__PURE__ */ jsx("div", { "data-slot": "turn-meta", className: "flex shrink-0 items-center text-xs tabular-nums", children: meta }) : null,
+              actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
+            ]
+          }
+        ),
+        segments.length > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "super-grouping-transcript-body",
+            className: cn("flex min-w-0 flex-col gap-1.5", classNames == null ? void 0 : classNames.body),
+            children: segments.map(
+              (segment) => segment.kind === "prose" ? /* @__PURE__ */ jsx(ProseSegment, { text: segment.text, TextComponent }, segment.key) : /* @__PURE__ */ jsx(
+                ActivitySegment,
+                {
+                  segment,
+                  steps: segmentSteps(segment, stepsByPart),
+                  turnPhase: phase,
+                  expansionKey,
+                  expandWhileWaiting,
+                  mountDetails,
+                  maxVisibleSteps,
+                  grouping,
+                  components,
+                  classNames
+                },
+                segment.key
+              )
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("output", { id: statusId, "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: announcement })
+      ]
+    }
+  );
+});
+function segmentSteps(segment, stepsByPart) {
+  const steps = segment.partIndices.map((index) => stepsByPart.get(index)).filter((step) => step !== void 0);
+  return steps.length > 0 ? steps : EMPTY_STEPS;
+}
+export {
+  SuperGroupingTranscript
+};
+//# sourceMappingURL=SuperGroupingTranscript.js.map

package/dist/chat/super-grouping/SuperGroupingTranscript.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuperGroupingTranscript.js","sources":["../../../src/chat/super-grouping/SuperGroupingTranscript.tsx"],"sourcesContent":["'use client';\n\nimport {\n  getExternalStoreMessages,\n  MessagePrimitive,\n  type TextMessagePartComponent,\n  type ThreadAssistantMessagePart,\n  useAuiState,\n} from '@assistant-ui/react';\nimport { AlertCircle, Check, ChevronRight, Circle, LoaderCircle } from 'lucide-react';\nimport { memo, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport { StepText } from '../../tools/step-text';\nimport { ToolFallback } from '../../tools/tool-fallback';\nimport { collectAssetTitles } from '../../tools/tool-summary';\nimport { readMessageCreatedAt } from '../message-time';\nimport {\n  type ActivityPhase,\n  buildActivityTimeline,\n  countActivityTools,\n  getActivitySummary,\n  resolveActivityPhase,\n} from './activity-timeline';\nimport { CollapsibleGroup, SuperGroupingProvider } from './CollapsibleGroup';\nimport { createToolBasedGroupingFunction, type GroupingFunction } from './grouping-function';\nimport { type SuperGroupingCardProps, useActivityExpansion } from './SuperGroupingCard';\nimport { ToolTimeline } from './ToolTimeline';\nimport { type TimelineStep, toTimelineStep } from './timeline-step';\nimport { defaultGetToolGroupKey } from './toolkit-map';\nimport {\n  scopeGroupingToSegment,\n  splitTurnSegments,\n  summarizeSegment,\n  type TurnSegment,\n} from './turn-segments';\nimport {\n  firstSeenMs,\n  formatWorkDuration,\n  observedTurnEndMs,\n  readTurnTiming,\n  recordObservedTurnEnd,\n  type TurnTiming,\n  workedDurationMs,\n  workingLabel,\n} from './turn-timing';\n\nconst DEFAULT_MAX_VISIBLE_STEPS = 6;\nconst EMPTY_CONTENT: readonly ThreadAssistantMessagePart[] = [];\nconst EMPTY_STEPS: readonly TimelineStep[] = [];\n\nexport interface SuperGroupingTranscriptProps\n  extends Pick<\n    SuperGroupingCardProps,\n    | 'toolUIs'\n    | 'ToolFallback'\n    | 'TextComponent'\n    | 'ReasoningComponent'\n    | 'GroupComponent'\n    | 'getToolGroupKey'\n    | 'groupingFunction'\n    | 'waitingTools'\n    | 'passThroughTools'\n    | 'waitingForInput'\n    | 'resolveToolDisplayName'\n    | 'expansionKey'\n    | 'expandWhileWaiting'\n    | 'mountDetails'\n    | 'summaryDetails'\n    | 'renderHeaderActions'\n    | 'renderRunningMeta'\n    | 'className'\n  > {\n  /** Steps an opened segment lists before older ones fold away; unresolved calls always show. */\n  maxVisibleSteps?: number;\n  classNames?: {\n    root?: string;\n    header?: string;\n    body?: string;\n    details?: string;\n    /** The flex column a segment's parts render in; override its gap here. */\n    detailsParts?: string;\n  };\n}\n\n// ─── Turn timing ───────────────────────────────────────────────────────\n\n/**\n * The turn's stamps: the prompt it answers, its joined metadata, and the raw\n * messages behind it. Reads the whole message (the bound raw messages hang off\n * it), so only the small header status subscribes here, never the transcript.\n */\nfunction useTurnTimingSources(): { timing: TurnTiming; clockKey: string } {\n  const message = useAuiState((s) => s.message);\n  const promptCreatedAt = useAuiState((s) => {\n    const previous = s.thread.messages[s.message.index - 1];\n    return previous?.role === 'user' ? readMessageCreatedAt(previous.metadata?.custom) : null;\n  });\n  const promptId = useAuiState((s) => {\n    const previous = s.thread.messages[s.message.index - 1];\n    return previous?.role === 'user' ? previous.id : '';\n  });\n  const timing = useMemo(\n    () =>\n      readTurnTiming({\n        promptCreatedAt,\n        custom: message.metadata?.custom,\n        sourceMessages: getExternalStoreMessages<unknown>(message),\n      }),\n    [message, promptCreatedAt],\n  );\n  return { timing, clockKey: `${promptId}:${message.id}` };\n}\n\n/** \"Working for 1m 12s\", re-rendered once a second by itself so the transcript does not. */\nfunction WorkingFor({ startMs, clockKey }: { startMs: number | null; clockKey: string }) {\n  const [now, setNow] = useState(() => Date.now());\n  useEffect(() => {\n    const timer = setInterval(() => setNow(Date.now()), 1000);\n    return () => clearInterval(timer);\n  }, []);\n  const anchor = startMs ?? firstSeenMs(clockKey, now);\n  return <>{workingLabel(Math.max(0, now - anchor))}</>;\n}\n\n/**\n * The header's words: \"Working for 1m 12s\" while the turn runs, \"Worked for\n * 2m 30s · Used 7 tools\" once done, \"Waiting for you\", or how it ended.\n */\nfunction TurnStatus({\n  phase,\n  cancelled,\n  activitySummary,\n  toolCount,\n  summaryDetails,\n}: {\n  phase: ActivityPhase;\n  cancelled: boolean;\n  activitySummary: string;\n  toolCount: number;\n  summaryDetails: readonly string[] | undefined;\n}) {\n  const { timing, clockKey } = useTurnTimingSources();\n  const [observedEndMs, setObservedEndMs] = useState(() => observedTurnEndMs(clockKey));\n  const wasActive = useRef(phase === 'running' || phase === 'waiting');\n  useEffect(() => {\n    const active = phase === 'running' || phase === 'waiting';\n    if (wasActive.current && !active) setObservedEndMs(recordObservedTurnEnd(clockKey));\n    wasActive.current = active;\n  }, [phase, clockKey]);\n  if (phase === 'running') return <WorkingFor startMs={timing.startMs} clockKey={clockKey} />;\n  if (phase === 'waiting') return <>Waiting for you</>;\n  const workedMs = workedDurationMs(timing, observedEndMs);\n  if (phase === 'error') {\n    if (!cancelled) return <>Something went wrong</>;\n    return <>{workedMs !== null ? `Run stopped after ${formatWorkDuration(workedMs)}` : 'Run stopped'}</>;\n  }\n  const label = [\n    ...(workedMs !== null ? [`Worked for ${formatWorkDuration(workedMs)}`] : []),\n    ...(workedMs === null || toolCount > 0 || activitySummary !== 'Reasoning complete' ? [activitySummary] : []),\n    ...(summaryDetails ?? []),\n  ].join(' · ');\n  return <>{label}</>;\n}\n\nfunction TurnGlyph({ phase }: { phase: ActivityPhase }) {\n  const className = 'size-3.5 shrink-0';\n  if (phase === 'running') {\n    return <LoaderCircle aria-hidden=\"true\" className={cn(className, 'motion-safe:animate-spin')} />;\n  }\n  if (phase === 'waiting') {\n    return <Circle aria-hidden=\"true\" className={cn(className, 'text-amber-600 dark:text-amber-400')} />;\n  }\n  if (phase === 'error') {\n    return <AlertCircle aria-hidden=\"true\" className={cn(className, 'text-destructive')} />;\n  }\n  return <Check aria-hidden=\"true\" className={cn(className, 'opacity-70')} />;\n}\n\n// ─── Segments ──────────────────────────────────────────────────────────\n\nconst ProseSegment = memo(function ProseSegment({\n  text,\n  TextComponent,\n}: {\n  text: string;\n  TextComponent: TextMessagePartComponent;\n}) {\n  return (\n    <div data-slot=\"transcript-prose\" className=\"min-w-0\">\n      <TextComponent type=\"text\" text={text} status={{ type: 'complete' }} />\n    </div>\n  );\n});\n\ninterface ActivitySegmentProps {\n  segment: Extract<TurnSegment, { kind: 'activity' }>;\n  steps: readonly TimelineStep[];\n  turnPhase: ActivityPhase;\n  expansionKey: string;\n  expandWhileWaiting: boolean;\n  mountDetails: boolean;\n  maxVisibleSteps: number;\n  grouping: GroupingFunction;\n  components: Parameters<typeof MessagePrimitive.Unstable_PartsGrouped>[0]['components'];\n  classNames: SuperGroupingTranscriptProps['classNames'];\n}\n\n/**\n * One collapsed run of work between two of the agent's sentences: the step in\n * progress (or the last one taken) on one line, the segment's steps when\n * opened, and the tool UIs of just this segment behind \"Show tool details\".\n * The tool UIs stay mounted (hidden) while the turn is live so their effects\n * run, as in `SuperGroupingCard`.\n */\nfunction ActivitySegment({\n  segment,\n  steps,\n  turnPhase,\n  expansionKey,\n  expandWhileWaiting,\n  mountDetails,\n  maxVisibleSteps,\n  grouping,\n  components,\n  classNames,\n}: ActivitySegmentProps) {\n  const summary = summarizeSegment(steps);\n  const phase = summary.phase;\n  const { expanded, toggleExpanded } = useActivityExpansion({\n    expansionKey: `${expansionKey}:${segment.key}`,\n    phase,\n    expandWhileWaiting,\n  });\n  const { expanded: detailsExpanded, toggleExpanded: toggleDetails } = useActivityExpansion({\n    expansionKey: `${expansionKey}:${segment.key}:details`,\n    phase,\n    expandWhileWaiting,\n  });\n  const indicesKey = segment.partIndices.join(',');\n  const scopedGrouping = useMemo(\n    () => scopeGroupingToSegment(grouping, indicesKey.split(',').map(Number)),\n    [grouping, indicesKey],\n  );\n  const groupingContext = useMemo(() => ({ groupingFunction: scopedGrouping }), [scopedGrouping]);\n  const detailsPanelId = `aui-sg-segment-${useId().replace(/[^A-Za-z0-9_-]/g, '')}`;\n\n  const isTurnActive = turnPhase === 'running' || turnPhase === 'waiting';\n  const detailsMounted = isTurnActive || mountDetails || (expanded && detailsExpanded);\n  const hasToolSteps = steps.some((step) => step.kind === 'tool');\n  const meta = [summary.step?.chip, summary.meta].filter(Boolean).join(' · ');\n\n  // Parts with no step of their own (an image the agent produced) are content, not work.\n  if (steps.length === 0) {\n    return (\n      <div data-slot=\"transcript-parts\" className={cn('flex min-w-0 flex-col gap-2', classNames?.detailsParts)}>\n        <SuperGroupingProvider value={groupingContext}>\n          <MessagePrimitive.Unstable_PartsGrouped groupingFunction={scopedGrouping} components={components} />\n        </SuperGroupingProvider>\n      </div>\n    );\n  }\n\n  return (\n    <div data-slot=\"activity-segment\" data-phase={phase} data-segment-key={segment.key} className=\"min-w-0\">\n      <ToolTimeline\n        steps={steps}\n        open={expanded}\n        onOpenChange={toggleExpanded}\n        label={<StepText text={summary.label} code={summary.step?.code} />}\n        labelTitle={summary.step?.detail}\n        phase={phase}\n        maxVisibleSteps={maxVisibleSteps}\n        keepMounted={isTurnActive || mountDetails}\n        meta={meta ? <span data-slot=\"activity-segment-meta\">{meta}</span> : null}\n      >\n        <div className=\"min-w-0 pl-5\">\n          <button\n            type=\"button\"\n            onClick={toggleDetails}\n            aria-expanded={detailsExpanded}\n            aria-controls={detailsPanelId}\n            className=\"flex items-center gap-1.5 rounded py-1 text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <ChevronRight\n              aria-hidden=\"true\"\n              className={cn(\n                'size-3 transition-transform motion-reduce:transition-none',\n                detailsExpanded && 'rotate-90',\n              )}\n            />\n            {detailsExpanded\n              ? hasToolSteps\n                ? 'Hide tool details'\n                : 'Hide thinking'\n              : hasToolSteps\n                ? 'Show tool details'\n                : 'Show thinking'}\n          </button>\n          {detailsMounted ? (\n            <section\n              id={detailsPanelId}\n              aria-label=\"Step details\"\n              hidden={!expanded || !detailsExpanded}\n              className={cn(\n                'min-w-0 overflow-hidden border-l border-border/60 py-2 pl-3',\n                classNames?.details,\n              )}\n            >\n              <div className={cn('flex flex-col gap-2', classNames?.detailsParts)}>\n                <SuperGroupingProvider value={groupingContext}>\n                  <MessagePrimitive.Unstable_PartsGrouped groupingFunction={scopedGrouping} components={components} />\n                </SuperGroupingProvider>\n              </div>\n            </section>\n          ) : null}\n        </div>\n      </ToolTimeline>\n    </div>\n  );\n}\n\n// ─── Transcript ────────────────────────────────────────────────────────\n\n/**\n * The grouped (\"conversational\") view of an assistant turn as a transcript:\n * a header that says how long the turn has been working (\"Working for\n * 1m 12s\", then \"Worked for 2m 30s\"), then the agent's own sentences in the\n * order it wrote them, each run of work between them folded into one\n * collapsed activity segment that names its step (\"Ran `git log -1`\",\n * \"Read `config.ts`\"). The answer — the text after the last tool call —\n * renders below it through `SuperGroupingFinalText`, exactly as under\n * `SuperGroupingCard`, so no text renders twice.\n *\n * Takes the same renderer and host slots as `SuperGroupingCard`;\n * `renderRunningMeta` and `renderHeaderActions` sit on the header row.\n *\n * Selector discipline: raw reads only (`message`, `message.content`,\n * `message.status`, the previous message's stamp and id); every derivation\n * runs in `useMemo`.\n */\nexport const SuperGroupingTranscript = memo(function SuperGroupingTranscript({\n  toolUIs,\n  ToolFallback: ToolFallbackComponent = ToolFallback,\n  TextComponent,\n  ReasoningComponent,\n  GroupComponent = CollapsibleGroup,\n  getToolGroupKey = defaultGetToolGroupKey,\n  groupingFunction,\n  waitingTools,\n  passThroughTools,\n  waitingForInput = false,\n  resolveToolDisplayName,\n  expansionKey: expansionKeyProp,\n  expandWhileWaiting = false,\n  mountDetails = false,\n  maxVisibleSteps = DEFAULT_MAX_VISIBLE_STEPS,\n  summaryDetails,\n  renderHeaderActions,\n  renderRunningMeta,\n  className,\n  classNames,\n}: SuperGroupingTranscriptProps) {\n  const messageId = useAuiState((s) => s.message.id);\n  const messageContent = useAuiState((s) =>\n    s.message.role === 'assistant' ? s.message.content : EMPTY_CONTENT,\n  );\n  const messageStatus = useAuiState((s) => s.message.status);\n\n  const timeline = useMemo(\n    () => buildActivityTimeline(messageContent, messageStatus, { waitingTools, passThroughTools }),\n    [messageContent, messageStatus, waitingTools, passThroughTools],\n  );\n  const phase = useMemo(\n    () => resolveActivityPhase(messageStatus, timeline, { waitingForInput }),\n    [messageStatus, timeline, waitingForInput],\n  );\n  const assetTitles = useMemo(() => collectAssetTitles(messageContent), [messageContent]);\n  const stepsByPart = useMemo(() => {\n    const byPart = new Map<number, TimelineStep>();\n    timeline.forEach((item, index) => {\n      if (item.partIndex === undefined) return;\n      byPart.set(item.partIndex, toTimelineStep({ item, index, resolveToolDisplayName, assetTitles }));\n    });\n    return byPart;\n  }, [timeline, resolveToolDisplayName, assetTitles]);\n  const segments = useMemo(() => splitTurnSegments(messageContent), [messageContent]);\n  const grouping = useMemo(\n    () => groupingFunction ?? createToolBasedGroupingFunction(getToolGroupKey),\n    [groupingFunction, getToolGroupKey],\n  );\n  const components = useMemo(\n    () => ({\n      tools: {\n        ...(toolUIs ? { by_name: toolUIs } : {}),\n        Fallback: ToolFallbackComponent,\n      },\n      Text: TextComponent,\n      ...(ReasoningComponent ? { Reasoning: ReasoningComponent } : {}),\n      Group: GroupComponent,\n    }),\n    [toolUIs, ToolFallbackComponent, TextComponent, ReasoningComponent, GroupComponent],\n  );\n  const statusId = `aui-sg-turn-${useId().replace(/[^A-Za-z0-9_-]/g, '')}`;\n\n  const hasText = messageContent.some((part) => part.type === 'text' && part.text.trim() !== '');\n  const isVisible =\n    timeline.length > 0 || phase === 'waiting' || phase === 'error' || (phase === 'running' && !hasText);\n  if (!isVisible) return null;\n\n  const expansionKey = expansionKeyProp ?? messageId;\n  const toolCount = countActivityTools(timeline);\n  const runningStep = [...stepsByPart.values()].filter((step) => step.state === 'running').at(-1);\n  const cancelled = messageStatus?.type === 'incomplete' && messageStatus.reason === 'cancelled';\n  const activitySummary = getActivitySummary(timeline);\n  // The live region speaks what changed, never the ticking clock.\n  const announcement =\n    phase === 'running'\n      ? (runningStep?.verb ?? 'Working')\n      : phase === 'waiting'\n        ? 'Waiting for your input'\n        : phase === 'error'\n          ? cancelled\n            ? 'Run stopped'\n            : 'Something went wrong'\n          : activitySummary;\n  const actions = renderHeaderActions?.({ phase, messageContent });\n  const meta = phase === 'running' ? renderRunningMeta?.({ phase }) : null;\n\n  return (\n    <section\n      data-slot=\"super-grouping-transcript\"\n      data-phase={phase}\n      data-tool-count={toolCount}\n      className={cn('my-3 flex min-w-0 flex-col gap-1', className, classNames?.root)}\n      aria-busy={phase === 'running' ? 'true' : 'false'}\n      aria-describedby={statusId}\n    >\n      <div\n        data-slot=\"turn-header\"\n        className={cn(\n          'flex min-w-0 items-center gap-2 py-1 text-[13px] text-muted-foreground',\n          classNames?.header,\n        )}\n      >\n        <TurnGlyph phase={phase} />\n        <span\n          data-slot=\"turn-status\"\n          className={cn(\n            'min-w-0 flex-1 truncate tabular-nums leading-5',\n            phase === 'error' && !cancelled && 'text-destructive',\n          )}\n        >\n          <TurnStatus\n            phase={phase}\n            cancelled={cancelled}\n            activitySummary={activitySummary}\n            toolCount={toolCount}\n            summaryDetails={summaryDetails}\n          />\n        </span>\n        {meta ? (\n          <div data-slot=\"turn-meta\" className=\"flex shrink-0 items-center text-xs tabular-nums\">\n            {meta}\n          </div>\n        ) : null}\n        {actions ? <div className=\"flex shrink-0 items-center gap-1\">{actions}</div> : null}\n      </div>\n      {segments.length > 0 ? (\n        <div\n          data-slot=\"super-grouping-transcript-body\"\n          className={cn('flex min-w-0 flex-col gap-1.5', classNames?.body)}\n        >\n          {segments.map((segment) =>\n            segment.kind === 'prose' ? (\n              <ProseSegment key={segment.key} text={segment.text} TextComponent={TextComponent} />\n            ) : (\n              <ActivitySegment\n                key={segment.key}\n                segment={segment}\n                steps={segmentSteps(segment, stepsByPart)}\n                turnPhase={phase}\n                expansionKey={expansionKey}\n                expandWhileWaiting={expandWhileWaiting}\n                mountDetails={mountDetails}\n                maxVisibleSteps={maxVisibleSteps}\n                grouping={grouping}\n                components={components}\n                classNames={classNames}\n              />\n            ),\n          )}\n        </div>\n      ) : null}\n      <output id={statusId} aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n        {announcement}\n      </output>\n    </section>\n  );\n});\n\nfunction segmentSteps(\n  segment: Extract<TurnSegment, { kind: 'activity' }>,\n  stepsByPart: ReadonlyMap<number, TimelineStep>,\n): readonly TimelineStep[] {\n  const steps = segment.partIndices\n    .map((index) => stepsByPart.get(index))\n    .filter((step): step is TimelineStep => step !== undefined);\n  return steps.length > 0 ? steps : EMPTY_STEPS;\n}\n"],"names":["ProseSegment","SuperGroupingTranscript"],"mappings":"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"}

package/dist/chat/super-grouping/ToolTimeline.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const lucideReact = require("lucide-react");
 const react = require("react");
+const stepText = require("../../tools/step-text.cjs");
 const collapsible = require("../../ui/collapsible.cjs");
 const timelineStep = require("./timeline-step.cjs");
 const cnfast = require("cnfast");
@@ -25,6 +26,7 @@ function ToolTimeline({
   open,
   onOpenChange,
   label,
+  labelTitle,
   phase,
   maxVisibleSteps,
   keepMounted,
@@ -56,6 +58,7 @@ function ToolTimeline({
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
+                title: labelTitle,
                 className: cnfast.cn(
                   "min-w-0 break-words leading-5",
                   phase === "running" && "motion-safe:animate-pulse",
@@ -67,9 +70,16 @@ function ToolTimeline({
           ]
         }
       ),
+      meta ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-slot": "tool-timeline-meta",
+          className: "flex shrink-0 items-center text-xs text-muted-foreground tabular-nums",
+          children: meta
+        }
+      ) : null,
       actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
     ] }),
-    meta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-5 text-xs text-muted-foreground", children: meta }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       collapsible.CollapsibleContent,
       {
@@ -99,12 +109,13 @@ function ToolTimeline({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
+                      title: step.detail,
                       className: cnfast.cn(
                         "min-w-0 break-words leading-5",
                         step.state === "error" && "text-destructive",
                         step.state === "running" && "text-foreground"
                       ),
-                      children: step.verb
+                      children: /* @__PURE__ */ jsxRuntime.jsx(stepText.StepText, { text: step.verb, code: step.code })
                     }
                   ),
                   step.chip ? /* @__PURE__ */ jsxRuntime.jsx(

package/dist/chat/super-grouping/ToolTimeline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToolTimeline.cjs","sources":["../../../src/chat/super-grouping/ToolTimeline.tsx"],"sourcesContent":["'use client';\n\n/*!\n * Adapted from assistant-ui's ToolTimeline element:\n * https://github.com/assistant-ui/assistant-ui/blob/main/packages/ui/src/components/react/assistant-ui/elements/tool-timeline.tsx\n * MIT License — Copyright (c) 2025 AgentbaseAI Inc.\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\nimport { AlertCircle, Check, ChevronRight, Circle, LoaderCircle, Pause, X } from 'lucide-react';\nimport { type ReactNode, useId, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../ui/collapsible';\nimport type { ActivityPhase } from './activity-timeline';\nimport { type TimelineStep, visibleTimelineSteps } from './timeline-step';\n\nfunction StepIcon({ state }: { state: TimelineStep['state'] }) {\n  const Icon =\n    state === 'running'\n      ? LoaderCircle\n      : state === 'complete'\n        ? Check\n        : state === 'error'\n          ? AlertCircle\n          : state === 'rejected'\n            ? X\n            : state === 'paused'\n              ? Pause\n              : Circle;\n  return (\n    <Icon\n      aria-hidden=\"true\"\n      className={cn(\n        'size-3.5 shrink-0',\n        state === 'running' && 'motion-safe:animate-spin',\n        state === 'error'\n          ? 'text-destructive'\n          : state === 'waiting' || state === 'paused'\n            ? 'text-amber-600 dark:text-amber-400'\n            : 'text-muted-foreground',\n      )}\n    />\n  );\n}\n\n/** The upstream disclosure/verb/chip layout, with real per-call states and live tool UIs. */\nexport function ToolTimeline({\n  steps,\n  open,\n  onOpenChange,\n  label,\n  phase,\n  maxVisibleSteps,\n  keepMounted,\n  actions,\n  meta,\n  children,\n}: {\n  steps: readonly TimelineStep[];\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  label: string;\n  phase: ActivityPhase;\n  maxVisibleSteps: number;\n  keepMounted: boolean;\n  actions?: ReactNode;\n  meta?: ReactNode;\n  children?: ReactNode;\n}) {\n  const panelId = useId();\n  const [showAll, setShowAll] = useState(false);\n  const recentSteps = visibleTimelineSteps({ steps, limit: maxVisibleSteps });\n  const shown = showAll ? steps : recentSteps;\n  const hiddenCount = steps.length - recentSteps.length;\n  return (\n    <Collapsible data-slot=\"tool-timeline\" open={open} onOpenChange={onOpenChange} className=\"w-full min-w-0\">\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <CollapsibleTrigger\n          aria-controls={panelId}\n          className=\"group/trigger flex min-w-0 flex-1 items-center gap-1.5 rounded-md py-1 text-left text-[13px] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <ChevronRight\n            aria-hidden=\"true\"\n            className=\"size-3.5 shrink-0 opacity-60 transition-transform duration-200 group-data-[state=open]/trigger:rotate-90 motion-reduce:transition-none\"\n          />\n          {phase === 'error' || phase === 'waiting' ? <StepIcon state={phase} /> : null}\n          <span\n            className={cn(\n              'min-w-0 break-words leading-5',\n              phase === 'running' && 'motion-safe:animate-pulse',\n              phase === 'error' && 'text-destructive',\n            )}\n          >\n            {label}\n          </span>\n        </CollapsibleTrigger>\n        {actions ? <div className=\"flex shrink-0 items-center gap-1\">{actions}</div> : null}\n      </div>\n      {meta ? <div className=\"pl-5 text-xs text-muted-foreground\">{meta}</div> : null}\n      <CollapsibleContent\n        id={panelId}\n        forceMount={keepMounted ? true : undefined}\n        hidden={!open}\n        className=\"min-w-0\"\n      >\n        <ol aria-label=\"Work status updates\" className=\"flex list-none flex-col gap-2.5 py-2.5 pl-5\">\n          {hiddenCount > 0 ? (\n            <li>\n              <button\n                type=\"button\"\n                onClick={() => setShowAll((previous) => !previous)}\n                className=\"rounded text-xs text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              >\n                {showAll\n                  ? 'Show recent steps'\n                  : `Show ${hiddenCount} earlier ${hiddenCount === 1 ? 'step' : 'steps'}`}\n              </button>\n            </li>\n          ) : null}\n          {shown.map((step) => (\n            <li\n              key={step.id}\n              data-step-id={step.id}\n              data-step-state={step.state}\n              className=\"flex min-w-0 items-center gap-2 text-[13px] text-muted-foreground\"\n            >\n              <StepIcon state={step.state} />\n              <span\n                className={cn(\n                  'min-w-0 break-words leading-5',\n                  step.state === 'error' && 'text-destructive',\n                  step.state === 'running' && 'text-foreground',\n                )}\n              >\n                {step.verb}\n              </span>\n              {step.chip ? (\n                <span\n                  title={step.chip}\n                  className=\"max-w-[45%] truncate rounded-md bg-foreground/[0.06] px-1.5 py-0.5 font-mono text-[11px] text-foreground/70\"\n                >\n                  {step.chip}\n                </span>\n              ) : null}\n              <span className=\"sr-only\">{step.state}</span>\n            </li>\n          ))}\n        </ol>\n        {children}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":["LoaderCircle","Check","AlertCircle","X","Pause","Circle","jsx","cn","useId","useState","visibleTimelineSteps","Collapsible","jsxs","CollapsibleTrigger","ChevronRight","CollapsibleContent"],"mappings":"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"}
+{"version":3,"file":"ToolTimeline.cjs","sources":["../../../src/chat/super-grouping/ToolTimeline.tsx"],"sourcesContent":["'use client';\n\n/*!\n * Adapted from assistant-ui's ToolTimeline element:\n * https://github.com/assistant-ui/assistant-ui/blob/main/packages/ui/src/components/react/assistant-ui/elements/tool-timeline.tsx\n * MIT License — Copyright (c) 2025 AgentbaseAI Inc.\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\nimport { AlertCircle, Check, ChevronRight, Circle, LoaderCircle, Pause, X } from 'lucide-react';\nimport { type ReactNode, useId, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport { StepText } from '../../tools/step-text';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../ui/collapsible';\nimport type { ActivityPhase } from './activity-timeline';\nimport { type TimelineStep, visibleTimelineSteps } from './timeline-step';\n\nfunction StepIcon({ state }: { state: TimelineStep['state'] }) {\n  const Icon =\n    state === 'running'\n      ? LoaderCircle\n      : state === 'complete'\n        ? Check\n        : state === 'error'\n          ? AlertCircle\n          : state === 'rejected'\n            ? X\n            : state === 'paused'\n              ? Pause\n              : Circle;\n  return (\n    <Icon\n      aria-hidden=\"true\"\n      className={cn(\n        'size-3.5 shrink-0',\n        state === 'running' && 'motion-safe:animate-spin',\n        state === 'error'\n          ? 'text-destructive'\n          : state === 'waiting' || state === 'paused'\n            ? 'text-amber-600 dark:text-amber-400'\n            : 'text-muted-foreground',\n      )}\n    />\n  );\n}\n\n/**\n * The upstream disclosure/verb/chip layout, with real per-call states and live\n * tool UIs. `meta` (a host's elapsed counter) sits on the header row itself,\n * right of the status and before `actions`, so a live card carries one status\n * line rather than a second row repeating what the header already says.\n */\nexport function ToolTimeline({\n  steps,\n  open,\n  onOpenChange,\n  label,\n  labelTitle,\n  phase,\n  maxVisibleSteps,\n  keepMounted,\n  actions,\n  meta,\n  children,\n}: {\n  steps: readonly TimelineStep[];\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  label: ReactNode;\n  /** Tooltip for the header line (the full form of a clipped label). */\n  labelTitle?: string;\n  phase: ActivityPhase;\n  maxVisibleSteps: number;\n  keepMounted: boolean;\n  actions?: ReactNode;\n  meta?: ReactNode;\n  children?: ReactNode;\n}) {\n  const panelId = useId();\n  const [showAll, setShowAll] = useState(false);\n  const recentSteps = visibleTimelineSteps({ steps, limit: maxVisibleSteps });\n  const shown = showAll ? steps : recentSteps;\n  const hiddenCount = steps.length - recentSteps.length;\n  return (\n    <Collapsible data-slot=\"tool-timeline\" open={open} onOpenChange={onOpenChange} className=\"w-full min-w-0\">\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <CollapsibleTrigger\n          aria-controls={panelId}\n          className=\"group/trigger flex min-w-0 flex-1 items-center gap-1.5 rounded-md py-1 text-left text-[13px] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <ChevronRight\n            aria-hidden=\"true\"\n            className=\"size-3.5 shrink-0 opacity-60 transition-transform duration-200 group-data-[state=open]/trigger:rotate-90 motion-reduce:transition-none\"\n          />\n          {phase === 'error' || phase === 'waiting' ? <StepIcon state={phase} /> : null}\n          <span\n            title={labelTitle}\n            className={cn(\n              'min-w-0 break-words leading-5',\n              phase === 'running' && 'motion-safe:animate-pulse',\n              phase === 'error' && 'text-destructive',\n            )}\n          >\n            {label}\n          </span>\n        </CollapsibleTrigger>\n        {meta ? (\n          <div\n            data-slot=\"tool-timeline-meta\"\n            className=\"flex shrink-0 items-center text-xs text-muted-foreground tabular-nums\"\n          >\n            {meta}\n          </div>\n        ) : null}\n        {actions ? <div className=\"flex shrink-0 items-center gap-1\">{actions}</div> : null}\n      </div>\n      <CollapsibleContent\n        id={panelId}\n        forceMount={keepMounted ? true : undefined}\n        hidden={!open}\n        className=\"min-w-0\"\n      >\n        <ol aria-label=\"Work status updates\" className=\"flex list-none flex-col gap-2.5 py-2.5 pl-5\">\n          {hiddenCount > 0 ? (\n            <li>\n              <button\n                type=\"button\"\n                onClick={() => setShowAll((previous) => !previous)}\n                className=\"rounded text-xs text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              >\n                {showAll\n                  ? 'Show recent steps'\n                  : `Show ${hiddenCount} earlier ${hiddenCount === 1 ? 'step' : 'steps'}`}\n              </button>\n            </li>\n          ) : null}\n          {shown.map((step) => (\n            <li\n              key={step.id}\n              data-step-id={step.id}\n              data-step-state={step.state}\n              className=\"flex min-w-0 items-center gap-2 text-[13px] text-muted-foreground\"\n            >\n              <StepIcon state={step.state} />\n              <span\n                title={step.detail}\n                className={cn(\n                  'min-w-0 break-words leading-5',\n                  step.state === 'error' && 'text-destructive',\n                  step.state === 'running' && 'text-foreground',\n                )}\n              >\n                <StepText text={step.verb} code={step.code} />\n              </span>\n              {step.chip ? (\n                <span\n                  title={step.chip}\n                  className=\"max-w-[45%] truncate rounded-md bg-foreground/[0.06] px-1.5 py-0.5 font-mono text-[11px] text-foreground/70\"\n                >\n                  {step.chip}\n                </span>\n              ) : null}\n              <span className=\"sr-only\">{step.state}</span>\n            </li>\n          ))}\n        </ol>\n        {children}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":["LoaderCircle","Check","AlertCircle","X","Pause","Circle","jsx","cn","useId","useState","visibleTimelineSteps","Collapsible","jsxs","CollapsibleTrigger","ChevronRight","CollapsibleContent","StepText"],"mappings":";;;;;;;;;AA8BA,SAAS,SAAS,EAAE,SAA2C;AAC7D,QAAM,OACJ,UAAU,YACNA,YAAAA,eACA,UAAU,aACRC,oBACA,UAAU,UACRC,YAAAA,cACA,UAAU,aACRC,YAAAA,IACA,UAAU,WACRC,YAAAA,QACAC,YAAAA;AACd,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,OAAAA;AAAAA,QACT;AAAA,QACA,UAAU,aAAa;AAAA,QACvB,UAAU,UACN,qBACA,UAAU,aAAa,UAAU,WAC/B,uCACA;AAAA,MAAA;AAAA,IACR;AAAA,EAAA;AAGN;AAQO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAaG;AACD,QAAM,UAAUC,MAAAA,MAAA;AAChB,QAAM,CAAC,SAAS,UAAU,IAAIC,MAAAA,SAAS,KAAK;AAC5C,QAAM,cAAcC,aAAAA,qBAAqB,EAAE,OAAO,OAAO,iBAAiB;AAC1E,QAAM,QAAQ,UAAU,QAAQ;AAChC,QAAM,cAAc,MAAM,SAAS,YAAY;AAC/C,yCACGC,yBAAA,EAAY,aAAU,iBAAgB,MAAY,cAA4B,WAAU,kBACvF,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAAA,2BAAAA;AAAAA,QAACC,YAAAA;AAAAA,QAAA;AAAA,UACC,iBAAe;AAAA,UACf,WAAU;AAAA,UAEV,UAAA;AAAA,YAAAP,2BAAAA;AAAAA,cAACQ,YAAAA;AAAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEX,UAAU,WAAW,UAAU,2CAAa,UAAA,EAAS,OAAO,OAAO,IAAK;AAAA,YACzER,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,WAAWC,OAAAA;AAAAA,kBACT;AAAA,kBACA,UAAU,aAAa;AAAA,kBACvB,UAAU,WAAW;AAAA,gBAAA;AAAA,gBAGtB,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,MAED,OACCD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAET,UAAA;AAAA,QAAA;AAAA,MAAA,IAED;AAAA,MACH,UAAUA,2BAAAA,IAAC,OAAA,EAAI,WAAU,oCAAoC,mBAAQ,IAAS;AAAA,IAAA,GACjF;AAAA,IACAM,2BAAAA;AAAAA,MAACG,YAAAA;AAAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,YAAY,cAAc,OAAO;AAAA,QACjC,QAAQ,CAAC;AAAA,QACT,WAAU;AAAA,QAEV,UAAA;AAAA,UAAAH,2BAAAA,KAAC,MAAA,EAAG,cAAW,uBAAsB,WAAU,+CAC5C,UAAA;AAAA,YAAA,cAAc,mCACZ,MAAA,EACC,UAAAN,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,WAAW,CAAC,aAAa,CAAC,QAAQ;AAAA,gBACjD,WAAU;AAAA,gBAET,UAAA,UACG,sBACA,QAAQ,WAAW,YAAY,gBAAgB,IAAI,SAAS,OAAO;AAAA,cAAA;AAAA,YAAA,GAE3E,IACE;AAAA,YACH,MAAM,IAAI,CAAC,SACVM,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,gBAAc,KAAK;AAAA,gBACnB,mBAAiB,KAAK;AAAA,gBACtB,WAAU;AAAA,gBAEV,UAAA;AAAA,kBAAAN,2BAAAA,IAAC,UAAA,EAAS,OAAO,KAAK,MAAA,CAAO;AAAA,kBAC7BA,2BAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,OAAO,KAAK;AAAA,sBACZ,WAAWC,OAAAA;AAAAA,wBACT;AAAA,wBACA,KAAK,UAAU,WAAW;AAAA,wBAC1B,KAAK,UAAU,aAAa;AAAA,sBAAA;AAAA,sBAG9B,yCAACS,SAAAA,UAAA,EAAS,MAAM,KAAK,MAAM,MAAM,KAAK,KAAA,CAAM;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAE7C,KAAK,OACJV,2BAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,OAAO,KAAK;AAAA,sBACZ,WAAU;AAAA,sBAET,UAAA,KAAK;AAAA,oBAAA;AAAA,kBAAA,IAEN;AAAA,kBACJA,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,eAAK,MAAA,CAAM;AAAA,gBAAA;AAAA,cAAA;AAAA,cAxBjC,KAAK;AAAA,YAAA,CA0Bb;AAAA,UAAA,GACH;AAAA,UACC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;;"}

package/dist/chat/super-grouping/ToolTimeline.d.ts

@@ -1,12 +1,19 @@
 import { type ReactNode } from 'react';
 import type { ActivityPhase } from './activity-timeline';
 import { type TimelineStep } from './timeline-step';
-/** The upstream disclosure/verb/chip layout, with real per-call states and live tool UIs. */
-export declare function ToolTimeline({ steps, open, onOpenChange, label, phase, maxVisibleSteps, keepMounted, actions, meta, children, }: {
+/**
+ * The upstream disclosure/verb/chip layout, with real per-call states and live
+ * tool UIs. `meta` (a host's elapsed counter) sits on the header row itself,
+ * right of the status and before `actions`, so a live card carries one status
+ * line rather than a second row repeating what the header already says.
+ */
+export declare function ToolTimeline({ steps, open, onOpenChange, label, labelTitle, phase, maxVisibleSteps, keepMounted, actions, meta, children, }: {
     steps: readonly TimelineStep[];
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    label: string;
+    label: ReactNode;
+    /** Tooltip for the header line (the full form of a clipped label). */
+    labelTitle?: string;
     phase: ActivityPhase;
     maxVisibleSteps: number;
     keepMounted: boolean;

package/dist/chat/super-grouping/ToolTimeline.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { ChevronRight, LoaderCircle, Check, AlertCircle, X, Pause, Circle } from "lucide-react";
 import { useId, useState } from "react";
+import { StepText } from "../../tools/step-text.js";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "../../ui/collapsible.js";
 import { visibleTimelineSteps } from "./timeline-step.js";
 import { cn } from "cnfast";
@@ -23,6 +24,7 @@ function ToolTimeline({
   open,
   onOpenChange,
   label,
+  labelTitle,
   phase,
   maxVisibleSteps,
   keepMounted,
@@ -54,6 +56,7 @@ function ToolTimeline({
             /* @__PURE__ */ jsx(
               "span",
               {
+                title: labelTitle,
                 className: cn(
                   "min-w-0 break-words leading-5",
                   phase === "running" && "motion-safe:animate-pulse",
@@ -65,9 +68,16 @@ function ToolTimeline({
           ]
         }
       ),
+      meta ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "tool-timeline-meta",
+          className: "flex shrink-0 items-center text-xs text-muted-foreground tabular-nums",
+          children: meta
+        }
+      ) : null,
       actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
     ] }),
-    meta ? /* @__PURE__ */ jsx("div", { className: "pl-5 text-xs text-muted-foreground", children: meta }) : null,
     /* @__PURE__ */ jsxs(
       CollapsibleContent,
       {
@@ -97,12 +107,13 @@ function ToolTimeline({
                   /* @__PURE__ */ jsx(
                     "span",
                     {
+                      title: step.detail,
                       className: cn(
                         "min-w-0 break-words leading-5",
                         step.state === "error" && "text-destructive",
                         step.state === "running" && "text-foreground"
                       ),
-                      children: step.verb
+                      children: /* @__PURE__ */ jsx(StepText, { text: step.verb, code: step.code })
                     }
                   ),
                   step.chip ? /* @__PURE__ */ jsx(