@seed-ship/mcp-ui-solid 5.5.1 → 5.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +47 -0
- package/dist/components/FormRenderer.cjs +13 -2
- package/dist/components/FormRenderer.cjs.map +1 -1
- package/dist/components/FormRenderer.d.ts.map +1 -1
- package/dist/components/FormRenderer.js +13 -2
- package/dist/components/FormRenderer.js.map +1 -1
- package/dist/components/GenerativeUIErrorBoundary.cjs +11 -0
- package/dist/components/GenerativeUIErrorBoundary.cjs.map +1 -1
- package/dist/components/GenerativeUIErrorBoundary.d.ts.map +1 -1
- package/dist/components/GenerativeUIErrorBoundary.js +11 -0
- package/dist/components/GenerativeUIErrorBoundary.js.map +1 -1
- package/dist/components/StreamingUIRenderer.cjs +49 -3
- package/dist/components/StreamingUIRenderer.cjs.map +1 -1
- package/dist/components/StreamingUIRenderer.d.ts.map +1 -1
- package/dist/components/StreamingUIRenderer.js +51 -5
- package/dist/components/StreamingUIRenderer.js.map +1 -1
- package/dist/components/UIResourceRenderer.cjs +62 -3
- package/dist/components/UIResourceRenderer.cjs.map +1 -1
- package/dist/components/UIResourceRenderer.d.ts.map +1 -1
- package/dist/components/UIResourceRenderer.js +64 -5
- package/dist/components/UIResourceRenderer.js.map +1 -1
- package/dist/context/MCPUITelemetryContext.cjs +25 -0
- package/dist/context/MCPUITelemetryContext.cjs.map +1 -0
- package/dist/context/MCPUITelemetryContext.d.ts +36 -0
- package/dist/context/MCPUITelemetryContext.d.ts.map +1 -0
- package/dist/context/MCPUITelemetryContext.js +25 -0
- package/dist/context/MCPUITelemetryContext.js.map +1 -0
- package/dist/index.cjs +6 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -1
- package/dist/mcp-ui-spec/dist/schemas.cjs +16 -5
- package/dist/mcp-ui-spec/dist/schemas.cjs.map +1 -1
- package/dist/mcp-ui-spec/dist/schemas.js +16 -5
- package/dist/mcp-ui-spec/dist/schemas.js.map +1 -1
- package/dist/services/telemetry.cjs +56 -0
- package/dist/services/telemetry.cjs.map +1 -0
- package/dist/services/telemetry.d.ts +87 -0
- package/dist/services/telemetry.d.ts.map +1 -0
- package/dist/services/telemetry.js +56 -0
- package/dist/services/telemetry.js.map +1 -0
- package/dist/services/validation.cjs +25 -24
- package/dist/services/validation.cjs.map +1 -1
- package/dist/services/validation.d.ts.map +1 -1
- package/dist/services/validation.js +26 -25
- package/dist/services/validation.js.map +1 -1
- package/package.json +2 -2
- package/src/components/FormRenderer.tsx +14 -0
- package/src/components/GenerativeUIErrorBoundary.tsx +17 -1
- package/src/components/StreamingUIRenderer.tsx +55 -3
- package/src/components/UIResourceRenderer.tsx +79 -3
- package/src/context/MCPUITelemetryContext.test.tsx +119 -0
- package/src/context/MCPUITelemetryContext.tsx +71 -0
- package/src/index.ts +15 -0
- package/src/services/telemetry.test.ts +134 -0
- package/src/services/telemetry.ts +149 -0
- package/src/services/validation.ts +43 -41
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -6,11 +6,47 @@ const useStreamingUI = require("../hooks/useStreamingUI.cjs");
|
|
|
6
6
|
const validation = require("../services/validation.cjs");
|
|
7
7
|
const GenerativeUIErrorBoundary = require("./GenerativeUIErrorBoundary.cjs");
|
|
8
8
|
const perf = require("../utils/perf.cjs");
|
|
9
|
+
const MCPUITelemetryContext = require("../context/MCPUITelemetryContext.cjs");
|
|
9
10
|
var _tmpl$ = /* @__PURE__ */ web.template(`<div class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200"role=alert aria-label="Component validation warning"><svg xmlns=http://www.w3.org/2000/svg class="w-3.5 h-3.5"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1=12 y1=9 x2=12 y2=13></line><line x1=12 y1=17 x2=12.01 y2=17></line></svg><span>Invalid <!$><!/>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="w-full bg-error-subtle border border-border-error rounded-lg p-4"><p class="text-sm font-medium text-error-primary">Validation Error</p><p class="text-xs text-text-secondary mt-1">`), _tmpl$3 = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-text-primary">`), _tmpl$4 = /* @__PURE__ */ web.template(`<span class="text-sm text-text-secondary">`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class=mt-2><p class="text-2xl font-semibold text-text-primary"></p><!$><!/>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class="w-full bg-surface-secondary border border-border-subtle rounded-lg p-4"><div class="flex items-center gap-2 mb-2"><span class="text-xs font-medium text-text-tertiary uppercase"></span></div><!$><!/><!$><!/><div class="mt-3 text-xs text-text-tertiary">Component ID: <!$><!/>...`), _tmpl$7 = /* @__PURE__ */ web.template(`<span class="text-sm text-text-secondary"><!$><!/> / <!$><!/>`), _tmpl$8 = /* @__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$9 = /* @__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$0 = /* @__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">Retry`), _tmpl$1 = /* @__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$10 = /* @__PURE__ */ web.template(`<div><div class="font-medium text-text-primary">Cost</div><div>$<!$><!/>`), _tmpl$11 = /* @__PURE__ */ web.template(`<div><div class="font-medium text-text-primary">Cached</div><div class=text-success-primary>Yes`), _tmpl$12 = /* @__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$13 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/><div class="grid grid-cols-12 gap-4"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$14 = /* @__PURE__ */ web.template(`<div>`), _tmpl$15 = /* @__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">`);
|
|
10
11
|
function StreamingComponentRenderer(props) {
|
|
11
|
-
var _a, _b, _c;
|
|
12
|
+
var _a, _b, _c, _d, _e, _f;
|
|
12
13
|
perf.markRenderStart(props.component.id);
|
|
13
|
-
|
|
14
|
+
const telemetry = MCPUITelemetryContext.useTelemetry();
|
|
15
|
+
solidJs.onMount(() => {
|
|
16
|
+
perf.markRenderEnd(props.component.id);
|
|
17
|
+
if (telemetry) {
|
|
18
|
+
const ts = Date.now();
|
|
19
|
+
telemetry.dispatch({
|
|
20
|
+
type: "component:mounted",
|
|
21
|
+
id: props.component.id,
|
|
22
|
+
componentType: props.component.type,
|
|
23
|
+
ts
|
|
24
|
+
});
|
|
25
|
+
if (typeof performance !== "undefined" && typeof performance.getEntriesByName === "function") {
|
|
26
|
+
const entries = performance.getEntriesByName(`${perf.PERF_PREFIX}${props.component.id}:render`, "measure");
|
|
27
|
+
const last = entries[entries.length - 1];
|
|
28
|
+
if (last) {
|
|
29
|
+
telemetry.dispatch({
|
|
30
|
+
type: "component:rendered",
|
|
31
|
+
id: props.component.id,
|
|
32
|
+
componentType: props.component.type,
|
|
33
|
+
durationMs: last.duration,
|
|
34
|
+
ts
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
solidJs.onCleanup(() => {
|
|
41
|
+
if (telemetry) {
|
|
42
|
+
telemetry.dispatch({
|
|
43
|
+
type: "component:unmounted",
|
|
44
|
+
id: props.component.id,
|
|
45
|
+
componentType: props.component.type,
|
|
46
|
+
ts: Date.now()
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
});
|
|
14
50
|
const validation$1 = validation.validateComponent(props.component);
|
|
15
51
|
if (!validation$1.valid) {
|
|
16
52
|
(_a = props.onError) == null ? void 0 : _a.call(props, {
|
|
@@ -19,8 +55,18 @@ function StreamingComponentRenderer(props) {
|
|
|
19
55
|
componentId: props.component.id,
|
|
20
56
|
details: validation$1.errors
|
|
21
57
|
});
|
|
58
|
+
if (telemetry) {
|
|
59
|
+
telemetry.dispatch({
|
|
60
|
+
type: "validation:failed",
|
|
61
|
+
id: props.component.id,
|
|
62
|
+
componentType: props.component.type,
|
|
63
|
+
errorCount: ((_b = validation$1.errors) == null ? void 0 : _b.length) ?? 0,
|
|
64
|
+
firstErrorCode: ((_d = (_c = validation$1.errors) == null ? void 0 : _c[0]) == null ? void 0 : _d.code) ?? null,
|
|
65
|
+
ts: Date.now()
|
|
66
|
+
});
|
|
67
|
+
}
|
|
22
68
|
const mode = props.errorMode ?? "block";
|
|
23
|
-
const firstError = ((
|
|
69
|
+
const firstError = ((_f = (_e = validation$1.errors) == null ? void 0 : _e[0]) == null ? void 0 : _f.message) || "Unknown validation error";
|
|
24
70
|
if (mode === "silent") {
|
|
25
71
|
return null;
|
|
26
72
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StreamingUIRenderer.cjs","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component - Phase 2\n *\n * Renders streaming dashboard components with skeleton states and progress indicators.\n * Uses the useStreamingUI hook for SSE connection and state management.\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 { validateComponent } from '../services/validation'\nimport { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'\nimport { markRenderStart, markRenderEnd } from '../utils/perf'\nimport type { ValidationErrorMode } from './UIResourceRenderer'\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). See `ValidationErrorMode` in `UIResourceRenderer`.\n */\n errorMode?: ValidationErrorMode\n}\n\n/**\n * Component Renderer - Inline lightweight version\n * (Full implementation in UIResourceRenderer)\n */\nfunction StreamingComponentRenderer(props: {\n component: UIComponent\n onError?: (error: RendererError) => void\n errorMode?: ValidationErrorMode\n}) {\n // Performance marks (v5.4.0) — see utils/perf.ts\n markRenderStart(props.component.id)\n onMount(() => markRenderEnd(props.component.id))\n\n // Validate component before rendering\n const validation = validateComponent(props.component)\n if (!validation.valid) {\n props.onError?.({\n type: 'validation',\n message: 'Component validation failed',\n componentId: props.component.id,\n details: validation.errors,\n })\n\n const mode: ValidationErrorMode = props.errorMode ?? 'block'\n const firstError = validation.errors?.[0]?.message || 'Unknown validation error'\n\n if (mode === 'silent') {\n return null\n }\n\n if (mode === 'inline-warn') {\n return (\n <div\n class=\"inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200\"\n role=\"alert\"\n aria-label=\"Component validation warning\"\n title={firstError}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"w-3.5 h-3.5\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\" />\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\" />\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\n </svg>\n <span>Invalid {props.component.type}</span>\n </div>\n )\n }\n\n return (\n <div class=\"w-full bg-error-subtle border border-border-error rounded-lg p-4\">\n <p class=\"text-sm font-medium text-error-primary\">Validation Error</p>\n <p class=\"text-xs text-text-secondary mt-1\">\n {firstError}\n </p>\n </div>\n )\n }\n\n // Simplified renderer - just show component type and title\n // Full rendering logic in UIResourceRenderer\n const params = props.component.params as any\n\n return (\n <GenerativeUIErrorBoundary\n componentId={props.component.id}\n componentType={props.component.type}\n onError={props.onError}\n allowRetry={false}\n >\n <div class=\"w-full bg-surface-secondary border border-border-subtle rounded-lg p-4\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs font-medium text-text-tertiary uppercase\">\n {props.component.type}\n </span>\n </div>\n <Show when={params?.title}>\n <h3 class=\"text-sm font-semibold text-text-primary\">{params.title}</h3>\n </Show>\n <Show when={props.component.type === 'metric' && params?.value}>\n <div class=\"mt-2\">\n <p class=\"text-2xl font-semibold text-text-primary\">{params.value}</p>\n <Show when={params.unit}>\n <span class=\"text-sm text-text-secondary\">{params.unit}</span>\n </Show>\n </div>\n </Show>\n <div class=\"mt-3 text-xs text-text-tertiary\">\n Component ID: {props.component.id.slice(0, 8)}...\n </div>\n </div>\n </GenerativeUIErrorBoundary>\n )\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 [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 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 */}\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 <StreamingComponentRenderer\n component={component}\n onError={props.onRenderError}\n errorMode={props.errorMode}\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":["StreamingComponentRenderer","props","markRenderStart","component","id","onMount","markRenderEnd","validation","validateComponent","valid","onError","type","message","componentId","details","errors","mode","errorMode","firstError","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_co$","_$getNextMarker","_$setAttribute","_$insert","_el$7","_tmpl$2","_el$8","_el$9","params","_$createComponent","GenerativeUIErrorBoundary","componentType","allowRetry","children","_el$0","_tmpl$6","_el$1","_el$10","_el$22","_el$23","_co$4","_el$24","_el$25","_co$5","_el$17","_el$18","_el$20","_el$21","_co$3","Show","when","title","_el$11","_tmpl$3","_$memo","value","_el$12","_tmpl$5","_el$13","_el$15","_el$16","_co$2","unit","_el$14","_tmpl$4","slice","StreamingUIRenderer","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onComponentReceived","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","prev","setTimeout","next","delete","_el$26","_tmpl$13","_el$87","_el$88","_co$16","_el$89","_el$90","_co$17","_el$51","_el$52","_el$53","_co$1","_el$54","_el$55","_co$10","_el$91","_el$92","_co$18","showProgress","_el$27","_tmpl$9","_el$28","_el$29","_el$36","_el$37","_co$8","_el$38","_el$39","_el$41","_el$42","_co$9","totalCount","_el$30","_tmpl$7","_el$32","_el$33","_co$6","_el$31","_el$34","_el$35","_co$7","receivedCount","_tmpl$8","_$effect","_$p","_$style","_el$43","_tmpl$1","_el$44","_el$45","_el$46","_el$47","_el$49","_el$50","_co$0","recoverable","_el$48","_tmpl$0","$$click","_$runHydrationEvents","For","each","_el$93","_tmpl$14","onRenderError","_p$","_v$","position","colSpan","has","_v$2","colStart","e","_$className","t","undefined","Array","from","length","SkeletonComponent","showMetadata","_el$56","_tmpl$12","_el$57","_el$58","_el$59","_el$60","_el$61","_el$62","_el$63","_el$64","_el$65","_el$66","_el$68","_el$69","_co$11","_el$83","_el$84","_co$14","_el$76","_el$77","_el$78","_el$80","_el$81","_co$13","_el$85","_el$86","_co$15","provider","model","executionTimeMs","costUSD","_el$70","_tmpl$10","_el$71","_el$72","_el$73","_el$74","_el$75","_co$12","toFixed","firstTokenMs","cached","_tmpl$11","class","_tmpl$15","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"StreamingUIRenderer.cjs","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component - Phase 2\n *\n * Renders streaming dashboard components with skeleton states and progress indicators.\n * Uses the useStreamingUI hook for SSE connection and state management.\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, onCleanup } from 'solid-js'\nimport { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamingUI'\nimport type { UIComponent, RendererError } from '../types'\nimport { validateComponent } from '../services/validation'\nimport { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'\nimport { markRenderStart, markRenderEnd, PERF_PREFIX } from '../utils/perf'\nimport { useTelemetry } from '../context/MCPUITelemetryContext'\nimport type { ValidationErrorMode } from './UIResourceRenderer'\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). See `ValidationErrorMode` in `UIResourceRenderer`.\n */\n errorMode?: ValidationErrorMode\n}\n\n/**\n * Component Renderer - Inline lightweight version\n * (Full implementation in UIResourceRenderer)\n */\nfunction StreamingComponentRenderer(props: {\n component: UIComponent\n onError?: (error: RendererError) => void\n errorMode?: ValidationErrorMode\n}) {\n // Performance marks (v5.4.0) — see utils/perf.ts\n markRenderStart(props.component.id)\n\n // Telemetry sink (B.5 — v5.6.0). Same wiring as ComponentRenderer in\n // UIResourceRenderer.tsx — null when no Provider, no-op everywhere then.\n const telemetry = useTelemetry()\n\n onMount(() => {\n markRenderEnd(props.component.id)\n if (telemetry) {\n const ts = Date.now()\n telemetry.dispatch({\n type: 'component:mounted',\n id: props.component.id,\n componentType: props.component.type,\n ts,\n })\n if (typeof performance !== 'undefined' && typeof performance.getEntriesByName === 'function') {\n const entries = performance.getEntriesByName(`${PERF_PREFIX}${props.component.id}:render`, 'measure')\n const last = entries[entries.length - 1]\n if (last) {\n telemetry.dispatch({\n type: 'component:rendered',\n id: props.component.id,\n componentType: props.component.type,\n durationMs: last.duration,\n ts,\n })\n }\n }\n }\n })\n\n onCleanup(() => {\n if (telemetry) {\n telemetry.dispatch({\n type: 'component:unmounted',\n id: props.component.id,\n componentType: props.component.type,\n ts: Date.now(),\n })\n }\n })\n\n // Validate component before rendering\n const validation = validateComponent(props.component)\n if (!validation.valid) {\n props.onError?.({\n type: 'validation',\n message: 'Component validation failed',\n componentId: props.component.id,\n details: validation.errors,\n })\n\n if (telemetry) {\n telemetry.dispatch({\n type: 'validation:failed',\n id: props.component.id,\n componentType: props.component.type,\n errorCount: validation.errors?.length ?? 0,\n firstErrorCode: validation.errors?.[0]?.code ?? null,\n ts: Date.now(),\n })\n }\n\n const mode: ValidationErrorMode = props.errorMode ?? 'block'\n const firstError = validation.errors?.[0]?.message || 'Unknown validation error'\n\n if (mode === 'silent') {\n return null\n }\n\n if (mode === 'inline-warn') {\n return (\n <div\n class=\"inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200\"\n role=\"alert\"\n aria-label=\"Component validation warning\"\n title={firstError}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"w-3.5 h-3.5\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\" />\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\" />\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\n </svg>\n <span>Invalid {props.component.type}</span>\n </div>\n )\n }\n\n return (\n <div class=\"w-full bg-error-subtle border border-border-error rounded-lg p-4\">\n <p class=\"text-sm font-medium text-error-primary\">Validation Error</p>\n <p class=\"text-xs text-text-secondary mt-1\">\n {firstError}\n </p>\n </div>\n )\n }\n\n // Simplified renderer - just show component type and title\n // Full rendering logic in UIResourceRenderer\n const params = props.component.params as any\n\n return (\n <GenerativeUIErrorBoundary\n componentId={props.component.id}\n componentType={props.component.type}\n onError={props.onError}\n allowRetry={false}\n >\n <div class=\"w-full bg-surface-secondary border border-border-subtle rounded-lg p-4\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs font-medium text-text-tertiary uppercase\">\n {props.component.type}\n </span>\n </div>\n <Show when={params?.title}>\n <h3 class=\"text-sm font-semibold text-text-primary\">{params.title}</h3>\n </Show>\n <Show when={props.component.type === 'metric' && params?.value}>\n <div class=\"mt-2\">\n <p class=\"text-2xl font-semibold text-text-primary\">{params.value}</p>\n <Show when={params.unit}>\n <span class=\"text-sm text-text-secondary\">{params.unit}</span>\n </Show>\n </div>\n </Show>\n <div class=\"mt-3 text-xs text-text-tertiary\">\n Component ID: {props.component.id.slice(0, 8)}...\n </div>\n </div>\n </GenerativeUIErrorBoundary>\n )\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 [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 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 */}\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 <StreamingComponentRenderer\n component={component}\n onError={props.onRenderError}\n errorMode={props.errorMode}\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":["StreamingComponentRenderer","props","markRenderStart","component","id","telemetry","useTelemetry","onMount","markRenderEnd","ts","Date","now","dispatch","type","componentType","performance","getEntriesByName","entries","PERF_PREFIX","last","length","durationMs","duration","onCleanup","validation","validateComponent","valid","onError","message","componentId","details","errors","errorCount","firstErrorCode","code","mode","errorMode","firstError","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_co$","_$getNextMarker","_$setAttribute","_$insert","_el$7","_tmpl$2","_el$8","_el$9","params","_$createComponent","GenerativeUIErrorBoundary","allowRetry","children","_el$0","_tmpl$6","_el$1","_el$10","_el$22","_el$23","_co$4","_el$24","_el$25","_co$5","_el$17","_el$18","_el$20","_el$21","_co$3","Show","when","title","_el$11","_tmpl$3","_$memo","value","_el$12","_tmpl$5","_el$13","_el$15","_el$16","_co$2","unit","_el$14","_tmpl$4","slice","StreamingUIRenderer","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onComponentReceived","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","prev","setTimeout","next","delete","_el$26","_tmpl$13","_el$87","_el$88","_co$16","_el$89","_el$90","_co$17","_el$51","_el$52","_el$53","_co$1","_el$54","_el$55","_co$10","_el$91","_el$92","_co$18","showProgress","_el$27","_tmpl$9","_el$28","_el$29","_el$36","_el$37","_co$8","_el$38","_el$39","_el$41","_el$42","_co$9","totalCount","_el$30","_tmpl$7","_el$32","_el$33","_co$6","_el$31","_el$34","_el$35","_co$7","receivedCount","_tmpl$8","_$effect","_$p","_$style","_el$43","_tmpl$1","_el$44","_el$45","_el$46","_el$47","_el$49","_el$50","_co$0","recoverable","_el$48","_tmpl$0","$$click","_$runHydrationEvents","For","each","_el$93","_tmpl$14","onRenderError","_p$","_v$","position","colSpan","has","_v$2","colStart","e","_$className","t","undefined","Array","from","SkeletonComponent","showMetadata","_el$56","_tmpl$12","_el$57","_el$58","_el$59","_el$60","_el$61","_el$62","_el$63","_el$64","_el$65","_el$66","_el$68","_el$69","_co$11","_el$83","_el$84","_co$14","_el$76","_el$77","_el$78","_el$80","_el$81","_co$13","_el$85","_el$86","_co$15","provider","model","executionTimeMs","costUSD","_el$70","_tmpl$10","_el$71","_el$72","_el$73","_el$74","_el$75","_co$12","toFixed","firstTokenMs","cached","_tmpl$11","class","_tmpl$15","_$delegateEvents"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StreamingUIRenderer.d.ts","sourceRoot":"","sources":["../../src/components/StreamingUIRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AACpF,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"StreamingUIRenderer.d.ts","sourceRoot":"","sources":["../../src/components/StreamingUIRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AACpF,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,UAAU,CAAA;AAK1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAE/D,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;CAChC;AA6JD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kCA+KlE"}
|
|
@@ -1,14 +1,50 @@
|
|
|
1
1
|
import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, memo, effect, style, runHydrationEvents, className, setAttribute } from "solid-js/web";
|
|
2
|
-
import { createSignal, Show, For, onMount } from "solid-js";
|
|
2
|
+
import { createSignal, Show, For, onMount, onCleanup } from "solid-js";
|
|
3
3
|
import { useStreamingUI } from "../hooks/useStreamingUI.js";
|
|
4
4
|
import { validateComponent } from "../services/validation.js";
|
|
5
5
|
import { GenerativeUIErrorBoundary } from "./GenerativeUIErrorBoundary.js";
|
|
6
|
-
import { markRenderStart, markRenderEnd } from "../utils/perf.js";
|
|
6
|
+
import { markRenderStart, markRenderEnd, PERF_PREFIX } from "../utils/perf.js";
|
|
7
|
+
import { useTelemetry } from "../context/MCPUITelemetryContext.js";
|
|
7
8
|
var _tmpl$ = /* @__PURE__ */ template(`<div class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200"role=alert aria-label="Component validation warning"><svg xmlns=http://www.w3.org/2000/svg class="w-3.5 h-3.5"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1=12 y1=9 x2=12 y2=13></line><line x1=12 y1=17 x2=12.01 y2=17></line></svg><span>Invalid <!$><!/>`), _tmpl$2 = /* @__PURE__ */ template(`<div class="w-full bg-error-subtle border border-border-error rounded-lg p-4"><p class="text-sm font-medium text-error-primary">Validation Error</p><p class="text-xs text-text-secondary mt-1">`), _tmpl$3 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-text-primary">`), _tmpl$4 = /* @__PURE__ */ template(`<span class="text-sm text-text-secondary">`), _tmpl$5 = /* @__PURE__ */ template(`<div class=mt-2><p class="text-2xl font-semibold text-text-primary"></p><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<div class="w-full bg-surface-secondary border border-border-subtle rounded-lg p-4"><div class="flex items-center gap-2 mb-2"><span class="text-xs font-medium text-text-tertiary uppercase"></span></div><!$><!/><!$><!/><div class="mt-3 text-xs text-text-tertiary">Component ID: <!$><!/>...`), _tmpl$7 = /* @__PURE__ */ template(`<span class="text-sm text-text-secondary"><!$><!/> / <!$><!/>`), _tmpl$8 = /* @__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$9 = /* @__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$0 = /* @__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">Retry`), _tmpl$1 = /* @__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$10 = /* @__PURE__ */ template(`<div><div class="font-medium text-text-primary">Cost</div><div>$<!$><!/>`), _tmpl$11 = /* @__PURE__ */ template(`<div><div class="font-medium text-text-primary">Cached</div><div class=text-success-primary>Yes`), _tmpl$12 = /* @__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$13 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><div class="grid grid-cols-12 gap-4"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$14 = /* @__PURE__ */ template(`<div>`), _tmpl$15 = /* @__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">`);
|
|
8
9
|
function StreamingComponentRenderer(props) {
|
|
9
|
-
var _a, _b, _c;
|
|
10
|
+
var _a, _b, _c, _d, _e, _f;
|
|
10
11
|
markRenderStart(props.component.id);
|
|
11
|
-
|
|
12
|
+
const telemetry = useTelemetry();
|
|
13
|
+
onMount(() => {
|
|
14
|
+
markRenderEnd(props.component.id);
|
|
15
|
+
if (telemetry) {
|
|
16
|
+
const ts = Date.now();
|
|
17
|
+
telemetry.dispatch({
|
|
18
|
+
type: "component:mounted",
|
|
19
|
+
id: props.component.id,
|
|
20
|
+
componentType: props.component.type,
|
|
21
|
+
ts
|
|
22
|
+
});
|
|
23
|
+
if (typeof performance !== "undefined" && typeof performance.getEntriesByName === "function") {
|
|
24
|
+
const entries = performance.getEntriesByName(`${PERF_PREFIX}${props.component.id}:render`, "measure");
|
|
25
|
+
const last = entries[entries.length - 1];
|
|
26
|
+
if (last) {
|
|
27
|
+
telemetry.dispatch({
|
|
28
|
+
type: "component:rendered",
|
|
29
|
+
id: props.component.id,
|
|
30
|
+
componentType: props.component.type,
|
|
31
|
+
durationMs: last.duration,
|
|
32
|
+
ts
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
onCleanup(() => {
|
|
39
|
+
if (telemetry) {
|
|
40
|
+
telemetry.dispatch({
|
|
41
|
+
type: "component:unmounted",
|
|
42
|
+
id: props.component.id,
|
|
43
|
+
componentType: props.component.type,
|
|
44
|
+
ts: Date.now()
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
});
|
|
12
48
|
const validation = validateComponent(props.component);
|
|
13
49
|
if (!validation.valid) {
|
|
14
50
|
(_a = props.onError) == null ? void 0 : _a.call(props, {
|
|
@@ -17,8 +53,18 @@ function StreamingComponentRenderer(props) {
|
|
|
17
53
|
componentId: props.component.id,
|
|
18
54
|
details: validation.errors
|
|
19
55
|
});
|
|
56
|
+
if (telemetry) {
|
|
57
|
+
telemetry.dispatch({
|
|
58
|
+
type: "validation:failed",
|
|
59
|
+
id: props.component.id,
|
|
60
|
+
componentType: props.component.type,
|
|
61
|
+
errorCount: ((_b = validation.errors) == null ? void 0 : _b.length) ?? 0,
|
|
62
|
+
firstErrorCode: ((_d = (_c = validation.errors) == null ? void 0 : _c[0]) == null ? void 0 : _d.code) ?? null,
|
|
63
|
+
ts: Date.now()
|
|
64
|
+
});
|
|
65
|
+
}
|
|
20
66
|
const mode = props.errorMode ?? "block";
|
|
21
|
-
const firstError = ((
|
|
67
|
+
const firstError = ((_f = (_e = validation.errors) == null ? void 0 : _e[0]) == null ? void 0 : _f.message) || "Unknown validation error";
|
|
22
68
|
if (mode === "silent") {
|
|
23
69
|
return null;
|
|
24
70
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StreamingUIRenderer.js","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component - Phase 2\n *\n * Renders streaming dashboard components with skeleton states and progress indicators.\n * Uses the useStreamingUI hook for SSE connection and state management.\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 { validateComponent } from '../services/validation'\nimport { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'\nimport { markRenderStart, markRenderEnd } from '../utils/perf'\nimport type { ValidationErrorMode } from './UIResourceRenderer'\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). See `ValidationErrorMode` in `UIResourceRenderer`.\n */\n errorMode?: ValidationErrorMode\n}\n\n/**\n * Component Renderer - Inline lightweight version\n * (Full implementation in UIResourceRenderer)\n */\nfunction StreamingComponentRenderer(props: {\n component: UIComponent\n onError?: (error: RendererError) => void\n errorMode?: ValidationErrorMode\n}) {\n // Performance marks (v5.4.0) — see utils/perf.ts\n markRenderStart(props.component.id)\n onMount(() => markRenderEnd(props.component.id))\n\n // Validate component before rendering\n const validation = validateComponent(props.component)\n if (!validation.valid) {\n props.onError?.({\n type: 'validation',\n message: 'Component validation failed',\n componentId: props.component.id,\n details: validation.errors,\n })\n\n const mode: ValidationErrorMode = props.errorMode ?? 'block'\n const firstError = validation.errors?.[0]?.message || 'Unknown validation error'\n\n if (mode === 'silent') {\n return null\n }\n\n if (mode === 'inline-warn') {\n return (\n <div\n class=\"inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200\"\n role=\"alert\"\n aria-label=\"Component validation warning\"\n title={firstError}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"w-3.5 h-3.5\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\" />\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\" />\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\n </svg>\n <span>Invalid {props.component.type}</span>\n </div>\n )\n }\n\n return (\n <div class=\"w-full bg-error-subtle border border-border-error rounded-lg p-4\">\n <p class=\"text-sm font-medium text-error-primary\">Validation Error</p>\n <p class=\"text-xs text-text-secondary mt-1\">\n {firstError}\n </p>\n </div>\n )\n }\n\n // Simplified renderer - just show component type and title\n // Full rendering logic in UIResourceRenderer\n const params = props.component.params as any\n\n return (\n <GenerativeUIErrorBoundary\n componentId={props.component.id}\n componentType={props.component.type}\n onError={props.onError}\n allowRetry={false}\n >\n <div class=\"w-full bg-surface-secondary border border-border-subtle rounded-lg p-4\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs font-medium text-text-tertiary uppercase\">\n {props.component.type}\n </span>\n </div>\n <Show when={params?.title}>\n <h3 class=\"text-sm font-semibold text-text-primary\">{params.title}</h3>\n </Show>\n <Show when={props.component.type === 'metric' && params?.value}>\n <div class=\"mt-2\">\n <p class=\"text-2xl font-semibold text-text-primary\">{params.value}</p>\n <Show when={params.unit}>\n <span class=\"text-sm text-text-secondary\">{params.unit}</span>\n </Show>\n </div>\n </Show>\n <div class=\"mt-3 text-xs text-text-tertiary\">\n Component ID: {props.component.id.slice(0, 8)}...\n </div>\n </div>\n </GenerativeUIErrorBoundary>\n )\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 [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 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 */}\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 <StreamingComponentRenderer\n component={component}\n onError={props.onRenderError}\n errorMode={props.errorMode}\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":["StreamingComponentRenderer","props","markRenderStart","component","id","onMount","markRenderEnd","validation","validateComponent","valid","onError","type","message","componentId","details","errors","mode","errorMode","firstError","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_co$","_$getNextMarker","_$setAttribute","_$insert","_el$7","_tmpl$2","_el$8","_el$9","params","_$createComponent","GenerativeUIErrorBoundary","componentType","allowRetry","children","_el$0","_tmpl$6","_el$1","_el$10","_el$22","_el$23","_co$4","_el$24","_el$25","_co$5","_el$17","_el$18","_el$20","_el$21","_co$3","Show","when","title","_el$11","_tmpl$3","_$memo","value","_el$12","_tmpl$5","_el$13","_el$15","_el$16","_co$2","unit","_el$14","_tmpl$4","slice","StreamingUIRenderer","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onComponentReceived","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","prev","setTimeout","next","delete","_el$26","_tmpl$13","_el$87","_el$88","_co$16","_el$89","_el$90","_co$17","_el$51","_el$52","_el$53","_co$1","_el$54","_el$55","_co$10","_el$91","_el$92","_co$18","showProgress","_el$27","_tmpl$9","_el$28","_el$29","_el$36","_el$37","_co$8","_el$38","_el$39","_el$41","_el$42","_co$9","totalCount","_el$30","_tmpl$7","_el$32","_el$33","_co$6","_el$31","_el$34","_el$35","_co$7","receivedCount","_tmpl$8","_$effect","_$p","_$style","_el$43","_tmpl$1","_el$44","_el$45","_el$46","_el$47","_el$49","_el$50","_co$0","recoverable","_el$48","_tmpl$0","$$click","_$runHydrationEvents","For","each","_el$93","_tmpl$14","onRenderError","_p$","_v$","position","colSpan","has","_v$2","colStart","e","_$className","t","undefined","Array","from","length","SkeletonComponent","showMetadata","_el$56","_tmpl$12","_el$57","_el$58","_el$59","_el$60","_el$61","_el$62","_el$63","_el$64","_el$65","_el$66","_el$68","_el$69","_co$11","_el$83","_el$84","_co$14","_el$76","_el$77","_el$78","_el$80","_el$81","_co$13","_el$85","_el$86","_co$15","provider","model","executionTimeMs","costUSD","_el$70","_tmpl$10","_el$71","_el$72","_el$73","_el$74","_el$75","_co$12","toFixed","firstTokenMs","cached","_tmpl$11","class","_tmpl$15","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"StreamingUIRenderer.js","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component - Phase 2\n *\n * Renders streaming dashboard components with skeleton states and progress indicators.\n * Uses the useStreamingUI hook for SSE connection and state management.\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, onCleanup } from 'solid-js'\nimport { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamingUI'\nimport type { UIComponent, RendererError } from '../types'\nimport { validateComponent } from '../services/validation'\nimport { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'\nimport { markRenderStart, markRenderEnd, PERF_PREFIX } from '../utils/perf'\nimport { useTelemetry } from '../context/MCPUITelemetryContext'\nimport type { ValidationErrorMode } from './UIResourceRenderer'\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). See `ValidationErrorMode` in `UIResourceRenderer`.\n */\n errorMode?: ValidationErrorMode\n}\n\n/**\n * Component Renderer - Inline lightweight version\n * (Full implementation in UIResourceRenderer)\n */\nfunction StreamingComponentRenderer(props: {\n component: UIComponent\n onError?: (error: RendererError) => void\n errorMode?: ValidationErrorMode\n}) {\n // Performance marks (v5.4.0) — see utils/perf.ts\n markRenderStart(props.component.id)\n\n // Telemetry sink (B.5 — v5.6.0). Same wiring as ComponentRenderer in\n // UIResourceRenderer.tsx — null when no Provider, no-op everywhere then.\n const telemetry = useTelemetry()\n\n onMount(() => {\n markRenderEnd(props.component.id)\n if (telemetry) {\n const ts = Date.now()\n telemetry.dispatch({\n type: 'component:mounted',\n id: props.component.id,\n componentType: props.component.type,\n ts,\n })\n if (typeof performance !== 'undefined' && typeof performance.getEntriesByName === 'function') {\n const entries = performance.getEntriesByName(`${PERF_PREFIX}${props.component.id}:render`, 'measure')\n const last = entries[entries.length - 1]\n if (last) {\n telemetry.dispatch({\n type: 'component:rendered',\n id: props.component.id,\n componentType: props.component.type,\n durationMs: last.duration,\n ts,\n })\n }\n }\n }\n })\n\n onCleanup(() => {\n if (telemetry) {\n telemetry.dispatch({\n type: 'component:unmounted',\n id: props.component.id,\n componentType: props.component.type,\n ts: Date.now(),\n })\n }\n })\n\n // Validate component before rendering\n const validation = validateComponent(props.component)\n if (!validation.valid) {\n props.onError?.({\n type: 'validation',\n message: 'Component validation failed',\n componentId: props.component.id,\n details: validation.errors,\n })\n\n if (telemetry) {\n telemetry.dispatch({\n type: 'validation:failed',\n id: props.component.id,\n componentType: props.component.type,\n errorCount: validation.errors?.length ?? 0,\n firstErrorCode: validation.errors?.[0]?.code ?? null,\n ts: Date.now(),\n })\n }\n\n const mode: ValidationErrorMode = props.errorMode ?? 'block'\n const firstError = validation.errors?.[0]?.message || 'Unknown validation error'\n\n if (mode === 'silent') {\n return null\n }\n\n if (mode === 'inline-warn') {\n return (\n <div\n class=\"inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200\"\n role=\"alert\"\n aria-label=\"Component validation warning\"\n title={firstError}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"w-3.5 h-3.5\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\" />\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\" />\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\n </svg>\n <span>Invalid {props.component.type}</span>\n </div>\n )\n }\n\n return (\n <div class=\"w-full bg-error-subtle border border-border-error rounded-lg p-4\">\n <p class=\"text-sm font-medium text-error-primary\">Validation Error</p>\n <p class=\"text-xs text-text-secondary mt-1\">\n {firstError}\n </p>\n </div>\n )\n }\n\n // Simplified renderer - just show component type and title\n // Full rendering logic in UIResourceRenderer\n const params = props.component.params as any\n\n return (\n <GenerativeUIErrorBoundary\n componentId={props.component.id}\n componentType={props.component.type}\n onError={props.onError}\n allowRetry={false}\n >\n <div class=\"w-full bg-surface-secondary border border-border-subtle rounded-lg p-4\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs font-medium text-text-tertiary uppercase\">\n {props.component.type}\n </span>\n </div>\n <Show when={params?.title}>\n <h3 class=\"text-sm font-semibold text-text-primary\">{params.title}</h3>\n </Show>\n <Show when={props.component.type === 'metric' && params?.value}>\n <div class=\"mt-2\">\n <p class=\"text-2xl font-semibold text-text-primary\">{params.value}</p>\n <Show when={params.unit}>\n <span class=\"text-sm text-text-secondary\">{params.unit}</span>\n </Show>\n </div>\n </Show>\n <div class=\"mt-3 text-xs text-text-tertiary\">\n Component ID: {props.component.id.slice(0, 8)}...\n </div>\n </div>\n </GenerativeUIErrorBoundary>\n )\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 [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 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 */}\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 <StreamingComponentRenderer\n component={component}\n onError={props.onRenderError}\n errorMode={props.errorMode}\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":["StreamingComponentRenderer","props","markRenderStart","component","id","telemetry","useTelemetry","onMount","markRenderEnd","ts","Date","now","dispatch","type","componentType","performance","getEntriesByName","entries","PERF_PREFIX","last","length","durationMs","duration","onCleanup","validation","validateComponent","valid","onError","message","componentId","details","errors","errorCount","firstErrorCode","code","mode","errorMode","firstError","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_co$","_$getNextMarker","_$setAttribute","_$insert","_el$7","_tmpl$2","_el$8","_el$9","params","_$createComponent","GenerativeUIErrorBoundary","allowRetry","children","_el$0","_tmpl$6","_el$1","_el$10","_el$22","_el$23","_co$4","_el$24","_el$25","_co$5","_el$17","_el$18","_el$20","_el$21","_co$3","Show","when","title","_el$11","_tmpl$3","_$memo","value","_el$12","_tmpl$5","_el$13","_el$15","_el$16","_co$2","unit","_el$14","_tmpl$4","slice","StreamingUIRenderer","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onComponentReceived","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","prev","setTimeout","next","delete","_el$26","_tmpl$13","_el$87","_el$88","_co$16","_el$89","_el$90","_co$17","_el$51","_el$52","_el$53","_co$1","_el$54","_el$55","_co$10","_el$91","_el$92","_co$18","showProgress","_el$27","_tmpl$9","_el$28","_el$29","_el$36","_el$37","_co$8","_el$38","_el$39","_el$41","_el$42","_co$9","totalCount","_el$30","_tmpl$7","_el$32","_el$33","_co$6","_el$31","_el$34","_el$35","_co$7","receivedCount","_tmpl$8","_$effect","_$p","_$style","_el$43","_tmpl$1","_el$44","_el$45","_el$46","_el$47","_el$49","_el$50","_co$0","recoverable","_el$48","_tmpl$0","$$click","_$runHydrationEvents","For","each","_el$93","_tmpl$14","onRenderError","_p$","_v$","position","colSpan","has","_v$2","colStart","e","_$className","t","undefined","Array","from","SkeletonComponent","showMetadata","_el$56","_tmpl$12","_el$57","_el$58","_el$59","_el$60","_el$61","_el$62","_el$63","_el$64","_el$65","_el$66","_el$68","_el$69","_co$11","_el$83","_el$84","_co$14","_el$76","_el$77","_el$78","_el$80","_el$81","_co$13","_el$85","_el$86","_co$15","provider","model","executionTimeMs","costUSD","_el$70","_tmpl$10","_el$71","_el$72","_el$73","_el$74","_el$75","_co$12","toFixed","firstTokenMs","cached","_tmpl$11","class","_tmpl$15","_$delegateEvents"],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ const solidJs = require("solid-js");
|
|
|
6
6
|
const validation = require("../services/validation.cjs");
|
|
7
7
|
const GenerativeUIErrorBoundary = require("./GenerativeUIErrorBoundary.cjs");
|
|
8
8
|
const perf = require("../utils/perf.cjs");
|
|
9
|
+
const MCPUITelemetryContext = require("../context/MCPUITelemetryContext.cjs");
|
|
9
10
|
const GridRenderer = require("./GridRenderer.cjs");
|
|
10
11
|
const FooterRenderer = require("./FooterRenderer.cjs");
|
|
11
12
|
const CarouselRenderer = require("./CarouselRenderer.cjs");
|
|
@@ -1055,9 +1056,44 @@ function LinkRenderer(props) {
|
|
|
1055
1056
|
})();
|
|
1056
1057
|
}
|
|
1057
1058
|
function ComponentRenderer(props) {
|
|
1058
|
-
var _a, _b, _c;
|
|
1059
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1059
1060
|
perf.markRenderStart(props.component.id);
|
|
1060
|
-
|
|
1061
|
+
const telemetry = MCPUITelemetryContext.useTelemetry();
|
|
1062
|
+
solidJs.onMount(() => {
|
|
1063
|
+
perf.markRenderEnd(props.component.id);
|
|
1064
|
+
if (telemetry) {
|
|
1065
|
+
const ts = Date.now();
|
|
1066
|
+
telemetry.dispatch({
|
|
1067
|
+
type: "component:mounted",
|
|
1068
|
+
id: props.component.id,
|
|
1069
|
+
componentType: props.component.type,
|
|
1070
|
+
ts
|
|
1071
|
+
});
|
|
1072
|
+
if (typeof performance !== "undefined" && typeof performance.getEntriesByName === "function") {
|
|
1073
|
+
const entries = performance.getEntriesByName(`${perf.PERF_PREFIX}${props.component.id}:render`, "measure");
|
|
1074
|
+
const last = entries[entries.length - 1];
|
|
1075
|
+
if (last) {
|
|
1076
|
+
telemetry.dispatch({
|
|
1077
|
+
type: "component:rendered",
|
|
1078
|
+
id: props.component.id,
|
|
1079
|
+
componentType: props.component.type,
|
|
1080
|
+
durationMs: last.duration,
|
|
1081
|
+
ts
|
|
1082
|
+
});
|
|
1083
|
+
}
|
|
1084
|
+
}
|
|
1085
|
+
}
|
|
1086
|
+
});
|
|
1087
|
+
solidJs.onCleanup(() => {
|
|
1088
|
+
if (telemetry) {
|
|
1089
|
+
telemetry.dispatch({
|
|
1090
|
+
type: "component:unmounted",
|
|
1091
|
+
id: props.component.id,
|
|
1092
|
+
componentType: props.component.type,
|
|
1093
|
+
ts: Date.now()
|
|
1094
|
+
});
|
|
1095
|
+
}
|
|
1096
|
+
});
|
|
1061
1097
|
const validation$1 = validation.validateComponent(props.component);
|
|
1062
1098
|
if (!validation$1.valid) {
|
|
1063
1099
|
(_a = props.onError) == null ? void 0 : _a.call(props, {
|
|
@@ -1066,8 +1102,18 @@ function ComponentRenderer(props) {
|
|
|
1066
1102
|
componentId: props.component.id,
|
|
1067
1103
|
details: validation$1.errors
|
|
1068
1104
|
});
|
|
1105
|
+
if (telemetry) {
|
|
1106
|
+
telemetry.dispatch({
|
|
1107
|
+
type: "validation:failed",
|
|
1108
|
+
id: props.component.id,
|
|
1109
|
+
componentType: props.component.type,
|
|
1110
|
+
errorCount: ((_b = validation$1.errors) == null ? void 0 : _b.length) ?? 0,
|
|
1111
|
+
firstErrorCode: ((_d = (_c = validation$1.errors) == null ? void 0 : _c[0]) == null ? void 0 : _d.code) ?? null,
|
|
1112
|
+
ts: Date.now()
|
|
1113
|
+
});
|
|
1114
|
+
}
|
|
1069
1115
|
const mode = props.errorMode ?? "block";
|
|
1070
|
-
const firstError = ((
|
|
1116
|
+
const firstError = ((_f = (_e = validation$1.errors) == null ? void 0 : _e[0]) == null ? void 0 : _f.message) || "Unknown validation error";
|
|
1071
1117
|
if (mode === "silent") {
|
|
1072
1118
|
return null;
|
|
1073
1119
|
}
|
|
@@ -1319,7 +1365,20 @@ function ActionRenderer(props) {
|
|
|
1319
1365
|
execute,
|
|
1320
1366
|
isExecuting
|
|
1321
1367
|
} = useAction.useAction();
|
|
1368
|
+
const telemetry = MCPUITelemetryContext.useTelemetry();
|
|
1369
|
+
function dispatchTelemetry() {
|
|
1370
|
+
if (!telemetry) return;
|
|
1371
|
+
const actionName = params.toolName ?? params.action ?? "unknown";
|
|
1372
|
+
telemetry.dispatch({
|
|
1373
|
+
type: "action:dispatched",
|
|
1374
|
+
id: props.component.id,
|
|
1375
|
+
componentType: "action",
|
|
1376
|
+
actionName,
|
|
1377
|
+
ts: Date.now()
|
|
1378
|
+
});
|
|
1379
|
+
}
|
|
1322
1380
|
const handleClick = async (e) => {
|
|
1381
|
+
dispatchTelemetry();
|
|
1323
1382
|
if (params.action === "tool-call" && params.toolName) {
|
|
1324
1383
|
e.preventDefault();
|
|
1325
1384
|
await execute(params.toolName, params.params || {});
|