{
  "name": "SessionSummaryBand",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SessionSummaryBand.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "session-summary-band",
  "elName": "SessionSummaryBand",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#session-summary-band",
  "hasLiveDemo": false,
  "description": "The summary band atop a completed session — the contact-overview-consistent\nheader: a Sage AI summary, then Key facts · Memories · Handover & outcome.\nComposes `<KeyFactGrid>` + `<MemoryList>` + `<HandoverOutcome>`; the stateful\n\"expand memories\" control is passed in via `memoriesAction` (a `<MemoriesDialog>`),\nkeeping the band itself declarative.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SessionSummaryBand",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SessionSummaryBandProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SessionSummaryBand } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "summary",
      "optional": true,
      "type": "ReactNode",
      "doc": "The Sage AI summary prose."
    },
    {
      "name": "summaryTag",
      "optional": true,
      "type": "ReactNode",
      "doc": "Small tag beside the summary eyebrow (e.g. \"SAGE\")."
    },
    {
      "name": "keyFacts",
      "optional": false,
      "type": "KeyFact[]",
      "doc": "Structured facts captured this session."
    },
    {
      "name": "memories",
      "optional": false,
      "type": "Memory[]",
      "doc": "Memories captured; the band shows a preview, the dialog shows all."
    },
    {
      "name": "memoryPreview",
      "optional": true,
      "type": "number",
      "doc": "How many memories the preview shows. Default 2."
    },
    {
      "name": "handover",
      "optional": false,
      "type": "OutcomeEvent[]",
      "doc": "Webhooks fired + handover target."
    },
    {
      "name": "memoriesAction",
      "optional": true,
      "type": "ReactNode",
      "doc": "The memories-expand control — typically a `<MemoriesDialog>` launcher."
    }
  ],
  "classesUsed": [
    "session-summary-band",
    "ssb-card",
    "ssb-card-eb",
    "ssb-cards",
    "ssb-summary",
    "ssb-summary-eb",
    "ssb-summary-text",
    "ssb-tag"
  ],
  "examples": {
    "react": "<SessionSummaryBand\n  summary=\"Sarah asked about 5-seat pricing…\"\n  summaryTag=\"SAGE\"\n  keyFacts={[{ id: \"f1\", label: \"seats\", value: \"5\" }]}\n  memories={memories}\n  handover={[{ id: \"h1\", kind: \"handover\", label: \"Handed to journey block\", detail: \"Post-demo nurture\" }]}\n  memoriesAction={<MemoriesDialog memories={memories} />}\n/>",
    "html": "<div class=\"session-summary-band\" style=\"max-width:760px;\">\n  <div class=\"ssb-summary\">\n    <div class=\"ssb-summary-eb\">AI summary<span class=\"ssb-tag\">SAGE</span></div>\n    <p class=\"ssb-summary-text\">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.</p>\n  </div>\n  <div class=\"ssb-cards\">\n    <div class=\"ssb-card\">\n      <div class=\"ssb-card-eb\">Key facts</div>\n      <div class=\"key-fact-grid\" data-layout=\"list\">\n        <div class=\"kfg-row\"><span class=\"kfg-key\">seats</span><span class=\"kfg-val\">5</span></div>\n        <div class=\"kfg-row\"><span class=\"kfg-key\">plan</span><span class=\"kfg-val\">Scale</span></div>\n        <div class=\"kfg-row\"><span class=\"kfg-key\">handoff</span><span class=\"kfg-val\">Slack</span></div>\n      </div>\n    </div>\n    <div class=\"ssb-card\">\n      <div class=\"ssb-card-eb\">Memories</div>\n      <div class=\"memory-list\">\n        <div class=\"memory-row\"><div class=\"memory-body\"><div class=\"memory-text\">Prefers Slack for team handoffs</div><div class=\"memory-meta\"><span class=\"memory-source\">this session</span><span class=\"memory-conf\" data-conf=\"high\">high</span></div></div></div>\n        <div class=\"memory-row\"><div class=\"memory-body\"><div class=\"memory-text\">Evaluating for a 5-person CS team</div><div class=\"memory-meta\"><span class=\"memory-source\">this session</span><span class=\"memory-conf\" data-conf=\"high\">high</span></div></div></div>\n      </div>\n      <button type=\"button\" class=\"ssb-expand\">Expand all memories (5)</button>\n    </div>\n    <div class=\"ssb-card\">\n      <div class=\"ssb-card-eb\">Handover &amp; outcome</div>\n      <div class=\"handover-outcome\">\n        <div class=\"ho-row\" data-kind=\"webhook\"><span class=\"ho-ic\" aria-hidden=\"true\"></span><div class=\"ho-body\"><span class=\"ho-label\">CRM lead created</span><span class=\"ho-detail\">POST crm.acme.com/leads</span></div><span class=\"ho-status\">200</span></div>\n        <div class=\"ho-row\" data-kind=\"handover\"><span class=\"ho-ic\" aria-hidden=\"true\"></span><div class=\"ho-body\"><span class=\"ho-label\">Handed to journey block</span><span class=\"ho-detail\">Post-demo nurture</span></div></div>\n      </div>\n    </div>\n  </div>\n</div>",
    "css": ".session-summary-band { display: flex; flex-direction: column; gap: var(--s-3); }\n\n.ssb-card { border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--bg-paper); padding: var(--s-4); }\n\n.ssb-card-eb { font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-faint); margin-bottom: var(--s-3); }\n\n.ssb-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); }\n\n.ssb-summary { background: color-mix(in oklab, var(--info-soft) 55%, var(--bg-paper)); border: 1px solid color-mix(in oklab, var(--info-text) 18%, var(--hair)); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); }\n\n.ssb-summary-eb { display: flex; align-items: center; gap: var(--s-2); font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-faint); margin-bottom: var(--s-2); }\n\n.ssb-summary-text { font: 400 13.5px/1.6 var(--f-body); color: var(--fg-soft); margin: 0; }\n\n.ssb-tag { font: 600 9px/1 var(--f-mono); background: var(--info-soft); color: var(--info-text); padding: 3px 6px; border-radius: var(--r-sm); }"
  }
}