@miiflow/assistant-ui 0.7.0 → 0.10.0

package/dist/styled/index.d.ts

@@ -1,14 +1,32 @@
-export { A as AttachmentPreview, j as AttachmentPreviewProps, a as Avatar, k as AvatarProps, C as ChatContainer, l as ChatContainerProps, b as ChatLayout, m as ChatLayoutProps, M as MarkdownContent, n as MarkdownContentProps, c as Message, d as MessageActionBar, o as MessageActionBarProps, e as MessageComposer, p as MessageComposerProps, f as MessageList, q as MessageListProps, r as MessageProps, S as ScrollToBottomButton, s as ScrollToBottomButtonProps, g as StreamingText, t as StreamingTextProps, h as SuggestedActions, u as SuggestedActionsProps, v as ToolStatus, T as ToolStatusIndicator, w as ToolStatusIndicatorProps, i as TypingIndicator, x as TypingIndicatorProps, W as WelcomeScreen, y as WelcomeScreenProps } from '../WelcomeScreen-XVZqMpVW.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import react__default, { ComponentType, ReactNode } from 'react';
-import { A as Attachment, S as SourceReference } from '../message-BrHFdwb2.js';
-export { C as ChatMessage, M as MessageData, a as MessageError, b as Participant, P as ParticipantRole, c as SourceTypeConfig, d as SuggestedAction, e as SuggestedActionType } from '../message-BrHFdwb2.js';
-import { S as StreamingChunk, P as PlanData, C as ClarificationData, T as ToolApprovalData, V as VisualizationChunkData, d as VisualizationActionEvent, M as MediaChunkData, e as ChartVisualizationData, f as VisualizationConfig, g as TableVisualizationData, h as CardVisualizationData, K as KpiVisualizationData, i as CodePreviewVisualizationData, F as FormVisualizationData, A as ArtifactChunkData, E as Event, j as EventStatus } from '../streaming-DURrv9_E.js';
-export { k as ArtifactStatus, l as ChunkType, m as ClaudeToolChunkData, n as EventType, o as FileOperationChunkData, p as FollowupAction, O as ObservationEvent, q as ParallelSubtaskData, r as PlanningEvent, s as ProgressData, t as SearchResultsChunkData, u as StreamingMessage, v as SubTaskData, w as SubagentChunkData, x as SubagentInfo, y as SubtaskEvent, z as TerminalChunkData, B as ThinkingEvent, D as ToolEvent, G as VisualizationType, W as WaveData, H as WebOperationChunkData } from '../streaming-DURrv9_E.js';
+export { A as AttachmentPreview, j as AttachmentPreviewProps, a as Avatar, k as AvatarProps, C as ChatContainer, l as ChatContainerProps, b as ChatLayout, m as ChatLayoutProps, M as MarkdownContent, n as MarkdownContentProps, c as Message, d as MessageActionBar, o as MessageActionBarProps, e as MessageComposer, p as MessageComposerProps, f as MessageList, q as MessageListProps, r as MessageProps, S as ScrollToBottomButton, s as ScrollToBottomButtonProps, g as StreamingText, t as StreamingTextProps, h as SuggestedActions, u as SuggestedActionsProps, v as ToolStatus, T as ToolStatusIndicator, w as ToolStatusIndicatorProps, i as TypingIndicator, x as TypingIndicatorProps, W as WelcomeScreen, y as WelcomeScreenProps } from '../WelcomeScreen-Cbipi2rK.js';
+import * as react from 'react';
+import react__default, { ReactNode, ComponentType } from 'react';
+import { A as Attachment, S as SourceReference } from '../message-D0oMw3tR.js';
+export { C as ChatMessage, M as MessageData, a as MessageError, b as Participant, P as ParticipantRole, c as SourceTypeConfig, d as SuggestedAction, e as SuggestedActionType } from '../message-D0oMw3tR.js';
+import { S as StreamingChunk, P as PlanData, C as ClarificationData, a as ClarificationAnswer, T as ToolApprovalData, V as VisualizationChunkData, f as VisualizationActionEvent, M as MediaChunkData, g as ChartVisualizationData, h as VisualizationConfig, i as TableVisualizationData, j as CardVisualizationData, K as KpiVisualizationData, k as CodePreviewVisualizationData, F as FormVisualizationData, A as ArtifactChunkData, E as Event, l as EventStatus } from '../streaming-CmQo_OOA.js';
+export { m as ArtifactStatus, n as ChunkType, o as EventType, p as FollowupAction, O as ObservationEvent, q as PlanningEvent, r as ProgressData, s as StreamingMessage, t as SubTaskData, u as SubagentChunkData, v as SubtaskEvent, w as ThinkingEvent, x as ToolEvent, y as VisualizationType } from '../streaming-CmQo_OOA.js';
 import { z, ZodSchema } from 'zod';
 export { ChatContextValue, ChatProvider, ChatProviderProps, useChatContext } from '../context/index.js';
-export { B as BrandingData } from '../branding-SzYU4ncD.js';
-export { u as useComposer, g as useMessage } from '../avatar-C13xc3tA.js';
+export { B as BrandingData } from '../branding-NieTEGQf.js';
+export { u as useComposer, g as useMessage } from '../avatar-CD685KQV.js';
+import '../types-Du00UBst.js';
+
+/**
+ * Bottom toolbar row for composers: attach button, an Enter-to-send hint that
+ * fades in while the composer is focused (requires `group` on the shell), and
+ * a trailing slot for the send/stop button.
+ */
+declare function ComposerToolbar({ onAttachClick, disabled, hint, showHint, endSlot, className, }: {
+    /** Renders the "+" attach button when provided. */
+    onAttachClick?: () => void;
+    disabled?: boolean;
+    /** Keyboard hint shown while focused. Pass showHint={false} to hide. */
+    hint?: string;
+    showHint?: boolean;
+    /** Send / stop button. */
+    endSlot?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
 
 interface LoadingDotsProps {
     /** Size variant */
@@ -19,7 +37,7 @@ interface LoadingDotsProps {
 /**
  * Animated loading dots indicator
  */
-declare function LoadingDots({ size, className }: LoadingDotsProps): react_jsx_runtime.JSX.Element;
+declare function LoadingDots({ size, className }: LoadingDotsProps): react.JSX.Element;
 
 interface TimeMarkerProps {
     /** The label to display (e.g. "Today", "Yesterday", "Monday") */
@@ -31,7 +49,7 @@ interface TimeMarkerProps {
  * Centered time separator between message groups.
  * Displays a label like "Today" or "Yesterday" with horizontal rules.
  */
-declare function TimeMarker({ label, className }: TimeMarkerProps): react_jsx_runtime.JSX.Element;
+declare function TimeMarker({ label, className }: TimeMarkerProps): react.JSX.Element;
 
 interface ChatHeaderAction {
     id: string;
@@ -60,7 +78,7 @@ interface ChatHeaderProps {
     /** Custom styles via CSS variables */
     style?: react__default.CSSProperties;
 }
-declare function ChatHeader({ title, subtitle, logo, actions, showClose, onClose, loading, className, style, }: ChatHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ChatHeader({ title, subtitle, logo, actions, showClose, onClose, loading, className, style, }: ChatHeaderProps): react__default.JSX.Element;
 
 interface MessageAttachmentsProps {
     /** List of attachments to display */
@@ -75,14 +93,15 @@ interface MessageAttachmentsProps {
 /**
  * Display attachments (images, videos, documents) in messages
  */
-declare function MessageAttachments({ attachments, onDownload, onPreview, className, }: MessageAttachmentsProps): react_jsx_runtime.JSX.Element | null;
+declare function MessageAttachments({ attachments, onDownload, onPreview, className, }: MessageAttachmentsProps): react.JSX.Element | null;
 
 interface ReasoningPanelProps {
     /** Whether currently streaming */
     isStreaming?: boolean;
     /** Streaming chunks */
     chunks?: StreamingChunk[];
-    /** Execution plan for Plan & Execute mode */
+    /** Execution plan persisted on completed messages (historical messages only —
+     *  new streams persist the plan as plain text without subtasks). */
     plan?: PlanData;
     /** Execution timeline (completed messages) */
     executionTimeline?: any[];
@@ -99,35 +118,86 @@ interface ReasoningPanelProps {
     /** Additional class names */
     className?: string;
 }
-declare function ReasoningPanel({ isStreaming, chunks, plan, executionTimeline, userMessageTimestamp, executionTime, defaultExpanded, expanded: controlledExpanded, onExpandedChange, className, }: ReasoningPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function ReasoningPanel({ isStreaming, chunks, plan, executionTimeline, userMessageTimestamp, executionTime, defaultExpanded, expanded: controlledExpanded, onExpandedChange, className, }: ReasoningPanelProps): react.JSX.Element | null;
 
 interface ClarificationPanelProps {
     clarification: ClarificationData;
-    onSubmit: (response: string) => void;
+    /**
+     * Called on submit with both the human-readable text (for the transcript) AND
+     * the structured per-question answers (for deterministic server-side capture —
+     * no parsing of the text).
+     */
+    onSubmit?: (response: string, answers: ClarificationAnswer[]) => void;
+    /** Best-effort callback fired when an option is selected (legacy hook). */
     onOptionSelect?: (option: string) => void;
     disabled?: boolean;
     loading?: boolean;
     className?: string;
+    /**
+     * When set, renders a read-only "answered" state showing the user's response
+     * inline. Used in scrolled-back chat history so a past clarification still
+     * shows what was answered.
+     */
+    answer?: string;
 }
 /**
- * Stateless clarification panel - displays when the AI agent needs user input.
- * Orange left-border panel with question, radio options, and free-text input.
+ * Clarification panel — displays when the agent needs the user to pick from
+ * one or more multiple-choice questions. Orange left-border panel.
+ *
+ * If `answer` is provided, switches to a read-only "answered" view.
  */
-declare function ClarificationPanel({ clarification, onSubmit, onOptionSelect, disabled, loading, className, }: ClarificationPanelProps): react_jsx_runtime.JSX.Element;
+declare function ClarificationPanel({ clarification, onSubmit, onOptionSelect, disabled, loading, className, answer, }: ClarificationPanelProps): react.JSX.Element | null;
 
+interface ApprovalButtonSlotProps {
+    onClick: () => void;
+    disabled?: boolean;
+    children: ReactNode;
+}
+interface ApprovalChatInputSlotProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    onCancel: () => void;
+    placeholder: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+}
+interface ToolApprovalSlots {
+    AllowButton?: ComponentType<ApprovalButtonSlotProps>;
+    RejectButton?: ComponentType<ApprovalButtonSlotProps>;
+    ChatButton?: ComponentType<ApprovalButtonSlotProps>;
+    SendButton?: ComponentType<ApprovalButtonSlotProps>;
+    CancelButton?: ComponentType<ApprovalButtonSlotProps>;
+    ChatInput?: ComponentType<ApprovalChatInputSlotProps>;
+}
 interface ToolApprovalPanelProps {
     approval: ToolApprovalData;
     onApprove: (modifiedInputs: Record<string, unknown>) => void;
     onReject: (reason?: string) => void;
     disabled?: boolean;
     className?: string;
+    /**
+     * Per-action component overrides. Pass any subset; unspecified slots fall
+     * back to the library's default Tailwind-styled renderings. Use this to
+     * align buttons and input with a host app's brand system.
+     */
+    slots?: ToolApprovalSlots;
 }
 /**
- * Tool approval panel - displays when the AI agent needs user approval before
- * executing a tool. Shows tool summary, editable parameters, and approve/reject actions.
- * Amber left-border panel (distinguished from orange clarification panel).
+ * Tool approval — rendered as a raised CTA above the composer to communicate
+ * that the agent is paused on a decision. Anatomy:
+ *
+ *   ┌─ Approve action ─ <tool identity> ─────────────────────┐
+ *   │  <agent's prompt sentence>                              │
+ *   │  [param: value]  [param: value]                         │
+ *   │  [ Approve ]  [ Decline ]    ⏎ approve · Esc decline    │
+ *   │  Show all details                                       │
+ *   └─────────────────────────────────────────────────────────┘
+ *
+ * Buttons and the chat input are slottable via the `slots` prop so host apps
+ * can swap in their own brand-aligned components.
  */
-declare function ToolApprovalPanel({ approval, onApprove, onReject, disabled, className, }: ToolApprovalPanelProps): react_jsx_runtime.JSX.Element;
+declare function ToolApprovalPanel({ approval, onApprove, onReject, disabled, className, slots, }: ToolApprovalPanelProps): react.JSX.Element;
 
 interface CitationSourcesProps {
     sources: SourceReference[];
@@ -137,12 +207,12 @@ interface CitationSourcesProps {
  * Renders citation sources as a horizontal row of clickable chips.
  * Clicking a chip opens a modal showing full source content.
  */
-declare function CitationSources({ sources, className, }: CitationSourcesProps): react_jsx_runtime.JSX.Element | null;
+declare function CitationSources({ sources, className, }: CitationSourcesProps): react.JSX.Element | null;
 interface SourceDetailModalProps {
     source: SourceReference | null;
     onClose: () => void;
 }
-declare function SourceDetailModal({ source, onClose, }: SourceDetailModalProps): react_jsx_runtime.JSX.Element | null;
+declare function SourceDetailModal({ source, onClose, }: SourceDetailModalProps): react.JSX.Element | null;
 /**
  * Inline citation badge - renders a small numbered badge like [1]
  * with optional tooltip on hover and click-to-open URL.
@@ -151,37 +221,18 @@ interface InlineCitationProps {
     index: number;
     source?: SourceReference;
 }
-declare function InlineCitation({ index, source }: InlineCitationProps): react_jsx_runtime.JSX.Element;
-
-interface ClaudeToolPreviewProps {
-    chunk: StreamingChunk;
-}
-declare function ClaudeToolPreview({ chunk }: ClaudeToolPreviewProps): react_jsx_runtime.JSX.Element | null;
-
-interface TerminalOutputProps {
-    chunk: StreamingChunk;
-}
-declare function TerminalOutput({ chunk }: TerminalOutputProps): react_jsx_runtime.JSX.Element | null;
-
-interface FileOperationPreviewProps {
-    chunk: StreamingChunk;
-}
-declare function FileOperationPreview({ chunk }: FileOperationPreviewProps): react_jsx_runtime.JSX.Element | null;
-
-interface SearchResultsViewProps {
-    chunk: StreamingChunk;
-}
-declare function SearchResultsView({ chunk }: SearchResultsViewProps): react_jsx_runtime.JSX.Element | null;
-
-interface WebOperationPreviewProps {
-    chunk: StreamingChunk;
-}
-declare function WebOperationPreview({ chunk }: WebOperationPreviewProps): react_jsx_runtime.JSX.Element | null;
+declare function InlineCitation({ index, source }: InlineCitationProps): react.JSX.Element;
 
 interface SubagentPanelProps {
     chunk: StreamingChunk;
 }
-declare function SubagentPanel({ chunk }: SubagentPanelProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Renders a single sub-assistant dispatch as one row in a `Timeline` —
+ * label + description + duration + chevron — matching plan subtasks and
+ * multi-agent rows. Nested chunks (thinking/tool/observation/sub-assistant)
+ * render as an indented `EventTimeline` underneath.
+ */
+declare function SubagentPanel({ chunk }: SubagentPanelProps): react.JSX.Element | null;
 
 declare const chartVisualizationSchema: z.ZodObject<{
     chartType: z.ZodEnum<{
@@ -287,6 +338,7 @@ declare const kpiVisualizationSchema: z.ZodObject<{
     layout: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
         row: "row";
         grid: "grid";
+        bento: "bento";
     }>>>;
 }, z.core.$strip>;
 declare const codePreviewVisualizationSchema: z.ZodObject<{
@@ -336,14 +388,14 @@ interface VisualizationRendererProps {
     /** Message-level media bag used to resolve `media_ref:<id>` cell values. */
     medias?: MediaChunkData[];
 }
-declare function VisualizationRenderer({ data, isStreaming, onAction, medias, }: VisualizationRendererProps): react_jsx_runtime.JSX.Element;
+declare function VisualizationRenderer({ data, isStreaming, onAction, medias, }: VisualizationRendererProps): react.JSX.Element;
 
 interface ChartVisualizationProps {
     data: ChartVisualizationData;
     config?: VisualizationConfig;
     isStreaming?: boolean;
 }
-declare function ChartVisualization({ data, config, isStreaming }: ChartVisualizationProps): react_jsx_runtime.JSX.Element;
+declare function ChartVisualization({ data, config, isStreaming }: ChartVisualizationProps): react.JSX.Element;
 
 interface TableVisualizationProps {
     data: TableVisualizationData;
@@ -352,7 +404,7 @@ interface TableVisualizationProps {
     /** Message-level media bag used to resolve `media_ref:<id>` cell values. */
     medias?: MediaChunkData[];
 }
-declare function TableVisualization({ data, config, medias }: TableVisualizationProps): react_jsx_runtime.JSX.Element;
+declare function TableVisualization({ data, config, medias }: TableVisualizationProps): react.JSX.Element;
 
 interface CardVisualizationProps {
     data: CardVisualizationData;
@@ -360,21 +412,21 @@ interface CardVisualizationProps {
     isStreaming?: boolean;
     onAction?: (event: VisualizationActionEvent) => void;
 }
-declare function CardVisualization({ data, config, onAction }: CardVisualizationProps): react_jsx_runtime.JSX.Element;
+declare function CardVisualization({ data, config, onAction }: CardVisualizationProps): react.JSX.Element;
 
 interface KpiVisualizationProps {
     data: KpiVisualizationData;
     config?: VisualizationConfig;
     isStreaming?: boolean;
 }
-declare function KpiVisualization({ data, config, isStreaming }: KpiVisualizationProps): react_jsx_runtime.JSX.Element;
+declare function KpiVisualization({ data, config, isStreaming }: KpiVisualizationProps): react.JSX.Element;
 
 interface CodePreviewVisualizationProps {
     data: CodePreviewVisualizationData;
     config?: VisualizationConfig;
     isStreaming?: boolean;
 }
-declare function CodePreviewVisualization({ data }: CodePreviewVisualizationProps): react_jsx_runtime.JSX.Element;
+declare function CodePreviewVisualization({ data }: CodePreviewVisualizationProps): react.JSX.Element;
 
 interface FormVisualizationProps {
     data: FormVisualizationData;
@@ -382,7 +434,7 @@ interface FormVisualizationProps {
     isStreaming?: boolean;
     onAction?: (event: VisualizationActionEvent) => void;
 }
-declare function FormVisualization({ data, config, isStreaming, onAction }: FormVisualizationProps): react_jsx_runtime.JSX.Element;
+declare function FormVisualization({ data, config, isStreaming, onAction }: FormVisualizationProps): react.JSX.Element;
 
 interface VisualizationEntry {
     component: React.ComponentType<{
@@ -419,7 +471,7 @@ interface ArtifactInlineCardProps {
  * shipped with the chat-ui package so headless / embedded consumers still
  * render something when a tool emits an artifact.
  */
-declare function ArtifactInlineCard({ artifact, isStreaming, onOpen, }: ArtifactInlineCardProps): react_jsx_runtime.JSX.Element;
+declare function ArtifactInlineCard({ artifact, isStreaming, onOpen, }: ArtifactInlineCardProps): react.JSX.Element;
 
 interface ArtifactListProps {
     artifacts: ArtifactChunkData[];
@@ -430,7 +482,7 @@ interface ArtifactListProps {
  * Renders one inline card per artifact using the registered renderer when
  * available; falls back to the unstyled `ArtifactInlineCard` otherwise.
  */
-declare function ArtifactList({ artifacts, isStreaming, onOpen, }: ArtifactListProps): react_jsx_runtime.JSX.Element | null;
+declare function ArtifactList({ artifacts, isStreaming, onOpen, }: ArtifactListProps): react.JSX.Element | null;
 
 /**
  * Shape of a registered artifact type.
@@ -467,24 +519,38 @@ declare function getRegisteredArtifactTypes(): string[];
 interface EventContentProps {
     event: Event;
     className?: string;
-    /** When true, shows beamer scanning effect on tool items */
+    /** Active state — drives the trailing caret on tool calls. */
     isRunning?: boolean;
+    /**
+     * Slowest duration in the surrounding timeline. Used to scale this row's
+     * trailing micro-bar so the panel reads as a proportional trace.
+     */
+    maxDurationSeconds?: number;
 }
 /**
- * Renders content for different event types
- * - Thinking: Markdown content with subtle styling
- * - Planning: Markdown content with planning context
- * - Tool: Inline icon + text display with beamer effect when running
- * - Observation: Colored result panel
+ * Refreshed event content.
+ *
+ * - Thinking / planning render as prose at 78% ink with relaxed leading;
+ *   active rows bump to weight 500 so the eye lands on live content.
+ * - Tool calls render as an inline monospace tag. The redundant inner dot
+ *   is gone (the rail badge already conveys state at the same y); a soft
+ *   caret blinks at the trailing edge while running.
+ * - Completed rows get a right-aligned duration with a proportional micro-
+ *   bar — the panel reads as a tiny trace.
+ * - Observations use a quiet tinted background, no side-stripe.
  */
-declare function EventContent({ event, className, isRunning }: EventContentProps): react_jsx_runtime.JSX.Element | null;
+declare function EventContent({ event, className, isRunning, maxDurationSeconds, }: EventContentProps): react.JSX.Element | null;
 
 /**
  * Convert StreamingChunk to Event format
  */
 declare function convertChunkToEvent(chunk: StreamingChunk, index: number): Event | null;
 /**
- * Convert timeline items (from metadata) to Events
+ * Convert timeline items (from metadata) to Events.
+ *
+ * Computes pairwise `durationSeconds` from `item.timestamp` so completed
+ * timelines can show per-step trace bars. Falls back to undefined when
+ * timestamps are missing (e.g. tail events without a successor).
  */
 declare function convertTimelineToEvents(timeline: Array<Record<string, unknown>>): Event[];
 interface EventTimelineProps {
@@ -496,7 +562,7 @@ interface EventTimelineProps {
  * Unified event timeline component
  * Displays thinking, tool execution, and observation events
  */
-declare function EventTimeline({ events, className }: EventTimelineProps): react_jsx_runtime.JSX.Element | null;
+declare function EventTimeline({ events, className }: EventTimelineProps): react.JSX.Element | null;
 
 interface PlanTimelineProps {
     plan: PlanData;
@@ -507,26 +573,26 @@ interface PlanTimelineProps {
  * Minimal timeline for Plan & Execute mode.
  * Matches in-house style: simple "Plan:" header + inline text rows.
  */
-declare function PlanTimeline({ plan, streamingChunks, className, }: PlanTimelineProps): react_jsx_runtime.JSX.Element;
-
-interface StatusBadgeProps {
-    status: EventStatus;
-    size?: number;
-    className?: string;
-}
-/**
- * Circular status badge with magical animations
- * - Pending: Dashed circle (muted)
- * - Running: Glowing orb with pulse effect
- * - Completed: Green check with pop + flash animation
- * - Failed: Red X
- */
-declare function StatusBadge({ status, size, className }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
+declare function PlanTimeline({ plan, streamingChunks, className, }: PlanTimelineProps): react.JSX.Element;
 
+type TimelineItemKind = "thinking" | "planning" | "tool" | "observation" | "subagent";
 interface TimelineItemData {
     id: string;
     status: EventStatus;
     content: ReactNode;
+    /**
+     * When true, the parent Timeline does not apply the running-state
+     * gradient wash to this row's content cell. Use for rows that own a
+     * nested timeline (e.g. subagents) — the wash bleeds behind the entire
+     * expanded body and reads as a card around the group.
+     */
+    bare?: boolean;
+    /**
+     * Semantic kind of this row. Drives adjacency-aware vertical spacing
+     * (consecutive thoughts pack tighter; tool/subagent boundaries breathe
+     * wider) and the StatusBadge marker variant (subagent gets a ring).
+     */
+    kind?: TimelineItemKind;
 }
 interface TimelineProps {
     items: TimelineItemData[];
@@ -534,10 +600,15 @@ interface TimelineProps {
     className?: string;
 }
 /**
- * Vertical timeline component
- * Displays items with status badges and connecting lines
+ * Vertical timeline — refreshed look.
+ *
+ * One unbroken hairline rail down the badge column with rail-anchored ink
+ * markers. The active segment carries a soft downward-flowing gradient
+ * slice; running rows get a left-anchored gradient wash on the content
+ * side. Spacing varies by adjacency so the panel reads like prose, not a
+ * uniform list.
  */
-declare function Timeline({ items, badgeSize, className }: TimelineProps): react_jsx_runtime.JSX.Element | null;
+declare function Timeline({ items, badgeSize, className }: TimelineProps): react.JSX.Element | null;
 interface TimelineItemProps {
     status: EventStatus;
     isLast?: boolean;
@@ -546,8 +617,63 @@ interface TimelineItemProps {
     className?: string;
 }
 /**
- * Single timeline item (alternative API)
+ * Single timeline item (alternative API). Matches the refreshed look of
+ * the parent `Timeline`: hairline rail, ink-dot markers, no card chrome.
+ */
+declare function TimelineItem({ status, isLast, badgeSize, children, className, }: TimelineItemProps): react.JSX.Element;
+
+interface StatusBadgeProps {
+    status: EventStatus;
+    size?: number;
+    className?: string;
+    /**
+     * Semantic kind of the row this badge marks. Each kind has a distinct
+     * marker geometry so the rail itself encodes event type at a glance —
+     * dot for thoughts (soft/prose), diamond for tool calls (geometric/
+     * action), ring for subagents (a dispatched thread). Shape, not just
+     * color, carries the categorical distinction.
+     */
+    kind?: TimelineItemKind;
+}
+/**
+ * Rail-anchored state marker.
+ *
+ * Shape carries state alongside color: running markers are visibly larger
+ * with a strong breathing halo, so a neutral activity color still reads
+ * as "in progress." Color comes from `--chat-activity` with a fallback to
+ * `--chat-primary`; callers whose primary is neutral can override the
+ * activity accent independently via `BrandingData.activityAccentColor`.
+ */
+declare function StatusBadge({ status, size, className, kind }: StatusBadgeProps): react.JSX.Element;
+
+interface TimelineRowProps {
+    /** Primary label — subtask description, agent name, or humanized handle. */
+    label: string;
+    /** Secondary text — task summary, self-description, or error message. */
+    description?: string;
+    /** Duration in seconds. Rendered right-aligned with tabular numerals. */
+    durationSeconds?: number;
+    /** Apply failed-state coloring to label/description. */
+    isFailed?: boolean;
+    /** Auto-expand the row when first rendered (e.g. when running). */
+    defaultExpanded?: boolean;
+    /** Nested events rendered in an indented body when expanded. */
+    nestedEvents?: Event[];
+    /** When true, the chevron is suppressed (used for non-expandable rows). */
+    hideChevron?: boolean;
+}
+/**
+ * Shared row content used by every reasoning-panel timeline:
+ * plan subtasks, multi-agent subagents, and sub-assistant dispatches.
+ *
+ * The leading status marker and rail are provided by the parent
+ * `Timeline`; this component only owns the label/description/duration row
+ * and the nested timeline that expands beneath it.
+ *
+ * Refreshed look: the lucide chevron is replaced by a typographic caret
+ * that rotates on expand; the duration is rendered as a tabular-num pill
+ * with quiet weight so it reads as data, not chrome.
  */
-declare function TimelineItem({ status, isLast, badgeSize, children, className, }: TimelineItemProps): react_jsx_runtime.JSX.Element;
+declare function TimelineRow({ label, description, durationSeconds, isFailed, defaultExpanded, nestedEvents, hideChevron, }: TimelineRowProps): react.JSX.Element;
 
-export { ArtifactChunkData, type ArtifactEntry, ArtifactInlineCard, type ArtifactInlineCardProps, ArtifactList, type ArtifactListProps, Attachment, CardVisualization, type CardVisualizationProps, ChartVisualization, type ChartVisualizationProps, ChatHeader, type ChatHeaderAction, type ChatHeaderProps, CitationSources, type CitationSourcesProps, ClarificationData, ClarificationPanel, type ClarificationPanelProps, ClaudeToolPreview, type ClaudeToolPreviewProps, CodePreviewVisualization, type CodePreviewVisualizationProps, Event, EventContent, EventStatus, EventTimeline, type EventTimelineProps, FileOperationPreview, type FileOperationPreviewProps, FormVisualization, type FormVisualizationProps, InlineCitation, type InlineCitationProps, KpiVisualization, type KpiVisualizationProps, LoadingDots, type LoadingDotsProps, MediaChunkData, MessageAttachments, type MessageAttachmentsProps, PlanData, PlanTimeline, type PlanTimelineProps, ReasoningPanel, type ReasoningPanelProps, SearchResultsView, type SearchResultsViewProps, SourceDetailModal, type SourceDetailModalProps, SourceReference, StatusBadge, StreamingChunk, SubagentPanel, type SubagentPanelProps, TableVisualization, type TableVisualizationProps, TerminalOutput, type TerminalOutputProps, TimeMarker, type TimeMarkerProps, Timeline, TimelineItem, type TimelineItemData, type TimelineItemProps, type TimelineProps, ToolApprovalPanel, type ToolApprovalPanelProps, VisualizationActionEvent, VisualizationChunkData, VisualizationConfig, type VisualizationEntry, VisualizationRenderer, type VisualizationRendererProps, WebOperationPreview, type WebOperationPreviewProps, cardVisualizationSchema, chartVisualizationSchema, codePreviewVisualizationSchema, convertChunkToEvent, convertTimelineToEvents, formVisualizationSchema, getArtifact, getRegisteredArtifactTypes, getRegisteredTypes, getVisualization, kpiVisualizationSchema, registerArtifact, registerVisualization, tableVisualizationSchema };
+export { type ApprovalButtonSlotProps, type ApprovalChatInputSlotProps, ArtifactChunkData, type ArtifactEntry, ArtifactInlineCard, type ArtifactInlineCardProps, ArtifactList, type ArtifactListProps, Attachment, CardVisualization, type CardVisualizationProps, ChartVisualization, type ChartVisualizationProps, ChatHeader, type ChatHeaderAction, type ChatHeaderProps, CitationSources, type CitationSourcesProps, ClarificationData, ClarificationPanel, type ClarificationPanelProps, CodePreviewVisualization, type CodePreviewVisualizationProps, ComposerToolbar, Event, EventContent, EventStatus, EventTimeline, type EventTimelineProps, FormVisualization, type FormVisualizationProps, InlineCitation, type InlineCitationProps, KpiVisualization, type KpiVisualizationProps, LoadingDots, type LoadingDotsProps, MediaChunkData, MessageAttachments, type MessageAttachmentsProps, PlanData, PlanTimeline, type PlanTimelineProps, ReasoningPanel, type ReasoningPanelProps, SourceDetailModal, type SourceDetailModalProps, SourceReference, StatusBadge, StreamingChunk, SubagentPanel, type SubagentPanelProps, TableVisualization, type TableVisualizationProps, TimeMarker, type TimeMarkerProps, Timeline, TimelineItem, type TimelineItemData, type TimelineItemProps, type TimelineProps, TimelineRow, type TimelineRowProps, ToolApprovalPanel, type ToolApprovalPanelProps, type ToolApprovalSlots, VisualizationActionEvent, VisualizationChunkData, VisualizationConfig, type VisualizationEntry, VisualizationRenderer, type VisualizationRendererProps, cardVisualizationSchema, chartVisualizationSchema, codePreviewVisualizationSchema, convertChunkToEvent, convertTimelineToEvents, formVisualizationSchema, getArtifact, getRegisteredArtifactTypes, getRegisteredTypes, getVisualization, kpiVisualizationSchema, registerArtifact, registerVisualization, tableVisualizationSchema };

package/dist/styled/index.js

@@ -1,2 +1,2 @@
-export{U as ArtifactInlineCard,Y as ArtifactList,b as AttachmentPreview,c as Avatar,G as CardVisualization,E as ChartVisualization,d as ChatContainer,ea as ChatHeader,ga as ChatLayout,g as CitationSources,j as ClarificationPanel,v as ClaudeToolPreview,I as CodePreviewVisualization,q as EventContent,t as EventTimeline,x as FileOperationPreview,J as FormVisualization,i as InlineCitation,H as KpiVisualization,e as LoadingDots,f as MarkdownContent,_ as Message,l as MessageActionBar,m as MessageAttachments,$ as MessageComposer,ba as MessageList,u as PlanTimeline,B as ReasoningPanel,aa as ScrollToBottomButton,y as SearchResultsView,h as SourceDetailModal,n as StatusBadge,C as StreamingText,A as SubagentPanel,D as SuggestedActions,F as TableVisualization,w as TerminalOutput,ca as TimeMarker,o as Timeline,p as TimelineItem,k as ToolApprovalPanel,fa as ToolStatusIndicator,da as TypingIndicator,T as VisualizationRenderer,z as WebOperationPreview,ha as WelcomeScreen,P as cardVisualizationSchema,N as chartVisualizationSchema,R as codePreviewVisualizationSchema,r as convertChunkToEvent,s as convertTimelineToEvents,S as formVisualizationSchema,W as getArtifact,X as getRegisteredArtifactTypes,M as getRegisteredTypes,L as getVisualization,Q as kpiVisualizationSchema,V as registerArtifact,K as registerVisualization,O as tableVisualizationSchema}from'../chunk-EI3GOLHT.js';export{h as useComposer,b as useMessage}from'../chunk-6RN7SUWT.js';import'../chunk-D2PFIJNZ.js';import'../chunk-4WWJTYYA.js';export{b as ChatProvider,c as useChatContext}from'../chunk-OCKHJ4WO.js';import'../chunk-O2ILSWHS.js';//# sourceMappingURL=index.js.map
+export{P as ArtifactInlineCard,T as ArtifactList,a as AttachmentPreview,b as Avatar,B as CardVisualization,z as ChartVisualization,c as ChatContainer,$ as ChatHeader,ba as ChatLayout,g as CitationSources,j as ClarificationPanel,D as CodePreviewVisualization,d as ComposerToolbar,q as EventContent,t as EventTimeline,E as FormVisualization,i as InlineCitation,C as KpiVisualization,e as LoadingDots,f as MarkdownContent,V as Message,l as MessageActionBar,m as MessageAttachments,W as MessageComposer,Y as MessageList,v as PlanTimeline,w as ReasoningPanel,X as ScrollToBottomButton,h as SourceDetailModal,n as StatusBadge,x as StreamingText,da as SubagentPanel,y as SuggestedActions,A as TableVisualization,Z as TimeMarker,o as Timeline,p as TimelineItem,u as TimelineRow,k as ToolApprovalPanel,aa as ToolStatusIndicator,_ as TypingIndicator,O as VisualizationRenderer,ca as WelcomeScreen,K as cardVisualizationSchema,I as chartVisualizationSchema,M as codePreviewVisualizationSchema,r as convertChunkToEvent,s as convertTimelineToEvents,N as formVisualizationSchema,R as getArtifact,S as getRegisteredArtifactTypes,H as getRegisteredTypes,G as getVisualization,L as kpiVisualizationSchema,Q as registerArtifact,F as registerVisualization,J as tableVisualizationSchema}from'../chunk-UZ2Z7C43.js';export{h as useComposer,b as useMessage}from'../chunk-6RN7SUWT.js';import'../chunk-D2PFIJNZ.js';import'../chunk-4WWJTYYA.js';export{b as ChatProvider,c as useChatContext}from'../chunk-NKLA5PPB.js';import'../chunk-NG4HKXYB.js';import'../chunk-ZP4FGAAH.js';//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map