@noodleseed/agent-kit 0.60.0 → 0.61.0

package/package.json

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

package/skills/claude-code/SKILL.md

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

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

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

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

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

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

@@ -3,7 +3,7 @@ name: connecting-apis-to-mcp
 description: "Use when all four API-evidence inputs exist—and only then: API base URL, authentication scheme, representative safe read, and observed response."
 ---
 
-<!-- noodle-skill version:0.60.0 hash:21bbd3ec441ffd30 -->
+<!-- noodle-skill version:0.61.0 hash:21bbd3ec441ffd30 -->
 
 # connecting-apis-to-mcp
 

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

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

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

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

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

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

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

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

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

@@ -34,4 +34,5 @@ export const {
   useUpdateModelContext,
   useViewState,
   useWidgetLifecycle,
+  useWidgetReady,
 } = generateHelpers<AppType>();

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

@@ -23,6 +23,7 @@ import {
   useUpdateModelContext,
   useViewState,
   useWidgetLifecycle,
+  useWidgetReady,
   View,
   ViewStack,
 } from '../helpers.js';
@@ -74,9 +75,10 @@ function modifierLabel(value: string): string {
 }
 
 export default function OrderingFlow() {
+  const ready = useWidgetReady();
   const { displayMode, supports, theme } = useLayout();
   const toolInfo = useToolInfo('open_ordering');
-  const isPending = Object.keys(toolInfo).length === 0;
+  const isPending = !ready || Object.keys(toolInfo).length === 0;
   const entry = isOrderingEntryResult(toolInfo.structuredContent)
     ? toolInfo.structuredContent
     : undefined;
@@ -357,6 +359,7 @@ export default function OrderingFlow() {
             </div>
             <ActionBar className="nw-actions">
               <SubmitButton
+                type="button"
                 className="nw-button nw-button-primary"
                 pending={searchStores.isPending}
                 pendingLabel="Searching..."
@@ -366,6 +369,7 @@ export default function OrderingFlow() {
                 Search stores
               </SubmitButton>
               <SubmitButton
+                type="button"
                 className="nw-button"
                 pending={readCart.isPending}
                 pendingLabel="Loading..."
@@ -427,6 +431,7 @@ export default function OrderingFlow() {
                 />
                 <ActionBar className="nw-actions">
                   <SubmitButton
+                    type="button"
                     className="nw-button nw-button-primary"
                     pending={syncCart.isPending}
                     pendingLabel="Adding..."
@@ -459,6 +464,7 @@ export default function OrderingFlow() {
             </Field>
             <ActionBar className="nw-actions">
               <SubmitButton
+                type="button"
                 className="nw-button"
                 pending={syncCart.isPending}
                 pendingLabel="Saving..."
@@ -468,6 +474,7 @@ export default function OrderingFlow() {
                 Save cart
               </SubmitButton>
               <SubmitButton
+                type="button"
                 className="nw-button nw-button-primary"
                 disabled={cart.lines.length === 0}
                 pending={prepareCheckout.isPending}
@@ -491,6 +498,7 @@ export default function OrderingFlow() {
                 Edit cart
               </button>
               <SubmitButton
+                type="button"
                 className="nw-button nw-button-primary"
                 disabled={cart.lines.length === 0}
                 pending={prepareCheckout.isPending}

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

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

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

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

package/skills/claude-code/references/widgets-and-apps.md

@@ -34,6 +34,7 @@ Author views as React components. `generateHelpers<ServerDefinition>()` (from `@
 
 | Hook | Use for |
 | :-- | :-- |
+| `useWidgetReady` | Report when the standard MCP Apps bridge has connected; keep tool-backed controls disabled (or render loading) until this returns `true`. |
 | `useToolInfo` | Read the complete invoking tool result: treat `{}` as pending, handle `isError`, validate every required `structuredContent` field and identifier, reject malformed success data, and render dependent actions only after validation succeeds. |
 | `useCallTool` | Call a tool from the widget — returns `{ status, callTool, callToolAsync, data, structuredContent, error, reset }`; target a model-visible tool or a hidden `tool` helper. |
 | `useViewState` | Persist per-widget UI state across re-renders and restores: `const [value, setValue] = useViewState("key", initial)`. |
@@ -47,7 +48,7 @@ Author views as React components. `generateHelpers<ServerDefinition>()` (from `@
 | `useAppFlow` | Manage named widget views with persisted params and back-stack state: `const flow = useAppFlow({ initialView, views })`. |
 | `useHandoff` | Open server-created HTTP(S) handoff URLs through the host with status/error state; domain policy still comes from `handoff.allowedDomains`. |
 
-Bind interactive elements to tools (`useCallTool("place_order")`), drive named views with `useAppFlow(...)`, open server-created handoffs with `useHandoff()`, and publish one compact, safe, cohesive snapshot with `useUpdateModelContext()` when `useLayout().supports?.modelContext` is true. Every model-context or lifecycle publication replaces the prior snapshot rather than merging fields, so include everything the model should still know. Calling `useWidgetLifecycle("name")` automatically publishes `mounted`, listens for host `cancelled` and `dismissed`, and returns a publisher for author-owned `submitted` or app-specific milestones; `mounted` is not proof that the host presented pixels. Both hooks use the standard MCP Apps model-context channel, not a host-specific API. These updates affect future model context but do not start a model turn. When an explicit user submit/cancel should receive an immediate reply, also call `useSendFollowUpMessage()` from that user action. `data-llm` may remain a DOM inspection hint, but it is not the bidirectional model-state contract. Use `createViewStore("key", initial)` for multi-component widget state such as carts, filters, or drafts. Use the domain-neutral React components from `@noodleseed/one/react` (`AppShell`, `ShellNav`, `ViewStack`, `AsyncBoundary`, `ActionBar`, `Field`, `QuantityStepper`, `ChoiceGroup`, `HandoffButton`, and related state components) for rich apps before inventing local shell/control scaffolding. Adapt to the host with `useLayout()` — style for both `theme` values, and keep the inline `displayMode` compact (content fits the space; no internal scrolling). Trigger `useOpenExternal()`, `useHandoff()`, and `useSendFollowUpMessage()` only from explicit user actions. A raw `html` escape hatch exists for self-contained widgets (declarative `data-bind`/`data-action`; no inline `<script>`).
+Bind interactive elements to tools (`useCallTool("place_order")`), keep bridge-backed controls disabled until `useWidgetReady()` is true, drive named views with `useAppFlow(...)`, open server-created handoffs with `useHandoff()`, and publish one compact, safe, cohesive snapshot with `useUpdateModelContext()` when `useLayout().supports?.modelContext` is true. Generated form workflows use the portable `<Form onSubmit={...}>` component with a submit button; never add browser-navigation `action`, `method`, or `target` attributes. Existing intrinsic React forms are valid when their `onSubmit` handler calls `preventDefault()` before the explicit tool call and omits those navigation attributes. Standalone actions use an explicit `type="button"` and call the tool from their click handler. In every case the widget calls the standard MCP Apps tool bridge itself — never rely on a host to translate native form submission into a tool call, and never branch on a host name. Every model-context or lifecycle publication replaces the prior snapshot rather than merging fields, so include everything the model should still know. Calling `useWidgetLifecycle("name")` automatically publishes `mounted`, listens for host `cancelled` and `dismissed`, and returns a publisher for author-owned `submitted` or app-specific milestones; `mounted` is not proof that the host presented pixels. Both hooks use the standard MCP Apps model-context channel, not a host-specific API. These updates affect future model context but do not start a model turn. When an explicit user submit/cancel should receive an immediate reply, also call `useSendFollowUpMessage()` from that user action. `data-llm` may remain a DOM inspection hint, but it is not the bidirectional model-state contract. Use `createViewStore("key", initial)` for multi-component widget state such as carts, filters, or drafts. Use the domain-neutral React components from `@noodleseed/one/react` (`AppShell`, `ShellNav`, `ViewStack`, `AsyncBoundary`, `ActionBar`, `Form`, `Field`, `QuantityStepper`, `ChoiceGroup`, `HandoffButton`, and related state components) for rich apps before inventing local shell/control scaffolding. Adapt to the host with `useLayout()` — style for both `theme` values, and keep the inline `displayMode` compact (content fits the space; no internal scrolling). Trigger `useOpenExternal()`, `useHandoff()`, and `useSendFollowUpMessage()` only from explicit user actions. A raw `html` escape hatch exists for self-contained widgets (declarative `data-bind`/`data-action`; no inline `<script>`); raw markup must cancel native form navigation explicitly.
 
 ## Worked widget recipe
 
@@ -63,7 +64,7 @@ import type { ServerDefinition } from '@noodleseed/one';
 import { Action, ActionBar, AsyncBoundary, Feedback, Field, Flow, Frame, Region, Select, generateHelpers } from '@noodleseed/one/react';
 
 // One call wires the typed host bridge; destructure only the hooks this view uses.
-const { useToolInfo, useCallTool, useViewState, useLayout, useOpenExternal, useSendFollowUpMessage, useUpdateModelContext, useWidgetLifecycle } =
+const { useToolInfo, useCallTool, useViewState, useLayout, useOpenExternal, useSendFollowUpMessage, useUpdateModelContext, useWidgetLifecycle, useWidgetReady } =
   generateHelpers<ServerDefinition>();
 
 type OrderResult = {
@@ -85,8 +86,9 @@ function isOrderResult(value: unknown): value is OrderResult {
 }
 
 export default function OrderStatus() {
+  const ready = useWidgetReady();
   const toolInfo = useToolInfo('show_order');
-  const isPending = Object.keys(toolInfo).length === 0;
+  const isPending = !ready || 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();
@@ -138,7 +140,7 @@ export default function OrderStatus() {
       </Region>
       {confirmed?.status ? <Feedback status="success">{confirmed.status}</Feedback> : null}
       <ActionBar>
-      <Action variant="primary" pending={placeOrder.isPending} pendingLabel="Placing…"
+      <Action type="button" variant="primary" disabled={!ready} pending={placeOrder.isPending} pendingLabel="Placing…"
         onClick={submitOrder}
       >
         Place order

package/skills/claude-code/reporting-noodle-feedback/SKILL.md

@@ -3,7 +3,7 @@ name: reporting-noodle-feedback
 description: "Use when a Noodle Seed bug, misleading instruction, missing capability, or concrete product improvement should be proposed to the user."
 ---
 
-<!-- noodle-skill version:0.60.0 hash:0f404109f4845683 -->
+<!-- noodle-skill version:0.61.0 hash:0f404109f4845683 -->
 
 # reporting-noodle-feedback
 

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

@@ -3,7 +3,7 @@ name: verifying-mcp-delivery
 description: "Use when proving a Noodle Seed MCP project works at a named compile, local, connector, App, host, deployment, or production evidence level."
 ---
 
-<!-- noodle-skill version:0.60.0 hash:6ef6ef551e26b78e -->
+<!-- noodle-skill version:0.61.0 hash:6ef6ef551e26b78e -->
 
 # verifying-mcp-delivery
 

package/skills/claude-code/wrapping-existing-applications/SKILL.md

@@ -3,7 +3,7 @@ name: wrapping-existing-applications
 description: "Use when an existing application has no stable usable API and needs a read-only, identity-first Noodle Seed integration plan before implementation."
 ---
 
-<!-- noodle-skill version:0.60.0 hash:eccc3c158dcafba8 -->
+<!-- noodle-skill version:0.61.0 hash:eccc3c158dcafba8 -->
 
 # wrapping-existing-applications
 

package/skills/codex/SKILL.md

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

package/skills/codex/authoring-mcp-servers/SKILL.md

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

package/skills/codex/building-mcp-apps/SKILL.md

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

package/skills/codex/connecting-apis-to-mcp/SKILL.md

@@ -3,7 +3,7 @@ name: connecting-apis-to-mcp
 description: "Use when all four API-evidence inputs exist—and only then: API base URL, authentication scheme, representative safe read, and observed response."
 ---
 
-<!-- noodle-skill version:0.60.0 hash:21bbd3ec441ffd30 -->
+<!-- noodle-skill version:0.61.0 hash:21bbd3ec441ffd30 -->
 
 # connecting-apis-to-mcp
 

package/skills/codex/debugging-mcp-delivery/SKILL.md

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

package/skills/codex/deploying-mcp-services/SKILL.md

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

package/skills/codex/designing-mcp-products/SKILL.md

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

package/skills/codex/embedding-mcp-assistants/SKILL.md

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

package/skills/codex/examples/food-ordering/src/helpers.ts

@@ -34,4 +34,5 @@ export const {
   useUpdateModelContext,
   useViewState,
   useWidgetLifecycle,
+  useWidgetReady,
 } = generateHelpers<AppType>();

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

@@ -23,6 +23,7 @@ import {
   useUpdateModelContext,
   useViewState,
   useWidgetLifecycle,
+  useWidgetReady,
   View,
   ViewStack,
 } from '../helpers.js';
@@ -74,9 +75,10 @@ function modifierLabel(value: string): string {
 }
 
 export default function OrderingFlow() {
+  const ready = useWidgetReady();
   const { displayMode, supports, theme } = useLayout();
   const toolInfo = useToolInfo('open_ordering');
-  const isPending = Object.keys(toolInfo).length === 0;
+  const isPending = !ready || Object.keys(toolInfo).length === 0;
   const entry = isOrderingEntryResult(toolInfo.structuredContent)
     ? toolInfo.structuredContent
     : undefined;
@@ -357,6 +359,7 @@ export default function OrderingFlow() {
             </div>
             <ActionBar className="nw-actions">
               <SubmitButton
+                type="button"
                 className="nw-button nw-button-primary"
                 pending={searchStores.isPending}
                 pendingLabel="Searching..."
@@ -366,6 +369,7 @@ export default function OrderingFlow() {
                 Search stores
               </SubmitButton>
               <SubmitButton
+                type="button"
                 className="nw-button"
                 pending={readCart.isPending}
                 pendingLabel="Loading..."
@@ -427,6 +431,7 @@ export default function OrderingFlow() {
                 />
                 <ActionBar className="nw-actions">
                   <SubmitButton
+                    type="button"
                     className="nw-button nw-button-primary"
                     pending={syncCart.isPending}
                     pendingLabel="Adding..."
@@ -459,6 +464,7 @@ export default function OrderingFlow() {
             </Field>
             <ActionBar className="nw-actions">
               <SubmitButton
+                type="button"
                 className="nw-button"
                 pending={syncCart.isPending}
                 pendingLabel="Saving..."
@@ -468,6 +474,7 @@ export default function OrderingFlow() {
                 Save cart
               </SubmitButton>
               <SubmitButton
+                type="button"
                 className="nw-button nw-button-primary"
                 disabled={cart.lines.length === 0}
                 pending={prepareCheckout.isPending}
@@ -491,6 +498,7 @@ export default function OrderingFlow() {
                 Edit cart
               </button>
               <SubmitButton
+                type="button"
                 className="nw-button nw-button-primary"
                 disabled={cart.lines.length === 0}
                 pending={prepareCheckout.isPending}

package/skills/codex/executing-noodle-plans/SKILL.md

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

package/skills/codex/publishing-mcp-integrations/SKILL.md

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

package/skills/codex/references/widgets-and-apps.md

@@ -34,6 +34,7 @@ Author views as React components. `generateHelpers<ServerDefinition>()` (from `@
 
 | Hook | Use for |
 | :-- | :-- |
+| `useWidgetReady` | Report when the standard MCP Apps bridge has connected; keep tool-backed controls disabled (or render loading) until this returns `true`. |
 | `useToolInfo` | Read the complete invoking tool result: treat `{}` as pending, handle `isError`, validate every required `structuredContent` field and identifier, reject malformed success data, and render dependent actions only after validation succeeds. |
 | `useCallTool` | Call a tool from the widget — returns `{ status, callTool, callToolAsync, data, structuredContent, error, reset }`; target a model-visible tool or a hidden `tool` helper. |
 | `useViewState` | Persist per-widget UI state across re-renders and restores: `const [value, setValue] = useViewState("key", initial)`. |
@@ -47,7 +48,7 @@ Author views as React components. `generateHelpers<ServerDefinition>()` (from `@
 | `useAppFlow` | Manage named widget views with persisted params and back-stack state: `const flow = useAppFlow({ initialView, views })`. |
 | `useHandoff` | Open server-created HTTP(S) handoff URLs through the host with status/error state; domain policy still comes from `handoff.allowedDomains`. |
 
-Bind interactive elements to tools (`useCallTool("place_order")`), drive named views with `useAppFlow(...)`, open server-created handoffs with `useHandoff()`, and publish one compact, safe, cohesive snapshot with `useUpdateModelContext()` when `useLayout().supports?.modelContext` is true. Every model-context or lifecycle publication replaces the prior snapshot rather than merging fields, so include everything the model should still know. Calling `useWidgetLifecycle("name")` automatically publishes `mounted`, listens for host `cancelled` and `dismissed`, and returns a publisher for author-owned `submitted` or app-specific milestones; `mounted` is not proof that the host presented pixels. Both hooks use the standard MCP Apps model-context channel, not a host-specific API. These updates affect future model context but do not start a model turn. When an explicit user submit/cancel should receive an immediate reply, also call `useSendFollowUpMessage()` from that user action. `data-llm` may remain a DOM inspection hint, but it is not the bidirectional model-state contract. Use `createViewStore("key", initial)` for multi-component widget state such as carts, filters, or drafts. Use the domain-neutral React components from `@noodleseed/one/react` (`AppShell`, `ShellNav`, `ViewStack`, `AsyncBoundary`, `ActionBar`, `Field`, `QuantityStepper`, `ChoiceGroup`, `HandoffButton`, and related state components) for rich apps before inventing local shell/control scaffolding. Adapt to the host with `useLayout()` — style for both `theme` values, and keep the inline `displayMode` compact (content fits the space; no internal scrolling). Trigger `useOpenExternal()`, `useHandoff()`, and `useSendFollowUpMessage()` only from explicit user actions. A raw `html` escape hatch exists for self-contained widgets (declarative `data-bind`/`data-action`; no inline `<script>`).
+Bind interactive elements to tools (`useCallTool("place_order")`), keep bridge-backed controls disabled until `useWidgetReady()` is true, drive named views with `useAppFlow(...)`, open server-created handoffs with `useHandoff()`, and publish one compact, safe, cohesive snapshot with `useUpdateModelContext()` when `useLayout().supports?.modelContext` is true. Generated form workflows use the portable `<Form onSubmit={...}>` component with a submit button; never add browser-navigation `action`, `method`, or `target` attributes. Existing intrinsic React forms are valid when their `onSubmit` handler calls `preventDefault()` before the explicit tool call and omits those navigation attributes. Standalone actions use an explicit `type="button"` and call the tool from their click handler. In every case the widget calls the standard MCP Apps tool bridge itself — never rely on a host to translate native form submission into a tool call, and never branch on a host name. Every model-context or lifecycle publication replaces the prior snapshot rather than merging fields, so include everything the model should still know. Calling `useWidgetLifecycle("name")` automatically publishes `mounted`, listens for host `cancelled` and `dismissed`, and returns a publisher for author-owned `submitted` or app-specific milestones; `mounted` is not proof that the host presented pixels. Both hooks use the standard MCP Apps model-context channel, not a host-specific API. These updates affect future model context but do not start a model turn. When an explicit user submit/cancel should receive an immediate reply, also call `useSendFollowUpMessage()` from that user action. `data-llm` may remain a DOM inspection hint, but it is not the bidirectional model-state contract. Use `createViewStore("key", initial)` for multi-component widget state such as carts, filters, or drafts. Use the domain-neutral React components from `@noodleseed/one/react` (`AppShell`, `ShellNav`, `ViewStack`, `AsyncBoundary`, `ActionBar`, `Form`, `Field`, `QuantityStepper`, `ChoiceGroup`, `HandoffButton`, and related state components) for rich apps before inventing local shell/control scaffolding. Adapt to the host with `useLayout()` — style for both `theme` values, and keep the inline `displayMode` compact (content fits the space; no internal scrolling). Trigger `useOpenExternal()`, `useHandoff()`, and `useSendFollowUpMessage()` only from explicit user actions. A raw `html` escape hatch exists for self-contained widgets (declarative `data-bind`/`data-action`; no inline `<script>`); raw markup must cancel native form navigation explicitly.
 
 ## Worked widget recipe
 
@@ -63,7 +64,7 @@ import type { ServerDefinition } from '@noodleseed/one';
 import { Action, ActionBar, AsyncBoundary, Feedback, Field, Flow, Frame, Region, Select, generateHelpers } from '@noodleseed/one/react';
 
 // One call wires the typed host bridge; destructure only the hooks this view uses.
-const { useToolInfo, useCallTool, useViewState, useLayout, useOpenExternal, useSendFollowUpMessage, useUpdateModelContext, useWidgetLifecycle } =
+const { useToolInfo, useCallTool, useViewState, useLayout, useOpenExternal, useSendFollowUpMessage, useUpdateModelContext, useWidgetLifecycle, useWidgetReady } =
   generateHelpers<ServerDefinition>();
 
 type OrderResult = {
@@ -85,8 +86,9 @@ function isOrderResult(value: unknown): value is OrderResult {
 }
 
 export default function OrderStatus() {
+  const ready = useWidgetReady();
   const toolInfo = useToolInfo('show_order');
-  const isPending = Object.keys(toolInfo).length === 0;
+  const isPending = !ready || 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();
@@ -138,7 +140,7 @@ export default function OrderStatus() {
       </Region>
       {confirmed?.status ? <Feedback status="success">{confirmed.status}</Feedback> : null}
       <ActionBar>
-      <Action variant="primary" pending={placeOrder.isPending} pendingLabel="Placing…"
+      <Action type="button" variant="primary" disabled={!ready} pending={placeOrder.isPending} pendingLabel="Placing…"
         onClick={submitOrder}
       >
         Place order

package/skills/codex/reporting-noodle-feedback/SKILL.md

@@ -3,7 +3,7 @@ name: reporting-noodle-feedback
 description: "Use when a Noodle Seed bug, misleading instruction, missing capability, or concrete product improvement should be proposed to the user."
 ---
 
-<!-- noodle-skill version:0.60.0 hash:0f404109f4845683 -->
+<!-- noodle-skill version:0.61.0 hash:0f404109f4845683 -->
 
 # reporting-noodle-feedback
 

package/skills/codex/verifying-mcp-delivery/SKILL.md

@@ -3,7 +3,7 @@ name: verifying-mcp-delivery
 description: "Use when proving a Noodle Seed MCP project works at a named compile, local, connector, App, host, deployment, or production evidence level."
 ---
 
-<!-- noodle-skill version:0.60.0 hash:6ef6ef551e26b78e -->
+<!-- noodle-skill version:0.61.0 hash:6ef6ef551e26b78e -->
 
 # verifying-mcp-delivery
 

package/skills/codex/wrapping-existing-applications/SKILL.md

@@ -3,7 +3,7 @@ name: wrapping-existing-applications
 description: "Use when an existing application has no stable usable API and needs a read-only, identity-first Noodle Seed integration plan before implementation."
 ---
 
-<!-- noodle-skill version:0.60.0 hash:eccc3c158dcafba8 -->
+<!-- noodle-skill version:0.61.0 hash:eccc3c158dcafba8 -->
 
 # wrapping-existing-applications