{
  "name": "playground-streams-bridge",
  "kind": "block",
  "primary": "div",
  "page": "/apps/genui/app/streams-bridge/streams-bridge.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<div id=\"pg-shell\">\n      <div id=\"pg-toolbar\">\n        <row-ui gap=\"2\" align=\"center\">\n          <icon-ui name=\"plug\" color=\"muted\"></icon-ui>\n          <text-ui strong>Streams Bridge</text-ui>\n          <badge-ui id=\"pg-source-badge\" text=\"loading…\" variant=\"default\" size=\"sm\"></badge-ui>\n        </row-ui>\n        <row-ui gap=\"2\">\n          <button-ui id=\"pg-btn-refresh\" variant=\"ghost\" size=\"sm\" icon=\"arrows-clockwise\" text=\"Refresh\"></button-ui>\n          <a href=\"/site/getting-started/wiring\" target=\"_top\" style=\"text-decoration: none\">\n            <button-ui variant=\"ghost\" size=\"sm\" icon=\"book-open\" text=\"Docs\"></button-ui>\n          </a>\n        </row-ui>\n      </div>\n\n      <div id=\"pg-content\">\n        <div id=\"pg-intro\">\n          <h1 style=\"margin: 0 0 var(--a-space-2) 0; font-size: var(--a-ui-lg)\">One stream, two consumers — bridged into A2UI</h1>\n          <p style=\"margin: 0; color: var(--a-fg-muted); font-size: var(--a-ui-sm); line-height: 1.5\">\n            Both tiles below subscribe to the same <code>data-stream-id=\"rev-pg\"</code>, fed from <code>/site/mock/revenue.json</code>. The left tile renders a\n            <code>chart-ui</code> driven directly by the <code>data-stream-*</code> attribute trait — the trait writes the parsed response into the chart's\n            <code>.data</code> property and re-renders. The right tile is an <strong>A2UI surface</strong> built from <code>updateComponents</code> messages\n            whose props use <code>{path: '…'}</code> bindings; <code>bridgeStreamAsync</code> proxies the same stream signal into the surface's data model so\n            those bindings resolve — no second fetch (open DevTools' Network tab and confirm only one request per refresh). The bridge piggybacks on the chart's\n            refcount rather than holding its own; the DOM source remains the lifecycle owner.\n          </p>\n        </div>\n\n        <div id=\"pg-grid\">\n          <!-- LEFT — direct data-stream-* trait -->\n          <div class=\"pg-tile\">\n            <h3>Direct via <code>data-stream-src</code></h3>\n            <div id=\"chart-host\">\n              <chart-ui\n                id=\"pg-chart\"\n                type=\"area\"\n                x=\"month\"\n                y=\"revenue\"\n                data-stream-src=\"/site/mock/revenue.json\"\n                data-stream-path=\"data\"\n                data-stream-id=\"rev-pg\"\n                aria-label=\"Revenue chart fed via data-stream-src\"\n                style=\"display: block; width: 100%; height: 280px\"\n              ></chart-ui>\n            </div>\n          </div>\n\n          <!-- RIGHT — A2UI surface, bound via bridgeStreamAsync -->\n          <div class=\"pg-tile\">\n            <h3>Via <code>bridgeStreamAsync</code> → A2UI surface</h3>\n            <div id=\"a2ui-host\">\n              <empty-state-ui\n                icon=\"hourglass\"\n                heading=\"Waiting for stream…\"\n                description=\"The bridge will populate these bindings once the fetch resolves.\"\n              ></empty-state-ui>\n            </div>\n          </div>\n        </div>\n\n        <div id=\"pg-status\">\n          <div data-pg-status-row><strong>Stream id:</strong> <code id=\"pg-status-id\">id:rev-pg</code></div>\n          <div data-pg-status-row><strong>Stream signal:</strong> <span id=\"pg-status-signal\">—</span></div>\n          <div data-pg-status-row><strong>Surface dataModel:</strong> <code id=\"pg-status-model\">—</code></div>\n          <div data-pg-status-row><strong>DOM consumer refs:</strong> <span id=\"pg-status-refs\">—</span></div>\n          <div data-pg-status-row><strong>Last fetch:</strong> <span id=\"pg-status-fetched\">—</span></div>\n        </div>\n\n        <details id=\"pg-code-panel\">\n          <summary>Show the wiring (bridge call + A2UI messages)</summary>\n          <div>\n            <code-ui language=\"javascript\" id=\"pg-code-block\" style=\"font-size: var(--a-ui-sm)\"></code-ui>\n          </div>\n        </details>\n      </div>\n    </div>",
  "source": "apps/genui/app/streams-bridge/streams-bridge.contents.html",
  "metadata": {
    "domain": "agent",
    "description": "Streams bridge playground — LLM streaming proxy connection demo.",
    "keywords": [
      "playground",
      "streams",
      "bridge",
      "llm",
      "streaming",
      "proxy",
      "connection"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "plug",
      "component": "Icon",
      "name": "plug"
    },
    {
      "id": "text",
      "component": "Text",
      "strong": true,
      "textContent": "Streams Bridge"
    },
    {
      "id": "pg-source-badge",
      "component": "Badge",
      "size": "sm",
      "text": "loading…",
      "variant": "default"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "plug",
        "text",
        "pg-source-badge"
      ]
    },
    {
      "id": "pg-btn-refresh",
      "component": "Button",
      "icon": "arrows-clockwise",
      "size": "sm",
      "text": "Refresh",
      "variant": "ghost"
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "book-open",
      "size": "sm",
      "text": "Docs",
      "variant": "ghost"
    },
    {
      "id": "link",
      "component": "Link",
      "href": "/site/getting-started/wiring",
      "target": "_top",
      "children": [
        "button"
      ]
    },
    {
      "id": "row-2",
      "component": "Row",
      "gap": "2",
      "children": [
        "pg-btn-refresh",
        "link"
      ]
    },
    {
      "id": "pg-toolbar",
      "component": "Column",
      "children": [
        "row",
        "row-2"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "display",
      "textContent": "One stream, two consumers — bridged into A2UI"
    },
    {
      "id": "code",
      "component": "Code",
      "textContent": "data-stream-id=\"rev-pg\""
    },
    {
      "id": "code-2",
      "component": "Code",
      "textContent": "/site/mock/revenue.json"
    },
    {
      "id": "code-3",
      "component": "Code",
      "textContent": "chart-ui"
    },
    {
      "id": "code-4",
      "component": "Code",
      "textContent": "data-stream-*"
    },
    {
      "id": "code-5",
      "component": "Code",
      "textContent": ".data"
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "body",
      "textContent": "A2UI surface"
    },
    {
      "id": "code-6",
      "component": "Code",
      "textContent": "updateComponents"
    },
    {
      "id": "code-7",
      "component": "Code",
      "textContent": "{path: '…'}"
    },
    {
      "id": "code-8",
      "component": "Code",
      "textContent": "bridgeStreamAsync"
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "body",
      "textContent": "Both tiles below subscribe to the same , fed from . The left tile renders a driven directly by the attribute trait — the trait writes the parsed response into the chart's property and re-renders. The right tile is an built from messages whose props use bindings; proxies the same stream signal into the surface's data model so those bindings resolve — no second fetch (open DevTools' Network tab and confirm only one request per refresh). The bridge piggybacks on the chart's refcount rather than holding its own; the DOM source remains the lifecycle owner.",
      "children": [
        "code",
        "code-2",
        "code-3",
        "code-4",
        "code-5",
        "text-4",
        "code-6",
        "code-7",
        "code-8"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "text-2",
        "text-3"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "pg-intro",
      "component": "Card",
      "children": [
        "section"
      ]
    },
    {
      "id": "code-9",
      "component": "Code",
      "textContent": "data-stream-src"
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "heading",
      "textContent": "Direct via",
      "children": [
        "code-9"
      ]
    },
    {
      "id": "pg-chart",
      "component": "Chart",
      "type": "area",
      "x": "month",
      "y": "revenue",
      "data-stream-src": "/site/mock/revenue.json",
      "data-stream-path": "data",
      "data-stream-id": "rev-pg"
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "text-5",
        "pg-chart"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section-2"
      ]
    },
    {
      "id": "code-10",
      "component": "Code",
      "textContent": "bridgeStreamAsync"
    },
    {
      "id": "text-6",
      "component": "Text",
      "variant": "heading",
      "textContent": "Via → A2UI surface",
      "children": [
        "code-10"
      ]
    },
    {
      "id": "empty-state",
      "component": "EmptyState",
      "description": "The bridge will populate these bindings once the fetch resolves.",
      "heading": "Waiting for stream…",
      "icon": "hourglass"
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "text-6",
        "empty-state"
      ]
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "section-3"
      ]
    },
    {
      "id": "pg-grid",
      "component": "Column",
      "children": [
        "card",
        "card-2"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "variant": "body",
      "textContent": "Stream id:"
    },
    {
      "id": "pg-status-id",
      "component": "Code",
      "textContent": "id:rev-pg"
    },
    {
      "id": "column-4",
      "component": "Column",
      "data-pg-status-row": "",
      "children": [
        "text-7",
        "pg-status-id"
      ]
    },
    {
      "id": "text-8",
      "component": "Text",
      "variant": "body",
      "textContent": "Stream signal:"
    },
    {
      "id": "pg-status-signal",
      "component": "Text",
      "variant": "body",
      "textContent": "—"
    },
    {
      "id": "column-5",
      "component": "Column",
      "data-pg-status-row": "",
      "children": [
        "text-8",
        "pg-status-signal"
      ]
    },
    {
      "id": "text-9",
      "component": "Text",
      "variant": "body",
      "textContent": "Surface dataModel:"
    },
    {
      "id": "pg-status-model",
      "component": "Code",
      "textContent": "—"
    },
    {
      "id": "column-6",
      "component": "Column",
      "data-pg-status-row": "",
      "children": [
        "text-9",
        "pg-status-model"
      ]
    },
    {
      "id": "text-10",
      "component": "Text",
      "variant": "body",
      "textContent": "DOM consumer refs:"
    },
    {
      "id": "pg-status-refs",
      "component": "Text",
      "variant": "body",
      "textContent": "—"
    },
    {
      "id": "column-7",
      "component": "Column",
      "data-pg-status-row": "",
      "children": [
        "text-10",
        "pg-status-refs"
      ]
    },
    {
      "id": "text-11",
      "component": "Text",
      "variant": "body",
      "textContent": "Last fetch:"
    },
    {
      "id": "pg-status-fetched",
      "component": "Text",
      "variant": "body",
      "textContent": "—"
    },
    {
      "id": "column-8",
      "component": "Column",
      "data-pg-status-row": "",
      "children": [
        "text-11",
        "pg-status-fetched"
      ]
    },
    {
      "id": "pg-status",
      "component": "Column",
      "children": [
        "column-4",
        "column-5",
        "column-6",
        "column-7",
        "column-8"
      ]
    },
    {
      "id": "text-12",
      "component": "Text",
      "variant": "subsection",
      "textContent": "Show the wiring (bridge call + A2UI messages)"
    },
    {
      "id": "pg-code-block",
      "component": "Code",
      "language": "javascript"
    },
    {
      "id": "pg-code-panel",
      "component": "Accordion",
      "children": [
        "text-12",
        "pg-code-block"
      ]
    },
    {
      "id": "pg-content",
      "component": "Column",
      "children": [
        "pg-intro",
        "pg-grid",
        "pg-status",
        "pg-code-panel"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "children": [
        "pg-toolbar",
        "pg-content"
      ]
    }
  ]
}