@noodleseed/one 0.35.2 → 0.37.0

package/node_modules/@noodle-borg/agent-kit/dist/generated/example-files.js

@@ -20,7 +20,7 @@ export const BUNDLED_EXAMPLE_FILES = [
     { relPath: "examples/acme-bistro/noodle.json", content: "{\n  \"entrypoint\": \"src/server.ts\",\n  \"name\": \"acme-bistro\",\n  \"template\": \"widget\"\n}\n" },
     { relPath: "examples/acme-bistro/package.json", content: "{\n  \"name\": \"acme-bistro\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"test\": \"vitest run\",\n    \"validate\": \"noodle validate\",\n    \"dev\": \"noodle dev\",\n    \"deploy\": \"noodle deploy\"\n  },\n  \"devDependencies\": {\n    \"@vitejs/plugin-react\": \"latest\",\n    \"@noodleseed/one\": \"latest\",\n    \"react\": \"latest\",\n    \"react-dom\": \"latest\",\n    \"vite\": \"latest\",\n    \"vitest\": \"latest\"\n  }\n}\n" },
     { relPath: "examples/acme-bistro/src/helpers.ts", content: "import type { ServerDefinition } from '@noodleseed/one';\nimport { generateHelpers } from '@noodleseed/one/react';\n\nexport type AppType = ServerDefinition;\n\nexport const { useCallTool, useLayout, useOpenExternal, useToolInfo, useViewState } =\n  generateHelpers<AppType>();\n" },
-    { relPath: "examples/acme-bistro/src/server.ts", content: "import { annotations, server, tool, z } from '@noodleseed/one';\n\n// Acme Bistro is a fictional restaurant. This app is deliberately END-TO-END: the customer browses the\n// menu and builds the order in chat, and the order completes in chat — only *payment* hands off, via a\n// checkout deep link (the card never touches the app). It is the flagship for the end-to-end pattern.\n//\n// Authoring notes:\n// - A tool `fulfil` is *recorded*, not run as live JS. Inline inputs directly as `${input.x}` into\n//   output strings; do not transform them (no arithmetic/encode/filter) or substitution breaks. The\n//   cart total is summed in the widget (live React), not in a `fulfil`. The menu below is static data.\n\nconst menu = [\n  { id: 'stone_pizza', name: 'Stone-baked Margherita', price: 14, kind: 'Mains' },\n  { id: 'roast_bowl', name: 'Harvest Roast Bowl', price: 13, kind: 'Mains' },\n  { id: 'house_salad', name: 'House Garden Salad', price: 11, kind: 'Starters' },\n  { id: 'lemon_tart', name: 'Lemon Tart', price: 8, kind: 'Desserts' },\n  { id: 'sparkling', name: 'Sparkling Water', price: 4, kind: 'Drinks' },\n] as const;\n\nconst itemId = z.enum(['stone_pizza', 'roast_bowl', 'house_salad', 'lemon_tart', 'sparkling']);\n\nconst menuItemOutput = z.object({\n  id: z.string(),\n  name: z.string(),\n  price: z.number(),\n  kind: z.string(),\n});\n\n// Tool annotations for host planners: the menu read is read-only; cart edits are local writes; checkout\n// opens an external (payment) link.\nconst readOnly = annotations.readOnly();\nconst localWrite = annotations.localAction({ destructive: false });\nconst openLink = annotations.openAction();\n\nexport default server(\n  'acme_bistro',\n  {\n    title: 'Acme Bistro',\n    version: '1.0.0',\n    branding: {\n      name: 'Acme Bistro',\n      accent: '#B91C1C',\n      surface: '#FEF3F2',\n      surfaceDark: '#1A1211',\n      radius: 'lg',\n      density: 'comfortable',\n    },\n    // Payment is the only off-app step; the compiler derives ChatGPT redirect_domains from this so the\n    // signed checkout link opens without a safe-link warning. The card never reaches this app.\n    handoff: {\n      allowedDomains: ['https://pay.acme.example', 'https://acme.example'],\n    },\n  },\n  [\n    tool('show_menu', {\n      description: 'Show the Acme Bistro menu and render the ordering widget.',\n      annotations: readOnly,\n      input: z.object({ customer: z.string().default('Guest') }),\n      output: z.object({\n        status: z.string(),\n        customer: z.string(),\n        items: z.array(menuItemOutput),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Acme Bistro menu is ready for ${input.customer}. Build the order here; pay at checkout.`,\n        customer: input.customer,\n        items: menu,\n      }),\n      viewTitle: 'Order at Acme Bistro',\n      viewDescription: 'Browse the menu, build an order in chat, and hand off to pay.',\n      invoking: 'Loading the menu…',\n      invoked: 'Menu ready',\n      domain: 'https://order.acme.example',\n      view: {\n        component: 'menu-cart',\n        entry: './views/menu-cart.tsx',\n      },\n      csp: {\n        connectDomains: ['https://acme.example'],\n        resourceDomains: ['https://acme.example'],\n        frameDomains: ['https://acme.example'],\n      },\n    }),\n    // Widget-only cart edits — the model fills the item from natural language (\"add two margheritas\").\n    tool('add_to_cart', {\n      visibility: ['app'],\n      description: 'Add a menu item to the Acme Bistro order from the widget.',\n      annotations: localWrite,\n      input: z.object({\n        customer: z.string().default('Guest'),\n        item: itemId.default('stone_pizza'),\n        quantity: z.number().int().min(1).default(1),\n        notes: z.string().default(''),\n      }),\n      output: z.object({\n        status: z.string(),\n        item: z.string(),\n        quantity: z.number(),\n        notes: z.string(),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Added ${input.quantity} × ${input.item} for ${input.customer}.`,\n        item: input.item,\n        quantity: input.quantity,\n        notes: input.notes,\n      }),\n    }),\n    tool('remove_from_cart', {\n      visibility: ['app'],\n      description: 'Remove a menu item from the Acme Bistro order.',\n      annotations: localWrite,\n      input: z.object({\n        customer: z.string().default('Guest'),\n        item: itemId.default('stone_pizza'),\n      }),\n      output: z.object({\n        status: z.string(),\n        item: z.string(),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Removed ${input.item} for ${input.customer}.`,\n        item: input.item,\n      }),\n    }),\n    // The only handoff: payment. The widget computes the total (live React) and passes a url-safe cart\n    // token + total; the card is entered on Acme's PCI-scoped checkout, never in chat.\n    tool('create_checkout', {\n      description:\n        'Create the Acme Bistro payment checkout link for the current order. Pass a url-safe cart token ' +\n        'and the numeric total computed in the widget. Payment happens off-app; the card never reaches this app.',\n      annotations: openLink,\n      input: z.object({\n        customer: z.string().default('Guest'),\n        cartToken: z.string().default('cart'),\n        total: z.number().min(0).default(0),\n      }),\n      output: z.object({\n        status: z.string(),\n        summary: z.string(),\n        checkoutUrl: z.string(),\n      }),\n      // Do not place a literal `$` immediately before a token (`$${input.total}`) — it collides with the\n      // `${…}` substitution syntax and leaves the token unresolved. Keep the amount token standalone.\n      fulfil: ({ input }) => ({\n        status: `Ready to pay for ${input.customer}'s order.`,\n        summary: `${input.customer}'s Acme Bistro order · ${input.total} USD`,\n        checkoutUrl: `https://pay.acme.example/checkout?cart=${input.cartToken}&total=${input.total}&src=chatgpt`,\n      }),\n    }),\n  ],\n);\n" },
+    { relPath: "examples/acme-bistro/src/server.ts", content: "import { annotations, server, tool, z } from '@noodleseed/one';\n\n// Acme Bistro is a fictional restaurant. This app is deliberately END-TO-END: the customer browses the\n// menu and builds the order in chat, and the order completes in chat — only *payment* hands off, via a\n// checkout deep link (the card never touches the app). It is the flagship for the end-to-end pattern.\n//\n// Authoring notes:\n// - A tool `fulfil` is *recorded*, not run as live JS. Inline inputs directly as `${input.x}` into\n//   output strings; do not transform them (no arithmetic/encode/filter) or substitution breaks. The\n//   cart total is summed in the widget (live React), not in a `fulfil`. The menu below is static data.\n\nconst menu = [\n  { id: 'stone_pizza', name: 'Stone-baked Margherita', price: 14, kind: 'Mains' },\n  { id: 'roast_bowl', name: 'Harvest Roast Bowl', price: 13, kind: 'Mains' },\n  { id: 'house_salad', name: 'House Garden Salad', price: 11, kind: 'Starters' },\n  { id: 'lemon_tart', name: 'Lemon Tart', price: 8, kind: 'Desserts' },\n  { id: 'sparkling', name: 'Sparkling Water', price: 4, kind: 'Drinks' },\n] as const;\n\nconst itemId = z.enum(['stone_pizza', 'roast_bowl', 'house_salad', 'lemon_tart', 'sparkling']);\n\nconst menuItemOutput = z.object({\n  id: z.string(),\n  name: z.string(),\n  price: z.number(),\n  kind: z.string(),\n});\n\n// Tool annotations for host planners: the menu read is read-only; cart edits are local writes; checkout\n// opens an external (payment) link.\nconst readOnly = annotations.readOnly();\nconst localWrite = annotations.localAction({ destructive: false, confirm: false });\nconst openLink = annotations.openAction();\n\nexport default server(\n  'acme_bistro',\n  {\n    title: 'Acme Bistro',\n    version: '1.0.0',\n    branding: {\n      name: 'Acme Bistro',\n      accent: '#B91C1C',\n      surface: '#FEF3F2',\n      surfaceDark: '#1A1211',\n      radius: 'lg',\n      density: 'comfortable',\n    },\n    // Payment is the only off-app step; the compiler derives ChatGPT redirect_domains from this so the\n    // signed checkout link opens without a safe-link warning. The card never reaches this app.\n    handoff: {\n      allowedDomains: ['https://pay.acme.example', 'https://acme.example'],\n    },\n  },\n  [\n    tool('show_menu', {\n      description: 'Show the Acme Bistro menu and render the ordering widget.',\n      annotations: readOnly,\n      input: z.object({ customer: z.string().default('Guest') }),\n      output: z.object({\n        status: z.string(),\n        customer: z.string(),\n        items: z.array(menuItemOutput),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Acme Bistro menu is ready for ${input.customer}. Build the order here; pay at checkout.`,\n        customer: input.customer,\n        items: menu,\n      }),\n      viewTitle: 'Order at Acme Bistro',\n      viewDescription: 'Browse the menu, build an order in chat, and hand off to pay.',\n      invoking: 'Loading the menu…',\n      invoked: 'Menu ready',\n      domain: 'https://order.acme.example',\n      view: {\n        component: 'menu-cart',\n        entry: './views/menu-cart.tsx',\n      },\n      csp: {\n        connectDomains: ['https://acme.example'],\n        resourceDomains: ['https://acme.example'],\n        frameDomains: ['https://acme.example'],\n      },\n    }),\n    // Widget-only cart edits — the model fills the item from natural language (\"add two margheritas\").\n    tool('add_to_cart', {\n      visibility: ['app'],\n      description: 'Add a menu item to the Acme Bistro order from the widget.',\n      annotations: localWrite,\n      input: z.object({\n        customer: z.string().default('Guest'),\n        item: itemId.default('stone_pizza'),\n        quantity: z.number().int().min(1).default(1),\n        notes: z.string().default(''),\n      }),\n      output: z.object({\n        status: z.string(),\n        item: z.string(),\n        quantity: z.number(),\n        notes: z.string(),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Added ${input.quantity} × ${input.item} for ${input.customer}.`,\n        item: input.item,\n        quantity: input.quantity,\n        notes: input.notes,\n      }),\n    }),\n    tool('remove_from_cart', {\n      visibility: ['app'],\n      description: 'Remove a menu item from the Acme Bistro order.',\n      annotations: localWrite,\n      input: z.object({\n        customer: z.string().default('Guest'),\n        item: itemId.default('stone_pizza'),\n      }),\n      output: z.object({\n        status: z.string(),\n        item: z.string(),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Removed ${input.item} for ${input.customer}.`,\n        item: input.item,\n      }),\n    }),\n    // The only handoff: payment. The widget computes the total (live React) and passes a url-safe cart\n    // token + total; the card is entered on Acme's PCI-scoped checkout, never in chat.\n    tool('create_checkout', {\n      description:\n        'Create the Acme Bistro payment checkout link for the current order. Pass a url-safe cart token ' +\n        'and the numeric total computed in the widget. Payment happens off-app; the card never reaches this app.',\n      annotations: openLink,\n      input: z.object({\n        customer: z.string().default('Guest'),\n        cartToken: z.string().default('cart'),\n        total: z.number().min(0).default(0),\n      }),\n      output: z.object({\n        status: z.string(),\n        summary: z.string(),\n        checkoutUrl: z.string(),\n      }),\n      // Do not place a literal `$` immediately before a token (`$${input.total}`) — it collides with the\n      // `${…}` substitution syntax and leaves the token unresolved. Keep the amount token standalone.\n      fulfil: ({ input }) => ({\n        status: `Ready to pay for ${input.customer}'s order.`,\n        summary: `${input.customer}'s Acme Bistro order · ${input.total} USD`,\n        checkoutUrl: `https://pay.acme.example/checkout?cart=${input.cartToken}&total=${input.total}&src=chatgpt`,\n      }),\n    }),\n  ],\n);\n" },
     { relPath: "examples/acme-bistro/src/views/menu-cart.tsx", content: "import { useMemo, useState } from 'react';\nimport { useCallTool, useLayout, useOpenExternal, useToolInfo, useViewState } from '../helpers.js';\nimport './widget-style.css';\n\ntype MenuItem = {\n  readonly id: string;\n  readonly name: string;\n  readonly price: number;\n  readonly kind: string;\n};\n\nfunction asMenu(value: unknown) {\n  return value as\n    | { readonly status?: string; readonly customer?: string; readonly items?: readonly MenuItem[] }\n    | undefined;\n}\n\nexport default function MenuCart() {\n  const { displayMode, theme } = useLayout();\n  const openExternal = useOpenExternal();\n  const menuResult = asMenu(useToolInfo('show_menu').structuredContent);\n  const addToCart = useCallTool('add_to_cart');\n  const removeFromCart = useCallTool('remove_from_cart');\n  const checkout = useCallTool('create_checkout');\n\n  const items = menuResult?.items ?? [];\n  const [customer] = useViewState('customer', menuResult?.customer ?? 'Guest');\n  // Cart is session-local (id → quantity); the total is summed here in live React, not in a recorded fulfil.\n  const [cart, setCart] = useState<Record<string, number>>({});\n  const [status, setStatus] = useState(\n    menuResult?.status ?? 'Build your order, then check out to pay.',\n  );\n\n  const total = useMemo(\n    () => items.reduce((sum, item) => sum + item.price * (cart[item.id] ?? 0), 0),\n    [items, cart],\n  );\n  const lineCount = Object.values(cart).reduce((n, q) => n + q, 0);\n\n  async function add(item: MenuItem) {\n    setCart((current) => ({ ...current, [item.id]: (current[item.id] ?? 0) + 1 }));\n    const result = await addToCart.callTool({ customer, item: item.id, quantity: 1 });\n    const structured = result.structuredContent as { readonly status?: string } | undefined;\n    setStatus(structured?.status ?? `Added ${item.name}.`);\n  }\n\n  async function remove(item: MenuItem) {\n    setCart((current) => {\n      const next = { ...current };\n      const q = (next[item.id] ?? 0) - 1;\n      if (q <= 0) delete next[item.id];\n      else next[item.id] = q;\n      return next;\n    });\n    await removeFromCart.callTool({ customer, item: item.id });\n  }\n\n  async function payNow() {\n    if (lineCount === 0) return;\n    // The only handoff: payment. A url-safe cart token + the numeric total go to Acme's PCI checkout.\n    const cartToken = items\n      .filter((item) => cart[item.id])\n      .map((item) => `${item.id}x${cart[item.id]}`)\n      .join('-');\n    const result = await checkout.callTool({ customer, cartToken, total });\n    const structured = result.structuredContent as { readonly checkoutUrl?: string } | undefined;\n    if (structured?.checkoutUrl) openExternal(structured.checkoutUrl);\n  }\n\n  return (\n    <main\n      className={`nw-shell${theme === 'dark' ? ' dark' : ''}`}\n      data-llm={`Acme Bistro order for ${customer}: ${lineCount} item(s), total $${total}`}\n    >\n      <section className=\"nw-card\">\n        <header className=\"nw-header\">\n          <span className=\"nw-icon\" aria-hidden=\"true\">\n            <PlateIcon />\n          </span>\n          <div className=\"nw-title-block\">\n            <h1 className=\"nw-title\">Acme Bistro</h1>\n            <p className=\"nw-subtitle\">{status}</p>\n          </div>\n          <span className=\"nw-chip\">\n            {displayMode === 'fullscreen' ? 'Fullscreen' : `${lineCount} in cart`}\n          </span>\n        </header>\n\n        <ul className=\"nw-menu\">\n          {items.map((item) => (\n            <li className=\"nw-row\" key={item.id}>\n              <span className=\"nw-row-main\">\n                <span className=\"nw-name\">{item.name}</span>\n                <span className=\"nw-kind\">{item.kind}</span>\n              </span>\n              <span className=\"nw-price\">${item.price}</span>\n              <span className=\"nw-qty\">\n                <button\n                  aria-label={`Remove one ${item.name}`}\n                  className=\"nw-step\"\n                  type=\"button\"\n                  disabled={!cart[item.id]}\n                  onClick={() => remove(item)}\n                >\n                  −\n                </button>\n                <span className=\"nw-count\">{cart[item.id] ?? 0}</span>\n                <button\n                  aria-label={`Add one ${item.name}`}\n                  className=\"nw-step\"\n                  type=\"button\"\n                  onClick={() => add(item)}\n                >\n                  +\n                </button>\n              </span>\n            </li>\n          ))}\n        </ul>\n\n        <footer className=\"nw-footer\">\n          <span className=\"nw-total\">\n            Total <strong>${total}</strong>\n          </span>\n          <button\n            className=\"nw-button nw-button-primary\"\n            type=\"button\"\n            disabled={lineCount === 0 || checkout.isPending}\n            onClick={payNow}\n          >\n            <CardIcon />\n            {checkout.isPending ? 'Opening checkout…' : 'Check out & pay'}\n          </button>\n        </footer>\n        <p className=\"nw-note\">\n          Payment happens on acme.example — your card is never entered in chat.\n        </p>\n      </section>\n    </main>\n  );\n}\n\nfunction PlateIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n    </svg>\n  );\n}\n\nfunction CardIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n      <path d=\"M3 10h18\" />\n    </svg>\n  );\n}\n" },
     { relPath: "examples/acme-bistro/src/views/widget-style.css", content: ":root {\n  color-scheme: light dark;\n  font-family:\n    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --nw-bg: #ffffff;\n  --nw-surface: #fdf4f3;\n  --nw-text: #1f1413;\n  --nw-muted: #7a5f5c;\n  --nw-border: #efd9d6;\n  --nw-accent: #b91c1c;\n  --nw-accent-strong: #991b1b;\n  --nw-accent-soft: #fdeae8;\n  --nw-radius: 10px;\n  --nw-shadow: 0 18px 50px rgb(60 20 20 / 12%);\n}\n\n.dark,\n[data-theme=\"dark\"] {\n  --nw-bg: #1a1211;\n  --nw-surface: #241816;\n  --nw-text: #f8ecea;\n  --nw-muted: #c3a29e;\n  --nw-border: #43302d;\n  --nw-accent: #f87171;\n  --nw-accent-strong: #ef4444;\n  --nw-accent-soft: #3a1f1d;\n  --nw-shadow: 0 18px 50px rgb(0 0 0 / 32%);\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n}\n\nbutton {\n  font: inherit;\n}\n\n.nw-shell {\n  min-height: 100vh;\n  padding: 14px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n}\n\n.nw-card {\n  max-width: 560px;\n  margin: 0 auto;\n  background: var(--nw-surface);\n  border: 1px solid var(--nw-border);\n  border-radius: var(--nw-radius);\n  box-shadow: var(--nw-shadow);\n  overflow: hidden;\n}\n\n.nw-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  border-bottom: 1px solid var(--nw-border);\n}\n\n.nw-icon svg {\n  width: 24px;\n  height: 24px;\n  fill: none;\n  stroke: var(--nw-accent);\n  stroke-width: 1.7;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.nw-title-block {\n  flex: 1;\n  min-width: 0;\n}\n\n.nw-title {\n  margin: 0;\n  font-size: 17px;\n  font-weight: 700;\n}\n\n.nw-subtitle {\n  margin: 2px 0 0;\n  font-size: 13px;\n  color: var(--nw-muted);\n}\n\n.nw-chip {\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: var(--nw-accent-soft);\n  color: var(--nw-accent-strong);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.nw-menu {\n  list-style: none;\n  margin: 0;\n  padding: 8px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.nw-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n  border-bottom: 1px dashed var(--nw-border);\n}\n\n.nw-row-main {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.nw-name {\n  font-weight: 600;\n}\n\n.nw-kind {\n  font-size: 12px;\n  color: var(--nw-muted);\n}\n\n.nw-price {\n  color: var(--nw-accent-strong);\n  font-weight: 600;\n  font-size: 13px;\n}\n\n.nw-qty {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.nw-step {\n  width: 26px;\n  height: 26px;\n  border: 1px solid var(--nw-border);\n  border-radius: 8px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n  cursor: pointer;\n}\n\n.nw-step:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.nw-count {\n  min-width: 16px;\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n\n.nw-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px 4px;\n}\n\n.nw-total {\n  font-size: 14px;\n  color: var(--nw-muted);\n}\n\n.nw-total strong {\n  color: var(--nw-text);\n  font-size: 16px;\n}\n\n.nw-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 9px 14px;\n  border: 1px solid var(--nw-border);\n  border-radius: 10px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n  cursor: pointer;\n}\n\n.nw-button svg {\n  width: 16px;\n  height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.7;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.nw-button-primary {\n  background: var(--nw-accent);\n  border-color: var(--nw-accent);\n  color: #ffffff;\n  font-weight: 600;\n}\n\n.nw-button-primary:disabled {\n  opacity: 0.6;\n  cursor: default;\n}\n\n.nw-note {\n  margin: 0;\n  padding: 8px 16px 16px;\n  font-size: 12px;\n  color: var(--nw-muted);\n}\n" },
     { relPath: "examples/acme-bistro/test/server.test.ts", content: "import { describe, expect, it } from 'vitest';\nimport app from '../src/server.js';\n\ndescribe('acme-bistro example', () => {\n  it('exports a Noodle server definition', () => {\n    expect(typeof app.toManifest).toBe('function');\n  });\n\n  it('declares the payment-only handoff domain', async () => {\n    // End-to-end: the order completes in chat; only payment hands off to Acme's checkout.\n    const text = JSON.stringify(await app.toManifest());\n    expect(text).toContain('https://pay.acme.example');\n  });\n\n  it('exposes the menu widget, cart helpers, and checkout tool', async () => {\n    const text = JSON.stringify(await app.toManifest());\n    expect(text).toContain('show_menu');\n    expect(text).toContain('add_to_cart');\n    expect(text).toContain('create_checkout');\n  });\n});\n" },
@@ -31,7 +31,7 @@ export const BUNDLED_EXAMPLE_FILES = [
     { relPath: "examples/acme-discovery/noodle.json", content: "{\n  \"entrypoint\": \"src/server.ts\",\n  \"name\": \"acme-discovery\",\n  \"template\": \"widget\"\n}\n" },
     { relPath: "examples/acme-discovery/package.json", content: "{\n  \"name\": \"acme-discovery\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"test\": \"vitest run\",\n    \"validate\": \"noodle validate\",\n    \"dev\": \"noodle dev\",\n    \"deploy\": \"noodle deploy\"\n  },\n  \"devDependencies\": {\n    \"@vitejs/plugin-react\": \"latest\",\n    \"@noodleseed/one\": \"latest\",\n    \"react\": \"latest\",\n    \"react-dom\": \"latest\",\n    \"vite\": \"latest\",\n    \"vitest\": \"latest\"\n  }\n}\n" },
     { relPath: "examples/acme-discovery/src/helpers.ts", content: "import type { ServerDefinition } from '@noodleseed/one';\nimport { generateHelpers } from '@noodleseed/one/react';\n\nexport type AppType = ServerDefinition;\n\nexport const { useCallTool, useLayout, useOpenExternal, useToolInfo, useViewState } =\n  generateHelpers<AppType>();\n" },
-    { relPath: "examples/acme-discovery/src/server.ts", content: "import { annotations, server, tool, z } from '@noodleseed/one';\n\n// Acme Getaways is a fictional travel brand. This app is deliberately top-of-funnel: discovery and\n// configuration happen inside ChatGPT; the booking/transaction happens off-app on Acme's own site,\n// reached through a signed, attributable handoff deep link. Destinations are the partner's own\n// catalog (grounding) — the app never invents a place, price, or best-month.\n//\n// Authoring note: a tool `fulfil` is *recorded*, not run as live JS. Inputs flow through as\n// `${input.x}` substitutions when placed directly into an output string; do not transform them\n// (no URL-encoding, arithmetic, or filtering on an input value — those break substitution). The\n// curated catalog below is static data the runtime returns verbatim.\n\nconst catalog = [\n  {\n    id: 'coral_bay',\n    name: 'Coral Bay',\n    region: 'Adriatic coast',\n    vibe: 'beach',\n    priceFrom: 890,\n    bestMonths: 'May–Sep',\n    why: 'Calm swimming coves and a walkable old town — easy for a relaxed first trip.',\n  },\n  {\n    id: 'monte_alto',\n    name: 'Monte Alto',\n    region: 'Northern Alps',\n    vibe: 'mountains',\n    priceFrom: 1120,\n    bestMonths: 'Dec–Mar',\n    why: 'Ski-in village with beginner slopes and long groomed runs.',\n  },\n  {\n    id: 'old_quarter',\n    name: 'Old Quarter',\n    region: 'Central Europe',\n    vibe: 'culture',\n    priceFrom: 640,\n    bestMonths: 'Apr–Oct',\n    why: 'Dense museum district and food halls, all reachable on foot.',\n  },\n  {\n    id: 'harbor_city',\n    name: 'Harbor City',\n    region: 'Pacific rim',\n    vibe: 'city',\n    priceFrom: 980,\n    bestMonths: 'Sep–Nov',\n    why: 'Waterfront nightlife and day-trip islands a short ferry away.',\n  },\n] as const;\n\n// A closed set of URL-safe month values. A `fulfil` cannot url-encode an input (recording would break\n// substitution), so the deep link carries `month` only if it is already safe — the model maps natural\n// phrasing (\"early June\") onto one of these when it fills the tool.\nconst monthEnum = z\n  .enum([\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n  ])\n  .default('June');\n\n// The catalog ids are already url-safe slugs. Constrain the handoff `destination` to this closed set so\n// only a real, url-safe id can reach the deep link.\nconst destinationId = z.enum(['coral_bay', 'monte_alto', 'old_quarter', 'harbor_city']);\n\nconst discoverInput = z.object({\n  vibe: z.enum(['beach', 'mountains', 'culture', 'city']).default('beach'),\n  month: monthEnum,\n  travelers: z.number().int().min(1).default(2),\n});\n\n// Tool annotations for host planners: reads are read-only, the handoff opens an external link, and\n// shortlisting is a local non-destructive write.\nconst readOnly = annotations.readOnly();\nconst openLink = annotations.openAction();\nconst localWrite = annotations.localAction({ destructive: false });\n\nconst destinationOutput = z.object({\n  id: z.string(),\n  name: z.string(),\n  region: z.string(),\n  vibe: z.string(),\n  priceFrom: z.number(),\n  bestMonths: z.string(),\n  why: z.string(),\n});\n\nexport default server(\n  'acme_discovery',\n  {\n    title: 'Acme Getaways',\n    version: '1.0.0',\n    branding: {\n      name: 'Acme Getaways',\n      accent: '#0EA5A4',\n      surface: '#F0FDFA',\n      surfaceDark: '#0B1B1B',\n      radius: 'lg',\n      density: 'comfortable',\n    },\n    // The only external destinations the app links out to — the compiler derives ChatGPT's\n    // redirect_domains from this so the handoff opens without a safe-link warning.\n    handoff: {\n      allowedDomains: ['https://book.acme.example', 'https://acme.example'],\n    },\n  },\n  [\n    tool('discover_getaways', {\n      description:\n        'Suggest Acme Getaways destinations for a vibe and month and render a discovery carousel.',\n      annotations: readOnly,\n      input: discoverInput,\n      output: z.object({\n        status: z.string(),\n        vibe: z.string(),\n        month: z.string(),\n        travelers: z.number(),\n        options: z.array(destinationOutput),\n      }),\n      // The carousel presents Acme's curated catalog; the model narrates which fit the stated vibe.\n      // (A tool cannot filter on an input value — that is connector/flow work — so all are returned.)\n      fulfil: ({ input }) => ({\n        status: `Acme Getaways for a ${input.vibe} trip in ${input.month}, ${input.travelers} traveler(s).`,\n        vibe: input.vibe,\n        month: input.month,\n        travelers: input.travelers,\n        options: catalog,\n      }),\n      viewTitle: 'Discover getaways',\n      // ChatGPT host status copy (openai/toolInvocation/*) — required for widget-opening tools.\n      invoking: 'Finding getaways…',\n      invoked: 'Getaways ready',\n      domain: 'https://getaways.acme.example',\n      view: {\n        component: 'discovery-carousel',\n        entry: './views/discovery-carousel.tsx',\n      },\n      viewDescription:\n        'A top-of-funnel discovery carousel: pick a destination, then hand off to Acme to book.',\n      csp: {\n        connectDomains: ['https://acme.example'],\n        resourceDomains: ['https://acme.example'],\n        frameDomains: ['https://acme.example'],\n      },\n    }),\n    tool('create_handoff', {\n      description:\n        'Create the Acme booking deep link for a chosen destination, carrying the configured trip. ' +\n        'Pass the destination id (url-safe slug, e.g. \"coral_bay\") and its display name.',\n      annotations: openLink,\n      input: z.object({\n        destination: destinationId,\n        destinationName: z.string().min(1),\n        month: monthEnum,\n        travelers: z.number().int().min(1).default(2),\n      }),\n      output: z.object({\n        status: z.string(),\n        destination: z.string(),\n        summary: z.string(),\n        handoffUrl: z.string(),\n      }),\n      // Inline the inputs directly so they substitute at runtime; every value is already url-safe\n      // (id slug, month enum, integer), and `src=chatgpt` is the attribution the partner measures\n      // ChatGPT-sourced conversions on.\n      fulfil: ({ input }) => ({\n        status: `Ready to continue on Acme for ${input.destinationName}.`,\n        destination: input.destination,\n        summary: `${input.destinationName} · ${input.month} · ${input.travelers} traveler(s)`,\n        handoffUrl: `https://book.acme.example/plan?dest=${input.destination}&month=${input.month}&pax=${input.travelers}&src=chatgpt`,\n      }),\n    }),\n    tool('shortlist_getaway', {\n      visibility: ['app'],\n      description: 'Record the traveler’s shortlisted destination from the discovery widget.',\n      annotations: localWrite,\n      input: z.object({\n        destination: z.string(),\n        note: z.string().default(''),\n      }),\n      output: z.object({\n        status: z.string(),\n        destination: z.string(),\n        note: z.string(),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Shortlisted ${input.destination}.`,\n        destination: input.destination,\n        note: input.note,\n      }),\n    }),\n  ],\n);\n" },
+    { relPath: "examples/acme-discovery/src/server.ts", content: "import { annotations, server, tool, z } from '@noodleseed/one';\n\n// Acme Getaways is a fictional travel brand. This app is deliberately top-of-funnel: discovery and\n// configuration happen inside ChatGPT; the booking/transaction happens off-app on Acme's own site,\n// reached through a signed, attributable handoff deep link. Destinations are the partner's own\n// catalog (grounding) — the app never invents a place, price, or best-month.\n//\n// Authoring note: a tool `fulfil` is *recorded*, not run as live JS. Inputs flow through as\n// `${input.x}` substitutions when placed directly into an output string; do not transform them\n// (no URL-encoding, arithmetic, or filtering on an input value — those break substitution). The\n// curated catalog below is static data the runtime returns verbatim.\n\nconst catalog = [\n  {\n    id: 'coral_bay',\n    name: 'Coral Bay',\n    region: 'Adriatic coast',\n    vibe: 'beach',\n    priceFrom: 890,\n    bestMonths: 'May–Sep',\n    why: 'Calm swimming coves and a walkable old town — easy for a relaxed first trip.',\n  },\n  {\n    id: 'monte_alto',\n    name: 'Monte Alto',\n    region: 'Northern Alps',\n    vibe: 'mountains',\n    priceFrom: 1120,\n    bestMonths: 'Dec–Mar',\n    why: 'Ski-in village with beginner slopes and long groomed runs.',\n  },\n  {\n    id: 'old_quarter',\n    name: 'Old Quarter',\n    region: 'Central Europe',\n    vibe: 'culture',\n    priceFrom: 640,\n    bestMonths: 'Apr–Oct',\n    why: 'Dense museum district and food halls, all reachable on foot.',\n  },\n  {\n    id: 'harbor_city',\n    name: 'Harbor City',\n    region: 'Pacific rim',\n    vibe: 'city',\n    priceFrom: 980,\n    bestMonths: 'Sep–Nov',\n    why: 'Waterfront nightlife and day-trip islands a short ferry away.',\n  },\n] as const;\n\n// A closed set of URL-safe month values. A `fulfil` cannot url-encode an input (recording would break\n// substitution), so the deep link carries `month` only if it is already safe — the model maps natural\n// phrasing (\"early June\") onto one of these when it fills the tool.\nconst monthEnum = z\n  .enum([\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n  ])\n  .default('June');\n\n// The catalog ids are already url-safe slugs. Constrain the handoff `destination` to this closed set so\n// only a real, url-safe id can reach the deep link.\nconst destinationId = z.enum(['coral_bay', 'monte_alto', 'old_quarter', 'harbor_city']);\n\nconst discoverInput = z.object({\n  vibe: z.enum(['beach', 'mountains', 'culture', 'city']).default('beach'),\n  month: monthEnum,\n  travelers: z.number().int().min(1).default(2),\n});\n\n// Tool annotations for host planners: reads are read-only, the handoff opens an external link, and\n// shortlisting is a local non-destructive write.\nconst readOnly = annotations.readOnly();\nconst openLink = annotations.openAction();\nconst localWrite = annotations.localAction({ destructive: false, confirm: false });\n\nconst destinationOutput = z.object({\n  id: z.string(),\n  name: z.string(),\n  region: z.string(),\n  vibe: z.string(),\n  priceFrom: z.number(),\n  bestMonths: z.string(),\n  why: z.string(),\n});\n\nexport default server(\n  'acme_discovery',\n  {\n    title: 'Acme Getaways',\n    version: '1.0.0',\n    branding: {\n      name: 'Acme Getaways',\n      accent: '#0EA5A4',\n      surface: '#F0FDFA',\n      surfaceDark: '#0B1B1B',\n      radius: 'lg',\n      density: 'comfortable',\n    },\n    // The only external destinations the app links out to — the compiler derives ChatGPT's\n    // redirect_domains from this so the handoff opens without a safe-link warning.\n    handoff: {\n      allowedDomains: ['https://book.acme.example', 'https://acme.example'],\n    },\n  },\n  [\n    tool('discover_getaways', {\n      description:\n        'Suggest Acme Getaways destinations for a vibe and month and render a discovery carousel.',\n      annotations: readOnly,\n      input: discoverInput,\n      output: z.object({\n        status: z.string(),\n        vibe: z.string(),\n        month: z.string(),\n        travelers: z.number(),\n        options: z.array(destinationOutput),\n      }),\n      // The carousel presents Acme's curated catalog; the model narrates which fit the stated vibe.\n      // (A tool cannot filter on an input value — that is connector/flow work — so all are returned.)\n      fulfil: ({ input }) => ({\n        status: `Acme Getaways for a ${input.vibe} trip in ${input.month}, ${input.travelers} traveler(s).`,\n        vibe: input.vibe,\n        month: input.month,\n        travelers: input.travelers,\n        options: catalog,\n      }),\n      viewTitle: 'Discover getaways',\n      // ChatGPT host status copy (openai/toolInvocation/*) — required for widget-opening tools.\n      invoking: 'Finding getaways…',\n      invoked: 'Getaways ready',\n      domain: 'https://getaways.acme.example',\n      view: {\n        component: 'discovery-carousel',\n        entry: './views/discovery-carousel.tsx',\n      },\n      viewDescription:\n        'A top-of-funnel discovery carousel: pick a destination, then hand off to Acme to book.',\n      csp: {\n        connectDomains: ['https://acme.example'],\n        resourceDomains: ['https://acme.example'],\n        frameDomains: ['https://acme.example'],\n      },\n    }),\n    tool('create_handoff', {\n      description:\n        'Create the Acme booking deep link for a chosen destination, carrying the configured trip. ' +\n        'Pass the destination id (url-safe slug, e.g. \"coral_bay\") and its display name.',\n      annotations: openLink,\n      input: z.object({\n        destination: destinationId,\n        destinationName: z.string().min(1),\n        month: monthEnum,\n        travelers: z.number().int().min(1).default(2),\n      }),\n      output: z.object({\n        status: z.string(),\n        destination: z.string(),\n        summary: z.string(),\n        handoffUrl: z.string(),\n      }),\n      // Inline the inputs directly so they substitute at runtime; every value is already url-safe\n      // (id slug, month enum, integer), and `src=chatgpt` is the attribution the partner measures\n      // ChatGPT-sourced conversions on.\n      fulfil: ({ input }) => ({\n        status: `Ready to continue on Acme for ${input.destinationName}.`,\n        destination: input.destination,\n        summary: `${input.destinationName} · ${input.month} · ${input.travelers} traveler(s)`,\n        handoffUrl: `https://book.acme.example/plan?dest=${input.destination}&month=${input.month}&pax=${input.travelers}&src=chatgpt`,\n      }),\n    }),\n    tool('shortlist_getaway', {\n      visibility: ['app'],\n      description: 'Record the traveler’s shortlisted destination from the discovery widget.',\n      annotations: localWrite,\n      input: z.object({\n        destination: z.string(),\n        note: z.string().default(''),\n      }),\n      output: z.object({\n        status: z.string(),\n        destination: z.string(),\n        note: z.string(),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Shortlisted ${input.destination}.`,\n        destination: input.destination,\n        note: input.note,\n      }),\n    }),\n  ],\n);\n" },
     { relPath: "examples/acme-discovery/src/views/discovery-carousel.tsx", content: "import { useState } from 'react';\nimport { useCallTool, useLayout, useOpenExternal, useToolInfo, useViewState } from '../helpers.js';\nimport './widget-style.css';\n\ntype Destination = {\n  readonly id: string;\n  readonly name: string;\n  readonly region: string;\n  readonly vibe: string;\n  readonly priceFrom: number;\n  readonly bestMonths: string;\n  readonly why: string;\n};\n\nfunction asDiscovery(value: unknown) {\n  return value as\n    | {\n        readonly status?: string;\n        readonly month?: string;\n        readonly travelers?: number;\n        readonly options?: readonly Destination[];\n      }\n    | undefined;\n}\n\nexport default function DiscoveryCarousel() {\n  const { displayMode, theme } = useLayout();\n  const openExternal = useOpenExternal();\n  const discovery = asDiscovery(useToolInfo('discover_getaways').structuredContent);\n  const shortlist = useCallTool('shortlist_getaway');\n  const handoff = useCallTool('create_handoff');\n\n  const options = discovery?.options ?? [];\n  const month = discovery?.month ?? 'June';\n  const travelers = discovery?.travelers ?? 2;\n  const [chosen, setChosen] = useViewState('chosen', options[0]?.id ?? '');\n  const [status, setStatus] = useState(discovery?.status ?? 'Pick a getaway to continue.');\n  const selected = options.find((entry) => entry.id === chosen) ?? options[0];\n  const continueLabel = handoff.isPending\n    ? 'Opening Acme…'\n    : `Continue on Acme${selected ? ` · ${selected.name}` : ''}`;\n\n  async function shortlistDestination(destination: Destination) {\n    setChosen(destination.id);\n    try {\n      const result = await shortlist.callTool({ destination: destination.name });\n      const structured = result.structuredContent as { readonly status?: string } | undefined;\n      setStatus(structured?.status ?? `Shortlisted ${destination.name}.`);\n    } catch {\n      setStatus(`Couldn't shortlist ${destination.name} — try again.`);\n    }\n  }\n\n  async function continueOnAcme() {\n    if (selected === undefined) return;\n    // The handoff is the product: configure here, transact off-app. The deep link carries the trip.\n    // Only open the external target on a successful handoff; surface failures instead of failing silently.\n    try {\n      const result = await handoff.callTool({\n        destination: selected.id,\n        destinationName: selected.name,\n        month,\n        travelers,\n      });\n      const structured = result.structuredContent as { readonly handoffUrl?: string } | undefined;\n      if (structured?.handoffUrl) openExternal(structured.handoffUrl);\n      else setStatus('Continue on Acme is unavailable right now — try again.');\n    } catch {\n      setStatus('Continue on Acme failed — try again.');\n    }\n  }\n\n  return (\n    <main\n      className={`nw-shell${theme === 'dark' ? ' dark' : ''}`}\n      data-llm={`Acme Getaways discovery: ${options.length} options for ${month}, ${travelers} traveler(s); shortlisted ${selected?.name ?? 'none'}`}\n    >\n      <section className=\"nw-card\">\n        <header className=\"nw-header\">\n          <span className=\"nw-icon\" aria-hidden=\"true\">\n            <CompassIcon />\n          </span>\n          <div className=\"nw-title-block\">\n            <h1 className=\"nw-title\">Acme Getaways</h1>\n            <p className=\"nw-subtitle\" aria-live=\"polite\">\n              {status}\n            </p>\n          </div>\n          <span className=\"nw-chip\">\n            {displayMode === 'fullscreen' ? 'Fullscreen' : 'Discover'}\n          </span>\n        </header>\n\n        <div className=\"nw-carousel\">\n          {options.map((entry) => (\n            <article\n              className={`nw-dest${entry.id === chosen ? ' nw-dest-active' : ''}`}\n              key={entry.id}\n            >\n              <div className=\"nw-dest-head\">\n                <span className=\"nw-dest-name\">{entry.name}</span>\n                <span className=\"nw-price\">from ${entry.priceFrom}</span>\n              </div>\n              <p className=\"nw-dest-region\">\n                {entry.region} · best {entry.bestMonths}\n              </p>\n              {/* Grounded copy: the \"why\" comes from Acme's catalog, not invented at runtime. */}\n              <p className=\"nw-dest-why\">{entry.why}</p>\n              <button\n                aria-pressed={entry.id === chosen}\n                className=\"nw-button nw-button-ghost\"\n                type=\"button\"\n                onClick={() => shortlistDestination(entry)}\n              >\n                {entry.id === chosen ? 'Shortlisted' : 'Shortlist'}\n              </button>\n            </article>\n          ))}\n        </div>\n\n        <div className=\"nw-actions\">\n          <button\n            className=\"nw-button nw-button-primary\"\n            type=\"button\"\n            disabled={selected === undefined || handoff.isPending}\n            onClick={continueOnAcme}\n          >\n            <ExternalIcon />\n            {continueLabel}\n          </button>\n        </div>\n        <p className=\"nw-note\">Booking and payment happen on acme.example — never inside chat.</p>\n      </section>\n    </main>\n  );\n}\n\nfunction CompassIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"m15.5 8.5-2 5-5 2 2-5 5-2Z\" />\n    </svg>\n  );\n}\n\nfunction ExternalIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M14 4h6v6\" />\n      <path d=\"m20 4-9 9\" />\n      <path d=\"M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5\" />\n    </svg>\n  );\n}\n" },
     { relPath: "examples/acme-discovery/src/views/widget-style.css", content: ":root {\n  color-scheme: light dark;\n  font-family:\n    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --nw-bg: #ffffff;\n  --nw-surface: #f4fbfa;\n  --nw-text: #10201f;\n  --nw-muted: #5b6b6a;\n  --nw-border: #d4e6e4;\n  --nw-accent: #0ea5a4;\n  --nw-accent-strong: #0f766e;\n  --nw-accent-soft: #e6faf8;\n  --nw-radius: 10px;\n  --nw-shadow: 0 18px 50px rgb(15 40 40 / 12%);\n}\n\n.dark,\n[data-theme=\"dark\"] {\n  --nw-bg: #0b1b1b;\n  --nw-surface: #102624;\n  --nw-text: #eafaf8;\n  --nw-muted: #9fb6b3;\n  --nw-border: #244341;\n  --nw-accent: #2dd4bf;\n  --nw-accent-strong: #14b8a6;\n  --nw-accent-soft: #0f3835;\n  --nw-shadow: 0 18px 50px rgb(0 0 0 / 30%);\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n}\n\nbutton {\n  font: inherit;\n}\n\n.nw-shell {\n  min-height: 100vh;\n  padding: 14px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n}\n\n.nw-card {\n  max-width: 720px;\n  margin: 0 auto;\n  background: var(--nw-surface);\n  border: 1px solid var(--nw-border);\n  border-radius: var(--nw-radius);\n  box-shadow: var(--nw-shadow);\n  overflow: hidden;\n}\n\n.nw-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  border-bottom: 1px solid var(--nw-border);\n}\n\n.nw-icon svg {\n  width: 26px;\n  height: 26px;\n  fill: none;\n  stroke: var(--nw-accent);\n  stroke-width: 1.7;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.nw-title-block {\n  flex: 1;\n  min-width: 0;\n}\n\n.nw-title {\n  margin: 0;\n  font-size: 17px;\n  font-weight: 700;\n}\n\n.nw-subtitle {\n  margin: 2px 0 0;\n  font-size: 13px;\n  color: var(--nw-muted);\n}\n\n.nw-chip {\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: var(--nw-accent-soft);\n  color: var(--nw-accent-strong);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.nw-carousel {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  gap: 12px;\n  padding: 16px;\n}\n\n.nw-dest {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  border: 1px solid var(--nw-border);\n  border-radius: 12px;\n  background: var(--nw-bg);\n}\n\n.nw-dest-active {\n  border-color: var(--nw-accent);\n  box-shadow: 0 0 0 1px var(--nw-accent);\n}\n\n.nw-dest-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.nw-dest-name {\n  font-weight: 700;\n}\n\n.nw-price {\n  color: var(--nw-accent-strong);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.nw-dest-region {\n  margin: 0;\n  font-size: 12px;\n  color: var(--nw-muted);\n}\n\n.nw-dest-why {\n  margin: 0;\n  font-size: 13px;\n  flex: 1;\n}\n\n.nw-actions {\n  display: flex;\n  gap: 8px;\n  padding: 0 16px 12px;\n}\n\n.nw-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 9px 14px;\n  border: 1px solid var(--nw-border);\n  border-radius: 10px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n  cursor: pointer;\n}\n\n.nw-button svg {\n  width: 16px;\n  height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.7;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.nw-button-ghost {\n  align-self: flex-start;\n  padding: 6px 12px;\n  font-size: 13px;\n}\n\n.nw-button-primary {\n  background: var(--nw-accent);\n  border-color: var(--nw-accent);\n  color: #ffffff;\n  font-weight: 600;\n}\n\n.nw-button-primary:disabled {\n  opacity: 0.6;\n  cursor: default;\n}\n\n.nw-note {\n  margin: 0;\n  padding: 0 16px 16px;\n  font-size: 12px;\n  color: var(--nw-muted);\n}\n" },
     { relPath: "examples/acme-discovery/test/server.test.ts", content: "import { describe, expect, it } from 'vitest';\nimport app from '../src/server.js';\n\ndescribe('acme-discovery example', () => {\n  it('exports a Noodle server definition', () => {\n    expect(typeof app.toManifest).toBe('function');\n  });\n\n  it('declares the off-app handoff domain the deep link lands on', async () => {\n    // Top-of-funnel: the only external target is Acme's booking site, declared once at the server.\n    const manifest = await app.toManifest();\n    expect(JSON.stringify(manifest)).toContain('https://book.acme.example');\n  });\n\n  it('exposes the discovery tool and the handoff tool', async () => {\n    const manifest = await app.toManifest();\n    const text = JSON.stringify(manifest);\n    // The discovery tool renders the carousel; the handoff tool emits the deep link; the widget-only\n    // helper records a shortlist.\n    expect(text).toContain('discover_getaways');\n    expect(text).toContain('create_handoff');\n    expect(text).toContain('shortlist_getaway');\n  });\n});\n" },
@@ -42,25 +42,25 @@ export const BUNDLED_EXAMPLE_FILES = [
     { relPath: "examples/acme-tasks/noodle.json", content: "{\n  \"entrypoint\": \"src/server.ts\",\n  \"name\": \"acme-tasks\",\n  \"template\": \"widget\"\n}\n" },
     { relPath: "examples/acme-tasks/package.json", content: "{\n  \"name\": \"acme-tasks\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"test\": \"vitest run\",\n    \"validate\": \"noodle validate\",\n    \"dev\": \"noodle dev\",\n    \"deploy\": \"noodle deploy\"\n  },\n  \"devDependencies\": {\n    \"@vitejs/plugin-react\": \"latest\",\n    \"@noodleseed/one\": \"latest\",\n    \"react\": \"latest\",\n    \"react-dom\": \"latest\",\n    \"vite\": \"latest\",\n    \"vitest\": \"latest\"\n  }\n}\n" },
     { relPath: "examples/acme-tasks/src/helpers.ts", content: "import type { ServerDefinition } from '@noodleseed/one';\nimport { generateHelpers } from '@noodleseed/one/react';\n\nexport type AppType = ServerDefinition;\n\nexport const { useCallTool, useLayout, useToolInfo, useViewState } = generateHelpers<AppType>();\n" },
-    { relPath: "examples/acme-tasks/src/server.ts", content: "import { annotations, server, tool, z } from '@noodleseed/one';\n\n// Acme Tasks is a fictional productivity app. It is a two-way (read + write) experience rather than a\n// top-of-funnel handoff: the top-3 prioritized user flows all complete in chat — Capture, Prioritize,\n// and Complete. It is the flagship for designing an app around its prioritized flows (see the README).\n//\n// Authoring notes:\n// - A tool `fulfil` is *recorded*, not run as live JS. Place inputs directly into an output string as\n//   `${input.x}` so they substitute at runtime; do not transform them (no arithmetic/filter on inputs).\n//   The seed list below is static data the runtime returns verbatim — the \"today\" view.\n// - A real deployment would connect the user's account with the end-user auth pattern (see the\n//   `customer-auth` example); this example keeps a seeded list so the focus stays on the flows.\n\nconst today = [\n  {\n    id: 'email_vendor',\n    title: 'Email the vendor about the Q3 quote',\n    priority: 'high',\n    done: false,\n  },\n  { id: 'review_pr', title: 'Review the analytics pull request', priority: 'medium', done: false },\n  { id: 'book_offsite', title: 'Book flights for the team offsite', priority: 'low', done: false },\n] as const;\n\nconst priority = z.enum(['high', 'medium', 'low']);\n\n// Tool annotations for host planners: listing is read-only; capture/complete/re-prioritize are local\n// non-destructive writes.\nconst readOnly = annotations.readOnly();\nconst localWrite = annotations.localAction({ destructive: false });\n\nconst taskOutput = z.object({\n  id: z.string(),\n  title: z.string(),\n  priority,\n  done: z.boolean(),\n});\n\nexport default server(\n  'acme_tasks',\n  {\n    title: 'Acme Tasks',\n    version: '1.0.0',\n    branding: {\n      name: 'Acme Tasks',\n      accent: '#7C3AED',\n      surface: '#F5F3FF',\n      surfaceDark: '#161228',\n      radius: 'lg',\n      density: 'comfortable',\n    },\n  },\n  [\n    // Flow 2 — Prioritize / Today: render the list so the human triages and the model can speak to it.\n    tool('list_today', {\n      description: 'Show today’s Acme Tasks and render the task-list widget.',\n      annotations: readOnly,\n      input: z.object({ focus: z.string().default('today') }),\n      output: z.object({\n        status: z.string(),\n        focus: z.string(),\n        tasks: z.array(taskOutput),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Acme Tasks for ${input.focus}: ${today.length} open items, highest priority first.`,\n        focus: input.focus,\n        tasks: today,\n      }),\n      viewTitle: 'Today’s tasks',\n      viewDescription: 'A prioritized task list: capture, re-prioritize, and complete in place.',\n      // ChatGPT host status copy (openai/toolInvocation/*) — required for widget-opening tools.\n      invoking: 'Loading your tasks…',\n      invoked: 'Tasks ready',\n      domain: 'https://tasks.acme.example',\n      view: {\n        component: 'task-list',\n        entry: './views/task-list.tsx',\n      },\n      csp: {\n        connectDomains: ['https://acme.example'],\n        resourceDomains: ['https://acme.example'],\n        frameDomains: ['https://acme.example'],\n      },\n    }),\n    // Flow 1 — Capture: add a task from natural language (\"remind me to email the vendor\").\n    tool('add_task', {\n      description: 'Capture a new Acme task with a title and priority.',\n      annotations: localWrite,\n      input: z.object({\n        title: z.string(),\n        priority: priority.default('medium'),\n      }),\n      output: z.object({\n        status: z.string(),\n        title: z.string(),\n        priority,\n      }),\n      fulfil: ({ input }) => ({\n        status: `Added “${input.title}” (${input.priority}).`,\n        title: input.title,\n        priority: input.priority,\n      }),\n    }),\n    // Flow 3 — Complete: mark a task done. Model-visible so the model can complete on request.\n    tool('complete_task', {\n      description: 'Mark an Acme task complete. Pass the task id and its title.',\n      annotations: localWrite,\n      input: z.object({\n        task: z.string(),\n        title: z.string().min(1),\n      }),\n      output: z.object({\n        status: z.string(),\n        task: z.string(),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Completed “${input.title}”.`,\n        task: input.task,\n      }),\n    }),\n    // Flow 2 helper (widget-only): re-prioritize a task from the list widget.\n    tool('set_priority', {\n      visibility: ['app'],\n      description: 'Re-prioritize a task from the list widget.',\n      annotations: localWrite,\n      input: z.object({\n        task: z.string(),\n        priority,\n      }),\n      output: z.object({\n        status: z.string(),\n        task: z.string(),\n        priority,\n      }),\n      fulfil: ({ input }) => ({\n        status: `Set ${input.task} to ${input.priority} priority.`,\n        task: input.task,\n        priority: input.priority,\n      }),\n    }),\n  ],\n);\n" },
+    { relPath: "examples/acme-tasks/src/server.ts", content: "import { annotations, server, tool, z } from '@noodleseed/one';\n\n// Acme Tasks is a fictional productivity app. It is a two-way (read + write) experience rather than a\n// top-of-funnel handoff: the top-3 prioritized user flows all complete in chat — Capture, Prioritize,\n// and Complete. It is the flagship for designing an app around its prioritized flows (see the README).\n//\n// Authoring notes:\n// - A tool `fulfil` is *recorded*, not run as live JS. Place inputs directly into an output string as\n//   `${input.x}` so they substitute at runtime; do not transform them (no arithmetic/filter on inputs).\n//   The seed list below is static data the runtime returns verbatim — the \"today\" view.\n// - A real deployment would connect the user's account with the end-user auth pattern (see the\n//   `customer-auth` example); this example keeps a seeded list so the focus stays on the flows.\n\nconst today = [\n  {\n    id: 'email_vendor',\n    title: 'Email the vendor about the Q3 quote',\n    priority: 'high',\n    done: false,\n  },\n  { id: 'review_pr', title: 'Review the analytics pull request', priority: 'medium', done: false },\n  { id: 'book_offsite', title: 'Book flights for the team offsite', priority: 'low', done: false },\n] as const;\n\nconst priority = z.enum(['high', 'medium', 'low']);\n\n// Tool annotations for host planners: listing is read-only; capture/complete/re-prioritize are local\n// non-destructive writes.\nconst readOnly = annotations.readOnly();\nconst localWrite = annotations.localAction({ destructive: false });\nconst confirmedWrite = annotations.localAction({ destructive: false, confirm: true });\nconst widgetWrite = annotations.localAction({ destructive: false, confirm: false });\n\nconst taskOutput = z.object({\n  id: z.string(),\n  title: z.string(),\n  priority,\n  done: z.boolean(),\n});\n\nexport default server(\n  'acme_tasks',\n  {\n    title: 'Acme Tasks',\n    version: '1.0.0',\n    branding: {\n      name: 'Acme Tasks',\n      accent: '#7C3AED',\n      surface: '#F5F3FF',\n      surfaceDark: '#161228',\n      radius: 'lg',\n      density: 'comfortable',\n    },\n  },\n  [\n    // Flow 2 — Prioritize / Today: render the list so the human triages and the model can speak to it.\n    tool('list_today', {\n      description: 'Show today’s Acme Tasks and render the task-list widget.',\n      annotations: readOnly,\n      input: z.object({ focus: z.string().default('today') }),\n      output: z.object({\n        status: z.string(),\n        focus: z.string(),\n        tasks: z.array(taskOutput),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Acme Tasks for ${input.focus}: ${today.length} open items, highest priority first.`,\n        focus: input.focus,\n        tasks: today,\n      }),\n      viewTitle: 'Today’s tasks',\n      viewDescription: 'A prioritized task list: capture, re-prioritize, and complete in place.',\n      // ChatGPT host status copy (openai/toolInvocation/*) — required for widget-opening tools.\n      invoking: 'Loading your tasks…',\n      invoked: 'Tasks ready',\n      domain: 'https://tasks.acme.example',\n      view: {\n        component: 'task-list',\n        entry: './views/task-list.tsx',\n      },\n      csp: {\n        connectDomains: ['https://acme.example'],\n        resourceDomains: ['https://acme.example'],\n        frameDomains: ['https://acme.example'],\n      },\n    }),\n    // Flow 1 — Capture: add a task from natural language (\"remind me to email the vendor\").\n    tool('add_task', {\n      description: 'Capture a new Acme task with a title and priority.',\n      annotations: localWrite,\n      input: z.object({\n        title: z.string(),\n        priority: priority.default('medium'),\n      }),\n      output: z.object({\n        status: z.string(),\n        title: z.string(),\n        priority,\n      }),\n      fulfil: ({ input }) => ({\n        status: `Added “${input.title}” (${input.priority}).`,\n        title: input.title,\n        priority: input.priority,\n      }),\n    }),\n    // Flow 3 — Complete: mark a task done. Model-visible so the model can complete on request.\n    tool('complete_task', {\n      description: 'Mark an Acme task complete. Pass the task id and its title.',\n      annotations: confirmedWrite,\n      input: z.object({\n        task: z.string(),\n        title: z.string().min(1),\n      }),\n      output: z.object({\n        status: z.string(),\n        task: z.string(),\n      }),\n      fulfil: ({ input }) => ({\n        status: `Completed “${input.title}”.`,\n        task: input.task,\n      }),\n    }),\n    // Flow 2 helper (widget-only): re-prioritize a task from the list widget.\n    tool('set_priority', {\n      visibility: ['app'],\n      description: 'Re-prioritize a task from the list widget.',\n      annotations: widgetWrite,\n      input: z.object({\n        task: z.string(),\n        priority,\n      }),\n      output: z.object({\n        status: z.string(),\n        task: z.string(),\n        priority,\n      }),\n      fulfil: ({ input }) => ({\n        status: `Set ${input.task} to ${input.priority} priority.`,\n        task: input.task,\n        priority: input.priority,\n      }),\n    }),\n  ],\n);\n" },
     { relPath: "examples/acme-tasks/src/views/task-list.tsx", content: "import { useState } from 'react';\nimport { useCallTool, useLayout, useToolInfo, useViewState } from '../helpers.js';\nimport './widget-style.css';\n\ntype Priority = 'high' | 'medium' | 'low';\n\ntype Task = {\n  readonly id: string;\n  readonly title: string;\n  readonly priority: Priority;\n  readonly done: boolean;\n};\n\nconst PRIORITIES: readonly Priority[] = ['high', 'medium', 'low'];\n\nfunction asToday(value: unknown) {\n  return value as { readonly status?: string; readonly tasks?: readonly Task[] } | undefined;\n}\n\nexport default function TaskList() {\n  const { displayMode, theme } = useLayout();\n  const today = asToday(useToolInfo('list_today').structuredContent);\n  const addTask = useCallTool('add_task');\n  const completeTask = useCallTool('complete_task');\n  const setPriorityTool = useCallTool('set_priority');\n\n  const seeded = today?.tasks ?? [];\n  // Local, session-scoped state layered over the seeded list — the three flows write here and record\n  // the change through a tool call. Captured tasks live in `added` so the list updates in place.\n  const [added, setAdded] = useState<readonly Task[]>([]);\n  const [done, setDone] = useState<readonly string[]>([]);\n  const [priority, setPriority] = useState<Record<string, Priority>>({});\n  const [draft, setDraft] = useViewState('draft', '');\n  const [status, setStatus] = useState(today?.status ?? 'Capture, prioritize, and complete.');\n\n  const tasks: readonly Task[] = [...seeded, ...added];\n  const openCount = tasks.filter((task) => !done.includes(task.id)).length;\n\n  // Each flow updates local state optimistically, then records the change through a tool call. If the\n  // call fails, revert the optimistic change and surface a failure message instead of a false success.\n  async function capture() {\n    const title = draft.trim();\n    if (title.length === 0) return;\n    const id = `added_${added.length}`;\n    setAdded((current) => [...current, { id, title, priority: 'medium', done: false }]);\n    setDraft('');\n    try {\n      const result = await addTask.callTool({ title, priority: 'medium' });\n      const structured = result.structuredContent as { readonly status?: string } | undefined;\n      setStatus(structured?.status ?? `Added “${title}”.`);\n    } catch {\n      setAdded((current) => current.filter((task) => task.id !== id));\n      setStatus(`Couldn't add “${title}” — try again.`);\n    }\n  }\n\n  async function reprioritize(task: Task, next: Priority) {\n    const prev = priority[task.id];\n    setPriority((current) => ({ ...current, [task.id]: next }));\n    try {\n      const result = await setPriorityTool.callTool({ task: task.id, priority: next });\n      const structured = result.structuredContent as { readonly status?: string } | undefined;\n      setStatus(structured?.status ?? `Set ${task.title} to ${next}.`);\n    } catch {\n      setPriority((current) => {\n        const restored = { ...current };\n        if (prev === undefined) delete restored[task.id];\n        else restored[task.id] = prev;\n        return restored;\n      });\n      setStatus(`Couldn't re-prioritize ${task.title} — try again.`);\n    }\n  }\n\n  async function complete(task: Task) {\n    setDone((current) => [...current, task.id]);\n    try {\n      const result = await completeTask.callTool({ task: task.id, title: task.title });\n      const structured = result.structuredContent as { readonly status?: string } | undefined;\n      setStatus(structured?.status ?? `Completed “${task.title}”.`);\n    } catch {\n      setDone((current) => current.filter((id) => id !== task.id));\n      setStatus(`Couldn't complete “${task.title}” — try again.`);\n    }\n  }\n\n  return (\n    <main\n      className={`nw-shell${theme === 'dark' ? ' dark' : ''}`}\n      data-llm={`Acme Tasks: ${openCount} open of ${tasks.length}; ${done.length} completed this session`}\n    >\n      <section className=\"nw-card\">\n        <header className=\"nw-header\">\n          <span className=\"nw-icon\" aria-hidden=\"true\">\n            <CheckIcon />\n          </span>\n          <div className=\"nw-title-block\">\n            <h1 className=\"nw-title\">Acme Tasks</h1>\n            <p className=\"nw-subtitle\" aria-live=\"polite\">\n              {status}\n            </p>\n          </div>\n          <span className=\"nw-chip\">\n            {displayMode === 'fullscreen' ? 'Fullscreen' : `${openCount} open`}\n          </span>\n        </header>\n\n        {/* Flow 1 — Capture */}\n        <div className=\"nw-capture\">\n          <input\n            className=\"nw-input\"\n            placeholder=\"Add a task…\"\n            value={draft}\n            onChange={(event) => setDraft(event.currentTarget.value)}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter') capture();\n            }}\n          />\n          <button\n            className=\"nw-button nw-button-primary\"\n            type=\"button\"\n            disabled={addTask.isPending}\n            onClick={capture}\n          >\n            Add\n          </button>\n        </div>\n\n        {/* Flow 2 — Prioritize, Flow 3 — Complete */}\n        <ul className=\"nw-list\">\n          {tasks.map((task) => {\n            const isDone = done.includes(task.id);\n            const level = priority[task.id] ?? task.priority;\n            return (\n              <li className={`nw-task${isDone ? ' nw-task-done' : ''}`} key={task.id}>\n                <button\n                  aria-label={isDone ? 'Completed' : 'Complete task'}\n                  className={`nw-check${isDone ? ' nw-check-on' : ''}`}\n                  type=\"button\"\n                  disabled={isDone}\n                  onClick={() => complete(task)}\n                >\n                  {isDone ? '✓' : ''}\n                </button>\n                <span className=\"nw-task-title\">{task.title}</span>\n                <select\n                  aria-label=\"Priority\"\n                  className={`nw-priority nw-priority-${level}`}\n                  value={level}\n                  disabled={isDone}\n                  onChange={(event) => reprioritize(task, event.currentTarget.value as Priority)}\n                >\n                  {PRIORITIES.map((entry) => (\n                    <option key={entry} value={entry}>\n                      {entry}\n                    </option>\n                  ))}\n                </select>\n              </li>\n            );\n          })}\n        </ul>\n        <p className=\"nw-note\">\n          Two-way in chat: read your list, capture, re-prioritize, and complete.\n        </p>\n      </section>\n    </main>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M4 12.5 9 17l11-11\" />\n    </svg>\n  );\n}\n" },
     { relPath: "examples/acme-tasks/src/views/widget-style.css", content: ":root {\n  color-scheme: light dark;\n  font-family:\n    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --nw-bg: #ffffff;\n  --nw-surface: #f7f5ff;\n  --nw-text: #1c1830;\n  --nw-muted: #635d80;\n  --nw-border: #e2ddf5;\n  --nw-accent: #7c3aed;\n  --nw-accent-strong: #6d28d9;\n  --nw-accent-soft: #efe9ff;\n  --nw-high: #dc2626;\n  --nw-medium: #b45309;\n  --nw-low: #2563eb;\n  --nw-radius: 10px;\n  --nw-shadow: 0 18px 50px rgb(30 20 60 / 12%);\n}\n\n.dark,\n[data-theme=\"dark\"] {\n  --nw-bg: #161228;\n  --nw-surface: #1d1735;\n  --nw-text: #f2eeff;\n  --nw-muted: #a99fce;\n  --nw-border: #342a54;\n  --nw-accent: #a78bfa;\n  --nw-accent-strong: #8b5cf6;\n  --nw-accent-soft: #2a2148;\n  --nw-high: #f87171;\n  --nw-medium: #fbbf24;\n  --nw-low: #60a5fa;\n  --nw-shadow: 0 18px 50px rgb(0 0 0 / 32%);\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n}\n\nbutton,\ninput,\nselect {\n  font: inherit;\n}\n\n.nw-shell {\n  min-height: 100vh;\n  padding: 14px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n}\n\n.nw-card {\n  max-width: 620px;\n  margin: 0 auto;\n  background: var(--nw-surface);\n  border: 1px solid var(--nw-border);\n  border-radius: var(--nw-radius);\n  box-shadow: var(--nw-shadow);\n  overflow: hidden;\n}\n\n.nw-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  border-bottom: 1px solid var(--nw-border);\n}\n\n.nw-icon svg {\n  width: 24px;\n  height: 24px;\n  fill: none;\n  stroke: var(--nw-accent);\n  stroke-width: 2;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.nw-title-block {\n  flex: 1;\n  min-width: 0;\n}\n\n.nw-title {\n  margin: 0;\n  font-size: 17px;\n  font-weight: 700;\n}\n\n.nw-subtitle {\n  margin: 2px 0 0;\n  font-size: 13px;\n  color: var(--nw-muted);\n}\n\n.nw-chip {\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: var(--nw-accent-soft);\n  color: var(--nw-accent-strong);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.nw-capture {\n  display: flex;\n  gap: 8px;\n  padding: 14px 16px 4px;\n}\n\n.nw-input {\n  flex: 1;\n  padding: 9px 12px;\n  border: 1px solid var(--nw-border);\n  border-radius: 10px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n}\n\n.nw-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 9px 14px;\n  border: 1px solid var(--nw-border);\n  border-radius: 10px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n  cursor: pointer;\n}\n\n.nw-button-primary {\n  background: var(--nw-accent);\n  border-color: var(--nw-accent);\n  color: #ffffff;\n  font-weight: 600;\n}\n\n.nw-button-primary:disabled {\n  opacity: 0.6;\n  cursor: default;\n}\n\n.nw-list {\n  list-style: none;\n  margin: 0;\n  padding: 8px 16px 4px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.nw-task {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  border: 1px solid var(--nw-border);\n  border-radius: 12px;\n  background: var(--nw-bg);\n}\n\n.nw-task-title {\n  flex: 1;\n  min-width: 0;\n}\n\n.nw-task-done {\n  opacity: 0.55;\n}\n\n.nw-task-done .nw-task-title {\n  text-decoration: line-through;\n}\n\n.nw-check {\n  width: 22px;\n  height: 22px;\n  border: 1.5px solid var(--nw-border);\n  border-radius: 999px;\n  background: transparent;\n  color: #ffffff;\n  cursor: pointer;\n  flex: none;\n}\n\n.nw-check-on {\n  background: var(--nw-accent);\n  border-color: var(--nw-accent);\n}\n\n.nw-priority {\n  padding: 5px 8px;\n  border: 1px solid var(--nw-border);\n  border-radius: 8px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.nw-priority-high {\n  color: var(--nw-high);\n}\n\n.nw-priority-medium {\n  color: var(--nw-medium);\n}\n\n.nw-priority-low {\n  color: var(--nw-low);\n}\n\n.nw-note {\n  margin: 0;\n  padding: 8px 16px 16px;\n  font-size: 12px;\n  color: var(--nw-muted);\n}\n" },
-    { relPath: "examples/acme-tasks/test/server.test.ts", content: "import { describe, expect, it } from 'vitest';\nimport app from '../src/server.js';\n\ndescribe('acme-tasks example', () => {\n  it('exports a Noodle server definition', () => {\n    expect(typeof app.toManifest).toBe('function');\n  });\n\n  it('exposes a tool for each of the top-3 prioritized flows', async () => {\n    // Capture → add_task, Prioritize → list_today (+ set_priority helper), Complete → complete_task.\n    const text = JSON.stringify(await app.toManifest());\n    expect(text).toContain('add_task');\n    expect(text).toContain('list_today');\n    expect(text).toContain('complete_task');\n    expect(text).toContain('set_priority');\n  });\n\n  it('seeds today’s list highest-priority first', async () => {\n    const text = JSON.stringify(await app.toManifest());\n    expect(text).toMatch(/\"tasks\":\\[\\{\"id\":\"email_vendor\".*\"priority\":\"high\"/);\n  });\n});\n" },
+    { relPath: "examples/acme-tasks/test/server.test.ts", content: "import { describe, expect, it } from 'vitest';\nimport app from '../src/server.js';\n\ndescribe('acme-tasks example', () => {\n  it('exports a Noodle server definition', () => {\n    expect(typeof app.toManifest).toBe('function');\n  });\n\n  it('exposes a tool for each of the top-3 prioritized flows', async () => {\n    // Capture → add_task, Prioritize → list_today (+ set_priority helper), Complete → complete_task.\n    const text = JSON.stringify(await app.toManifest());\n    expect(text).toContain('add_task');\n    expect(text).toContain('list_today');\n    expect(text).toContain('complete_task');\n    expect(text).toContain('set_priority');\n  });\n\n  it('seeds today’s list highest-priority first', async () => {\n    const text = JSON.stringify(await app.toManifest());\n    expect(text).toMatch(/\"tasks\":\\[\\{\"id\":\"email_vendor\".*\"priority\":\"high\"/);\n  });\n\n  it('opts the conversational completion action into runtime confirmation', async () => {\n    const manifest = await app.toManifest();\n    const completeTask = manifest.tools.find((candidate) => candidate.name === 'complete_task');\n    const addTask = manifest.tools.find((candidate) => candidate.name === 'add_task');\n\n    expect(completeTask?.annotations?.confirm).toBe(true);\n    expect(addTask?.annotations).not.toHaveProperty('confirm');\n  });\n});\n" },
     { relPath: "examples/acme-tasks/vitest.config.ts", content: "import { defineConfig } from 'vitest/config';\n\n// Local config so `npm test` (vitest run) discovers this example's own tests instead of inheriting a\n// parent monorepo config's include globs.\nexport default defineConfig({\n  test: { include: ['test/**/*.test.ts'] },\n});\n" },
     { relPath: "examples/customer-auth/README.md", content: "# Customer Auth - NoodleSeed.com Firebase customer identity\n\nThis curated example owns the customer/end-user authentication with Firebase bridge capability slot. It is\nthe NoodleSeed.com dogfood app for proving that a SaaS app can protect an MCP endpoint with its own customer\nidentity provider while still using the generic Noodle Seed authoring API.\n\nIt also owns the embedded-assistant showcase: the same authenticated MCP surface can be dropped into the\nSaaS web application as a fully customer-branded assistant with independent light and dark themes. The\nassistant loads the active deployment's instructions and model-visible tools rather than installing a stale\nsecond skill bundle. Interactive MCP Apps widgets continue to render in supported external hosts; the\ninitial embedded surface renders text and native tool confirmations.\n\nThe public developer entrypoint is [`src/server.ts`](src/server.ts). It declares `customerAuth.firebase(...)` with\nthe NoodleSeed.com Firebase project and Firebase Web App public config. It exposes a deliberately small MCP\nsurface for org discovery:\n\n- `list_my_organizations` lists the NoodleSeed.com organizations the signed-in customer belongs to (no\n  arguments — the org set comes from the verified customer session).\n- `list_org_apps` lists apps for one of those organizations through the dev app API.\n\nThe two tools chain: `list_my_organizations` surfaces the `org_id`s the customer can act on, and\n`list_org_apps` takes one of those `org_id`s. There is no NoodleSeed-specific SDK helper. The downstream API\nis an ordinary authored HTTP connector.\n\nDuring MCP OAuth login, Noodle Cloud hosts the Firebase bridge page at\n`https://cloud.noodleseed.dev/oauth/customer/firebase/authorize`. The customer app does not add an\nauthorization route. The SaaS operator only configures Firebase Auth to allow the Noodle Cloud origin, and\nNoodle Cloud signs the customer in with Firebase before posting the Firebase ID token back to its own bridge\ncallback.\n\n## How delegated customer credentials are used\n\nThe example has two declarations that work together:\n\n```ts\nauth: customerAuth.firebase({\n  projectId: variable('FIREBASE_PROJECT_ID'),\n  apiKey: variable('FIREBASE_WEB_API_KEY'),\n  authDomain: variable('FIREBASE_AUTH_DOMAIN'),\n  user: {\n    id: 'sub',\n    email: 'email',\n    name: 'name',\n    tenant: 'firebase.tenant',\n    orgs: 'claims.orgs',\n    roles: 'claims.roles',\n  },\n}),\n```\n\nThat protects the MCP endpoint with the SaaS customer's Firebase identity. The connector then opts into\ndelegated customer credentials:\n\n```ts\nauth: {\n  kind: 'delegatedSessionCookie',\n  provider: 'firebase',\n  sessionUrl: `${noodleseedApiOrigin}/api/auth/session`,\n  tokenField: 'idToken',\n},\n```\n\nTool code calls the connector normally:\n\n```ts\nfulfil({ input, connectors }) {\n  const apps = connectors.app_api.listOrgApps({\n    org_id: input.org_id,\n    skip: input.skip,\n    limit: input.limit,\n  });\n\n  return { result: apps.result };\n}\n```\n\nAt runtime, Noodle Seed verifies the Firebase customer during MCP OAuth, stores that customer's delegated\nFirebase refresh token in the credential broker, and refreshes a short-lived Firebase ID token only when a\nconnector-backed tool calls the NoodleSeed.com API. For this app API, the broker exchanges that ID token at\nthe existing Next.js `/api/auth/session` route and sends the resulting session cookie to the API. The MCP\naccess token remains a Noodle-issued resource-bound token and is never sent to the downstream API.\n\n## Delegated downstream auth for your own API (token exchange)\n\nThe Firebase path above only works for Firebase-session downstreams. When the downstream is **your own\nAPI** with its own token issuance, use `delegatedTokenExchange` instead\n([ADR 0152](../../docs/decisions/0152-delegated-token-exchange-connector-auth.md)): the platform signs a\nshort-lived, JWKS-verifiable assertion of the signed-in user and exchanges it (RFC 8693) at a token\nendpoint you implement, which mints your own user-scoped token — so your API enforces its own per-user\nauthorization on every call. It works for identities from `customerAuth.bridge(...)` and from embedded\nassistant sessions, with no per-user OAuth enrollment.\n\n```ts\nauth: {\n  kind: 'delegatedTokenExchange',\n  tokenUrl: 'https://app.example.com/api/assistant/oauth/token', // origin must be in allowedOrigins\n  clientId: variable('EXAMPLE_DELEG_CLIENT_ID'),\n  clientSecret: secret('EXAMPLE_DELEG_CLIENT_SECRET'),\n  scopes: ['time_off'],\n},\n```\n\nYour endpoint authenticates the broker's client credential, verifies the `subject_token` JWT against the\nplatform issuer JWKS (claims include the verified `sub`, `email`, `name`, declared session `claims`,\n`tenant`, and `deployment`), mints a short-lived user-scoped token, and returns the standard\n`{ access_token, token_type, expires_in }` response. The exact wire contract and a copyable endpoint\nimplementation live in [docs/spec/connectors.md](../../docs/spec/connectors.md) and the Agent Kit\nauthoring-workflow reference (\"Delegated downstream auth\"). `noodle auth doctor` reports each declared\nexchange endpoint.\n\n## Validate\n\n```bash\nnoodle auth doctor examples/customer-auth/src/server.ts\nnoodle validate examples/customer-auth/src/server.ts\n```\n\n## Run locally\n\n```bash\nnoodle dev examples/customer-auth/src/server.ts --app noodleseed-customer-auth\n```\n\n## Configuration\n\nThe embedded assistant uses a customer-supplied OpenAI Chat Completions-compatible endpoint. Configure its\nmanaged values at the Noodle deployment environment; none of these values belongs in the customer web\napplication environment, and the API key never reaches the browser:\n\n```bash\nnoodle variables set ASSISTANT_MODEL_BASE_URL https://model.example.com/v1 --scope env\nnoodle variables set ASSISTANT_MODEL your-model --scope env\nnoodle secrets set ASSISTANT_MODEL_API_KEY --scope env\nnoodle variables set FIREBASE_PROJECT_ID your-firebase-project --scope env\nnoodle variables set FIREBASE_WEB_API_KEY your-firebase-web-api-key --scope env\nnoodle variables set FIREBASE_AUTH_DOMAIN your-firebase-project.firebaseapp.com --scope env\nnoodle check --target embedded-assistant src/server.ts\n```\n\nAssistant origins are exact and HTTPS-only. A local embedding application must serve itself over HTTPS and\ndeclare an origin such as `https://localhost:3000`; `noodle dev` does not provide TLS for that separate web\napplication.\n\nCreate the backend credential after deployment. The CLI writes it to a mode-0600 file and never prints the\nsecret:\n\n```bash\nnoodle assistant clients create --name web --org noodleseed --app customer-auth --env prod\n```\n\nOnly the Noodle service URL, assistant client ID, and assistant client secret belong in the authenticated\ncustomer backend. The model URL, model name, and model API key remain managed by the Noodle deployment.\n\nThe customer's authenticated backend calls `createAssistantSession(...)` from\n`@noodleseed/assistant/server`, passing the already-verified user and browser origin. The browser then uses\nthe returned short-lived session through the Web Component or React wrapper:\n\n```bash\npnpm add @noodleseed/assistant\n```\n\n```tsx\nimport { NoodleAssistant } from '@noodleseed/assistant/react';\n\n<NoodleAssistant\n  sessionEndpoint=\"/api/noodle-assistant/session\"\n  theme=\"auto\"\n  onSessionExpired={() => console.info('Assistant session renewed')}\n/>;\n```\n\n`theme=\"auto\"` follows the SaaS application. The server-level `branding` block is inherited by both MCP App\nwidgets and the assistant; documented `--ns-assistant-*` semantic CSS variables remain the final integration\nescape hatch. There is no second assistant branding declaration.\nThe end-user UI contains only customer branding.\nText streams progressively. Expired turns re-exchange through the authenticated backend and retry once;\nconsent-bound tool confirmations never replay automatically.\n\nThe Firebase project ID is required because Firebase ID tokens use the project ID as the token audience and\nissuer suffix. The runtime verifies `aud` against the project ID and `iss` against\n`https://securetoken.google.com/<projectId>`.\n\nThe Firebase Web API key and auth domain are public Firebase browser configuration. They let the Noodle\nCloud-hosted bridge initialize Firebase Auth for this customer project; they are not server secrets. Keep\nthem out of source with `variable(...)`, restrict the Firebase key to the expected browser origins and APIs,\nand use `secret(...)` only for credentials that must never reach a browser.\n\nThe `noodleseed_app_api` connector currently points at the NoodleSeed.com dev app surface:\n\n```text\nhttps://dev.noodleseed.com\n```\n\nWhen the customer app moves from `dev.noodleseed.com` to `app.noodleseed.com`, update the connector's\n`noodleseedApiOrigin` constant to the production API origin that serves the same paths.\n\nThe connector uses delegated Firebase customer credentials. During the customer OAuth bridge, Noodle Seed\nverifies the Firebase ID token, stores the Firebase refresh token through the credential broker, and refreshes\na Firebase ID token when the connector calls the NoodleSeed.com app API. The broker then exchanges that ID\ntoken for the app's existing Next.js session cookie. There is no shared `NOODLESEED_APP_API_TOKEN` for this\nexample.\n\nFirebase Auth must list `cloud.noodleseed.dev` as an authorized domain before browser sign-in works in\nproduction.\n\n## Deploy customer-protected to Noodle Seed Cloud\n\n```bash\nnoodle deploy examples/customer-auth/src/server.ts \\\n  --org noodleseed \\\n  --app customer-auth \\\n  --env prod \\\n  --access customers\n```\n\nEndpoint:\n\n```text\nhttps://cloud.noodleseed.dev/o/noodleseed/customer-auth/mcp\n```\n\n## MCP Primitives\n\n- Tool `list_my_organizations`: calls `GET /api/organizations` and returns the organizations the signed-in\n  customer is a member of. Takes no arguments; the org set is scoped by the verified customer session.\n- Tool `list_org_apps`: calls `GET /api/organizations/{org_id}/apps` for one organization `org_id`.\n\n## Auth boundary\n\nFirebase ID-token verification is handled by Noodle Seed's generic Firebase bridge adapter during OAuth\nissuance. The MCP client receives a Noodle-issued, resource-bound access token marked as a Firebase customer\nidentity; raw Firebase tokens and inbound MCP bearer tokens are never forwarded to tools, connectors,\nwidgets, or downstream systems.\n\nThe connector-backed tools use the credential broker to turn the signed-in Firebase customer session into the\nsame session-cookie credential that the existing NoodleSeed.com Next.js API already expects. The inbound MCP\nbearer token is never used as an app API credential.\n" },
     { relPath: "examples/customer-auth/noodle.json", content: "{\n  \"entrypoint\": \"src/server.ts\",\n  \"name\": \"customer-auth\"\n}\n" },
     { relPath: "examples/customer-auth/package.json", content: "{\n  \"name\": \"customer-auth\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"test\": \"vitest run\",\n    \"validate\": \"noodle validate\",\n    \"dev\": \"noodle dev\",\n    \"deploy\": \"noodle deploy\"\n  },\n  \"devDependencies\": {\n    \"@noodleseed/one\": \"latest\",\n    \"vitest\": \"latest\"\n  }\n}\n" },
     { relPath: "examples/customer-auth/src/server.ts", content: "import {\n  annotations,\n  connector,\n  customerAuth,\n  embeddedAssistant,\n  openAICompatible,\n  secret,\n  server,\n  tool,\n  variable,\n  z,\n} from '@noodleseed/one';\n\nconst noodleseedApiOrigin = 'https://dev.noodleseed.com';\n\nconst noodleseedApi = connector('noodleseed_app_api')\n  .version('1.0.0')\n  .http({\n    baseUrl: noodleseedApiOrigin,\n    allowedOrigins: [noodleseedApiOrigin],\n    auth: {\n      kind: 'delegatedSessionCookie',\n      provider: 'firebase',\n      sessionUrl: `${noodleseedApiOrigin}/api/auth/session`,\n      tokenField: 'idToken',\n    },\n    operations: {\n      list_org_apps: {\n        type: 'read',\n        method: 'GET',\n        path: '/api/organizations/${args.org_id}/apps',\n        query: ['skip', 'limit'],\n        input: z.object({\n          org_id: z.string(),\n          skip: z.number().optional(),\n          limit: z.number().optional(),\n        }),\n        output: z.object({ result: z.unknown().optional() }),\n        response: {\n          result: '${response}',\n        },\n      },\n      list_organizations: {\n        type: 'read',\n        method: 'GET',\n        path: '/api/organizations',\n        output: z.object({ organizations: z.array(z.unknown()).optional() }),\n        response: {\n          organizations: '${response.organizations}',\n        },\n      },\n    },\n  });\n\nexport default server(\n  'noodleseed_customer_auth',\n  {\n    title: 'NoodleSeed.com Customer Auth',\n    version: '1.0.0',\n    branding: {\n      name: 'Noodle Seed Assistant',\n      accent: '#E85D24',\n      surface: '#FFFFFF',\n      surfaceDark: '#171310',\n      colorScheme: 'auto',\n      theme: {\n        light: { accentText: '#FFFFFF', text: '#1C1714' },\n        dark: { accent: '#FF8A4C', accentText: '#1C100A', text: '#FFF8F2' },\n      },\n    },\n    use: { app_api: noodleseedApi },\n    auth: customerAuth.firebase({\n      projectId: variable('FIREBASE_PROJECT_ID'),\n      apiKey: variable('FIREBASE_WEB_API_KEY'),\n      authDomain: variable('FIREBASE_AUTH_DOMAIN'),\n      user: {\n        id: 'sub',\n        email: 'email',\n        name: 'name',\n        tenant: 'firebase.tenant',\n        orgs: 'claims.orgs',\n        roles: 'claims.roles',\n      },\n    }),\n    instructions:\n      'Customer-authenticated demo. Firebase proves the customer identity, while read-only NoodleSeed.com API calls use broker-managed delegated Firebase customer credentials.',\n    assistant: embeddedAssistant({\n      model: openAICompatible({\n        baseUrl: variable('ASSISTANT_MODEL_BASE_URL'),\n        model: variable('ASSISTANT_MODEL'),\n        apiKey: secret('ASSISTANT_MODEL_API_KEY'),\n      }),\n      // Production origins are exact HTTPS; http://localhost:<port> is allowed for local development.\n      allowedOrigins: [\n        'https://app.noodleseed.com',\n        'https://dev.noodleseed.com',\n        'http://localhost:3000',\n      ],\n      layout: { mode: 'floating', position: 'bottom-right', panelWidth: 420 },\n      labels: {\n        welcomeHeading: 'How can I help with Noodle Seed?',\n        composerPlaceholder: 'Ask about your apps…',\n      },\n      suggestedPrompts: ['Show my organizations', 'List the apps in my organization'],\n    }),\n  },\n  [\n    tool('list_org_apps', {\n      description: 'List NoodleSeed.com apps for an organization from the dev app API.',\n      input: z.object({\n        org_id: z.string(),\n        skip: z.number().int().min(0).optional(),\n        limit: z.number().int().min(1).max(100).optional(),\n      }),\n      output: z.object({\n        result: z.unknown(),\n      }),\n      annotations: annotations.readOnly(),\n      fulfil({ input, connectors }) {\n        const apps = connectors.app_api.listOrgApps({\n          org_id: input.org_id,\n          skip: input.skip,\n          limit: input.limit,\n        });\n        return {\n          result: apps.result,\n        };\n      },\n    }),\n    tool('list_my_organizations', {\n      description: 'List the NoodleSeed.com organizations the signed-in customer belongs to.',\n      input: z.object({}),\n      output: z.object({\n        organizations: z.array(z.unknown()),\n      }),\n      annotations: annotations.readOnly(),\n      fulfil({ connectors }) {\n        const organizations = connectors.app_api.listOrganizations();\n        return {\n          organizations: organizations.organizations,\n        };\n      },\n    }),\n  ],\n);\n" },
     { relPath: "examples/customer-auth/test/server.test.ts", content: "import { describe, expect, it } from 'vitest';\nimport app from '../src/server.js';\n\ndescribe('customer-auth example', () => {\n  it('exports a customer-authenticated, customer-branded embedded assistant', async () => {\n    expect(typeof app.toManifest).toBe('function');\n    const manifest = await app.toManifest();\n    expect(manifest.server.assistant).toMatchObject({\n      model: { kind: 'openai-compatible', apiKey: 'ASSISTANT_MODEL_API_KEY' },\n      layout: { mode: 'floating' },\n    });\n    expect(\n      manifest.server.assistant?.allowedOrigins.every((origin) => origin.startsWith('https://')),\n    ).toBe(true);\n    expect(manifest.server.branding).toMatchObject({\n      name: 'Noodle Seed Assistant',\n      colorScheme: 'auto',\n    });\n    expect(manifest.server.auth).toMatchObject({\n      projectId: '${env.FIREBASE_PROJECT_ID}',\n      apiKey: '${env.FIREBASE_WEB_API_KEY}',\n      authDomain: '${env.FIREBASE_AUTH_DOMAIN}',\n    });\n  });\n});\n" },
-    { relPath: "examples/food-ordering/README.md", content: "# Food Ordering\n\n**Owns:** The flagship consumer ordering MCP App example: React view authoring, app-only helper tools,\ncaller-scoped cart state handles, packaged image assets, checkout handoff policy, host actions,\nCSP/permissions metadata, and widget preview coverage.\n\nFood Ordering is a generic, synthetic version of a live marketplace ordering app. It lets a user search\nstores, browse menus, customize an item, build a multi-line cart, review the order, and hand off checkout to\nan allowlisted example domain. It does not use real restaurant APIs, real checkout, customer credentials, or\nprivate customer data.\n\n## What It Shows\n\n| Capability | Example |\n| :--- | :--- |\n| Public entry tool | `open_ordering` returns structured fallback content and renders the React widget |\n| App-only helper tools | `search_stores`, `load_menu`, `load_item`, `read_cart`, `sync_cart`, `prepare_checkout` |\n| Durable cart state | `server(..., { state: { handles: { cart } }, use: { state } })` with caller scope and revision checks |\n| React app runtime kit | `@noodleseed/one/react` supplies app flow, shell/nav/view, async state, form, quantity, choice, and handoff primitives |\n| Multi-step widget flow | One React shell navigates stores, menu, item customization, cart, review, and handoff views through `useAppFlow` |\n| Handoff | `handoff.allowedDomains` allows only `https://orders.example.com` checkout URLs |\n| Progressive enhancement | Non-Apps hosts still receive stores, featured items, and a readable fallback summary |\n\nThe example is intentionally richer than the generated starter, but each inline view still follows the\nsame default: one immediate purpose, one primary action, at most one subordinate action, and progressive\ndisclosure for the rest. Preview it at 280px before adding navigation or local CSS; loading, empty, stale,\nerror/retry, and success states must remain readable without nested vertical scrolling.\n\nLike the comprehensive default `noodle init my-app` scaffold, this flagship keeps the server feature-rich\nwhile making each individual widget view focused; server capability breadth and screen density are separate.\n\n## Local Author Loop\n\n```sh\nnoodle validate\nnoodle test\nnoodle dev\n```\n\nIn another terminal:\n\n```sh\nnoodle tools list\nnoodle tools call open_ordering --args '{\"customer\":\"Asha\",\"query\":\"noodles\"}'\nnoodle tools call summarize_ordering_options --args '{}'\n```\n\nFor Apps metadata conformance, start `noodle dev`, copy the loopback MCP endpoint, then run:\n\n```sh\nnpx @mcpjam/cli@latest apps conformance --url http://127.0.0.1:<port>/o/demo/food-ordering/mcp --quiet --format json\n```\n\n## Client Setup\n\nUse the CLI to print the exact setup flow for your MCP client:\n\n```sh\nnoodle connect claude\nnoodle connect chatgpt\nnoodle connect inspector\n```\n\n## Deploy\n\n```sh\nnoodle link --org demo --app food-ordering\nnoodle deploy --access owner-only\nnoodle open\n```\n\nUse `--access org-members` for an org-wide internal demo. This example has no connector secrets and does not\ninclude tokens, caller-key mechanisms, or `.env.noodle` values.\n\n## Demo Assets\n\nThe packaged demo images live under `assets/` and are public web assets when deployed. The current app uses\n`assets/noodle-bowl.jpg` as the server branding image.\n\nImage sources:\n\n- `assets/noodle-bowl.jpg` — Unsplash photo\n  [`IRv8V9Hb8gI`](https://unsplash.com/photos/IRv8V9Hb8gI), downloaded from Unsplash.\n- `assets/lentil-soup.jpg` — Unsplash image\n  [`photo-1510431198580-7727c9fa1e3a`](https://images.unsplash.com/photo-1510431198580-7727c9fa1e3a), downloaded from Unsplash.\n- `assets/mint-lemonade.jpg` — Unsplash photo\n  [`X7Nx327NtuA`](https://unsplash.com/photos/X7Nx327NtuA) by Imad 786.\n\nUnsplash photos are free to use under the [Unsplash License](https://unsplash.com/license); attribution is\nnot required, but source notes are kept here for provenance.\n" },
+    { relPath: "examples/food-ordering/README.md", content: "# Food Ordering\n\n**Owns:** The flagship consumer ordering MCP App example: React view authoring, app-only helper tools,\ncaller-scoped cart state handles, invocation context, model-visible widget state/lifecycle, packaged image\nassets, portable structured elicitation, checkout handoff policy, host actions, CSP/permissions metadata,\nand widget preview coverage.\n\nFood Ordering is a generic, synthetic version of a live marketplace ordering app. It lets a user search\nstores, browse menus, customize an item, build a multi-line cart, review the order, and hand off checkout to\nan allowlisted example domain. It does not use real restaurant APIs, real checkout, customer credentials, or\nprivate customer data.\n\n## What It Shows\n\n| Capability | Example |\n| :--- | :--- |\n| Public entry tool | `open_ordering` returns structured fallback content and renders the React widget |\n| App-only helper tools | `search_stores`, `load_menu`, `load_item`, `read_cart`, `sync_cart`, `prepare_checkout`; mutating widget-owned helpers use `confirm: false` (equivalent to omission) and execute directly because action hints alone never gate |\n| Durable cart state | `server(..., { state: { handles: { cart } }, use: { state } })` with caller scope and revision checks |\n| React app runtime kit | `@noodleseed/one/react` supplies app flow, shell/nav/view, async state, form, quantity, choice, and handoff primitives |\n| Multi-step widget flow | One React shell navigates stores, menu, item customization, cart, review, and handoff views through `useAppFlow` |\n| Invocation context | `server.context` sets locale/time-zone defaults, derives an ambient service area/date, and makes the same snapshot available to tools and the reserved `noodle_context` MCP adapter |\n| Structured missing input | `plan_order` uses `ctx.elicit` to collect a fulfilment method and date in embedded/headless renderers and bidirectional MCP adapters; the stateless hosted MCP endpoint does not yet carry the server-initiated exchange |\n| 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 |\n| Handoff | `handoff.allowedDomains` allows only `https://orders.example.com` checkout URLs |\n| Progressive enhancement | Non-Apps hosts still receive stores, featured items, and a readable fallback summary |\n\nThe example is intentionally richer than the generated starter, but each inline view still follows the\nsame default: one immediate purpose, one primary action, at most one subordinate action, and progressive\ndisclosure for the rest. Preview it at 280px before adding navigation or local CSS; loading, empty, stale,\nerror/retry, and success states must remain readable without nested vertical scrolling.\n\nLike the comprehensive default `noodle init my-app` scaffold, this flagship keeps the server feature-rich\nwhile making each individual widget view focused; server capability breadth and screen density are separate.\n\n## Local Author Loop\n\n```sh\nnoodle validate\nnoodle test\nnoodle dev\n```\n\nIn another terminal:\n\n```sh\nnoodle tools list\nnoodle tools call open_ordering --args '{\"customer\":\"Asha\",\"query\":\"noodles\"}'\nnoodle tools call summarize_ordering_options --args '{}'\n```\n\nFor Apps metadata conformance, start `noodle dev`, copy the loopback MCP endpoint, then run:\n\n```sh\nnpx @mcpjam/cli@latest apps conformance --url http://127.0.0.1:<port>/o/demo/food-ordering/mcp --quiet --format json\n```\n\n## Client Setup\n\nUse the CLI to print the exact setup flow for your MCP client:\n\n```sh\nnoodle connect claude\nnoodle connect chatgpt\nnoodle connect inspector\n```\n\n## Deploy\n\n```sh\nnoodle link --org demo --app food-ordering\nnoodle deploy --access owner-only\nnoodle open\n```\n\nUse `--access org-members` for an org-wide internal demo. This example has no connector secrets and does not\ninclude tokens, caller-key mechanisms, or `.env.noodle` values.\n\n## Demo Assets\n\nThe packaged demo images live under `assets/` and are public web assets when deployed. The current app uses\n`assets/noodle-bowl.jpg` as the server branding image.\n\nImage sources:\n\n- `assets/noodle-bowl.jpg` — Unsplash photo\n  [`IRv8V9Hb8gI`](https://unsplash.com/photos/IRv8V9Hb8gI), downloaded from Unsplash.\n- `assets/lentil-soup.jpg` — Unsplash image\n  [`photo-1510431198580-7727c9fa1e3a`](https://images.unsplash.com/photo-1510431198580-7727c9fa1e3a), downloaded from Unsplash.\n- `assets/mint-lemonade.jpg` — Unsplash photo\n  [`X7Nx327NtuA`](https://unsplash.com/photos/X7Nx327NtuA) by Imad 786.\n\nUnsplash photos are free to use under the [Unsplash License](https://unsplash.com/license); attribution is\nnot required, but source notes are kept here for provenance.\n" },
     { relPath: "examples/food-ordering/noodle.json", content: "{\n  \"entrypoint\": \"src/server.ts\",\n  \"name\": \"food-ordering\",\n  \"template\": \"widget\"\n}\n" },
     { relPath: "examples/food-ordering/package.json", content: "{\n  \"name\": \"food-ordering\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"test\": \"vitest run test/server.test.ts\",\n    \"validate\": \"noodle validate\",\n    \"dev\": \"noodle dev\",\n    \"deploy\": \"noodle deploy\"\n  },\n  \"devDependencies\": {\n    \"@vitejs/plugin-react\": \"latest\",\n    \"@noodleseed/one\": \"latest\",\n    \"@types/react\": \"latest\",\n    \"@types/react-dom\": \"latest\",\n    \"react\": \"latest\",\n    \"react-dom\": \"latest\",\n    \"vite\": \"latest\",\n    \"vitest\": \"latest\"\n  }\n}\n" },
-    { relPath: "examples/food-ordering/src/helpers.ts", content: "import type { ServerDefinition } from '@noodleseed/one';\n\nexport {\n  ActionBar,\n  AppShell,\n  AsyncBoundary,\n  ChoiceGroup,\n  createViewStore,\n  DataCard,\n  DataList,\n  Field,\n  HandoffButton,\n  QuantityStepper,\n  ShellNav,\n  StatusBadge,\n  SubmitButton,\n  View,\n  ViewStack,\n} from '@noodleseed/one/react';\n\nimport { generateHelpers } from '@noodleseed/one/react';\n\nexport type AppType = ServerDefinition;\n\nexport const {\n  useCallTool,\n  useAppFlow,\n  useHandoff,\n  useLayout,\n  useOpenExternal,\n  useSendFollowUpMessage,\n  useToolInfo,\n  useViewState,\n} = generateHelpers<AppType>();\n" },
-    { relPath: "examples/food-ordering/src/server.ts", content: "import { annotations, asset, connector, resource, server, tool, z } from '@noodleseed/one';\n\nconst heroImage = asset('assets/noodle-bowl.jpg');\n\nconst state = connector('noodle_state')\n  .version('1.0.0')\n  .operation('read_state', {\n    type: 'read',\n    input: z.object({\n      handle: z.string(),\n      key: z.string().optional(),\n    }),\n    output: z.object({\n      value: z.record(z.string(), z.unknown()),\n      revision: z.number().int(),\n      status: z.string(),\n    }),\n  })\n  .operation('patch_state', {\n    type: 'action',\n    input: z.object({\n      handle: z.string(),\n      expectedRevision: z.number().int(),\n      value: z.record(z.string(), z.unknown()),\n    }),\n    output: z.object({\n      value: z.record(z.string(), z.unknown()),\n      revision: z.number().int(),\n      status: z.string(),\n    }),\n  });\n\nconst stores = [\n  {\n    id: 'harbor-noodles',\n    name: 'Harbor Noodles',\n    cuisine: 'Noodles',\n    address: '18 Pier Lane',\n    open: true,\n    etaMinutes: 24,\n    rating: 4.8,\n  },\n  {\n    id: 'garden-wraps',\n    name: 'Garden Wraps',\n    cuisine: 'Vegetarian',\n    address: '44 Market Street',\n    open: true,\n    etaMinutes: 18,\n    rating: 4.6,\n  },\n  {\n    id: 'midnight-tacos',\n    name: 'Midnight Tacos',\n    cuisine: 'Mexican',\n    address: '7 Station Road',\n    open: false,\n    etaMinutes: 35,\n    rating: 4.7,\n  },\n] as const;\n\nconst menu = [\n  {\n    id: 'spicy_miso',\n    storeId: 'harbor-noodles',\n    category: 'Bowls',\n    name: 'Spicy Miso Bowl',\n    price: 16,\n    description: 'Miso broth, wheat noodles, chili crisp, egg, and greens.',\n    modifiers: ['extra_noodles', 'soft_egg', 'chili_crisp'],\n  },\n  {\n    id: 'ginger_tofu',\n    storeId: 'harbor-noodles',\n    category: 'Bowls',\n    name: 'Ginger Tofu Bowl',\n    price: 15,\n    description: 'Tofu, ginger broth, mushrooms, and scallions.',\n    modifiers: ['extra_tofu', 'brown_rice', 'no_mushroom'],\n  },\n  {\n    id: 'green_falafel',\n    storeId: 'garden-wraps',\n    category: 'Wraps',\n    name: 'Green Falafel Wrap',\n    price: 13,\n    description: 'Falafel, herbs, pickles, tahini, and crisp vegetables.',\n    modifiers: ['extra_tahini', 'add_fries', 'gluten_free_wrap'],\n  },\n  {\n    id: 'sweet_potato',\n    storeId: 'garden-wraps',\n    category: 'Plates',\n    name: 'Sweet Potato Plate',\n    price: 14,\n    description: 'Roasted sweet potato, grains, greens, and lemon yogurt.',\n    modifiers: ['vegan_yogurt', 'extra_greens', 'hot_sauce'],\n  },\n] as const;\n\nconst cartLine = z.object({\n  itemId: z.string(),\n  quantity: z.number().int().min(1),\n  modifiers: z.array(z.string()).default([]),\n  note: z.string().optional(),\n});\n\nconst cartInput = z.object({\n  selectedStoreId: z.string().optional(),\n  lines: z.array(cartLine).default([]),\n  customer: z.string().default('Guest'),\n  notes: z.string().optional(),\n  subtotal: z.number().default(0),\n  expectedRevision: z.number().int().min(0).default(0),\n});\n\nconst storeShape = z.object({\n  id: z.string(),\n  name: z.string(),\n  cuisine: z.string(),\n  address: z.string(),\n  open: z.boolean(),\n  etaMinutes: z.number(),\n  rating: z.number(),\n});\n\nconst menuItemShape = z.object({\n  id: z.string(),\n  storeId: z.string(),\n  category: z.string(),\n  name: z.string(),\n  price: z.number(),\n  description: z.string(),\n  modifiers: z.array(z.string()),\n});\n\nconst cartOutput = z.object({\n  selectedStoreId: z.string().optional(),\n  lines: z.array(cartLine),\n  customer: z.string(),\n  notes: z.string().optional(),\n  subtotal: z.number(),\n  status: z.enum(['draft', 'review', 'handoff']),\n  checkoutUrl: z.string().optional(),\n});\n\nconst cartStateSchema = z.object({\n  selectedStoreId: z.string().optional(),\n  lines: z.array(cartLine),\n  customer: z.string(),\n  notes: z.string().optional(),\n  subtotal: z.number(),\n  // `.default()`/`.optional()` state fields are optional on write: a cart save that omits\n  // `status` still validates, and a fresh cart starts in `draft`.\n  status: z.enum(['draft', 'review', 'handoff']).default('draft'),\n  checkoutUrl: z.string().optional(),\n});\n\ntype CartLine = {\n  readonly itemId: string;\n  readonly quantity: number;\n  readonly modifiers: readonly string[];\n  readonly note?: string;\n};\n\ntype CartInput = {\n  readonly selectedStoreId?: string;\n  readonly lines: readonly CartLine[];\n  readonly customer: string;\n  readonly notes?: string;\n  readonly subtotal: number;\n  readonly expectedRevision: number;\n};\n\nconst readOnly = annotations.readOnly();\nconst action = annotations.openAction({ destructive: false });\n\nfunction checkoutUrl(customer: string): string {\n  return `https://orders.example.com/checkout?customer=${encodeURIComponent(customer)}`;\n}\n\nfunction cartValue(input: CartInput, status: 'draft' | 'review' | 'handoff') {\n  return {\n    selectedStoreId: input.selectedStoreId,\n    lines: input.lines,\n    customer: input.customer,\n    notes: input.notes,\n    subtotal: input.subtotal,\n    status,\n    ...(status === 'handoff' ? { checkoutUrl: 'https://orders.example.com/checkout' } : {}),\n  };\n}\n\nexport default server(\n  'food_ordering',\n  {\n    title: 'Food Ordering',\n    version: '1.0.0',\n    use: { state },\n    state: {\n      handles: {\n        cart: {\n          kind: 'cart',\n          version: 'v1',\n          scope: 'caller',\n          ttlSeconds: 7200,\n          schema: cartStateSchema,\n        },\n      },\n    },\n    branding: {\n      name: 'Food Ordering',\n      accent: '#0F8F5F',\n      surface: '#F7F7F5',\n      surfaceDark: '#111820',\n      logo: {\n        uri: heroImage,\n        alt: 'Food Ordering noodle bowl',\n      },\n      radius: 'lg',\n      density: 'comfortable',\n    },\n    handoff: {\n      allowedDomains: ['https://orders.example.com'],\n    },\n  },\n  [\n    tool('open_ordering', {\n      description:\n        'Open a complete food-ordering widget with store discovery, menu browsing, cart review, and checkout handoff.',\n      annotations: readOnly,\n      input: z.object({\n        query: z.string().optional(),\n        customer: z.string().default('Guest'),\n      }),\n      output: z.object({\n        status: z.string(),\n        customer: z.string(),\n        stores: z.array(storeShape),\n        featuredItems: z.array(menuItemShape),\n        fallback: z.string(),\n      }),\n      fulfil: ({ input }) => ({\n        status: 'Ready to build a food order.',\n        customer: input.customer,\n        stores,\n        featuredItems: menu,\n        fallback: 'Open stores: Harbor Noodles (Noodles), Garden Wraps (Vegetarian).',\n      }),\n      viewTitle: 'Food ordering',\n      domain: 'https://orders.example.com',\n      view: {\n        component: 'ordering-flow',\n        entry: './views/ordering-flow.tsx',\n      },\n      viewDescription:\n        'A complete consumer ordering surface with app-only helper tools, cart state, and checkout handoff.',\n      csp: {\n        connectDomains: ['https://orders.example.com'],\n        resourceDomains: ['https://orders.example.com'],\n        frameDomains: ['https://orders.example.com'],\n      },\n      permissions: { clipboardWrite: {} },\n    }),\n    tool('search_stores', {\n      visibility: ['app'],\n      description: 'Filter synthetic restaurants for the ordering widget.',\n      annotations: readOnly,\n      input: z.object({\n        query: z.string().optional(),\n        openOnly: z.boolean().default(false),\n      }),\n      output: z.object({ stores: z.array(storeShape) }),\n      fulfil: () => ({ stores }),\n    }),\n    tool('load_menu', {\n      visibility: ['app'],\n      description: 'Load synthetic menu categories and items for one store.',\n      annotations: readOnly,\n      input: z.object({ storeId: z.string() }),\n      output: z.object({\n        storeId: z.string(),\n        stores: z.array(storeShape),\n        items: z.array(menuItemShape),\n      }),\n      fulfil: ({ input }) => ({ storeId: input.storeId, stores, items: menu }),\n    }),\n    tool('load_item', {\n      visibility: ['app'],\n      description: 'Load item details and modifier options for the ordering widget.',\n      annotations: readOnly,\n      input: z.object({ itemId: z.string() }),\n      output: z.object({ itemId: z.string(), items: z.array(menuItemShape) }),\n      fulfil: ({ input }) => ({ itemId: input.itemId, items: menu }),\n    }),\n    tool('read_cart', {\n      visibility: ['app'],\n      description: 'Read the caller-scoped ordering cart state.',\n      annotations: readOnly,\n      input: z.object({}),\n      output: z.object({\n        value: z.unknown(),\n        revision: z.number(),\n        status: z.string(),\n      }),\n      fulfil: ({ connectors }) => {\n        const state = connectors.state.readState({ handle: 'cart' });\n        return { value: state.value, revision: state.revision, status: state.status };\n      },\n    }),\n    tool('sync_cart', {\n      visibility: ['app'],\n      description: 'Patch the caller-scoped ordering cart with the widget cart mirror.',\n      annotations: action,\n      input: cartInput,\n      output: z.object({\n        cart: cartOutput,\n        revision: z.number(),\n        status: z.string(),\n      }),\n      fulfil: ({ input, connectors }) => {\n        const cart = cartValue(input, 'draft');\n        const state = connectors.state.patchState({\n          handle: 'cart',\n          expectedRevision: input.expectedRevision,\n          value: cart,\n        });\n        return { cart, revision: state.revision, status: state.status };\n      },\n    }),\n    tool('prepare_checkout', {\n      visibility: ['app'],\n      description: 'Prepare the caller-scoped cart for checkout handoff.',\n      annotations: action,\n      input: cartInput,\n      output: z.object({\n        cart: cartOutput,\n        revision: z.number(),\n        checkoutUrl: z.string(),\n      }),\n      fulfil: ({ input, connectors }) => {\n        const cart = cartValue(input, 'handoff');\n        const state = connectors.state.patchState({\n          handle: 'cart',\n          expectedRevision: input.expectedRevision,\n          value: cart,\n        });\n        return {\n          cart,\n          revision: state.revision,\n          checkoutUrl: cart.checkoutUrl ?? checkoutUrl(input.customer),\n        };\n      },\n    }),\n    tool('summarize_ordering_options', {\n      description: 'Summarize available stores and menu examples without opening the widget.',\n      annotations: readOnly,\n      input: z.object({}),\n      output: z.object({\n        stores: z.array(storeShape),\n        featuredItems: z.array(menuItemShape),\n      }),\n      fulfil: () => ({ stores, featuredItems: menu }),\n    }),\n    tool('show_capabilities', {\n      description: 'Return a concise summary for the standalone widget capability preview.',\n      annotations: readOnly,\n      input: z.object({}),\n      output: z.object({ status: z.string(), note: z.string() }),\n      fulfil: () => ({\n        status: 'Food Ordering widget capabilities are ready.',\n        note: 'Standalone preview covers React views, helper tools, cart state, handoff, CSP, and permissions.',\n      }),\n      viewName: 'capabilities_card',\n      viewTitle: 'Food Ordering capabilities',\n      viewDescription: 'Standalone widget resource for previewing the ordering capability surface.',\n      domain: 'https://orders.example.com',\n      view: { component: 'capabilities-card', entry: './views/capabilities-card.tsx' },\n      csp: {\n        connectDomains: ['https://orders.example.com'],\n        resourceDomains: ['https://orders.example.com'],\n        frameDomains: ['https://orders.example.com'],\n      },\n      permissions: { clipboardWrite: {} },\n    }),\n    resource('food_ordering_guide', {\n      uri: 'docs://food-ordering',\n      title: 'Food Ordering widget guide',\n      description: 'Synthetic guide resource for the consumer ordering flagship.',\n      mimeType: 'text/markdown',\n      // Return the resource body directly; the runtime maps it into MCP `contents` using the\n      // resource's own uri + mimeType. Do not return a `{ contents: [...] }` wrapper — that double-wraps.\n      fulfil: () =>\n        [\n          '# Food Ordering Widget Guide',\n          '',\n          '- Demonstrates a multi-step ordering widget, app-only helper tools, typed cart state, and handoff.',\n          '- Store, menu, and checkout data are synthetic and contain no customer credentials.',\n          '- Checkout opens an allowlisted example URL; payment and final ordering remain out of scope.',\n        ].join('\\n'),\n    }),\n  ],\n);\n" },
+    { relPath: "examples/food-ordering/src/helpers.ts", content: "import type { ServerDefinition } from '@noodleseed/one';\n\nexport {\n  ActionBar,\n  AppShell,\n  AsyncBoundary,\n  ChoiceGroup,\n  createViewStore,\n  DataCard,\n  DataList,\n  Field,\n  HandoffButton,\n  QuantityStepper,\n  ShellNav,\n  StatusBadge,\n  SubmitButton,\n  View,\n  ViewStack,\n} from '@noodleseed/one/react';\n\nimport { generateHelpers } from '@noodleseed/one/react';\n\nexport type AppType = ServerDefinition;\n\nexport const {\n  useCallTool,\n  useAppFlow,\n  useHandoff,\n  useLayout,\n  useOpenExternal,\n  useSendFollowUpMessage,\n  useToolInfo,\n  useUpdateModelContext,\n  useViewState,\n  useWidgetLifecycle,\n} = generateHelpers<AppType>();\n" },
+    { relPath: "examples/food-ordering/src/server.ts", content: "import { annotations, asset, connector, resource, server, tool, z } from '@noodleseed/one';\n\nconst heroImage = asset('assets/noodle-bowl.jpg');\n\nconst state = connector('noodle_state')\n  .version('1.0.0')\n  .operation('read_state', {\n    type: 'read',\n    input: z.object({\n      handle: z.string(),\n      key: z.string().optional(),\n    }),\n    output: z.object({\n      value: z.record(z.string(), z.unknown()),\n      revision: z.number().int(),\n      status: z.string(),\n    }),\n  })\n  .operation('patch_state', {\n    type: 'action',\n    input: z.object({\n      handle: z.string(),\n      expectedRevision: z.number().int(),\n      value: z.record(z.string(), z.unknown()),\n    }),\n    output: z.object({\n      value: z.record(z.string(), z.unknown()),\n      revision: z.number().int(),\n      status: z.string(),\n    }),\n  });\n\nconst stores = [\n  {\n    id: 'harbor-noodles',\n    name: 'Harbor Noodles',\n    cuisine: 'Noodles',\n    address: '18 Pier Lane',\n    open: true,\n    etaMinutes: 24,\n    rating: 4.8,\n  },\n  {\n    id: 'garden-wraps',\n    name: 'Garden Wraps',\n    cuisine: 'Vegetarian',\n    address: '44 Market Street',\n    open: true,\n    etaMinutes: 18,\n    rating: 4.6,\n  },\n  {\n    id: 'midnight-tacos',\n    name: 'Midnight Tacos',\n    cuisine: 'Mexican',\n    address: '7 Station Road',\n    open: false,\n    etaMinutes: 35,\n    rating: 4.7,\n  },\n] as const;\n\nconst menu = [\n  {\n    id: 'spicy_miso',\n    storeId: 'harbor-noodles',\n    category: 'Bowls',\n    name: 'Spicy Miso Bowl',\n    price: 16,\n    description: 'Miso broth, wheat noodles, chili crisp, egg, and greens.',\n    modifiers: ['extra_noodles', 'soft_egg', 'chili_crisp'],\n  },\n  {\n    id: 'ginger_tofu',\n    storeId: 'harbor-noodles',\n    category: 'Bowls',\n    name: 'Ginger Tofu Bowl',\n    price: 15,\n    description: 'Tofu, ginger broth, mushrooms, and scallions.',\n    modifiers: ['extra_tofu', 'brown_rice', 'no_mushroom'],\n  },\n  {\n    id: 'green_falafel',\n    storeId: 'garden-wraps',\n    category: 'Wraps',\n    name: 'Green Falafel Wrap',\n    price: 13,\n    description: 'Falafel, herbs, pickles, tahini, and crisp vegetables.',\n    modifiers: ['extra_tahini', 'add_fries', 'gluten_free_wrap'],\n  },\n  {\n    id: 'sweet_potato',\n    storeId: 'garden-wraps',\n    category: 'Plates',\n    name: 'Sweet Potato Plate',\n    price: 14,\n    description: 'Roasted sweet potato, grains, greens, and lemon yogurt.',\n    modifiers: ['vegan_yogurt', 'extra_greens', 'hot_sauce'],\n  },\n] as const;\n\nconst cartLine = z.object({\n  itemId: z.string(),\n  quantity: z.number().int().min(1),\n  modifiers: z.array(z.string()).default([]),\n  note: z.string().optional(),\n});\n\nconst cartInput = z.object({\n  selectedStoreId: z.string().optional(),\n  lines: z.array(cartLine).default([]),\n  customer: z.string().default('Guest'),\n  notes: z.string().optional(),\n  subtotal: z.number().default(0),\n  expectedRevision: z.number().int().min(0).default(0),\n});\n\nconst storeShape = z.object({\n  id: z.string(),\n  name: z.string(),\n  cuisine: z.string(),\n  address: z.string(),\n  open: z.boolean(),\n  etaMinutes: z.number(),\n  rating: z.number(),\n});\n\nconst menuItemShape = z.object({\n  id: z.string(),\n  storeId: z.string(),\n  category: z.string(),\n  name: z.string(),\n  price: z.number(),\n  description: z.string(),\n  modifiers: z.array(z.string()),\n});\n\nconst cartOutput = z.object({\n  selectedStoreId: z.string().optional(),\n  lines: z.array(cartLine),\n  customer: z.string(),\n  notes: z.string().optional(),\n  subtotal: z.number(),\n  status: z.enum(['draft', 'review', 'handoff']),\n  checkoutUrl: z.string().optional(),\n});\n\nconst cartStateSchema = z.object({\n  selectedStoreId: z.string().optional(),\n  lines: z.array(cartLine),\n  customer: z.string(),\n  notes: z.string().optional(),\n  subtotal: z.number(),\n  // `.default()`/`.optional()` state fields are optional on write: a cart save that omits\n  // `status` still validates, and a fresh cart starts in `draft`.\n  status: z.enum(['draft', 'review', 'handoff']).default('draft'),\n  checkoutUrl: z.string().optional(),\n});\n\ntype CartLine = {\n  readonly itemId: string;\n  readonly quantity: number;\n  readonly modifiers: readonly string[];\n  readonly note?: string;\n};\n\ntype CartInput = {\n  readonly selectedStoreId?: string;\n  readonly lines: readonly CartLine[];\n  readonly customer: string;\n  readonly notes?: string;\n  readonly subtotal: number;\n  readonly expectedRevision: number;\n};\n\nconst readOnly = annotations.readOnly();\n// These writes are app-only controls inside the cart widget. The widget already presents the\n// reviewed state and explicit button; `confirm: false` documents direct execution and is equivalent\n// to omission because action/open-world hints alone never enable the confirmation gate.\nconst action = annotations.openAction({ destructive: false, confirm: false });\n\nfunction checkoutUrl(customer: string): string {\n  return `https://orders.example.com/checkout?customer=${encodeURIComponent(customer)}`;\n}\n\nfunction cartValue(input: CartInput, status: 'draft' | 'review' | 'handoff') {\n  return {\n    selectedStoreId: input.selectedStoreId,\n    lines: input.lines,\n    customer: input.customer,\n    notes: input.notes,\n    subtotal: input.subtotal,\n    status,\n    ...(status === 'handoff' ? { checkoutUrl: 'https://orders.example.com/checkout' } : {}),\n  };\n}\n\nexport default server(\n  'food_ordering',\n  {\n    title: 'Food Ordering',\n    version: '1.0.0',\n    use: { state },\n    context: {\n      defaults: { locale: 'en-US', timeZone: 'America/New_York' },\n      ambient: {\n        output: z.object({ serviceArea: z.string(), orderingDate: z.string() }),\n        fulfil: ({ context }) => ({\n          serviceArea: 'Harbor District',\n          orderingDate: context.temporal.localDate,\n        }),\n      },\n    },\n    state: {\n      handles: {\n        cart: {\n          kind: 'cart',\n          version: 'v1',\n          scope: 'caller',\n          ttlSeconds: 7200,\n          schema: cartStateSchema,\n        },\n      },\n    },\n    branding: {\n      name: 'Food Ordering',\n      accent: '#0F8F5F',\n      surface: '#F7F7F5',\n      surfaceDark: '#111820',\n      logo: {\n        uri: heroImage,\n        alt: 'Food Ordering noodle bowl',\n      },\n      radius: 'lg',\n      density: 'comfortable',\n    },\n    handoff: {\n      allowedDomains: ['https://orders.example.com'],\n    },\n  },\n  [\n    tool('open_ordering', {\n      description:\n        'Open a complete food-ordering widget with store discovery, menu browsing, cart review, and checkout handoff.',\n      annotations: readOnly,\n      input: z.object({\n        query: z.string().optional(),\n        customer: z.string().default('Guest'),\n      }),\n      output: z.object({\n        status: z.string(),\n        customer: z.string(),\n        stores: z.array(storeShape),\n        featuredItems: z.array(menuItemShape),\n        localDate: z.string(),\n        serviceArea: z.string(),\n        fallback: z.string(),\n      }),\n      fulfil: ({ input, context }) => ({\n        status: 'Ready to build a food order.',\n        customer: input.customer,\n        stores,\n        featuredItems: menu,\n        localDate: context.temporal.localDate,\n        serviceArea: context.ambient.serviceArea,\n        fallback: 'Open stores: Harbor Noodles (Noodles), Garden Wraps (Vegetarian).',\n      }),\n      viewTitle: 'Food ordering',\n      domain: 'https://orders.example.com',\n      view: {\n        component: 'ordering-flow',\n        entry: './views/ordering-flow.tsx',\n      },\n      viewDescription:\n        'A complete consumer ordering surface with app-only helper tools, cart state, and checkout handoff.',\n      csp: {\n        connectDomains: ['https://orders.example.com'],\n        resourceDomains: ['https://orders.example.com'],\n        frameDomains: ['https://orders.example.com'],\n      },\n      permissions: { clipboardWrite: {} },\n    }),\n    tool('search_stores', {\n      visibility: ['app'],\n      description: 'Filter synthetic restaurants for the ordering widget.',\n      annotations: readOnly,\n      input: z.object({\n        query: z.string().optional(),\n        openOnly: z.boolean().default(false),\n      }),\n      output: z.object({ stores: z.array(storeShape) }),\n      fulfil: () => ({ stores }),\n    }),\n    tool('load_menu', {\n      visibility: ['app'],\n      description: 'Load synthetic menu categories and items for one store.',\n      annotations: readOnly,\n      input: z.object({ storeId: z.string() }),\n      output: z.object({\n        storeId: z.string(),\n        stores: z.array(storeShape),\n        items: z.array(menuItemShape),\n      }),\n      fulfil: ({ input }) => ({ storeId: input.storeId, stores, items: menu }),\n    }),\n    tool('load_item', {\n      visibility: ['app'],\n      description: 'Load item details and modifier options for the ordering widget.',\n      annotations: readOnly,\n      input: z.object({ itemId: z.string() }),\n      output: z.object({ itemId: z.string(), items: z.array(menuItemShape) }),\n      fulfil: ({ input }) => ({ itemId: input.itemId, items: menu }),\n    }),\n    tool('read_cart', {\n      visibility: ['app'],\n      description: 'Read the caller-scoped ordering cart state.',\n      annotations: readOnly,\n      input: z.object({}),\n      output: z.object({\n        value: z.unknown(),\n        revision: z.number(),\n        status: z.string(),\n      }),\n      fulfil: ({ connectors }) => {\n        const state = connectors.state.readState({ handle: 'cart' });\n        return { value: state.value, revision: state.revision, status: state.status };\n      },\n    }),\n    tool('sync_cart', {\n      visibility: ['app'],\n      description: 'Patch the caller-scoped ordering cart with the widget cart mirror.',\n      annotations: action,\n      input: cartInput,\n      output: z.object({\n        cart: cartOutput,\n        revision: z.number(),\n        status: z.string(),\n      }),\n      fulfil: ({ input, connectors }) => {\n        const cart = cartValue(input, 'draft');\n        const state = connectors.state.patchState({\n          handle: 'cart',\n          expectedRevision: input.expectedRevision,\n          value: cart,\n        });\n        return { cart, revision: state.revision, status: state.status };\n      },\n    }),\n    tool('prepare_checkout', {\n      visibility: ['app'],\n      description: 'Prepare the caller-scoped cart for checkout handoff.',\n      annotations: action,\n      input: cartInput,\n      output: z.object({\n        cart: cartOutput,\n        revision: z.number(),\n        checkoutUrl: z.string(),\n      }),\n      fulfil: ({ input, connectors }) => {\n        const cart = cartValue(input, 'handoff');\n        const state = connectors.state.patchState({\n          handle: 'cart',\n          expectedRevision: input.expectedRevision,\n          value: cart,\n        });\n        return {\n          cart,\n          revision: state.revision,\n          checkoutUrl: cart.checkoutUrl ?? checkoutUrl(input.customer),\n        };\n      },\n    }),\n    tool('summarize_ordering_options', {\n      description: 'Summarize available stores and menu examples without opening the widget.',\n      annotations: readOnly,\n      input: z.object({}),\n      output: z.object({\n        stores: z.array(storeShape),\n        featuredItems: z.array(menuItemShape),\n      }),\n      fulfil: () => ({ stores, featuredItems: menu }),\n    }),\n    tool('plan_order', {\n      description:\n        'Collect a fulfilment method and requested date as structured input, then return a reviewable order plan without placing an order.',\n      annotations: readOnly,\n      input: z.object({ customer: z.string().default('Guest') }),\n      output: z.object({\n        customer: z.string(),\n        method: z.enum(['pickup', 'delivery']),\n        requestedDate: z.string(),\n        serviceArea: z.string(),\n      }),\n      fulfil: ({ input, context, elicit }) => {\n        const preference = elicit({\n          id: 'choose_fulfilment',\n          message: 'How should we fulfil this order?',\n          input: z.object({\n            method: z.enum(['pickup', 'delivery']).describe('Fulfilment method'),\n            requestedDate: z.string().describe('Requested date').meta({ format: 'date' }),\n          }),\n        });\n        return {\n          customer: input.customer,\n          method: preference.method,\n          requestedDate: preference.requestedDate,\n          serviceArea: context.ambient.serviceArea,\n        };\n      },\n    }),\n    tool('show_capabilities', {\n      description: 'Return a concise summary for the standalone widget capability preview.',\n      annotations: readOnly,\n      input: z.object({}),\n      output: z.object({ status: z.string(), note: z.string() }),\n      fulfil: () => ({\n        status: 'Food Ordering widget capabilities are ready.',\n        note: 'Standalone preview covers React views, helper tools, cart state, handoff, CSP, and permissions.',\n      }),\n      viewName: 'capabilities_card',\n      viewTitle: 'Food Ordering capabilities',\n      viewDescription: 'Standalone widget resource for previewing the ordering capability surface.',\n      domain: 'https://orders.example.com',\n      view: { component: 'capabilities-card', entry: './views/capabilities-card.tsx' },\n      csp: {\n        connectDomains: ['https://orders.example.com'],\n        resourceDomains: ['https://orders.example.com'],\n        frameDomains: ['https://orders.example.com'],\n      },\n      permissions: { clipboardWrite: {} },\n    }),\n    resource('food_ordering_guide', {\n      uri: 'docs://food-ordering',\n      title: 'Food Ordering widget guide',\n      description: 'Synthetic guide resource for the consumer ordering flagship.',\n      mimeType: 'text/markdown',\n      // Return the resource body directly; the runtime maps it into MCP `contents` using the\n      // resource's own uri + mimeType. Do not return a `{ contents: [...] }` wrapper — that double-wraps.\n      fulfil: () =>\n        [\n          '# Food Ordering Widget Guide',\n          '',\n          '- Demonstrates a multi-step ordering widget, app-only helper tools, typed cart state, and handoff.',\n          '- Store, menu, and checkout data are synthetic and contain no customer credentials.',\n          '- Checkout opens an allowlisted example URL; payment and final ordering remain out of scope.',\n        ].join('\\n'),\n    }),\n  ],\n);\n" },
     { relPath: "examples/food-ordering/src/views/capabilities-card.tsx", content: "import { useLayout, useOpenExternal, useSendFollowUpMessage, useToolInfo } from '../helpers.js';\nimport './widget-style.css';\n\nconst capabilities: readonly {\n  readonly name: string;\n  readonly description: string;\n}[] = [\n  {\n    name: 'React view resource',\n    description: 'Compiled widget HTML with a hydrated React entrypoint.',\n  },\n  {\n    name: 'Widget helper calls',\n    description: 'App-only tools route through the same host-mediated path.',\n  },\n  {\n    name: 'Durable cart state',\n    description: 'Caller-scoped cart records use Noodle state handles with revisions.',\n  },\n  {\n    name: 'External handoff',\n    description: 'Checkout opens through declared allowlisted domains.',\n  },\n  {\n    name: 'Model context',\n    description: 'Relevant UI state is mirrored through data-llm.',\n  },\n  {\n    name: 'CSP and permissions',\n    description: 'Resource metadata declares network and clipboard needs.',\n  },\n] as const;\n\nexport default function CapabilitiesCard() {\n  const { theme } = useLayout();\n  const toolInfo = useToolInfo('show_capabilities');\n  const openExternal = useOpenExternal();\n  const sendFollowUpMessage = useSendFollowUpMessage();\n  const structured = toolInfo.structuredContent as\n    | { readonly status?: string; readonly note?: string }\n    | undefined;\n\n  return (\n    <main\n      className={`nw-shell${theme === 'dark' ? ' dark' : ''}`}\n      data-llm={`Food Ordering capabilities: ${capabilities.map((item) => item.name).join(', ')}`}\n    >\n      <section className=\"nw-card\">\n        <header className=\"nw-header\">\n          <span className=\"nw-icon\" aria-hidden=\"true\">\n            <PuzzleIcon />\n          </span>\n          <div className=\"nw-title-block\">\n            <h1 className=\"nw-title\">MCP capabilities</h1>\n            <p className=\"nw-subtitle\">\n              {structured?.status ?? 'Food Ordering widget capabilities are ready.'}\n            </p>\n          </div>\n          <span className=\"nw-chip\">Connected</span>\n        </header>\n        <div className=\"nw-body\">\n          <p className=\"nw-section-title\">Available features</p>\n          <ul className=\"nw-feature-list\">\n            {capabilities.map((capability) => (\n              <li className=\"nw-feature\" key={capability.name}>\n                <span className=\"nw-check\" aria-hidden=\"true\">\n                  <CheckIcon />\n                </span>\n                <span>\n                  <span className=\"nw-feature-name\">{capability.name}</span>\n                  <span className=\"nw-feature-desc\">{capability.description}</span>\n                </span>\n              </li>\n            ))}\n          </ul>\n          <div className=\"nw-actions\">\n            <button\n              className=\"nw-button nw-button-primary\"\n              type=\"button\"\n              onClick={() =>\n                sendFollowUpMessage({\n                  prompt: 'Summarize what the Food Ordering MCP App widget demonstrates.',\n                })\n              }\n            >\n              <SparkIcon />\n              Ask assistant\n            </button>\n            <button\n              className=\"nw-button\"\n              type=\"button\"\n              onClick={() => openExternal('https://example.com/noodle-widget-docs')}\n            >\n              <ExternalIcon />\n              Open docs\n            </button>\n          </div>\n          {structured?.note ? <p className=\"nw-note\">{structured.note}</p> : null}\n        </div>\n        <footer className=\"nw-footer\">\n          <span className=\"nw-meta\">\n            <ShieldIcon />\n            Secure widget surface\n          </span>\n          <span>v1.0.0</span>\n        </footer>\n      </section>\n    </main>\n  );\n}\n\nfunction PuzzleIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M8 4h5v4h3a2 2 0 0 1 0 4h-3v3H9v-3H6a2 2 0 0 1 0-4h2V4Z\" />\n      <path d=\"M13 15v5H4v-5\" />\n      <path d=\"M13 20h7v-8\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"m6 12 4 4 8-8\" />\n    </svg>\n  );\n}\n\nfunction SparkIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"m12 3 1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z\" />\n    </svg>\n  );\n}\n\nfunction ExternalIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M14 4h6v6\" />\n      <path d=\"m20 4-9 9\" />\n      <path d=\"M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5\" />\n    </svg>\n  );\n}\n\nfunction ShieldIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M12 3 5 6v5c0 4.4 2.8 8.3 7 10 4.2-1.7 7-5.6 7-10V6l-7-3Z\" />\n      <path d=\"m9 12 2 2 4-4\" />\n    </svg>\n  );\n}\n" },
-    { relPath: "examples/food-ordering/src/views/ordering-flow.tsx", content: "import { useMemo, useState } from 'react';\nimport {\n  ActionBar,\n  AppShell,\n  AsyncBoundary,\n  ChoiceGroup,\n  createViewStore,\n  DataCard,\n  DataList,\n  Field,\n  HandoffButton,\n  QuantityStepper,\n  ShellNav,\n  StatusBadge,\n  SubmitButton,\n  useAppFlow,\n  useCallTool,\n  useHandoff,\n  useLayout,\n  useSendFollowUpMessage,\n  useToolInfo,\n  useViewState,\n  View,\n  ViewStack,\n} from '../helpers.js';\nimport './widget-style.css';\n\ntype ViewName = 'stores' | 'menu' | 'item' | 'cart' | 'review' | 'handoff';\n\ntype Store = {\n  readonly id: string;\n  readonly name: string;\n  readonly cuisine: string;\n  readonly address: string;\n  readonly open: boolean;\n  readonly etaMinutes: number;\n  readonly rating: number;\n};\n\ntype MenuItem = {\n  readonly id: string;\n  readonly storeId: string;\n  readonly category: string;\n  readonly name: string;\n  readonly price: number;\n  readonly description: string;\n  readonly modifiers: readonly string[];\n};\n\ntype CartLine = {\n  readonly itemId: string;\n  readonly quantity: number;\n  readonly modifiers: readonly string[];\n  readonly note?: string;\n};\n\ntype CartState = {\n  readonly selectedStoreId?: string;\n  readonly lines: readonly CartLine[];\n  readonly customer: string;\n  readonly notes?: string;\n  readonly subtotal: number;\n  readonly status: 'draft' | 'review' | 'handoff';\n  readonly checkoutUrl?: string;\n};\n\nconst zeroCart: CartState = {\n  lines: [],\n  customer: 'Guest',\n  subtotal: 0,\n  status: 'draft',\n};\n\nconst useCartStore = createViewStore<CartState>('cart', zeroCart);\nconst useCartRevisionStore = createViewStore('cart_revision', { value: 0 });\n\nfunction structured<T>(value: unknown): T | undefined {\n  return (value as { structuredContent?: T } | undefined)?.structuredContent;\n}\n\nfunction currency(value: number): string {\n  return `$${value.toFixed(2)}`;\n}\n\nfunction modifierLabel(value: string): string {\n  return value\n    .split('_')\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join(' ');\n}\n\nexport default function OrderingFlow() {\n  const { displayMode, theme } = useLayout();\n  const entry = structured<{\n    readonly customer?: string;\n    readonly stores?: readonly Store[];\n    readonly featuredItems?: readonly MenuItem[];\n    readonly status?: string;\n  }>(useToolInfo('open_ordering'));\n  const flow = useAppFlow<ViewName>({\n    key: 'ordering_flow',\n    initialView: 'stores',\n    views: ['stores', 'menu', 'item', 'cart', 'review', 'handoff'],\n  });\n  const view = flow.activeView;\n  const setView = flow.navigate;\n  const handoff = useHandoff();\n  const sendFollowUpMessage = useSendFollowUpMessage();\n  const searchStores = useCallTool('search_stores');\n  const loadMenu = useCallTool('load_menu');\n  const loadItem = useCallTool('load_item');\n  const readCart = useCallTool('read_cart');\n  const syncCart = useCallTool('sync_cart');\n  const prepareCheckout = useCallTool('prepare_checkout');\n\n  const [query, setQuery] = useViewState('query', '');\n  const [customer, setCustomer] = useViewState('customer', entry?.customer ?? 'Guest');\n  const [selectedStoreId, setSelectedStoreId] = useViewState<string | undefined>(\n    'selected_store',\n    entry?.stores?.[0]?.id,\n  );\n  const [selectedItemId, setSelectedItemId] = useViewState<string | undefined>(\n    'selected_item',\n    entry?.featuredItems?.[0]?.id,\n  );\n  const cartStore = useCartStore();\n  const revisionStore = useCartRevisionStore((state) => state.value);\n  const cart =\n    cartStore.state.customer === 'Guest' && entry?.customer\n      ? { ...cartStore.state, customer: entry.customer }\n      : cartStore.state;\n  const revision = revisionStore.selected;\n  const setCart = cartStore.setState;\n  const setRevision = (value: number) => revisionStore.setState({ value });\n  const [quantity, setQuantity] = useState(1);\n  const [selectedModifiers, setSelectedModifiers] = useState<readonly string[]>([]);\n\n  const storeData = structured<{ readonly stores?: readonly Store[] }>(searchStores.data);\n  const menuData = structured<{\n    readonly stores?: readonly Store[];\n    readonly items?: readonly MenuItem[];\n  }>(loadMenu.data);\n  const itemData = structured<{ readonly items?: readonly MenuItem[] }>(loadItem.data);\n  const checkoutData = structured<{ readonly checkoutUrl?: string; readonly cart?: CartState }>(\n    prepareCheckout.data,\n  );\n  const stores = storeData?.stores ?? entry?.stores ?? [];\n  const queryText = query.trim().toLowerCase();\n  const displayedStores = stores.filter(\n    (store) =>\n      queryText.length === 0 ||\n      store.name.toLowerCase().includes(queryText) ||\n      store.cuisine.toLowerCase().includes(queryText),\n  );\n  const allItems = menuData?.items ?? itemData?.items ?? entry?.featuredItems ?? [];\n  const items = allItems.filter((item) => item.storeId === selectedStoreId);\n  const currentStore =\n    stores.find((store) => store.id === selectedStoreId) ?? menuData?.stores?.[0] ?? stores[0];\n  const currentItem = allItems.find((item) => item.id === selectedItemId) ?? items[0];\n  const lineItems = useMemo(\n    () =>\n      cart.lines.map((line) => ({\n        ...line,\n        item: [...(entry?.featuredItems ?? []), ...allItems].find(\n          (item) => item.id === line.itemId,\n        ),\n      })),\n    [cart.lines, entry?.featuredItems, allItems],\n  );\n  const llmSummary = `${view} view for ${customer}; ${cart.lines.length} cart lines; subtotal ${currency(\n    cart.subtotal,\n  )}`;\n\n  async function chooseStore(store: Store) {\n    setSelectedStoreId(store.id);\n    setView('menu');\n    const result = await loadMenu.callTool({ storeId: store.id });\n    const loaded = structured<{ readonly items?: readonly MenuItem[] }>(result);\n    setSelectedItemId(loaded?.items?.find((item) => item.storeId === store.id)?.id);\n  }\n\n  async function chooseItem(item: MenuItem) {\n    setSelectedItemId(item.id);\n    setSelectedModifiers([]);\n    setQuantity(1);\n    setView('item');\n    await loadItem.callTool({ itemId: item.id });\n  }\n\n  async function persistCart(nextCart: CartState, nextView: ViewName) {\n    const result = await syncCart.callTool({\n      selectedStoreId: nextCart.selectedStoreId,\n      lines: nextCart.lines,\n      customer: nextCart.customer,\n      notes: nextCart.notes,\n      subtotal: nextCart.subtotal,\n      expectedRevision: revision,\n    });\n    const synced = structured<{ readonly cart?: CartState; readonly revision?: number }>(result);\n    setCart(synced?.cart ?? nextCart);\n    setRevision(synced?.revision ?? revision + 1);\n    setView(nextView);\n  }\n\n  async function addCurrentItem() {\n    if (!currentItem) return;\n    const nextLines = [\n      ...cart.lines,\n      {\n        itemId: currentItem.id,\n        quantity,\n        modifiers: selectedModifiers,\n      },\n    ];\n    await persistCart(\n      {\n        ...cart,\n        selectedStoreId: currentStore?.id ?? selectedStoreId,\n        lines: nextLines,\n        customer,\n        subtotal: nextLines.reduce(\n          (sum, line) =>\n            sum +\n            ([...(entry?.featuredItems ?? []), ...allItems].find((item) => item.id === line.itemId)\n              ?.price ?? 0) *\n              line.quantity,\n          0,\n        ),\n        status: 'draft',\n      },\n      'cart',\n    );\n  }\n\n  async function prepareHandoff() {\n    const result = await prepareCheckout.callTool({\n      selectedStoreId: cart.selectedStoreId,\n      lines: cart.lines,\n      customer,\n      notes: cart.notes,\n      subtotal: cart.subtotal,\n      expectedRevision: revision,\n    });\n    const prepared = structured<{\n      readonly cart?: CartState;\n      readonly revision?: number;\n      readonly checkoutUrl?: string;\n    }>(result);\n    setCart(prepared?.cart ?? cart);\n    setRevision(prepared?.revision ?? revision + 1);\n    setView('handoff');\n  }\n\n  return (\n    <AppShell\n      className={`nw-shell${theme === 'dark' ? ' dark' : ''}`}\n      data-llm={llmSummary}\n      title=\"Food Ordering\"\n      subtitle={entry?.status ?? 'Find a store, build a cart, and hand off checkout.'}\n      icon={<BowlIcon />}\n      badge={displayMode === 'fullscreen' ? 'Fullscreen' : view}\n      footer={\n        <>\n          <span className=\"nw-meta\">\n            <BagIcon />\n            {cart.lines.length} items\n          </span>\n          <span className=\"nw-meta\">Revision {revision}</span>\n        </>\n      }\n    >\n      <ShellNav\n        activeView={view}\n        aria-label=\"Ordering steps\"\n        items={(['stores', 'menu', 'cart', 'review', 'handoff'] as const).map((step) => ({\n          view: step,\n          label: step,\n        }))}\n        onNavigate={setView}\n      />\n      <div className=\"nw-body\">\n        <ViewStack flow={flow}>\n          <View name=\"stores\">\n            <div className=\"nw-field-grid\">\n              <Field className=\"nw-field\" label=\"Customer\">\n                <input\n                  className=\"nw-input\"\n                  value={customer}\n                  onChange={(event) => setCustomer(event.currentTarget.value)}\n                />\n              </Field>\n              <Field className=\"nw-field\" label=\"Search\">\n                <input\n                  className=\"nw-input\"\n                  value={query}\n                  placeholder=\"Noodles\"\n                  onChange={(event) => setQuery(event.currentTarget.value)}\n                />\n              </Field>\n            </div>\n            <ActionBar className=\"nw-actions\">\n              <SubmitButton\n                className=\"nw-button nw-button-primary\"\n                pending={searchStores.isPending}\n                pendingLabel=\"Searching...\"\n                onClick={() => searchStores.callTool({ query, openOnly: false })}\n              >\n                <SearchIcon />\n                Search stores\n              </SubmitButton>\n              <SubmitButton\n                className=\"nw-button\"\n                pending={readCart.isPending}\n                pendingLabel=\"Loading...\"\n                onClick={async () => {\n                  const result = await readCart.callTool({});\n                  const stored = structured<{\n                    readonly value?: CartState;\n                    readonly revision?: number;\n                  }>(result);\n                  if (stored?.value?.lines) setCart(stored.value);\n                  setRevision(stored?.revision ?? revision);\n                }}\n              >\n                <RefreshIcon />\n                Load cart\n              </SubmitButton>\n            </ActionBar>\n            <AsyncBoundary\n              state={searchStores}\n              isEmpty={displayedStores.length === 0}\n              empty=\"No matching stores\"\n            >\n              <StoreList stores={displayedStores} onChoose={chooseStore} />\n            </AsyncBoundary>\n          </View>\n\n          <View name=\"menu\">\n            <SectionHeader title={currentStore?.name ?? 'Menu'} detail={currentStore?.address} />\n            <AsyncBoundary\n              state={loadMenu}\n              isEmpty={items.length === 0}\n              empty=\"No menu items loaded\"\n            >\n              <ItemList items={items} onChoose={chooseItem} />\n            </AsyncBoundary>\n          </View>\n\n          <View name=\"item\">\n            {currentItem ? (\n              <>\n                <SectionHeader title={currentItem.name} detail={currentItem.description} />\n                <div className=\"nw-field-grid\">\n                  <Field className=\"nw-field\" label=\"Quantity\">\n                    <QuantityStepper value={quantity} min={1} onChange={setQuantity} />\n                  </Field>\n                  <div className=\"nw-summary nw-summary-compact\">\n                    <div className=\"nw-summary-row\">\n                      <dt>Price</dt>\n                      <dd>{currency(currentItem.price)}</dd>\n                    </div>\n                  </div>\n                </div>\n                <ChoiceGroup\n                  className=\"nw-modifier-grid\"\n                  values={currentItem.modifiers}\n                  selected={selectedModifiers}\n                  onChange={setSelectedModifiers}\n                  labelFor={modifierLabel}\n                />\n                <ActionBar className=\"nw-actions\">\n                  <SubmitButton\n                    className=\"nw-button nw-button-primary\"\n                    pending={syncCart.isPending}\n                    pendingLabel=\"Adding...\"\n                    onClick={addCurrentItem}\n                  >\n                    <BagIcon />\n                    Add to cart\n                  </SubmitButton>\n                  <button className=\"nw-button\" type=\"button\" onClick={() => setView('menu')}>\n                    Back to menu\n                  </button>\n                </ActionBar>\n              </>\n            ) : null}\n          </View>\n\n          <View name=\"cart\">\n            <SectionHeader\n              title=\"Cart\"\n              detail={`${cart.lines.length} line${cart.lines.length === 1 ? '' : 's'}`}\n            />\n            <CartSummary lineItems={lineItems} subtotal={cart.subtotal} />\n            <Field className=\"nw-field\" label=\"Notes\">\n              <input\n                className=\"nw-input\"\n                value={cart.notes ?? ''}\n                placeholder=\"Utensils, pickup name, or allergies\"\n                onChange={(event) => setCart({ ...cart, notes: event.currentTarget.value })}\n              />\n            </Field>\n            <ActionBar className=\"nw-actions\">\n              <SubmitButton\n                className=\"nw-button\"\n                pending={syncCart.isPending}\n                pendingLabel=\"Saving...\"\n                onClick={() => persistCart({ ...cart, customer, status: 'draft' }, 'review')}\n              >\n                <SaveIcon />\n                Save cart\n              </SubmitButton>\n              <SubmitButton\n                className=\"nw-button nw-button-primary\"\n                disabled={cart.lines.length === 0}\n                pending={prepareCheckout.isPending}\n                pendingLabel=\"Preparing...\"\n                onClick={prepareHandoff}\n              >\n                <ExternalIcon />\n                Prepare checkout\n              </SubmitButton>\n            </ActionBar>\n          </View>\n\n          <View name=\"review\">\n            <SectionHeader\n              title=\"Review order\"\n              detail={`${cart.lines.length} line${cart.lines.length === 1 ? '' : 's'}`}\n            />\n            <CartSummary lineItems={lineItems} subtotal={cart.subtotal} />\n            <ActionBar className=\"nw-actions\">\n              <button className=\"nw-button\" type=\"button\" onClick={() => setView('cart')}>\n                Edit cart\n              </button>\n              <SubmitButton\n                className=\"nw-button nw-button-primary\"\n                disabled={cart.lines.length === 0}\n                pending={prepareCheckout.isPending}\n                pendingLabel=\"Preparing...\"\n                onClick={prepareHandoff}\n              >\n                <ExternalIcon />\n                Prepare checkout\n              </SubmitButton>\n            </ActionBar>\n          </View>\n\n          <View name=\"handoff\">\n            <SectionHeader\n              title=\"Checkout handoff\"\n              detail=\"Payment stays with the ordering site.\"\n            />\n            <CartSummary lineItems={lineItems} subtotal={cart.subtotal} />\n            <p className=\"nw-note\">\n              The MCP App prepared a synthetic checkout URL and will open only the allowlisted\n              example domain.\n            </p>\n            <ActionBar className=\"nw-actions\">\n              <HandoffButton\n                handoff={handoff}\n                target={checkoutData?.checkoutUrl ?? cart.checkoutUrl ?? ''}\n                className=\"nw-button nw-button-primary\"\n                type=\"button\"\n                pendingLabel=\"Opening...\"\n              >\n                <ExternalIcon />\n                Continue checkout\n              </HandoffButton>\n              <button\n                className=\"nw-button\"\n                type=\"button\"\n                onClick={() =>\n                  sendFollowUpMessage({\n                    prompt: `Summarize my food order for ${customer} before checkout.`,\n                  })\n                }\n              >\n                <SparkIcon />\n                Ask assistant\n              </button>\n            </ActionBar>\n          </View>\n        </ViewStack>\n      </div>\n    </AppShell>\n  );\n}\n\nfunction SectionHeader({ title, detail }: { readonly title: string; readonly detail?: string }) {\n  return (\n    <div className=\"nw-section-head\">\n      <p className=\"nw-section-title\">{title}</p>\n      {detail ? <p className=\"nw-section-detail\">{detail}</p> : null}\n    </div>\n  );\n}\n\nfunction StoreList({\n  stores,\n  onChoose,\n}: {\n  readonly stores: readonly Store[];\n  readonly onChoose: (store: Store) => void;\n}) {\n  return (\n    <DataList className=\"nw-menu-list\">\n      {stores.map((store) => (\n        <DataCard\n          as=\"button\"\n          className=\"nw-menu-item\"\n          key={store.id}\n          type=\"button\"\n          onClick={() => onChoose(store)}\n        >\n          <span>\n            <span className=\"nw-menu-name\">{store.name}</span>\n            <span className=\"nw-menu-desc\">\n              {store.cuisine} · {store.address}\n            </span>\n          </span>\n          <StatusBadge className=\"nw-status\" tone={store.open ? 'success' : 'neutral'}>\n            {store.open ? `${store.etaMinutes}m` : 'Closed'}\n          </StatusBadge>\n        </DataCard>\n      ))}\n    </DataList>\n  );\n}\n\nfunction ItemList({\n  items,\n  onChoose,\n}: {\n  readonly items: readonly MenuItem[];\n  readonly onChoose: (item: MenuItem) => void;\n}) {\n  return (\n    <DataList className=\"nw-menu-list\">\n      {items.map((item) => (\n        <DataCard\n          as=\"button\"\n          className=\"nw-menu-item\"\n          key={item.id}\n          type=\"button\"\n          onClick={() => onChoose(item)}\n        >\n          <span>\n            <span className=\"nw-menu-name\">{item.name}</span>\n            <span className=\"nw-menu-desc\">{item.description}</span>\n          </span>\n          <span className=\"nw-price\">{currency(item.price)}</span>\n        </DataCard>\n      ))}\n    </DataList>\n  );\n}\n\nfunction CartSummary({\n  lineItems,\n  subtotal,\n}: {\n  readonly lineItems: readonly (CartLine & { readonly item?: MenuItem })[];\n  readonly subtotal: number;\n}) {\n  return (\n    <dl className=\"nw-summary\">\n      {lineItems.length === 0 ? (\n        <div className=\"nw-summary-row\">\n          <dt>No items yet</dt>\n          <dd>{currency(0)}</dd>\n        </div>\n      ) : (\n        lineItems.map((line, index) => (\n          <div className=\"nw-summary-row\" key={`${line.itemId}-${index}`}>\n            <dt>\n              {line.quantity} x {line.item?.name ?? line.itemId}\n              {line.modifiers.length > 0 ? (\n                <span className=\"nw-line-note\">{line.modifiers.map(modifierLabel).join(', ')}</span>\n              ) : null}\n            </dt>\n            <dd>{currency((line.item?.price ?? 0) * line.quantity)}</dd>\n          </div>\n        ))\n      )}\n      <div className=\"nw-summary-row nw-total\">\n        <dt>Subtotal</dt>\n        <dd>{currency(subtotal)}</dd>\n      </div>\n    </dl>\n  );\n}\n\nfunction BowlIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M4 11h16a7 7 0 0 1-7 7h-2a7 7 0 0 1-7-7Z\" />\n      <path d=\"M7 21h10\" />\n      <path d=\"M8 6c0-1 1-1 1-2\" />\n      <path d=\"M12 6c0-1 1-1 1-2\" />\n      <path d=\"M16 6c0-1 1-1 1-2\" />\n    </svg>\n  );\n}\n\nfunction SearchIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <path d=\"m20 20-4-4\" />\n    </svg>\n  );\n}\n\nfunction RefreshIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M20 12a8 8 0 1 1-2.3-5.6\" />\n      <path d=\"M20 4v5h-5\" />\n    </svg>\n  );\n}\n\nfunction BagIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M6 8h12l-1 12H7L6 8Z\" />\n      <path d=\"M9 8a3 3 0 0 1 6 0\" />\n    </svg>\n  );\n}\n\nfunction SaveIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M5 4h12l2 2v14H5V4Z\" />\n      <path d=\"M8 4v6h8\" />\n      <path d=\"M8 20v-5h8v5\" />\n    </svg>\n  );\n}\n\nfunction ExternalIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M14 4h6v6\" />\n      <path d=\"m20 4-9 9\" />\n      <path d=\"M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5\" />\n    </svg>\n  );\n}\n\nfunction SparkIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"m12 3 1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z\" />\n    </svg>\n  );\n}\n" },
+    { relPath: "examples/food-ordering/src/views/ordering-flow.tsx", content: "import { useEffect, useMemo, useState } from 'react';\nimport {\n  ActionBar,\n  AppShell,\n  AsyncBoundary,\n  ChoiceGroup,\n  createViewStore,\n  DataCard,\n  DataList,\n  Field,\n  HandoffButton,\n  QuantityStepper,\n  ShellNav,\n  StatusBadge,\n  SubmitButton,\n  useAppFlow,\n  useCallTool,\n  useHandoff,\n  useLayout,\n  useSendFollowUpMessage,\n  useToolInfo,\n  useUpdateModelContext,\n  useViewState,\n  useWidgetLifecycle,\n  View,\n  ViewStack,\n} from '../helpers.js';\nimport './widget-style.css';\n\ntype ViewName = 'stores' | 'menu' | 'item' | 'cart' | 'review' | 'handoff';\n\ntype Store = {\n  readonly id: string;\n  readonly name: string;\n  readonly cuisine: string;\n  readonly address: string;\n  readonly open: boolean;\n  readonly etaMinutes: number;\n  readonly rating: number;\n};\n\ntype MenuItem = {\n  readonly id: string;\n  readonly storeId: string;\n  readonly category: string;\n  readonly name: string;\n  readonly price: number;\n  readonly description: string;\n  readonly modifiers: readonly string[];\n};\n\ntype CartLine = {\n  readonly itemId: string;\n  readonly quantity: number;\n  readonly modifiers: readonly string[];\n  readonly note?: string;\n};\n\ntype CartState = {\n  readonly selectedStoreId?: string;\n  readonly lines: readonly CartLine[];\n  readonly customer: string;\n  readonly notes?: string;\n  readonly subtotal: number;\n  readonly status: 'draft' | 'review' | 'handoff';\n  readonly checkoutUrl?: string;\n};\n\nconst zeroCart: CartState = {\n  lines: [],\n  customer: 'Guest',\n  subtotal: 0,\n  status: 'draft',\n};\n\nconst useCartStore = createViewStore<CartState>('cart', zeroCart);\nconst useCartRevisionStore = createViewStore('cart_revision', { value: 0 });\n\nfunction structured<T>(value: unknown): T | undefined {\n  return (value as { structuredContent?: T } | undefined)?.structuredContent;\n}\n\nfunction currency(value: number): string {\n  return `$${value.toFixed(2)}`;\n}\n\nfunction modifierLabel(value: string): string {\n  return value\n    .split('_')\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join(' ');\n}\n\nexport default function OrderingFlow() {\n  const { displayMode, supports, theme } = useLayout();\n  const entry = structured<{\n    readonly customer?: string;\n    readonly stores?: readonly Store[];\n    readonly featuredItems?: readonly MenuItem[];\n    readonly status?: string;\n  }>(useToolInfo('open_ordering'));\n  const flow = useAppFlow<ViewName>({\n    key: 'ordering_flow',\n    initialView: 'stores',\n    views: ['stores', 'menu', 'item', 'cart', 'review', 'handoff'],\n  });\n  const view = flow.activeView;\n  const setView = flow.navigate;\n  const handoff = useHandoff();\n  const sendFollowUpMessage = useSendFollowUpMessage();\n  const updateModelContext = useUpdateModelContext();\n  const publishLifecycle = useWidgetLifecycle('ordering-flow');\n  const searchStores = useCallTool('search_stores');\n  const loadMenu = useCallTool('load_menu');\n  const loadItem = useCallTool('load_item');\n  const readCart = useCallTool('read_cart');\n  const syncCart = useCallTool('sync_cart');\n  const prepareCheckout = useCallTool('prepare_checkout');\n\n  const [query, setQuery] = useViewState('query', '');\n  const [customer, setCustomer] = useViewState('customer', entry?.customer ?? 'Guest');\n  const [selectedStoreId, setSelectedStoreId] = useViewState<string | undefined>(\n    'selected_store',\n    entry?.stores?.[0]?.id,\n  );\n  const [selectedItemId, setSelectedItemId] = useViewState<string | undefined>(\n    'selected_item',\n    entry?.featuredItems?.[0]?.id,\n  );\n  const cartStore = useCartStore();\n  const revisionStore = useCartRevisionStore((state) => state.value);\n  const cart =\n    cartStore.state.customer === 'Guest' && entry?.customer\n      ? { ...cartStore.state, customer: entry.customer }\n      : cartStore.state;\n  const revision = revisionStore.selected;\n  const setCart = cartStore.setState;\n  const setRevision = (value: number) => revisionStore.setState({ value });\n  const [quantity, setQuantity] = useState(1);\n  const [selectedModifiers, setSelectedModifiers] = useState<readonly string[]>([]);\n  const [lifecycle, setLifecycle] = useState<'active' | 'submitted'>('active');\n\n  const storeData = structured<{ readonly stores?: readonly Store[] }>(searchStores.data);\n  const menuData = structured<{\n    readonly stores?: readonly Store[];\n    readonly items?: readonly MenuItem[];\n  }>(loadMenu.data);\n  const itemData = structured<{ readonly items?: readonly MenuItem[] }>(loadItem.data);\n  const checkoutData = structured<{ readonly checkoutUrl?: string; readonly cart?: CartState }>(\n    prepareCheckout.data,\n  );\n  const stores = storeData?.stores ?? entry?.stores ?? [];\n  const queryText = query.trim().toLowerCase();\n  const displayedStores = stores.filter(\n    (store) =>\n      queryText.length === 0 ||\n      store.name.toLowerCase().includes(queryText) ||\n      store.cuisine.toLowerCase().includes(queryText),\n  );\n  const allItems = menuData?.items ?? itemData?.items ?? entry?.featuredItems ?? [];\n  const items = allItems.filter((item) => item.storeId === selectedStoreId);\n  const currentStore =\n    stores.find((store) => store.id === selectedStoreId) ?? menuData?.stores?.[0] ?? stores[0];\n  const currentItem = allItems.find((item) => item.id === selectedItemId) ?? items[0];\n  const lineItems = useMemo(\n    () =>\n      cart.lines.map((line) => ({\n        ...line,\n        item: [...(entry?.featuredItems ?? []), ...allItems].find(\n          (item) => item.id === line.itemId,\n        ),\n      })),\n    [cart.lines, entry?.featuredItems, allItems],\n  );\n  const llmSummary = `${view} view for ${customer}; ${cart.lines.length} cart lines; subtotal ${currency(\n    cart.subtotal,\n  )}`;\n  const canUpdateModelContext = supports?.modelContext === true;\n\n  useEffect(() => {\n    if (!canUpdateModelContext) return;\n    // Each call replaces model context, so publish one cohesive snapshot of current surface state.\n    void updateModelContext({\n      content: [{ type: 'text', text: `Food ordering: ${llmSummary}; ${lifecycle}.` }],\n      structuredContent: {\n        widget: { name: 'ordering-flow', lifecycle },\n        ordering: {\n          view,\n          customer,\n          cartLines: cart.lines.length,\n          subtotal: cart.subtotal,\n          selectedStoreId: selectedStoreId ?? null,\n          selectedItemId: selectedItemId ?? null,\n        },\n      },\n    });\n  }, [\n    canUpdateModelContext,\n    cart.lines.length,\n    cart.subtotal,\n    customer,\n    lifecycle,\n    llmSummary,\n    selectedItemId,\n    selectedStoreId,\n    updateModelContext,\n    view,\n  ]);\n\n  async function chooseStore(store: Store) {\n    setSelectedStoreId(store.id);\n    setView('menu');\n    const result = await loadMenu.callTool({ storeId: store.id });\n    const loaded = structured<{ readonly items?: readonly MenuItem[] }>(result);\n    setSelectedItemId(loaded?.items?.find((item) => item.storeId === store.id)?.id);\n  }\n\n  async function chooseItem(item: MenuItem) {\n    setSelectedItemId(item.id);\n    setSelectedModifiers([]);\n    setQuantity(1);\n    setView('item');\n    await loadItem.callTool({ itemId: item.id });\n  }\n\n  async function persistCart(nextCart: CartState, nextView: ViewName) {\n    const result = await syncCart.callTool({\n      selectedStoreId: nextCart.selectedStoreId,\n      lines: nextCart.lines,\n      customer: nextCart.customer,\n      notes: nextCart.notes,\n      subtotal: nextCart.subtotal,\n      expectedRevision: revision,\n    });\n    const synced = structured<{ readonly cart?: CartState; readonly revision?: number }>(result);\n    setCart(synced?.cart ?? nextCart);\n    setRevision(synced?.revision ?? revision + 1);\n    setView(nextView);\n  }\n\n  async function addCurrentItem() {\n    if (!currentItem) return;\n    const nextLines = [\n      ...cart.lines,\n      {\n        itemId: currentItem.id,\n        quantity,\n        modifiers: selectedModifiers,\n      },\n    ];\n    await persistCart(\n      {\n        ...cart,\n        selectedStoreId: currentStore?.id ?? selectedStoreId,\n        lines: nextLines,\n        customer,\n        subtotal: nextLines.reduce(\n          (sum, line) =>\n            sum +\n            ([...(entry?.featuredItems ?? []), ...allItems].find((item) => item.id === line.itemId)\n              ?.price ?? 0) *\n              line.quantity,\n          0,\n        ),\n        status: 'draft',\n      },\n      'cart',\n    );\n  }\n\n  async function prepareHandoff() {\n    const result = await prepareCheckout.callTool({\n      selectedStoreId: cart.selectedStoreId,\n      lines: cart.lines,\n      customer,\n      notes: cart.notes,\n      subtotal: cart.subtotal,\n      expectedRevision: revision,\n    });\n    const prepared = structured<{\n      readonly cart?: CartState;\n      readonly revision?: number;\n      readonly checkoutUrl?: string;\n    }>(result);\n    const preparedCart = prepared?.cart ?? cart;\n    setCart(preparedCart);\n    setRevision(prepared?.revision ?? revision + 1);\n    setLifecycle('submitted');\n    setView('handoff');\n    if (canUpdateModelContext) {\n      await publishLifecycle('submitted', {\n        view: 'handoff',\n        customer,\n        cartLines: preparedCart.lines.length,\n        subtotal: preparedCart.subtotal,\n        selectedStoreId: preparedCart.selectedStoreId ?? null,\n        selectedItemId: selectedItemId ?? null,\n      });\n    }\n    if (supports?.followUpMessage) {\n      await sendFollowUpMessage({\n        prompt: 'Checkout is prepared. Confirm the cart summary and explain the final handoff.',\n      });\n    }\n  }\n\n  return (\n    <AppShell\n      className={`nw-shell${theme === 'dark' ? ' dark' : ''}`}\n      data-llm={llmSummary}\n      title=\"Food Ordering\"\n      subtitle={entry?.status ?? 'Find a store, build a cart, and hand off checkout.'}\n      icon={<BowlIcon />}\n      badge={displayMode === 'fullscreen' ? 'Fullscreen' : view}\n      footer={\n        <>\n          <span className=\"nw-meta\">\n            <BagIcon />\n            {cart.lines.length} items\n          </span>\n          <span className=\"nw-meta\">Revision {revision}</span>\n        </>\n      }\n    >\n      <ShellNav\n        activeView={view}\n        aria-label=\"Ordering steps\"\n        items={(['stores', 'menu', 'cart', 'review', 'handoff'] as const).map((step) => ({\n          view: step,\n          label: step,\n        }))}\n        onNavigate={setView}\n      />\n      <div className=\"nw-body\">\n        <ViewStack flow={flow}>\n          <View name=\"stores\">\n            <div className=\"nw-field-grid\">\n              <Field className=\"nw-field\" label=\"Customer\">\n                <input\n                  className=\"nw-input\"\n                  value={customer}\n                  onChange={(event) => setCustomer(event.currentTarget.value)}\n                />\n              </Field>\n              <Field className=\"nw-field\" label=\"Search\">\n                <input\n                  className=\"nw-input\"\n                  value={query}\n                  placeholder=\"Noodles\"\n                  onChange={(event) => setQuery(event.currentTarget.value)}\n                />\n              </Field>\n            </div>\n            <ActionBar className=\"nw-actions\">\n              <SubmitButton\n                className=\"nw-button nw-button-primary\"\n                pending={searchStores.isPending}\n                pendingLabel=\"Searching...\"\n                onClick={() => searchStores.callTool({ query, openOnly: false })}\n              >\n                <SearchIcon />\n                Search stores\n              </SubmitButton>\n              <SubmitButton\n                className=\"nw-button\"\n                pending={readCart.isPending}\n                pendingLabel=\"Loading...\"\n                onClick={async () => {\n                  const result = await readCart.callTool({});\n                  const stored = structured<{\n                    readonly value?: CartState;\n                    readonly revision?: number;\n                  }>(result);\n                  if (stored?.value?.lines) setCart(stored.value);\n                  setRevision(stored?.revision ?? revision);\n                }}\n              >\n                <RefreshIcon />\n                Load cart\n              </SubmitButton>\n            </ActionBar>\n            <AsyncBoundary\n              state={searchStores}\n              isEmpty={displayedStores.length === 0}\n              empty=\"No matching stores\"\n            >\n              <StoreList stores={displayedStores} onChoose={chooseStore} />\n            </AsyncBoundary>\n          </View>\n\n          <View name=\"menu\">\n            <SectionHeader title={currentStore?.name ?? 'Menu'} detail={currentStore?.address} />\n            <AsyncBoundary\n              state={loadMenu}\n              isEmpty={items.length === 0}\n              empty=\"No menu items loaded\"\n            >\n              <ItemList items={items} onChoose={chooseItem} />\n            </AsyncBoundary>\n          </View>\n\n          <View name=\"item\">\n            {currentItem ? (\n              <>\n                <SectionHeader title={currentItem.name} detail={currentItem.description} />\n                <div className=\"nw-field-grid\">\n                  <Field className=\"nw-field\" label=\"Quantity\">\n                    <QuantityStepper value={quantity} min={1} onChange={setQuantity} />\n                  </Field>\n                  <div className=\"nw-summary nw-summary-compact\">\n                    <div className=\"nw-summary-row\">\n                      <dt>Price</dt>\n                      <dd>{currency(currentItem.price)}</dd>\n                    </div>\n                  </div>\n                </div>\n                <ChoiceGroup\n                  className=\"nw-modifier-grid\"\n                  values={currentItem.modifiers}\n                  selected={selectedModifiers}\n                  onChange={setSelectedModifiers}\n                  labelFor={modifierLabel}\n                />\n                <ActionBar className=\"nw-actions\">\n                  <SubmitButton\n                    className=\"nw-button nw-button-primary\"\n                    pending={syncCart.isPending}\n                    pendingLabel=\"Adding...\"\n                    onClick={addCurrentItem}\n                  >\n                    <BagIcon />\n                    Add to cart\n                  </SubmitButton>\n                  <button className=\"nw-button\" type=\"button\" onClick={() => setView('menu')}>\n                    Back to menu\n                  </button>\n                </ActionBar>\n              </>\n            ) : null}\n          </View>\n\n          <View name=\"cart\">\n            <SectionHeader\n              title=\"Cart\"\n              detail={`${cart.lines.length} line${cart.lines.length === 1 ? '' : 's'}`}\n            />\n            <CartSummary lineItems={lineItems} subtotal={cart.subtotal} />\n            <Field className=\"nw-field\" label=\"Notes\">\n              <input\n                className=\"nw-input\"\n                value={cart.notes ?? ''}\n                placeholder=\"Utensils, pickup name, or allergies\"\n                onChange={(event) => setCart({ ...cart, notes: event.currentTarget.value })}\n              />\n            </Field>\n            <ActionBar className=\"nw-actions\">\n              <SubmitButton\n                className=\"nw-button\"\n                pending={syncCart.isPending}\n                pendingLabel=\"Saving...\"\n                onClick={() => persistCart({ ...cart, customer, status: 'draft' }, 'review')}\n              >\n                <SaveIcon />\n                Save cart\n              </SubmitButton>\n              <SubmitButton\n                className=\"nw-button nw-button-primary\"\n                disabled={cart.lines.length === 0}\n                pending={prepareCheckout.isPending}\n                pendingLabel=\"Preparing...\"\n                onClick={prepareHandoff}\n              >\n                <ExternalIcon />\n                Prepare checkout\n              </SubmitButton>\n            </ActionBar>\n          </View>\n\n          <View name=\"review\">\n            <SectionHeader\n              title=\"Review order\"\n              detail={`${cart.lines.length} line${cart.lines.length === 1 ? '' : 's'}`}\n            />\n            <CartSummary lineItems={lineItems} subtotal={cart.subtotal} />\n            <ActionBar className=\"nw-actions\">\n              <button className=\"nw-button\" type=\"button\" onClick={() => setView('cart')}>\n                Edit cart\n              </button>\n              <SubmitButton\n                className=\"nw-button nw-button-primary\"\n                disabled={cart.lines.length === 0}\n                pending={prepareCheckout.isPending}\n                pendingLabel=\"Preparing...\"\n                onClick={prepareHandoff}\n              >\n                <ExternalIcon />\n                Prepare checkout\n              </SubmitButton>\n            </ActionBar>\n          </View>\n\n          <View name=\"handoff\">\n            <SectionHeader\n              title=\"Checkout handoff\"\n              detail=\"Payment stays with the ordering site.\"\n            />\n            <CartSummary lineItems={lineItems} subtotal={cart.subtotal} />\n            <p className=\"nw-note\">\n              The MCP App prepared a synthetic checkout URL and will open only the allowlisted\n              example domain.\n            </p>\n            <ActionBar className=\"nw-actions\">\n              <HandoffButton\n                handoff={handoff}\n                target={checkoutData?.checkoutUrl ?? cart.checkoutUrl ?? ''}\n                className=\"nw-button nw-button-primary\"\n                type=\"button\"\n                pendingLabel=\"Opening...\"\n              >\n                <ExternalIcon />\n                Continue checkout\n              </HandoffButton>\n              <button\n                className=\"nw-button\"\n                type=\"button\"\n                onClick={() =>\n                  sendFollowUpMessage({\n                    prompt: `Summarize my food order for ${customer} before checkout.`,\n                  })\n                }\n              >\n                <SparkIcon />\n                Ask assistant\n              </button>\n            </ActionBar>\n          </View>\n        </ViewStack>\n      </div>\n    </AppShell>\n  );\n}\n\nfunction SectionHeader({ title, detail }: { readonly title: string; readonly detail?: string }) {\n  return (\n    <div className=\"nw-section-head\">\n      <p className=\"nw-section-title\">{title}</p>\n      {detail ? <p className=\"nw-section-detail\">{detail}</p> : null}\n    </div>\n  );\n}\n\nfunction StoreList({\n  stores,\n  onChoose,\n}: {\n  readonly stores: readonly Store[];\n  readonly onChoose: (store: Store) => void;\n}) {\n  return (\n    <DataList className=\"nw-menu-list\">\n      {stores.map((store) => (\n        <DataCard\n          as=\"button\"\n          className=\"nw-menu-item\"\n          key={store.id}\n          type=\"button\"\n          onClick={() => onChoose(store)}\n        >\n          <span>\n            <span className=\"nw-menu-name\">{store.name}</span>\n            <span className=\"nw-menu-desc\">\n              {store.cuisine} · {store.address}\n            </span>\n          </span>\n          <StatusBadge className=\"nw-status\" tone={store.open ? 'success' : 'neutral'}>\n            {store.open ? `${store.etaMinutes}m` : 'Closed'}\n          </StatusBadge>\n        </DataCard>\n      ))}\n    </DataList>\n  );\n}\n\nfunction ItemList({\n  items,\n  onChoose,\n}: {\n  readonly items: readonly MenuItem[];\n  readonly onChoose: (item: MenuItem) => void;\n}) {\n  return (\n    <DataList className=\"nw-menu-list\">\n      {items.map((item) => (\n        <DataCard\n          as=\"button\"\n          className=\"nw-menu-item\"\n          key={item.id}\n          type=\"button\"\n          onClick={() => onChoose(item)}\n        >\n          <span>\n            <span className=\"nw-menu-name\">{item.name}</span>\n            <span className=\"nw-menu-desc\">{item.description}</span>\n          </span>\n          <span className=\"nw-price\">{currency(item.price)}</span>\n        </DataCard>\n      ))}\n    </DataList>\n  );\n}\n\nfunction CartSummary({\n  lineItems,\n  subtotal,\n}: {\n  readonly lineItems: readonly (CartLine & { readonly item?: MenuItem })[];\n  readonly subtotal: number;\n}) {\n  return (\n    <dl className=\"nw-summary\">\n      {lineItems.length === 0 ? (\n        <div className=\"nw-summary-row\">\n          <dt>No items yet</dt>\n          <dd>{currency(0)}</dd>\n        </div>\n      ) : (\n        lineItems.map((line, index) => (\n          <div className=\"nw-summary-row\" key={`${line.itemId}-${index}`}>\n            <dt>\n              {line.quantity} x {line.item?.name ?? line.itemId}\n              {line.modifiers.length > 0 ? (\n                <span className=\"nw-line-note\">{line.modifiers.map(modifierLabel).join(', ')}</span>\n              ) : null}\n            </dt>\n            <dd>{currency((line.item?.price ?? 0) * line.quantity)}</dd>\n          </div>\n        ))\n      )}\n      <div className=\"nw-summary-row nw-total\">\n        <dt>Subtotal</dt>\n        <dd>{currency(subtotal)}</dd>\n      </div>\n    </dl>\n  );\n}\n\nfunction BowlIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M4 11h16a7 7 0 0 1-7 7h-2a7 7 0 0 1-7-7Z\" />\n      <path d=\"M7 21h10\" />\n      <path d=\"M8 6c0-1 1-1 1-2\" />\n      <path d=\"M12 6c0-1 1-1 1-2\" />\n      <path d=\"M16 6c0-1 1-1 1-2\" />\n    </svg>\n  );\n}\n\nfunction SearchIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <path d=\"m20 20-4-4\" />\n    </svg>\n  );\n}\n\nfunction RefreshIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M20 12a8 8 0 1 1-2.3-5.6\" />\n      <path d=\"M20 4v5h-5\" />\n    </svg>\n  );\n}\n\nfunction BagIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M6 8h12l-1 12H7L6 8Z\" />\n      <path d=\"M9 8a3 3 0 0 1 6 0\" />\n    </svg>\n  );\n}\n\nfunction SaveIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M5 4h12l2 2v14H5V4Z\" />\n      <path d=\"M8 4v6h8\" />\n      <path d=\"M8 20v-5h8v5\" />\n    </svg>\n  );\n}\n\nfunction ExternalIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M14 4h6v6\" />\n      <path d=\"m20 4-9 9\" />\n      <path d=\"M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5\" />\n    </svg>\n  );\n}\n\nfunction SparkIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"m12 3 1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z\" />\n    </svg>\n  );\n}\n" },
     { relPath: "examples/food-ordering/src/views/widget-style.css", content: ":root {\n  color-scheme: light dark;\n  font-family:\n    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --nw-bg: #ffffff;\n  --nw-surface: #f7f7f5;\n  --nw-surface-strong: #ffffff;\n  --nw-text: #1f2328;\n  --nw-muted: #677079;\n  --nw-border: #d9dee3;\n  --nw-accent: #0f8f5f;\n  --nw-accent-strong: #047857;\n  --nw-accent-soft: #e8f7ef;\n  --nw-info: #1d6feb;\n  --nw-info-soft: #eaf2ff;\n  --nw-warn: #b7791f;\n  --nw-danger: #c2410c;\n  --nw-shadow: 0 18px 50px rgb(15 23 42 / 12%);\n  --nw-radius: 8px;\n}\n\n.dark,\n[data-theme=\"dark\"] {\n  --nw-bg: #111820;\n  --nw-surface: #16212a;\n  --nw-surface-strong: #101820;\n  --nw-text: #f4f7f8;\n  --nw-muted: #a4b0ba;\n  --nw-border: #33414c;\n  --nw-accent: #25c385;\n  --nw-accent-strong: #19a974;\n  --nw-accent-soft: #123a2b;\n  --nw-info: #4c9aff;\n  --nw-info-soft: #132b4d;\n  --nw-warn: #f0b35b;\n  --nw-danger: #fb7b54;\n  --nw-shadow: 0 18px 50px rgb(0 0 0 / 28%);\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n}\n\nbutton,\ninput,\nselect {\n  font: inherit;\n}\n\n.nw-shell {\n  min-height: 100vh;\n  padding: 14px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n}\n\n.nw-card {\n  width: min(100%, 560px);\n  margin: 0 auto;\n  border: 1px solid var(--nw-border);\n  border-radius: var(--nw-radius);\n  background: var(--nw-surface-strong);\n  box-shadow: var(--nw-shadow);\n  overflow: hidden;\n}\n\n.nw-card-wide {\n  width: min(100%, 720px);\n}\n\n.nsr-card {\n  width: min(100%, 560px);\n  margin: 0 auto;\n  border: 1px solid var(--nw-border);\n  border-radius: var(--nw-radius);\n  background: var(--nw-surface-strong);\n  box-shadow: var(--nw-shadow);\n  overflow: hidden;\n}\n\n.nsr-card-wide {\n  width: min(100%, 720px);\n}\n\n.nw-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 14px;\n  border-bottom: 1px solid var(--nw-border);\n}\n\n.nsr-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 14px;\n  border-bottom: 1px solid var(--nw-border);\n}\n\n.nw-icon {\n  display: inline-grid;\n  width: 32px;\n  height: 32px;\n  flex: 0 0 auto;\n  place-items: center;\n  border-radius: 8px;\n  background: linear-gradient(145deg, var(--nw-accent), var(--nw-accent-strong));\n  color: white;\n}\n\n.nsr-icon {\n  display: inline-grid;\n  width: 32px;\n  height: 32px;\n  flex: 0 0 auto;\n  place-items: center;\n  border-radius: 8px;\n  background: linear-gradient(145deg, var(--nw-accent), var(--nw-accent-strong));\n  color: white;\n}\n\n.nw-icon svg,\n.nsr-icon svg,\n.nw-button svg,\n.nw-meta svg {\n  width: 16px;\n  height: 16px;\n  stroke: currentColor;\n  stroke-width: 2;\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.nw-title-block {\n  min-width: 0;\n  flex: 1;\n}\n\n.nsr-title-block {\n  min-width: 0;\n  flex: 1;\n}\n\n.nw-title {\n  margin: 0;\n  font-size: 16px;\n  line-height: 1.2;\n  font-weight: 700;\n  letter-spacing: 0;\n}\n\n.nsr-title {\n  margin: 0;\n  font-size: 16px;\n  line-height: 1.2;\n  font-weight: 700;\n  letter-spacing: 0;\n}\n\n.nw-subtitle {\n  margin: 4px 0 0;\n  color: var(--nw-muted);\n  font-size: 12px;\n  line-height: 1.35;\n}\n\n.nsr-subtitle {\n  margin: 4px 0 0;\n  color: var(--nw-muted);\n  font-size: 12px;\n  line-height: 1.35;\n}\n\n.nw-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 24px;\n  padding: 3px 9px;\n  border: 1px solid var(--nw-border);\n  border-radius: 999px;\n  background: var(--nw-surface);\n  color: var(--nw-text);\n  font-size: 12px;\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n.nsr-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 24px;\n  padding: 3px 9px;\n  border: 1px solid var(--nw-border);\n  border-radius: 999px;\n  background: var(--nw-surface);\n  color: var(--nw-text);\n  font-size: 12px;\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n.nw-chip::before {\n  width: 7px;\n  height: 7px;\n  border-radius: 99px;\n  background: var(--nw-accent);\n  content: \"\";\n}\n\n.nsr-chip::before {\n  width: 7px;\n  height: 7px;\n  border-radius: 99px;\n  background: var(--nw-accent);\n  content: \"\";\n}\n\n.nw-tabs {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: 1px;\n  border-bottom: 1px solid var(--nw-border);\n  background: var(--nw-border);\n}\n\n.nsr-tabs {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: 1px;\n  border-bottom: 1px solid var(--nw-border);\n  background: var(--nw-border);\n}\n\n.nw-tab {\n  min-width: 0;\n  min-height: 34px;\n  border: 0;\n  background: var(--nw-surface-strong);\n  color: var(--nw-muted);\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: capitalize;\n  cursor: pointer;\n}\n\n.nsr-tab {\n  min-width: 0;\n  min-height: 34px;\n  border: 0;\n  background: var(--nw-surface-strong);\n  color: var(--nw-muted);\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: capitalize;\n  cursor: pointer;\n}\n\n.nw-tab[aria-current=\"step\"] {\n  color: var(--nw-text);\n  background: var(--nw-accent-soft);\n}\n\n.nsr-tab[aria-current=\"step\"] {\n  color: var(--nw-text);\n  background: var(--nw-accent-soft);\n}\n\n.nw-body {\n  display: grid;\n  gap: 14px;\n  padding: 14px;\n}\n\n.nw-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.75fr);\n  gap: 14px;\n}\n\n.nw-section-title {\n  margin: 0 0 8px;\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.nw-section-head {\n  display: grid;\n  gap: 2px;\n}\n\n.nw-section-detail {\n  margin: 0;\n  color: var(--nw-muted);\n  font-size: 12px;\n}\n\n.nw-menu-list,\n.nw-summary-list,\n.nw-feature-list {\n  display: grid;\n  gap: 8px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.nw-menu-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 10px;\n  width: 100%;\n  padding: 10px;\n  border: 1px solid var(--nw-border);\n  border-radius: var(--nw-radius);\n  background: var(--nw-bg);\n  color: var(--nw-text);\n  text-align: left;\n  cursor: pointer;\n}\n\n.nw-menu-item[aria-pressed=\"true\"] {\n  border-color: var(--nw-accent);\n  background: var(--nw-accent-soft);\n}\n\n.nw-menu-name,\n.nw-feature-name {\n  display: block;\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.nw-menu-desc,\n.nw-feature-desc {\n  display: block;\n  margin-top: 3px;\n  color: var(--nw-muted);\n  font-size: 12px;\n  line-height: 1.35;\n}\n\n.nw-price {\n  align-self: center;\n  color: var(--nw-text);\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.nw-status {\n  align-self: center;\n  color: var(--nw-muted);\n  font-size: 12px;\n  font-weight: 800;\n  white-space: nowrap;\n}\n\n.nw-status-ok {\n  color: var(--nw-accent-strong);\n}\n\n.nw-field-grid {\n  display: grid;\n  grid-template-columns: 1fr 120px;\n  gap: 10px;\n}\n\n.nw-field {\n  display: grid;\n  gap: 5px;\n  color: var(--nw-muted);\n  font-size: 12px;\n  font-weight: 650;\n}\n\n.nsr-field-label {\n  color: var(--nw-muted);\n}\n\n.nsr-stepper {\n  display: grid;\n  grid-template-columns: 34px minmax(42px, 1fr) 34px;\n  width: 100%;\n  min-height: 34px;\n  border: 1px solid var(--nw-border);\n  border-radius: 7px;\n  overflow: hidden;\n  background: var(--nw-bg);\n}\n\n.nsr-stepper button {\n  border: 0;\n  background: var(--nw-surface);\n  color: var(--nw-text);\n  cursor: pointer;\n}\n\n.nsr-stepper button:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.nsr-stepper-value {\n  display: grid;\n  place-items: center;\n  color: var(--nw-text);\n  font-size: 13px;\n  font-weight: 800;\n}\n\n.nw-input,\n.nw-select {\n  min-width: 0;\n  width: 100%;\n  min-height: 34px;\n  padding: 7px 9px;\n  border: 1px solid var(--nw-border);\n  border-radius: 7px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n  outline: none;\n}\n\n.nw-input:focus,\n.nw-select:focus,\n.nw-button:focus-visible,\n.nw-menu-item:focus-visible {\n  border-color: var(--nw-info);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nw-info) 24%, transparent);\n}\n\n.nw-modifier-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 8px;\n}\n\n.nw-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px;\n  border: 1px solid var(--nw-border);\n  border-radius: 7px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n  font-size: 12px;\n  font-weight: 650;\n}\n\n.nsr-choice {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px;\n  border: 1px solid var(--nw-border);\n  border-radius: 7px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n  font-size: 12px;\n  font-weight: 650;\n}\n\n.nw-summary {\n  display: grid;\n  gap: 8px;\n  padding: 10px;\n  border: 1px solid var(--nw-border);\n  border-radius: var(--nw-radius);\n  background: var(--nw-surface);\n}\n\n.nw-summary-compact {\n  align-self: end;\n}\n\n.nw-summary-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid color-mix(in srgb, var(--nw-border) 70%, transparent);\n}\n\n.nw-summary-row:last-child {\n  padding-bottom: 0;\n  border-bottom: 0;\n}\n\n.nw-summary-row dt {\n  color: var(--nw-muted);\n  font-size: 12px;\n}\n\n.nw-line-note {\n  display: block;\n  margin-top: 2px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.nw-summary-row dd {\n  margin: 0;\n  text-align: right;\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.nw-total dd {\n  font-size: 18px;\n}\n\n.nw-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.nsr-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.nw-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  min-height: 36px;\n  padding: 8px 12px;\n  border: 1px solid var(--nw-border);\n  border-radius: 7px;\n  background: var(--nw-bg);\n  color: var(--nw-text);\n  font-size: 13px;\n  font-weight: 700;\n  cursor: pointer;\n}\n\n.nw-button-primary {\n  border-color: var(--nw-accent-strong);\n  background: linear-gradient(145deg, var(--nw-accent), var(--nw-accent-strong));\n  color: white;\n}\n\n.nw-button-info {\n  border-color: var(--nw-info);\n  background: var(--nw-info);\n  color: white;\n}\n\n.nw-button:disabled {\n  cursor: wait;\n  opacity: 0.65;\n}\n\n.nw-note {\n  margin: 0;\n  padding: 10px;\n  border: 1px solid var(--nw-border);\n  border-radius: var(--nw-radius);\n  background: var(--nw-surface);\n  color: var(--nw-muted);\n  font-size: 12px;\n  line-height: 1.45;\n}\n\n.nw-footer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 10px 14px;\n  border-top: 1px solid var(--nw-border);\n  color: var(--nw-muted);\n  font-size: 12px;\n}\n\n.nsr-footer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 10px 14px;\n  border-top: 1px solid var(--nw-border);\n  color: var(--nw-muted);\n  font-size: 12px;\n}\n\n.nw-meta {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.nw-feature {\n  display: grid;\n  grid-template-columns: 24px minmax(0, 1fr);\n  gap: 10px;\n  padding: 10px;\n  border: 1px solid var(--nw-border);\n  border-radius: var(--nw-radius);\n  background: var(--nw-bg);\n}\n\n.nw-check {\n  display: inline-grid;\n  width: 22px;\n  height: 22px;\n  place-items: center;\n  border-radius: 6px;\n  background: var(--nw-accent);\n  color: white;\n  font-size: 13px;\n  font-weight: 800;\n}\n\n.nw-check svg {\n  width: 14px;\n  height: 14px;\n  stroke: currentColor;\n  stroke-width: 3;\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n@media (max-width: 560px) {\n  .nw-shell {\n    padding: 10px;\n  }\n\n  .nw-grid,\n  .nw-field-grid,\n  .nw-modifier-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .nw-tabs {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .nsr-tabs {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .nw-header {\n    align-items: flex-start;\n  }\n\n  .nsr-header {\n    align-items: flex-start;\n  }\n\n  .nw-chip {\n    max-width: 120px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .nsr-chip {\n    max-width: 120px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .nw-button {\n    flex: 1 1 140px;\n  }\n}\n" },
-    { relPath: "examples/food-ordering/test/server.test.ts", content: "import { describe, expect, it } from 'vitest';\nimport app from '../src/server.js';\n\ndescribe('food-ordering example', () => {\n  it('exports a Noodle server definition', () => {\n    expect(typeof app.toManifest).toBe('function');\n  });\n\n  it('emits a complete ordering app manifest with cart state and app-only helpers', async () => {\n    const manifest = (await app.toManifest()) as {\n      server: {\n        name: string;\n      };\n      handoff?: { allowedDomains?: string[] };\n      state?: { handles?: Record<string, { kind: string; scope: string }> };\n      connectors?: Record<string, { id: string; version: string }>;\n      tools: Array<{\n        name: string;\n        visibility?: string[];\n        output?: unknown;\n      }>;\n      widgets?: Array<{\n        name: string;\n        tool: string;\n        view?: { component?: string; entry?: string };\n      }>;\n    };\n\n    expect(manifest.server.name).toBe('food_ordering');\n    expect(manifest.state?.handles?.cart).toMatchObject({\n      kind: 'cart',\n      scope: 'caller',\n    });\n    expect(manifest.handoff?.allowedDomains).toEqual(['https://orders.example.com']);\n    expect(manifest.connectors?.state).toEqual({ id: 'noodle_state', version: '1.0.0' });\n\n    const tools = new Map(manifest.tools.map((tool) => [tool.name, tool]));\n    expect(manifest.widgets?.find((widget) => widget.tool === 'open_ordering')?.view).toMatchObject(\n      {\n        component: 'ordering-flow',\n        entry: './views/ordering-flow.tsx',\n      },\n    );\n    for (const helper of [\n      'search_stores',\n      'load_menu',\n      'load_item',\n      'read_cart',\n      'sync_cart',\n      'prepare_checkout',\n    ]) {\n      expect(tools.get(helper)?.visibility).toEqual(['app']);\n    }\n    expect(JSON.stringify(tools.get('open_ordering'))).toContain('featuredItems');\n    expect(JSON.stringify(tools.get('sync_cart'))).toContain('revision');\n    expect(manifest.widgets?.map((widget) => widget.name)).toContain('capabilities_card');\n  });\n});\n" },
+    { relPath: "examples/food-ordering/test/server.test.ts", content: "import { describe, expect, it } from 'vitest';\nimport app from '../src/server.js';\n\ndescribe('food-ordering example', () => {\n  it('exports a Noodle server definition', () => {\n    expect(typeof app.toManifest).toBe('function');\n  });\n\n  it('emits a complete ordering app manifest with cart state and app-only helpers', async () => {\n    const manifest = (await app.toManifest()) as {\n      server: {\n        name: string;\n        context?: {\n          defaults?: { locale?: string; timeZone?: string };\n          ambient?: {\n            outputSchema?: unknown;\n            fulfilment?: { output?: unknown };\n          };\n        };\n      };\n      handoff?: { allowedDomains?: string[] };\n      state?: { handles?: Record<string, { kind: string; scope: string }> };\n      connectors?: Record<string, { id: string; version: string }>;\n      tools: Array<{\n        name: string;\n        visibility?: string[];\n        annotations?: Record<string, unknown>;\n        output?: unknown;\n        fulfilment?: { steps?: unknown[]; output?: unknown };\n      }>;\n      widgets?: Array<{\n        name: string;\n        tool: string;\n        view?: { component?: string; entry?: string };\n      }>;\n    };\n\n    expect(manifest.server.name).toBe('food_ordering');\n    expect(manifest.server.context).toMatchObject({\n      defaults: { locale: 'en-US', timeZone: 'America/New_York' },\n      ambient: {\n        fulfilment: {\n          output: {\n            serviceArea: 'Harbor District',\n            orderingDate: '${context.temporal.localDate}',\n          },\n        },\n      },\n    });\n    expect(manifest.state?.handles?.cart).toMatchObject({\n      kind: 'cart',\n      scope: 'caller',\n    });\n    expect(manifest.handoff?.allowedDomains).toEqual(['https://orders.example.com']);\n    expect(manifest.connectors?.state).toEqual({ id: 'noodle_state', version: '1.0.0' });\n\n    const tools = new Map(manifest.tools.map((tool) => [tool.name, tool]));\n    expect(manifest.widgets?.find((widget) => widget.tool === 'open_ordering')?.view).toMatchObject(\n      {\n        component: 'ordering-flow',\n        entry: './views/ordering-flow.tsx',\n      },\n    );\n    for (const helper of [\n      'search_stores',\n      'load_menu',\n      'load_item',\n      'read_cart',\n      'sync_cart',\n      'prepare_checkout',\n    ]) {\n      expect(tools.get(helper)?.visibility).toEqual(['app']);\n    }\n    expect(JSON.stringify(tools.get('open_ordering'))).toContain('featuredItems');\n    expect(JSON.stringify(tools.get('open_ordering'))).toContain('${context.temporal.localDate}');\n    expect(JSON.stringify(tools.get('open_ordering'))).toContain('${context.ambient.serviceArea}');\n    expect(JSON.stringify(tools.get('sync_cart'))).toContain('revision');\n    expect(tools.get('sync_cart')?.annotations?.confirm).toBe(false);\n    expect(tools.get('prepare_checkout')?.annotations?.confirm).toBe(false);\n    expect(tools.get('plan_order')?.fulfilment).toMatchObject({\n      steps: [\n        {\n          id: 'choose_fulfilment',\n          elicit: {\n            message: 'How should we fulfil this order?',\n            requestedSchema: {\n              type: 'object',\n              properties: {\n                method: { type: 'string', enum: ['pickup', 'delivery'] },\n                requestedDate: { type: 'string', format: 'date' },\n              },\n              required: ['method', 'requestedDate'],\n            },\n          },\n        },\n      ],\n      output: {\n        method: '${steps.choose_fulfilment.method}',\n        requestedDate: '${steps.choose_fulfilment.requestedDate}',\n      },\n    });\n    expect(manifest.widgets?.map((widget) => widget.name)).toContain('capabilities_card');\n  });\n});\n" },
     { relPath: "examples/food-ordering/vitest.config.ts", content: "import { defineConfig } from 'vitest/config';\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      '@noodleseed/one': new URL('../../packages/authoring/src/index.ts', import.meta.url).pathname,\n      '@noodle-borg/capabilities': new URL(\n        '../../packages/capabilities/src/index.ts',\n        import.meta.url,\n      ).pathname,\n      '@noodle-borg/compiler': new URL('../../packages/compiler/src/index.ts', import.meta.url)\n        .pathname,\n      '@noodle-borg/compute': new URL('../../packages/compute/src/index.ts', import.meta.url)\n        .pathname,\n      '@noodle-borg/connector-defs': new URL(\n        '../../packages/connector-defs/src/index.ts',\n        import.meta.url,\n      ).pathname,\n      '@noodle-borg/connector-http': new URL(\n        '../../packages/connector-http/src/index.ts',\n        import.meta.url,\n      ).pathname,\n      '@noodle-borg/runtime': new URL('../../packages/runtime/src/index.ts', import.meta.url)\n        .pathname,\n    },\n  },\n  test: {\n    include: ['test/**/*.test.ts'],\n  },\n});\n" },
     { relPath: "examples/hello/README.md", content: "# hello — minimal TypeScript quickstart\n\nThe smallest deployable Noodle app: a single `greet` tool authored in TypeScript with no\nconnectors, secrets, flows, widgets, or handoff policy. It still uses the current server options form\nso new authors see where server-level branding belongs. Use it to smoke the author loop\n(`noodle validate` / `noodle dev`) or a first deploy.\n\n```sh\nnoodle dev examples/hello/src/server.ts --app hello\nnoodle deploy examples/hello/src/server.ts --org acme --app hello\n```\n\n`noodle export manifest examples/hello/src/server.ts` compiles the same entrypoint locally and prints\nthe portable, vendor-neutral manifest JSON — the eject path: your `server.ts` plus this manifest is\nthe whole app, yours to read, diff, and keep.\n\nIt is also the fixture for `pnpm smoke:dev` and the e2e harness, so keep its tool surface stable.\n" },
     { relPath: "examples/hello/noodle.json", content: "{\n  \"entrypoint\": \"src/server.ts\",\n  \"name\": \"hello\",\n  \"template\": \"hello\"\n}\n" },

package/node_modules/@noodle-borg/agent-kit/dist/generated/example-files.js.map

@@ -1 +1 @@
-{"version":3,"file":"example-files.js","sourceRoot":"","sources":["../../src/generated/example-files.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,kFAAkF;AAClF,iGAAiG;AAQjG,uGAAuG;AACvG,MAAM,CAAC,MAAM,qBAAqB,GAAsB;IACtD,OAAO;IACP,SAAS;IACT,eAAe;IACf,gBAAgB;IAChB,YAAY;IACZ,aAAa;IACb,eAAe;CAChB,CAAC;AAEF,yGAAyG;AACzG,MAAM,CAAC,MAAM,qBAAqB,GAAkC;IAClE,EAAE,OAAO,EAAE,gCAAgC,EAAE,OAAO,EAAE,soEAAsoE,EAAE;IAC9rE,EAAE,OAAO,EAAE,4CAA4C,EAAE,OAAO,EAAE,u/wBAAu/wB,EAAE;IAC3jxB,EAAE,OAAO,EAAE,6CAA6C,EAAE,OAAO,EAAE,kkQAAkkQ,EAAE;IACvoQ,EAAE,OAAO,EAAE,4CAA4C,EAAE,OAAO,EAAE,klqDAAklqD,EAAE;IACtpqD,EAAE,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,wGAAwG,EAAE;IAClK,EAAE,OAAO,EAAE,mCAAmC,EAAE,OAAO,EAAE,mfAAmf,EAAE;IAC9iB,EAAE,OAAO,EAAE,qCAAqC,EAAE,OAAO,EAAE,yRAAyR,EAAE;IACtV,EAAE,OAAO,EAAE,oCAAoC,EAAE,OAAO,EAAE,i9LAAi9L,EAAE;IAC7gM,EAAE,OAAO,EAAE,8CAA8C,EAAE,OAAO,EAAE,okLAAokL,EAAE;IAC1oL,EAAE,OAAO,EAAE,iDAAiD,EAAE,OAAO,EAAE,8zHAA8zH,EAAE;IACv4H,EAAE,OAAO,EAAE,0CAA0C,EAAE,OAAO,EAAE,wyBAAwyB,EAAE;IAC12B,EAAE,OAAO,EAAE,uCAAuC,EAAE,OAAO,EAAE,uRAAuR,EAAE;IACtV,EAAE,OAAO,EAAE,mCAAmC,EAAE,OAAO,EAAE,2tIAA2tI,EAAE;IACtxI,EAAE,OAAO,EAAE,+CAA+C,EAAE,OAAO,EAAE,mrhCAAmrhC,EAAE;IAC1vhC,EAAE,OAAO,EAAE,+CAA+C,EAAE,OAAO,EAAE,g4sDAAg4sD,EAAE;IACv8sD,EAAE,OAAO,EAAE,qCAAqC,EAAE,OAAO,EAAE,2GAA2G,EAAE;IACxK,EAAE,OAAO,EAAE,sCAAsC,EAAE,OAAO,EAAE,sfAAsf,EAAE;IACpjB,EAAE,OAAO,EAAE,wCAAwC,EAAE,OAAO,EAAE,yRAAyR,EAAE;IACzV,EAAE,OAAO,EAAE,uCAAuC,EAAE,OAAO,EAAE,gqOAAgqO,EAAE;IAC/tO,EAAE,OAAO,EAAE,0DAA0D,EAAE,OAAO,EAAE,4jLAA4jL,EAAE;IAC9oL,EAAE,OAAO,EAAE,oDAAoD,EAAE,OAAO,EAAE,ijHAAijH,EAAE;IAC7nH,EAAE,OAAO,EAAE,6CAA6C,EAAE,OAAO,EAAE,8/BAA8/B,EAAE;IACnkC,EAAE,OAAO,EAAE,0CAA0C,EAAE,OAAO,EAAE,uRAAuR,EAAE;IACzV,EAAE,OAAO,EAAE,+BAA+B,EAAE,OAAO,EAAE,goLAAgoL,EAAE;IACvrL,EAAE,OAAO,EAAE,2CAA2C,EAAE,OAAO,EAAE,o8nBAAo8nB,EAAE;IACvgoB,EAAE,OAAO,EAAE,2CAA2C,EAAE,OAAO,EAAE,k1nDAAk1nD,EAAE;IACr5nD,EAAE,OAAO,EAAE,iCAAiC,EAAE,OAAO,EAAE,uGAAuG,EAAE;IAChK,EAAE,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,kfAAkf,EAAE;IAC5iB,EAAE,OAAO,EAAE,oCAAoC,EAAE,OAAO,EAAE,qQAAqQ,EAAE;IACjU,EAAE,OAAO,EAAE,mCAAmC,EAAE,OAAO,EAAE,+7JAA+7J,EAAE;IAC1/J,EAAE,OAAO,EAAE,6CAA6C,EAAE,OAAO,EAAE,yrNAAyrN,EAAE;IAC9vN,EAAE,OAAO,EAAE,gDAAgD,EAAE,OAAO,EAAE,o6HAAo6H,EAAE;IAC5+H,EAAE,OAAO,EAAE,yCAAyC,EAAE,OAAO,EAAE,83BAA83B,EAAE;IAC/7B,EAAE,OAAO,EAAE,sCAAsC,EAAE,OAAO,EAAE,uRAAuR,EAAE;IACrV,EAAE,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,moVAAmoV,EAAE;IAC7rV,EAAE,OAAO,EAAE,oCAAoC,EAAE,OAAO,EAAE,6EAA6E,EAAE;IACzI,EAAE,OAAO,EAAE,qCAAqC,EAAE,OAAO,EAAE,mXAAmX,EAAE;IAChb,EAAE,OAAO,EAAE,sCAAsC,EAAE,OAAO,EAAE,m3IAAm3I,EAAE;IACj7I,EAAE,OAAO,EAAE,4CAA4C,EAAE,OAAO,EAAE,o9BAAo9B,EAAE;IACxhC,EAAE,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,q3HAAq3H,EAAE;IAC/6H,EAAE,OAAO,EAAE,oCAAoC,EAAE,OAAO,EAAE,0GAA0G,EAAE;IACtK,EAAE,OAAO,EAAE,qCAAqC,EAAE,OAAO,EAAE,mlBAAmlB,EAAE;IAChpB,EAAE,OAAO,EAAE,uCAAuC,EAAE,OAAO,EAAE,+mBAA+mB,EAAE;IAC9qB,EAAE,OAAO,EAAE,sCAAsC,EAAE,OAAO,EAAE,29YAA29Y,EAAE;IACzhZ,EAAE,OAAO,EAAE,wDAAwD,EAAE,OAAO,EAAE,yzJAAyzJ,EAAE;IACz4J,EAAE,OAAO,EAAE,oDAAoD,EAAE,OAAO,EAAE,kiqBAAkiqB,EAAE;IAC9mqB,EAAE,OAAO,EAAE,mDAAmD,EAAE,OAAO,EAAE,ynYAAynY,EAAE;IACpsY,EAAE,OAAO,EAAE,4CAA4C,EAAE,OAAO,EAAE,6/DAA6/D,EAAE;IACjkE,EAAE,OAAO,EAAE,yCAAyC,EAAE,OAAO,EAAE,6iCAA6iC,EAAE;IAC9mC,EAAE,OAAO,EAAE,0BAA0B,EAAE,OAAO,EAAE,s2BAAs2B,EAAE;IACx5B,EAAE,OAAO,EAAE,4BAA4B,EAAE,OAAO,EAAE,iGAAiG,EAAE;IACrJ,EAAE,OAAO,EAAE,6BAA6B,EAAE,OAAO,EAAE,2WAA2W,EAAE;IACha,EAAE,OAAO,EAAE,8BAA8B,EAAE,OAAO,EAAE,s1BAAs1B,EAAE;IAC54B,EAAE,OAAO,EAAE,oCAAoC,EAAE,OAAO,EAAE,msBAAmsB,EAAE;IAC/vB,EAAE,OAAO,EAAE,4BAA4B,EAAE,OAAO,EAAE,48HAA48H,EAAE;IAChgI,EAAE,OAAO,EAAE,8BAA8B,EAAE,OAAO,EAAE,uEAAuE,EAAE;IAC7H,EAAE,OAAO,EAAE,+BAA+B,EAAE,OAAO,EAAE,6WAA6W,EAAE;IACpa,EAAE,OAAO,EAAE,gCAAgC,EAAE,OAAO,EAAE,kmTAAkmT,EAAE;IAC1pT,EAAE,OAAO,EAAE,sCAAsC,EAAE,OAAO,EAAE,gzCAAgzC,EAAE;CAC/2C,CAAC"}
+{"version":3,"file":"example-files.js","sourceRoot":"","sources":["../../src/generated/example-files.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,kFAAkF;AAClF,iGAAiG;AAQjG,uGAAuG;AACvG,MAAM,CAAC,MAAM,qBAAqB,GAAsB;IACtD,OAAO;IACP,SAAS;IACT,eAAe;IACf,gBAAgB;IAChB,YAAY;IACZ,aAAa;IACb,eAAe;CAChB,CAAC;AAEF,yGAAyG;AACzG,MAAM,CAAC,MAAM,qBAAqB,GAAkC;IAClE,EAAE,OAAO,EAAE,gCAAgC,EAAE,OAAO,EAAE,soEAAsoE,EAAE;IAC9rE,EAAE,OAAO,EAAE,4CAA4C,EAAE,OAAO,EAAE,u/wBAAu/wB,EAAE;IAC3jxB,EAAE,OAAO,EAAE,6CAA6C,EAAE,OAAO,EAAE,kkQAAkkQ,EAAE;IACvoQ,EAAE,OAAO,EAAE,4CAA4C,EAAE,OAAO,EAAE,klqDAAklqD,EAAE;IACtpqD,EAAE,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,wGAAwG,EAAE;IAClK,EAAE,OAAO,EAAE,mCAAmC,EAAE,OAAO,EAAE,mfAAmf,EAAE;IAC9iB,EAAE,OAAO,EAAE,qCAAqC,EAAE,OAAO,EAAE,yRAAyR,EAAE;IACtV,EAAE,OAAO,EAAE,oCAAoC,EAAE,OAAO,EAAE,i+LAAi+L,EAAE;IAC7hM,EAAE,OAAO,EAAE,8CAA8C,EAAE,OAAO,EAAE,okLAAokL,EAAE;IAC1oL,EAAE,OAAO,EAAE,iDAAiD,EAAE,OAAO,EAAE,8zHAA8zH,EAAE;IACv4H,EAAE,OAAO,EAAE,0CAA0C,EAAE,OAAO,EAAE,wyBAAwyB,EAAE;IAC12B,EAAE,OAAO,EAAE,uCAAuC,EAAE,OAAO,EAAE,uRAAuR,EAAE;IACtV,EAAE,OAAO,EAAE,mCAAmC,EAAE,OAAO,EAAE,2tIAA2tI,EAAE;IACtxI,EAAE,OAAO,EAAE,+CAA+C,EAAE,OAAO,EAAE,mrhCAAmrhC,EAAE;IAC1vhC,EAAE,OAAO,EAAE,+CAA+C,EAAE,OAAO,EAAE,g4sDAAg4sD,EAAE;IACv8sD,EAAE,OAAO,EAAE,qCAAqC,EAAE,OAAO,EAAE,2GAA2G,EAAE;IACxK,EAAE,OAAO,EAAE,sCAAsC,EAAE,OAAO,EAAE,sfAAsf,EAAE;IACpjB,EAAE,OAAO,EAAE,wCAAwC,EAAE,OAAO,EAAE,yRAAyR,EAAE;IACzV,EAAE,OAAO,EAAE,uCAAuC,EAAE,OAAO,EAAE,grOAAgrO,EAAE;IAC/uO,EAAE,OAAO,EAAE,0DAA0D,EAAE,OAAO,EAAE,4jLAA4jL,EAAE;IAC9oL,EAAE,OAAO,EAAE,oDAAoD,EAAE,OAAO,EAAE,ijHAAijH,EAAE;IAC7nH,EAAE,OAAO,EAAE,6CAA6C,EAAE,OAAO,EAAE,8/BAA8/B,EAAE;IACnkC,EAAE,OAAO,EAAE,0CAA0C,EAAE,OAAO,EAAE,uRAAuR,EAAE;IACzV,EAAE,OAAO,EAAE,+BAA+B,EAAE,OAAO,EAAE,goLAAgoL,EAAE;IACvrL,EAAE,OAAO,EAAE,2CAA2C,EAAE,OAAO,EAAE,o8nBAAo8nB,EAAE;IACvgoB,EAAE,OAAO,EAAE,2CAA2C,EAAE,OAAO,EAAE,k1nDAAk1nD,EAAE;IACr5nD,EAAE,OAAO,EAAE,iCAAiC,EAAE,OAAO,EAAE,uGAAuG,EAAE;IAChK,EAAE,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,kfAAkf,EAAE;IAC5iB,EAAE,OAAO,EAAE,oCAAoC,EAAE,OAAO,EAAE,qQAAqQ,EAAE;IACjU,EAAE,OAAO,EAAE,mCAAmC,EAAE,OAAO,EAAE,knKAAknK,EAAE;IAC7qK,EAAE,OAAO,EAAE,6CAA6C,EAAE,OAAO,EAAE,yrNAAyrN,EAAE;IAC9vN,EAAE,OAAO,EAAE,gDAAgD,EAAE,OAAO,EAAE,o6HAAo6H,EAAE;IAC5+H,EAAE,OAAO,EAAE,yCAAyC,EAAE,OAAO,EAAE,y0CAAy0C,EAAE;IAC14C,EAAE,OAAO,EAAE,sCAAsC,EAAE,OAAO,EAAE,uRAAuR,EAAE;IACrV,EAAE,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,moVAAmoV,EAAE;IAC7rV,EAAE,OAAO,EAAE,oCAAoC,EAAE,OAAO,EAAE,6EAA6E,EAAE;IACzI,EAAE,OAAO,EAAE,qCAAqC,EAAE,OAAO,EAAE,mXAAmX,EAAE;IAChb,EAAE,OAAO,EAAE,sCAAsC,EAAE,OAAO,EAAE,m3IAAm3I,EAAE;IACj7I,EAAE,OAAO,EAAE,4CAA4C,EAAE,OAAO,EAAE,o9BAAo9B,EAAE;IACxhC,EAAE,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,44JAA44J,EAAE;IACt8J,EAAE,OAAO,EAAE,oCAAoC,EAAE,OAAO,EAAE,0GAA0G,EAAE;IACtK,EAAE,OAAO,EAAE,qCAAqC,EAAE,OAAO,EAAE,mlBAAmlB,EAAE;IAChpB,EAAE,OAAO,EAAE,uCAAuC,EAAE,OAAO,EAAE,gqBAAgqB,EAAE;IAC/tB,EAAE,OAAO,EAAE,sCAAsC,EAAE,OAAO,EAAE,22cAA22c,EAAE;IACz6c,EAAE,OAAO,EAAE,wDAAwD,EAAE,OAAO,EAAE,yzJAAyzJ,EAAE;IACz4J,EAAE,OAAO,EAAE,oDAAoD,EAAE,OAAO,EAAE,qytBAAqytB,EAAE;IACj3tB,EAAE,OAAO,EAAE,mDAAmD,EAAE,OAAO,EAAE,ynYAAynY,EAAE;IACpsY,EAAE,OAAO,EAAE,4CAA4C,EAAE,OAAO,EAAE,osHAAosH,EAAE;IACxwH,EAAE,OAAO,EAAE,yCAAyC,EAAE,OAAO,EAAE,6iCAA6iC,EAAE;IAC9mC,EAAE,OAAO,EAAE,0BAA0B,EAAE,OAAO,EAAE,s2BAAs2B,EAAE;IACx5B,EAAE,OAAO,EAAE,4BAA4B,EAAE,OAAO,EAAE,iGAAiG,EAAE;IACrJ,EAAE,OAAO,EAAE,6BAA6B,EAAE,OAAO,EAAE,2WAA2W,EAAE;IACha,EAAE,OAAO,EAAE,8BAA8B,EAAE,OAAO,EAAE,s1BAAs1B,EAAE;IAC54B,EAAE,OAAO,EAAE,oCAAoC,EAAE,OAAO,EAAE,msBAAmsB,EAAE;IAC/vB,EAAE,OAAO,EAAE,4BAA4B,EAAE,OAAO,EAAE,48HAA48H,EAAE;IAChgI,EAAE,OAAO,EAAE,8BAA8B,EAAE,OAAO,EAAE,uEAAuE,EAAE;IAC7H,EAAE,OAAO,EAAE,+BAA+B,EAAE,OAAO,EAAE,6WAA6W,EAAE;IACpa,EAAE,OAAO,EAAE,gCAAgC,EAAE,OAAO,EAAE,kmTAAkmT,EAAE;IAC1pT,EAAE,OAAO,EAAE,sCAAsC,EAAE,OAAO,EAAE,gzCAAgzC,EAAE;CAC/2C,CAAC"}