{
  "name": "CHANNEL_LABELS",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SessionCard.tsx",
  "chapterTag": "Kit chrome",
  "chapter": null,
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "SessionCard",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SessionCardProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "SessionChannel",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SessionSentiment",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SessionMetric",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { CHANNEL_LABELS } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "agent",
      "optional": false,
      "type": "ReactNode",
      "doc": "Agent name."
    },
    {
      "name": "agentInitials",
      "optional": true,
      "type": "string",
      "doc": "Two-letter avatar glyph."
    },
    {
      "name": "channel",
      "optional": false,
      "type": "SessionChannel",
      "doc": "Conversation channel — drives the channel chip + colour."
    },
    {
      "name": "timestamp",
      "optional": true,
      "type": "ReactNode",
      "doc": "When it happened."
    },
    {
      "name": "outcome",
      "optional": true,
      "type": "ReactNode",
      "doc": "Headline outcome (\"Meeting booked\")."
    },
    {
      "name": "outcomeTone",
      "optional": true,
      "type": "\"ok\" | \"neutral\"",
      "doc": "Outcome chip tone."
    },
    {
      "name": "sentiment",
      "optional": true,
      "type": "SessionSentiment",
      "doc": "Drives the left rail colour."
    },
    {
      "name": "metrics",
      "optional": true,
      "type": "SessionMetric[]",
      "doc": "Scannable metric strip (messages · duration · sources · sentiment)."
    },
    {
      "name": "summary",
      "optional": true,
      "type": "ReactNode",
      "doc": "One-paragraph summary."
    },
    {
      "name": "facts",
      "optional": true,
      "type": "ReactNode",
      "doc": "\"Key facts collected here\" slot — typically a row of chips/Badges."
    },
    {
      "name": "transcript",
      "optional": true,
      "type": "ReactNode",
      "doc": "Transcript content — typically a `<ChatTranscript>`. Collapsible."
    },
    {
      "name": "transcriptCount",
      "optional": true,
      "type": "ReactNode",
      "doc": "Count hint in the closed toggle label (\"Show transcript (18)\")."
    },
    {
      "name": "defaultTranscriptOpen",
      "optional": true,
      "type": "boolean",
      "doc": "Initial transcript open state (uncontrolled)."
    },
    {
      "name": "transcriptOpen",
      "optional": true,
      "type": "boolean",
      "doc": "Controlled transcript open state."
    },
    {
      "name": "onTranscriptToggle",
      "optional": true,
      "type": "(open: boolean) => void",
      "doc": "Fires when the transcript toggles."
    }
  ],
  "classesUsed": [
    "channel-chip",
    "session-card",
    "session-card-agent",
    "session-card-head",
    "session-card-id",
    "session-card-main",
    "session-card-metric",
    "session-card-metrics",
    "session-card-name",
    "session-card-outcome",
    "session-card-rail",
    "session-card-sub",
    "session-card-summary",
    "session-card-toggle",
    "session-card-transcript"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".channel-chip { display: inline-flex; align-items: center; gap: var(--s-1); font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 9px; border-radius: var(--r-sm); background: var(--bg-sunk); color: var(--fg-dim); }\n\n.session-card { display: flex; background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }\n\n.session-card-agent { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--info-soft); color: var(--info-text); font: 700 14px var(--f-display); flex: none; }\n\n.session-card-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }\n\n.session-card-id { min-width: 0; }\n\n.session-card-main { flex: 1; min-width: 0; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }\n\n.session-card-metric { display: flex; flex-direction: column; gap: 2px; }\n\n.session-card-metrics { display: flex; flex-wrap: wrap; gap: var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft); }\n\n.session-card-name { font: 700 15px/1.2 var(--f-display); color: var(--fg); }\n\n.session-card-outcome { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-1); font: 700 12px/1 var(--f-body); padding: 7px 13px; border-radius: var(--r-pill); white-space: nowrap; }\n\n.session-card-rail { width: 4px; flex: none; background: var(--hair); }\n\n.session-card-sub { font: 500 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-faint); margin-top: 2px; }\n\n.session-card-summary { font: 400 13.5px/1.55 var(--f-body); color: var(--fg-soft); }\n\n.session-card-toggle { align-self: flex-start; font: 600 11px/1 var(--f-body); color: var(--accent-text); background: var(--accent-soft); border: none; padding: 7px 12px; border-radius: var(--r-sm); cursor: pointer; }\n\n.session-card-transcript { border: 1px solid var(--hair-soft); border-radius: var(--r-md); background: var(--bg-sunk); padding: var(--s-3); }"
  }
}