@ai-gui/vue 0.1.0 → 0.3.0

package/README.md

@@ -13,13 +13,18 @@ pnpm add @ai-gui/core @ai-gui/vue
 ```vue
 <script setup lang="ts">
 import { ref } from "vue"
-import { CardRegistry } from "@ai-gui/core"
-import { AIRenderer } from "@ai-gui/vue"
+import { ActionRegistry, CardRegistry, CardStore, createActionRuntime } from "@ai-gui/core"
+import { AIRenderer, useActionState } from "@ai-gui/vue"
 
 const registry = new CardRegistry()
 // A card render component receives props `data` and emits `action`.
 registry.register({ type: "weather", description: "Weather summary", render: WeatherCard })
 
+const actions = new ActionRegistry()
+actions.register({ type: "refresh", run: async (params, { signal }) => fetch("/api/weather", { signal }) })
+const cardStore = new CardStore({ registry })
+const actionRuntime = createActionRuntime({ registry: actions, cardStore })
+
 const r = ref<InstanceType<typeof AIRenderer>>()
 
 async function ask() {
@@ -30,13 +35,16 @@ async function ask() {
 </script>
 
 <template>
-  <AIRenderer ref="r" :registry="registry" @card-action="(a) => {/* app makes the real request */}" />
+  <AIRenderer ref="r" :registry="registry" :card-store="cardStore" :action-runtime="actionRuntime" @card-action="(a) => console.log(a)" />
 </template>
 ```
 
 ## Exports
 
-- `<AIRenderer :registry :plugins :sanitize @card-action />` — a render-function component; imperative `push` / `feed` / `reset` via a template ref (exposed).
+- `<AIRenderer :registry :card-store :plugins :sanitize :action-runtime @card-action />` — a render-function component; imperative `push` / `feed` / `reset` via a template ref (exposed).
 - `useAIRenderer()` — composable returning `{ nodes, push, feed, reset }`.
+- `useActionState(runtime, key)` — reactive action lifecycle state.
+
+Cards with a top-level `id` subscribe to the supplied `CardStore`. Their Vue component receives `data` and `state` props and emits `action`; store updates preserve the component instance and local refs.
 
 Card component contract: props `data`, `emits: ['action']`. See the [root README](../../README.md) for cards, plugins, and `buildSystemPrompt`.

package/dist/index.cjs

@@ -28,24 +28,46 @@ const __ai_gui_core = __toESM(require("@ai-gui/core"));
 //#region src/use-ai-renderer.ts
 function useAIRenderer(options = {}) {
 	const nodes = (0, vue.shallowRef)([]);
+	let active = true;
 	const renderer = new __ai_gui_core.Renderer({
 		...options,
 		plugins: options.plugins,
 		onPatch: (_patches, snapshot) => {
-			nodes.value = snapshot;
+			if (active) nodes.value = snapshot;
 		}
 	});
 	return {
+		renderer,
 		nodes,
-		push: (c) => renderer.push(c),
-		feed: (s) => renderer.feed(s),
+		push: (c) => {
+			if (active) renderer.push(c);
+		},
+		feed: (source, feedOptions) => active ? renderer.feed(source, feedOptions) : Promise.resolve(),
 		reset: () => {
+			if (active) {
+				renderer.reset();
+				nodes.value = [];
+			}
+		},
+		destroy: () => {
+			active = false;
 			renderer.reset();
 			nodes.value = [];
 		}
 	};
 }
 
+//#endregion
+//#region src/use-action-state.ts
+function useActionState(runtime, key) {
+	const state = (0, vue.shallowRef)(runtime.getState(key));
+	const unsubscribe = runtime.subscribe((next) => {
+		if (next.key === key) state.value = next;
+	});
+	(0, vue.onScopeDispose)(unsubscribe);
+	return state;
+}
+
 //#endregion
 //#region src/render-output.ts
 /** Host element for imperative `mount` outputs, wired to Vue's lifecycle. */
@@ -61,6 +83,10 @@ const MountHost = (0, vue.defineComponent)({
 		(0, vue.onMounted)(() => {
 			if (elRef.value) cleanup = props.mount(elRef.value);
 		});
+		(0, vue.watch)(() => props.mount, (mount) => {
+			if (typeof cleanup === "function") cleanup();
+			cleanup = elRef.value ? mount(elRef.value) : void 0;
+		});
 		(0, vue.onBeforeUnmount)(() => {
 			if (typeof cleanup === "function") cleanup();
 		});
@@ -71,10 +97,10 @@ const MountHost = (0, vue.defineComponent)({
 	}
 });
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-function renderOutput(out) {
+function renderOutput(out, sanitize) {
 	switch (out.kind) {
-		case "html": return (0, vue.h)("div", { innerHTML: (0, __ai_gui_core.sanitizeHtml)(out.html) });
-		case "element": return (0, vue.h)(out.tag, out.props, (out.children ?? []).map(renderOutput));
+		case "html": return (0, vue.h)("div", { innerHTML: sanitizeOutput(out.html, sanitize) });
+		case "element": return (0, vue.h)(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize)));
 		case "mount": return (0, vue.h)(MountHost, { mount: out.mount });
 		case "card": return (0, vue.h)("pre", { "data-aigui-card-fallback": "" }, [(0, vue.h)("code", JSON.stringify(out.data, null, 2))]);
 	}
@@ -82,39 +108,84 @@ function renderOutput(out) {
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */
 const AsyncOutput = (0, vue.defineComponent)({
 	name: "AsyncOutput",
-	props: { promise: {
-		type: Object,
-		required: true
-	} },
+	props: {
+		promise: {
+			type: Object,
+			required: true
+		},
+		sanitize: {
+			type: [Boolean, Object],
+			default: void 0
+		}
+	},
 	setup(props) {
 		const resolved = (0, vue.ref)(null);
-		props.promise.then((v) => {
-			resolved.value = v;
+		const failed = (0, vue.ref)(false);
+		let generation = 0;
+		let active = true;
+		const awaitPromise = (promise) => {
+			const current = ++generation;
+			resolved.value = null;
+			failed.value = false;
+			promise.then((value) => {
+				if (active && current === generation) resolved.value = value;
+			}, () => {
+				if (active && current === generation) failed.value = true;
+			});
+		};
+		(0, vue.watch)(() => [(0, vue.toRaw)(props.promise)], ([promise]) => awaitPromise(promise), { immediate: true });
+		(0, vue.onBeforeUnmount)(() => {
+			active = false;
+			generation++;
 		});
-		return () => resolved.value ? renderOutput(resolved.value) : (0, vue.h)("span", { "data-aigui-async-pending": "" });
+		return () => {
+			if (failed.value) return (0, vue.h)("span", { "data-aigui-async-error": "" });
+			if (!resolved.value) return (0, vue.h)("span", { "data-aigui-async-pending": "" });
+			try {
+				return renderOutput(resolved.value, props.sanitize);
+			} catch {
+				return (0, vue.h)("span", { "data-aigui-async-error": "" });
+			}
+		};
 	}
 });
+function sanitizeOutput(html, sanitize) {
+	if (sanitize === false) return html;
+	return (0, __ai_gui_core.sanitizeHtml)(html, typeof sanitize === "object" ? sanitize : void 0);
+}
 
 //#endregion
 //#region src/render-node.ts
 function renderNode(node, ctx) {
-	const r = (0, __ai_gui_core.collectNodeRenderers)(ctx.plugins)[node.type];
+	const r = (ctx.nodeRenderers ?? (0, __ai_gui_core.collectNodeRenderers)(ctx.plugins))[node.type];
 	if (r) {
-		const out = r(node);
-		if (out && typeof out.then === "function") return (0, vue.h)(AsyncOutput, {
+		if (node.complete === false) return (0, vue.h)("div", {
 			key: node.key,
-			promise: out
+			"data-aigui-block-loading": "",
+			"data-block-type": node.type
 		});
-		return renderOutput(out);
+		try {
+			const out = r(node);
+			if (out && typeof out.then === "function") return (0, vue.h)(AsyncOutput, {
+				key: node.key,
+				promise: out,
+				sanitize: ctx.sanitize
+			});
+			const vnode = renderOutput(out, ctx.sanitize);
+			vnode.key = node.key;
+			return vnode;
+		} catch {
+			return renderFallback(node, ctx);
+		}
 	}
 	switch (node.type) {
 		case "heading": return (0, vue.h)(node.tag ?? "h1", {
 			key: node.key,
-			innerHTML: node.html ?? ""
+			innerHTML: renderHtml(node.html ?? "", ctx)
 		});
 		case "paragraph": return (0, vue.h)("p", {
 			key: node.key,
-			innerHTML: node.html ?? ""
+			innerHTML: renderHtml(node.html ?? "", ctx)
 		});
 		case "code": return (0, vue.h)("pre", {
 			key: node.key,
@@ -123,13 +194,10 @@ function renderNode(node, ctx) {
 		case "hr": return (0, vue.h)("hr", { key: node.key });
 		case "html": return (0, vue.h)("div", {
 			key: node.key,
-			innerHTML: node.content ?? ""
+			innerHTML: renderHtml(node.content ?? "", ctx)
 		});
 		case "card": return renderCard(node, ctx);
-		default: return (0, vue.h)("div", {
-			key: node.key,
-			innerHTML: node.html ?? (0, __ai_gui_core.sanitizeHtml)(node.content ?? "")
-		});
+		default: return renderFallback(node, ctx);
 	}
 }
 function renderCard(node, ctx) {
@@ -145,11 +213,24 @@ function renderCard(node, ctx) {
 		"data-aigui-card-invalid": ""
 	}, [(0, vue.h)("code", JSON.stringify(card.data, null, 2))]);
 	const Comp = ctx.registry?.getRender(card.type);
+	if (card.id && ctx.cardStore) return (0, vue.h)(CardHost, {
+		key: node.key,
+		component: Comp ? (0, vue.markRaw)((0, vue.toRaw)(Comp)) : void 0,
+		store: ctx.cardStore,
+		cardId: card.id,
+		cardType: card.type,
+		initialData: card.data,
+		onAction: (a) => ctx.onCardAction?.({
+			...a,
+			cardType: card.type,
+			cardId: card.id
+		})
+	});
 	if (!Comp) return (0, vue.h)("pre", {
 		key: node.key,
 		"data-aigui-card-fallback": ""
 	}, [(0, vue.h)("code", JSON.stringify(card.data, null, 2))]);
-	return (0, vue.h)(Comp, {
+	return (0, vue.h)((0, vue.markRaw)((0, vue.toRaw)(Comp)), {
 		key: node.key,
 		data: card.data,
 		onAction: (a) => ctx.onCardAction?.({
@@ -158,11 +239,101 @@ function renderCard(node, ctx) {
 		})
 	});
 }
+const CardHost = (0, vue.defineComponent)({
+	name: "AIGuiCardHost",
+	props: {
+		component: {
+			type: [Object, Function],
+			default: void 0
+		},
+		store: {
+			type: Object,
+			required: true
+		},
+		cardId: {
+			type: String,
+			required: true
+		},
+		cardType: {
+			type: String,
+			required: true
+		},
+		initialData: {
+			type: null,
+			required: true
+		}
+	},
+	emits: ["action"],
+	setup(props, { emit }) {
+		const record = (0, vue.shallowRef)();
+		const failed = (0, vue.shallowRef)(false);
+		let unsubscribe;
+		let stopWatch;
+		const bind = ([store, cardId, cardType, initialData]) => {
+			unsubscribe?.();
+			unsubscribe = void 0;
+			failed.value = false;
+			record.value = void 0;
+			unsubscribe = store.subscribe(cardId, (next) => {
+				if (!next || next.type !== cardType) {
+					failed.value = true;
+					record.value = void 0;
+					return;
+				}
+				failed.value = false;
+				record.value = next;
+			});
+			try {
+				const current = store.register({
+					id: cardId,
+					type: cardType,
+					data: initialData
+				});
+				if (current.type !== cardType) throw new Error(`Card type mismatch for "${cardId}"`);
+				record.value = current;
+			} catch {
+				failed.value = true;
+				record.value = void 0;
+			}
+		};
+		(0, vue.onMounted)(() => {
+			stopWatch = (0, vue.watch)(() => [
+				props.store,
+				props.cardId,
+				props.cardType,
+				props.initialData
+			], bind, { immediate: true });
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			stopWatch?.();
+			unsubscribe?.();
+		});
+		return () => {
+			if (failed.value || !record.value || !props.component) return (0, vue.h)("pre", { "data-aigui-card-fallback": "" }, [(0, vue.h)("code", JSON.stringify(record.value?.data ?? props.initialData, null, 2))]);
+			return (0, vue.h)((0, vue.markRaw)((0, vue.toRaw)(props.component)), {
+				data: record.value.data,
+				state: record.value.action,
+				onAction: (action) => emit("action", action)
+			});
+		};
+	}
+});
+function renderFallback(node, ctx) {
+	return (0, vue.h)("div", {
+		key: node.key,
+		innerHTML: renderHtml(node.html ?? node.content ?? "", ctx)
+	});
+}
+function renderHtml(html, ctx) {
+	if (ctx.sanitized || ctx.sanitize === false) return html;
+	return (0, __ai_gui_core.sanitizeHtml)(html, typeof ctx.sanitize === "object" ? ctx.sanitize : void 0);
+}
 
 //#endregion
 //#region src/ai-renderer.ts
 const AIRenderer = (0, vue.defineComponent)({
 	name: "AIRenderer",
+	emits: ["card-action"],
 	props: {
 		registry: {
 			type: Object,
@@ -173,32 +344,108 @@ const AIRenderer = (0, vue.defineComponent)({
 			default: void 0
 		},
 		sanitize: {
-			type: Boolean,
+			type: [Boolean, Object],
 			default: void 0
 		},
-		onCardAction: {
+		actionRuntime: {
+			type: Object,
+			default: void 0
+		},
+		cardStore: {
+			type: Object,
+			default: void 0
+		},
+		debug: {
+			type: Boolean,
+			default: false
+		},
+		onDebugEvent: {
 			type: Function,
 			default: void 0
 		}
 	},
-	setup(props, { expose }) {
-		const { nodes, push, feed, reset } = useAIRenderer({
+	setup(props, { emit, expose }) {
+		const current = (0, vue.shallowRef)(useAIRenderer({
 			registry: props.registry,
 			sanitize: props.sanitize,
-			plugins: props.plugins
+			plugins: props.plugins,
+			debug: props.debug,
+			onDebugEvent: props.onDebugEvent
+		}));
+		const nodeRenderers = (0, vue.shallowRef)((0, __ai_gui_core.collectNodeRenderers)(props.plugins, { debugTarget: current.value.renderer }));
+		let actionScope = {
+			controller: new AbortController(),
+			owner: {}
+		};
+		const resetActionScope = () => {
+			actionScope.controller.abort();
+			actionScope = {
+				controller: new AbortController(),
+				owner: {}
+			};
+		};
+		(0, vue.watch)(() => [
+			props.registry,
+			props.sanitize,
+			props.plugins,
+			props.debug,
+			props.onDebugEvent
+		], () => {
+			resetActionScope();
+			current.value.destroy();
+			current.value = useAIRenderer({
+				registry: props.registry,
+				sanitize: props.sanitize,
+				plugins: props.plugins,
+				debug: props.debug,
+				onDebugEvent: props.onDebugEvent
+			});
+			nodeRenderers.value = (0, __ai_gui_core.collectNodeRenderers)(props.plugins, { debugTarget: current.value.renderer });
 		});
+		(0, vue.watch)(() => props.actionRuntime, resetActionScope);
+		(0, vue.onBeforeUnmount)(() => {
+			resetActionScope();
+			current.value.destroy();
+		});
+		const push = (chunk) => current.value.push(chunk);
+		const feed = (source, options) => current.value.feed(source, options);
+		const reset = () => {
+			resetActionScope();
+			current.value.reset();
+		};
 		expose({
+			debugSource: "renderer",
+			subscribeDebug: (listener) => current.value.renderer.subscribeDebug(listener),
 			push,
 			feed,
 			reset
 		});
 		return () => {
+			const onCardAction = (action) => {
+				if (props.actionRuntime) {
+					const request = {
+						type: action.type,
+						params: action.params,
+						cardType: action.cardType,
+						...action.cardId === void 0 ? {} : { cardId: action.cardId }
+					};
+					props.actionRuntime.dispatch(request, {
+						signal: actionScope.controller.signal,
+						owner: actionScope.owner
+					}).catch(() => {});
+				}
+				emit("card-action", action);
+			};
 			const ctx = {
 				registry: props.registry,
+				cardStore: props.cardStore,
 				plugins: props.plugins,
-				onCardAction: props.onCardAction
+				nodeRenderers: nodeRenderers.value,
+				onCardAction,
+				sanitize: props.sanitize,
+				sanitized: true
 			};
-			return (0, vue.h)("div", { "data-aigui-renderer": "" }, nodes.value.map((n) => renderNode(n, ctx)));
+			return (0, vue.h)("div", { "data-aigui-renderer": "" }, current.value.nodes.value.map((n) => renderNode(n, ctx)));
 		};
 	}
 });
@@ -207,4 +454,5 @@ const AIRenderer = (0, vue.defineComponent)({
 exports.AIRenderer = AIRenderer
 exports.renderNode = renderNode
 exports.renderOutput = renderOutput
-exports.useAIRenderer = useAIRenderer
+exports.useAIRenderer = useAIRenderer
+exports.useActionState = useActionState

package/dist/index.d.cts

@@ -1,15 +1,21 @@
 import { ShallowRef, VNode } from "vue";
-import { AIGuiPlugin, ASTNode, CardRegistry, RenderOutput, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardRegistry, CardStore, FeedOptions, FeedSource, NodeRenderer, RenderOutput, Renderer, RendererOptions } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.d.ts
 interface UseAIRendererResult {
+  renderer: Renderer;
   nodes: ShallowRef<ASTNode[]>;
   push: (chunk: string) => void;
-  feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
+  feed: (source: FeedSource, options?: FeedOptions) => Promise<void>;
   reset: () => void;
+  destroy: () => void;
 }
 declare function useAIRenderer(options?: Omit<RendererOptions, "onPatch">): UseAIRendererResult;
 
+//#endregion
+//#region src/use-action-state.d.ts
+declare function useActionState(runtime: ActionRuntime, key: string): ShallowRef<ActionState>;
+
 //#endregion
 //#region src/ai-renderer.d.ts
 declare const AIRenderer: any;
@@ -18,21 +24,26 @@ declare const AIRenderer: any;
 //#region src/render-node.d.ts
 interface RenderContext {
   registry?: CardRegistry;
+  cardStore?: CardStore;
   plugins?: AIGuiPlugin[];
+  nodeRenderers?: Record<string, NodeRenderer>;
   onCardAction?: (action: {
     type: string;
     params?: unknown;
     cardType: string;
+    cardId?: string;
   }) => void;
+  sanitize?: RendererOptions["sanitize"];
+  sanitized?: boolean;
 }
 declare function renderNode(node: ASTNode, ctx: RenderContext): VNode;
 
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-declare function renderOutput(out: RenderOutput): VNode;
+declare function renderOutput(out: RenderOutput, sanitize?: RendererOptions["sanitize"]): VNode;
 
 //#endregion
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */
 
-export { AIRenderer, RenderContext, UseAIRendererResult, renderNode, renderOutput, useAIRenderer };
+export { AIRenderer, RenderContext, UseAIRendererResult, renderNode, renderOutput, useAIRenderer, useActionState };

package/dist/index.d.ts

@@ -1,15 +1,21 @@
 import { ShallowRef, VNode } from "vue";
-import { AIGuiPlugin, ASTNode, CardRegistry, RenderOutput, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardRegistry, CardStore, FeedOptions, FeedSource, NodeRenderer, RenderOutput, Renderer, RendererOptions } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.d.ts
 interface UseAIRendererResult {
+  renderer: Renderer;
   nodes: ShallowRef<ASTNode[]>;
   push: (chunk: string) => void;
-  feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
+  feed: (source: FeedSource, options?: FeedOptions) => Promise<void>;
   reset: () => void;
+  destroy: () => void;
 }
 declare function useAIRenderer(options?: Omit<RendererOptions, "onPatch">): UseAIRendererResult;
 
+//#endregion
+//#region src/use-action-state.d.ts
+declare function useActionState(runtime: ActionRuntime, key: string): ShallowRef<ActionState>;
+
 //#endregion
 //#region src/ai-renderer.d.ts
 declare const AIRenderer: any;
@@ -18,21 +24,26 @@ declare const AIRenderer: any;
 //#region src/render-node.d.ts
 interface RenderContext {
   registry?: CardRegistry;
+  cardStore?: CardStore;
   plugins?: AIGuiPlugin[];
+  nodeRenderers?: Record<string, NodeRenderer>;
   onCardAction?: (action: {
     type: string;
     params?: unknown;
     cardType: string;
+    cardId?: string;
   }) => void;
+  sanitize?: RendererOptions["sanitize"];
+  sanitized?: boolean;
 }
 declare function renderNode(node: ASTNode, ctx: RenderContext): VNode;
 
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-declare function renderOutput(out: RenderOutput): VNode;
+declare function renderOutput(out: RenderOutput, sanitize?: RendererOptions["sanitize"]): VNode;
 
 //#endregion
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */
 
-export { AIRenderer, RenderContext, UseAIRendererResult, renderNode, renderOutput, useAIRenderer };
+export { AIRenderer, RenderContext, UseAIRendererResult, renderNode, renderOutput, useAIRenderer, useActionState };

package/dist/index.js

@@ -1,27 +1,49 @@
-import { defineComponent, h, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { defineComponent, h, markRaw, onBeforeUnmount, onMounted, onScopeDispose, ref, shallowRef, toRaw, watch } from "vue";
 import { Renderer, collectNodeRenderers, sanitizeHtml } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.ts
 function useAIRenderer(options = {}) {
 	const nodes = shallowRef([]);
+	let active = true;
 	const renderer = new Renderer({
 		...options,
 		plugins: options.plugins,
 		onPatch: (_patches, snapshot) => {
-			nodes.value = snapshot;
+			if (active) nodes.value = snapshot;
 		}
 	});
 	return {
+		renderer,
 		nodes,
-		push: (c) => renderer.push(c),
-		feed: (s) => renderer.feed(s),
+		push: (c) => {
+			if (active) renderer.push(c);
+		},
+		feed: (source, feedOptions) => active ? renderer.feed(source, feedOptions) : Promise.resolve(),
 		reset: () => {
+			if (active) {
+				renderer.reset();
+				nodes.value = [];
+			}
+		},
+		destroy: () => {
+			active = false;
 			renderer.reset();
 			nodes.value = [];
 		}
 	};
 }
 
+//#endregion
+//#region src/use-action-state.ts
+function useActionState(runtime, key) {
+	const state = shallowRef(runtime.getState(key));
+	const unsubscribe = runtime.subscribe((next) => {
+		if (next.key === key) state.value = next;
+	});
+	onScopeDispose(unsubscribe);
+	return state;
+}
+
 //#endregion
 //#region src/render-output.ts
 /** Host element for imperative `mount` outputs, wired to Vue's lifecycle. */
@@ -37,6 +59,10 @@ const MountHost = defineComponent({
 		onMounted(() => {
 			if (elRef.value) cleanup = props.mount(elRef.value);
 		});
+		watch(() => props.mount, (mount) => {
+			if (typeof cleanup === "function") cleanup();
+			cleanup = elRef.value ? mount(elRef.value) : void 0;
+		});
 		onBeforeUnmount(() => {
 			if (typeof cleanup === "function") cleanup();
 		});
@@ -47,10 +73,10 @@ const MountHost = defineComponent({
 	}
 });
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-function renderOutput(out) {
+function renderOutput(out, sanitize) {
 	switch (out.kind) {
-		case "html": return h("div", { innerHTML: sanitizeHtml(out.html) });
-		case "element": return h(out.tag, out.props, (out.children ?? []).map(renderOutput));
+		case "html": return h("div", { innerHTML: sanitizeOutput(out.html, sanitize) });
+		case "element": return h(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize)));
 		case "mount": return h(MountHost, { mount: out.mount });
 		case "card": return h("pre", { "data-aigui-card-fallback": "" }, [h("code", JSON.stringify(out.data, null, 2))]);
 	}
@@ -58,39 +84,84 @@ function renderOutput(out) {
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */
 const AsyncOutput = defineComponent({
 	name: "AsyncOutput",
-	props: { promise: {
-		type: Object,
-		required: true
-	} },
+	props: {
+		promise: {
+			type: Object,
+			required: true
+		},
+		sanitize: {
+			type: [Boolean, Object],
+			default: void 0
+		}
+	},
 	setup(props) {
 		const resolved = ref(null);
-		props.promise.then((v) => {
-			resolved.value = v;
+		const failed = ref(false);
+		let generation = 0;
+		let active = true;
+		const awaitPromise = (promise) => {
+			const current = ++generation;
+			resolved.value = null;
+			failed.value = false;
+			promise.then((value) => {
+				if (active && current === generation) resolved.value = value;
+			}, () => {
+				if (active && current === generation) failed.value = true;
+			});
+		};
+		watch(() => [toRaw(props.promise)], ([promise]) => awaitPromise(promise), { immediate: true });
+		onBeforeUnmount(() => {
+			active = false;
+			generation++;
 		});
-		return () => resolved.value ? renderOutput(resolved.value) : h("span", { "data-aigui-async-pending": "" });
+		return () => {
+			if (failed.value) return h("span", { "data-aigui-async-error": "" });
+			if (!resolved.value) return h("span", { "data-aigui-async-pending": "" });
+			try {
+				return renderOutput(resolved.value, props.sanitize);
+			} catch {
+				return h("span", { "data-aigui-async-error": "" });
+			}
+		};
 	}
 });
+function sanitizeOutput(html, sanitize) {
+	if (sanitize === false) return html;
+	return sanitizeHtml(html, typeof sanitize === "object" ? sanitize : void 0);
+}
 
 //#endregion
 //#region src/render-node.ts
 function renderNode(node, ctx) {
-	const r = collectNodeRenderers(ctx.plugins)[node.type];
+	const r = (ctx.nodeRenderers ?? collectNodeRenderers(ctx.plugins))[node.type];
 	if (r) {
-		const out = r(node);
-		if (out && typeof out.then === "function") return h(AsyncOutput, {
+		if (node.complete === false) return h("div", {
 			key: node.key,
-			promise: out
+			"data-aigui-block-loading": "",
+			"data-block-type": node.type
 		});
-		return renderOutput(out);
+		try {
+			const out = r(node);
+			if (out && typeof out.then === "function") return h(AsyncOutput, {
+				key: node.key,
+				promise: out,
+				sanitize: ctx.sanitize
+			});
+			const vnode = renderOutput(out, ctx.sanitize);
+			vnode.key = node.key;
+			return vnode;
+		} catch {
+			return renderFallback(node, ctx);
+		}
 	}
 	switch (node.type) {
 		case "heading": return h(node.tag ?? "h1", {
 			key: node.key,
-			innerHTML: node.html ?? ""
+			innerHTML: renderHtml(node.html ?? "", ctx)
 		});
 		case "paragraph": return h("p", {
 			key: node.key,
-			innerHTML: node.html ?? ""
+			innerHTML: renderHtml(node.html ?? "", ctx)
 		});
 		case "code": return h("pre", {
 			key: node.key,
@@ -99,13 +170,10 @@ function renderNode(node, ctx) {
 		case "hr": return h("hr", { key: node.key });
 		case "html": return h("div", {
 			key: node.key,
-			innerHTML: node.content ?? ""
+			innerHTML: renderHtml(node.content ?? "", ctx)
 		});
 		case "card": return renderCard(node, ctx);
-		default: return h("div", {
-			key: node.key,
-			innerHTML: node.html ?? sanitizeHtml(node.content ?? "")
-		});
+		default: return renderFallback(node, ctx);
 	}
 }
 function renderCard(node, ctx) {
@@ -121,11 +189,24 @@ function renderCard(node, ctx) {
 		"data-aigui-card-invalid": ""
 	}, [h("code", JSON.stringify(card.data, null, 2))]);
 	const Comp = ctx.registry?.getRender(card.type);
+	if (card.id && ctx.cardStore) return h(CardHost, {
+		key: node.key,
+		component: Comp ? markRaw(toRaw(Comp)) : void 0,
+		store: ctx.cardStore,
+		cardId: card.id,
+		cardType: card.type,
+		initialData: card.data,
+		onAction: (a) => ctx.onCardAction?.({
+			...a,
+			cardType: card.type,
+			cardId: card.id
+		})
+	});
 	if (!Comp) return h("pre", {
 		key: node.key,
 		"data-aigui-card-fallback": ""
 	}, [h("code", JSON.stringify(card.data, null, 2))]);
-	return h(Comp, {
+	return h(markRaw(toRaw(Comp)), {
 		key: node.key,
 		data: card.data,
 		onAction: (a) => ctx.onCardAction?.({
@@ -134,11 +215,101 @@ function renderCard(node, ctx) {
 		})
 	});
 }
+const CardHost = defineComponent({
+	name: "AIGuiCardHost",
+	props: {
+		component: {
+			type: [Object, Function],
+			default: void 0
+		},
+		store: {
+			type: Object,
+			required: true
+		},
+		cardId: {
+			type: String,
+			required: true
+		},
+		cardType: {
+			type: String,
+			required: true
+		},
+		initialData: {
+			type: null,
+			required: true
+		}
+	},
+	emits: ["action"],
+	setup(props, { emit }) {
+		const record = shallowRef();
+		const failed = shallowRef(false);
+		let unsubscribe;
+		let stopWatch;
+		const bind = ([store, cardId, cardType, initialData]) => {
+			unsubscribe?.();
+			unsubscribe = void 0;
+			failed.value = false;
+			record.value = void 0;
+			unsubscribe = store.subscribe(cardId, (next) => {
+				if (!next || next.type !== cardType) {
+					failed.value = true;
+					record.value = void 0;
+					return;
+				}
+				failed.value = false;
+				record.value = next;
+			});
+			try {
+				const current = store.register({
+					id: cardId,
+					type: cardType,
+					data: initialData
+				});
+				if (current.type !== cardType) throw new Error(`Card type mismatch for "${cardId}"`);
+				record.value = current;
+			} catch {
+				failed.value = true;
+				record.value = void 0;
+			}
+		};
+		onMounted(() => {
+			stopWatch = watch(() => [
+				props.store,
+				props.cardId,
+				props.cardType,
+				props.initialData
+			], bind, { immediate: true });
+		});
+		onBeforeUnmount(() => {
+			stopWatch?.();
+			unsubscribe?.();
+		});
+		return () => {
+			if (failed.value || !record.value || !props.component) return h("pre", { "data-aigui-card-fallback": "" }, [h("code", JSON.stringify(record.value?.data ?? props.initialData, null, 2))]);
+			return h(markRaw(toRaw(props.component)), {
+				data: record.value.data,
+				state: record.value.action,
+				onAction: (action) => emit("action", action)
+			});
+		};
+	}
+});
+function renderFallback(node, ctx) {
+	return h("div", {
+		key: node.key,
+		innerHTML: renderHtml(node.html ?? node.content ?? "", ctx)
+	});
+}
+function renderHtml(html, ctx) {
+	if (ctx.sanitized || ctx.sanitize === false) return html;
+	return sanitizeHtml(html, typeof ctx.sanitize === "object" ? ctx.sanitize : void 0);
+}
 
 //#endregion
 //#region src/ai-renderer.ts
 const AIRenderer = defineComponent({
 	name: "AIRenderer",
+	emits: ["card-action"],
 	props: {
 		registry: {
 			type: Object,
@@ -149,35 +320,111 @@ const AIRenderer = defineComponent({
 			default: void 0
 		},
 		sanitize: {
-			type: Boolean,
+			type: [Boolean, Object],
 			default: void 0
 		},
-		onCardAction: {
+		actionRuntime: {
+			type: Object,
+			default: void 0
+		},
+		cardStore: {
+			type: Object,
+			default: void 0
+		},
+		debug: {
+			type: Boolean,
+			default: false
+		},
+		onDebugEvent: {
 			type: Function,
 			default: void 0
 		}
 	},
-	setup(props, { expose }) {
-		const { nodes, push, feed, reset } = useAIRenderer({
+	setup(props, { emit, expose }) {
+		const current = shallowRef(useAIRenderer({
 			registry: props.registry,
 			sanitize: props.sanitize,
-			plugins: props.plugins
+			plugins: props.plugins,
+			debug: props.debug,
+			onDebugEvent: props.onDebugEvent
+		}));
+		const nodeRenderers = shallowRef(collectNodeRenderers(props.plugins, { debugTarget: current.value.renderer }));
+		let actionScope = {
+			controller: new AbortController(),
+			owner: {}
+		};
+		const resetActionScope = () => {
+			actionScope.controller.abort();
+			actionScope = {
+				controller: new AbortController(),
+				owner: {}
+			};
+		};
+		watch(() => [
+			props.registry,
+			props.sanitize,
+			props.plugins,
+			props.debug,
+			props.onDebugEvent
+		], () => {
+			resetActionScope();
+			current.value.destroy();
+			current.value = useAIRenderer({
+				registry: props.registry,
+				sanitize: props.sanitize,
+				plugins: props.plugins,
+				debug: props.debug,
+				onDebugEvent: props.onDebugEvent
+			});
+			nodeRenderers.value = collectNodeRenderers(props.plugins, { debugTarget: current.value.renderer });
 		});
+		watch(() => props.actionRuntime, resetActionScope);
+		onBeforeUnmount(() => {
+			resetActionScope();
+			current.value.destroy();
+		});
+		const push = (chunk) => current.value.push(chunk);
+		const feed = (source, options) => current.value.feed(source, options);
+		const reset = () => {
+			resetActionScope();
+			current.value.reset();
+		};
 		expose({
+			debugSource: "renderer",
+			subscribeDebug: (listener) => current.value.renderer.subscribeDebug(listener),
 			push,
 			feed,
 			reset
 		});
 		return () => {
+			const onCardAction = (action) => {
+				if (props.actionRuntime) {
+					const request = {
+						type: action.type,
+						params: action.params,
+						cardType: action.cardType,
+						...action.cardId === void 0 ? {} : { cardId: action.cardId }
+					};
+					props.actionRuntime.dispatch(request, {
+						signal: actionScope.controller.signal,
+						owner: actionScope.owner
+					}).catch(() => {});
+				}
+				emit("card-action", action);
+			};
 			const ctx = {
 				registry: props.registry,
+				cardStore: props.cardStore,
 				plugins: props.plugins,
-				onCardAction: props.onCardAction
+				nodeRenderers: nodeRenderers.value,
+				onCardAction,
+				sanitize: props.sanitize,
+				sanitized: true
 			};
-			return h("div", { "data-aigui-renderer": "" }, nodes.value.map((n) => renderNode(n, ctx)));
+			return h("div", { "data-aigui-renderer": "" }, current.value.nodes.value.map((n) => renderNode(n, ctx)));
 		};
 	}
 });
 
 //#endregion
-export { AIRenderer, renderNode, renderOutput, useAIRenderer };
+export { AIRenderer, renderNode, renderOutput, useAIRenderer, useActionState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/vue",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Vue 3 adapter for AIGUI — stream LLM output into live Vue components with cards and plugins.",
   "keywords": [
     "llm",
@@ -23,14 +23,23 @@
   "homepage": "https://github.com/liliang-cn/aigui#readme",
   "bugs": "https://github.com/liliang-cn/aigui/issues",
   "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     }
   },
   "files": [
@@ -42,7 +51,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ai-gui/core": "0.1.0"
+    "@ai-gui/core": "0.3.0"
   },
   "peerDependencies": {
     "vue": ">=3.3"
@@ -53,6 +62,7 @@
   },
   "scripts": {
     "build": "tsdown",
+    "test": "pnpm --dir ../.. exec vitest run --project vue",
     "typecheck": "tsc --noEmit"
   }
 }