{
  "name": "GoLiveCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/GoLiveCard.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "agent-frame",
  "elName": "Overview cards",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#agent-frame",
  "hasLiveDemo": false,
  "description": "The Overview card that answers \"how do people reach this agent, and how do\nI go live?\" — channel rows with live / not-yet states and a deep-link\naction into the agent's Channels tab.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "GoLiveCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "GoLiveCardProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "GoLiveChannel",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { GoLiveCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Card heading. Defaults to \"Where this agent talks\"."
    },
    {
      "name": "channels",
      "optional": false,
      "type": "GoLiveChannel[]",
      "doc": "Channel rows."
    },
    {
      "name": "action",
      "optional": true,
      "type": "ReactNode",
      "doc": "Call-to-action slot — typically a Button deep-linking to the agent's Channels tab."
    }
  ],
  "classesUsed": [
    "golive-action",
    "golive-card",
    "golive-channel",
    "golive-channel-icon",
    "golive-channel-name",
    "golive-channel-state",
    "golive-channels",
    "golive-glyph",
    "golive-head",
    "golive-title",
    "title"
  ],
  "examples": {
    "react": "<GoLiveCard\n  channels={[\n    { icon: <GlobeIcon />, name: \"Website widget\", state: \"Live on crefco.com\", live: true },\n    { icon: <PhoneIcon />, name: \"Phone & SMS\", state: \"Not connected yet\" },\n  ]}\n  action={<Button size=\"sm\" variant=\"secondary\">Open Channels</Button>}\n/>",
    "html": "<div style=\"display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;max-width:760px\"><div class=\"golive-card\"><div class=\"golive-head\"><span class=\"golive-glyph\"><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.5c2.5 1.5 4 4 4 7v3l-2 1.5h-4l-2-1.5v-3c0-3 1.5-5.5 4-7Z\"></path><circle cx=\"9\" cy=\"7.5\" r=\"1.25\"></circle><path d=\"M7 13.5l-1.5 2M11 13.5l1.5 2M9 14.5v1.5\"></path></svg></span><span class=\"golive-title\">Where this agent talks</span></div><ul class=\"golive-channels\"><li class=\"golive-channel\"><span class=\"golive-channel-icon\"><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\"><circle cx=\"9\" cy=\"9\" r=\"6\"></circle><path d=\"M3 9h12\"></path><path d=\"M9 3a4 6 0 0 1 0 12 M9 3a4 6 0 0 0 0 12\"></path></svg></span><span class=\"golive-channel-name\">Website widget</span><span class=\"golive-channel-state is-live\">Live on crefco.com</span></li><li class=\"golive-channel\"><span class=\"golive-channel-icon\"><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=\"M5.5 2.75h2l1 3-1.5 1.25c.75 2 2.5 3.75 4.5 4.5l1.25-1.5 3 1v2c0 .55-.45 1-1 1A11 11 0 0 1 4.5 3.75c0-.55.45-1 1-1Z\"></path></svg></span><span class=\"golive-channel-name\">Phone &amp; SMS</span><span class=\"golive-channel-state\">Not connected yet</span></li></ul><div class=\"golive-action\"><button class=\"btn btn-secondary btn-sm\">Open Channels</button></div></div><div class=\"recent-changes\"><span class=\"recent-changes-title\">Recent changes</span><ul class=\"recent-changes-list\"><li class=\"recent-change\"><span class=\"recent-change-glyph\"><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\"><circle cx=\"9\" cy=\"9\" r=\"6.25\"></circle><path d=\"M9 5.5V9l2.5 1.75\"></path></svg></span><span class=\"recent-change-text\">You added the key fact <code class=\"mono\">budget</code> to Discovery</span><span class=\"recent-change-when\">yesterday</span></li><li class=\"recent-change\"><span class=\"recent-change-glyph is-sage\"><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=\"M3.75 14.25L13 5\"></path><path d=\"M11.5 3.5l1 1M14.5 6.5l1 1\"></path><path d=\"M5.5 4.5l.5 1 1 .5-1 .5-.5 1-.5-1-1-.5 1-.5.5-1Z\"></path><path d=\"M14 11l.4.8.8.4-.8.4-.4.8-.4-.8-.8-.4.8-.4.4-.8Z\"></path></svg></span><span class=\"recent-change-text\">Sage tightened the Greeting job wording</span><span class=\"recent-change-when\">2 days ago</span><button type=\"button\" class=\"recent-change-undo\">Undo</button></li></ul></div></div>",
    "css": ".golive-action { margin-top: var(--s-3); }\n\n.golive-card {\n  background: var(--paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  padding: var(--s-4);\n}\n\n.golive-channel {\n  display: flex;\n  align-items: center;\n  gap: var(--s-2);\n  font-size: 0.88rem;\n  color: var(--fg);\n}\n\n.golive-channel-icon { display: inline-flex; color: var(--fg-soft); }\n\n.golive-channel-name { font-weight: 500; }\n\n.golive-channel-state { margin-left: auto; color: var(--fg-soft); text-align: right; }\n\n.golive-channels {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  gap: var(--s-2);\n}\n\n.golive-glyph { display: inline-flex; color: var(--accent-text-strong); }\n\n.golive-head {\n  display: flex;\n  align-items: center;\n  gap: var(--s-2);\n  margin-bottom: var(--s-3);\n}\n\n.golive-title { font: 600 0.92rem/1.3 var(--f-body); color: var(--fg); }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}