@noodleseed/one 0.80.0 → 0.81.0

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

@@ -49,19 +49,21 @@ export const BUNDLED_EXAMPLE_FILES = [
     { 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  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. The standard embedded element also hosts linked MCP Apps behind its sandbox bridge.\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\n## Direct or federated OIDC instead of the built-in adapter\n\nThis flagship uses the managed Firebase adapter. If an app replaces it with `customerAuth.oidc(...)` or\n`customerAuth.federatedOidc(...)`, the app developer owns the authorization server. It must publish the\nprimary path-inserted RFC 8414 URL as direct HTTP 200 JSON with the exact issuer, HTTPS authorization/token/\nregistration/JWKS endpoints, authorization-code and refresh grants, PKCE S256, public-client auth method\n`none`, RFC 8707 resource handling, an access-token `aud` equal to the exact MCP URL, and public signing keys.\n\nRun `noodle auth doctor src/server.ts` before sharing the endpoint. Its issuer-readiness probes perform\nbounded read-only GET checks and never register a client. A successful\n`noodle deploy --access customers` reports the same findings as nonblocking warnings; the application team\nrepairs the issuer rather than adding a Noodle OAuth proxy.\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\nThis flagship uses the legacy Firebase provider bridge because it is runnable today. That is distinct from\nCore-v2 account-selecting connector aliases: those declare catalog `credentialProfiles` and bind each alias\nwith `bind(connector, { profile, connection })`. Hosted bound `managedSecret(...)` connections are runnable;\nbound `externalExchange()` and `clientCredentials(...)` currently compile as portable metadata but fail\nclosed before secret or network access until their provider slice lands. Do not replace this example's\nworking delegated-session-cookie path with either unsupported bound exchange source.\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 verified direct/federated OIDC, built-in provider identities, and\nembedded assistant 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\nAgainst a deployed customer-protected environment, set a short-lived real customer token only in\n`NOODLE_CUSTOMER_TOKEN` and add `--live --org <org> --app <app> --env <env>`. The live doctor performs\ncredential exchanges without invoking either business tool.\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. Production embedding origins must use HTTPS; plain HTTP is accepted only for\nloopback development origins such as `http://localhost:3000`, `http://127.0.0.1:3000`, or\n`http://[::1]:3000`. `noodle dev` serves the MCP project, not that separate embedding application.\n\nThe assistant's panel, launcher, status header, composer, and message treatment are configured through the\nbounded `presentation` object in `src/server.ts`. The Atlas-style product treatment is the supported\ncustomization ceiling. These primitives derive their colors from the shared server `branding` block and\nrequire no edits to `@noodleseed/assistant`; raw HTML, CSS, inline SVG, renderer class names, and callbacks\nare intentionally not accepted in deployment configuration.\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 managed Web Component/React renderer or a customer-owned UI:\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\nFor an entirely application-owned React renderer, use the renderer-free hook. It creates no custom element\nand returns the AI SDK transcript plus the canonical client commands:\n\n```tsx\n'use client';\n\nimport { useState } from 'react';\nimport { useNoodleAssistant } from '@noodleseed/assistant/react/client';\n\nexport function CustomerAssistant({ principalKey }: { principalKey: string }) {\n  const [draft, setDraft] = useState('');\n  const { client, messages, status, error } = useNoodleAssistant({\n    sessionEndpoint: '/api/noodle-assistant/session',\n    principalKey,\n  });\n  const busy = status === 'submitted' || status === 'streaming';\n  const settle = (operation: Promise<void>) => {\n    void operation.catch(() => {\n      // The hook exposes this same structured failure through `error`.\n    });\n  };\n\n  return (\n    <section aria-label=\"Assistant\" aria-busy={busy}>\n      {messages.map((message) => (\n        <article key={message.id} data-role={message.role}>\n          {message.parts.map((part, index) => {\n            if (part.type === 'text') return <p key={index}>{part.text}</p>;\n            if (part.type === 'data-confirmation') {\n              const review = part.data;\n              return (\n                <section key={review.id} aria-label=\"Review proposed action\">\n                  <h3>{review.title ?? 'Review proposed action'}</h3>\n                  {review.description ? <p>{review.description}</p> : null}\n                  <pre aria-label=\"Proposed action arguments\">\n                    {JSON.stringify(review.arguments ?? {}, null, 2)}\n                  </pre>\n                  <button\n                    disabled={busy || review.status !== 'pending'}\n                    onClick={() => settle(client.respond(review.id, { action: 'accept' }))}\n                  >\n                    Confirm\n                  </button>\n                  <button\n                    disabled={busy || review.status !== 'pending'}\n                    onClick={() => settle(client.respond(review.id, { action: 'decline' }))}\n                  >\n                    Don't proceed\n                  </button>\n                </section>\n              );\n            }\n            if (part.type === 'data-input-request') {\n              const request = part.data;\n              return (\n                <section key={request.id} aria-label=\"Assistant needs input\">\n                  <p>{request.message}</p>\n                  <p>This renderer has not implemented the requested form.</p>\n                  <button\n                    disabled={busy || request.status !== 'pending'}\n                    onClick={() => settle(client.respond(request.id, { action: 'decline' }))}\n                  >\n                    Cancel request\n                  </button>\n                </section>\n              );\n            }\n            if (part.type === 'data-tool-result') {\n              return (\n                <pre key={part.data.id} aria-label={`${part.data.tool} result`}>\n                  {JSON.stringify(part.data.result, null, 2)}\n                </pre>\n              );\n            }\n            if (part.type === 'data-view') {\n              return (\n                <p key={part.data.id}>\n                  Trusted app view available: {part.data.title ?? part.data.resourceUri}\n                </p>\n              );\n            }\n            return <p key={index}>Unsupported assistant content.</p>;\n          })}\n        </article>\n      ))}\n      {error ? <p role=\"alert\">{error.message}</p> : null}\n      <form\n        onSubmit={(event) => {\n          event.preventDefault();\n          const message = draft.trim();\n          if (!message) return;\n          setDraft('');\n          settle(client.sendMessage(message));\n        }}\n      >\n        <input\n          aria-label=\"Message\"\n          value={draft}\n          onChange={(event) => setDraft(event.currentTarget.value)}\n        />\n        {busy ? (\n          <button type=\"button\" onClick={() => client.abort()}>\n            Stop\n          </button>\n        ) : (\n          <button type=\"submit\">Send</button>\n        )}\n      </form>\n    </section>\n  );\n}\n```\n\n`principalKey` stays in the browser. Change it whenever the authenticated user or tenant changes; the hook\nthen aborts and clears the prior session and transcript. The sample fails closed on input requests until its\nfallback is replaced with a form generated from `requestedSchema`. A production renderer must show the\ncomplete confirmation review and both decisions. For `data-view`, map `resourceUri` or `tool` and the\nbounded/redacted result to a component already trusted by this application. Never inject `part.data.html`,\nassign it to `srcdoc`, or fetch a `ui://` URI.\n\nOutside React, subscribe to the DOM-free client directly. It exposes the same conversation as headless AI\nSDK `UIMessage` state, including typed confirmation, input, tool-result, and linked-view parts:\n\n```ts\nimport { createAssistantClient } from '@noodleseed/assistant/client';\n\nconst assistant = createAssistantClient({\n  sessionEndpoint: '/api/noodle-assistant/session',\n});\n\nassistant.subscribeChat((state) => {\n  renderUIMessageState(state);\n  for (const message of state.messages) {\n    for (const part of message.parts) {\n      if (part.type === 'data-confirmation' && part.data.status === 'pending') {\n        renderConfirmation(part.data, (response) => assistant.respond(part.data.id, response));\n      }\n    }\n  }\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/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. The standard embedded element also hosts linked MCP Apps behind its sandbox bridge.\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\n## Direct or federated OIDC instead of the built-in adapter\n\nThis flagship uses the managed Firebase adapter. If an app replaces it with `customerAuth.oidc(...)` or\n`customerAuth.federatedOidc(...)`, the app developer owns the authorization server. It must publish the\nprimary path-inserted RFC 8414 URL as direct HTTP 200 JSON with the exact issuer, HTTPS authorization/token/\nregistration/JWKS endpoints, authorization-code and refresh grants, PKCE S256, public-client auth method\n`none`, RFC 8707 resource handling, an access-token `aud` equal to the exact MCP URL, and public signing keys.\n\nRun `noodle auth doctor src/server.ts` before sharing the endpoint. Its issuer-readiness probes perform\nbounded read-only GET checks and never register a client. A successful\n`noodle deploy --access customers` reports the same findings as nonblocking warnings; the application team\nrepairs the issuer rather than adding a Noodle OAuth proxy.\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\nThis flagship uses the legacy Firebase provider bridge because it is runnable today. That is distinct from\nCore-v2 account-selecting connector aliases: those declare catalog `credentialProfiles` and bind each alias\nwith `bind(connector, { profile, connection })`. Hosted bound `managedSecret(...)` connections are runnable;\nbound `externalExchange()` and `clientCredentials(...)` currently compile as portable metadata but fail\nclosed before secret or network access until their provider slice lands. Do not replace this example's\nworking delegated-session-cookie path with either unsupported bound exchange source.\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 verified direct/federated OIDC, built-in provider identities, and\nembedded assistant 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\nAgainst a deployed customer-protected environment, set a short-lived real customer token only in\n`NOODLE_CUSTOMER_TOKEN` and add `--live --org <org> --app <app> --env <env>`. The live doctor performs\ncredential exchanges without invoking either business tool.\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. Production embedding origins must use HTTPS; plain HTTP is accepted only for\nloopback development origins such as `http://localhost:3000`, `http://127.0.0.1:3000`, or\n`http://[::1]:3000`. `noodle dev` serves the MCP project, not that separate embedding application.\n\nThe assistant's panel, launcher, status header, composer, and message treatment are configured through the\nbounded `presentation` object in `src/server.ts`. The Atlas-style product treatment is the supported\ncustomization ceiling. These primitives derive their colors from the shared server `branding` block and\nrequire no edits to `@noodleseed/assistant`; raw HTML, CSS, inline SVG, renderer class names, and callbacks\nare intentionally not accepted in deployment configuration.\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 managed Web Component/React renderer or a customer-owned UI:\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\nFor an entirely application-owned React renderer, use the renderer-free hook. It creates no custom element\nand returns the AI SDK transcript plus the canonical client commands:\n\n```tsx\n'use client';\n\nimport { useState } from 'react';\nimport { NoodleAppView } from '@noodleseed/assistant/react';\nimport { useNoodleAssistant } from '@noodleseed/assistant/react/client';\n\nexport function CustomerAssistant({ principalKey }: { principalKey: string }) {\n  const [draft, setDraft] = useState('');\n  const { client, messages, status, error } = useNoodleAssistant({\n    sessionEndpoint: '/api/noodle-assistant/session',\n    principalKey,\n  });\n  const busy = status === 'submitted' || status === 'streaming';\n  const settle = (operation: Promise<void>) => {\n    void operation.catch(() => {\n      // The hook exposes this same structured failure through `error`.\n    });\n  };\n\n  return (\n    <section aria-label=\"Assistant\" aria-busy={busy}>\n      {messages.map((message) => (\n        <article key={message.id} data-role={message.role}>\n          {message.parts.map((part, index) => {\n            if (part.type === 'text') return <p key={index}>{part.text}</p>;\n            if (part.type === 'data-confirmation') {\n              const review = part.data;\n              return (\n                <section key={review.id} aria-label=\"Review proposed action\">\n                  <h3>{review.title ?? 'Review proposed action'}</h3>\n                  {review.description ? <p>{review.description}</p> : null}\n                  <pre aria-label=\"Proposed action arguments\">\n                    {JSON.stringify(review.arguments ?? {}, null, 2)}\n                  </pre>\n                  <button\n                    disabled={busy || review.status !== 'pending'}\n                    onClick={() => settle(client.respond(review.id, { action: 'accept' }))}\n                  >\n                    Confirm\n                  </button>\n                  <button\n                    disabled={busy || review.status !== 'pending'}\n                    onClick={() => settle(client.respond(review.id, { action: 'decline' }))}\n                  >\n                    Don't proceed\n                  </button>\n                </section>\n              );\n            }\n            if (part.type === 'data-input-request') {\n              const request = part.data;\n              return (\n                <section key={request.id} aria-label=\"Assistant needs input\">\n                  <p>{request.message}</p>\n                  <p>This renderer has not implemented the requested form.</p>\n                  <button\n                    disabled={busy || request.status !== 'pending'}\n                    onClick={() => settle(client.respond(request.id, { action: 'decline' }))}\n                  >\n                    Cancel request\n                  </button>\n                </section>\n              );\n            }\n            if (part.type === 'data-tool-result') {\n              return (\n                <pre key={part.data.id} aria-label={`${part.data.tool} result`}>\n                  {JSON.stringify(part.data.result, null, 2)}\n                </pre>\n              );\n            }\n            if (part.type === 'data-view') {\n              return (\n                <NoodleAppView\n                  key={`${part.data.id}:${part.data.resourceUri}`}\n                  client={client}\n                  view={part.data}\n                />\n              );\n            }\n            return <p key={index}>Unsupported assistant content.</p>;\n          })}\n        </article>\n      ))}\n      {error ? <p role=\"alert\">{error.message}</p> : null}\n      <form\n        onSubmit={(event) => {\n          event.preventDefault();\n          const message = draft.trim();\n          if (!message) return;\n          setDraft('');\n          settle(client.sendMessage(message));\n        }}\n      >\n        <input\n          aria-label=\"Message\"\n          value={draft}\n          onChange={(event) => setDraft(event.currentTarget.value)}\n        />\n        {busy ? (\n          <button type=\"button\" onClick={() => client.abort()}>\n            Stop\n          </button>\n        ) : (\n          <button type=\"submit\">Send</button>\n        )}\n      </form>\n    </section>\n  );\n}\n```\n\n`principalKey` stays in the browser. Change it whenever the authenticated user or tenant changes; the hook\nthen aborts and clears the prior session and transcript. The sample fails closed on input requests until its\nfallback is replaced with a form generated from `requestedSchema`. A production renderer must show the\ncomplete confirmation review and both decisions. For `data-view`, map `resourceUri` or `tool` and the\nbounded/redacted result to a component already trusted by this application only when intentionally replacing\nthe linked App with a native UI. Otherwise use `NoodleAppView`; JSON result data is not the App UI. Its\nsemantic lifecycle identity is the client plus `view.id` plus `view.resourceUri`, so parent payload/callback\nrerenders keep the iframe and only a different view or unmount tears down the bridge.\nNever inject `part.data.html`, assign it to `srcdoc`, fetch a `ui://` URI, or reproduce the bridge directly. Pages with a\nContent-Security-Policy must include the Noodle service origin in both `connect-src` and `frame-src`.\n\nOutside React, subscribe to the DOM-free client directly. It exposes the same conversation as headless AI\nSDK `UIMessage` state, including typed confirmation, input, tool-result, and linked-view parts:\n\n```ts\nimport { createAssistantClient } from '@noodleseed/assistant/client';\n\nconst assistant = createAssistantClient({\n  sessionEndpoint: '/api/noodle-assistant/session',\n});\n\nassistant.subscribeChat((state) => {\n  renderUIMessageState(state);\n  for (const message of state.messages) {\n    for (const part of message.parts) {\n      if (part.type === 'data-confirmation' && part.data.status === 'pending') {\n        renderConfirmation(part.data, (response) => assistant.respond(part.data.id, response));\n      }\n    }\n  }\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      presentation: {\n        panel: { surface: 'glass', elevation: 'soft', border: 'subtle' },\n        launcher: { icon: 'brand-mark', status: 'session', effect: 'pulse' },\n        header: {\n          mark: 'status',\n          badge: { text: 'Workspace online', tone: 'success', indicator: true },\n        },\n        composer: { leadingIcon: 'brand-mark', shape: 'pill' },\n      },\n      suggestedPrompts: ['Show my organizations', 'List the apps in my organization'],\n    }),\n  },\n  [\n    tool('list_org_apps', {\n      title: 'List organization apps',\n      description: 'List NoodleSeed.com apps for an organization from the dev app API.',\n      input: z.object({\n        org_id: z.string().meta({ title: 'Organization' }),\n        skip: z.number().int().min(0).optional().meta({ title: 'Starting item' }),\n        limit: z.number().int().min(1).max(100).optional().meta({ title: 'Maximum results' }),\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      title: 'List my organizations',\n      description: 'List the NoodleSeed.com organizations the signed-in customer belongs to.',\n      contextProvider: true,\n      input: z.object({}),\n      // The dev app API returns every organization for the signed-in customer in one response, with no\n      // page parameter to pass through, so the bound is declared on the shape. A customer belongs to a\n      // handful of organizations; `noodle check` reports an unbounded list as\n      // `tool_design_output_bounds`.\n      output: z.object({\n        organizations: z.array(z.unknown()).max(100),\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      presentation: {\n        panel: { surface: 'glass', elevation: 'soft', border: 'subtle' },\n        launcher: { icon: 'brand-mark', status: 'session', effect: 'pulse' },\n        header: { mark: 'status', badge: { text: 'Workspace online', tone: 'success' } },\n      },\n    });\n    expect(\n      manifest.server.assistant?.allowedOrigins.every(\n        (origin) => origin.startsWith('https://') || origin.startsWith('http://localhost:'),\n      ),\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, 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 through embedded/headless forms, standard bidirectional elicitation, a linked MCP App form, or an exact structured conversational retry on stateless hosts |\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.\nThe compiled initial widget should normally remain under the 1 MiB performance recommendation; Noodle Seed's\nhard ceilings are 10 MiB per compiled widget and 20 MiB across one deployment. Run `noodle check` to see raw\nand gzip-estimated sizes. Deploy requests are gzip-compressed as one stream so repeated self-contained React\nruntime bytes deduplicate on the wire without a cross-tenant CDN. Keep menu images or large live datasets in assets/resources and app-only tools\nrather than embedding them into the initial HTML bundle.\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 through embedded/headless forms, standard bidirectional elicitation, a linked MCP App form, or an exact structured conversational retry on stateless hosts |\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| Fail-closed hydration | The React view treats only the unhydrated, pre-result `{}` envelope as pending; a hydrated empty success remains distinct. It surfaces `isError`, validates required records and identifiers, and withholds ordering actions from malformed results |\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.\nThe compiled initial widget should normally remain under the 1 MiB performance recommendation; Noodle Seed's\nhard ceilings are 10 MiB per compiled widget and 20 MiB across one deployment. Run `noodle check` to see raw\nand gzip-estimated sizes. Deploy requests are gzip-compressed as one stream so repeated self-contained React\nruntime bytes deduplicate on the wire without a cross-tenant CDN. Keep menu images or large live datasets in assets/resources and app-only tools\nrather than embedding them into the initial HTML bundle.\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  useUpdateModelContext,\n  useViewState,\n  useWidgetLifecycle,\n} = generateHelpers<AppType>();\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\",\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  Feedback,\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  // Nested lists count toward the output budget too: unbounded modifiers multiply by every item in a\n  // menu payload, so the ceiling is declared here rather than only on the outer array.\n  modifiers: z.array(z.string()).max(10),\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      title: 'Open food 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      // List outputs declare a ceiling so a host and the model both know the payload is bounded.\n      // A recorded `fulfil` cannot slice, so the cap belongs on the shape; connector-backed lists take\n      // a pagination input instead. `noodle check` reports `tool_design_output_bounds` without one.\n      output: z.object({\n        status: z.string(),\n        customer: z.string(),\n        stores: z.array(storeShape).max(20),\n        featuredItems: z.array(menuItemShape).max(20),\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      title: '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).max(20),\n        featuredItems: z.array(menuItemShape).max(20),\n      }),\n      fulfil: () => ({ stores, featuredItems: menu }),\n    }),\n    tool('plan_order', {\n      title: 'Plan an 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      title: '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 { 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/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  Feedback,\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 { isOrderingEntryResult, type MenuItem, type Store } from './ordering-result.js';\nimport './widget-style.css';\n\ntype ViewName = 'stores' | 'menu' | 'item' | 'cart' | 'review' | 'handoff';\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 toolInfo = useToolInfo('open_ordering');\n  const isPending = Object.keys(toolInfo).length === 0;\n  const entry = isOrderingEntryResult(toolInfo.structuredContent)\n    ? toolInfo.structuredContent\n    : undefined;\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 (!entry || !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    entry,\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  if (isPending) {\n    return (\n      <Feedback status=\"loading\" title=\"Loading\">\n        Loading food ordering…\n      </Feedback>\n    );\n  }\n  if (toolInfo.isError) {\n    return (\n      <Feedback status=\"error\" title=\"Ordering unavailable\">\n        Could not load food ordering.\n      </Feedback>\n    );\n  }\n  if (!entry) {\n    return (\n      <Feedback status=\"error\" title=\"Invalid ordering result\">\n        Food ordering result was incomplete.\n      </Feedback>\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/ordering-result.ts", content: "export type 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\nexport type 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\nexport type OrderingEntryResult = {\n  readonly customer: string;\n  readonly stores: readonly Store[];\n  readonly featuredItems: readonly MenuItem[];\n  readonly status: string;\n};\n\nfunction nonEmptyString(value: unknown): value is string {\n  return typeof value === 'string' && value.trim().length > 0;\n}\n\nfunction isStore(value: unknown): value is Store {\n  if (value === null || typeof value !== 'object') return false;\n  const store = value as Partial<Store>;\n  return (\n    nonEmptyString(store.id) &&\n    nonEmptyString(store.name) &&\n    nonEmptyString(store.cuisine) &&\n    nonEmptyString(store.address) &&\n    typeof store.open === 'boolean' &&\n    typeof store.etaMinutes === 'number' &&\n    Number.isFinite(store.etaMinutes) &&\n    typeof store.rating === 'number' &&\n    Number.isFinite(store.rating)\n  );\n}\n\nfunction isMenuItem(value: unknown): value is MenuItem {\n  if (value === null || typeof value !== 'object') return false;\n  const item = value as Partial<MenuItem>;\n  return (\n    nonEmptyString(item.id) &&\n    nonEmptyString(item.storeId) &&\n    nonEmptyString(item.category) &&\n    nonEmptyString(item.name) &&\n    typeof item.price === 'number' &&\n    Number.isFinite(item.price) &&\n    nonEmptyString(item.description) &&\n    Array.isArray(item.modifiers) &&\n    item.modifiers.every(nonEmptyString)\n  );\n}\n\nexport function isOrderingEntryResult(value: unknown): value is OrderingEntryResult {\n  if (value === null || typeof value !== 'object') return false;\n  const entry = value as Partial<OrderingEntryResult>;\n  if (\n    !nonEmptyString(entry.customer) ||\n    !nonEmptyString(entry.status) ||\n    !Array.isArray(entry.stores) ||\n    !entry.stores.every(isStore) ||\n    !Array.isArray(entry.featuredItems) ||\n    !entry.featuredItems.every(isMenuItem)\n  ) {\n    return false;\n  }\n  const storeIds = new Set(entry.stores.map((store) => store.id));\n  const itemIds = new Set(entry.featuredItems.map((item) => item.id));\n  return (\n    storeIds.size === entry.stores.length &&\n    itemIds.size === entry.featuredItems.length &&\n    entry.featuredItems.every((item) => storeIds.has(item.storeId))\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/ordering-flow.test.ts", content: "// @vitest-environment happy-dom\n/// <reference lib=\"dom\" />\nimport { act, createElement as h } from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\nimport { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';\nimport OrderingFlow from '../src/views/ordering-flow.js';\n\nvi.mock('../src/helpers.js', async () => {\n  const { createElement } = await import('react');\n  const container = ({ children }: { readonly children?: unknown }) =>\n    createElement('div', null, children);\n  const button = ({ children }: { readonly children?: unknown }) =>\n    createElement('button', { type: 'button' }, children);\n  return {\n    ActionBar: container,\n    AppShell: ({\n      children,\n      footer,\n      subtitle,\n      title,\n    }: {\n      readonly children?: unknown;\n      readonly footer?: unknown;\n      readonly subtitle?: string;\n      readonly title?: string;\n    }) => createElement('main', null, title, subtitle, children, footer),\n    AsyncBoundary: container,\n    ChoiceGroup: container,\n    createViewStore:\n      <T>(_key: string, initial: T) =>\n      (selector?: (state: T) => unknown) => ({\n        state: initial,\n        selected: selector?.(initial),\n        setState: () => undefined,\n      }),\n    DataCard: button,\n    DataList: container,\n    Feedback: ({ children, status }: { readonly children?: unknown; readonly status?: string }) =>\n      createElement('div', { 'data-status': status }, children),\n    Field: container,\n    HandoffButton: button,\n    QuantityStepper: container,\n    ShellNav: container,\n    StatusBadge: container,\n    SubmitButton: button,\n    useAppFlow: () => ({\n      activeView: 'stores',\n      navigate: () => undefined,\n      back: () => undefined,\n      canBack: false,\n      params: {},\n    }),\n    useCallTool: () => ({\n      status: 'idle',\n      isIdle: true,\n      isPending: false,\n      isSuccess: false,\n      isError: false,\n      callTool: () => Promise.resolve({ structuredContent: {} }),\n      callToolAsync: () => Promise.resolve({ structuredContent: {} }),\n      reset: () => undefined,\n    }),\n    useHandoff: () => ({ status: 'idle', open: () => Promise.resolve() }),\n    useLayout: () => ({\n      theme: 'light',\n      displayMode: 'inline',\n      supports: { modelContext: false, followUpMessage: false },\n    }),\n    useSendFollowUpMessage: () => () => Promise.resolve(),\n    useToolInfo: () => toolResult,\n    useUpdateModelContext: () => () => Promise.resolve(),\n    useViewState: <T>(_key: string, initial: T) => [initial, () => undefined] as const,\n    useWidgetLifecycle: () => () => Promise.resolve(),\n    View: container,\n    ViewStack: container,\n  };\n});\n\ntype ToolResult = {\n  readonly content?: unknown;\n  readonly structuredContent?: unknown;\n  readonly _meta?: unknown;\n  readonly isError?: boolean;\n};\n\nlet toolResult: ToolResult;\nlet root: Root | undefined;\n\nbeforeEach(() => {\n  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;\n  toolResult = {};\n  document.body.innerHTML = '<div id=\"root\"></div>';\n  (globalThis as { __noodleReactVersion?: number }).__noodleReactVersion = 0;\n  (globalThis as { __noodleReactBridge?: unknown }).__noodleReactBridge = {\n    getToolResult: () => toolResult,\n    getViewState: () => ({}),\n    setWidgetState: () => undefined,\n    getLayout: () => ({\n      theme: 'light',\n      displayMode: 'inline',\n      supports: { modelContext: false, followUpMessage: false },\n    }),\n    callServerTool: () => Promise.resolve({ structuredContent: {} }),\n    openExternal: () => Promise.resolve(),\n    sendFollowUpMessage: () => Promise.resolve(),\n    updateModelContext: () => Promise.resolve(),\n  };\n});\n\nafterEach(() => {\n  if (root) act(() => root?.unmount());\n  root = undefined;\n  delete (globalThis as { __noodleReactBridge?: unknown }).__noodleReactBridge;\n});\n\nfunction render(result: ToolResult): string {\n  toolResult = result;\n  root = createRoot(document.querySelector('#root') as HTMLElement);\n  act(() => root?.render(h(OrderingFlow)));\n  return document.body.textContent ?? '';\n}\n\ndescribe('food-ordering invoking result states', () => {\n  it('renders pending without identifier-dependent actions before hydration', () => {\n    const text = render({});\n    expect(text).toContain('Loading food ordering');\n    expect(text).not.toContain('Search stores');\n    expect(document.querySelector('button')).toBeNull();\n  });\n\n  it('renders an explicit tool error without ordering actions', () => {\n    const text = render({\n      content: [{ type: 'text', text: 'Ordering is unavailable' }],\n      isError: true,\n    });\n    expect(text).toContain('Could not load food ordering');\n    expect(text).not.toContain('Search stores');\n    expect(document.querySelector('button')).toBeNull();\n  });\n\n  it('rejects malformed success data before rendering identifier-dependent actions', () => {\n    const text = render({\n      structuredContent: {\n        status: 'Ready',\n        customer: 'Asha',\n        stores: [{ name: 'Missing identifier' }],\n        featuredItems: [],\n      },\n    });\n    expect(text).toContain('Food ordering result was incomplete');\n    expect(text).not.toContain('Search stores');\n    expect(document.querySelector('button')).toBeNull();\n  });\n\n  it('preserves the ordering flow after valid hydration', () => {\n    const text = render({\n      structuredContent: {\n        status: 'Ready to build a food order.',\n        customer: 'Asha',\n        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        featuredItems: [\n          {\n            id: 'spicy_miso',\n            storeId: 'harbor-noodles',\n            category: 'Bowls',\n            name: 'Spicy Miso Bowl',\n            price: 16,\n            description: 'Miso broth and noodles.',\n            modifiers: ['extra_noodles'],\n          },\n        ],\n      },\n    });\n    expect(text).toContain('Search stores');\n    expect(text).toContain('Harbor Noodles');\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/gmail-multi-account/README.md", content: "# Gmail multi-account automation\n\n**Owns:** The flagship proof that one reusable connector can be bound to multiple independently\nauthenticated accounts inside one MCP server.\n\nThis fictional example binds `gmailConnector()` twice through separate `externalExchange()` logical\nconnections. Public tools always accept `accounts: [...]`; reads accept either account or the canonical\npersonal-then-work pair, while mutations accept exactly one account and require runtime confirmation.\n\nCapability slot: **reusable connector + independently authenticated multi-account bindings**. It is distinct\nfrom `customer-auth`, which owns authentication of the MCP caller rather than downstream connector accounts.\n\nThe labels `personal@example.com` and `work@example.com` are static display labels, not provider identities.\nThe deployment-owned credential provider maps each logical connection to its real Google authorization.\nNo Google client, provider account id, token, or real email address belongs in this project.\n\n## Safety and API boundary\n\n- Search, message/thread reads, draft reads, and vacation-setting reads may target one or both accounts.\n- Draft creation/update/send, label changes, archive, raw send, trash, and vacation updates target one account.\n- Every mutation is prepared against the exact selected binding and must be confirmed before dispatch.\n- `send_message.raw` and draft `raw` are RFC 2822 MIME bytes encoded with base64url. This example does not\n  pretend that `to`/`subject`/`body` strings are sufficient to encode Unicode MIME correctly.\n- Vacation `startTime`/`endTime` schemas enforce only digit-shaped 1–19 character epoch-millisecond strings.\n  When both are supplied, Gmail's backend remains authoritative for the required `startTime < endTime`\n  relationship; this example does not claim cross-field JSON Schema validation.\n- Trash is reversible. Permanent message/thread/draft deletion, delegation, forwarding/sharing settings,\n  and unrestricted raw HTTP requests are intentionally absent.\n\n## Local checks\n\n```sh\nnoodle validate\nnoodle test\n```\n\nThe committed tests compile hermetic fake connector responses. They never contact Gmail or load OAuth\ncredentials. A real deployment additionally needs an operator-provided external credential exchange\nendpoint for each logical connection.\n\n## Personal automation skill\n\nThe source skill is [`skills/personal-email-automation/SKILL.md`](skills/personal-email-automation/SKILL.md).\nValidate it with the standard skill validator before distribution. The source skill is shipped as part of\nthis example; canonical export of an app and its skill as an installable Codex plugin remains roadmap work\nand is not currently provided by Noodle Seed.\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":"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"}
+{"version":3,"file":"example-files.js","sourceRoot":"","sources":["../../src/generated/example-files.ts"],"names":[],"mappings":"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"}

package/node_modules/@noodle-borg/agent-kit/dist/skill-authoring-refs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skill-authoring-refs.d.ts","sourceRoot":"","sources":["../src/skill-authoring-refs.ts"],"names":[],"mappings":"AAgBA,wBAAgB,gCAAgC,IAAI,MAAM,CAmRzD;AAWD,wBAAgB,6BAA6B,IAAI,MAAM,CAoPtD;AAmDD,wBAAgB,uBAAuB,IAAI,MAAM,CA0DhD"}
+{"version":3,"file":"skill-authoring-refs.d.ts","sourceRoot":"","sources":["../src/skill-authoring-refs.ts"],"names":[],"mappings":"AAgBA,wBAAgB,gCAAgC,IAAI,MAAM,CAmRzD;AAWD,wBAAgB,6BAA6B,IAAI,MAAM,CAwQtD;AAmDD,wBAAgB,uBAAuB,IAAI,MAAM,CA0DhD"}

package/node_modules/@noodle-borg/agent-kit/dist/skill-authoring-refs.js

@@ -327,6 +327,8 @@ export function renderWidgetsAndAppsReference() {
         '',
         'Every production widget handles loading, empty, partial, stale, error, retry, and success states. Prefill fields from known tool results and choose safe, reversible defaults; preserve the user’s work across rerenders, and never preselect a consequential action. Use public React primitives and branding tokens. Never author against `ns-*`, `nsr-*`, or example-local `--nw-*` classes/tokens; those are implementation details, not alternate design systems.',
         '',
+        'Keep the complete `useToolInfo()` result. An empty result envelope is pending, `isError` is an explicit tool error, and any non-pending success must validate every required field and identifier before it becomes UI data. Render a malformed-result error when validation fails, and render dependent actions only after validation succeeds. Safe local input defaults may follow valid hydration; they must never fabricate a loaded business record.',
+        '',
         '## React hook surface',
         '',
         'Author views as React components. `generateHelpers<ServerDefinition>()` (from `@noodleseed/one/react`) returns the typed host hooks:',
@@ -353,14 +355,27 @@ export function renderWidgetsAndAppsReference() {
         '  generateHelpers<ServerDefinition>();',
         '',
         'type OrderResult = {',
-        '  readonly customer?: string;',
-        '  readonly item?: string;',
-        '  readonly total?: number;',
-        '  readonly checkoutUrl?: string;',
+        '  readonly customer: string;',
+        '  readonly item: string;',
+        '  readonly total: number;',
+        '  readonly checkoutUrl: string;',
         '};',
         '',
+        'function isOrderResult(value: unknown): value is OrderResult {',
+        "  if (value === null || typeof value !== 'object') return false;",
+        '  const result = value as Partial<OrderResult>;',
+        '  return (',
+        "    typeof result.customer === 'string' && result.customer.length > 0 &&",
+        "    typeof result.item === 'string' && result.item.length > 0 &&",
+        "    typeof result.total === 'number' && Number.isFinite(result.total) &&",
+        "    typeof result.checkoutUrl === 'string' && result.checkoutUrl.startsWith('https://')",
+        '  );',
+        '}',
+        '',
         'export default function OrderStatus() {',
-        "  const shown = useToolInfo('show_order').structuredContent as OrderResult | undefined;",
+        "  const toolInfo = useToolInfo('show_order');",
+        '  const isPending = Object.keys(toolInfo).length === 0;',
+        '  const shown = isOrderResult(toolInfo.structuredContent) ? toolInfo.structuredContent : undefined;',
         "  const placeOrder = useCallTool('place_order'); // calls the widget-only helper tool",
         '  const { supports } = useLayout();',
         '  const openExternal = useOpenExternal();',
@@ -373,15 +388,16 @@ export function renderWidgetsAndAppsReference() {
         "  const checkoutUrl = shown?.checkoutUrl ?? '';",
         '',
         '  useEffect(() => {',
-        '    if (!supports?.modelContext) return;',
+        '    if (!shown || !supports?.modelContext) return;',
         '    void updateModelContext({',
         "      content: [{ type: 'text', text: `Pickup order: ${item}, total ${total}` }],",
         "      structuredContent: { widget: { name: 'pickup-order', lifecycle: 'active' }, order: { item, total } },",
         '    });',
-        '  }, [item, supports?.modelContext, total, updateModelContext]);',
+        '  }, [item, shown, supports?.modelContext, total, updateModelContext]);',
         '',
         '  async function submitOrder() {',
-        "    await placeOrder.callTool({ customer: shown?.customer ?? 'Guest', item });",
+        '    if (!shown) return;',
+        '    await placeOrder.callTool({ customer: shown.customer, item });',
         '    if (supports?.modelContext) {',
         "      await publishLifecycle('submitted', { surface: 'order', item, total, status: 'submitted' });",
         '    }',
@@ -390,9 +406,13 @@ export function renderWidgetsAndAppsReference() {
         '    }',
         '  }',
         '',
+        '  if (isPending) return <Feedback status="loading">Loading the order…</Feedback>;',
+        '  if (toolInfo.isError) return <Feedback status="error">Could not load the order.</Feedback>;',
+        '  if (!shown) return <Feedback status="error">The order result was incomplete.</Feedback>;',
+        '',
         '  return (',
         '    // data-llm is an inspection hint; useUpdateModelContext above is the model-visible channel.',
-        '    <Frame title="Pickup order" displayMode="auto" data-llm={`Pickup order for ${shown?.customer ?? \'Guest\'}: ${item}, total ${total}`}>',
+        '    <Frame title="Pickup order" displayMode="auto" data-llm={`Pickup order for ${shown.customer}: ${item}, total ${total}`}>',
         '      <Flow variant="stack">',
         '      <AsyncBoundary state={placeOrder} loading="Placing order…" error={(error) => error.message}>',
         '      <Region title="Order" description="Choose one item for pickup.">',