{
  "name": "TraceEventCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/TraceTimeline.tsx",
  "chapterTag": "20 Explainability",
  "chapter": "20-explainability.html",
  "sectionId": "anatomy",
  "elName": "TraceEventCard",
  "demoUrl": "https://brand.magicblocks.ai/components/20-explainability#anatomy",
  "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 { TraceEventCard } 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": "<div class=\"trace-grid\">\n          <div class=\"trace-grid-cell\">\n            <span class=\"trace-grid-label\">success</span>\n            <div class=\"trace-event is-tone-success\">\n              <span class=\"trace-event-leading\" aria-hidden=\"true\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 5v9.5\"/><path d=\"M9 5C7.5 4 5.5 3.5 3 3.5v9.75c2.5 0 4.5.5 6 1.25\"/><path d=\"M9 5c1.5-1 3.5-1.5 6-1.5v9.75c-2.5 0-4.5.5-6 1.25\"/></svg>\n              </span>\n              <div class=\"trace-event-card\">\n                <header class=\"trace-event-head\">\n                  <div class=\"trace-event-title-block\">\n                    <div class=\"trace-event-eyebrow\"><span class=\"trace-event-eyebrow-text\">Knowledge</span></div>\n                    <span class=\"trace-event-title\">Knowledge sources used</span>\n                  </div>\n                  <div class=\"trace-event-head-aside\">\n                    <span class=\"trace-event-time\">01:57:38</span>\n                  </div>\n                </header>\n                <div class=\"trace-event-body\">\n                  <div class=\"trace-event-items\">\n                    <div class=\"trace-item-bullet is-tone-success\">\n                      <span class=\"trace-item-bullet-dot\" aria-hidden=\"true\"></span>\n                      <span class=\"trace-item-bullet-body\"><span class=\"trace-item-bullet-label\">Source</span><span class=\"trace-item-bullet-value\">Regional Policy v2.1</span></span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"trace-grid-cell\">\n            <span class=\"trace-grid-label\">warn</span>\n            <div class=\"trace-event is-tone-warn\">\n              <span class=\"trace-event-leading\" aria-hidden=\"true\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 2L4 10h4l-1.5 6 6-8H8.5L10 2Z\"/></svg>\n              </span>\n              <div class=\"trace-event-card\">\n                <header class=\"trace-event-head\">\n                  <div class=\"trace-event-title-block\">\n                    <div class=\"trace-event-eyebrow\"><span class=\"trace-event-eyebrow-text\">Tool</span></div>\n                    <span class=\"trace-event-title\">Tool call · Slack</span>\n                  </div>\n                  <div class=\"trace-event-head-aside\">\n                    <span class=\"trace-event-time is-delta\">+1.2s</span>\n                  </div>\n                </header>\n                <div class=\"trace-event-body\">\n                  <div class=\"trace-event-items\">\n                    <div class=\"trace-item-bullet is-tone-warn\">\n                      <span class=\"trace-item-bullet-dot\" aria-hidden=\"true\"></span>\n                      <span class=\"trace-item-bullet-body\"><span class=\"trace-item-bullet-label\">Action</span><span class=\"trace-item-bullet-value\">Checked staging agent</span></span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"trace-grid-cell\">\n            <span class=\"trace-grid-label\">error</span>\n            <div class=\"trace-event is-tone-error\">\n              <span class=\"trace-event-leading\" aria-hidden=\"true\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 2L4 10h4l-1.5 6 6-8H8.5L10 2Z\"/></svg>\n              </span>\n              <div class=\"trace-event-card\">\n                <header class=\"trace-event-head\">\n                  <div class=\"trace-event-title-block\">\n                    <div class=\"trace-event-eyebrow\"><span class=\"trace-event-eyebrow-text\">Model</span></div>\n                    <span class=\"trace-event-title\">Model error</span>\n                    <span class=\"trace-event-caption\">Retrying with fallback&hellip;</span>\n                  </div>\n                  <div class=\"trace-event-head-aside\">\n                    <span class=\"trace-event-time is-delta\">+430ms</span>\n                  </div>\n                </header>\n                <div class=\"trace-event-body\">\n                  <div class=\"trace-event-items\">\n                    <div class=\"trace-item-bullet is-tone-error\">\n                      <span class=\"trace-item-bullet-dot\" aria-hidden=\"true\"></span>\n                      <span class=\"trace-item-bullet-body\"><span class=\"trace-item-bullet-label\">Code</span><span class=\"trace-item-bullet-value\">MODEL_TIMEOUT</span></span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"trace-grid-cell\">\n            <span class=\"trace-grid-label\">security</span>\n            <div class=\"trace-event is-tone-security\">\n              <span class=\"trace-event-leading\" aria-hidden=\"true\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 2.5l5.5 1.75v4.5c0 3-2.4 5.6-5.5 6.75-3.1-1.15-5.5-3.75-5.5-6.75v-4.5L9 2.5Z\"/></svg>\n              </span>\n              <div class=\"trace-event-card\">\n                <header class=\"trace-event-head\">\n                  <div class=\"trace-event-title-block\">\n                    <div class=\"trace-event-eyebrow\"><span class=\"trace-event-eyebrow-text\">Security</span></div>\n                    <span class=\"trace-event-title\">Jailbreak attempt intercepted</span>\n                  </div>\n                  <div class=\"trace-event-head-aside\">\n                    <span class=\"trace-event-time is-delta\">+610ms</span>\n                  </div>\n                </header>\n                <div class=\"trace-event-body\">\n                  <div class=\"trace-event-items\">\n                    <div class=\"trace-item-bullet is-tone-security\">\n                      <span class=\"trace-item-bullet-dot\" aria-hidden=\"true\"></span>\n                      <span class=\"trace-item-bullet-body\"><span class=\"trace-item-bullet-label\">Detection</span><span class=\"trace-item-bullet-value\">Prompt injection signature</span></span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"trace-grid-cell\">\n            <span class=\"trace-grid-label\">info</span>\n            <div class=\"trace-event is-tone-info\">\n              <span class=\"trace-event-leading\" aria-hidden=\"true\">\n                <span class=\"trace-event-step-glyph\">i</span>\n              </span>\n              <div class=\"trace-event-card\">\n                <header class=\"trace-event-head\">\n                  <div class=\"trace-event-title-block\">\n                    <div class=\"trace-event-eyebrow\"><span class=\"trace-event-eyebrow-text\">Meta</span></div>\n                    <span class=\"trace-event-title\">Message ID</span>\n                  </div>\n                  <div class=\"trace-event-head-aside\">\n                    <span class=\"trace-event-time is-delta\">+230ms</span>\n                  </div>\n                </header>\n                <div class=\"trace-event-body\">\n                  <div class=\"trace-event-items\">\n                    <div class=\"trace-item-code is-tone-info\">\n                      <span class=\"trace-item-code-glyph\" aria-hidden=\"true\">&lt;/&gt;</span>\n                      <code class=\"trace-item-code-value\">m_AUacy1ZXTWTzUuVca</code>\n                      <button type=\"button\" class=\"trace-item-code-copy\" aria-label=\"Copy value\">Copy</button>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"trace-grid-cell\">\n            <span class=\"trace-grid-label\">neutral</span>\n            <div class=\"trace-event is-tone-neutral\">\n              <span class=\"trace-event-leading\" aria-hidden=\"true\">\n                <span class=\"trace-event-step-glyph\">&bull;</span>\n              </span>\n              <div class=\"trace-event-card\">\n                <header class=\"trace-event-head\">\n                  <div class=\"trace-event-title-block\">\n                    <div class=\"trace-event-eyebrow\"><span class=\"trace-event-eyebrow-text\">Event</span></div>\n                    <span class=\"trace-event-title\">Generic event</span>\n                  </div>\n                  <div class=\"trace-event-head-aside\">\n                    <span class=\"trace-event-time\">01:58:02</span>\n                  </div>\n                </header>\n                <div class=\"trace-event-body\">\n                  <div class=\"trace-event-items\">\n                    <div class=\"trace-item-bullet is-tone-neutral\">\n                      <span class=\"trace-item-bullet-dot\" aria-hidden=\"true\"></span>\n                      <span class=\"trace-item-bullet-body\"><span class=\"trace-item-bullet-label\">Note</span><span class=\"trace-item-bullet-value\">Default tone</span></span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>",
    "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 `<Card flat>` (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"
  }
}