@seed-ship/mcp-ui-solid 6.19.1 → 6.20.0

package/dist/components/StreamingUIRenderer.cjs

@@ -5,7 +5,7 @@ const solidJs = require("solid-js");
 const useStreamingUI = require("../hooks/useStreamingUI.cjs");
 const UIResourceRenderer = require("./UIResourceRenderer.cjs");
 const MCPUIStringsContext = require("../context/MCPUIStringsContext.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<span class="text-sm text-text-secondary"><!$><!/> / <!$><!/>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class=mt-2><div class="h-1 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="animate-progress-indeterminate h-full w-1/3 bg-brand-primary">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-2 flex items-center justify-between"><span class="text-sm font-medium text-text-primary"></span><!$><!/></div><div class="h-2 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="h-full bg-brand-primary transition-all duration-300 ease-out"></div></div><!$><!/>`), _tmpl$4 = /* @__PURE__ */ web.template(`<button type=button class="mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover">`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class="mb-4 rounded-lg border border-border-error bg-error-subtle p-4"><div class="mb-2 flex items-center gap-2"><svg class="h-5 w-5 text-error-primary"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="font-medium text-error-primary"></span></div><p class="text-sm text-text-secondary"></p><!$><!/>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div><div class="font-medium text-text-primary">Cost</div><div>$<!$><!/>`), _tmpl$7 = /* @__PURE__ */ web.template(`<div><div class="font-medium text-text-primary">Cached</div><div class=text-success-primary>Yes`), _tmpl$8 = /* @__PURE__ */ web.template(`<div class="mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary"><div class="grid grid-cols-2 gap-4 md:grid-cols-4"><div><div class="font-medium text-text-primary">Provider</div><div></div></div><div><div class="font-medium text-text-primary">Model</div><div></div></div><div><div class="font-medium text-text-primary">Execution Time</div><div><!$><!/>ms</div></div><!$><!/><div><div class="font-medium text-text-primary">TTFB</div><div><!$><!/>ms</div></div><!$><!/>`), _tmpl$9 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/><div class="grid grid-cols-12 gap-4"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$0 = /* @__PURE__ */ web.template(`<div>`), _tmpl$1 = /* @__PURE__ */ web.template(`<div class="col-span-12 md:col-span-6 lg:col-span-4"><div class="animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-4 h-6 w-1/2 rounded bg-surface-tertiary"></div><div class=space-y-3><div class="h-4 rounded bg-surface-tertiary"></div><div class="h-4 w-5/6 rounded bg-surface-tertiary"></div><div class="h-4 w-4/6 rounded bg-surface-tertiary"></div></div><div class="mt-4 h-32 rounded bg-surface-tertiary">`);
+var _tmpl$ = /* @__PURE__ */ web.template(`<span class="text-sm text-text-secondary"><!$><!/> / <!$><!/>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class=mt-2><div class="h-1 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="animate-progress-indeterminate h-full w-1/3 bg-brand-primary">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-2 flex items-center justify-between"><span class="text-sm font-medium text-text-primary"></span><!$><!/></div><div class="h-2 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="h-full bg-brand-primary transition-all duration-300 ease-out"></div></div><!$><!/>`), _tmpl$4 = /* @__PURE__ */ web.template(`<button type=button class="mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover">`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class="mb-4 rounded-lg border border-border-error bg-error-subtle p-4"><div class="mb-2 flex items-center gap-2"><svg class="h-5 w-5 text-error-primary"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="font-medium text-error-primary"></span></div><p class="text-sm text-text-secondary"></p><!$><!/>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div><div class="font-medium text-text-primary"></div><div>`), _tmpl$7 = /* @__PURE__ */ web.template(`<div><div class="font-medium text-text-primary"></div><div class=text-success-primary>`), _tmpl$8 = /* @__PURE__ */ web.template(`<div class="mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary"><div class="grid grid-cols-2 gap-4 md:grid-cols-4"><div><div class="font-medium text-text-primary"></div><div></div></div><div><div class="font-medium text-text-primary"></div><div></div></div><div><div class="font-medium text-text-primary"></div><div><!$><!/>ms</div></div><!$><!/><div><div class="font-medium text-text-primary"></div><div><!$><!/>ms</div></div><!$><!/>`), _tmpl$9 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/><div class="grid grid-cols-12 gap-4"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$0 = /* @__PURE__ */ web.template(`<div>`), _tmpl$1 = /* @__PURE__ */ web.template(`<div class="col-span-12 md:col-span-6 lg:col-span-4"><div class="animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-4 h-6 w-1/2 rounded bg-surface-tertiary"></div><div class=space-y-3><div class="h-4 rounded bg-surface-tertiary"></div><div class="h-4 w-5/6 rounded bg-surface-tertiary"></div><div class="h-4 w-4/6 rounded bg-surface-tertiary"></div></div><div class="mt-4 h-32 rounded bg-surface-tertiary">`);
 function asFullWidth(component) {
   return {
     ...component,
@@ -16,6 +16,49 @@ function asFullWidth(component) {
   };
 }
 function StreamingUIRenderer(props) {
+  const strings = MCPUIStringsContext.useMCPUIStrings();
+  const messages = {
+    get initializing() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.initializing) ?? strings.streamInitializing;
+    },
+    get connecting() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.connecting) ?? strings.streamConnecting;
+    },
+    get loadingComponent() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.loadingComponent) ?? strings.streamLoadingComponent;
+    },
+    get dashboardLoaded() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.dashboardLoaded) ?? strings.streamDashboardLoaded;
+    },
+    get errorProgress() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.errorProgress) ?? strings.streamErrorProgress;
+    },
+    get connectionFailed() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.connectionFailed) ?? strings.streamConnectionFailed;
+    },
+    get requestFailed() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.requestFailed) ?? strings.streamRequestFailed;
+    },
+    get emptyResponse() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.emptyResponse) ?? strings.streamEmptyResponse;
+    },
+    get serverSide() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.serverSide) ?? strings.streamServerSide;
+    },
+    get unknownError() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.unknownError) ?? strings.streamUnknownError;
+    }
+  };
   const {
     components,
     isLoading,
@@ -31,9 +74,9 @@ function StreamingUIRenderer(props) {
     options: props.options,
     onComplete: props.onComplete,
     onError: props.onError,
-    onComponentReceived: props.onComponentReceived
+    onComponentReceived: props.onComponentReceived,
+    messages
   });
-  const strings = MCPUIStringsContext.useMCPUIStrings();
   const [animatingComponents, setAnimatingComponents] = solidJs.createSignal(/* @__PURE__ */ new Set());
   const handleComponentRender = (componentId) => {
     setAnimatingComponents((prev) => /* @__PURE__ */ new Set([...prev, componentId]));
@@ -46,7 +89,7 @@ function StreamingUIRenderer(props) {
     }, 500);
   };
   return (() => {
-    var _el$ = web.getNextElement(_tmpl$9), _el$60 = _el$.firstChild, [_el$61, _co$11] = web.getNextMarker(_el$60.nextSibling), _el$62 = _el$61.nextSibling, [_el$63, _co$12] = web.getNextMarker(_el$62.nextSibling), _el$24 = _el$63.nextSibling, _el$25 = _el$24.firstChild, [_el$26, _co$6] = web.getNextMarker(_el$25.nextSibling), _el$27 = _el$26.nextSibling, [_el$28, _co$7] = web.getNextMarker(_el$27.nextSibling), _el$64 = _el$24.nextSibling, [_el$65, _co$13] = web.getNextMarker(_el$64.nextSibling);
+    var _el$ = web.getNextElement(_tmpl$9), _el$59 = _el$.firstChild, [_el$60, _co$10] = web.getNextMarker(_el$59.nextSibling), _el$61 = _el$60.nextSibling, [_el$62, _co$11] = web.getNextMarker(_el$61.nextSibling), _el$24 = _el$62.nextSibling, _el$25 = _el$24.firstChild, [_el$26, _co$6] = web.getNextMarker(_el$25.nextSibling), _el$27 = _el$26.nextSibling, [_el$28, _co$7] = web.getNextMarker(_el$27.nextSibling), _el$63 = _el$24.nextSibling, [_el$64, _co$12] = web.getNextMarker(_el$63.nextSibling);
     web.insert(_el$, web.createComponent(solidJs.Show, {
       get when() {
         return web.memo(() => props.showProgress !== false)() && (isLoading() || isStreaming());
@@ -76,17 +119,23 @@ function StreamingUIRenderer(props) {
         web.effect((_$p) => web.style(_el$12, progress().totalCount !== null ? `width: ${progress().receivedCount / progress().totalCount * 100}%` : "width: 0%", _$p));
         return _el$2;
       }
-    }), _el$61, _co$11);
+    }), _el$60, _co$10);
     web.insert(_el$, web.createComponent(solidJs.Show, {
       get when() {
         return error();
       },
       get children() {
         var _el$16 = web.getNextElement(_tmpl$5), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$17.nextSibling, _el$22 = _el$20.nextSibling, [_el$23, _co$5] = web.getNextMarker(_el$22.nextSibling);
-        web.insert(_el$19, () => {
-          var _a;
-          return (_a = error()) == null ? void 0 : _a.error;
-        });
+        web.insert(_el$19, (() => {
+          var _c$ = web.memo(() => {
+            var _a;
+            return ((_a = error()) == null ? void 0 : _a.error) === "ssr";
+          });
+          return () => {
+            var _a;
+            return _c$() ? strings.streamServerSideTitle : (_a = error()) == null ? void 0 : _a.error;
+          };
+        })());
         web.insert(_el$20, () => {
           var _a;
           return (_a = error()) == null ? void 0 : _a.message;
@@ -106,7 +155,7 @@ function StreamingUIRenderer(props) {
         }), _el$23, _co$5);
         return _el$16;
       }
-    }), _el$63, _co$12);
+    }), _el$62, _co$11);
     web.insert(_el$24, web.createComponent(solidJs.For, {
       get each() {
         return components();
@@ -114,8 +163,8 @@ function StreamingUIRenderer(props) {
       children: (component) => {
         solidJs.onMount(() => handleComponentRender(component.id));
         return (() => {
-          var _el$66 = web.getNextElement(_tmpl$0);
-          web.insert(_el$66, web.createComponent(UIResourceRenderer.UIResourceRenderer, {
+          var _el$65 = web.getNextElement(_tmpl$0);
+          web.insert(_el$65, web.createComponent(UIResourceRenderer.UIResourceRenderer, {
             get content() {
               return asFullWidth(component);
             },
@@ -134,14 +183,14 @@ function StreamingUIRenderer(props) {
                   col-span-${component.position.colSpan}
                   ${animatingComponents().has(component.id) ? "animate-fade-in-up" : ""}
                 `, _v$2 = `grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`;
-            _v$ !== _p$.e && web.className(_el$66, _p$.e = _v$);
-            _p$.t = web.style(_el$66, _v$2, _p$.t);
+            _v$ !== _p$.e && web.className(_el$65, _p$.e = _v$);
+            _p$.t = web.style(_el$65, _v$2, _p$.t);
             return _p$;
           }, {
             e: void 0,
             t: void 0
           });
-          return _el$66;
+          return _el$65;
         })();
       }
     }), _el$26, _co$6);
@@ -167,17 +216,20 @@ function StreamingUIRenderer(props) {
       get children() {
         var _el$29 = web.getNextElement(_tmpl$8), _el$30 = _el$29.firstChild, _el$31 = _el$30.firstChild, _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling, _el$34 = _el$31.nextSibling, _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling, _el$37 = _el$34.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$41 = _el$39.firstChild, [_el$42, _co$8] = web.getNextMarker(_el$41.nextSibling);
         _el$42.nextSibling;
-        var _el$56 = _el$37.nextSibling, [_el$57, _co$1] = web.getNextMarker(_el$56.nextSibling), _el$49 = _el$57.nextSibling, _el$50 = _el$49.firstChild, _el$51 = _el$50.nextSibling, _el$53 = _el$51.firstChild, [_el$54, _co$0] = web.getNextMarker(_el$53.nextSibling);
-        _el$54.nextSibling;
-        var _el$58 = _el$49.nextSibling, [_el$59, _co$10] = web.getNextMarker(_el$58.nextSibling);
+        var _el$55 = _el$37.nextSibling, [_el$56, _co$0] = web.getNextMarker(_el$55.nextSibling), _el$46 = _el$56.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling, _el$50 = _el$48.firstChild, [_el$51, _co$9] = web.getNextMarker(_el$50.nextSibling);
+        _el$51.nextSibling;
+        var _el$57 = _el$46.nextSibling, [_el$58, _co$1] = web.getNextMarker(_el$57.nextSibling);
+        web.insert(_el$32, () => strings.metaProvider);
         web.insert(_el$33, () => {
           var _a;
           return (_a = metadata()) == null ? void 0 : _a.provider;
         });
+        web.insert(_el$35, () => strings.metaModel);
         web.insert(_el$36, () => {
           var _a;
           return (_a = metadata()) == null ? void 0 : _a.model;
         });
+        web.insert(_el$38, () => strings.metaExecutionTime);
         web.insert(_el$39, () => {
           var _a;
           return (_a = metadata()) == null ? void 0 : _a.executionTimeMs;
@@ -188,30 +240,42 @@ function StreamingUIRenderer(props) {
             return ((_a = metadata()) == null ? void 0 : _a.costUSD) !== void 0;
           },
           get children() {
-            var _el$43 = web.getNextElement(_tmpl$6), _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, [_el$48, _co$9] = web.getNextMarker(_el$47.nextSibling);
+            var _el$43 = web.getNextElement(_tmpl$6), _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling;
+            web.insert(_el$44, () => strings.metaCost);
             web.insert(_el$45, () => {
-              var _a, _b;
-              return (_b = (_a = metadata()) == null ? void 0 : _a.costUSD) == null ? void 0 : _b.toFixed(4);
-            }, _el$48, _co$9);
+              var _a;
+              return new Intl.NumberFormat(strings.locale, {
+                style: "currency",
+                currency: "USD",
+                currencyDisplay: "narrowSymbol",
+                minimumFractionDigits: 4,
+                maximumFractionDigits: 4,
+                useGrouping: false
+              }).format(((_a = metadata()) == null ? void 0 : _a.costUSD) ?? 0);
+            });
             return _el$43;
           }
-        }), _el$57, _co$1);
-        web.insert(_el$51, () => {
+        }), _el$56, _co$0);
+        web.insert(_el$47, () => strings.metaTtfb);
+        web.insert(_el$48, () => {
           var _a;
           return (_a = metadata()) == null ? void 0 : _a.firstTokenMs;
-        }, _el$54, _co$0);
+        }, _el$51, _co$9);
         web.insert(_el$30, web.createComponent(solidJs.Show, {
           get when() {
             var _a;
             return (_a = metadata()) == null ? void 0 : _a.cached;
           },
           get children() {
-            return web.getNextElement(_tmpl$7);
+            var _el$52 = web.getNextElement(_tmpl$7), _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling;
+            web.insert(_el$53, () => strings.metaCached);
+            web.insert(_el$54, () => strings.yes);
+            return _el$52;
           }
-        }), _el$59, _co$10);
+        }), _el$58, _co$1);
         return _el$29;
       }
-    }), _el$65, _co$13);
+    }), _el$64, _co$12);
     web.effect(() => web.className(_el$, `streaming-ui-renderer ${props.class || ""}`));
     return _el$;
   })();

package/dist/components/StreamingUIRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StreamingUIRenderer.cjs","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component\n *\n * Renders streaming dashboard components with skeleton states and progress\n * indicators. Uses the `useStreamingUI` hook for SSE connection and state.\n *\n * ## Rendering parity (v6.6.0 — closes Gap 1 of ROADMAP-opendata-macro-mcpui)\n *\n * Each component received over SSE is delegated to the real\n * `<UIResourceRenderer>`. Streamed `table` / `chart` / `map` / `action-group`\n * therefore render with the SAME fidelity as a static layout — no more\n * simplified \"type + title\" placeholder. Validation, telemetry, the error\n * boundary and `errorMode` all come from `<UIResourceRenderer>`, so the two\n * paths cannot drift.\n *\n * Delegation is a one-way value import (`UIResourceRenderer` never imports\n * this file — no cycle). The streamed component's `position` is normalized\n * to full-width before delegation : this component owns the 12-column grid,\n * `<UIResourceRenderer>` only owns the component's own rendering.\n *\n * Features:\n * - Skeleton loading states while components stream\n * - Progress bar and status messages\n * - Smooth component animations on arrival\n * - Error handling with retry capability\n * - Responsive 12-column grid layout\n *\n * Usage:\n * ```tsx\n * <StreamingUIRenderer\n *   query=\"Show me revenue trends\"\n *   spaceIds={['uuid1', 'uuid2']}\n *   onComplete={(metadata) => console.log('Done!', metadata)}\n * />\n * ```\n */\n\nimport { Show, For, createSignal, onMount } from 'solid-js'\nimport { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamingUI'\nimport type { UIComponent, RendererError } from '../types'\nimport { UIResourceRenderer, type ValidationErrorMode } from './UIResourceRenderer'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface StreamingUIRendererProps extends UseStreamingUIOptions {\n  class?: string\n  showProgress?: boolean\n  showMetadata?: boolean\n  onRenderError?: (error: RendererError) => void\n  /**\n   * How to react when a streamed component fails `validateComponent()`\n   * (v5.4.0). Defaults to `'block'` (full red error card — pre-v5.4.0\n   * behavior). Forwarded to the delegated `<UIResourceRenderer>`.\n   */\n  errorMode?: ValidationErrorMode\n  /**\n   * Visibility behavior of the inline expand button on streamed components\n   * wrapped in `<ExpandableWrapper>` (v6.6.0 — parity with the static\n   * `<UIResourceRenderer toolbarVariant>` prop). Forwarded as-is.\n   */\n  toolbarVariant?: 'hover' | 'always-visible'\n}\n\n/**\n * The 12-column placement of a streamed component is owned by this\n * component's outer grid (the cell `<div>` below). Delegating the component\n * verbatim to `<UIResourceRenderer>` would re-apply that placement inside a\n * fresh nested 12-column grid and visually misplace it. We hand\n * `<UIResourceRenderer>` a full-width copy so it only renders the component,\n * not a competing layout.\n */\nfunction asFullWidth(component: UIComponent): UIComponent {\n  return { ...component, position: { colStart: 1, colSpan: 12 } }\n}\n\nexport function StreamingUIRenderer(props: StreamingUIRendererProps) {\n  const { components, isLoading, isStreaming, error, progress, metadata, startStreaming } =\n    useStreamingUI({\n      query: props.query,\n      spaceIds: props.spaceIds,\n      sessionId: props.sessionId,\n      options: props.options,\n      onComplete: props.onComplete,\n      onError: props.onError,\n      onComponentReceived: props.onComponentReceived,\n    })\n\n  const strings = useMCPUIStrings()\n  const [animatingComponents, setAnimatingComponents] = createSignal<Set<string>>(new Set())\n\n  // Track new components for animation\n  const handleComponentRender = (componentId: string) => {\n    setAnimatingComponents((prev) => new Set([...prev, componentId]))\n\n    // Remove from animating set after animation completes\n    setTimeout(() => {\n      setAnimatingComponents((prev) => {\n        const next = new Set(prev)\n        next.delete(componentId)\n        return next\n      })\n    }, 500)\n  }\n\n  return (\n    <div class={`streaming-ui-renderer ${props.class || ''}`}>\n      {/* Progress Bar */}\n      <Show when={props.showProgress !== false && (isLoading() || isStreaming())}>\n        <div class=\"mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n          {/* Status Message */}\n          <div class=\"mb-2 flex items-center justify-between\">\n            <span class=\"text-sm font-medium text-text-primary\">{progress().message}</span>\n            <Show when={progress().totalCount !== null}>\n              <span class=\"text-sm text-text-secondary\">\n                {progress().receivedCount} / {progress().totalCount}\n              </span>\n            </Show>\n          </div>\n\n          {/* Progress Bar */}\n          <div class=\"h-2 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n            <div\n              class=\"h-full bg-brand-primary transition-all duration-300 ease-out\"\n              style={\n                progress().totalCount !== null\n                  ? `width: ${(progress().receivedCount / progress().totalCount!) * 100}%`\n                  : 'width: 0%'\n              }\n            />\n          </div>\n\n          {/* Indeterminate Progress (when totalCount unknown) */}\n          <Show when={progress().totalCount === null && isStreaming()}>\n            <div class=\"mt-2\">\n              <div class=\"h-1 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n                <div class=\"animate-progress-indeterminate h-full w-1/3 bg-brand-primary\" />\n              </div>\n            </div>\n          </Show>\n        </div>\n      </Show>\n\n      {/* Error State */}\n      <Show when={error()}>\n        <div class=\"mb-4 rounded-lg border border-border-error bg-error-subtle p-4\">\n          <div class=\"mb-2 flex items-center gap-2\">\n            <svg\n              class=\"h-5 w-5 text-error-primary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n            <span class=\"font-medium text-error-primary\">{error()?.error}</span>\n          </div>\n          <p class=\"text-sm text-text-secondary\">{error()?.message}</p>\n\n          {/* Retry Button (if recoverable) */}\n          <Show when={error()?.recoverable}>\n            <button\n              type=\"button\"\n              class=\"mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover\"\n              onClick={() => startStreaming()}\n            >\n              {strings.retry}\n            </button>\n          </Show>\n        </div>\n      </Show>\n\n      {/* Components Grid */}\n      <div class=\"grid grid-cols-12 gap-4\">\n        {/* Render received components — delegated to the real UIResourceRenderer */}\n        <For each={components()}>\n          {(component) => {\n            // Trigger animation on mount (SSR-safe, no 'use' directive needed)\n            onMount(() => handleComponentRender(component.id))\n\n            return (\n              <div\n                class={`\n                  col-span-${component.position.colSpan}\n                  ${animatingComponents().has(component.id) ? 'animate-fade-in-up' : ''}\n                `}\n                style={`grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`}\n              >\n                <UIResourceRenderer\n                  content={asFullWidth(component)}\n                  errorMode={props.errorMode}\n                  onError={props.onRenderError}\n                  toolbarVariant={props.toolbarVariant}\n                />\n              </div>\n            )\n          }}\n        </For>\n\n        {/* Skeleton placeholders (if streaming and expecting more) */}\n        <Show when={isStreaming() && progress().totalCount !== null}>\n          <For\n            each={Array.from({\n              length: progress().totalCount! - progress().receivedCount,\n            })}\n          >\n            {() => <SkeletonComponent />}\n          </For>\n        </Show>\n      </div>\n\n      {/* Metadata Display */}\n      <Show when={props.showMetadata !== false && metadata()}>\n        <div class=\"mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary\">\n          <div class=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n            <div>\n              <div class=\"font-medium text-text-primary\">Provider</div>\n              <div>{metadata()?.provider}</div>\n            </div>\n            <div>\n              <div class=\"font-medium text-text-primary\">Model</div>\n              <div>{metadata()?.model}</div>\n            </div>\n            <div>\n              <div class=\"font-medium text-text-primary\">Execution Time</div>\n              <div>{metadata()?.executionTimeMs}ms</div>\n            </div>\n            <Show when={metadata()?.costUSD !== undefined}>\n              <div>\n                <div class=\"font-medium text-text-primary\">Cost</div>\n                <div>${metadata()?.costUSD?.toFixed(4)}</div>\n              </div>\n            </Show>\n            <div>\n              <div class=\"font-medium text-text-primary\">TTFB</div>\n              <div>{metadata()?.firstTokenMs}ms</div>\n            </div>\n            <Show when={metadata()?.cached}>\n              <div>\n                <div class=\"font-medium text-text-primary\">Cached</div>\n                <div class=\"text-success-primary\">Yes</div>\n              </div>\n            </Show>\n          </div>\n        </div>\n      </Show>\n    </div>\n  )\n}\n\n/**\n * Skeleton Component - Placeholder while components load\n */\nfunction SkeletonComponent() {\n  return (\n    <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n      <div class=\"animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n        {/* Header skeleton */}\n        <div class=\"mb-4 h-6 w-1/2 rounded bg-surface-tertiary\" />\n\n        {/* Content skeleton */}\n        <div class=\"space-y-3\">\n          <div class=\"h-4 rounded bg-surface-tertiary\" />\n          <div class=\"h-4 w-5/6 rounded bg-surface-tertiary\" />\n          <div class=\"h-4 w-4/6 rounded bg-surface-tertiary\" />\n        </div>\n\n        {/* Chart/visual skeleton */}\n        <div class=\"mt-4 h-32 rounded bg-surface-tertiary\" />\n      </div>\n    </div>\n  )\n}\n\n// CSS Animations (add to global styles or Tailwind config)\n/*\n@keyframes fade-in-up {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes progress-indeterminate {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(400%);\n  }\n}\n\n.animate-fade-in-up {\n  animation: fade-in-up 0.5s ease-out;\n}\n\n.animate-progress-indeterminate {\n  animation: progress-indeterminate 1.5s infinite ease-in-out;\n}\n*/\n"],"names":["asFullWidth","component","position","colStart","colSpan","StreamingUIRenderer","props","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onError","onComponentReceived","strings","useMCPUIStrings","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","componentId","prev","setTimeout","next","delete","_el$","_$getNextElement","_tmpl$9","_el$60","firstChild","_el$61","_co$11","_$getNextMarker","nextSibling","_el$62","_el$63","_co$12","_el$24","_el$25","_el$26","_co$6","_el$27","_el$28","_co$7","_el$64","_el$65","_co$13","_$insert","_$createComponent","Show","when","_$memo","showProgress","children","_el$2","_tmpl$3","_el$3","_el$4","_el$1","_el$10","_co$3","_el$11","_el$12","_el$14","_el$15","_co$4","message","totalCount","_el$5","_tmpl$","_el$7","_el$8","_co$","_el$6","_el$9","_el$0","_co$2","receivedCount","_tmpl$2","_$effect","_$p","_$style","_el$16","_tmpl$5","_el$17","_el$18","_el$19","_el$20","_el$22","_el$23","_co$5","recoverable","_el$21","_tmpl$4","$$click","retry","_$runHydrationEvents","For","each","onMount","id","_el$66","_tmpl$0","UIResourceRenderer","content","errorMode","onRenderError","toolbarVariant","_p$","_v$","has","_v$2","e","_$className","t","undefined","Array","from","length","SkeletonComponent","showMetadata","_el$29","_tmpl$8","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$41","_el$42","_co$8","_el$56","_el$57","_co$1","_el$49","_el$50","_el$51","_el$53","_el$54","_co$0","_el$58","_el$59","_co$10","provider","model","executionTimeMs","costUSD","_el$43","_tmpl$6","_el$44","_el$45","_el$46","_el$47","_el$48","_co$9","toFixed","firstTokenMs","cached","_tmpl$7","class","_tmpl$1","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"StreamingUIRenderer.cjs","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component\n *\n * Renders streaming dashboard components with skeleton states and progress\n * indicators. Uses the `useStreamingUI` hook for SSE connection and state.\n *\n * ## Rendering parity (v6.6.0 — closes Gap 1 of ROADMAP-opendata-macro-mcpui)\n *\n * Each component received over SSE is delegated to the real\n * `<UIResourceRenderer>`. Streamed `table` / `chart` / `map` / `action-group`\n * therefore render with the SAME fidelity as a static layout — no more\n * simplified \"type + title\" placeholder. Validation, telemetry, the error\n * boundary and `errorMode` all come from `<UIResourceRenderer>`, so the two\n * paths cannot drift.\n *\n * Delegation is a one-way value import (`UIResourceRenderer` never imports\n * this file — no cycle). The streamed component's `position` is normalized\n * to full-width before delegation : this component owns the 12-column grid,\n * `<UIResourceRenderer>` only owns the component's own rendering.\n *\n * Features:\n * - Skeleton loading states while components stream\n * - Progress bar and status messages\n * - Smooth component animations on arrival\n * - Error handling with retry capability\n * - Responsive 12-column grid layout\n *\n * Usage:\n * ```tsx\n * <StreamingUIRenderer\n *   query=\"Show me revenue trends\"\n *   spaceIds={['uuid1', 'uuid2']}\n *   onComplete={(metadata) => console.log('Done!', metadata)}\n * />\n * ```\n */\n\nimport { Show, For, createSignal, onMount } from 'solid-js'\nimport {\n  useStreamingUI,\n  type StreamingUIMessages,\n  type UseStreamingUIOptions,\n} from '../hooks/useStreamingUI'\nimport type { UIComponent, RendererError } from '../types'\nimport { UIResourceRenderer, type ValidationErrorMode } from './UIResourceRenderer'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface StreamingUIRendererProps extends UseStreamingUIOptions {\n  class?: string\n  showProgress?: boolean\n  showMetadata?: boolean\n  onRenderError?: (error: RendererError) => void\n  /**\n   * How to react when a streamed component fails `validateComponent()`\n   * (v5.4.0). Defaults to `'block'` (full red error card — pre-v5.4.0\n   * behavior). Forwarded to the delegated `<UIResourceRenderer>`.\n   */\n  errorMode?: ValidationErrorMode\n  /**\n   * Visibility behavior of the inline expand button on streamed components\n   * wrapped in `<ExpandableWrapper>` (v6.6.0 — parity with the static\n   * `<UIResourceRenderer toolbarVariant>` prop). Forwarded as-is.\n   */\n  toolbarVariant?: 'hover' | 'always-visible'\n}\n\n/**\n * The 12-column placement of a streamed component is owned by this\n * component's outer grid (the cell `<div>` below). Delegating the component\n * verbatim to `<UIResourceRenderer>` would re-apply that placement inside a\n * fresh nested 12-column grid and visually misplace it. We hand\n * `<UIResourceRenderer>` a full-width copy so it only renders the component,\n * not a competing layout.\n */\nfunction asFullWidth(component: UIComponent): UIComponent {\n  return { ...component, position: { colStart: 1, colSpan: 12 } }\n}\n\nexport function StreamingUIRenderer(props: StreamingUIRendererProps) {\n  const strings = useMCPUIStrings()\n  // Getters: each message is read from the context when the hook produces it.\n  // An explicit `props.messages` entry wins over the context.\n  const messages: StreamingUIMessages = {\n    get initializing() { return props.messages?.initializing ?? strings.streamInitializing },\n    get connecting() { return props.messages?.connecting ?? strings.streamConnecting },\n    get loadingComponent() { return props.messages?.loadingComponent ?? strings.streamLoadingComponent },\n    get dashboardLoaded() { return props.messages?.dashboardLoaded ?? strings.streamDashboardLoaded },\n    get errorProgress() { return props.messages?.errorProgress ?? strings.streamErrorProgress },\n    get connectionFailed() { return props.messages?.connectionFailed ?? strings.streamConnectionFailed },\n    get requestFailed() { return props.messages?.requestFailed ?? strings.streamRequestFailed },\n    get emptyResponse() { return props.messages?.emptyResponse ?? strings.streamEmptyResponse },\n    get serverSide() { return props.messages?.serverSide ?? strings.streamServerSide },\n    get unknownError() { return props.messages?.unknownError ?? strings.streamUnknownError },\n  }\n  const { components, isLoading, isStreaming, error, progress, metadata, startStreaming } =\n    useStreamingUI({\n      query: props.query,\n      spaceIds: props.spaceIds,\n      sessionId: props.sessionId,\n      options: props.options,\n      onComplete: props.onComplete,\n      onError: props.onError,\n      onComponentReceived: props.onComponentReceived,\n      messages,\n    })\n\n  const [animatingComponents, setAnimatingComponents] = createSignal<Set<string>>(new Set())\n\n  // Track new components for animation\n  const handleComponentRender = (componentId: string) => {\n    setAnimatingComponents((prev) => new Set([...prev, componentId]))\n\n    // Remove from animating set after animation completes\n    setTimeout(() => {\n      setAnimatingComponents((prev) => {\n        const next = new Set(prev)\n        next.delete(componentId)\n        return next\n      })\n    }, 500)\n  }\n\n  return (\n    <div class={`streaming-ui-renderer ${props.class || ''}`}>\n      {/* Progress Bar */}\n      <Show when={props.showProgress !== false && (isLoading() || isStreaming())}>\n        <div class=\"mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n          {/* Status Message */}\n          <div class=\"mb-2 flex items-center justify-between\">\n            <span class=\"text-sm font-medium text-text-primary\">{progress().message}</span>\n            <Show when={progress().totalCount !== null}>\n              <span class=\"text-sm text-text-secondary\">\n                {progress().receivedCount} / {progress().totalCount}\n              </span>\n            </Show>\n          </div>\n\n          {/* Progress Bar */}\n          <div class=\"h-2 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n            <div\n              class=\"h-full bg-brand-primary transition-all duration-300 ease-out\"\n              style={\n                progress().totalCount !== null\n                  ? `width: ${(progress().receivedCount / progress().totalCount!) * 100}%`\n                  : 'width: 0%'\n              }\n            />\n          </div>\n\n          {/* Indeterminate Progress (when totalCount unknown) */}\n          <Show when={progress().totalCount === null && isStreaming()}>\n            <div class=\"mt-2\">\n              <div class=\"h-1 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n                <div class=\"animate-progress-indeterminate h-full w-1/3 bg-brand-primary\" />\n              </div>\n            </div>\n          </Show>\n        </div>\n      </Show>\n\n      {/* Error State */}\n      <Show when={error()}>\n        <div class=\"mb-4 rounded-lg border border-border-error bg-error-subtle p-4\">\n          <div class=\"mb-2 flex items-center gap-2\">\n            <svg\n              class=\"h-5 w-5 text-error-primary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n            <span class=\"font-medium text-error-primary\">\n              {error()?.error === 'ssr' ? strings.streamServerSideTitle : error()?.error}\n            </span>\n          </div>\n          <p class=\"text-sm text-text-secondary\">{error()?.message}</p>\n\n          {/* Retry Button (if recoverable) */}\n          <Show when={error()?.recoverable}>\n            <button\n              type=\"button\"\n              class=\"mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover\"\n              onClick={() => startStreaming()}\n            >\n              {strings.retry}\n            </button>\n          </Show>\n        </div>\n      </Show>\n\n      {/* Components Grid */}\n      <div class=\"grid grid-cols-12 gap-4\">\n        {/* Render received components — delegated to the real UIResourceRenderer */}\n        <For each={components()}>\n          {(component) => {\n            // Trigger animation on mount (SSR-safe, no 'use' directive needed)\n            onMount(() => handleComponentRender(component.id))\n\n            return (\n              <div\n                class={`\n                  col-span-${component.position.colSpan}\n                  ${animatingComponents().has(component.id) ? 'animate-fade-in-up' : ''}\n                `}\n                style={`grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`}\n              >\n                <UIResourceRenderer\n                  content={asFullWidth(component)}\n                  errorMode={props.errorMode}\n                  onError={props.onRenderError}\n                  toolbarVariant={props.toolbarVariant}\n                />\n              </div>\n            )\n          }}\n        </For>\n\n        {/* Skeleton placeholders (if streaming and expecting more) */}\n        <Show when={isStreaming() && progress().totalCount !== null}>\n          <For\n            each={Array.from({\n              length: progress().totalCount! - progress().receivedCount,\n            })}\n          >\n            {() => <SkeletonComponent />}\n          </For>\n        </Show>\n      </div>\n\n      {/* Metadata Display */}\n      <Show when={props.showMetadata !== false && metadata()}>\n        <div class=\"mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary\">\n          <div class=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n            <div>\n              <div class=\"font-medium text-text-primary\">{strings.metaProvider}</div>\n              <div>{metadata()?.provider}</div>\n            </div>\n            <div>\n              <div class=\"font-medium text-text-primary\">{strings.metaModel}</div>\n              <div>{metadata()?.model}</div>\n            </div>\n            <div>\n              <div class=\"font-medium text-text-primary\">{strings.metaExecutionTime}</div>\n              <div>{metadata()?.executionTimeMs}ms</div>\n            </div>\n            <Show when={metadata()?.costUSD !== undefined}>\n              <div>\n                <div class=\"font-medium text-text-primary\">{strings.metaCost}</div>\n                <div>\n                  {new Intl.NumberFormat(strings.locale, {\n                    style: 'currency',\n                    currency: 'USD',\n                    currencyDisplay: 'narrowSymbol',\n                    minimumFractionDigits: 4,\n                    maximumFractionDigits: 4,\n                    useGrouping: false,\n                  }).format(metadata()?.costUSD ?? 0)}\n                </div>\n              </div>\n            </Show>\n            <div>\n              <div class=\"font-medium text-text-primary\">{strings.metaTtfb}</div>\n              <div>{metadata()?.firstTokenMs}ms</div>\n            </div>\n            <Show when={metadata()?.cached}>\n              <div>\n                <div class=\"font-medium text-text-primary\">{strings.metaCached}</div>\n                <div class=\"text-success-primary\">{strings.yes}</div>\n              </div>\n            </Show>\n          </div>\n        </div>\n      </Show>\n    </div>\n  )\n}\n\n/**\n * Skeleton Component - Placeholder while components load\n */\nfunction SkeletonComponent() {\n  return (\n    <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n      <div class=\"animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n        {/* Header skeleton */}\n        <div class=\"mb-4 h-6 w-1/2 rounded bg-surface-tertiary\" />\n\n        {/* Content skeleton */}\n        <div class=\"space-y-3\">\n          <div class=\"h-4 rounded bg-surface-tertiary\" />\n          <div class=\"h-4 w-5/6 rounded bg-surface-tertiary\" />\n          <div class=\"h-4 w-4/6 rounded bg-surface-tertiary\" />\n        </div>\n\n        {/* Chart/visual skeleton */}\n        <div class=\"mt-4 h-32 rounded bg-surface-tertiary\" />\n      </div>\n    </div>\n  )\n}\n\n// CSS Animations (add to global styles or Tailwind config)\n/*\n@keyframes fade-in-up {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes progress-indeterminate {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(400%);\n  }\n}\n\n.animate-fade-in-up {\n  animation: fade-in-up 0.5s ease-out;\n}\n\n.animate-progress-indeterminate {\n  animation: progress-indeterminate 1.5s infinite ease-in-out;\n}\n*/\n"],"names":["asFullWidth","component","position","colStart","colSpan","StreamingUIRenderer","props","strings","useMCPUIStrings","messages","initializing","streamInitializing","connecting","streamConnecting","loadingComponent","streamLoadingComponent","dashboardLoaded","streamDashboardLoaded","errorProgress","streamErrorProgress","connectionFailed","streamConnectionFailed","requestFailed","streamRequestFailed","emptyResponse","streamEmptyResponse","serverSide","streamServerSide","unknownError","streamUnknownError","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onError","onComponentReceived","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","componentId","prev","setTimeout","next","delete","_el$","_$getNextElement","_tmpl$9","_el$59","firstChild","_el$60","_co$10","_$getNextMarker","nextSibling","_el$61","_el$62","_co$11","_el$24","_el$25","_el$26","_co$6","_el$27","_el$28","_co$7","_el$63","_el$64","_co$12","_$insert","_$createComponent","Show","when","_$memo","showProgress","children","_el$2","_tmpl$3","_el$3","_el$4","_el$1","_el$10","_co$3","_el$11","_el$12","_el$14","_el$15","_co$4","message","totalCount","_el$5","_tmpl$","_el$7","_el$8","_co$","_el$6","_el$9","_el$0","_co$2","receivedCount","_tmpl$2","_$effect","_$p","_$style","_el$16","_tmpl$5","_el$17","_el$18","_el$19","_el$20","_el$22","_el$23","_co$5","_c$","streamServerSideTitle","recoverable","_el$21","_tmpl$4","$$click","retry","_$runHydrationEvents","For","each","onMount","id","_el$65","_tmpl$0","UIResourceRenderer","content","errorMode","onRenderError","toolbarVariant","_p$","_v$","has","_v$2","e","_$className","t","undefined","Array","from","length","SkeletonComponent","showMetadata","_el$29","_tmpl$8","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$41","_el$42","_co$8","_el$55","_el$56","_co$0","_el$46","_el$47","_el$48","_el$50","_el$51","_co$9","_el$57","_el$58","_co$1","metaProvider","provider","metaModel","model","metaExecutionTime","executionTimeMs","costUSD","_el$43","_tmpl$6","_el$44","_el$45","metaCost","Intl","NumberFormat","locale","style","currency","currencyDisplay","minimumFractionDigits","maximumFractionDigits","useGrouping","format","metaTtfb","firstTokenMs","cached","_el$52","_tmpl$7","_el$53","_el$54","metaCached","yes","class","_tmpl$1","_$delegateEvents"],"mappings":"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"}

package/dist/components/StreamingUIRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StreamingUIRenderer.d.ts","sourceRoot":"","sources":["../../src/components/StreamingUIRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAGH,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AACpF,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,UAAU,CAAA;AAC1D,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAGnF,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC9C;;;;OAIG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAA;CAC5C;AAcD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kCAiLlE"}
+{"version":3,"file":"StreamingUIRenderer.d.ts","sourceRoot":"","sources":["../../src/components/StreamingUIRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAGH,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,yBAAyB,CAAA;AAChC,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,UAAU,CAAA;AAC1D,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAGnF,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC9C;;;;OAIG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAA;CAC5C;AAcD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kCA2MlE"}

package/dist/components/StreamingUIRenderer.js

@@ -3,7 +3,7 @@ import { createSignal, Show, For, onMount } from "solid-js";
 import { useStreamingUI } from "../hooks/useStreamingUI.js";
 import { UIResourceRenderer } from "./UIResourceRenderer.js";
 import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
-var _tmpl$ = /* @__PURE__ */ template(`<span class="text-sm text-text-secondary"><!$><!/> / <!$><!/>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=mt-2><div class="h-1 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="animate-progress-indeterminate h-full w-1/3 bg-brand-primary">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-2 flex items-center justify-between"><span class="text-sm font-medium text-text-primary"></span><!$><!/></div><div class="h-2 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="h-full bg-brand-primary transition-all duration-300 ease-out"></div></div><!$><!/>`), _tmpl$4 = /* @__PURE__ */ template(`<button type=button class="mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover">`), _tmpl$5 = /* @__PURE__ */ template(`<div class="mb-4 rounded-lg border border-border-error bg-error-subtle p-4"><div class="mb-2 flex items-center gap-2"><svg class="h-5 w-5 text-error-primary"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="font-medium text-error-primary"></span></div><p class="text-sm text-text-secondary"></p><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<div><div class="font-medium text-text-primary">Cost</div><div>$<!$><!/>`), _tmpl$7 = /* @__PURE__ */ template(`<div><div class="font-medium text-text-primary">Cached</div><div class=text-success-primary>Yes`), _tmpl$8 = /* @__PURE__ */ template(`<div class="mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary"><div class="grid grid-cols-2 gap-4 md:grid-cols-4"><div><div class="font-medium text-text-primary">Provider</div><div></div></div><div><div class="font-medium text-text-primary">Model</div><div></div></div><div><div class="font-medium text-text-primary">Execution Time</div><div><!$><!/>ms</div></div><!$><!/><div><div class="font-medium text-text-primary">TTFB</div><div><!$><!/>ms</div></div><!$><!/>`), _tmpl$9 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><div class="grid grid-cols-12 gap-4"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$0 = /* @__PURE__ */ template(`<div>`), _tmpl$1 = /* @__PURE__ */ template(`<div class="col-span-12 md:col-span-6 lg:col-span-4"><div class="animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-4 h-6 w-1/2 rounded bg-surface-tertiary"></div><div class=space-y-3><div class="h-4 rounded bg-surface-tertiary"></div><div class="h-4 w-5/6 rounded bg-surface-tertiary"></div><div class="h-4 w-4/6 rounded bg-surface-tertiary"></div></div><div class="mt-4 h-32 rounded bg-surface-tertiary">`);
+var _tmpl$ = /* @__PURE__ */ template(`<span class="text-sm text-text-secondary"><!$><!/> / <!$><!/>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=mt-2><div class="h-1 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="animate-progress-indeterminate h-full w-1/3 bg-brand-primary">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-2 flex items-center justify-between"><span class="text-sm font-medium text-text-primary"></span><!$><!/></div><div class="h-2 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="h-full bg-brand-primary transition-all duration-300 ease-out"></div></div><!$><!/>`), _tmpl$4 = /* @__PURE__ */ template(`<button type=button class="mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover">`), _tmpl$5 = /* @__PURE__ */ template(`<div class="mb-4 rounded-lg border border-border-error bg-error-subtle p-4"><div class="mb-2 flex items-center gap-2"><svg class="h-5 w-5 text-error-primary"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="font-medium text-error-primary"></span></div><p class="text-sm text-text-secondary"></p><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<div><div class="font-medium text-text-primary"></div><div>`), _tmpl$7 = /* @__PURE__ */ template(`<div><div class="font-medium text-text-primary"></div><div class=text-success-primary>`), _tmpl$8 = /* @__PURE__ */ template(`<div class="mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary"><div class="grid grid-cols-2 gap-4 md:grid-cols-4"><div><div class="font-medium text-text-primary"></div><div></div></div><div><div class="font-medium text-text-primary"></div><div></div></div><div><div class="font-medium text-text-primary"></div><div><!$><!/>ms</div></div><!$><!/><div><div class="font-medium text-text-primary"></div><div><!$><!/>ms</div></div><!$><!/>`), _tmpl$9 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><div class="grid grid-cols-12 gap-4"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$0 = /* @__PURE__ */ template(`<div>`), _tmpl$1 = /* @__PURE__ */ template(`<div class="col-span-12 md:col-span-6 lg:col-span-4"><div class="animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-4 h-6 w-1/2 rounded bg-surface-tertiary"></div><div class=space-y-3><div class="h-4 rounded bg-surface-tertiary"></div><div class="h-4 w-5/6 rounded bg-surface-tertiary"></div><div class="h-4 w-4/6 rounded bg-surface-tertiary"></div></div><div class="mt-4 h-32 rounded bg-surface-tertiary">`);
 function asFullWidth(component) {
   return {
     ...component,
@@ -14,6 +14,49 @@ function asFullWidth(component) {
   };
 }
 function StreamingUIRenderer(props) {
+  const strings = useMCPUIStrings();
+  const messages = {
+    get initializing() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.initializing) ?? strings.streamInitializing;
+    },
+    get connecting() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.connecting) ?? strings.streamConnecting;
+    },
+    get loadingComponent() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.loadingComponent) ?? strings.streamLoadingComponent;
+    },
+    get dashboardLoaded() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.dashboardLoaded) ?? strings.streamDashboardLoaded;
+    },
+    get errorProgress() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.errorProgress) ?? strings.streamErrorProgress;
+    },
+    get connectionFailed() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.connectionFailed) ?? strings.streamConnectionFailed;
+    },
+    get requestFailed() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.requestFailed) ?? strings.streamRequestFailed;
+    },
+    get emptyResponse() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.emptyResponse) ?? strings.streamEmptyResponse;
+    },
+    get serverSide() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.serverSide) ?? strings.streamServerSide;
+    },
+    get unknownError() {
+      var _a;
+      return ((_a = props.messages) == null ? void 0 : _a.unknownError) ?? strings.streamUnknownError;
+    }
+  };
   const {
     components,
     isLoading,
@@ -29,9 +72,9 @@ function StreamingUIRenderer(props) {
     options: props.options,
     onComplete: props.onComplete,
     onError: props.onError,
-    onComponentReceived: props.onComponentReceived
+    onComponentReceived: props.onComponentReceived,
+    messages
   });
-  const strings = useMCPUIStrings();
   const [animatingComponents, setAnimatingComponents] = createSignal(/* @__PURE__ */ new Set());
   const handleComponentRender = (componentId) => {
     setAnimatingComponents((prev) => /* @__PURE__ */ new Set([...prev, componentId]));
@@ -44,7 +87,7 @@ function StreamingUIRenderer(props) {
     }, 500);
   };
   return (() => {
-    var _el$ = getNextElement(_tmpl$9), _el$60 = _el$.firstChild, [_el$61, _co$11] = getNextMarker(_el$60.nextSibling), _el$62 = _el$61.nextSibling, [_el$63, _co$12] = getNextMarker(_el$62.nextSibling), _el$24 = _el$63.nextSibling, _el$25 = _el$24.firstChild, [_el$26, _co$6] = getNextMarker(_el$25.nextSibling), _el$27 = _el$26.nextSibling, [_el$28, _co$7] = getNextMarker(_el$27.nextSibling), _el$64 = _el$24.nextSibling, [_el$65, _co$13] = getNextMarker(_el$64.nextSibling);
+    var _el$ = getNextElement(_tmpl$9), _el$59 = _el$.firstChild, [_el$60, _co$10] = getNextMarker(_el$59.nextSibling), _el$61 = _el$60.nextSibling, [_el$62, _co$11] = getNextMarker(_el$61.nextSibling), _el$24 = _el$62.nextSibling, _el$25 = _el$24.firstChild, [_el$26, _co$6] = getNextMarker(_el$25.nextSibling), _el$27 = _el$26.nextSibling, [_el$28, _co$7] = getNextMarker(_el$27.nextSibling), _el$63 = _el$24.nextSibling, [_el$64, _co$12] = getNextMarker(_el$63.nextSibling);
     insert(_el$, createComponent(Show, {
       get when() {
         return memo(() => props.showProgress !== false)() && (isLoading() || isStreaming());
@@ -74,17 +117,23 @@ function StreamingUIRenderer(props) {
         effect((_$p) => style(_el$12, progress().totalCount !== null ? `width: ${progress().receivedCount / progress().totalCount * 100}%` : "width: 0%", _$p));
         return _el$2;
       }
-    }), _el$61, _co$11);
+    }), _el$60, _co$10);
     insert(_el$, createComponent(Show, {
       get when() {
         return error();
       },
       get children() {
         var _el$16 = getNextElement(_tmpl$5), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$17.nextSibling, _el$22 = _el$20.nextSibling, [_el$23, _co$5] = getNextMarker(_el$22.nextSibling);
-        insert(_el$19, () => {
-          var _a;
-          return (_a = error()) == null ? void 0 : _a.error;
-        });
+        insert(_el$19, (() => {
+          var _c$ = memo(() => {
+            var _a;
+            return ((_a = error()) == null ? void 0 : _a.error) === "ssr";
+          });
+          return () => {
+            var _a;
+            return _c$() ? strings.streamServerSideTitle : (_a = error()) == null ? void 0 : _a.error;
+          };
+        })());
         insert(_el$20, () => {
           var _a;
           return (_a = error()) == null ? void 0 : _a.message;
@@ -104,7 +153,7 @@ function StreamingUIRenderer(props) {
         }), _el$23, _co$5);
         return _el$16;
       }
-    }), _el$63, _co$12);
+    }), _el$62, _co$11);
     insert(_el$24, createComponent(For, {
       get each() {
         return components();
@@ -112,8 +161,8 @@ function StreamingUIRenderer(props) {
       children: (component) => {
         onMount(() => handleComponentRender(component.id));
         return (() => {
-          var _el$66 = getNextElement(_tmpl$0);
-          insert(_el$66, createComponent(UIResourceRenderer, {
+          var _el$65 = getNextElement(_tmpl$0);
+          insert(_el$65, createComponent(UIResourceRenderer, {
             get content() {
               return asFullWidth(component);
             },
@@ -132,14 +181,14 @@ function StreamingUIRenderer(props) {
                   col-span-${component.position.colSpan}
                   ${animatingComponents().has(component.id) ? "animate-fade-in-up" : ""}
                 `, _v$2 = `grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`;
-            _v$ !== _p$.e && className(_el$66, _p$.e = _v$);
-            _p$.t = style(_el$66, _v$2, _p$.t);
+            _v$ !== _p$.e && className(_el$65, _p$.e = _v$);
+            _p$.t = style(_el$65, _v$2, _p$.t);
             return _p$;
           }, {
             e: void 0,
             t: void 0
           });
-          return _el$66;
+          return _el$65;
         })();
       }
     }), _el$26, _co$6);
@@ -165,17 +214,20 @@ function StreamingUIRenderer(props) {
       get children() {
         var _el$29 = getNextElement(_tmpl$8), _el$30 = _el$29.firstChild, _el$31 = _el$30.firstChild, _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling, _el$34 = _el$31.nextSibling, _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling, _el$37 = _el$34.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$41 = _el$39.firstChild, [_el$42, _co$8] = getNextMarker(_el$41.nextSibling);
         _el$42.nextSibling;
-        var _el$56 = _el$37.nextSibling, [_el$57, _co$1] = getNextMarker(_el$56.nextSibling), _el$49 = _el$57.nextSibling, _el$50 = _el$49.firstChild, _el$51 = _el$50.nextSibling, _el$53 = _el$51.firstChild, [_el$54, _co$0] = getNextMarker(_el$53.nextSibling);
-        _el$54.nextSibling;
-        var _el$58 = _el$49.nextSibling, [_el$59, _co$10] = getNextMarker(_el$58.nextSibling);
+        var _el$55 = _el$37.nextSibling, [_el$56, _co$0] = getNextMarker(_el$55.nextSibling), _el$46 = _el$56.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling, _el$50 = _el$48.firstChild, [_el$51, _co$9] = getNextMarker(_el$50.nextSibling);
+        _el$51.nextSibling;
+        var _el$57 = _el$46.nextSibling, [_el$58, _co$1] = getNextMarker(_el$57.nextSibling);
+        insert(_el$32, () => strings.metaProvider);
         insert(_el$33, () => {
           var _a;
           return (_a = metadata()) == null ? void 0 : _a.provider;
         });
+        insert(_el$35, () => strings.metaModel);
         insert(_el$36, () => {
           var _a;
           return (_a = metadata()) == null ? void 0 : _a.model;
         });
+        insert(_el$38, () => strings.metaExecutionTime);
         insert(_el$39, () => {
           var _a;
           return (_a = metadata()) == null ? void 0 : _a.executionTimeMs;
@@ -186,30 +238,42 @@ function StreamingUIRenderer(props) {
             return ((_a = metadata()) == null ? void 0 : _a.costUSD) !== void 0;
           },
           get children() {
-            var _el$43 = getNextElement(_tmpl$6), _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, [_el$48, _co$9] = getNextMarker(_el$47.nextSibling);
+            var _el$43 = getNextElement(_tmpl$6), _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling;
+            insert(_el$44, () => strings.metaCost);
             insert(_el$45, () => {
-              var _a, _b;
-              return (_b = (_a = metadata()) == null ? void 0 : _a.costUSD) == null ? void 0 : _b.toFixed(4);
-            }, _el$48, _co$9);
+              var _a;
+              return new Intl.NumberFormat(strings.locale, {
+                style: "currency",
+                currency: "USD",
+                currencyDisplay: "narrowSymbol",
+                minimumFractionDigits: 4,
+                maximumFractionDigits: 4,
+                useGrouping: false
+              }).format(((_a = metadata()) == null ? void 0 : _a.costUSD) ?? 0);
+            });
             return _el$43;
           }
-        }), _el$57, _co$1);
-        insert(_el$51, () => {
+        }), _el$56, _co$0);
+        insert(_el$47, () => strings.metaTtfb);
+        insert(_el$48, () => {
           var _a;
           return (_a = metadata()) == null ? void 0 : _a.firstTokenMs;
-        }, _el$54, _co$0);
+        }, _el$51, _co$9);
         insert(_el$30, createComponent(Show, {
           get when() {
             var _a;
             return (_a = metadata()) == null ? void 0 : _a.cached;
           },
           get children() {
-            return getNextElement(_tmpl$7);
+            var _el$52 = getNextElement(_tmpl$7), _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling;
+            insert(_el$53, () => strings.metaCached);
+            insert(_el$54, () => strings.yes);
+            return _el$52;
           }
-        }), _el$59, _co$10);
+        }), _el$58, _co$1);
         return _el$29;
       }
-    }), _el$65, _co$13);
+    }), _el$64, _co$12);
     effect(() => className(_el$, `streaming-ui-renderer ${props.class || ""}`));
     return _el$;
   })();