{ "name": "TraceTimeline", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/TraceTimeline.tsx", "chapterTag": "20 Explainability", "chapter": "20-explainability.html", "sectionId": "robot-head", "elName": "TraceTimeline", "demoUrl": "https://brand.magicblocks.ai/components/20-explainability#robot-head", "hasLiveDemo": false, "description": "", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "groupTracePhases", "isPrincipal": false, "isType": false }, { "name": "isFlatTrace", "isPrincipal": false, "isType": false }, { "name": "TracePhaseRun", "isPrincipal": false, "isType": false } ], "importStatement": "import { TraceTimeline } from \"@magicblocksai/ui\";", "props": [ { "name": "events", "optional": false, "type": "TraceEvent[]", "doc": "Events to render, in order." }, { "name": "startIndex", "optional": true, "type": "number", "doc": "First auto-number value when an event has no explicit `number`. Default `1`." }, { "name": "density", "optional": true, "type": "\"comfortable\" | \"compact\"", "doc": "Density preset. Default `\"comfortable\"`." }, { "name": "hideLeading", "optional": true, "type": "boolean", "doc": "Hide the leading icons / number glyphs entirely." }, { "name": "hideTimeline", "optional": true, "type": "boolean", "doc": "Hide the vertical connecting track between events." }, { "name": "hideStepNumbers", "optional": true, "type": "boolean", "doc": "Hide the per-event step numbers (`step 1·`, `step 2·`) in the eyebrow. Leading icons / glyphs still render." }, { "name": "timeStrategy", "optional": true, "type": "TraceTimeStrategy", "doc": "Timestamp strategy. Only applies when events carry `timeMs`. When an event has only `timestamp` (no `timeMs`), the string is rendered as-is. Default `\"first-then-deltas\"`." }, { "name": "header", "optional": true, "type": "ReactNode", "doc": "Optional content rendered above the events list." }, { "name": "emptyState", "optional": true, "type": "ReactNode", "doc": "Shown when `events` is empty." } ], "classesUsed": [ "card", "timeline", "title", "trace-event", "trace-event-actions", "trace-event-body", "trace-event-caption", "trace-event-card", "trace-event-eyebrow", "trace-event-eyebrow-sep", "trace-event-eyebrow-text", "trace-event-footer", "trace-event-head", "trace-event-head-aside", "trace-event-items", "trace-event-leading", "trace-event-live", "trace-event-live-dot", "trace-event-pulse", "trace-event-step", "trace-event-step-glyph", "trace-event-time", "trace-event-title", "trace-event-title-block", "trace-item-bullet", "trace-item-bullet-body", "trace-item-bullet-dot", "trace-item-bullet-label", "trace-item-bullet-meta", "trace-item-bullet-value", "trace-item-card", "trace-item-card-body", "trace-item-card-chevron", "trace-item-card-details", "trace-item-card-label", "trace-item-card-meta", "trace-item-card-trigger", "trace-item-card-value", "trace-item-code", "trace-item-code-copy", "trace-item-code-glyph", "trace-item-code-value", "trace-timeline", "trace-timeline-empty", "trace-timeline-header", "trace-timeline-item", "trace-timeline-list" ], "examples": { "react": null, "html": "
\n
\n
    \n
  1. \n
    \n \n \n \n
    \n
    \n
    \n
    step 1·Knowledge
    \n Knowledge sources used\n
    \n
    \n 01:57:38\n
    \n
    \n
    \n
    \n
    \n
    \n \n Regional Policy v2.1\n \n
    \n
    \n
    \n
    \n \n Location Data\n \n
    \n
    \n
    \n
    \n
    \n
    \n
    2. \n
  2. \n
    \n \n \n \n
    \n
    \n
    \n
    step 2·Capture
    \n Facts captured\n
    \n
    \n +24ms\n
    \n
    \n
    \n
    \n
    \n \n Full nameHoang Thu\n
    \n
    \n \n Emailthuht+110226002@magicblocks.ai\n
    \n
    \n \n LocationHo Chi Minh city\n
    \n
    \n
    \n
    \n
    \n
    3. \n
  3. \n
    \n \n \n \n
    \n
    \n
    \n
    step 3·Goal
    \n Goal triggered\n
    \n
    \n +27ms\n
    \n
    \n
    \n
    \n
    \n \n GoalBook a meeting\n
    \n
    \n \n TimeApr 18, 9:00 AM\n
    \n
    \n
    \n
    \n
    \n
    4. \n
  4. \n
    \n \n \n \n
    \n
    \n
    \n
    step 4·Match
    \n Director matched flow\n
    \n
    \n +27ms\n
    \n
    \n
    \n
    \n
    \n \n FlowMeeting booking\n
    \n
    \n \n ConfidenceHigh\n
    \n
    \n \n ActionAction 1\n
    \n
    \n
    \n
    \n
    \n
    5. \n
  5. \n
    \n \n \n \n \n
    \n
    \n
    \n
    step 5·Tool
    \n Tool call · Slack\n
    \n
    \n live\n +1.2s\n
    \n
    \n
    \n
    \n
    \n
    \n \n Action\n Checked staging agent\n \n
    \n
    \n
    \n
    \n \n Result\n Undefined\n \n
    \n
    \n
    \n
    \n
    \n
    \n
    6. \n
  6. \n
    \n \n \n \n
    \n
    \n
    \n
    step 6·Form
    \n Form completed\n
    \n
    \n +450ms\n
    \n
    \n
    \n
    \n
    \n \n FormMeeting booking\n
    \n
    \n \n Submitted atApr 18, 8:59 AM\n
    \n
    \n
    \n
    \n
    \n
    7. \n
  7. \n
    \n \n \n \n
    \n
    \n
    \n
    step 7·Model
    \n Model error\n Retrying with fallback…\n
    \n
    \n +430ms\n
    \n
    \n
    \n
    \n
    \n \n StageResponse generation\n
    \n
    \n \n CodeMODEL_TIMEOUT\n
    \n
    \n
    \n
    \n
    \n
    8. \n
  8. \n
    \n \n \n \n
    \n
    \n
    \n
    step 8·Form
    \n Form post error\n
    \n
    \n +290ms\n
    \n
    \n
    \n
    \n
    \n \n ReasonMissing required field\n
    \n
    \n \n Suggested fixAdd email address\n
    \n
    \n
    \n
    \n
    \n
    9. \n
  9. \n
    \n \n \n \n
    \n
    \n
    \n
    step 9·Security
    \n Jailbreak attempt intercepted\n
    \n
    \n +610ms\n
    \n
    \n
    \n
    \n
    \n \n DetectionPrompt injection signature\n
    \n
    \n \n ActionContinued conversation safely\n
    \n
    \n
    \n
    \n
    \n
    10. \n
  10. \n
    \n \n 10\n \n
    \n
    \n
    \n
    step 10·Meta
    \n Message ID\n
    \n
    \n +230ms\n
    \n
    \n
    \n
    \n
    \n </>\n m_AUacy1ZXTWTzUuVca_Tm7SIC1UiemZv\n \n
    \n
    \n
    \n
    \n
    \n
    11. \n
\n
\n
", "css": ".card {\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-lg);\n padding: var(--s-6) var(--s-6);\n display: flex; flex-direction: column; gap: var(--s-2);\n /* v1.9.0 (R6-2): cards now ship with `--sh-1` by default. On a same-\n colour page bg (the typical CRM detail-page setup) cards visually\n disappear with hairline + radius alone. Adding the small drop\n shadow gives the \"card feels like a card\" treatment that every\n product app reaches for. Marketing-grid contexts that explicitly\n want flat hairline-only cards opt out via `` (or\n `.card-flat`). */\n box-shadow: var(--sh-1);\n transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);\n}\n\n.timeline {\n list-style: none; padding: 0; margin: 0;\n position: relative;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\n.trace-event {\n --trace-tone: var(--fg-soft);\n --trace-tone-soft: color-mix(in oklab, var(--fg-soft) 8%, var(--bg-paper));\n --trace-tone-text: var(--fg);\n --trace-tone-border: var(--hair);\n position: relative;\n display: grid;\n grid-template-columns: 28px 1fr;\n gap: var(--s-3);\n align-items: flex-start;\n}\n\n.trace-event-actions { display: inline-flex; align-items: center; gap: 4px; }\n\n.trace-event-body {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-top: 4px;\n}\n\n.trace-event-caption {\n font: 400 12.5px/1.4 var(--f-body);\n color: var(--fg-soft);\n margin-top: 2px;\n}\n\n.trace-event-card {\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-md);\n padding: var(--s-3) var(--s-4);\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-width: 0;\n transition: background var(--dur-2) var(--ease),\n border-color var(--dur-2) var(--ease);\n}\n\n.trace-event-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font: 600 10px/1 var(--f-mono);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--trace-tone-text, var(--fg-soft));\n margin-bottom: 2px;\n}\n\n.trace-event-eyebrow-sep { opacity: 0.4; }\n\n.trace-event-eyebrow-text { font-weight: 700; }\n\n.trace-event-footer {\n display: flex;\n align-items: center;\n gap: var(--s-2);\n margin-top: 4px;\n}\n\n.trace-event-head {\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: baseline;\n gap: var(--s-3);\n min-width: 0;\n}\n\n.trace-event-head-aside {\n display: inline-flex;\n align-items: center;\n gap: var(--s-2);\n flex-shrink: 0;\n}\n\n.trace-event-items { display: flex; flex-direction: column; gap: 4px; }\n\n.trace-event-leading {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 999px;\n background: var(--bg-paper);\n border: 1.5px solid var(--trace-tone, var(--hair));\n color: var(--trace-tone, var(--fg-soft));\n font: 600 12px/1 var(--f-mono);\n font-variant-numeric: tabular-nums;\n flex-shrink: 0;\n margin-top: 6px;\n box-shadow: 0 0 0 4px var(--bg-paper);\n}\n\n.trace-event-live {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 999px;\n background: color-mix(in oklab, var(--trace-tone, var(--accent)) 12%, var(--bg-paper));\n color: var(--trace-tone-text, var(--accent));\n font: 600 10px/1 var(--f-mono);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n}\n\n.trace-event-live-dot {\n width: 6px;\n height: 6px;\n border-radius: 999px;\n background: var(--trace-tone, var(--accent));\n animation: trace-live-blink 1.4s ease-in-out infinite;\n}\n\n.trace-event-pulse {\n position: absolute;\n inset: -3px;\n border-radius: 999px;\n border: 2px solid var(--trace-tone, var(--accent));\n opacity: 0;\n animation: trace-pulse 1.6s ease-out infinite;\n pointer-events: none;\n}\n\n.trace-event-step { font-weight: 500; opacity: 0.85; }\n\n.trace-event-step-glyph { line-height: 1; }\n\n.trace-event-time {\n fo" } }