51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:Tff6,.cr-timeline { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-md); } .cr-timeline__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--cr-space-3); overscroll-behavior: contain; } .cr-timeline__scroll:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: calc(-1 * var(--cr-focus-width)); } .cr-timeline__list { display: grid; gap: var(--cr-space-1); margin: 0; padding: 0; list-style: none; } .cr-timeline__list .cr-timeline__list { margin-top: var(--cr-space-2); } .cr-timeline__step { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: var(--cr-space-2); padding-bottom: var(--cr-space-3); } /* The rail connecting markers. */ .cr-timeline__step:not(:last-child)::before { content: ''; position: absolute; top: 22px; bottom: 0; left: 9px; width: 2px; background: var(--cr-color-border-default); } .cr-timeline__marker { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--cr-radius-full); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent); font-size: var(--cr-font-size-xs); } .cr-timeline__step[data-status='running'] > .cr-timeline__marker { background: var(--cr-color-status-running-bg); color: var(--cr-color-status-running-fg); } .cr-timeline__step[data-status='waiting'] > .cr-timeline__marker { background: var(--cr-color-status-waiting-bg); color: var(--cr-color-status-waiting-fg); } .cr-timeline__step[data-status='done'] > .cr-timeline__marker { background: var(--cr-color-status-done-bg); color: var(--cr-color-status-done-fg); } .cr-timeline__step[data-status='failed'] > .cr-timeline__marker { background: var(--cr-color-status-failed-bg); color: var(--cr-color-status-failed-fg); } .cr-timeline__body { min-width: 0; } .cr-timeline__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cr-space-2); min-height: 22px; } .cr-timeline__title { font-weight: var(--cr-font-weight-medium); } .cr-timeline__calls { display: grid; gap: var(--cr-space-1); margin: var(--cr-space-2) 0 0; padding: 0; list-style: none; } .cr-timeline__call-row, .cr-timeline__call-button { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cr-space-2); width: 100%; padding: 6px var(--cr-space-3); border: 1px solid transparent; border-radius: var(--cr-radius-md); background: var(--cr-color-glass-tile); color: inherit; font: inherit; font-size: var(--cr-font-size-sm); text-align: start; } .cr-timeline__call-row .cr-badge, .cr-timeline__call-button .cr-badge { margin-inline-start: auto; } .cr-timeline__call-button { cursor: pointer; } .cr-timeline__call-button:hover { border-color: var(--cr-color-border-strong); } .cr-timeline__call-button:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-timeline__call-button[aria-current='true'] { border-color: var(--cr-color-ink-bg); background: var(--cr-color-bg-raised); } /* A red edge, not a red fill: the failed badge inside already carries the tint. */ .cr-timeline__call[data-status='error'] > :first-child { border-color: color-mix(in srgb, var(--cr-color-status-failed-fg) 50%, transparent); } .cr-timeline__attempt { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); } .cr-timeline__error { margin: var(--cr-space-1) 0 0; color: var(--cr-color-status-failed-fg); font-size: var(--cr-font-size-sm); overflow-wrap: anywhere; } .cr-timeline__empty { margin: 0; color: var(--cr-color-text-muted); } .cr-timeline__jump { position: absolute; z-index: 1; bottom: var(--cr-space-3); left: 50%; transform: translateX(-50%); box-shadow: var(--cr-shadow-md); } 54:T20dd,'use client'; import { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { Button } from '@/components/creance/button/Button'; import { Code } from '@/components/creance/code/Code'; import { StatusBadge } from '@/components/creance/status-badge/StatusBadge'; import type { ToolCallStatus } from '@/components/creance/tool-call-header/ToolCallHeader'; import { cx } from '@/lib/creance/cx'; import { ArrowDownIcon, CheckIcon, CrossIcon, DotIcon, PauseIcon } from '@/lib/creance/icons'; import { LiveRegion } from '@/lib/creance/LiveRegion'; import './RunTimeline.css'; export type TimelineStepStatus = 'running' | 'waiting' | 'done' | 'failed'; export interface TimelineToolCall { id: string; tool: string; status: ToolCallStatus; startedAt?: number | undefined; endedAt?: number | undefined; attempt?: number | undefined; error?: string | undefined; } export interface TimelineStep { id: string; title: string; status: TimelineStepStatus; startedAt?: number | undefined; endedAt?: number | undefined; error?: string | undefined; toolCalls?: TimelineToolCall[]; children?: TimelineStep[]; } export interface RunTimelineProps { steps: TimelineStep[]; /** Follow new steps as they stream in. Following pauses when the person scrolls up. Default true. */ live?: boolean; /** Accessible name of the scrollable region. */ label?: string; /** Makes tool calls selectable, e.g. to show a ToolCallCard in a detail panel. */ onSelectToolCall?: (id: string) => void; selectedToolCallId?: string | undefined; /** Shown before the first step arrives. */ emptyText?: string; className?: string; } const stepIcon = { running: , waiting: , done: , failed: }; const badge = { running: { status: 'running', label: 'Running' }, waiting: { status: 'waiting', label: 'Waiting for you' }, done: { status: 'done', label: 'Done' }, failed: { status: 'failed', label: 'Failed' }, } as const; const callBadge = { pending: { status: 'waiting', label: 'Pending' }, running: { status: 'running', label: 'Running' }, success: { status: 'done', label: 'Succeeded' }, error: { status: 'failed', label: 'Failed' }, } as const; /** Distance from the bottom, in px, that still counts as "at the latest". */ const PIN_THRESHOLD = 32; function walk(steps: TimelineStep[], visit: (s: TimelineStep) => void) { for (const s of steps) { visit(s); if (s.children) walk(s.children, visit); } } /** The newest thing worth announcing: a failure or a step that needs the person. */ function announcementFor(steps: TimelineStep[], seen: Set): string | undefined { let message: string | undefined; walk(steps, (s) => { const key = `${s.id}:${s.status}`; if ((s.status === 'failed' || s.status === 'waiting') && !seen.has(key)) { seen.add(key); message = s.status === 'failed' ? `Step failed: ${s.title}. ${s.error ?? ''}` : `Waiting for you: ${s.title}`; } for (const c of s.toolCalls ?? []) { const callKey = `${c.id}:${c.attempt ?? 1}:${c.status}`; if (c.status === 'error' && !seen.has(callKey)) { seen.add(callKey); message = `Tool call ${c.tool} failed: ${c.error ?? ''}`; } } }); return message; } export function RunTimeline({ steps, live = true, label = 'Run timeline', onSelectToolCall, selectedToolCallId, emptyText = 'Waiting for the agent to start.', className, }: RunTimelineProps) { const scrollRef = useRef(null); const pinned = useRef(true); const jumping = useRef(false); const [hasNew, setHasNew] = useState(false); const seen = useRef(new Set()); const [announcement, setAnnouncement] = useState(''); useEffect(() => { const message = announcementFor(steps, seen.current); if (message) setAnnouncement(message); }, [steps]); // New content: follow it if the person is at the bottom, otherwise offer "Jump to latest". useLayoutEffect(() => { const el = scrollRef.current; if (!el || !live) return; if (pinned.current) el.scrollTop = el.scrollHeight; else if (el.scrollHeight > el.clientHeight) setHasNew(true); }, [steps, live]); function onScroll() { const el = scrollRef.current; if (!el) return; const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < PIN_THRESHOLD; if (jumping.current) { if (atBottom) jumping.current = false; return; } pinned.current = atBottom; if (atBottom) setHasNew(false); } function jumpToLatest() { const el = scrollRef.current; if (!el) return; const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; pinned.current = true; jumping.current = !reduce; setHasNew(false); el.scrollTo({ top: el.scrollHeight, behavior: reduce ? 'auto' : 'smooth' }); } function renderSteps(list: TimelineStep[]) { return (

{stepIcon[step.status]}
{step.title}
{step.error &&
{step.error}
} {!!step.toolCalls?.length && (
)} {!!step.children?.length && renderSteps(step.children)}

); } return (

{/* Focusable so keyboard users can scroll it. */} {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}

{steps.length ? renderSteps(steps) :

{emptyText}

}

{hasNew && ( )}

); } 50:["$","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":[null,["$","$L51",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/button.json","https://creance.pages.dev/r/code.json","https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/status-badge.json","https://creance.pages.dev/r/tool-call-header.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"run-timeline/RunTimeline.css","content":"$53","type":"registry:file","target":"@components/creance/run-timeline/RunTimeline.css"},{"path":"run-timeline/RunTimeline.tsx","content":"$54","type":"registry:ui","target":"@components/creance/run-timeline/RunTimeline.tsx"}],"className":"h-[70svh] min-h-80"}]]}]