@alia.onl/sdk 15.8.0 → 19.1.0

package/src/components/thought/ThoughtPanel.tsx

@@ -0,0 +1,417 @@
+import {
+  type AuditEntry,
+  type Message,
+  type Source,
+  type ThoughtStep,
+  type TurnLifecycle,
+  auditText,
+  buildAuditTimeline,
+  buildSteps,
+  extractOutputs,
+  extractSources,
+  isLiveLifecycle,
+  mergeSources,
+  researchSourcesToSources,
+  toolCallStatus,
+  toolCallText,
+  toolLabel,
+  turnLifecycle,
+} from '../../runtime/model';
+import { restoreOpenerFocus } from '../../lib/focus-return';
+import { useLabels } from '../../lib/labels';
+import { getToolIcon } from '../../lib/tool-icons';
+import { type ThoughtTab, useThoughtStore } from '../../runtime/thought-store';
+import { FilesAndSources, type OutputActions } from './FilesAndSources';
+import { ToolStep } from './ToolStep';
+import {
+  AgentLogRow,
+  AgentLogShimmerText,
+  AgentLogWorkingRow,
+  useAgentLogMotion,
+} from '@oxy.so/bloom/agent-log';
+import { useAiChatShell } from '@oxy.so/bloom/ai-chat';
+import { Button } from '@oxy.so/bloom/button';
+import { EmptyState } from '@oxy.so/bloom/empty-state';
+import { RiCheckboxCircleLine } from '@oxy.so/bloom/icons/RiCheckboxCircleLine';
+import { RiCloseCircleLine } from '@oxy.so/bloom/icons/RiCloseCircleLine';
+import { RiCloseLine } from '@oxy.so/bloom/icons/RiCloseLine';
+import { RiForbidLine } from '@oxy.so/bloom/icons/RiForbidLine';
+import { Loading } from '@oxy.so/bloom/loading';
+import { Tabs, TabsTrigger } from '@oxy.so/bloom/tabs';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Muted, Text } from '@oxy.so/bloom/typography';
+import * as WebBrowser from 'expo-web-browser';
+import { useCallback, useMemo, useState } from 'react';
+import { Platform, ScrollView, View } from 'react-native';
+
+/** One array for "nothing selected", so the memos below hold across renders. */
+const NO_MESSAGES: Message[] = [];
+
+function TabToggle({ value, onChange }: { value: ThoughtTab; onChange: (t: ThoughtTab) => void }) {
+  const { t } = useLabels();
+  const tabs: { key: ThoughtTab; label: string }[] = [
+    { key: 'steps', label: t('thought.steps') },
+    { key: 'sources', label: t('thought.sources') },
+    { key: 'activity', label: t('thought.activity') },
+  ];
+
+  return (
+    <Tabs variant="pill" value={value} onValueChange={(next) => onChange(next as ThoughtTab)}>
+      {tabs.map((tab) => (
+        <TabsTrigger key={tab.key} value={tab.key} label={tab.label} />
+      ))}
+    </Tabs>
+  );
+}
+
+/**
+ * The panel's own wording for every step that is not a tool. Tool steps keep
+ * the label the registry gave them; these are lifecycle words, and they are
+ * translated here rather than in `buildSteps` so the pure function stays free
+ * of the locale.
+ */
+const STEP_LABEL_KEYS: Record<Exclude<ThoughtStep['type'], 'tool'>, string> = {
+  thinking: 'thought.thinking',
+  writing: 'thought.writing',
+  done: 'thought.done',
+  failed: 'thought.failed',
+  cancelled: 'thought.cancelled',
+};
+
+/** A step that is a phase or an ending rather than a tool call. */
+type PhaseStep = Omit<ThoughtStep, 'type'> & {
+  type: Exclude<ThoughtStep['type'], 'tool'>;
+};
+
+/** The glyph of an ending; a phase that is working has none — the log's own shimmer says so. */
+function PhaseIcon({ type }: { type: PhaseStep['type'] }) {
+  const { colors } = useTheme();
+  if (type === 'done') return <RiCheckboxCircleLine size="sm" fill={colors.success} />;
+  if (type === 'failed') return <RiCloseCircleLine size="sm" fill={colors.error} />;
+  if (type === 'cancelled') return <RiForbidLine size="sm" fill={colors.textSecondary} />;
+  return null;
+}
+
+/** A phase or ending as one line of the log. Not a control: there is nothing to expand. */
+function PhaseRow({ step, isActive }: { step: PhaseStep; isActive: boolean }) {
+  const { t } = useLabels();
+  const label = t(STEP_LABEL_KEYS[step.type]);
+  const ending = step.type === 'done' || step.type === 'failed';
+  return (
+    <View className="flex-row items-center gap-1.5 py-1" accessible accessibilityLabel={label}>
+      <PhaseIcon type={step.type} />
+      <Text variant={ending ? 'body-medium' : 'body-regular'}>
+        {isActive ? <AgentLogShimmerText>{label}</AgentLogShimmerText> : label}
+      </Text>
+    </View>
+  );
+}
+
+/**
+ * The turn's steps as Bloom's agent log: each tool call a `ToolStep` whose
+ * input and output open in place, the phases and the ending as plain lines,
+ * and — while the turn is thinking or writing — the log's working row at the
+ * tail. Rows land as the runtime reports them, so the log is driven by real
+ * events rather than a ticker.
+ *
+ * A tool step spins on ITS OWN state while the turn runs — not on being last
+ * — so a finished tool after it cannot hide that it is still going, and a
+ * call that never returned in a turn that is over sits still and says so.
+ */
+function StepsTab({ steps, lifecycle }: { steps: ThoughtStep[]; lifecycle: TurnLifecycle }) {
+  const { t } = useLabels();
+  const { colors } = useTheme();
+  const reduce = useAgentLogMotion();
+  const live = isLiveLifecycle(lifecycle);
+  const [openRows, setOpenRows] = useState<Record<string, boolean>>({});
+
+  if (steps.length === 0) {
+    return <EmptyState variant="compact" description={t('thought.noSteps')} />;
+  }
+
+  const last = steps[steps.length - 1];
+  const tail = live && (last.type === 'thinking' || last.type === 'writing') ? last : null;
+  const rows = tail === null ? steps : steps.slice(0, -1);
+
+  return (
+    <View>
+      <View role="list">
+        {rows.map((step, index) => {
+          const first = index === 0;
+          const isLastRow = index === rows.length - 1;
+          if (step.type !== 'tool') {
+            return (
+              <AgentLogRow
+                key={`${step.type}-${index}`}
+                first={first}
+                last={isLastRow}
+                reduce={reduce}
+              >
+                <PhaseRow
+                  step={{ ...step, type: step.type }}
+                  isActive={live && isLastRow && tail === null}
+                />
+              </AgentLogRow>
+            );
+          }
+          const inv = step.invocation;
+          const key = inv?.toolCallId || `tool-${index}`;
+          const ToolIcon = getToolIcon(step.toolName || '');
+          const status =
+            inv === undefined ? (live ? 'running' : 'done') : toolCallStatus(inv, live);
+          return (
+            <AgentLogRow key={key} first={first} last={isLastRow} reduce={reduce}>
+              <ToolStep
+                title={step.toolName === undefined ? step.label : toolLabel(step.toolName, t)}
+                status={status}
+                icon={
+                  <ToolIcon
+                    width={14}
+                    height={14}
+                    fill={status === 'error' ? colors.error : colors.text}
+                  />
+                }
+                input={inv === undefined ? '' : toolCallText(inv.args)}
+                output={inv === undefined ? '' : toolCallText(inv.result)}
+                sources={step.sources}
+                expanded={openRows[key] === true}
+                onToggle={() => setOpenRows((open) => ({ ...open, [key]: open[key] !== true }))}
+              />
+            </AgentLogRow>
+          );
+        })}
+      </View>
+      {tail === null ? null : (
+        <AgentLogWorkingRow
+          label={t(STEP_LABEL_KEYS[tail.type as PhaseStep['type']])}
+          reduce={reduce}
+        />
+      )}
+    </View>
+  );
+}
+
+/** The conversation's audit trail as one agent log, oldest first. */
+function ActivityTab({ entries }: { entries: AuditEntry[] }) {
+  const { t } = useLabels();
+  const { colors } = useTheme();
+  const reduce = useAgentLogMotion();
+  if (entries.length === 0) {
+    return <EmptyState variant="compact" description={t('thought.noActivity')} />;
+  }
+
+  return (
+    <View role="list">
+      {entries.map((entry, index) => (
+        <AgentLogRow
+          key={entry.id}
+          first={index === 0}
+          last={index === entries.length - 1}
+          reduce={reduce}
+        >
+          <View className="py-1">
+            <View className="flex-row items-center gap-1.5">
+              {entry.status === 'interrupted' ? (
+                <RiForbidLine size="xs" fill={colors.textSecondary} />
+              ) : null}
+              <Text variant="body-regular" numberOfLines={1}>
+                {entry.status === 'in_progress' ? (
+                  <AgentLogShimmerText>{auditText(entry.label, t)}</AgentLogShimmerText>
+                ) : (
+                  auditText(entry.label, t)
+                )}
+              </Text>
+            </View>
+            {auditText(entry.description, t) ? (
+              <Muted numberOfLines={1}>{auditText(entry.description, t)}</Muted>
+            ) : null}
+          </View>
+        </AgentLogRow>
+      ))}
+    </View>
+  );
+}
+
+/**
+ * The panel has nothing to show for the selection, and the reason. Rendered
+ * in place of the tabs' content so the three tabs never each say "none" about
+ * a message whose data has simply not arrived.
+ */
+function SelectionState({ status }: { status: 'loading' | 'failed' | 'gone' }) {
+  const { t } = useLabels();
+  const key =
+    status === 'loading'
+      ? 'thought.loading'
+      : status === 'failed'
+        ? 'thought.loadFailed'
+        : 'thought.messageGone';
+  return (
+    <EmptyState
+      variant="compact"
+      illustration={status === 'loading' ? <Loading size="sm" iconSize={24} /> : undefined}
+      description={t(key)}
+    />
+  );
+}
+
+/** Open a source where the platform reads the web. */
+function openSource(source: Source): void {
+  if (Platform.OS === 'web') {
+    window.open(source.url, '_blank', 'noopener,noreferrer');
+  } else {
+    void WebBrowser.openBrowserAsync(source.url);
+  }
+}
+
+export interface ThoughtPanelProps {
+  /**
+   * The panel was closed (its button): the selection is already cleared and focus is back where
+   * it came from; the host hides the place it put the panel in.
+   */
+  onClose: () => void;
+  /** Where a generated file opens (the host's canvas). Omitted, outputs are listed and never pressable. */
+  outputActions?: OutputActions;
+}
+
+/**
+ * The execution panel: what the selected turn did, produced and read.
+ *
+ * The thread selects the turn (`useThoughtStore`) and the host decides where this panel goes
+ * (`AliaRuntimeHost.showThought`); closing hands focus back to whatever opened it.
+ *
+ * Everything shown comes from the selection's own scope and the lifecycle the
+ * runtime stamps (#542, #543): a message not yet loaded is "loading", a load
+ * that failed says so, a message cut out since is "gone", and none of them is
+ * ever "no steps".
+ */
+export function ThoughtPanel({ onClose, outputActions }: ThoughtPanelProps) {
+  const { colors } = useTheme();
+  const shell = useAiChatShell();
+  const { t } = useLabels();
+  const selection = useThoughtStore((s) => s.selection);
+  const setActiveTab = useThoughtStore((s) => s.setTab);
+  const closeSelection = useThoughtStore((s) => s.close);
+  const activeTab = selection?.tab ?? 'steps';
+  const thoughtMessageId = selection?.messageId;
+  const scope = selection?.scope ?? null;
+
+  /**
+   * The scope's messages are the conversation the selection was made in and
+   * nothing else — a screen showing another conversation never gets to write
+   * here (see `syncThoughtScope`), so a miss below is about THIS conversation:
+   * still loading, failed to load, or a message that has since been cut out
+   * of it by an edit or a regenerate.
+   */
+  const messages = scope?.messages ?? NO_MESSAGES;
+  const message = useMemo(
+    () => messages.find((m) => m.id === thoughtMessageId),
+    [messages, thoughtMessageId],
+  );
+
+  const lifecycle = useMemo<TurnLifecycle>(() => {
+    if (!message) return 'completed';
+    const lastAssistant = [...messages].reverse().find((m) => m.role === 'assistant');
+    return turnLifecycle(message, {
+      isLoading: scope?.isLoading ?? false,
+      isLastAssistant: lastAssistant?.id === message.id,
+      failedTurn: scope?.failedTurn ?? null,
+    });
+  }, [message, messages, scope?.isLoading, scope?.failedTurn]);
+
+  const steps = useMemo(
+    () => (message ? buildSteps(message, lifecycle) : []),
+    [message, lifecycle],
+  );
+
+  // A research answer's sources come from its persisted `deepResearch`
+  // invocation after a reload and from the live progress event before one;
+  // both are read so the tab is the same either way.
+  const sources = useMemo(
+    () =>
+      message
+        ? mergeSources(
+            extractSources(message.toolInvocations),
+            researchSourcesToSources(message.researchProgress?.sources),
+          )
+        : [],
+    [message],
+  );
+
+  const outputs = useMemo(
+    () => (message ? extractOutputs(message.toolInvocations) : []),
+    [message],
+  );
+
+  const auditEntries = useMemo(
+    () =>
+      buildAuditTimeline(messages, {
+        isLoading: scope?.isLoading ?? false,
+        failedTurn: scope?.failedTurn ?? null,
+      }),
+    [messages, scope?.isLoading, scope?.failedTurn],
+  );
+
+  const close = useCallback(() => {
+    closeSelection();
+    restoreOpenerFocus();
+    onClose();
+  }, [closeSelection, onClose]);
+
+  /**
+   * Which of the three things a missing message means. A message that IS
+   * here but whose conversation is still loading is shown as it is — the
+   * live turn is exactly that — so only a miss consults the status.
+   */
+  const emptyState: 'loading' | 'failed' | 'gone' | null =
+    message !== undefined
+      ? null
+      : scope === null || scope.status === 'loading'
+        ? 'loading'
+        : scope.status === 'failed'
+          ? 'failed'
+          : 'gone';
+
+  const content =
+    emptyState !== null ? (
+      <SelectionState status={emptyState} />
+    ) : activeTab === 'steps' ? (
+      <StepsTab steps={steps} lifecycle={lifecycle} />
+    ) : activeTab === 'sources' ? (
+      <FilesAndSources
+        outputs={outputs}
+        sources={sources}
+        outputActions={outputActions}
+        onOpenSource={openSource}
+      />
+    ) : (
+      <ActivityTab entries={auditEntries} />
+    );
+
+  return (
+    <View className="min-h-0 flex-1 gap-2.5 pt-2">
+      <View className="h-[30px] flex-row items-center justify-between">
+        <View className="min-w-0 shrink">
+          <TabToggle value={activeTab} onChange={setActiveTab} />
+        </View>
+        {!shell?.compact && (
+          <Button
+            appearance="plain"
+            tone="neutral"
+            size="xs"
+            accessibilityLabel={t('common.close')}
+            onPress={close}
+            icon={<RiCloseLine size="sm" fill={colors.textSecondary} />}
+          />
+        )}
+      </View>
+
+      <ScrollView
+        className="flex-1 px-4"
+        contentContainerClassName="pb-4"
+        showsVerticalScrollIndicator={false}
+      >
+        {content}
+      </ScrollView>
+    </View>
+  );
+}

package/src/components/thought/ToolStep.tsx

@@ -0,0 +1,141 @@
+import { useLabels } from '../../lib/labels';
+import type { Source, ToolCallStatus } from '../../runtime/model';
+import { Chip } from '@oxy.so/bloom/chip';
+import { CodeBlock } from '@oxy.so/bloom/code';
+import { RiArrowDownSLine } from '@oxy.so/bloom/icons/RiArrowDownSLine';
+import { RiArrowRightSLine } from '@oxy.so/bloom/icons/RiArrowRightSLine';
+import { RiGlobalLine } from '@oxy.so/bloom/icons/RiGlobalLine';
+import { Item } from '@oxy.so/bloom/item';
+import { Loading } from '@oxy.so/bloom/loading';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Muted } from '@oxy.so/bloom/typography';
+import * as Clipboard from 'expo-clipboard';
+import type { ReactNode } from 'react';
+import { ScrollView, View } from 'react-native';
+
+/**
+ * One execution row: a tool call, its state, and — expanded — what went in
+ * and what came out.
+ *
+ * The row is Bloom's `Item` as a disclosure (`expanded`), the two blocks are
+ * Bloom's `CodeBlock`, and a search step's domains are `Chip`s. The expanded
+ * block is MOUNTED only while expanded, so nothing inside a collapsed row can
+ * hold focus.
+ *
+ * Status is read from the lifecycle, never from the row being last: a call
+ * that never returned in a turn that is over reads as interrupted, and a call
+ * whose result carries an error reads as an error, so an execution list never
+ * says "done" about work that did not finish.
+ */
+export interface ToolStepProps {
+  title: string;
+  /** The call's argument summary, printed muted under the title. */
+  description?: string;
+  status: ToolCallStatus;
+  /** The tool's icon, drawn in the leading slot while the call is not running. */
+  icon: ReactNode;
+  /** The call's arguments as text; empty hides the block. */
+  input: string;
+  /** The call's result as text; empty hides the block. */
+  output: string;
+  /** The web sources a search step returned, drawn as domain chips under the block. */
+  sources?: Source[];
+  expanded: boolean;
+  onToggle: () => void;
+}
+
+/** How many domain chips a search step shows before it counts the rest. */
+const CHIP_LIMIT = 3;
+
+async function copy(code: string) {
+  await Clipboard.setStringAsync(code);
+}
+
+export function ToolStep({
+  title,
+  description,
+  status,
+  icon,
+  input,
+  output,
+  sources,
+  expanded,
+  onToggle,
+}: ToolStepProps) {
+  const { t } = useLabels();
+  const { colors } = useTheme();
+  const chips = sources ? sources.slice(0, CHIP_LIMIT) : [];
+  const extra = sources ? Math.max(0, sources.length - CHIP_LIMIT) : 0;
+  const statusWord =
+    status === 'error'
+      ? t('thought.failed')
+      : status === 'interrupted'
+        ? t('thought.cancelled')
+        : null;
+  const Chevron = expanded ? RiArrowDownSLine : RiArrowRightSLine;
+  const labels = { copy: t('panels.code.copy'), copied: t('panels.code.copied') };
+
+  return (
+    <View>
+      <Item
+        density="compact"
+        leading={status === 'running' ? <Loading size="sm" iconSize={14} /> : icon}
+        title={title}
+        subtitle={description}
+        destructive={status === 'error'}
+        trailing={
+          <View className="flex-row items-center gap-1.5">
+            {statusWord === null ? null : <Muted>{statusWord}</Muted>}
+            <Chevron size="sm" fill={colors.textSecondary} />
+          </View>
+        }
+        expanded={expanded}
+        onPress={onToggle}
+        accessibilityLabel={statusWord === null ? title : `${title}, ${statusWord}`}
+      />
+
+      {expanded ? (
+        <View className="gap-2 pb-2">
+          {input.length > 0 || output.length > 0 ? (
+            <ScrollView
+              className="max-h-[200px]"
+              contentContainerClassName="gap-2"
+              nestedScrollEnabled
+            >
+              {input.length > 0 ? (
+                <CodeBlock
+                  code={input}
+                  filename={t('thought.input')}
+                  lineNumbers={false}
+                  wrap
+                  onCopy={copy}
+                  labels={labels}
+                />
+              ) : null}
+              {output.length > 0 ? (
+                <CodeBlock
+                  code={output}
+                  filename={t('thought.output')}
+                  lineNumbers={false}
+                  wrap
+                  onCopy={copy}
+                  labels={labels}
+                />
+              ) : null}
+            </ScrollView>
+          ) : null}
+          {chips.length > 0 ? (
+            <View className="flex-row flex-wrap gap-1.5">
+              {chips.map((source) => (
+                <Chip key={source.url} size="sm" leadingIcon={RiGlobalLine}>
+                  {source.domain}
+                </Chip>
+              ))}
+              {extra > 0 ? <Chip size="sm">{`+ ${extra}`}</Chip> : null}
+            </View>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/thread/AgentResultCard.tsx

@@ -0,0 +1,125 @@
+import type { AgentActivityState, PlanItem } from '../../runtime/thread/agent-activity';
+import { useLabels } from '../../lib/labels';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@oxy.so/bloom/accordion';
+import { Admonition } from '@oxy.so/bloom/admonition';
+import { Badge } from '@oxy.so/bloom/badge';
+import { Card, CardBody, CardHeader } from '@oxy.so/bloom/card';
+import { RiAlertLine } from '@oxy.so/bloom/icons/RiAlertLine';
+import { RiCheckboxCircleLine } from '@oxy.so/bloom/icons/RiCheckboxCircleLine';
+import { RiCloseCircleLine } from '@oxy.so/bloom/icons/RiCloseCircleLine';
+import { Item } from '@oxy.so/bloom/item';
+import { Muted, Text } from '@oxy.so/bloom/typography';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+
+/**
+ * AgentResultCard — the summary an agent run leaves in the chat when it ends.
+ *
+ * A Bloom `Card`: the outcome as a `Badge` beside the heading, the run's
+ * numbers in one secondary line, an error as an `Admonition`, and the plan as
+ * an `Accordion` section.
+ */
+
+interface AgentResultCardProps {
+  activity: AgentActivityState;
+  agentName?: string;
+}
+
+/** `42s`, `3m 5s`, `1h 2m` — how long the run took. */
+export function formatRunDuration(startedAt: number | null, now: number): string {
+  if (!startedAt) return '--';
+  const seconds = Math.max(0, Math.floor((now - startedAt) / 1000));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ${seconds % 60}s`;
+  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+}
+
+const PLAN_ICON = {
+  completed: RiCheckboxCircleLine,
+  blocked: RiAlertLine,
+} as const;
+
+function PlanItemRow({ item }: { item: PlanItem }) {
+  const Icon = PLAN_ICON[item.status as keyof typeof PLAN_ICON] ?? RiCloseCircleLine;
+  return <Item density="compact" role="listitem" leading={<Icon size="sm" />} title={item.text} />;
+}
+
+export const AgentResultCard = React.memo(function AgentResultCard({
+  activity,
+  agentName,
+}: AgentResultCardProps) {
+  const { t } = useLabels();
+  const [open, setOpen] = useState<string[]>([]);
+  // Measured once, when the card first draws the finished run.
+  const [now] = useState(() => Date.now());
+
+  const { plan, isComplete, hasError, lastError, eventCount, startedAt } = activity;
+  const isSuccess = isComplete && !hasError;
+
+  const stats = [
+    formatRunDuration(startedAt, now),
+    t('chat.agentRun.steps', { count: String(eventCount) }),
+    plan
+      ? t('chat.agentRun.planItems', { done: String(plan.completed), total: String(plan.total) })
+      : null,
+    activity.creditsCharged != null
+      ? t('chat.agentRun.credits', { count: String(activity.creditsCharged) })
+      : null,
+  ].filter((part): part is string => part !== null);
+
+  return (
+    <Card>
+      <CardHeader>
+        <View className="flex-row items-center gap-2">
+          <Badge
+            variant="subtle"
+            color={isSuccess ? 'success' : hasError ? 'error' : 'default'}
+            content={t(
+              isSuccess
+                ? 'chat.agentRun.completed'
+                : hasError
+                  ? 'chat.agentRun.failed'
+                  : 'chat.agentRun.unknown',
+            )}
+          />
+          <View className="min-w-0 flex-1">
+            <Text variant="headline-semibold">
+              {t(isSuccess ? 'chat.agentRun.taskComplete' : 'chat.agentRun.taskFailed')}
+            </Text>
+            {agentName ? <Muted>{t('chat.agentRun.by', { name: agentName })}</Muted> : null}
+          </View>
+        </View>
+      </CardHeader>
+      <CardBody>
+        <View className="gap-3">
+          <Muted>{stats.join(' · ')}</Muted>
+
+          {hasError && lastError ? <Admonition type="error">{lastError}</Admonition> : null}
+
+          {plan && plan.items.length > 0 ? (
+            <Accordion
+              type="multiple"
+              value={open}
+              onValueChange={(next) => setOpen(Array.isArray(next) ? next : next ? [next] : [])}
+            >
+              <AccordionItem value="plan">
+                <AccordionTrigger>{t('chat.agentRun.planSummary')}</AccordionTrigger>
+                <AccordionContent>
+                  {plan.items.map((item) => (
+                    <PlanItemRow key={item.id} item={item} />
+                  ))}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          ) : null}
+        </View>
+      </CardBody>
+    </Card>
+  );
+});