{
  "name": "RecentChangesList",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/RecentChangesList.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's accountability card — recent human and Sage edits to the\nworking copy, each timestamped; Sage entries carry an Undo so the copilot\nstays answerable on the agent's home page.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "RecentChangesList",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "RecentChangesListProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "RecentChange",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { RecentChangesList } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Card heading. Defaults to \"Recent changes\"."
    },
    {
      "name": "changes",
      "optional": false,
      "type": "RecentChange[]",
      "doc": ""
    }
  ],
  "classesUsed": [
    "recent-change",
    "recent-change-glyph",
    "recent-change-text",
    "recent-change-undo",
    "recent-change-when",
    "recent-changes",
    "recent-changes-list",
    "recent-changes-title",
    "title"
  ],
  "examples": {
    "react": "<RecentChangesList\n  changes={[\n    { text: \"You added the key fact budget to Discovery\", when: \"yesterday\" },\n    { text: \"Sage tightened the Greeting job wording\", when: \"2 days ago\", by: \"sage\", onUndo: undo },\n  ]}\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": ".recent-change {\n  display: flex;\n  align-items: center;\n  gap: var(--s-2);\n  font-size: 0.86rem;\n  color: var(--fg);\n  min-width: 0;\n}\n\n.recent-change-glyph { display: inline-flex; color: var(--fg-faint); flex-shrink: 0; }\n\n.recent-change-text { min-width: 0; }\n\n.recent-change-undo {\n  border: 0;\n  background: none;\n  padding: 0;\n  font: 600 0.86rem/1 var(--f-body);\n  color: var(--accent-text-strong);\n  cursor: pointer;\n}\n\n.recent-change-when { margin-left: auto; white-space: nowrap; color: var(--fg-faint); }\n\n.recent-changes {\n  background: var(--paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  padding: var(--s-4);\n}\n\n.recent-changes-list {\n  list-style: none;\n  margin: var(--s-3) 0 0;\n  padding: 0;\n  display: grid;\n  gap: var(--s-2);\n}\n\n.recent-changes-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; }"
  }
}