@ai-gui/vue 0.2.0 → 0.4.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

@@ -37,6 +37,7 @@ function useAIRenderer(options = {}) {
 		}
 	});
 	return {
+		renderer,
 		nodes,
 		push: (c) => {
 			if (active) renderer.push(c);
@@ -56,24 +57,41 @@ function useAIRenderer(options = {}) {
 	};
 }
 
+//#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. */
 const MountHost = (0, vue.defineComponent)({
 	name: "MountHost",
-	props: { mount: {
-		type: Function,
-		required: true
-	} },
+	props: {
+		mount: {
+			type: Function,
+			required: true
+		},
+		context: {
+			type: Object,
+			required: true
+		}
+	},
 	setup(props) {
 		const elRef = (0, vue.ref)(null);
 		let cleanup;
 		(0, vue.onMounted)(() => {
-			if (elRef.value) cleanup = props.mount(elRef.value);
+			if (elRef.value) cleanup = props.mount(elRef.value, props.context);
 		});
 		(0, vue.watch)(() => props.mount, (mount) => {
 			if (typeof cleanup === "function") cleanup();
-			cleanup = elRef.value ? mount(elRef.value) : void 0;
+			cleanup = elRef.value ? mount(elRef.value, props.context) : void 0;
 		});
 		(0, vue.onBeforeUnmount)(() => {
 			if (typeof cleanup === "function") cleanup();
@@ -85,11 +103,14 @@ const MountHost = (0, vue.defineComponent)({
 	}
 });
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-function renderOutput(out, sanitize) {
+function renderOutput(out, sanitize, context = {}) {
 	switch (out.kind) {
 		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 "element": return (0, vue.h)(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize, context)));
+		case "mount": return (0, vue.h)(MountHost, {
+			mount: out.mount,
+			context
+		});
 		case "card": return (0, vue.h)("pre", { "data-aigui-card-fallback": "" }, [(0, vue.h)("code", JSON.stringify(out.data, null, 2))]);
 	}
 }
@@ -104,6 +125,10 @@ const AsyncOutput = (0, vue.defineComponent)({
 		sanitize: {
 			type: [Boolean, Object],
 			default: void 0
+		},
+		context: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	setup(props) {
@@ -130,13 +155,42 @@ const AsyncOutput = (0, vue.defineComponent)({
 			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);
+				return renderOutput(resolved.value, props.sanitize, props.context);
 			} catch {
 				return (0, vue.h)("span", { "data-aigui-async-error": "" });
 			}
 		};
 	}
 });
+function createRenderMountContext(registry, onCardAction) {
+	return { mountCard(host, request) {
+		const component = registry?.getRender(request.type);
+		if (!component) return void 0;
+		const card = (0, vue.markRaw)((0, vue.toRaw)(component));
+		let data = request.data;
+		let destroyed = false;
+		const renderCard$1 = () => (0, vue.render)((0, vue.h)(card, {
+			data,
+			onAction: (action) => onCardAction?.({
+				...action,
+				cardType: request.type
+			})
+		}), host);
+		renderCard$1();
+		return {
+			update(nextData) {
+				if (destroyed) return;
+				data = nextData;
+				renderCard$1();
+			},
+			destroy() {
+				if (destroyed) return;
+				destroyed = true;
+				(0, vue.render)(null, host);
+			}
+		};
+	} };
+}
 function sanitizeOutput(html, sanitize) {
 	if (sanitize === false) return html;
 	return (0, __ai_gui_core.sanitizeHtml)(html, typeof sanitize === "object" ? sanitize : void 0);
@@ -146,18 +200,27 @@ function sanitizeOutput(html, sanitize) {
 //#region src/render-node.ts
 function renderNode(node, ctx) {
 	const r = (ctx.nodeRenderers ?? (0, __ai_gui_core.collectNodeRenderers)(ctx.plugins))[node.type];
-	if (r) try {
-		const out = r(node);
-		if (out && typeof out.then === "function") return (0, vue.h)(AsyncOutput, {
+	if (r) {
+		if (node.complete === false) return (0, vue.h)("div", {
 			key: node.key,
-			promise: out,
-			sanitize: ctx.sanitize
+			"data-aigui-block-loading": "",
+			"data-block-type": node.type
 		});
-		const vnode = renderOutput(out, ctx.sanitize);
-		vnode.key = node.key;
-		return vnode;
-	} catch {
-		return renderFallback(node, ctx);
+		try {
+			const out = r(node);
+			const mountContext = createRenderMountContext(ctx.registry, ctx.onCardAction);
+			if (out && typeof out.then === "function") return (0, vue.h)(AsyncOutput, {
+				key: node.key,
+				promise: out,
+				sanitize: ctx.sanitize,
+				context: mountContext
+			});
+			const vnode = renderOutput(out, ctx.sanitize, mountContext);
+			vnode.key = node.key;
+			return vnode;
+		} catch {
+			return renderFallback(node, ctx);
+		}
 	}
 	switch (node.type) {
 		case "heading": return (0, vue.h)(node.tag ?? "h1", {
@@ -194,6 +257,19 @@ 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": ""
@@ -207,6 +283,85 @@ 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,
@@ -236,7 +391,19 @@ const AIRenderer = (0, vue.defineComponent)({
 			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
 		}
@@ -245,38 +412,77 @@ const AIRenderer = (0, vue.defineComponent)({
 		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));
+		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.plugins,
+			props.debug,
+			props.onDebugEvent
 		], () => {
+			resetActionScope();
 			current.value.destroy();
 			current.value = useAIRenderer({
 				registry: props.registry,
 				sanitize: props.sanitize,
-				plugins: props.plugins
+				plugins: props.plugins,
+				debug: props.debug,
+				onDebugEvent: props.onDebugEvent
 			});
-			nodeRenderers.value = (0, __ai_gui_core.collectNodeRenderers)(props.plugins);
+			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();
 		});
-		(0, vue.onBeforeUnmount)(() => current.value.destroy());
 		const push = (chunk) => current.value.push(chunk);
 		const feed = (source, options) => current.value.feed(source, options);
-		const reset = () => current.value.reset();
+		const reset = () => {
+			resetActionScope();
+			current.value.reset();
+		};
 		expose({
+			debugSource: "renderer",
+			subscribeDebug: (listener) => current.value.renderer.subscribeDebug(listener),
 			push,
 			feed,
 			reset
 		});
 		return () => {
 			const onCardAction = (action) => {
-				props.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,
 				nodeRenderers: nodeRenderers.value,
 				onCardAction,
@@ -292,4 +498,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,8 +1,9 @@
 import { ShallowRef, VNode } from "vue";
-import { AIGuiPlugin, ASTNode, CardRegistry, FeedOptions, FeedSource, NodeRenderer, RenderOutput, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardRegistry, CardStore, FeedOptions, FeedSource, NodeRenderer, RenderMountContext, 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: FeedSource, options?: FeedOptions) => Promise<void>;
@@ -11,6 +12,10 @@ interface UseAIRendererResult {
 }
 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;
@@ -19,12 +24,14 @@ 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;
@@ -34,9 +41,9 @@ 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, sanitize?: RendererOptions["sanitize"]): VNode;
+declare function renderOutput(out: RenderOutput, sanitize?: RendererOptions["sanitize"], context?: RenderMountContext): 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,8 +1,9 @@
 import { ShallowRef, VNode } from "vue";
-import { AIGuiPlugin, ASTNode, CardRegistry, FeedOptions, FeedSource, NodeRenderer, RenderOutput, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardRegistry, CardStore, FeedOptions, FeedSource, NodeRenderer, RenderMountContext, 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: FeedSource, options?: FeedOptions) => Promise<void>;
@@ -11,6 +12,10 @@ interface UseAIRendererResult {
 }
 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;
@@ -19,12 +24,14 @@ 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;
@@ -34,9 +41,9 @@ 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, sanitize?: RendererOptions["sanitize"]): VNode;
+declare function renderOutput(out: RenderOutput, sanitize?: RendererOptions["sanitize"], context?: RenderMountContext): 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,4 +1,4 @@
-import { defineComponent, h, markRaw, onBeforeUnmount, onMounted, ref, shallowRef, toRaw, watch } from "vue";
+import { defineComponent, h, markRaw, onBeforeUnmount, onMounted, onScopeDispose, ref, render, shallowRef, toRaw, watch } from "vue";
 import { Renderer, collectNodeRenderers, sanitizeHtml } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.ts
@@ -13,6 +13,7 @@ function useAIRenderer(options = {}) {
 		}
 	});
 	return {
+		renderer,
 		nodes,
 		push: (c) => {
 			if (active) renderer.push(c);
@@ -32,24 +33,41 @@ function useAIRenderer(options = {}) {
 	};
 }
 
+//#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. */
 const MountHost = defineComponent({
 	name: "MountHost",
-	props: { mount: {
-		type: Function,
-		required: true
-	} },
+	props: {
+		mount: {
+			type: Function,
+			required: true
+		},
+		context: {
+			type: Object,
+			required: true
+		}
+	},
 	setup(props) {
 		const elRef = ref(null);
 		let cleanup;
 		onMounted(() => {
-			if (elRef.value) cleanup = props.mount(elRef.value);
+			if (elRef.value) cleanup = props.mount(elRef.value, props.context);
 		});
 		watch(() => props.mount, (mount) => {
 			if (typeof cleanup === "function") cleanup();
-			cleanup = elRef.value ? mount(elRef.value) : void 0;
+			cleanup = elRef.value ? mount(elRef.value, props.context) : void 0;
 		});
 		onBeforeUnmount(() => {
 			if (typeof cleanup === "function") cleanup();
@@ -61,11 +79,14 @@ const MountHost = defineComponent({
 	}
 });
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-function renderOutput(out, sanitize) {
+function renderOutput(out, sanitize, context = {}) {
 	switch (out.kind) {
 		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 "element": return h(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize, context)));
+		case "mount": return h(MountHost, {
+			mount: out.mount,
+			context
+		});
 		case "card": return h("pre", { "data-aigui-card-fallback": "" }, [h("code", JSON.stringify(out.data, null, 2))]);
 	}
 }
@@ -80,6 +101,10 @@ const AsyncOutput = defineComponent({
 		sanitize: {
 			type: [Boolean, Object],
 			default: void 0
+		},
+		context: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	setup(props) {
@@ -106,13 +131,42 @@ const AsyncOutput = defineComponent({
 			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);
+				return renderOutput(resolved.value, props.sanitize, props.context);
 			} catch {
 				return h("span", { "data-aigui-async-error": "" });
 			}
 		};
 	}
 });
+function createRenderMountContext(registry, onCardAction) {
+	return { mountCard(host, request) {
+		const component = registry?.getRender(request.type);
+		if (!component) return void 0;
+		const card = markRaw(toRaw(component));
+		let data = request.data;
+		let destroyed = false;
+		const renderCard$1 = () => render(h(card, {
+			data,
+			onAction: (action) => onCardAction?.({
+				...action,
+				cardType: request.type
+			})
+		}), host);
+		renderCard$1();
+		return {
+			update(nextData) {
+				if (destroyed) return;
+				data = nextData;
+				renderCard$1();
+			},
+			destroy() {
+				if (destroyed) return;
+				destroyed = true;
+				render(null, host);
+			}
+		};
+	} };
+}
 function sanitizeOutput(html, sanitize) {
 	if (sanitize === false) return html;
 	return sanitizeHtml(html, typeof sanitize === "object" ? sanitize : void 0);
@@ -122,18 +176,27 @@ function sanitizeOutput(html, sanitize) {
 //#region src/render-node.ts
 function renderNode(node, ctx) {
 	const r = (ctx.nodeRenderers ?? collectNodeRenderers(ctx.plugins))[node.type];
-	if (r) try {
-		const out = r(node);
-		if (out && typeof out.then === "function") return h(AsyncOutput, {
+	if (r) {
+		if (node.complete === false) return h("div", {
 			key: node.key,
-			promise: out,
-			sanitize: ctx.sanitize
+			"data-aigui-block-loading": "",
+			"data-block-type": node.type
 		});
-		const vnode = renderOutput(out, ctx.sanitize);
-		vnode.key = node.key;
-		return vnode;
-	} catch {
-		return renderFallback(node, ctx);
+		try {
+			const out = r(node);
+			const mountContext = createRenderMountContext(ctx.registry, ctx.onCardAction);
+			if (out && typeof out.then === "function") return h(AsyncOutput, {
+				key: node.key,
+				promise: out,
+				sanitize: ctx.sanitize,
+				context: mountContext
+			});
+			const vnode = renderOutput(out, ctx.sanitize, mountContext);
+			vnode.key = node.key;
+			return vnode;
+		} catch {
+			return renderFallback(node, ctx);
+		}
 	}
 	switch (node.type) {
 		case "heading": return h(node.tag ?? "h1", {
@@ -170,6 +233,19 @@ 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": ""
@@ -183,6 +259,85 @@ 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,
@@ -212,7 +367,19 @@ const AIRenderer = defineComponent({
 			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
 		}
@@ -221,38 +388,77 @@ const AIRenderer = defineComponent({
 		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));
+		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.plugins,
+			props.debug,
+			props.onDebugEvent
 		], () => {
+			resetActionScope();
 			current.value.destroy();
 			current.value = useAIRenderer({
 				registry: props.registry,
 				sanitize: props.sanitize,
-				plugins: props.plugins
+				plugins: props.plugins,
+				debug: props.debug,
+				onDebugEvent: props.onDebugEvent
 			});
-			nodeRenderers.value = collectNodeRenderers(props.plugins);
+			nodeRenderers.value = collectNodeRenderers(props.plugins, { debugTarget: current.value.renderer });
+		});
+		watch(() => props.actionRuntime, resetActionScope);
+		onBeforeUnmount(() => {
+			resetActionScope();
+			current.value.destroy();
 		});
-		onBeforeUnmount(() => current.value.destroy());
 		const push = (chunk) => current.value.push(chunk);
 		const feed = (source, options) => current.value.feed(source, options);
-		const reset = () => current.value.reset();
+		const reset = () => {
+			resetActionScope();
+			current.value.reset();
+		};
 		expose({
+			debugSource: "renderer",
+			subscribeDebug: (listener) => current.value.renderer.subscribeDebug(listener),
 			push,
 			feed,
 			reset
 		});
 		return () => {
 			const onCardAction = (action) => {
-				props.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,
 				nodeRenderers: nodeRenderers.value,
 				onCardAction,
@@ -265,4 +471,4 @@ const AIRenderer = defineComponent({
 });
 
 //#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.2.0",
+  "version": "0.4.0",
   "description": "Vue 3 adapter for AIGUI — stream LLM output into live Vue components with cards and plugins.",
   "keywords": [
     "llm",
@@ -51,7 +51,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ai-gui/core": "0.2.0"
+    "@ai-gui/core": "0.4.0"
   },
   "peerDependencies": {
     "vue": ">=3.3"