{
  "name": "SessionsOverviewPage",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SessionsOverviewPage.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "sessions-overview",
  "elName": "SessionsOverviewPage",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#sessions-overview",
  "hasLiveDemo": false,
  "description": "The top-level Sessions overview — every agent conversation, filterable, in the\nsame chrome as the Contacts page. Composes the kit's `.list-screen` + `.tbl`,\na date-range, a stat strip, the six state tabs, a filter slot (drop in\n`<FilterPopover>` + `<FilterChipGroup>` per dimension), and the session table\nwith Human-takeover / Needs-attention flags.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "SessionsOverviewPage",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SessionsOverviewPageProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "SessionOverviewRow",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SessionFlag",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SessionRowAction",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "SessionLifecycle",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SessionsStat",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SessionsTab",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "DateRangeOption",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { SessionsOverviewPage } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "description",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "dateRange",
      "optional": true,
      "type": "{ options: DateRangeOption[]",
      "doc": "Header date-range segmented control, scoping stats + table."
    },
    {
      "name": "value",
      "optional": false,
      "type": "string",
      "doc": ""
    },
    {
      "name": "onChange",
      "optional": true,
      "type": "(id: string) => void }",
      "doc": ""
    },
    {
      "name": "stats",
      "optional": true,
      "type": "SessionsStat[]",
      "doc": ""
    },
    {
      "name": "tabs",
      "optional": false,
      "type": "SessionsTab[]",
      "doc": ""
    },
    {
      "name": "activeTab",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "defaultActiveTab",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "onTabChange",
      "optional": true,
      "type": "(id: string) => void",
      "doc": ""
    },
    {
      "name": "searchPlaceholder",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "filters",
      "optional": true,
      "type": "ReactNode",
      "doc": "The filter row — compose `<FilterPopover>` + `<FilterChipGroup>` per dimension."
    },
    {
      "name": "sessions",
      "optional": false,
      "type": "SessionOverviewRow[]",
      "doc": ""
    },
    {
      "name": "pagination",
      "optional": true,
      "type": "ReactNode",
      "doc": "Pagination slot rendered in the footer."
    },
    {
      "name": "onRowOpen",
      "optional": true,
      "type": "(id: string) => void",
      "doc": ""
    },
    {
      "name": "onRowAction",
      "optional": true,
      "type": "(id: string) => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "av",
    "badge",
    "channel-chip",
    "ct-search",
    "dot",
    "dot-blue",
    "dot-pink",
    "list-screen",
    "list-screen-foot",
    "list-screen-frame",
    "list-screen-head",
    "list-screen-head-actions",
    "list-screen-head-title",
    "list-screen-tab-count",
    "list-screen-tabs",
    "list-screen-toolbar",
    "mono",
    "ss-action",
    "ss-daterange",
    "ss-flag",
    "ss-outcome",
    "ss-overview",
    "ss-reason",
    "ss-sdot",
    "ss-stat",
    "ss-stat-delta",
    "ss-stat-k",
    "ss-stat-m",
    "ss-stat-v",
    "ss-stats",
    "ss-statuscell",
    "ss-tab-dot",
    "tab",
    "tbl",
    "tbl-icon",
    "tbl-mono",
    "tbl-name",
    "tbl-person",
    "tbl-right",
    "tbl-sub",
    "tbl-wrap",
    "title"
  ],
  "examples": {
    "react": "<SessionsOverviewPage\n  tabs={[{ id: \"all\", label: \"All\", count: 52 }, { id: \"live\", label: \"Live\", count: 3, tone: \"live\" }]}\n  stats={[{ label: \"Sessions\", value: \"1,284\", delta: \"▲ 12%\", deltaTone: \"good\" }]}\n  sessions={rows}\n  filters={<FilterPopover triggerLabel=\"Status\">…</FilterPopover>}\n/>",
    "html": "<div class=\"ss-overview\">\n<div class=\"list-screen-frame\"><div class=\"list-screen\" role=\"region\" aria-label=\"Sessions\">\n  <header class=\"list-screen-head\">\n    <div class=\"list-screen-head-title\"><h2>Sessions</h2><p>Every conversation your agents have run &mdash; live, needing you, queued, or done.</p></div>\n    <div class=\"list-screen-head-actions\"><div class=\"ss-daterange\" role=\"group\" aria-label=\"Date range\"><button type=\"button\">Today</button><button type=\"button\" class=\"is-active\">7 days</button><button type=\"button\">30 days</button></div></div>\n  </header>\n  <div class=\"ss-stats\">\n    <div class=\"ss-stat\"><div class=\"ss-stat-k\">Sessions</div><div class=\"ss-stat-v\">1,284 <span class=\"ss-stat-delta\" data-tone=\"good\">&uarr; 12%</span></div></div>\n    <div class=\"ss-stat\"><div class=\"ss-stat-k\">Goal completion</div><div class=\"ss-stat-v\">38% <span class=\"ss-stat-delta\" data-tone=\"good\">&uarr; 4 pts</span></div><div class=\"ss-stat-m\">487 hit &ge;1 goal</div></div>\n    <div class=\"ss-stat\" data-tone=\"takeover\"><div class=\"ss-stat-k\">Awaiting takeover</div><div class=\"ss-stat-v\">2</div><div class=\"ss-stat-m\">Human needed now</div></div>\n    <div class=\"ss-stat\" data-tone=\"attention\"><div class=\"ss-stat-k\">Needs attention</div><div class=\"ss-stat-v\">9 <span class=\"ss-stat-delta\" data-tone=\"warn\">&uarr; 3</span></div><div class=\"ss-stat-m\">Flagged to review</div></div>\n  </div>\n  <div class=\"list-screen-tabs\" role=\"tablist\">\n    <button type=\"button\" class=\"is-active\" role=\"tab\" aria-selected=\"true\">All <span class=\"list-screen-tab-count\">52</span></button>\n    <button type=\"button\" role=\"tab\"><span class=\"ss-tab-dot\" aria-hidden=\"true\"></span>Live <span class=\"list-screen-tab-count\">3</span></button>\n    <button type=\"button\" role=\"tab\" data-tone=\"takeover\">Human takeover <span class=\"list-screen-tab-count\">2</span></button>\n    <button type=\"button\" role=\"tab\" data-tone=\"attention\">Needs attention <span class=\"list-screen-tab-count\">9</span></button>\n    <button type=\"button\" role=\"tab\">Follow-up queued <span class=\"list-screen-tab-count\">5</span></button>\n    <button type=\"button\" role=\"tab\">Completed <span class=\"list-screen-tab-count\">42</span></button>\n  </div>\n  <div class=\"list-screen-toolbar\">\n    <label class=\"ct-search\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"6\" cy=\"6\" r=\"3.5\"/><line x1=\"8.5\" y1=\"8.5\" x2=\"12\" y2=\"12\"/></svg><input type=\"search\" placeholder=\"Search contact, keyword, or session id&hellip;\"/></label>\n    <div class=\"filter-popover\"><button type=\"button\" class=\"filter-popover-trigger\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M1 2.5h12l-4.5 5.5v3l-3 1.5v-4.5L1 2.5z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"/></svg><span>Status</span><span class=\"filter-popover-count\">2</span></button></div>\n    <div class=\"filter-popover\"><button type=\"button\" class=\"filter-popover-trigger\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M1 2.5h12l-4.5 5.5v3l-3 1.5v-4.5L1 2.5z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"/></svg><span>Channel</span></button></div>\n    <div class=\"filter-popover\"><button type=\"button\" class=\"filter-popover-trigger\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M1 2.5h12l-4.5 5.5v3l-3 1.5v-4.5L1 2.5z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"/></svg><span>Attention reason</span></button></div>\n  </div>\n  <div class=\"tbl-wrap is-flush\"><table class=\"tbl\">\n    <thead><tr><th class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select all\"/></th><th>Contact</th><th>Status</th><th>Channel</th><th>Outcome</th><th>Msgs</th><th>Last activity</th><th class=\"tbl-right\"></th></tr></thead>\n    <tbody>\n      <tr><td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\"/></td><td><div class=\"tbl-person\"><span class=\"av\" style=\"background:rgba(15,128,98,0.14); color:#0F8062;\">SO</span><div><div class=\"tbl-name\"><span class=\"ss-sdot\" data-sentiment=\"positive\" aria-hidden=\"true\"></span>Sarah Okafor</div><div class=\"tbl-sub\"><span class=\"mono\">+1 &bull;&bull;&bull; 4821</span></div></div></div></td><td><div class=\"ss-statuscell\"><span class=\"badge\"><span class=\"dot dot-pink\"></span>Live</span></div></td><td><span class=\"channel-chip\" data-channel=\"webchat\">Webchat</span></td><td><span class=\"ss-outcome\">In progress&hellip;</span></td><td data-label=\"Msgs\"><span class=\"mono tbl-mono\">12</span></td><td data-label=\"Last activity\"><span class=\"mono tbl-mono\">now</span></td><td class=\"tbl-right\"><button class=\"tbl-icon\" type=\"button\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td></tr>\n      <tr data-flag=\"takeover\"><td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\"/></td><td><div class=\"tbl-person\"><span class=\"av\" style=\"background:rgba(193,52,73,0.13); color:#C13449;\">MR</span><div><div class=\"tbl-name\"><span class=\"ss-sdot\" data-sentiment=\"negative\" aria-hidden=\"true\"></span>Marcus Reid</div><div class=\"tbl-sub\"><span class=\"mono\">+1 &bull;&bull;&bull; 7702</span></div></div></div></td><td><div class=\"ss-statuscell\"><span class=\"badge\"><span class=\"dot dot-pink\"></span>Live</span><span class=\"ss-flag\" data-kind=\"takeover\">Human takeover</span><span class=\"ss-reason\">Customer asked for a human</span></div></td><td><span class=\"channel-chip\" data-channel=\"sms\">SMS</span></td><td><button type=\"button\" class=\"ss-action\" data-tone=\"takeover\">Take over &rarr;</button></td><td data-label=\"Msgs\"><span class=\"mono tbl-mono\">7</span></td><td data-label=\"Last activity\"><span class=\"mono tbl-mono\">2m</span></td><td class=\"tbl-right\"><button class=\"tbl-icon\" type=\"button\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td></tr>\n      <tr data-flag=\"attention\"><td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\"/></td><td><div class=\"tbl-person\"><span class=\"av\" style=\"background:rgba(0,0,0,0.06); color:var(--fg-dim);\">NC</span><div><div class=\"tbl-name\"><span class=\"ss-sdot\" data-sentiment=\"negative\" aria-hidden=\"true\"></span>Nadia Cole</div><div class=\"tbl-sub\"><span class=\"mono\">webchat &middot; anon</span></div></div></div></td><td><div class=\"ss-statuscell\"><span class=\"badge\"><span class=\"dot\"></span>Completed</span><span class=\"ss-flag\" data-kind=\"attention\">Needs attention</span><span class=\"ss-reason\">Rules monitor blocked 2 replies</span></div></td><td><span class=\"channel-chip\" data-channel=\"webchat\">Webchat</span></td><td><button type=\"button\" class=\"ss-action\" data-tone=\"review\">Review &rarr;</button></td><td data-label=\"Msgs\"><span class=\"mono tbl-mono\">14</span></td><td data-label=\"Last activity\"><span class=\"mono tbl-mono\">26m</span></td><td class=\"tbl-right\"><button class=\"tbl-icon\" type=\"button\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td></tr>\n      <tr><td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\"/></td><td><div class=\"tbl-person\"><span class=\"av\" style=\"background:rgba(15,128,98,0.14); color:#0F8062;\">TB</span><div><div class=\"tbl-name\"><span class=\"ss-sdot\" data-sentiment=\"positive\" aria-hidden=\"true\"></span>Tom Bell</div><div class=\"tbl-sub\"><span class=\"mono\">+1 &bull;&bull;&bull; 5560</span></div></div></div></td><td><div class=\"ss-statuscell\"><span class=\"badge\"><span class=\"dot\"></span>Completed</span></div></td><td><span class=\"channel-chip\" data-channel=\"sms\">SMS</span></td><td><span class=\"ss-outcome\">&check; Qualified</span></td><td data-label=\"Msgs\"><span class=\"mono tbl-mono\">9</span></td><td data-label=\"Last activity\"><span class=\"mono tbl-mono\">5h</span></td><td class=\"tbl-right\"><button class=\"tbl-icon\" type=\"button\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td></tr>\n    </tbody>\n  </table></div>\n  <div class=\"list-screen-foot\"><span class=\"mono\" style=\"color:var(--fg-faint); font-size:12px;\">1&ndash;8 of 52 sessions</span></div>\n</div></div>\n</div>",
    "css": ".av {\n  width: 32px; height: 32px; border-radius: 50%;\n  display: inline-flex; align-items: center; justify-content: center;\n  font: 600 12px/1 var(--f-display); letter-spacing: 0.02em;\n  flex-shrink: 0;\n  overflow: hidden;                           /* clip image children cleanly */\n  /* v1.12.0 (R11-2): default fill so initials are legible without consumers\n     having to think about background. Pre-1.12.0 `.av` was background-less;\n     on a same-tone page wash (e.g. warm-1) initials rendered invisible.\n     Image children cover this fill via `overflow: hidden` clipping. */\n  background: var(--bg-warm);\n  color: var(--fg-soft);\n}\n\n.badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  white-space: nowrap;\n  padding: 3px 8px;\n  border-radius: var(--r-pill);\n  font: 500 11.5px/1.2 var(--f-body);\n  background: var(--hair-soft);\n  color: var(--fg);\n  border: 1px solid transparent;\n}\n\n.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.ct-search { position: relative; min-width: 280px; flex: 0 1 320px; }\n\n.dot {\n  width: 8px; height: 8px; border-radius: 50%;\n  display: inline-block; flex-shrink: 0; position: relative;\n}\n\n.dot-blue { background: var(--info);    box-shadow: 0 0 0 3px color-mix(in oklab, var(--info)    22%, transparent); }\n\n.dot-pink { background: var(--accent);  box-shadow: 0 0 0 3px var(--accent-soft); }\n\n.list-screen {\n  min-width: 1080px;\n  min-height: 680px;\n  display: flex; flex-direction: column;\n  background: var(--bg-paper);\n}\n\n.list-screen-foot {\n  padding: var(--s-3) var(--s-6);\n  display: flex; align-items: center; justify-content: space-between;\n  font: 500 11.5px/1 var(--f-mono); color: var(--fg-faint);\n  border-top: 1px solid var(--hair);\n}\n\n.list-screen-frame {\n  overflow-x: auto;\n  border-radius: var(--r-lg);\n  border: 1px solid var(--hair);\n  background: var(--bg-2);\n  scrollbar-width: thin;\n}\n\n.list-screen-head {\n  padding: var(--s-5) var(--s-6) var(--s-4);\n  display: flex; align-items: flex-start; gap: var(--s-4);\n  flex-wrap: wrap;\n}\n\n.list-screen-head-actions {\n  display: inline-flex; align-items: center; gap: var(--s-3);\n  flex-wrap: wrap;\n  margin-left: auto; /* pin actions (KPI + buttons) to the head's right edge, level with the toolbar + table */\n}\n\n.list-screen-head-title { flex: 1; min-width: 0; max-width: 620px; }\n\n.list-screen-tab-count {\n  font: 500 11px/1 var(--f-mono); color: var(--fg-faint);\n  background: var(--bg-warm); padding: 2px 7px;\n  border-radius: var(--r-pill);\n}\n\n.list-screen-tabs {\n  display: flex; gap: var(--s-4); align-items: flex-end;\n  padding: 0 var(--s-6);\n  border-bottom: 1px solid var(--hair);\n}\n\n.list-screen-toolbar {\n  padding: var(--s-3) var(--s-6);\n  display: flex; align-items: center; gap: var(--s-3);\n  flex-wrap: wrap;\n}\n\n.mono { font-family: var(--f-mono); }\n\n.ss-action { font: 600 12px/1 var(--f-body); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; color: var(--fg); }\n\n.ss-daterange { display: inline-flex; border: 1px solid var(--hair); border-radius: var(--r-md); overflow: hidden; background: var(--bg-paper); }\n\n.ss-flag { display: inline-flex; align-items: center; font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 7px; border-radius: var(--r-sm); }\n\n.ss-outcome { font: 500 12.5px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.ss-overview { display: block; }\n\n.ss-reason { font: 500 10.5px/1.3 var(--f-body); color: var(--fg-faint); }\n\n.ss-sdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; background: var(--fg-faint); }\n\n.ss-stat { border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--bg-paper); padding: var(--s-3) var(--s-4); }\n\n.ss-stat-delta { font: 600 11px/1 var(--f-"
  }
}