@vvedantb/ui 0.17.0 → 0.18.0

package/src/ai-elements/activity-tasks.tsx

@@ -0,0 +1,770 @@
+"use client";
+
+import { createContext, memo, useCallback, useContext, useRef, useState } from "react";
+import type { ComponentProps, ReactNode, Ref } from "react";
+import { flushSync } from "react-dom";
+
+import { Collapsible, CollapsibleContent } from "../ui/collapsible";
+import {
+  IconBrain,
+  IconChevronRight,
+  IconCircle,
+  IconCircleCheck,
+  IconGitBranch,
+  IconSearch,
+  IconTerminal2,
+} from "@tabler/icons-react";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { Streamdown } from "streamdown";
+import { useCn, useUiConfig } from "../ui/ui-config";
+import { Spinner } from "../ui/spinner";
+import { CrossfadeIconSlot } from "../ui/crossfade-icon";
+import { staggerDelay, tokenTransition } from "../motion/presets";
+import { m } from "motion/react";
+import { Shimmer } from "./shimmer";
+import {
+  type ActivityMarkdownProps,
+  type ActivityStep,
+  type ActivityTodoItem,
+  activityStepConfig,
+  activityStepHasRichDetail,
+  useActivitySpinnerVerb,
+  useActivityElapsedSeconds,
+  formatActivityElapsed,
+} from "./activity-shared";
+import {
+  type ActivityRow,
+  type ActivitySegment,
+  activityRowKey,
+  activitySegmentKey,
+  buildActivityRows,
+  groupActivityRows,
+} from "./activity-tasks-utils";
+import {
+  deriveActionGroupSummary,
+  deriveStepRowPresentation,
+  resolveCommandVisualKind,
+  type CommandVisualKind,
+} from "./activity-step-label";
+import { ActivityStepDetail } from "./activity-step-detail";
+import { FileChip } from "./file-chip";
+import {
+  AgentTrace,
+  AgentTraceCollapsible,
+  AgentTraceCollapsibleContent,
+  AgentTraceCollapsibleTrigger,
+  AgentTraceDescription,
+  AgentTraceIcon,
+  AgentTraceLine,
+  AgentTraceTitle,
+  type AgentTraceStatus,
+} from "./trace";
+import { useStreamingDisclosure } from "./use-streaming-disclosure";
+
+const streamdownPlugins = { cjk, code, math, mermaid };
+
+function StreamdownMarkdown({ className, mode, children }: ActivityMarkdownProps) {
+  return (
+    <Streamdown className={className} mode={mode} plugins={streamdownPlugins}>
+      {children}
+    </Streamdown>
+  );
+}
+
+/** The app's Markdown renderer (`UiConfig.ActivityTasks.markdown`), or Streamdown. */
+function useActivityMarkdown() {
+  return useUiConfig("ActivityTasks")?.markdown ?? StreamdownMarkdown;
+}
+
+const ActivityStreamingHeader = memo(function ActivityStreamingHeader({
+  steps,
+  name,
+  startedAt,
+}: {
+  steps: ActivityStep[];
+  name?: string;
+  startedAt?: number;
+}) {
+  const verb = useActivitySpinnerVerb(true);
+  const elapsed = useActivityElapsedSeconds(startedAt, true);
+  const defaultName = useUiConfig("ActivityTasks")?.name ?? "Agent";
+  // Reply text is not a status: label the header from the work steps only.
+  const work = steps.filter((s) => s.type !== "response");
+  const activeStep = work.find((s) => s.status === "active") ?? work[0];
+  const headerText = `${
+    activeStep?.label ?? `${name ?? defaultName} is ${verb.toLowerCase()}...`
+  }${startedAt ? ` (${formatActivityElapsed(elapsed)})` : ""}`;
+  return (
+    <div className="flex items-center gap-2 text-muted-foreground text-sm">
+      <Spinner size="sm" />
+      <Shimmer as="span" duration={2.5} spread={1.5}>
+        {headerText}
+      </Shimmer>
+    </div>
+  );
+});
+
+/** Max timeline blocks shown before the overflow toggle appears. */
+const MAX_VISIBLE_ROWS = 8;
+
+/** Max nested child rows shown under a subtask before "+N more". */
+const MAX_VISIBLE_CHILDREN = 8;
+
+const HIDDEN_TYPES = new Set<ActivityStep["type"]>(["thinking", "response"]);
+
+/** Inline layout shows mid-turn reply text in the timeline; thinking stays hidden. */
+const INLINE_HIDDEN_TYPES = new Set<ActivityStep["type"]>(["thinking"]);
+
+/**
+ * `folded` (Codex-style): a settled turn collapses behind "Worked for …",
+ * long timelines cap behind "Show N more", and mid-turn text is hidden.
+ * `inline` (Claude-style): every step and the text between them stay open.
+ */
+export type ActivityLayout = "folded" | "inline";
+
+/** Nearest ancestor that actually scrolls — used to keep the overflow toggle pinned. */
+function findScrollParent(el: HTMLElement): HTMLElement | null {
+  let current = el.parentElement;
+  while (current) {
+    const { overflowY } = getComputedStyle(current);
+    if (
+      (overflowY === "auto" ||
+        overflowY === "scroll" ||
+        overflowY === "overlay") &&
+      current.scrollHeight > current.clientHeight
+    ) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+
+/**
+ * Expand/collapse while keeping `anchor` visually fixed (t3code work-group
+ * toggle pattern). Content inserted above the control would otherwise shove it
+ * down the viewport.
+ */
+function toggleWithScrollCompensation(
+  anchor: HTMLElement,
+  toggle: () => void,
+): void {
+  const scrollParent = findScrollParent(anchor);
+  const bottomBefore = anchor.getBoundingClientRect().bottom;
+  flushSync(toggle);
+  const delta = anchor.getBoundingClientRect().bottom - bottomBefore;
+  if (!scrollParent || Math.abs(delta) < 0.5) {
+    return;
+  }
+  scrollParent.scrollTop += delta;
+}
+
+export type { ActivityStep };
+
+/**
+ * Asks the owner of the payload for the untrimmed steps. Passed by context
+ * rather than props because all three collapsibles that can reveal a stripped
+ * row sit at different depths, and none of them otherwise needs the callback.
+ */
+const RequestFullDetailContext = createContext<(() => void) | undefined>(
+  undefined,
+);
+
+/**
+ * Opens a subagent's child thread by its `Agent` tool_use id. Provided by the
+ * chat surface that can show the thread; absent elsewhere, so subtask rows only
+ * offer "View" where it works.
+ */
+export const OpenSubagentContext = createContext<
+  ((toolUseId: string) => void) | undefined
+>(undefined);
+
+/** "View" link on a subtask row that opens its child thread. */
+function OpenSubagentButton({ toolUseId }: { toolUseId: string | undefined }) {
+  const open = useContext(OpenSubagentContext);
+  if (!open || !toolUseId) return null;
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        event.stopPropagation();
+        open(toolUseId);
+      }}
+      className="motion-press ml-auto flex shrink-0 items-center text-xs text-primary hover:underline active:scale-[0.97]"
+    >
+      View
+      <IconChevronRight aria-hidden className="size-3" />
+    </button>
+  );
+}
+
+/** `onOpenChange` handler that asks for the full payload the first time a fold opens. */
+function useRequestFullDetailOnOpen(): (open: boolean) => void {
+  const request = useContext(RequestFullDetailContext);
+  return (open: boolean) => {
+    if (open) request?.();
+  };
+}
+
+export interface ActivityTasksProps extends ComponentProps<"div"> {
+  steps: ActivityStep[];
+  isStreaming?: boolean;
+  name?: string;
+  icon?: ReactNode;
+  startedAt?: number;
+  duration?: string;
+  /** @deprecated Unused; kept so existing call sites compile unchanged. */
+  finalText?: string;
+  /**
+   * When provided, file chips with a known full path become clickable and call
+   * this with the path. Pass a stable callback — {@link ActivityTasks} is memoised.
+   */
+  onOpenFile?: (path: string) => void;
+  /**
+   * Called when a reader opens a fold that may contain step detail the
+   * transcript query stripped (see {@link ActivityStep.hasHiddenDetail}). Fires
+   * on every open, so the owner is responsible for fetching once.
+   */
+  onRequestFullDetail?: () => void;
+  /** Defaults to `folded`. See {@link ActivityLayout}. */
+  layout?: ActivityLayout;
+}
+
+/** Status glyph for one todo row. */
+function TodoStatusIcon({ status }: { status: ActivityTodoItem["status"] }) {
+  return (
+    <CrossfadeIconSlot
+      iconKey={status}
+      variant="soft"
+      className="relative mt-0.5 flex size-3.5 shrink-0 items-center justify-center"
+    >
+      {status === "completed" ? (
+        <IconCircleCheck className="size-3.5 text-primary" />
+      ) : status === "in_progress" ? (
+        <Spinner variant="circle" size="sm" className="size-3.5" />
+      ) : (
+        <IconCircle className="size-3.5 text-muted-foreground" />
+      )}
+    </CrossfadeIconSlot>
+  );
+}
+
+/** Renders a todo checklist, or a plain fallback line for legacy/empty snapshots. */
+function TodoChecklist({
+  todos,
+  fallback,
+}: {
+  todos: ActivityTodoItem[];
+  fallback: string;
+}) {
+  const merge = useCn();
+  if (todos.length === 0) {
+    return <p className="text-muted-foreground text-sm">{fallback}</p>;
+  }
+  return (
+    <ul className="flex flex-col gap-2">
+      {todos.map((todo, i) => (
+        <li
+          key={i}
+          className={merge(
+            "flex items-start gap-2 text-sm",
+            todo.status === "pending" && "opacity-60",
+          )}
+        >
+          <TodoStatusIcon status={todo.status} />
+          <span
+            className={merge(
+              "leading-snug",
+              todo.status === "completed" &&
+                "text-muted-foreground line-through",
+              todo.status === "in_progress" && "font-medium text-foreground",
+              todo.status === "pending" && "text-muted-foreground",
+            )}
+          >
+            {todo.content}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function bashIconForKind(kind: CommandVisualKind) {
+  if (kind === "inspect") return IconSearch;
+  if (kind === "git") return IconGitBranch;
+  return IconTerminal2;
+}
+
+/** Glyph for a step — shell steps swap in a glyph matching what they ran. */
+function iconForStep(step: ActivityStep) {
+  if (step.type === "bash" && step.detail) {
+    return bashIconForKind(resolveCommandVisualKind(step.detail));
+  }
+  return (activityStepConfig[step.type] ?? activityStepConfig.tool).icon;
+}
+
+function traceStatusForStep(step: ActivityStep): AgentTraceStatus | undefined {
+  if (step.isError) return "error";
+  if (step.status === "active") return "running";
+  if (step.status === "pending") return "pending";
+  return undefined;
+}
+
+/** Whole seconds a finished step took; undefined when unknown or under 1s. */
+function stepSeconds(step: ActivityStep): number | undefined {
+  if (step.status !== "complete" || !step.durationMs) return undefined;
+  const seconds = Math.round(step.durationMs / 1000);
+  return seconds >= 1 ? seconds : undefined;
+}
+
+/**
+ * One thinking block behind a "Thought  12s" line. Streaming steps open
+ * themselves so live thinking is readable as it lands, then auto-close.
+ */
+function ActivityReasoningLine({ step }: { step: ActivityStep }) {
+  const thoughts = step.detail?.trim() ?? "";
+  const isActive = step.status === "active";
+  const disclosure = useStreamingDisclosure(isActive);
+  const Markdown = useActivityMarkdown();
+  const seconds = stepSeconds(step);
+  const line = (
+    <AgentTraceLine status={isActive ? "running" : undefined}>
+      <AgentTraceIcon>
+        <IconBrain />
+      </AgentTraceIcon>
+      <AgentTraceTitle shimmer={isActive}>
+        {isActive ? "Thinking..." : "Thought"}
+      </AgentTraceTitle>
+      {seconds ? (
+        <AgentTraceDescription>{formatActivityElapsed(seconds)}</AgentTraceDescription>
+      ) : null}
+    </AgentTraceLine>
+  );
+  if (!thoughts) return line;
+  return (
+    <AgentTraceCollapsible open={disclosure.open} onOpenChange={disclosure.onOpenChange}>
+      <AgentTraceCollapsibleTrigger>{line}</AgentTraceCollapsibleTrigger>
+      <AgentTraceCollapsibleContent>
+        <Markdown className="text-sm">{thoughts}</Markdown>
+      </AgentTraceCollapsibleContent>
+    </AgentTraceCollapsible>
+  );
+}
+
+/** The to-do snapshot as one line with done/total, folding open to the checklist. */
+function ActivityTodosLine({ step }: { step: ActivityStep }) {
+  const isActive = step.status === "active";
+  const todos = step.todos ?? [];
+  const done = todos.filter((todo) => todo.status === "completed").length;
+  const presentation = deriveStepRowPresentation(step, isActive);
+  const Icon = activityStepConfig.todos.icon;
+  return (
+    <AgentTraceCollapsible defaultOpen={isActive}>
+      <AgentTraceCollapsibleTrigger>
+        <AgentTraceLine status={isActive ? "running" : undefined}>
+          <AgentTraceIcon>
+            <Icon />
+          </AgentTraceIcon>
+          <AgentTraceTitle shimmer={isActive}>{presentation.text}</AgentTraceTitle>
+          {todos.length > 0 ? (
+            <AgentTraceDescription>
+              {done}/{todos.length}
+            </AgentTraceDescription>
+          ) : null}
+        </AgentTraceLine>
+      </AgentTraceCollapsibleTrigger>
+      <AgentTraceCollapsibleContent>
+        <TodoChecklist todos={todos} fallback={step.detail ?? step.label} />
+      </AgentTraceCollapsibleContent>
+    </AgentTraceCollapsible>
+  );
+}
+
+/** One per-call activity line with Synara-style humanized label. */
+function ActivityStepRow({
+  row,
+  onOpenFile,
+}: {
+  row: ActivityRow;
+  onOpenFile?: (path: string) => void;
+}) {
+  const { step, children } = row;
+  const isActive = step.status === "active";
+  const presentation = deriveStepRowPresentation(step, isActive);
+  const requestFullDetail = useRequestFullDetailOnOpen();
+
+  if (step.type === "todos") return <ActivityTodosLine step={step} />;
+  if (step.type === "reasoning") return <ActivityReasoningLine step={step} />;
+
+  const Icon = iconForStep(step);
+  // A subagent's own text (`response` children) belongs to its child thread
+  // view, not the parent's timeline.
+  const childRows = (children ?? []).filter(
+    (child) => !HIDDEN_TYPES.has(child.step.type),
+  );
+  const openSubagent =
+    step.type === "subtask" ? (
+      <OpenSubagentButton toolUseId={step.toolUseId} />
+    ) : null;
+  const childOverflow = childRows.length - MAX_VISIBLE_CHILDREN;
+  const shownChildren =
+    childOverflow > 0 ? childRows.slice(0, MAX_VISIBLE_CHILDREN) : childRows;
+  const seconds = stepSeconds(step);
+  const description =
+    childRows.length > 0
+      ? `${childRows.length} ${childRows.length === 1 ? "step" : "steps"}`
+      : seconds
+        ? formatActivityElapsed(seconds)
+        : undefined;
+
+  const fileChip = presentation.fileChip ? (
+    <FileChip
+      name={presentation.fileChip.name}
+      path={presentation.fileChip.path}
+      onOpenFile={onOpenFile}
+    />
+  ) : undefined;
+  const lineHead = (
+    <>
+      <AgentTraceIcon iconKey={`${step.type}-${step.status}`}>
+        <Icon />
+      </AgentTraceIcon>
+      <AgentTraceTitle shimmer={isActive} title={presentation.title}>
+        {presentation.text}
+      </AgentTraceTitle>
+    </>
+  );
+  const descriptionNode = description ? (
+    <AgentTraceDescription>{description}</AgentTraceDescription>
+  ) : null;
+
+  const hasDetail = activityStepHasRichDetail(step);
+  if (!hasDetail && shownChildren.length === 0) {
+    return (
+      <AgentTraceLine status={traceStatusForStep(step)}>
+        {lineHead}
+        {fileChip}
+        {descriptionNode}
+        {openSubagent}
+      </AgentTraceLine>
+    );
+  }
+
+  // Subagent steps start open so their inner steps stay visible, as before.
+  return (
+    <AgentTraceCollapsible
+      defaultOpen={shownChildren.length > 0}
+      onOpenChange={requestFullDetail}
+    >
+      {/* The file chip opens the file viewer, so it sits beside the trigger:
+          a button inside the trigger button would be invalid HTML. */}
+      <AgentTraceCollapsibleTrigger
+        trailing={
+          fileChip || openSubagent ? (
+            <>
+              {fileChip}
+              {fileChip ? descriptionNode : null}
+              {openSubagent}
+            </>
+          ) : undefined
+        }
+      >
+        <AgentTraceLine status={traceStatusForStep(step)}>
+          {lineHead}
+          {fileChip ? null : descriptionNode}
+        </AgentTraceLine>
+      </AgentTraceCollapsibleTrigger>
+      <AgentTraceCollapsibleContent className="flex flex-col gap-2">
+        {hasDetail ? (
+          <ActivityStepDetail step={step} onOpenFile={onOpenFile} />
+        ) : null}
+        {shownChildren.map((child, i) => (
+          <ActivityStepRow
+            key={activityRowKey(child, i)}
+            row={child}
+            onOpenFile={onOpenFile}
+          />
+        ))}
+        {childOverflow > 0 ? (
+          <p className="text-xs text-muted-foreground">+{childOverflow} more</p>
+        ) : null}
+      </AgentTraceCollapsibleContent>
+    </AgentTraceCollapsible>
+  );
+}
+
+/** Model reasoning, shown as ordinary prose rather than another muted row. */
+/** Reply text the agent wrote between tool runs, set like the final reply. */
+function ActivityResponseBlock({ step }: { step: ActivityStep }) {
+  const Markdown = useActivityMarkdown();
+  const text = step.detail?.trim();
+  if (!text) return null;
+  return (
+    <Markdown
+      className="my-1 text-foreground"
+      mode={step.status === "active" ? "streaming" : "static"}
+    >
+      {text}
+    </Markdown>
+  );
+}
+
+function ActivityReasoningBlock({ step }: { step: ActivityStep }) {
+  const Markdown = useActivityMarkdown();
+  const thoughts = step.detail?.trim();
+  if (!thoughts) return null;
+  return (
+    <Markdown className="my-1 text-foreground text-sm leading-relaxed">
+      {thoughts}
+    </Markdown>
+  );
+}
+
+/** A run of tool calls, folded behind one muted "what happened" summary line. */
+function ActivityActionGroup({
+  rows,
+  onOpenFile,
+}: {
+  rows: ActivityRow[];
+  onOpenFile?: (path: string) => void;
+}) {
+  const steps = rows.map((row) => row.step);
+  const isActive = steps.some((step) => step.status === "active");
+  const summary = deriveActionGroupSummary(steps);
+  const firstStep = steps[0];
+  const Icon = firstStep ? iconForStep(firstStep) : IconTerminal2;
+  const requestFullDetail = useRequestFullDetailOnOpen();
+
+  return (
+    <AgentTraceCollapsible defaultOpen={isActive} onOpenChange={requestFullDetail}>
+      {/* Summary stays muted even when a call inside failed: agents run failing
+          commands on purpose, so one non-zero exit should not paint the run red.
+          The failed line itself is still red once the fold is open. */}
+      <AgentTraceCollapsibleTrigger>
+        <AgentTraceLine status={isActive ? "running" : undefined}>
+          <AgentTraceIcon iconKey={isActive ? "group-active" : "group-idle"}>
+            <Icon />
+          </AgentTraceIcon>
+          <AgentTraceTitle shimmer={isActive} title={summary}>
+            {summary}
+          </AgentTraceTitle>
+        </AgentTraceLine>
+      </AgentTraceCollapsibleTrigger>
+      <AgentTraceCollapsibleContent className="flex flex-col gap-2">
+        {rows.map((row, i) => (
+          <ActivityStepRow
+            key={activityRowKey(row, i)}
+            row={row}
+            onOpenFile={onOpenFile}
+          />
+        ))}
+      </AgentTraceCollapsibleContent>
+    </AgentTraceCollapsible>
+  );
+}
+
+function ActivitySegmentBlock({
+  segment,
+  onOpenFile,
+}: {
+  segment: ActivitySegment;
+  onOpenFile?: (path: string) => void;
+}) {
+  if (segment.kind === "reasoning") {
+    return <ActivityReasoningBlock step={segment.step} />;
+  }
+  if (segment.kind === "response") {
+    return <ActivityResponseBlock step={segment.step} />;
+  }
+  if (segment.kind === "row") {
+    return <ActivityStepRow row={segment.row} onOpenFile={onOpenFile} />;
+  }
+  return <ActivityActionGroup rows={segment.rows} onOpenFile={onOpenFile} />;
+}
+
+/**
+ * Renders timeline blocks with an overflow cap. Settled turns cap from the front
+ * (first N); streaming turns cap from the end (newest N) so latest stays visible.
+ */
+function ActivityRowList({
+  rows,
+  isStreaming,
+  capped,
+  onOpenFile,
+}: {
+  rows: ActivityRow[];
+  isStreaming?: boolean;
+  capped: boolean;
+  onOpenFile?: (path: string) => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const segments = groupActivityRows(rows);
+  const keyedSegments = segments.map((segment, index) => ({
+    segment,
+    key: activitySegmentKey(segment, index),
+  }));
+  const overflow = capped ? keyedSegments.length - MAX_VISIBLE_ROWS : 0;
+  const isCapped = overflow > 0 && !expanded;
+  const visible = isCapped
+    ? isStreaming
+      ? keyedSegments.slice(keyedSegments.length - MAX_VISIBLE_ROWS)
+      : keyedSegments.slice(0, MAX_VISIBLE_ROWS)
+    : keyedSegments;
+
+  const handleToggle = useCallback(() => {
+    const anchor = toggleRef.current;
+    if (!anchor) {
+      setExpanded((value) => !value);
+      return;
+    }
+    toggleWithScrollCompensation(anchor, () => {
+      setExpanded((value) => !value);
+    });
+  }, []);
+
+  const toggle =
+    overflow > 0 ? (
+      <OverflowToggle
+        ref={toggleRef}
+        expanded={expanded}
+        overflow={overflow}
+        onToggle={handleToggle}
+      />
+    ) : null;
+
+  return (
+    <>
+      {isStreaming && toggle}
+      {visible.map(({ segment, key }, index) => (
+        <m.div
+          key={key}
+          initial={{ opacity: 0, y: 6 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{
+            ...tokenTransition.fast,
+            delay: staggerDelay(index, 0.02, 0.08),
+          }}
+        >
+          <ActivitySegmentBlock segment={segment} onOpenFile={onOpenFile} />
+        </m.div>
+      ))}
+      {!isStreaming && toggle}
+    </>
+  );
+}
+
+function OverflowToggle({
+  ref,
+  expanded,
+  overflow,
+  onToggle,
+}: {
+  ref?: Ref<HTMLButtonElement>;
+  expanded: boolean;
+  overflow: number;
+  onToggle: () => void;
+}) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      onClick={onToggle}
+      className="w-fit text-muted-foreground text-sm transition-colors hover:text-foreground"
+    >
+      {expanded ? "Show less" : `Show ${overflow} more`}
+    </button>
+  );
+}
+
+export const ActivityTasks = memo(
+  ({
+    steps,
+    isStreaming,
+    name,
+    icon: _icon,
+    className,
+    startedAt,
+    duration,
+    finalText,
+    onOpenFile,
+    onRequestFullDetail,
+    layout = "folded",
+    ...props
+  }: ActivityTasksProps) => {
+    const merge = useCn();
+    const inline = layout === "inline";
+    const hiddenTypes = inline ? INLINE_HIDDEN_TYPES : HIDDEN_TYPES;
+    const rows = buildActivityRows(steps).filter(
+      (row) =>
+        !hiddenTypes.has(row.step.type) &&
+        // A subagent's text whose Agent row is missing still belongs to its
+        // child thread, never to the parent's inline reply.
+        !(row.step.type === "response" && row.step.parentToolUseId),
+    );
+
+    if (rows.length === 0 && !isStreaming) return null;
+
+    void finalText;
+
+    if (!isStreaming && duration && !inline) {
+      return (
+        <RequestFullDetailContext value={onRequestFullDetail}>
+          <Collapsible
+            className={merge("group text-sm", className)}
+            defaultOpen={false}
+            // Opening the turn prefetches the stripped detail, so the rows
+            // inside already have their bodies by the time one is clicked.
+            onOpenChange={(open) => {
+              if (open) onRequestFullDetail?.();
+            }}
+            {...props}
+          >
+            <div className="border-b border-border pb-1.5">
+              <AgentTraceCollapsibleTrigger>
+                <AgentTraceLine>
+                  <AgentTraceTitle>{`Worked for ${duration}`}</AgentTraceTitle>
+                </AgentTraceLine>
+              </AgentTraceCollapsibleTrigger>
+            </div>
+            <CollapsibleContent>
+              <AgentTrace className="mt-2">
+                <ActivityRowList
+                  rows={rows}
+                  isStreaming={false}
+                  capped
+                  onOpenFile={onOpenFile}
+                />
+              </AgentTrace>
+            </CollapsibleContent>
+          </Collapsible>
+        </RequestFullDetailContext>
+      );
+    }
+
+    return (
+      <RequestFullDetailContext value={onRequestFullDetail}>
+        <AgentTrace className={className} {...props}>
+          {isStreaming && rows.length === 0 ? (
+            <ActivityStreamingHeader
+              steps={steps}
+              name={name}
+              startedAt={startedAt}
+            />
+          ) : null}
+          <ActivityRowList
+            rows={rows}
+            isStreaming={isStreaming}
+            capped={!inline}
+            onOpenFile={onOpenFile}
+          />
+        </AgentTrace>
+      </RequestFullDetailContext>
+    );
+  },
+);
+
+ActivityTasks.displayName = "ActivityTasks";