{ "name": "Trace", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/Trace.tsx", "chapterTag": "16 Pipeline & CRM", "chapter": "16-app-pipeline.html", "sectionId": "session-page", "elName": "SessionPage", "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#session-page", "hasLiveDemo": false, "description": "", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "Trace", "isPrincipal": true, "isType": false }, { "name": "TraceProps", "isPrincipal": false, "isType": true }, { "name": "TracePhase", "isPrincipal": false, "isType": false }, { "name": "TraceStatus", "isPrincipal": false, "isType": false } ], "importStatement": "import { Trace } from \"@magicblocksai/ui\";", "props": [ { "name": "events", "optional": true, "type": "TraceEvent[]", "doc": "Trace events, in order. Grouped by `event.phase` (order preserved)." }, { "name": "phases", "optional": true, "type": "TracePhase[]", "doc": "Pre-grouped phases — overrides `events` grouping when provided." }, { "name": "title", "optional": true, "type": "ReactNode", "doc": "Top-level label. Default `\"Agent reasoning\"`." }, { "name": "status", "optional": true, "type": "TraceStatus", "doc": "Top-level status glyph. Default derived (running > error > ok)." }, { "name": "totalMs", "optional": true, "type": "number", "doc": "Total duration in ms shown at the top. Default = span of event `timeMs`." }, { "name": "timeStrategy", "optional": true, "type": "TraceTimeStrategy", "doc": "Per-step timestamp strategy. Default `\"first-then-deltas\"`." }, { "name": "density", "optional": true, "type": "\"compact\" | \"comfortable\"", "doc": "Density preset. Default `\"compact\"`." }, { "name": "defaultOpen", "optional": true, "type": "boolean", "doc": "Top initial open state. Default `false` (the resting pill)." }, { "name": "open", "optional": true, "type": "boolean", "doc": "Controlled top open state. Pair with `onOpenChange`." }, { "name": "onOpenChange", "optional": true, "type": "(open: boolean) => void", "doc": "Top open-state change callback (controlled + uncontrolled)." }, { "name": "onePhaseOpen", "optional": true, "type": "boolean", "doc": "One phase open at a time. Default `true`. Implicitly off when `defaultAllPhasesOpen` is set." }, { "name": "defaultOpenPhase", "optional": true, "type": "string", "doc": "Open a phase by label (or `phases[].id`) initially." }, { "name": "defaultAllPhasesOpen", "optional": true, "type": "boolean", "doc": "Start every phase open — the operator / timeline-style preset. Steps stay independent. Default `false`. v3.4.0." }, { "name": "resolveSource", "optional": true, "type": "(ref: TraceSourceRef) => Promise", "doc": "Resolve a `source` item's body on first open — wired as `loadDetails` on each ``. The trace carries lightweight refs; the card fetches the passage only when the step + card are opened, then caches it. Items with eager `details` ignore this. v3.4.0." }, { "name": "layout", "optional": true, "type": "\"compact\" | \"timeline\"", "doc": "Presentation. `\"compact\"` (default) is the nested-disclosure trace for chat-sized surfaces; `\"timeline\"` renders the events as a rich, always-expanded vertical timeline (the full \"robot head\") — so one component covers both surfaces. The compact-only props (`title` / `status` / `open` / phase controls) don't apply in `\"timeline\"`. v3.5.0." } ], "classesUsed": [ "card", "compact-trace", "compact-trace-body", "compact-trace-bullet", "compact-trace-bullet-label", "compact-trace-bullet-meta", "compact-trace-bullet-value", "compact-trace-chevron", "compact-trace-code", "compact-trace-dot", "compact-trace-empty", "compact-trace-meta", "compact-trace-phase", "compact-trace-phase-label", "compact-trace-phase-meta", "compact-trace-status", "compact-trace-step-detail", "compact-trace-step-time", "compact-trace-step-title", "compact-trace-step-trigger", "compact-trace-title", "compact-trace-top", "compact-trace-total", "timeline", "title" ], "examples": { "react": null, "html": "
\n
‹ Sessions
\n
\n
\n SK\n
\n

Sarah Kim · Skyhook

\n
WebchatSage agent · v2.3Apr 28, 9:15 AM#S-4821
\n
\n Completed\n
\n
\n
Goals achieved
QualifiedMeeting booked
\n
Duration
4m 12s
Messages
18
Sentiment
Positive
\n
\n
\n
\n
\n
AI summarySAGE
\n

Sarah from Skyhook asked about 5-seat volume pricing for a CS team moving handoffs to Slack. Sage confirmed the Scale plan, qualified the use case, and booked a walkthrough.

\n
\n
\n
\n
Key facts
\n
\n
seats5
\n
planScale
\n
handoffSlack
\n
\n
\n
\n
Memories
\n
\n
Prefers Slack for team handoffs
this sessionhigh
\n
Evaluating for a 5-person CS team
this sessionhigh
\n
\n \n
\n
\n
Handover & outcome
\n
\n
CRM lead createdPOST crm.acme.com/leads
200
\n
Handed to journey blockPost-demo nurture
\n
\n
\n
\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.compact-trace {\n --ct-px: 11px;\n --ct-py: 8px;\n --ct-fs: 12.5px;\n font: 400 var(--ct-fs)/1.45 var(--f-body);\n color: var(--fg);\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-md, 11px);\n overflow: hidden;\n /* v3.4.0 — width follows open: discrete (hugs the resting pill) when closed\n * so it doesn't overwhelm a chat / session window; full-width when open so\n * the knowledge cards have room. Pass an explicit width to override. */\n width: fit-content;\n max-width: 100%;\n}\n\n.compact-trace-body { border-top: 1px solid var(--hair); }\n\n.compact-trace-bullet { display: flex; align-items: baseline; gap: 7px; font-size: 0.95em; }\n\n.compact-trace-bullet-label { font-weight: 600; color: var(--fg); }\n\n.compact-trace-bullet-meta { margin-left: auto; font: 400 0.85em/1 var(--f-mono); color: var(--fg-faint); }\n\n.compact-trace-bullet-value { color: var(--fg-soft); min-width: 0; }\n\n.compact-trace-chevron { width: 9px; height: 9px; flex: none; position: relative; color: var(--fg-faint); }\n\n.compact-trace-code {\n font: 400 0.85em/1.4 var(--f-mono);\n background: var(--bg-warm); color: var(--fg);\n padding: 5px 8px; border-radius: var(--r-sm, 7px);\n display: block; overflow-x: auto; white-space: pre;\n}\n\n.compact-trace-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--fg-faint); }\n\n.compact-trace-empty { padding: var(--ct-py) var(--ct-px); color: var(--fg-faint); }\n\n.compact-trace-meta { display: inline-flex; align-items: center; gap: 7px; }\n\n.compact-trace-phase {\n display: flex; align-items: center; gap: 9px;\n width: 100%; box-sizing: border-box;\n padding: var(--ct-py) var(--ct-px);\n margin: 0; border: 0; background: none;\n font: inherit; color: inherit; text-align: left;\n cursor: pointer; -webkit-appearance: none;\n}\n.compact-trace-phase { font-weight: 600; }\n\n.compact-trace-phase-label { flex: 1; min-width: 0; }\n\n.compact-trace-phase-meta { font: 500 0.82em/1 var(--f-mono); color: var(--fg-faint); }\n\n.compact-trace-status { font: 700 0.8em/1 var(--f-mono); letter-spacing: 0.02em; }\n\n.compact-trace-step-detail {\n padding: 4px var(--ct-px) var(--ct-py) calc(var(--ct-px) + 30px);\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n gap: 6px;\n align-content: start;\n}\n\n.compact-trace-step-time { font: 400 0.82em/1 var(--f-mono); color: var(--fg-faint); }\n\n.compact-trace-step-title { flex: 1; min-width: 0; }\n\n.compact-trace-step-trigger {\n display: flex; align-items: center; gap: 9px;\n width: 100%; box-sizing: border-box;\n padding: var(--ct-py) var(--ct-px);\n margin: 0; border: 0; background: none;\n font: inherit; color: inherit; text-align: left;\n cursor: pointer; -webkit-appearance: none;\n}\n.compact-trace-step-trigger { padding-left: calc(var(--ct-px) + 15px); }\n\n.compact-trace-title {\n flex: 1; min-width: 0;\n overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n\n.compact-trace-top {\n display: flex; align-items: center; gap: 9px;\n width: 100%; box-sizing: border-box;\n padding: var(--ct-py) var(--ct-px);\n margin: 0; border: 0; background: none;\n font: inherit; color: inherit; text-align: left;\n cursor: pointer; -webkit-appearance" } }