4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T27ee,'use client'; /** * @file agent-step-timeline.tsx * @description A vertical timeline of ReAct agent steps. Each step is a * collapsible card (color-coded tool badge via an optional `toolColorMap`, * formatted args, observation with show-more, index, elapsed-ms). A `finish` * step renders a success-styled final-answer card. The timeline auto-scrolls, * shows a "Thinking…" spinner row while running, and a terminal finish-reason * badge (`max_steps` / `timeout` / `loop_detected` / `error`). It also supports * nested sub-agent/handoff rendering. Data source: `@localmode/react` `useAgent`. */ import * as React from 'react'; import { ChevronDown, CornerDownRight, Flag, Loader2, } from 'lucide-react'; import { cn } from '@/registry/localmode/lib/utils'; import { Badge } from '@/registry/localmode/ui/badge'; /** An agent step (mirrors `@localmode/core` `AgentStep`). */ export interface AgentStep { index: number; type: 'tool_call' | 'finish'; toolName?: string; toolArgs?: Record; observation?: string; result?: string; durationMs?: number; /** Optional nested sub-agent run rendered inside this step. */ subSteps?: AgentStep[]; } /** Terminal finish reason (mirrors `@localmode/core` `AgentFinishReason`). */ export type AgentFinishReason = | 'finish' | 'max_steps' | 'timeout' | 'loop_detected' | 'aborted' | 'error'; /** Map of tool name → Tailwind classes for the tool badge. */ export type ToolColorMap = Record; const DEFAULT_TOOL_COLOR = 'bg-muted text-muted-foreground'; const FINISH_REASON_META: Record< AgentFinishReason, { label: string; className: string } | null > = { finish: null, max_steps: { label: 'Max steps reached', className: 'bg-amber-500/15 text-amber-600 dark:text-amber-400' }, timeout: { label: 'Timed out', className: 'bg-amber-500/15 text-amber-600 dark:text-amber-400' }, loop_detected: { label: 'Loop detected', className: 'bg-amber-500/15 text-amber-600 dark:text-amber-400' }, aborted: { label: 'Aborted', className: 'bg-muted text-muted-foreground' }, error: { label: 'Error', className: 'bg-destructive/15 text-destructive' }, }; /** Props for {@link AgentStepTimeline}. */ export interface AgentStepTimelineProps extends React.ComponentProps<'div'> { /** The agent steps (e.g. `useAgent().steps`). */ steps: AgentStep[]; /** Whether the agent loop is still running (e.g. `useAgent().isRunning`). */ isRunning?: boolean; /** Terminal reason once the run ends. */ finishReason?: AgentFinishReason; /** Optional per-tool badge colors. */ toolColorMap?: ToolColorMap; /** Auto-scroll to the newest step while running. @default true */ autoScroll?: boolean; } /** * The agent run timeline. * * @example * ```tsx * const { steps, isRunning, result } = useAgent({ model, tools }); * * ``` */ export function AgentStepTimeline({ steps, isRunning = false, finishReason, toolColorMap, autoScroll = true, className, ...props }: AgentStepTimelineProps) { const endRef = React.useRef(null); React.useEffect(() => { if (autoScroll) endRef.current?.scrollIntoView({ block: 'end', behavior: 'smooth' }); }, [steps.length, isRunning, autoScroll]); const finishMeta = finishReason && finishReason !== 'finish' ? FINISH_REASON_META[finishReason] : null; return (

{steps.map((step, i) => (

))} {isRunning && (

Thinking…

)} {finishMeta && (

)}

); } /** * The gutter cell: a fixed-width column holding the node dot (horizontally * centered) and, when `hasConnector`, a vertical line from this dot's center * down to the next node's center. Dot and line share the column, so they are * always aligned and never overlap the adjacent card. */ function StepNode({ variant = 'step', hasConnector = false, }: { variant?: 'step' | 'finish' | 'running'; hasConnector?: boolean; }) { // Step/finish dots align to the card's first text row (mt-3.5 → center 21px); // the connector spans 100% of this row + the 0.75rem gap to reach the next dot. const running = variant === 'running'; return (

{hasConnector && (

); } /** Props for {@link AgentStepCard}. */ export interface AgentStepCardProps { /** The step to render. */ step: AgentStep; /** Optional per-tool badge colors. */ toolColorMap?: ToolColorMap; /** Render nested (sub-agent) styling. @default false */ nested?: boolean; /** Extra classes merged onto the card (e.g. `min-w-0 flex-1` in the timeline). */ className?: string; } /** A single collapsible step card (the node dot + connector live in the timeline gutter). */ export function AgentStepCard({ step, toolColorMap, nested = false, className, }: AgentStepCardProps) { const [open, setOpen] = React.useState(false); const [showFull, setShowFull] = React.useState(false); const contentId = React.useId(); const isFinish = step.type === 'finish'; const observation = step.observation ?? ''; const long = observation.length > 160; const shown = showFull || !long ? observation : `${observation.slice(0, 160)}…`; return (

{isFinish && step.result && (

{step.result}

)} {!isFinish && open && (

{step.toolArgs && (

              {JSON.stringify(step.toolArgs, null, 2)}

)} {observation && (

{shown}

{long && ( )}

)} {/* Nested sub-agent handoff */} {step.subSteps && step.subSteps.length > 0 && (

sub-agent

{step.subSteps.map((sub) => ( ))}

)}

); } export default AgentStepTimeline; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@localmode","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json","badge"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/localmode/conversation/agent-step-timeline/agent-step-timeline.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]