@noodleseed/agent-kit 0.44.0 → 0.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noodleseed/agent-kit",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "private": false,
   "description": "Self-checking, self-updating agent skills for the Noodle Seed CLI. Authored in this repo by @noodle-borg/agent-kit; this is the published, independently-versioned canonical skills artifact the CLI fetches and verifies.",
   "license": "Apache-2.0",

package/skills/claude-code/SKILL.md

@@ -3,7 +3,7 @@ name: noodle-seed
 description: "Use when building, validating, testing, deploying, or operating a local or hosted Noodle Seed MCP server or app authored in TypeScript with the noodle CLI."
 ---
 
-<!-- noodle-skill version:0.44.0 hash:cd6ca0d915e6acb9 -->
+<!-- noodle-skill version:0.45.0 hash:cd6ca0d915e6acb9 -->
 
 # Noodle Seed
 

package/skills/claude-code/authoring-mcp-servers/SKILL.md

@@ -3,7 +3,7 @@ name: authoring-mcp-servers
 description: "Use when creating or extending a headless Noodle Seed MCP server, tool, resource, prompt, or typed model-facing capability."
 ---
 
-<!-- noodle-skill version:0.44.0 hash:0b2fd8c7e43fc69f -->
+<!-- noodle-skill version:0.45.0 hash:0b2fd8c7e43fc69f -->
 
 # authoring-mcp-servers
 

package/skills/claude-code/building-mcp-apps/SKILL.md

@@ -3,7 +3,7 @@ name: building-mcp-apps
 description: "Use when a Noodle Seed MCP App, widget, interactive card, visual interaction, or host-visible UI is the primary requested outcome."
 ---
 
-<!-- noodle-skill version:0.44.0 hash:f7fa54992c8d7692 -->
+<!-- noodle-skill version:0.45.0 hash:f7fa54992c8d7692 -->
 
 # building-mcp-apps
 

package/skills/claude-code/connecting-apis-to-mcp/SKILL.md

@@ -3,7 +3,7 @@ name: connecting-apis-to-mcp
 description: "Use when credentials, an API URL, an OpenAPI document, or an observed response must become real Noodle Seed MCP behavior."
 ---
 
-<!-- noodle-skill version:0.44.0 hash:1e86b8704f407bd3 -->
+<!-- noodle-skill version:0.45.0 hash:1e86b8704f407bd3 -->
 
 # connecting-apis-to-mcp
 

package/skills/claude-code/debugging-mcp-delivery/SKILL.md

@@ -3,7 +3,7 @@ name: debugging-mcp-delivery
 description: "Use when an existing Noodle Seed MCP project has a concrete validation, runtime, connector, App, host, deployment, or production failure."
 ---
 
-<!-- noodle-skill version:0.44.0 hash:aa715bae12041d7c -->
+<!-- noodle-skill version:0.45.0 hash:aa715bae12041d7c -->
 
 # debugging-mcp-delivery
 

package/skills/claude-code/deploying-mcp-services/SKILL.md

@@ -3,7 +3,7 @@ name: deploying-mcp-services
 description: "Use when the user explicitly requests a Noodle Seed hosted link, configuration write, deployment, access change, rollback, or connection write."
 ---
 
-<!-- noodle-skill version:0.44.0 hash:93e735b7ffb45df1 -->
+<!-- noodle-skill version:0.45.0 hash:93e735b7ffb45df1 -->
 
 # deploying-mcp-services
 

package/skills/claude-code/designing-mcp-products/SKILL.md

@@ -3,7 +3,7 @@ name: designing-mcp-products
 description: "Use when a Noodle Seed MCP product idea needs conversational fit, user benefit, scope, interaction, or evidence design before implementation."
 ---
 
-<!-- noodle-skill version:0.44.0 hash:76cce86729cffbee -->
+<!-- noodle-skill version:0.45.0 hash:76cce86729cffbee -->
 
 # designing-mcp-products
 

package/skills/claude-code/embedding-mcp-assistants/SKILL.md

@@ -3,7 +3,7 @@ name: embedding-mcp-assistants
 description: "Use when embedding a Noodle assistant into an existing SaaS or web application with browser, identity, session, and credential boundaries."
 ---
 
-<!-- noodle-skill version:0.44.0 hash:5d8f40f904d6ab4b -->
+<!-- noodle-skill version:0.45.0 hash:5d8f40f904d6ab4b -->
 
 # embedding-mcp-assistants
 

package/skills/claude-code/examples/customer-auth/README.md

@@ -205,6 +205,7 @@ and returns the AI SDK transcript plus the canonical client commands:
 'use client';
 
 import { useState } from 'react';
+import { NoodleAppView } from '@noodleseed/assistant/react';
 import { useNoodleAssistant } from '@noodleseed/assistant/react/client';
 
 export function CustomerAssistant({ principalKey }: { principalKey: string }) {
@@ -274,9 +275,11 @@ export function CustomerAssistant({ principalKey }: { principalKey: string }) {
             }
             if (part.type === 'data-view') {
               return (
-                <p key={part.data.id}>
-                  Trusted app view available: {part.data.title ?? part.data.resourceUri}
-                </p>
+                <NoodleAppView
+                  key={`${part.data.id}:${part.data.resourceUri}`}
+                  client={client}
+                  view={part.data}
+                />
               );
             }
             return <p key={index}>Unsupported assistant content.</p>;
@@ -315,8 +318,12 @@ export function CustomerAssistant({ principalKey }: { principalKey: string }) {
 then aborts and clears the prior session and transcript. The sample fails closed on input requests until its
 fallback is replaced with a form generated from `requestedSchema`. A production renderer must show the
 complete confirmation review and both decisions. For `data-view`, map `resourceUri` or `tool` and the
-bounded/redacted result to a component already trusted by this application. Never inject `part.data.html`,
-assign it to `srcdoc`, or fetch a `ui://` URI.
+bounded/redacted result to a component already trusted by this application only when intentionally replacing
+the linked App with a native UI. Otherwise use `NoodleAppView`; JSON result data is not the App UI. Its
+semantic lifecycle identity is the client plus `view.id` plus `view.resourceUri`, so parent payload/callback
+rerenders keep the iframe and only a different view or unmount tears down the bridge.
+Never inject `part.data.html`, assign it to `srcdoc`, fetch a `ui://` URI, or reproduce the bridge directly. Pages with a
+Content-Security-Policy must include the Noodle service origin in both `connect-src` and `frame-src`.
 
 Outside React, subscribe to the DOM-free client directly. It exposes the same conversation as headless AI
 SDK `UIMessage` state, including typed confirmation, input, tool-result, and linked-view parts:

package/skills/claude-code/examples/food-ordering/README.md

@@ -24,6 +24,7 @@ private customer data.
 | Model-visible widget state | `useUpdateModelContext` publishes one cohesive replacement snapshot when supported; `useWidgetLifecycle` auto-publishes mounted/cancelled/dismissed and reports author-owned submitted milestones for future context (not host-presentation proof), while the user-triggered submit pairs `useSendFollowUpMessage` for an immediate reply |
 | Handoff | `handoff.allowedDomains` allows only `https://orders.example.com` checkout URLs |
 | Progressive enhancement | Non-Apps hosts still receive stores, featured items, and a readable fallback summary |
+| Fail-closed hydration | The React view treats only the unhydrated, pre-result `{}` envelope as pending; a hydrated empty success remains distinct. It surfaces `isError`, validates required records and identifiers, and withholds ordering actions from malformed results |
 
 The example is intentionally richer than the generated starter, but each inline view still follows the
 same default: one immediate purpose, one primary action, at most one subordinate action, and progressive

package/skills/claude-code/examples/food-ordering/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "test": "vitest run test/server.test.ts",
+    "test": "vitest run test",
     "validate": "noodle validate",
     "dev": "noodle dev",
     "deploy": "noodle deploy"

package/skills/claude-code/examples/food-ordering/src/helpers.ts

@@ -8,6 +8,7 @@ export {
   createViewStore,
   DataCard,
   DataList,
+  Feedback,
   Field,
   HandoffButton,
   QuantityStepper,

package/skills/claude-code/examples/food-ordering/src/views/ordering-flow.tsx

@@ -7,6 +7,7 @@ import {
   createViewStore,
   DataCard,
   DataList,
+  Feedback,
   Field,
   HandoffButton,
   QuantityStepper,
@@ -25,30 +26,11 @@ import {
   View,
   ViewStack,
 } from '../helpers.js';
+import { isOrderingEntryResult, type MenuItem, type Store } from './ordering-result.js';
 import './widget-style.css';
 
 type ViewName = 'stores' | 'menu' | 'item' | 'cart' | 'review' | 'handoff';
 
-type Store = {
-  readonly id: string;
-  readonly name: string;
-  readonly cuisine: string;
-  readonly address: string;
-  readonly open: boolean;
-  readonly etaMinutes: number;
-  readonly rating: number;
-};
-
-type MenuItem = {
-  readonly id: string;
-  readonly storeId: string;
-  readonly category: string;
-  readonly name: string;
-  readonly price: number;
-  readonly description: string;
-  readonly modifiers: readonly string[];
-};
-
 type CartLine = {
   readonly itemId: string;
   readonly quantity: number;
@@ -93,12 +75,11 @@ function modifierLabel(value: string): string {
 
 export default function OrderingFlow() {
   const { displayMode, supports, theme } = useLayout();
-  const entry = structured<{
-    readonly customer?: string;
-    readonly stores?: readonly Store[];
-    readonly featuredItems?: readonly MenuItem[];
-    readonly status?: string;
-  }>(useToolInfo('open_ordering'));
+  const toolInfo = useToolInfo('open_ordering');
+  const isPending = Object.keys(toolInfo).length === 0;
+  const entry = isOrderingEntryResult(toolInfo.structuredContent)
+    ? toolInfo.structuredContent
+    : undefined;
   const flow = useAppFlow<ViewName>({
     key: 'ordering_flow',
     initialView: 'stores',
@@ -178,7 +159,7 @@ export default function OrderingFlow() {
   const canUpdateModelContext = supports?.modelContext === true;
 
   useEffect(() => {
-    if (!canUpdateModelContext) return;
+    if (!entry || !canUpdateModelContext) return;
     // Each call replaces model context, so publish one cohesive snapshot of current surface state.
     void updateModelContext({
       content: [{ type: 'text', text: `Food ordering: ${llmSummary}; ${lifecycle}.` }],
@@ -199,6 +180,7 @@ export default function OrderingFlow() {
     cart.lines.length,
     cart.subtotal,
     customer,
+    entry,
     lifecycle,
     llmSummary,
     selectedItemId,
@@ -304,6 +286,28 @@ export default function OrderingFlow() {
     }
   }
 
+  if (isPending) {
+    return (
+      <Feedback status="loading" title="Loading">
+        Loading food ordering…
+      </Feedback>
+    );
+  }
+  if (toolInfo.isError) {
+    return (
+      <Feedback status="error" title="Ordering unavailable">
+        Could not load food ordering.
+      </Feedback>
+    );
+  }
+  if (!entry) {
+    return (
+      <Feedback status="error" title="Invalid ordering result">
+        Food ordering result was incomplete.
+      </Feedback>
+    );
+  }
+
   return (
     <AppShell
       className={`nw-shell${theme === 'dark' ? ' dark' : ''}`}

package/skills/claude-code/examples/food-ordering/src/views/ordering-result.ts

@@ -0,0 +1,84 @@
+export type Store = {
+  readonly id: string;
+  readonly name: string;
+  readonly cuisine: string;
+  readonly address: string;
+  readonly open: boolean;
+  readonly etaMinutes: number;
+  readonly rating: number;
+};
+
+export type MenuItem = {
+  readonly id: string;
+  readonly storeId: string;
+  readonly category: string;
+  readonly name: string;
+  readonly price: number;
+  readonly description: string;
+  readonly modifiers: readonly string[];
+};
+
+export type OrderingEntryResult = {
+  readonly customer: string;
+  readonly stores: readonly Store[];
+  readonly featuredItems: readonly MenuItem[];
+  readonly status: string;
+};
+
+function nonEmptyString(value: unknown): value is string {
+  return typeof value === 'string' && value.trim().length > 0;
+}
+
+function isStore(value: unknown): value is Store {
+  if (value === null || typeof value !== 'object') return false;
+  const store = value as Partial<Store>;
+  return (
+    nonEmptyString(store.id) &&
+    nonEmptyString(store.name) &&
+    nonEmptyString(store.cuisine) &&
+    nonEmptyString(store.address) &&
+    typeof store.open === 'boolean' &&
+    typeof store.etaMinutes === 'number' &&
+    Number.isFinite(store.etaMinutes) &&
+    typeof store.rating === 'number' &&
+    Number.isFinite(store.rating)
+  );
+}
+
+function isMenuItem(value: unknown): value is MenuItem {
+  if (value === null || typeof value !== 'object') return false;
+  const item = value as Partial<MenuItem>;
+  return (
+    nonEmptyString(item.id) &&
+    nonEmptyString(item.storeId) &&
+    nonEmptyString(item.category) &&
+    nonEmptyString(item.name) &&
+    typeof item.price === 'number' &&
+    Number.isFinite(item.price) &&
+    nonEmptyString(item.description) &&
+    Array.isArray(item.modifiers) &&
+    item.modifiers.every(nonEmptyString)
+  );
+}
+
+export function isOrderingEntryResult(value: unknown): value is OrderingEntryResult {
+  if (value === null || typeof value !== 'object') return false;
+  const entry = value as Partial<OrderingEntryResult>;
+  if (
+    !nonEmptyString(entry.customer) ||
+    !nonEmptyString(entry.status) ||
+    !Array.isArray(entry.stores) ||
+    !entry.stores.every(isStore) ||
+    !Array.isArray(entry.featuredItems) ||
+    !entry.featuredItems.every(isMenuItem)
+  ) {
+    return false;
+  }
+  const storeIds = new Set(entry.stores.map((store) => store.id));
+  const itemIds = new Set(entry.featuredItems.map((item) => item.id));
+  return (
+    storeIds.size === entry.stores.length &&
+    itemIds.size === entry.featuredItems.length &&
+    entry.featuredItems.every((item) => storeIds.has(item.storeId))
+  );
+}

package/skills/claude-code/examples/food-ordering/test/ordering-flow.test.ts

@@ -0,0 +1,187 @@
+// @vitest-environment happy-dom
+/// <reference lib="dom" />
+import { act, createElement as h } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import OrderingFlow from '../src/views/ordering-flow.js';
+
+vi.mock('../src/helpers.js', async () => {
+  const { createElement } = await import('react');
+  const container = ({ children }: { readonly children?: unknown }) =>
+    createElement('div', null, children);
+  const button = ({ children }: { readonly children?: unknown }) =>
+    createElement('button', { type: 'button' }, children);
+  return {
+    ActionBar: container,
+    AppShell: ({
+      children,
+      footer,
+      subtitle,
+      title,
+    }: {
+      readonly children?: unknown;
+      readonly footer?: unknown;
+      readonly subtitle?: string;
+      readonly title?: string;
+    }) => createElement('main', null, title, subtitle, children, footer),
+    AsyncBoundary: container,
+    ChoiceGroup: container,
+    createViewStore:
+      <T>(_key: string, initial: T) =>
+      (selector?: (state: T) => unknown) => ({
+        state: initial,
+        selected: selector?.(initial),
+        setState: () => undefined,
+      }),
+    DataCard: button,
+    DataList: container,
+    Feedback: ({ children, status }: { readonly children?: unknown; readonly status?: string }) =>
+      createElement('div', { 'data-status': status }, children),
+    Field: container,
+    HandoffButton: button,
+    QuantityStepper: container,
+    ShellNav: container,
+    StatusBadge: container,
+    SubmitButton: button,
+    useAppFlow: () => ({
+      activeView: 'stores',
+      navigate: () => undefined,
+      back: () => undefined,
+      canBack: false,
+      params: {},
+    }),
+    useCallTool: () => ({
+      status: 'idle',
+      isIdle: true,
+      isPending: false,
+      isSuccess: false,
+      isError: false,
+      callTool: () => Promise.resolve({ structuredContent: {} }),
+      callToolAsync: () => Promise.resolve({ structuredContent: {} }),
+      reset: () => undefined,
+    }),
+    useHandoff: () => ({ status: 'idle', open: () => Promise.resolve() }),
+    useLayout: () => ({
+      theme: 'light',
+      displayMode: 'inline',
+      supports: { modelContext: false, followUpMessage: false },
+    }),
+    useSendFollowUpMessage: () => () => Promise.resolve(),
+    useToolInfo: () => toolResult,
+    useUpdateModelContext: () => () => Promise.resolve(),
+    useViewState: <T>(_key: string, initial: T) => [initial, () => undefined] as const,
+    useWidgetLifecycle: () => () => Promise.resolve(),
+    View: container,
+    ViewStack: container,
+  };
+});
+
+type ToolResult = {
+  readonly content?: unknown;
+  readonly structuredContent?: unknown;
+  readonly _meta?: unknown;
+  readonly isError?: boolean;
+};
+
+let toolResult: ToolResult;
+let root: Root | undefined;
+
+beforeEach(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  toolResult = {};
+  document.body.innerHTML = '<div id="root"></div>';
+  (globalThis as { __noodleReactVersion?: number }).__noodleReactVersion = 0;
+  (globalThis as { __noodleReactBridge?: unknown }).__noodleReactBridge = {
+    getToolResult: () => toolResult,
+    getViewState: () => ({}),
+    setWidgetState: () => undefined,
+    getLayout: () => ({
+      theme: 'light',
+      displayMode: 'inline',
+      supports: { modelContext: false, followUpMessage: false },
+    }),
+    callServerTool: () => Promise.resolve({ structuredContent: {} }),
+    openExternal: () => Promise.resolve(),
+    sendFollowUpMessage: () => Promise.resolve(),
+    updateModelContext: () => Promise.resolve(),
+  };
+});
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = undefined;
+  delete (globalThis as { __noodleReactBridge?: unknown }).__noodleReactBridge;
+});
+
+function render(result: ToolResult): string {
+  toolResult = result;
+  root = createRoot(document.querySelector('#root') as HTMLElement);
+  act(() => root?.render(h(OrderingFlow)));
+  return document.body.textContent ?? '';
+}
+
+describe('food-ordering invoking result states', () => {
+  it('renders pending without identifier-dependent actions before hydration', () => {
+    const text = render({});
+    expect(text).toContain('Loading food ordering');
+    expect(text).not.toContain('Search stores');
+    expect(document.querySelector('button')).toBeNull();
+  });
+
+  it('renders an explicit tool error without ordering actions', () => {
+    const text = render({
+      content: [{ type: 'text', text: 'Ordering is unavailable' }],
+      isError: true,
+    });
+    expect(text).toContain('Could not load food ordering');
+    expect(text).not.toContain('Search stores');
+    expect(document.querySelector('button')).toBeNull();
+  });
+
+  it('rejects malformed success data before rendering identifier-dependent actions', () => {
+    const text = render({
+      structuredContent: {
+        status: 'Ready',
+        customer: 'Asha',
+        stores: [{ name: 'Missing identifier' }],
+        featuredItems: [],
+      },
+    });
+    expect(text).toContain('Food ordering result was incomplete');
+    expect(text).not.toContain('Search stores');
+    expect(document.querySelector('button')).toBeNull();
+  });
+
+  it('preserves the ordering flow after valid hydration', () => {
+    const text = render({
+      structuredContent: {
+        status: 'Ready to build a food order.',
+        customer: 'Asha',
+        stores: [
+          {
+            id: 'harbor-noodles',
+            name: 'Harbor Noodles',
+            cuisine: 'Noodles',
+            address: '18 Pier Lane',
+            open: true,
+            etaMinutes: 24,
+            rating: 4.8,
+          },
+        ],
+        featuredItems: [
+          {
+            id: 'spicy_miso',
+            storeId: 'harbor-noodles',
+            category: 'Bowls',
+            name: 'Spicy Miso Bowl',
+            price: 16,
+            description: 'Miso broth and noodles.',
+            modifiers: ['extra_noodles'],
+          },
+        ],
+      },
+    });
+    expect(text).toContain('Search stores');
+    expect(text).toContain('Harbor Noodles');
+  });
+});

package/skills/claude-code/executing-noodle-plans/SKILL.md

@@ -3,7 +3,7 @@ name: executing-noodle-plans
 description: "Use when the user asks to execute an approved, decision-complete implementation plan for a Noodle Seed project task by task with test-first changes, review, recovery, and final verification."
 ---
 
-<!-- noodle-skill version:0.44.0 hash:6a9f132ddb79352e -->
+<!-- noodle-skill version:0.45.0 hash:6a9f132ddb79352e -->
 
 # Execute a Noodle Seed implementation plan
 

package/skills/claude-code/publishing-mcp-integrations/SKILL.md

@@ -3,7 +3,7 @@ name: publishing-mcp-integrations
 description: "Use when preparing, reviewing, or submitting a Noodle Seed MCP integration to a host or app directory."
 ---
 
-<!-- noodle-skill version:0.44.0 hash:efffbf82007f935d -->
+<!-- noodle-skill version:0.45.0 hash:efffbf82007f935d -->
 
 # publishing-mcp-integrations
 

package/skills/claude-code/references/embedded-assistant.md

@@ -254,6 +254,7 @@ For a customer-owned React renderer, use the renderer-free hook. It owns client
 "use client";
 
 import { useState } from "react";
+import { NoodleAppView } from "@noodleseed/assistant/react";
 import { useNoodleAssistant } from "@noodleseed/assistant/react/client";
 
 export function CustomAssistant({ principalKey }: { principalKey: string }) {
@@ -327,9 +328,11 @@ export function CustomAssistant({ principalKey }: { principalKey: string }) {
             }
             if (part.type === "data-view") {
               return (
-                <p key={part.data.id}>
-                  Trusted app view available: {part.data.title ?? part.data.resourceUri}
-                </p>
+                <NoodleAppView
+                  key={`${part.data.id}:${part.data.resourceUri}`}
+                  client={client}
+                  view={part.data}
+                />
               );
             }
             return <p key={index}>Unsupported assistant content.</p>;
@@ -364,7 +367,9 @@ export function CustomAssistant({ principalKey }: { principalKey: string }) {
 
 `principalKey` is a browser-local identity for the authenticated user/tenant and is never sent to Noodle. Change it whenever that principal changes; the hook then aborts and clears the previous session and transcript. The hook does not register `<noodle-assistant>` or render Noodle markup.
 
-The sample fails closed on input requests until you replace that branch with a form generated from `requestedSchema`. A custom renderer must show the complete confirmation review and both decisions, handle every part it supports, and surface an explicit unsupported state for the rest. For `data-view`, map `resourceUri` or `tool` plus the bounded/redacted `result` to a component already trusted by the application. Never inject `part.data.html`, assign it to `srcdoc`, or fetch a `ui://` URI; the managed element alone supplies Noodle’s sandbox host. Do not wrap this client in another chat transport or invent user messages for interaction continuations.
+The sample fails closed on input requests until you replace that branch with a form generated from `requestedSchema`. A custom renderer must show the complete confirmation review and both decisions, handle every part it supports, and surface an explicit unsupported state for the rest. For `data-view`, use `NoodleAppView` to render the linked App or deliberately map `resourceUri`/tool plus the bounded redacted `result` to an application-trusted native component. JSON result data is not the linked App UI. Never inject `part.data.html`, assign it to `srcdoc`, fetch a `ui://` URI, or reproduce the bridge with a direct Ext Apps dependency. Do not wrap this client in another chat transport or invent user messages for interaction continuations.
+
+`NoodleAppView` owns one bridge for the semantic view identity: client + `view.id` + `view.resourceUri`. It retains the iframe across fresh payload/callback objects from parent rerenders, reads current payloads through refs, and sends standard App teardown only when that semantic identity changes or the component unmounts. Do not key an ancestor by a view object or callback. If the embedding page sets Content-Security-Policy, include the Noodle service origin in both `connect-src` and `frame-src`.
 
 Outside React, use the same DOM-free client directly. It keeps the session token in memory, exposes a React-free `UIMessage` transcript with typed parts, and never registers a custom element:
 
@@ -416,7 +421,7 @@ if (pending) {
 
 `subscribeChat` immediately emits a detached `{ messages, status, error? }` snapshot and then emits as `UIMessage.parts` change. Text uses `text`; Noodle confirmations, input requests, tool results, and linked views use `data-confirmation`, `data-input-request`, `data-tool-result`, and `data-view`. Interaction data moves through pending/submitting/accepted/declined/cancelled. Use raw `subscribe(...)` only for transport/session lifecycle events that are not transcript content.
 
-`data-view` means a completed tool has a linked MCP App view. It carries the call/interaction id, tool, `ui://` identity, optional title, bounded/redacted public result, and—on current services—the self-contained bridged document. The standard element is an MCP Apps host and mounts that document behind a double iframe; a customer renderer ignores it and maps the identity/result to an application-trusted component. The standard element supports lifecycle, app tool/resource calls, ui/message, ui/update-model-context, links, resize, and inline/fullscreen; sampling, tasks, downloads, and remote DOM are not advertised. It also dispatches `assistant-view-available` for a customer-owned renderer.
+`data-view` means a completed tool has a linked MCP App view. In a customer-owned React renderer, pass that typed part and the existing client to `NoodleAppView`; it retains one bridge for client + `view.id` + `view.resourceUri` and requests standard App teardown on semantic replacement or unmount. Deliberately map the bounded result to an application-trusted native component only when replacing the linked App UI.
 
 `clientContext` and typed `pageContext` are recomputed for each turn. `updateContext(...)` remains the legacy session-exchange context; `updatePageContext(...)` replaces the fresh per-turn application hint. `updateModelContext({ content, structuredContent })` publishes one cohesive renderer snapshot for later message turns without starting a turn; every call replaces the prior snapshot rather than merging fields. These are untrusted data, not conversation history or authorization input, and the boundaries reject credential-shaped or unbounded updates. A message may re-exchange once after a pre-execution `401`; the client never auto-retries interaction decisions. `tool_proposed.arguments` is a complete schema-aware review projection and, for connector-backed tools, names the sole exact connector version/operation/resolved arguments. Sensitive/write-only fields are redacted; truncating or omitting any non-sensitive action field fails closed. Accept is bound to the server-held action and claims at most one execution attempt—clients cannot replace it. Normal terminal outcomes scrub private arguments and continuations immediately; only an accepted action still executing retains them for the one-hour unknown-outcome recovery window, after which it records `interaction_outcome_unknown` and scrubs. Without downstream idempotency this is not an exactly-once business-effect guarantee. To reconcile a lost response, explicitly repeat the same id and decision: the service returns its durable stored outcome without re-execution.