{
  "name": "AgentChannelStrip",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/AgentChannelStrip.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "agents-list",
  "elName": "Agents HQ &mdash; <em style=\"font-family:var(--f-serif); font-weight:400;\">5 agents &middot; 1,038 conversations across the live ones</em>",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#agents-list",
  "hasLiveDemo": false,
  "description": "Multi-channel icon strip. Composes a column of 22×22 chips indicating\nwhich channels (web / SMS / email / voice / WhatsApp) an agent\nsupports, a contact has been reached on, or a campaign touches.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "AgentChannelStrip",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "AgentChannelIcon",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "AgentChannelStripProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "AgentChannelIconProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { AgentChannelStrip } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Uppercase mono caption above the icon row. Optional — drop for contexts where the column header is supplied by the parent grid."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Icon chips. Use `<AgentChannelIcon>` children."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "ag-card-channels",
    "ag-card-channels-row",
    "ag-card-col-label",
    "ag-channel-icon",
    "title"
  ],
  "examples": {
    "react": "<AgentChannelStrip label=\"Channels\">\n  <AgentChannelIcon active title=\"Web chat\"><MessageSquareIcon /></AgentChannelIcon>\n  <AgentChannelIcon active title=\"SMS\"><SmartphoneIcon /></AgentChannelIcon>\n  <AgentChannelIcon active title=\"Email\"><MailIcon /></AgentChannelIcon>\n  <AgentChannelIcon title=\"Voice\"><PhoneIcon /></AgentChannelIcon>\n</AgentChannelStrip>",
    "html": "<div class=\"list-screen-frame\"><div class=\"list-screen ag-list\" role=\"region\" aria-label=\"Agents\">\n\n  <header class=\"list-screen-head\">\n    <div class=\"list-screen-head-title\">\n      <h2>Agents</h2>\n      <p>Your AI sales reps. Each one replies in under a minute &mdash; across chat, SMS, email, DMs, and CRM.</p>\n    </div>\n    <div class=\"list-screen-head-actions\">\n      <label class=\"ag-search\">\n        <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>\n        <input type=\"search\" placeholder=\"Search agents, IDs, key facts&hellip;\" />\n      </label>\n      <button type=\"button\" class=\"ag-new-button\">\n        <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M7 2.5v9M2.5 7h9\"/></svg>\n        New agent\n      </button>\n    </div>\n  </header>\n\n  <div class=\"list-screen-kpi-strip\">\n    <div class=\"kpi-delta-tile\">\n      <div class=\"kpi-delta-tile-head\">\n        <span class=\"kpi-delta-tile-label\">Conversations</span>\n      </div>\n      <div class=\"kpi-delta-tile-value\">1,038</div>\n      <div class=\"kpi-delta-tile-foot\">\n        <span class=\"kpi-delta-tile-delta is-tone-good\"><span class=\"kpi-delta-tile-arrow\">&uarr;</span>across 5 live agents</span>\n      </div>\n    </div>\n    <div class=\"kpi-delta-tile\">\n      <div class=\"kpi-delta-tile-head\">\n        <span class=\"kpi-delta-tile-label\">Qualified Leads</span>\n      </div>\n      <div class=\"kpi-delta-tile-value\">370</div>\n      <div class=\"kpi-delta-tile-foot\">\n        <span class=\"kpi-delta-tile-delta is-tone-good\"><span class=\"kpi-delta-tile-arrow\">&uarr;</span>35.6% qualification rate</span>\n      </div>\n    </div>\n    <div class=\"kpi-delta-tile\">\n      <div class=\"kpi-delta-tile-head\">\n        <span class=\"kpi-delta-tile-label\">Meetings Booked</span>\n      </div>\n      <div class=\"kpi-delta-tile-value\">51</div>\n      <div class=\"kpi-delta-tile-foot\">\n        <span class=\"kpi-delta-tile-delta is-tone-good\"><span class=\"kpi-delta-tile-arrow\">&uarr;</span>30.6% prev. week</span>\n      </div>\n    </div>\n    <div class=\"kpi-delta-tile\">\n      <div class=\"kpi-delta-tile-head\">\n        <span class=\"kpi-delta-tile-label\">Avg Reply Time</span>\n      </div>\n      <div class=\"kpi-delta-tile-value\">52s</div>\n      <div class=\"kpi-delta-tile-foot\">\n        <span class=\"kpi-delta-tile-delta is-tone-neutral\">p50</span>\n      </div>\n    </div>\n  </div>\n\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\">5</span></button>\n    <button type=\"button\" role=\"tab\">Live <span class=\"list-screen-tab-count\">2</span></button>\n    <button type=\"button\" role=\"tab\">Draft <span class=\"list-screen-tab-count\">1</span></button>\n    <button type=\"button\" role=\"tab\">Paused <span class=\"list-screen-tab-count\">1</span></button>\n    <button type=\"button\" role=\"tab\">Unpublished <span class=\"list-screen-tab-count\">1</span></button>\n    <div class=\"ag-list-tabs-aside\">\n      <button type=\"button\" class=\"ag-pill\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 3h12L9 8v4l-4-2V8z\"/></svg>Filter</button>\n      <button type=\"button\" class=\"ag-pill\">Sort &middot; Last update <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m3 5 4 4 4-4\"/></svg></button>\n    </div>\n  </div>\n\n  <div class=\"ag-card-stack\">\n\n    <!-- ────────── 1) Insurance Agent — Charlie · LIVE ────────── -->\n    <article class=\"ag-card\">\n      <span class=\"ag-card-avatar\" style=\"background:rgba(45,111,227,0.14); color:#2456B0;\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 22 22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 2 18 5v6c0 4-3 7-7 8-4-1-7-4-7-8V5z\"/><path d=\"M8 11l2 2 4-4\"/></svg>\n      </span>\n      <div class=\"ag-card-body\">\n        <div class=\"ag-card-title-row\">\n          Insurance Agent &mdash; Charlie\n          <span class=\"ag-card-tag\">Insurance</span>\n        </div>\n        <div class=\"ag-card-sub\">Inbound rep &middot; SMS qualifier for marine insurance</div>\n        <div class=\"ag-card-meta\">\n          <span>v3</span><span class=\"ag-meta-sep\">&middot;</span>\n          <span>Updated 13 Jun 2026</span>\n        </div>\n      </div>\n      <div class=\"ag-card-channels\">\n        <div class=\"ag-card-col-label\">Channels</div>\n        <div class=\"ag-card-channels-row\">\n          <span class=\"ag-channel-icon is-on\" title=\"Web chat\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg></span>\n          <span class=\"ag-channel-icon is-on\" title=\"SMS\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M3 3h8v6H6l-2 2V9H3z\"/></svg></span>\n          <span class=\"ag-channel-icon is-on\" title=\"Email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"10\" height=\"8\" rx=\"1\"/><path d=\"m2 4 5 4 5-4\"/></svg></span>\n          <span class=\"ag-channel-icon\" title=\"Voice\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3l2 1 1 3-2 1c1 2 2 3 4 4l1-2 3 1 1 2c-3 2-9 1-10-10z\"/></svg></span>\n        </div>\n      </div>\n      <div class=\"ag-card-spark\">\n        <div class=\"ag-card-col-label\">Last 7 days</div>\n        <svg class=\"ag-card-spark-svg\" viewBox=\"0 0 120 32\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n          <path class=\"area\" d=\"M0,26 L15,22 L30,18 L45,20 L60,12 L75,14 L90,6 L105,10 L120,4 L120,32 L0,32 Z\"/>\n          <path class=\"line\" d=\"M0,26 L15,22 L30,18 L45,20 L60,12 L75,14 L90,6 L105,10 L120,4\"/>\n        </svg>\n        <div class=\"ag-card-spark-metrics\">\n          <span><strong>412</strong>convs</span>\n          <span><strong>27</strong>booked</span>\n        </div>\n      </div>\n      <div class=\"ag-card-status\">\n        <div class=\"ag-card-col-label\">Status</div>\n        <span class=\"badge\"><span class=\"dot dot-green\"></span> Live</span>\n        <span class=\"ag-card-status-meta\">48s avg</span>\n      </div>\n      <div class=\"ag-card-actions\">\n        <button type=\"button\" class=\"ag-card-action\" aria-label=\"Open chat\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg></button>\n        <button type=\"button\" class=\"ag-card-action\" aria-label=\"Share\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"3.5\" cy=\"7\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"3.5\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"10.5\" r=\"1.5\"/><path d=\"M5 6L9 4M5 8l4 2\"/></svg></button>\n        <a href=\"#\" class=\"ag-card-open\">Open <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m5 3 4 4-4 4\"/></svg></a>\n      </div>\n    </article>\n\n    <!-- ────────── 2) SMS — Buy/Sell · LIVE (high volume) ────────── -->\n    <article class=\"ag-card\">\n      <span class=\"ag-card-avatar\" style=\"background:rgba(15,128,98,0.14); color:#0F8062;\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 22 22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 5h14v9H9l-3 3v-3H4z\"/></svg>\n      </span>\n      <div class=\"ag-card-body\">\n        <div class=\"ag-card-title-row\">\n          SMS &mdash; Buy / Sell\n          <span class=\"ag-card-tag\">Sales</span>\n          <span class=\"ag-card-tag\">Marine</span>\n        </div>\n        <div class=\"ag-card-sub\">Outbound SMS agent &middot; qualifies local brokerage leads</div>\n        <div class=\"ag-card-meta\">\n          <span>v6</span><span class=\"ag-meta-sep\">&middot;</span>\n          <span>Updated 22 May 2026</span>\n        </div>\n      </div>\n      <div class=\"ag-card-channels\">\n        <div class=\"ag-card-col-label\">Channels</div>\n        <div class=\"ag-card-channels-row\">\n          <span class=\"ag-channel-icon is-on\" title=\"SMS\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M3 3h8v6H6l-2 2V9H3z\"/></svg></span>\n          <span class=\"ag-channel-icon\" title=\"Web chat\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg></span>\n          <span class=\"ag-channel-icon\" title=\"Email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"10\" height=\"8\" rx=\"1\"/><path d=\"m2 4 5 4 5-4\"/></svg></span>\n        </div>\n      </div>\n      <div class=\"ag-card-spark\">\n        <div class=\"ag-card-col-label\">Last 7 days</div>\n        <svg class=\"ag-card-spark-svg\" viewBox=\"0 0 120 32\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n          <path class=\"area\" d=\"M0,28 L15,24 L30,16 L45,18 L60,10 L75,8 L90,12 L105,6 L120,8 L120,32 L0,32 Z\"/>\n          <path class=\"line\" d=\"M0,28 L15,24 L30,16 L45,18 L60,10 L75,8 L90,12 L105,6 L120,8\"/>\n        </svg>\n        <div class=\"ag-card-spark-metrics\">\n          <span><strong>612</strong>convs</span>\n          <span><strong>24</strong>booked</span>\n        </div>\n      </div>\n      <div class=\"ag-card-status\">\n        <div class=\"ag-card-col-label\">Status</div>\n        <span class=\"badge\"><span class=\"dot dot-green\"></span> Live</span>\n        <span class=\"ag-card-status-meta\">52s avg</span>\n      </div>\n      <div class=\"ag-card-actions\">\n        <button type=\"button\" class=\"ag-card-action\" aria-label=\"Open chat\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg></button>\n        <button type=\"button\" class=\"ag-card-action\" aria-label=\"Share\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"3.5\" cy=\"7\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"3.5\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"10.5\" r=\"1.5\"/><path d=\"M5 6L9 4M5 8l4 2\"/></svg></button>\n        <a href=\"#\" class=\"ag-card-open\">Open <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m5 3 4 4-4 4\"/></svg></a>\n      </div>\n    </article>\n\n    <!-- ────────── 3) SMS — Insurance · PAUSED ────────── -->\n    <article class=\"ag-card\">\n      <span class=\"ag-card-avatar\" style=\"background:#FEF3C7; color:#92400E;\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 22 22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"14\" rx=\"1\"/><rect x=\"12\" y=\"4\" width=\"4\" height=\"14\" rx=\"1\"/></svg>\n      </span>\n      <div class=\"ag-card-body\">\n        <div class=\"ag-card-title-row\">\n          SMS &mdash; Insurance\n        </div>\n        <div class=\"ag-card-sub\">Renewal nurture for existing policyholders</div>\n        <div class=\"ag-card-meta\">\n          <span>v2</span><span class=\"ag-meta-sep\">&middot;</span>\n          <span>Updated 09 May 2026</span>\n        </div>\n      </div>\n      <div class=\"ag-card-channels\">\n        <div class=\"ag-card-col-label\">Channels</div>\n        <div class=\"ag-card-channels-row\">\n          <span class=\"ag-channel-icon is-on\" title=\"SMS\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M3 3h8v6H6l-2 2V9H3z\"/></svg></span>\n        </div>\n      </div>\n      <div class=\"ag-card-spark\">\n        <div class=\"ag-card-col-label\">Last 7 days</div>\n        <svg class=\"ag-card-spark-svg is-flat\" viewBox=\"0 0 120 32\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n          <path class=\"area\" d=\"M0,20 L15,22 L30,19 L45,21 L60,20 L75,22 L90,21 L105,20 L120,22 L120,32 L0,32 Z\"/>\n          <path class=\"line\" d=\"M0,20 L15,22 L30,19 L45,21 L60,20 L75,22 L90,21 L105,20 L120,22\"/>\n        </svg>\n        <div class=\"ag-card-spark-metrics\">\n          <span><strong>0</strong>convs</span>\n          <span><strong>0</strong>booked</span>\n        </div>\n      </div>\n      <div class=\"ag-card-status\">\n        <div class=\"ag-card-col-label\">Status</div>\n        <span class=\"badge\"><span class=\"dot dot-amber\"></span> Paused</span>\n        <span class=\"ag-card-status-meta\">paused 2d ago</span>\n      </div>\n      <div class=\"ag-card-actions\">\n        <button type=\"button\" class=\"ag-card-action\" aria-label=\"Open chat\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg></button>\n        <button type=\"button\" class=\"ag-card-action\" aria-label=\"Share\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"3.5\" cy=\"7\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"3.5\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"10.5\" r=\"1.5\"/><path d=\"M5 6L9 4M5 8l4 2\"/></svg></button>\n        <a href=\"#\" class=\"ag-card-open\">Open <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m5 3 4 4-4 4\"/></svg></a>\n      </div>\n    </article>\n\n    <!-- ────────── 4) SMS — Ready to Buy or Sell? · UNPUBLISHED (OLD) ────────── -->\n    <article class=\"ag-card\">\n      <span class=\"ag-card-avatar\" style=\"background:rgba(123,63,184,0.14); color:#7B3FB8;\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 22 22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 5h14v9H9l-3 3v-3H3z\" opacity=\"0.5\"/><path d=\"M9 9h4M9 12h2\" opacity=\"0.4\"/></svg>\n      </span>\n      <div class=\"ag-card-body\">\n        <div class=\"ag-card-title-row\">\n          SMS &mdash; Ready to Buy or Sell? &nbsp;<span style=\"font:500 11px/1 var(--f-mono); color:var(--fg-faint); text-transform:uppercase; letter-spacing:0.06em;\">&mdash; OLD</span>\n          <span class=\"ag-card-tag\">Sales</span>\n        </div>\n        <div class=\"ag-card-sub\">Legacy version, replaced by Buy/Sell above</div>\n        <div class=\"ag-card-meta\">\n          <span>v1</span><span class=\"ag-meta-sep\">&middot;</span>\n          <span>Updated 28 Feb 2026</span>\n        </div>\n      </div>\n      <div class=\"ag-card-channels\">\n        <div class=\"ag-card-col-label\">Channels</div>\n        <div class=\"ag-card-channels-row\">\n          <span class=\"ag-channel-icon\" title=\"SMS\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M3 3h8v6H6l-2 2V9H3z\"/></svg></span>\n        </div>\n      </div>\n      <div class=\"ag-card-spark\">\n        <div class=\"ag-card-col-label\">Last 7 days</div>\n        <svg class=\"ag-card-spark-svg is-flat\" viewBox=\"0 0 120 32\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n          <path class=\"line\" d=\"M0,18 L120,18\" stroke-dasharray=\"2 3\"/>\n        </svg>\n        <div class=\"ag-card-spark-metrics\">\n          <span><strong>0</strong>convs</span>\n          <span><strong>0</strong>booked</span>\n        </div>\n      </div>\n      <div class=\"ag-card-status\">\n        <div class=\"ag-card-col-label\">Status</div>\n        <span class=\"badge\"><span class=\"dot dot-grey\"></span> Unpublished</span>\n        <span class=\"ag-card-status-meta\">archived</span>\n      </div>\n      <div class=\"ag-card-actions\">\n        <button type=\"button\" class=\"ag-card-action\" aria-label=\"Open chat\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg></button>\n        <button type=\"button\" class=\"ag-card-action\" aria-label=\"Share\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"3.5\" cy=\"7\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"3.5\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"10.5\" r=\"1.5\"/><path d=\"M5 6L9 4M5 8l4 2\"/></svg></button>\n        <a href=\"#\" class=\"ag-card-open\">Open <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m5 3 4 4-4 4\"/></svg></a>\n      </div>\n    </article>\n\n    <!-- ────────── 5) Mortgage Pre-Qual · DRAFT ────────── -->\n    <article class=\"ag-card\">\n      <span class=\"ag-card-avatar\" style=\"background:var(--accent-soft); color:var(--accent);\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 22 22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 18V9l7-5 7 5v9\"/><path d=\"M9 18v-5h4v5\"/></svg>\n      </span>\n      <div class=\"ag-card-body\">\n        <div class=\"ag-card-title-row\">\n          Mortgage Pre-Qual\n          <span class=\"ag-card-tag\">Mortgage</span>\n        </div>\n        <div class=\"ag-card-sub\">Webchat + text handoff for first-home buyers</div>\n        <div class=\"ag-card-meta\">\n          <span>v0 draft</span><span class=\"ag-meta-sep\">&middot;</span>\n          <span>Updated today</span>\n        </div>\n      </div>\n      <div class=\"ag-card-channels\">\n        <div class=\"ag-card-col-label\">Channels</div>\n        <div class=\"ag-card-channels-row\">\n          <span class=\"ag-channel-icon is-on\" title=\"Web chat\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg></span>\n          <span class=\"ag-channel-icon is-on\" title=\"SMS\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M3 3h8v6H6l-2 2V9H3z\"/></svg></span>\n        </div>\n      </div>\n      <div class=\"ag-card-spark\">\n        <div class=\"ag-card-col-label\">Last 7 days</div>\n        <svg class=\"ag-card-spark-svg is-flat\" viewBox=\"0 0 120 32\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n          <path class=\"area\" d=\"M0,28 L60,26 L120,24 L120,32 L0,32 Z\"/>\n          <path class=\"line\" d=\"M0,28 L60,26 L120,24\"/>\n        </svg>\n        <div class=\"ag-card-spark-metrics\">\n          <span><strong>14</strong>convs</span>\n          <span><strong>2</strong>booked</span>\n        </div>\n      </div>\n      <div class=\"ag-card-status\">\n        <div class=\"ag-card-col-label\">Status</div>\n        <span class=\"badge\"><span class=\"dot dot-grey\"></span> Draft</span>\n        <span class=\"ag-card-status-meta\">never published</span>\n      </div>\n      <div class=\"ag-card-actions\">\n        <button type=\"button\" class=\"ag-card-action\" aria-label=\"Open chat\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg></button>\n        <button type=\"button\" class=\"ag-card-action\" aria-label=\"Share\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"3.5\" cy=\"7\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"3.5\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"10.5\" r=\"1.5\"/><path d=\"M5 6L9 4M5 8l4 2\"/></svg></button>\n        <a href=\"#\" class=\"ag-card-open\">Open <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m5 3 4 4-4 4\"/></svg></a>\n      </div>\n    </article>\n\n  </div>\n\n  <footer class=\"list-screen-foot is-centered\">Showing 5 of 5</footer>\n\n</div></div>",
    "css": ".ag-card-channels {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0;\n  min-width: 88px;\n}\n\n.ag-card-channels-row {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.ag-card-col-label {\n  font: 500 9.5px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--fg-faint);\n  margin-bottom: 6px;\n}\n\n.ag-channel-icon {\n  width: 22px;\n  height: 22px;\n  border-radius: 6px;\n  background: var(--bg-warm);\n  border: 1px solid var(--hair);\n  color: var(--fg-soft);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}