diff --git a/AGENTS.md b/AGENTS.md
index c684fef725..acebd5ebf8 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -18,7 +18,7 @@ This file is intentionally brief. Detailed instructions live in focused docs:
   - [docs/agents/oxlint-js-plugins.md](./docs/agents/oxlint-js-plugins.md)
   - [docs/agents/remix/index.md](./docs/agents/remix/index.md)
   - [docs/agents/cloudflare-agents-sdk.md](./docs/agents/cloudflare-agents-sdk.md)
-  - [docs/agents/mcp-apps-starter-guide.md](./docs/agents/mcp-apps-starter-guide.md)
+- [docs/agents/mcp-apps-spec-notes.md](./docs/agents/mcp-apps-spec-notes.md)
 - MCP capabilities (search/execute graph, domains, registry):
   - [docs/agents/adding-capabilities.md](./docs/agents/adding-capabilities.md)
 - Project setup references:
diff --git a/docs/agents/adding-capabilities.md b/docs/agents/adding-capabilities.md
index e2732ef0d2..662df1e2b0 100644
--- a/docs/agents/adding-capabilities.md
+++ b/docs/agents/adding-capabilities.md
@@ -3,6 +3,11 @@
 User-persisted codemode skills (`meta` domain) are documented in
 [`mcp-skills.md`](./mcp-skills.md).
 
+Secret-bearing outbound requests are governed by
+[`secret-host-approval.md`](./secret-host-approval.md). Read that doc before
+adding any capability or workflow that saves secrets, uses placeholder-based
+`fetch`, or discusses host approval.
+
 Kody exposes a compact MCP surface (`search` and `execute`) and keeps the real
 capability graph behind that surface. To add a new capability, register it
 through a **domain** and the **builtin registry**—do not add a new public MCP
@@ -188,6 +193,10 @@ Keep handlers focused on host-side work. The sandboxed model code should only
 orchestrate capability calls; it should not hold credentials or perform raw
 network access.
 
+For secret-aware outbound requests, treat host approval as admin-only policy. Do
+not add MCP-side or execute-time mutation paths for a secret's allowed hosts.
+Only the authenticated account admin UI may widen that policy.
+
 `CapabilityContext` provides:
 
 - `env`: access to Cloudflare bindings such as D1, KV, R2, AI, and Worker
@@ -202,6 +211,13 @@ Use handlers for things like:
 - Cloudflare product APIs
 - containers or sandbox orchestration
 
+If a capability surfaces secret metadata or secret-using network behavior, make
+the description explicit about the approval model:
+
+- secret save/update does not authorize outbound use
+- a blocked host must be approved through the account admin UI
+- the agent should stop and surface the approval link instead of retrying
+
 ## Testing
 
 Public MCP behavior should be verified through the compact tool surface:
diff --git a/docs/agents/mcp-apps-spec-notes.md b/docs/agents/mcp-apps-spec-notes.md
new file mode 100644
index 0000000000..b118e903de
--- /dev/null
+++ b/docs/agents/mcp-apps-spec-notes.md
@@ -0,0 +1,27 @@
+# MCP Apps Spec Notes
+
+This repo currently uses one generic MCP Apps shell rather than a family of app
+implementations. For MCP Apps behavior, prefer the upstream spec and API docs
+over project-local conventions.
+
+## Read First
+
+- [MCP Apps API docs](https://apps.extensions.modelcontextprotocol.io/api/)
+- [MCP Apps stable spec](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx)
+- [MCP UI introduction](https://mcpui.dev/guide/introduction)
+- [`@modelcontextprotocol/ext-apps`](https://github.com/modelcontextprotocol/ext-apps)
+
+## Repo-Specific Notes
+
+- The repo exposes a single generic shell via `open_generated_ui`.
+- Saved apps are reopened by `app_id`; inline renders are ephemeral.
+- If an OAuth provider requires a callback URL, use a persisted hosted saved app
+  rather than an inline render.
+- For secret-bearing requests and host approval policy, also read
+  [`secret-host-approval.md`](./secret-host-approval.md).
+
+## Relevant Code
+
+- `packages/worker/src/mcp/tools/open-generated-ui.ts`
+- `packages/worker/client/mcp-apps/generated-ui-shell.ts`
+- `packages/worker/client/routes/saved-ui.tsx`
diff --git a/docs/agents/mcp-apps-starter-guide.md b/docs/agents/mcp-apps-starter-guide.md
deleted file mode 100644
index 592aa33a24..0000000000
--- a/docs/agents/mcp-apps-starter-guide.md
+++ /dev/null
@@ -1,282 +0,0 @@
-# MCP Apps starter guide
-
-This guide explains how to build MCP Apps in this starter project in a reusable
-way. The current implementation uses a single generic shell resource that can
-render inline generated code or reopen saved UI artifacts by id. The shell is
-intentionally thin: it just hosts an iframe, delivers render payloads, and
-bridges host actions back to the MCP App host.
-
-Use this when replacing starter tools/resources with your own product-specific
-UI and workflows.
-
-## Goals
-
-- Build MCP tools that can open interactive UI widgets in MCP App-compatible
-  hosts.
-- Keep tool/resource metadata aligned with the MCP Apps specification.
-- Keep implementation modular so starter examples are easy to replace.
-- Ensure apps support host messaging and predictable validation.
-
-## Architecture in this repo
-
-Use this file map as the default structure:
-
-- `packages/worker/src/mcp/index.ts`
-  - MCP server + `init()` registration entrypoint.
-- `packages/worker/src/mcp/register-tools.ts`
-  - Aggregates tool registration.
-- `packages/worker/src/mcp/register-resources.ts`
-  - Aggregates resource registration.
-- `packages/worker/src/mcp/tools/*.ts`
-  - One tool per file.
-- `packages/worker/src/mcp/resources/*.ts`
-  - One resource registration module per file.
-- `packages/worker/src/mcp/apps/*.ts`
-  - UI entry-point modules that return HTML/JS payloads for `ui://` resources.
-
-## Recommended implementation workflow
-
-### 1) Create an app entry point
-
-Create a dedicated module under `packages/worker/src/mcp/apps/`:
-
-- Export a stable `ui://` URI.
-- Export a render function that returns the app HTML.
-- Keep shell markup minimal and push visible UI into the generated app source.
-
-Keep file names lower-kebab-case and prefer one entry point per app.
-
-### 2) Register the app resource
-
-In `packages/worker/src/mcp/resources/<your-resource>.ts`:
-
-- Use `registerAppResource(...)` from `@modelcontextprotocol/ext-apps/server`.
-- Return `text/html;profile=mcp-app`.
-- Use `createUIResource(...)` from `@mcp-ui/server` when you need adapter
-  injection.
-- Enable the `mcpApps` adapter when UI events should be translated into MCP Apps
-  host JSON-RPC.
-- Set `_meta.ui.domain` on resource contents to the widget origin (required for
-  app submission).
-- Add `_meta["openai/widgetDomain"]` as a compatibility alias for ChatGPT.
-
-### 3) Register the app-opening tool
-
-In `packages/worker/src/mcp/tools/<your-tool>.ts`:
-
-- Use `registerAppTool(...)` from `@modelcontextprotocol/ext-apps/server`.
-- Set `_meta.ui.resourceUri` to the **same** `ui://` URI as the resource.
-- Include annotations (`readOnlyHint`, `idempotentHint`, etc.).
-- Provide `outputSchema` for machine-usable outputs where relevant.
-- Prefer returning a compact render envelope in `structuredContent` so a single
-  shell can render different app payloads per invocation.
-- Prefer self-contained HTML documents or fragments as the render source so the
-  generated app owns the visible document.
-
-### 4) Wire registration in server init
-
-- Add resource registration to `packages/worker/src/mcp/register-resources.ts`.
-- Add tool registration to `packages/worker/src/mcp/register-tools.ts`.
-- Ensure `packages/worker/src/mcp/index.ts` calls both in `init()`.
-
-### 5) Add or update MCP E2E coverage
-
-At minimum, cover:
-
-- `listTools` includes your new tool.
-- `listResources` includes your `ui://` resource.
-- `readResource` returns expected MIME type + payload markers.
-- `readResource` metadata includes widget domain + CSP expectations.
-- `callTool` returns expected content/structuredContent.
-
-## Host messaging patterns
-
-When a UI should communicate back to the host agent:
-
-- Prefer the standard MCP Apps bridge (`App` from
-  `@modelcontextprotocol/ext-apps`) and call host methods such as:
-  - `ui/message` (send a user-style message)
-  - `tools/call` (call server tools)
-  - `ui/open-link` (request external link open)
-- Use app-only tools (`visibility: ["app"]`) for server-side follow-up work that
-  should stay out of the model tool list, such as loading saved app source by id
-  or polling for live widget state.
-- Keep messages concise and deterministic where possible.
-- For inline `rawHtml` widgets in this repo, prefer reusing the shared runtime
-  in `packages/worker/client/mcp-apps/widget-host-bridge.ts` (bundled into
-  `packages/worker/public/mcp-apps/generated-ui-shell.js`) instead of
-  duplicating bridge code.
-
-### Current repo shell contract
-
-The current `generated-ui-shell` exposes a tiny helper on `window.kodyWidget`:
-
-- `sendMessage(text)`
-- `openLink(url)`
-- `toggleFullscreen()`
-- `executeCode(code)`
-- automatically reports rendered widget size via `ui/notifications/size-changed`
-
-Keep the interface small and literal. Narrow, well-named helpers are easier for
-agents to use reliably than a generic RPC surface.
-
-`executeCode(code)` is not local eval inside the widget. It posts back to the
-host, and the host fulfills that request by calling the Kody MCP server's
-`execute` tool with `{ code }`. Treat it as a narrow convenience wrapper around
-that host-mediated tool call.
-
-You can also send simplified MCP-UI actions via `window.parent.postMessage(...)`
-(`type: 'tool' | 'prompt' | 'notify' | 'link'`) when using the `mcpApps`
-adapter. Those shorthand actions depend on adapter translation and may not be
-available in every host runtime.
-
-### Fullscreen and display modes
-
-- Prefer `ui/request-display-mode` for fullscreen entry/exit instead of trying
-  to manipulate the iframe directly.
-- Treat fullscreen as host-dependent. Always check `availableDisplayModes` from
-  render data / host context before offering the action.
-- Keep fullscreen UI optional and degrade gracefully when unsupported.
-
-### Generic shell render contract
-
-The current repo uses one generic shell resource:
-
-- `ui://generated-ui-shell/entry-point.html`
-
-The public tool should accept exactly one of:
-
-- inline source (ephemeral render)
-- saved `app_id` (server-resolved reopen)
-
-Recommended render envelope fields in tool `structuredContent`:
-
-- render mode (`inline_code` or `saved_app`)
-- saved artifact id when present
-- optional title / description for the current render session
-- inline source only for ephemeral renders
-
-This keeps the shell reusable while avoiding source round-trips through the
-model for saved artifacts.
-
-## HTML-First Contract
-
-Prefer generated app source that is already a complete HTML document, or at
-least a self-contained HTML fragment. That keeps the generic shell simple and
-avoids coupling the app contract to shell-owned containers like `#app`.
-
-In this repo, prefer body-ready fragments when possible so agents can rely on
-the shell's built-in baseline styles. Preserve full-document HTML support for
-cases where the generated app needs total control over head metadata, scripts,
-or layout.
-
-If you keep a helper bridge, treat it as transport only:
-
-- send host messages
-- request display modes
-- run follow-up code through a narrow helper such as `executeCode`
-- avoid shipping shell-owned visible controls
-
-## Theme and design-system guidance
-
-### Theme support
-
-For robust light/dark behavior:
-
-- Support browser fallback with `prefers-color-scheme`.
-- If your generated app wants host-provided theme, pass it through your bridge
-  contract explicitly rather than relying on shell-owned UI chrome.
-
-### Design-system alignment
-
-Prefer app token names so widgets stay visually consistent with the host app:
-
-- `--color-*`
-- `--spacing-*`
-- `--radius-*`
-- `--shadow-*`
-- shared typography tokens (`--font-*`)
-
-The current shell also ships a lightweight semantic stylesheet so plain HTML
-forms, buttons, tables, lists, and code blocks look reasonable without extra
-CSS. Treat that baseline as a convenience layer, not a component framework.
-
-When app and widget are served from the same origin, prefer referencing the
-canonical stylesheet directly (for example `/styles.css`) instead of copying
-token values into widget CSS. If you do this in an MCP App resource, set
-`_meta.ui.csp.resourceDomains` to allow that stylesheet origin.
-
-For generated HTML rendered through a sandboxed `srcdoc` iframe, avoid injecting
-a cross-origin `<base>` tag to make relative URLs work. Hosts like ChatGPT may
-enforce `base-uri 'self'`, which blocks that pattern. Prefer rewriting relative
-asset/navigation URLs to absolute app URLs before assigning the HTML.
-
-## Security and metadata checklist
-
-- Keep resources sandbox-friendly (no unnecessary external dependencies).
-- If loading external assets/APIs, define explicit `_meta.ui.csp` domains.
-- When serving widget JS/CSS from your app origin (for example `/mcp-apps/*` or
-  `/styles.css`), add `Access-Control-Allow-Origin` so sandboxed iframes with
-  opaque origins can fetch assets in ChatGPT/MCP Jam.
-- If you use Workers static assets, configure `assets.run_worker_first` for
-  widget asset paths so those requests pass through your CORS logic.
-- Always set `_meta.ui.domain` and `_meta["openai/widgetDomain"]` to your app's
-  dedicated widget origin.
-- Request only required permissions in `_meta.ui.permissions`.
-- Avoid embedding secrets or private tokens in UI payloads.
-
-## Quality checklist before merge
-
-- `npm run format`
-- `npm run test:mcp` (auto-prepares `packages/worker/.env` from `.env.example`
-  when needed)
-- `npm run validate`
-- `npm run inspect`
-- Confirm docs in `docs/agents` reflect any new workflow or constraints.
-
-## Inspector and MCP Jam verification
-
-For end-to-end verification beyond local MCP tests:
-
-1. Run `npm run inspect`.
-2. Connect the local MCP server in the inspector / MCP Jam flow.
-3. Call the generic app-opening tool with inline source and confirm the shell
-   renders the generated UI.
-4. Save an app artifact, then reopen it by `app_id` and confirm the shell loads
-   it without resending the saved source through the model.
-5. Verify host interactions that are supported by your widget:
-   - `ui/message`
-   - app-only `tools/call`
-   - `ui/open-link`
-   - `ui/request-display-mode` / fullscreen when the host exposes it
-
-Treat MCP Jam as the highest-signal browser verification path because it matches
-the sandboxed MCP Apps host model more closely than a plain iframe.
-
-## Replacing starter examples safely
-
-When removing starter examples:
-
-1. Delete example modules under `packages/worker/src/mcp/apps`,
-   `packages/worker/src/mcp/tools`, and `packages/worker/src/mcp/resources`.
-2. Replace entries in registration modules.
-3. Update MCP E2E tests to your new tool/resource names and behavior.
-4. Update this guide (or adjacent docs) if your project-specific conventions
-   differ from defaults.
-
-## References
-
-Core MCP Apps docs/spec:
-
-- MCP UI introduction: https://mcpui.dev/guide/introduction
-- `@modelcontextprotocol/ext-apps` repository:
-  https://github.com/modelcontextprotocol/ext-apps
-- MCP Apps API docs: https://apps.extensions.modelcontextprotocol.io/api/
-- MCP Apps stable spec (2026-01-26):
-  https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx
-
-Repo-specific implementation references:
-
-- MCP server patterns: `docs/mcp-server-patterns.md`
-- Cloudflare Agents SDK notes: `docs/agents/cloudflare-agents-sdk.md`
-- Worker MCP entrypoint wiring: `packages/worker/src/index.ts`
diff --git a/docs/agents/secret-host-approval.md b/docs/agents/secret-host-approval.md
new file mode 100644
index 0000000000..36412a8ea2
--- /dev/null
+++ b/docs/agents/secret-host-approval.md
@@ -0,0 +1,98 @@
+# Secret Host Approval Policy
+
+This document describes the required policy for outbound requests that use saved
+secrets.
+
+## Rule
+
+Allowed outbound hosts for a secret are privileged policy, not normal secret
+metadata.
+
+That policy must not be created, widened, or modified by:
+
+- MCP tools
+- execute-time sandboxed code
+- generated UI code
+- capability handlers that serve agent-driven secret creation or update flows
+
+Allowed outbound hosts may only be changed through the authenticated account
+admin UI approval flow.
+
+In this repo, that means the user must approve host access through the account
+secrets experience, such as `/account/secrets` and the focused approval route at
+`/account/secrets/approve`.
+
+## What agents should assume
+
+Agents should assume all newly created secrets start with an empty host
+allowlist unless the user has already approved one or more hosts in the admin
+UI.
+
+Saving or updating a secret value does not authorize sending that secret to any
+host.
+
+If an outbound request uses a placeholder such as `{{secret:name}}` and the
+target host is not already approved for that secret, the correct behavior is:
+
+1. Stop retrying.
+2. Show the user the approval link from the error.
+3. Ask the user whether they want to approve that host in the admin UI.
+4. Retry only after the user approves it.
+
+## What agents must not do
+
+Do not design or document any MCP capability, generated UI helper, or client
+library that allows agent-controlled writes to a secret's allowed hosts.
+
+Specifically, do not:
+
+- add `allowed_hosts` or equivalent fields to MCP-facing secret create/update
+  inputs
+- imply that a generated UI can self-authorize a host just because it can save a
+  secret
+- imply that execute-time code can widen egress permissions
+- treat host approval as ordinary secret metadata editing
+
+If a workflow would be smoother by auto-approving a host, the fix should be
+better guidance, helper APIs, or UX around the approval flow, not a new write
+path that bypasses the admin UI.
+
+## Guidance for capability authors
+
+When writing capability descriptions or agent-facing docs:
+
+- say explicitly that secret save/update does not grant outbound use
+- say explicitly that only the authenticated account admin UI can approve hosts
+- tell agents to inspect secret metadata before making a secret-bearing request
+- tell agents to surface the approval link and stop on deny
+
+This policy is especially important in:
+
+- secret create/update/list capabilities
+- execute-time fetch documentation
+- generated UI shell documentation
+- OAuth and other hosted callback examples
+
+## Guidance for generated UI flows
+
+Generated UIs may:
+
+- collect secret values from the user
+- save those values as secrets
+- inspect secret metadata, including current allowed hosts
+- present approval links returned from blocked requests
+
+Generated UIs may not:
+
+- set allowed hosts directly
+- bypass the admin approval route
+- silently retry secret-bearing requests after a deny
+
+For OAuth and similar flows, prefer this sequence:
+
+1. Save the client credentials as secrets.
+2. Use a hosted saved app as the callback page when helpful.
+3. Attempt the token exchange with secret placeholders.
+4. If the exchange is blocked on host approval, send the user to the admin UI
+   approval page.
+5. Retry after approval.
diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
index bc849c02d5..31fc428323 100644
--- a/e2e/smoke.spec.ts
+++ b/e2e/smoke.spec.ts
@@ -21,6 +21,13 @@ test('smoke test covers shell, auth redirect, and login', async ({ page }) => {
 
 	await expect(page).toHaveURL(/\/account$/)
 	await expect(
-		page.getByRole('heading', { name: `Welcome, ${primaryTestUser.email}` }),
+		page.getByRole('heading', {
+			name: `${primaryTestUser.email} account`,
+		}),
+	).toBeVisible()
+	await expect(
+		page.getByRole('link', {
+			name: 'Manage secrets',
+		}),
 	).toBeVisible()
 })
diff --git a/package.json b/package.json
index 0fea7b3ccc..e7905d9055 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "dev:mock-github": "node --env-file=packages/worker/.env ./wrangler-env.ts dev --local --config packages/mock-servers/github/wrangler.jsonc",
     "dev:mock-cursor": "node --env-file=packages/worker/.env ./wrangler-env.ts dev --local --config packages/mock-servers/cursor/wrangler.jsonc",
     "dev:mock-cloudflare": "node --env-file=packages/worker/.env ./wrangler-env.ts dev --local --config packages/mock-servers/cloudflare/wrangler.jsonc",
-    "deploy": "npm run build && node --env-file=packages/worker/.env ./wrangler-env.ts deploy --outdir .wrangler/sentry-bundle --upload-source-maps",
+    "deploy": "node --input-type=module -e \"if (['preview','test'].includes(process.env.CLOUDFLARE_ENV ?? '')) { await import('./tools/prepare-e2e-env.ts'); }\" && npm run build && node --env-file=packages/worker/.env ./wrangler-env.ts deploy --outdir .wrangler/sentry-bundle --upload-source-maps",
     "sentry:upload-sourcemaps": "node tools/sentry-upload-sourcemaps.ts",
     "build:mcp-apps": "esbuild packages/worker/client/mcp-apps/generated-ui-shell.ts --bundle --format=esm --target=es2022 --outdir=packages/worker/public/mcp-apps --platform=browser",
     "build:client:web": "esbuild packages/worker/client/entry.tsx --bundle --format=esm --target=es2022 --outdir=packages/worker/public --entry-names=client-entry --chunk-names=assets/[name] --asset-names=assets/[name] --jsx=automatic --jsx-import-source=remix/component",
@@ -45,7 +45,7 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:install": "playwright install chromium --with-deps",
-    "test:mcp": "node --env-file=packages/worker/.env tools/prepare-e2e-env.ts && npm run build:mcp-apps && vitest run --project mcp-e2e",
+    "test:mcp": "node tools/prepare-e2e-env.ts && npm run build:mcp-apps && vitest run --project mcp-e2e",
     "nx:graph": "nx graph",
     "nx:show-projects": "nx show projects"
   },
diff --git a/packages/shared/src/account-secret-route.ts b/packages/shared/src/account-secret-route.ts
new file mode 100644
index 0000000000..20c6e9da1f
--- /dev/null
+++ b/packages/shared/src/account-secret-route.ts
@@ -0,0 +1,119 @@
+type AccountSecretRouteScope = 'app' | 'session' | 'user'
+const accountSecretsBasePath = '/account/secrets'
+
+export type AccountSecretRouteIdInput = {
+	name: string
+	scope: AccountSecretRouteScope
+	appId?: string | null
+	sessionId?: string | null
+}
+
+export type ParsedAccountSecretRouteId = {
+	name: string
+	scope: AccountSecretRouteScope
+	appId: string | null
+	sessionId: string | null
+}
+
+export type ParsedAccountSecretRoutePath = ParsedAccountSecretRouteId & {
+	id: string
+}
+
+export function buildAccountSecretId(input: AccountSecretRouteIdInput) {
+	const bindingId =
+		input.scope === 'app'
+			? (input.appId ?? '')
+			: input.scope === 'session'
+				? (input.sessionId ?? '')
+				: ''
+	return `${input.scope}::${encodeURIComponent(bindingId)}::${encodeURIComponent(
+		input.name,
+	)}`
+}
+
+export function parseAccountSecretId(
+	secretId: string,
+): ParsedAccountSecretRouteId | null {
+	const [scope, encodedBindingId, encodedName, ...rest] = secretId.split('::')
+	if (rest.length > 0) return null
+	if (scope !== 'app' && scope !== 'session' && scope !== 'user') return null
+
+	try {
+		const name = decodeURIComponent(encodedName ?? '')
+		const bindingId = decodeURIComponent(encodedBindingId ?? '')
+		if (!name.trim()) return null
+
+		return {
+			name,
+			scope,
+			appId: scope === 'app' ? bindingId || null : null,
+			sessionId: scope === 'session' ? bindingId || null : null,
+		}
+	} catch {
+		return null
+	}
+}
+
+export function buildAccountSecretPath(input: AccountSecretRouteIdInput) {
+	const name = encodeURIComponent(input.name)
+	if (input.scope === 'user') {
+		return `${accountSecretsBasePath}/user/${name}`
+	}
+	if (input.scope === 'app') {
+		const appId = encodeURIComponent(input.appId ?? '')
+		return `${accountSecretsBasePath}/app/${appId}/${name}`
+	}
+	const sessionId = encodeURIComponent(input.sessionId ?? '')
+	return `${accountSecretsBasePath}/session/${sessionId}/${name}`
+}
+
+export function parseAccountSecretPath(
+	pathname: string,
+): ParsedAccountSecretRoutePath | null {
+	const segments = pathname.replace(/\/+$/, '').split('/')
+	if (segments.length === 0) return null
+
+	const [empty, account, secrets, ...rest] = segments
+	if (empty !== '' || account !== 'account' || secrets !== 'secrets') {
+		return null
+	}
+
+	try {
+		if (rest.length === 2 && rest[0] === 'user') {
+			const parsed = {
+				name: decodeURIComponent(rest[1] ?? ''),
+				scope: 'user' as const,
+				appId: null,
+				sessionId: null,
+			}
+			if (!parsed.name.trim()) return null
+			const id = buildAccountSecretId(parsed)
+			return { ...parsed, id }
+		}
+		if (rest.length === 3 && rest[0] === 'app') {
+			const parsed = {
+				name: decodeURIComponent(rest[2] ?? ''),
+				scope: 'app' as const,
+				appId: decodeURIComponent(rest[1] ?? '') || null,
+				sessionId: null,
+			}
+			if (!parsed.name.trim() || !parsed.appId) return null
+			const id = buildAccountSecretId(parsed)
+			return { ...parsed, id }
+		}
+		if (rest.length === 3 && rest[0] === 'session') {
+			const parsed = {
+				name: decodeURIComponent(rest[2] ?? ''),
+				scope: 'session' as const,
+				appId: null,
+				sessionId: decodeURIComponent(rest[1] ?? '') || null,
+			}
+			if (!parsed.name.trim() || !parsed.sessionId) return null
+			const id = buildAccountSecretId(parsed)
+			return { ...parsed, id }
+		}
+		return null
+	} catch {
+		return null
+	}
+}
diff --git a/packages/worker/client/app.tsx b/packages/worker/client/app.tsx
index d478250277..3720ebba66 100644
--- a/packages/worker/client/app.tsx
+++ b/packages/worker/client/app.tsx
@@ -89,7 +89,9 @@ export function App(handle: Handle) {
 
 	return () => {
 		const isWideLayout =
-			currentPathname.startsWith('/chat') || currentPathname.startsWith('/ui/')
+			currentPathname.startsWith('/chat') ||
+			currentPathname.startsWith('/ui/') ||
+			currentPathname.startsWith('/account/secrets')
 		const sessionEmail = session?.email ?? ''
 		const isSessionReady = sessionStatus === 'ready'
 		const isLoggedIn = isSessionReady && Boolean(sessionEmail)
@@ -176,7 +178,7 @@ export function App(handle: Handle) {
 							<a href="/chat" css={navLinkCss}>
 								Chat
 							</a>
-							<a href="/account" css={navLinkCss}>
+							<a href="/account/secrets" css={navLinkCss}>
 								{sessionEmail}
 							</a>
 							<form method="post" action="/logout" css={{ margin: 0 }}>
diff --git a/packages/worker/client/mcp-apps/generated-ui-shell.ts b/packages/worker/client/mcp-apps/generated-ui-shell.ts
index 9035544bfb..87a95d6620 100644
--- a/packages/worker/client/mcp-apps/generated-ui-shell.ts
+++ b/packages/worker/client/mcp-apps/generated-ui-shell.ts
@@ -11,6 +11,7 @@ type SecretMetadata = {
 	scope: SecretScope
 	description: string
 	app_id: string | null
+	allowed_hosts: Array<string>
 	created_at: string
 	updated_at: string
 	ttl_ms: number | null
@@ -634,6 +635,8 @@ function initializeGeneratedUiShell() {
 				coerceSecretScope(secret.scope) != null &&
 				typeof secret.description === 'string' &&
 				(secret.app_id == null || typeof secret.app_id === 'string') &&
+				Array.isArray(secret.allowed_hosts) &&
+				secret.allowed_hosts.every((host) => typeof host === 'string') &&
 				typeof secret.created_at === 'string' &&
 				typeof secret.updated_at === 'string' &&
 				(secret.ttl_ms == null ||
@@ -921,6 +924,212 @@ function nextRequestId() {
 	requestCounter += 1;
 	return 'generated-ui-' + requestCounter;
 }
+function isRecord(value) {
+	return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function coerceSecretScope(value) {
+	return value === 'session' || value === 'app' || value === 'user' ? value : null;
+}
+function normalizeSecretNameList(values) {
+	return Array.from(new Set(values.filter((value) => typeof value === 'string' && value.length > 0)));
+}
+function extractSecretNamesFromValue(value, collected = []) {
+	if (typeof value === 'string') {
+		for (const match of value.matchAll(/\\{\\{secret:([a-zA-Z0-9._-]+)/g)) {
+			if (match[1]) collected.push(match[1]);
+		}
+		return collected;
+	}
+	if (Array.isArray(value)) {
+		for (const entry of value) {
+			extractSecretNamesFromValue(entry, collected);
+		}
+		return collected;
+	}
+	if (isRecord(value)) {
+		for (const entry of Object.values(value)) {
+			extractSecretNamesFromValue(entry, collected);
+		}
+	}
+	return collected;
+}
+function extractApprovalDetails(message, fallbackSecretNames = []) {
+	const text = typeof message === 'string' ? message : String(message ?? '');
+	const secretNames = normalizeSecretNameList([
+		...Array.from(text.matchAll(/Secret "([^"]+)"/g)).map((match) => match[1]).filter(Boolean),
+		...fallbackSecretNames,
+	]);
+	const hostMatch = text.match(/host "([^"]+)"/);
+	let approvalUrl = null;
+	for (const part of text.split(/\\s+/)) {
+		if (part.startsWith('http://') || part.startsWith('https://')) {
+			approvalUrl = part.replace(/[),.;]+$/, '');
+			break;
+		}
+	}
+	return {
+		message: text,
+		approvalUrl,
+		host: hostMatch ? hostMatch[1] : null,
+		secretNames,
+	};
+}
+function resolveFormReference(formRef) {
+	if (typeof formRef === 'string') {
+		return document.querySelector(formRef);
+	}
+	return formRef && typeof formRef === 'object' ? formRef : null;
+}
+function formDataToObject(formData) {
+	const result = {};
+	for (const name of new Set(formData.keys())) {
+		const all = formData.getAll(name);
+		result[name] = all.length > 1 ? all : (all[0] ?? null);
+	}
+	return result;
+}
+function pickLastFormValue(value) {
+	if (Array.isArray(value)) {
+		return value.length > 0 ? value[value.length - 1] : null;
+	}
+	return value ?? null;
+}
+function toStringArray(value) {
+	if (Array.isArray(value)) {
+		return value.map((entry) => (typeof entry === 'string' ? entry : String(entry)));
+	}
+	if (value == null) return [];
+	return [typeof value === 'string' ? value : String(value)];
+}
+function setControlValues(form, name, values) {
+	const controls = Array.from(form.elements).filter((element) => {
+		return element && typeof element === 'object' && 'name' in element && element.name === name;
+	});
+	if (controls.length === 0) return;
+	for (const control of controls) {
+		if (!control || typeof control !== 'object') continue;
+		if ('type' in control && (control.type === 'checkbox' || control.type === 'radio')) {
+			const controlValue = typeof control.value === 'string' && control.value.length > 0 ? control.value : 'on';
+			control.checked = values.includes(controlValue) || (control.type === 'checkbox' && controlValue === 'on' && values.some((value) => value === 'true' || value === '1' || value === 'on'));
+			continue;
+		}
+		if ('multiple' in control && control.multiple && 'options' in control && control.options) {
+			for (const option of Array.from(control.options)) {
+				option.selected = values.includes(option.value);
+			}
+			continue;
+		}
+		if ('value' in control) {
+			control.value = values.length > 0 ? values[values.length - 1] : '';
+		}
+	}
+}
+function getTopLocationUrl(inputUrl) {
+	if (inputUrl) {
+		return new URL(inputUrl, window.location.href);
+	}
+	try {
+		if (window.top && window.top.location && window.top.location.href) {
+			return new URL(window.top.location.href);
+		}
+	} catch {}
+	return new URL(window.location.href);
+}
+function normalizeFetchWithSecretsInput(input) {
+	if (!isRecord(input)) {
+		return { ok: false, error: 'fetchWithSecrets input must be an object.' };
+	}
+	if (typeof input.url !== 'string' || input.url.length === 0) {
+		return { ok: false, error: 'fetchWithSecrets requires a url.' };
+	}
+	const headers = {};
+	if (isRecord(input.headers)) {
+		for (const [key, value] of Object.entries(input.headers)) {
+			if (typeof value === 'string') {
+				headers[key] = value;
+			}
+		}
+	}
+	let body = input.body;
+	if (body != null && typeof body !== 'string') {
+		body = JSON.stringify(body);
+		const hasContentType = Object.keys(headers).some((key) => key.toLowerCase() === 'content-type');
+		if (!hasContentType) {
+			headers['Content-Type'] = 'application/json';
+		}
+	}
+	return {
+		ok: true,
+		value: {
+			url: input.url,
+			method: typeof input.method === 'string' && input.method.length > 0 ? input.method.toUpperCase() : 'GET',
+			headers,
+			body: typeof body === 'string' ? body : undefined,
+		},
+	};
+}
+function buildFetchWithSecretsExecuteCode(input) {
+	return [
+		'async () => {',
+		'  const response = await fetch(' + JSON.stringify(input.url) + ', {',
+		'    method: ' + JSON.stringify(input.method) + ',',
+		'    headers: ' + JSON.stringify(input.headers) + ',',
+		input.body != null ? '    body: ' + JSON.stringify(input.body) + ',' : '',
+		'  });',
+		'  const headers = Object.fromEntries(response.headers.entries());',
+		'  const contentType = response.headers.get("content-type") || "";',
+		'  const text = await response.text();',
+		'  let data = null;',
+		'  if (/\\\\bjson\\\\b/i.test(contentType) && text) {',
+		'    try {',
+		'      data = JSON.parse(text);',
+		'    } catch {}',
+		'  }',
+		'  return {',
+		'    ok: response.ok,',
+		'    status: response.status,',
+		'    headers,',
+		'    data,',
+		'    text: text || null,',
+		'  };',
+		'}',
+	].filter(Boolean).join('\\n');
+}
+function normalizeFetchWithSecretsResult(result) {
+	if (!isRecord(result)) {
+		return {
+			ok: false,
+			kind: 'execution_error',
+			message: 'fetchWithSecrets returned an invalid result.',
+		};
+	}
+	const headers = isRecord(result.headers)
+		? Object.fromEntries(
+				Object.entries(result.headers).filter((entry) => typeof entry[1] === 'string'),
+			)
+		: {};
+	const status = typeof result.status === 'number' ? result.status : 0;
+	const text =
+		typeof result.text === 'string' || result.text == null ? result.text : null;
+	const data = 'data' in result ? result.data : null;
+	if (result.ok === true) {
+		return {
+			ok: true,
+			status,
+			headers,
+			data,
+			text,
+		};
+	}
+	return {
+		ok: false,
+		kind: 'http_error',
+		status,
+		headers,
+		data,
+		text,
+	};
+}
 function waitForShellMessage(type, requestId) {
 	return new Promise((resolve) => {
 		function handleMessage(event) {
@@ -1026,6 +1235,42 @@ window.kodyWidget = {
 			? response
 			: { ok: false, error: 'Unable to save secret.' };
 	},
+	async saveSecrets(input) {
+		if (!Array.isArray(input)) {
+			return {
+				ok: false,
+				results: [
+					{
+						name: '',
+						ok: false,
+						error: 'Secret inputs must be an array.',
+					},
+				],
+			};
+		}
+		const results = [];
+		for (const item of input) {
+			if (!item || typeof item !== 'object') {
+				results.push({
+					name: '',
+					ok: false,
+					error: 'Each secret input must be an object.',
+				});
+				continue;
+			}
+			const response = await this.saveSecret(item);
+			results.push({
+				name: typeof item.name === 'string' ? item.name : '',
+				ok: response.ok === true,
+				...(response.secret ? { secret: response.secret } : {}),
+				...(response.ok === true ? {} : { error: response.error || 'Unable to save secret.' }),
+			});
+		}
+		return {
+			ok: results.every((result) => result.ok === true),
+			results,
+		};
+	},
 	async listSecrets(input) {
 		const response = await requestSecretAction(
 			'list-secrets',
@@ -1034,6 +1279,384 @@ window.kodyWidget = {
 		);
 		return Array.isArray(response) ? response : [];
 	},
+	formToObject(form) {
+		const resolvedForm = resolveFormReference(form);
+		if (!(resolvedForm instanceof HTMLFormElement)) {
+			throw new Error('formToObject requires an HTMLFormElement or a selector that resolves to one.');
+		}
+		return formDataToObject(new FormData(resolvedForm));
+	},
+	fillFromSearchParams(form, mapping) {
+		const resolvedForm = resolveFormReference(form);
+		if (!(resolvedForm instanceof HTMLFormElement)) {
+			throw new Error('fillFromSearchParams requires an HTMLFormElement or a selector that resolves to one.');
+		}
+		const url = getTopLocationUrl();
+		const fieldNames = new Set(
+			Array.from(resolvedForm.elements)
+				.map((element) => ('name' in element ? element.name : ''))
+				.filter(Boolean),
+		);
+		for (const name of fieldNames) {
+			const paramName =
+				isRecord(mapping) && typeof mapping[name] === 'string' && mapping[name].length > 0
+					? mapping[name]
+					: name;
+			const values = url.searchParams.getAll(paramName);
+			if (values.length === 0) continue;
+			setControlValues(resolvedForm, name, values);
+		}
+		return this.formToObject(resolvedForm);
+	},
+	persistForm(form, options) {
+		const resolvedForm = resolveFormReference(form);
+		if (!(resolvedForm instanceof HTMLFormElement)) {
+			throw new Error('persistForm requires an HTMLFormElement or a selector that resolves to one.');
+		}
+		if (!isRecord(options) || typeof options.storageKey !== 'string' || options.storageKey.length === 0) {
+			throw new Error('persistForm requires a storageKey option.');
+		}
+		const values = this.formToObject(resolvedForm);
+		const fieldNames = Array.isArray(options.fields)
+			? options.fields.filter((field) => typeof field === 'string' && field.length > 0)
+			: Object.keys(values);
+		const persisted = {};
+		for (const name of fieldNames) {
+			if (!(name in values)) continue;
+			const value = values[name];
+			const normalized = Array.isArray(value)
+				? value.filter((entry) => typeof entry === 'string').map((entry) => entry)
+				: typeof value === 'string'
+					? value
+					: null;
+			if (normalized != null) {
+				persisted[name] = normalized;
+			}
+		}
+		localStorage.setItem(options.storageKey, JSON.stringify(persisted));
+		return persisted;
+	},
+	restoreForm(form, options) {
+		const resolvedForm = resolveFormReference(form);
+		if (!(resolvedForm instanceof HTMLFormElement)) {
+			throw new Error('restoreForm requires an HTMLFormElement or a selector that resolves to one.');
+		}
+		if (!isRecord(options) || typeof options.storageKey !== 'string' || options.storageKey.length === 0) {
+			throw new Error('restoreForm requires a storageKey option.');
+		}
+		const raw = localStorage.getItem(options.storageKey);
+		if (!raw) return null;
+		let parsed = null;
+		try {
+			parsed = JSON.parse(raw);
+		} catch {
+			return null;
+		}
+		if (!isRecord(parsed)) return null;
+		for (const [name, value] of Object.entries(parsed)) {
+			setControlValues(resolvedForm, name, toStringArray(value));
+		}
+		return this.formToObject(resolvedForm);
+	},
+	createOAuthState(key) {
+		if (typeof key !== 'string' || key.length === 0) {
+			throw new Error('createOAuthState requires a storage key.');
+		}
+		const state =
+			globalThis.crypto && typeof globalThis.crypto.randomUUID === 'function'
+				? globalThis.crypto.randomUUID()
+				: Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+		sessionStorage.setItem(key, state);
+		return state;
+	},
+	getOAuthState(key) {
+		if (typeof key !== 'string' || key.length === 0) return null;
+		return sessionStorage.getItem(key);
+	},
+	clearOAuthState(key) {
+		if (typeof key !== 'string' || key.length === 0) return;
+		sessionStorage.removeItem(key);
+	},
+	validateOAuthCallbackState(input) {
+		if (!isRecord(input) || typeof input.key !== 'string' || input.key.length === 0) {
+			throw new Error('validateOAuthCallbackState requires a key.');
+		}
+		const expectedState = sessionStorage.getItem(input.key);
+		const returnedState =
+			typeof input.returnedState === 'string' && input.returnedState.length > 0
+				? input.returnedState
+				: null;
+		return {
+			valid:
+				typeof expectedState === 'string' &&
+				expectedState.length > 0 &&
+				returnedState != null &&
+				expectedState === returnedState,
+			expectedState,
+			returnedState,
+		};
+	},
+	readOAuthCallback(input) {
+		const url = getTopLocationUrl(isRecord(input) && typeof input.url === 'string' ? input.url : undefined);
+		const error = url.searchParams.get('error');
+		const errorDescription = url.searchParams.get('error_description');
+		if (error) {
+			return {
+				kind: 'error',
+				error,
+				errorDescription,
+				callbackUrl: url.toString(),
+			};
+		}
+		const code = url.searchParams.get('code');
+		if (!code) {
+			return { kind: 'none' };
+		}
+		const state = url.searchParams.get('state');
+		const expectedState =
+			isRecord(input) && typeof input.expectedStateKey === 'string'
+				? sessionStorage.getItem(input.expectedStateKey)
+				: null;
+		return {
+			kind: 'success',
+			code,
+			state,
+			callbackUrl: url.toString(),
+			expectedState,
+			stateMatches:
+				expectedState != null && state != null ? expectedState === state : null,
+		};
+	},
+	async fetchWithSecrets(input) {
+		const normalized = normalizeFetchWithSecretsInput(input);
+		if (!normalized.ok) {
+			return {
+				ok: false,
+				kind: 'execution_error',
+				message: normalized.error,
+			};
+		}
+		const fallbackSecretNames = normalizeSecretNameList(
+			extractSecretNamesFromValue([
+				normalized.value.url,
+				Object.values(normalized.value.headers),
+				normalized.value.body,
+			]),
+		);
+		try {
+			const result = await this.executeCode(
+				buildFetchWithSecretsExecuteCode(normalized.value),
+			);
+			return normalizeFetchWithSecretsResult(result);
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			if (message.includes('not allowed for host')) {
+				const approval = extractApprovalDetails(message, fallbackSecretNames);
+				return {
+					ok: false,
+					kind: 'host_approval_required',
+					approvalUrl: approval.approvalUrl,
+					message: approval.message,
+					host: approval.host,
+					secretNames: approval.secretNames,
+				};
+			}
+			return {
+				ok: false,
+				kind: 'execution_error',
+				message,
+			};
+		}
+	},
+	async exchangeOAuthCode(input) {
+		if (!isRecord(input)) {
+			return {
+				ok: false,
+				kind: 'execution_error',
+				message: 'exchangeOAuthCode input must be an object.',
+			};
+		}
+		if (
+			typeof input.tokenUrl !== 'string' ||
+			typeof input.code !== 'string' ||
+			typeof input.redirectUri !== 'string' ||
+			typeof input.clientIdSecretName !== 'string' ||
+			typeof input.clientSecretSecretName !== 'string' ||
+			input.tokenUrl.length === 0 ||
+			input.code.length === 0 ||
+			input.redirectUri.length === 0 ||
+			input.clientIdSecretName.length === 0 ||
+			input.clientSecretSecretName.length === 0
+		) {
+			return {
+				ok: false,
+				kind: 'execution_error',
+				message: 'exchangeOAuthCode requires tokenUrl, code, redirectUri, clientIdSecretName, and clientSecretSecretName.',
+			};
+		}
+		const scope = coerceSecretScope(input.scope);
+		const scopeSuffix = scope ? '|scope=' + scope : '';
+		const params = new URLSearchParams();
+		params.set('client_id', '{{secret:' + input.clientIdSecretName + scopeSuffix + '}}');
+		params.set('client_secret', '{{secret:' + input.clientSecretSecretName + scopeSuffix + '}}');
+		params.set('code', input.code);
+		params.set('redirect_uri', input.redirectUri);
+		if (isRecord(input.extraParams)) {
+			for (const [key, value] of Object.entries(input.extraParams)) {
+				if (value == null) continue;
+				params.set(key, typeof value === 'string' ? value : String(value));
+			}
+		}
+		return await this.fetchWithSecrets({
+			url: input.tokenUrl,
+			method: 'POST',
+			headers: {
+				Accept: 'application/json',
+				'Content-Type': 'application/x-www-form-urlencoded',
+			},
+			body: params.toString(),
+		});
+	},
+	async saveOAuthTokens(input) {
+		if (!isRecord(input) || !isRecord(input.payload)) {
+			return {
+				ok: false,
+				accessTokenSaved: false,
+				refreshTokenSaved: false,
+				error: 'saveOAuthTokens requires a payload object.',
+				results: [],
+			};
+		}
+		if (typeof input.accessTokenSecretName !== 'string' || input.accessTokenSecretName.length === 0) {
+			return {
+				ok: false,
+				accessTokenSaved: false,
+				refreshTokenSaved: false,
+				error: 'saveOAuthTokens requires an accessTokenSecretName.',
+				results: [],
+			};
+		}
+		const accessToken = typeof input.payload.access_token === 'string' ? input.payload.access_token : '';
+		const refreshToken = typeof input.payload.refresh_token === 'string' ? input.payload.refresh_token : '';
+		if (!accessToken) {
+			return {
+				ok: false,
+				accessTokenSaved: false,
+				refreshTokenSaved: false,
+				error: 'OAuth payload did not include an access_token.',
+				results: [],
+			};
+		}
+		const secrets = [
+			{
+				name: input.accessTokenSecretName,
+				value: accessToken,
+				description:
+					typeof input.accessTokenDescription === 'string'
+						? input.accessTokenDescription
+						: 'OAuth access token',
+				scope: coerceSecretScope(input.scope) ?? undefined,
+			},
+		];
+		if (refreshToken && typeof input.refreshTokenSecretName === 'string' && input.refreshTokenSecretName.length > 0) {
+			secrets.push({
+				name: input.refreshTokenSecretName,
+				value: refreshToken,
+				description:
+					typeof input.refreshTokenDescription === 'string'
+						? input.refreshTokenDescription
+						: 'OAuth refresh token',
+				scope: coerceSecretScope(input.scope) ?? undefined,
+			});
+		}
+		const saved = await this.saveSecrets(secrets);
+		return {
+			ok: saved.ok,
+			accessTokenSaved: saved.results.some((result) => result.name === input.accessTokenSecretName && result.ok === true),
+			refreshTokenSaved:
+				typeof input.refreshTokenSecretName === 'string' && input.refreshTokenSecretName.length > 0
+					? saved.results.some((result) => result.name === input.refreshTokenSecretName && result.ok === true)
+					: false,
+			error: saved.ok ? undefined : (saved.results.find((result) => result.ok !== true)?.error || 'Unable to save OAuth tokens.'),
+			results: saved.results,
+		};
+	},
+	buildSecretForm(input) {
+		if (!isRecord(input) || !Array.isArray(input.fields)) {
+			throw new Error('buildSecretForm requires a form config object with fields.');
+		}
+		const form = resolveFormReference(input.form);
+		if (!(form instanceof HTMLFormElement)) {
+			throw new Error('buildSecretForm requires an HTMLFormElement or a selector that resolves to one.');
+		}
+		const controller = {
+			form,
+			save: async () => {
+				const values = window.kodyWidget.formToObject(form);
+				const secrets = input.fields.map((field) => {
+					if (!field || typeof field !== 'object') {
+						throw new Error('Each secret field config must be an object.');
+					}
+					if (typeof field.inputName !== 'string' || field.inputName.length === 0) {
+						throw new Error('Each secret field config requires inputName.');
+					}
+					if (typeof field.secretName !== 'string' || field.secretName.length === 0) {
+						throw new Error('Each secret field config requires secretName.');
+					}
+					const rawValue = pickLastFormValue(values[field.inputName]);
+					if (typeof rawValue !== 'string' || rawValue.length === 0) {
+						throw new Error('Form field "' + field.inputName + '" is required.');
+					}
+					return {
+						name: field.secretName,
+						value: rawValue,
+						description:
+							typeof field.description === 'string' ? field.description : '',
+						scope: coerceSecretScope(field.scope) ?? undefined,
+					};
+				});
+				const result = await window.kodyWidget.saveSecrets(secrets);
+				if (result.ok) {
+					if (typeof input.onSuccess === 'function') {
+						await input.onSuccess(result, values);
+					}
+				} else if (typeof input.onError === 'function') {
+					await input.onError(result, values);
+				}
+				return result;
+			},
+			destroy: () => {
+				form.removeEventListener('submit', handleSubmit);
+			},
+		};
+		async function handleSubmit(event) {
+			event.preventDefault();
+			try {
+				await controller.save();
+			} catch (error) {
+				if (typeof input.onError === 'function') {
+					await input.onError(
+						{
+							ok: false,
+							results: [
+								{
+									name: '',
+									ok: false,
+									error:
+										error instanceof Error ? error.message : String(error),
+								},
+							],
+						},
+						window.kodyWidget.formToObject(form),
+					);
+					return;
+				}
+				throw error;
+			}
+		}
+		form.addEventListener('submit', handleSubmit);
+		return controller;
+	},
 	async deleteSecret(input) {
 		if (!input || typeof input !== 'object') {
 			return { ok: false, error: 'Secret input must be an object.' };
diff --git a/packages/worker/client/routes/account-approval-shared.ts b/packages/worker/client/routes/account-approval-shared.ts
new file mode 100644
index 0000000000..cafcd492a0
--- /dev/null
+++ b/packages/worker/client/routes/account-approval-shared.ts
@@ -0,0 +1,49 @@
+export type AccountStatus = 'loading' | 'ready' | 'error'
+export type ApprovalAction = 'approve' | 'reject'
+export type ApprovalScope = 'session' | 'app' | 'user'
+
+export type ApprovalView = {
+	token: string
+	name: string
+	scope: ApprovalScope
+	requestedHost: string
+	currentAllowedHosts: Array<string>
+}
+
+export const accountSecretsApiPath = '/account/secrets.json'
+
+export function getScopeLabel(scope: ApprovalScope) {
+	if (scope === 'app') return 'App'
+	if (scope === 'session') return 'Session'
+	return 'User'
+}
+
+export async function readJson<T>(response: Response) {
+	return (await response.json().catch(() => null)) as T | null
+}
+
+export async function submitApprovalRequest<
+	T extends { ok?: boolean; error?: string },
+>(action: ApprovalAction, requestToken: string) {
+	const response = await fetch(accountSecretsApiPath, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+		},
+		credentials: 'include',
+		body: JSON.stringify({
+			action,
+			requestToken,
+		}),
+	})
+	if (response.status === 401) {
+		window.location.assign('/login')
+		return null
+	}
+	const payload = await readJson<T>(response)
+	if (!response.ok || !payload?.ok) {
+		throw new Error(payload?.error || 'Unable to process approval.')
+	}
+	return payload
+}
diff --git a/packages/worker/client/routes/account-secrets.tsx b/packages/worker/client/routes/account-secrets.tsx
new file mode 100644
index 0000000000..e14b4469a8
--- /dev/null
+++ b/packages/worker/client/routes/account-secrets.tsx
@@ -0,0 +1,1425 @@
+import { type Handle } from 'remix/component'
+import {
+	buildAccountSecretPath,
+	parseAccountSecretId,
+	parseAccountSecretPath,
+} from '@kody-internal/shared/account-secret-route.ts'
+import { navigate, routerEvents } from '#client/client-router.tsx'
+import { createDoubleCheck } from '#client/double-check.ts'
+import {
+	type AccountStatus,
+	type ApprovalAction,
+	type ApprovalView,
+	accountSecretsApiPath,
+	getScopeLabel,
+	readJson,
+	submitApprovalRequest,
+} from '#client/routes/account-approval-shared.ts'
+import { TypeaheadCombobox } from '#client/typeahead-combobox.tsx'
+import {
+	colors,
+	mq,
+	radius,
+	shadows,
+	spacing,
+	transitions,
+	typography,
+} from '#client/styles/tokens.ts'
+
+type SecretScope = 'app' | 'user'
+
+type SavedAppOption = {
+	id: string
+	title: string
+	updatedAt: string
+}
+
+type SecretListItem = {
+	id: string
+	name: string
+	scope: SecretScope
+	description: string
+	appId: string | null
+	appTitle: string | null
+	allowedHosts: Array<string>
+	createdAt: string
+	updatedAt: string
+	ttlMs: number | null
+}
+
+type SecretDetail = SecretListItem & {
+	value: string
+}
+
+type AccountSecretsPayload = {
+	ok: true
+	email: string
+	apps: Array<SavedAppOption>
+	secrets: Array<SecretListItem>
+	selectedSecret: SecretDetail | null
+	approval: ApprovalView | null
+}
+
+type EditorState = {
+	currentId: string | null
+	name: string
+	scope: SecretScope
+	appId: string
+	description: string
+	value: string
+	allowedHosts: Array<string>
+}
+
+type SelectionState = {
+	selectedSecretId: string | null
+	isCreating: boolean
+}
+
+type SecretFilterScope = 'all' | 'user' | 'app'
+
+type SecretFilterState = {
+	search: string
+	scope: SecretFilterScope
+	appId: string
+}
+
+const secretsBasePath = '/account/secrets'
+
+function formatRelativeTtl(ttlMs: number | null) {
+	if (ttlMs == null) return 'No expiry'
+	const totalMinutes = Math.max(1, Math.round(ttlMs / 60_000))
+	if (totalMinutes < 60) return `Expires in ${totalMinutes} min`
+	const totalHours = Math.round(totalMinutes / 60)
+	if (totalHours < 48) return `Expires in ${totalHours} hr`
+	const totalDays = Math.round(totalHours / 24)
+	return `Expires in ${totalDays} day${totalDays === 1 ? '' : 's'}`
+}
+
+function formatTimestamp(value: string) {
+	return new Date(value).toLocaleString()
+}
+
+function createEmptyEditorState(apps: Array<SavedAppOption>): EditorState {
+	return {
+		currentId: null,
+		name: '',
+		scope: 'user',
+		appId: apps[0]?.id ?? '',
+		description: '',
+		value: '',
+		allowedHosts: [''],
+	}
+}
+
+function createEditorStateFromSecret(secret: SecretDetail): EditorState {
+	return {
+		currentId: secret.id,
+		name: secret.name,
+		scope: secret.scope,
+		appId: secret.appId ?? '',
+		description: secret.description,
+		value: secret.value,
+		allowedHosts: secret.allowedHosts.length > 0 ? secret.allowedHosts : [''],
+	}
+}
+
+function getSelectionState(href: string): SelectionState {
+	const url = new URL(href, 'http://localhost')
+	if (url.pathname === `${secretsBasePath}/new`) {
+		return {
+			selectedSecretId: null,
+			isCreating: true,
+		}
+	}
+	if (url.pathname === `${secretsBasePath}/approve`) {
+		return {
+			selectedSecretId: null,
+			isCreating: false,
+		}
+	}
+	const parsedPath = parseAccountSecretPath(url.pathname)
+	if (parsedPath) {
+		return {
+			selectedSecretId: parsedPath.id,
+			isCreating: false,
+		}
+	}
+	if (url.pathname.startsWith(`${secretsBasePath}/`)) {
+		const legacySecretId = url.pathname.slice(`${secretsBasePath}/`.length)
+		const parsedLegacyId = parseAccountSecretId(legacySecretId)
+		return {
+			selectedSecretId: parsedLegacyId
+				? legacySecretId
+				: url.pathname.slice(`${secretsBasePath}/`.length),
+			isCreating: false,
+		}
+	}
+	return {
+		selectedSecretId: null,
+		isCreating: false,
+	}
+}
+
+function getCurrentHref() {
+	return typeof window === 'undefined' ? secretsBasePath : window.location.href
+}
+
+function getCurrentSearch() {
+	return typeof window === 'undefined' ? '' : window.location.search
+}
+
+function buildSecretsHref(pathname: string, search = getCurrentSearch()) {
+	return `${pathname}${search}`
+}
+
+function buildSecretHref(secret: {
+	name: string
+	scope: SecretScope
+	appId: string | null
+}) {
+	return buildSecretsHref(
+		buildAccountSecretPath({
+			name: secret.name,
+			scope: secret.scope,
+			appId: secret.appId,
+		}),
+	)
+}
+
+function buildNewSecretHref() {
+	return buildSecretsHref(`${secretsBasePath}/new`)
+}
+
+function buildBaseSecretsHref() {
+	return buildSecretsHref(secretsBasePath)
+}
+
+function replaceSecretsLocation(to: string) {
+	if (typeof window === 'undefined') return
+	const destination = new URL(to, window.location.href)
+	const nextPath = `${destination.pathname}${destination.search}${destination.hash}`
+	const currentPath = `${window.location.pathname}${window.location.search}${window.location.hash}`
+	if (nextPath === currentPath) return
+	window.history.replaceState({}, '', nextPath)
+	routerEvents.dispatchEvent(new Event('navigate'))
+}
+
+function getDataRefreshKey(href: string) {
+	const url = new URL(href, 'http://localhost')
+	const request = url.searchParams.get('request') ?? ''
+	const requestedHost = url.searchParams.get('allowed-host') ?? ''
+	return `${url.pathname}?request=${request}&allowed-host=${requestedHost}`
+}
+
+function readFilterState(
+	href: string,
+	apps: Array<SavedAppOption>,
+): SecretFilterState {
+	const url = new URL(href, 'http://localhost')
+	const search = url.searchParams.get('q')?.trim() ?? ''
+	const rawScope = url.searchParams.get('scope')
+	const scope =
+		rawScope === 'user' || rawScope === 'app' ? rawScope : ('all' as const)
+	const rawAppId = url.searchParams.get('app')?.trim() ?? ''
+	const appId =
+		scope === 'user'
+			? ''
+			: apps.some((app) => app.id === rawAppId)
+				? rawAppId
+				: ''
+	return {
+		search,
+		scope,
+		appId,
+	}
+}
+
+function filterSecrets(
+	secrets: Array<SecretListItem>,
+	filters: SecretFilterState,
+) {
+	const search = filters.search.trim().toLowerCase()
+	return secrets.filter((secret) => {
+		if (filters.scope !== 'all' && secret.scope !== filters.scope) return false
+		if (
+			filters.scope !== 'user' &&
+			filters.appId &&
+			secret.appId !== filters.appId
+		)
+			return false
+		if (!search) return true
+
+		const haystack = [
+			secret.name,
+			secret.description,
+			secret.appTitle ?? '',
+			secret.scope,
+			...secret.allowedHosts,
+		]
+			.join(' ')
+			.toLowerCase()
+		return haystack.includes(search)
+	})
+}
+
+function buildAppOptionDescription(updatedAt: string) {
+	return `Updated ${new Date(updatedAt).toLocaleDateString()}`
+}
+
+export function AccountSecretsRoute(handle: Handle) {
+	let status: AccountStatus = 'loading'
+	let email = ''
+	let apps: Array<SavedAppOption> = []
+	let secrets: Array<SecretListItem> = []
+	let selectedSecret: SecretDetail | null = null
+	let approval: ApprovalView | null = null
+	let editorState = createEmptyEditorState([])
+	let message: string | null = null
+	let submittingApprovalAction: ApprovalAction | null = null
+	let saveState: 'idle' | 'saving' | 'deleting' = 'idle'
+	let lastLoadedDataKey = ''
+	let showSecretValue = false
+	const deleteSecretCheck = createDoubleCheck(handle)
+	const filterAppCombobox = TypeaheadCombobox(handle)
+	const editorAppCombobox = TypeaheadCombobox(handle)
+
+	function buildHrefWithUpdatedFilters(
+		nextFilters: Partial<SecretFilterState>,
+		options?: { pathname?: string },
+	) {
+		const currentUrl = new URL(getCurrentHref(), 'http://localhost')
+		const filters = {
+			...readFilterState(currentUrl.toString(), apps),
+			...nextFilters,
+		}
+		const nextUrl = new URL(currentUrl.toString())
+		if (options?.pathname) {
+			nextUrl.pathname = options.pathname
+		}
+		if (filters.search) nextUrl.searchParams.set('q', filters.search)
+		else nextUrl.searchParams.delete('q')
+		if (filters.scope === 'all') nextUrl.searchParams.delete('scope')
+		else nextUrl.searchParams.set('scope', filters.scope)
+		if (filters.appId) nextUrl.searchParams.set('app', filters.appId)
+		else nextUrl.searchParams.delete('app')
+		return `${nextUrl.pathname}${nextUrl.search}`
+	}
+
+	function syncEditorState(selection: SelectionState) {
+		deleteSecretCheck.reset()
+		showSecretValue = false
+		if (selection.isCreating) {
+			editorState = createEmptyEditorState(apps)
+			return
+		}
+		if (selectedSecret) {
+			editorState = createEditorStateFromSecret(selectedSecret)
+			return
+		}
+		editorState = createEmptyEditorState(apps)
+	}
+
+	function applyPayload(
+		payload: AccountSecretsPayload,
+		selection: SelectionState,
+		nextMessage: string | null,
+	) {
+		email = payload.email
+		apps = payload.apps
+		secrets = payload.secrets
+		selectedSecret = payload.selectedSecret
+		approval = payload.approval
+		syncEditorState(selection)
+		message =
+			nextMessage ??
+			(selection.selectedSecretId &&
+			!payload.selectedSecret &&
+			!payload.approval
+				? 'Secret not found.'
+				: null)
+		status = 'ready'
+		submittingApprovalAction = null
+		saveState = 'idle'
+	}
+
+	async function loadAccountSecrets(signal: AbortSignal) {
+		try {
+			const href = getCurrentHref()
+			const selection = getSelectionState(href)
+			lastLoadedDataKey = getDataRefreshKey(href)
+			const requestUrl = new URL(accountSecretsApiPath, href)
+			requestUrl.search = new URL(href).search
+			if (selection.selectedSecretId) {
+				requestUrl.searchParams.set('selected', selection.selectedSecretId)
+			} else {
+				requestUrl.searchParams.delete('selected')
+			}
+
+			const response = await fetch(requestUrl.toString(), {
+				headers: { Accept: 'application/json' },
+				credentials: 'include',
+				signal,
+			})
+			if (signal.aborted) return
+			if (response.status === 401) {
+				window.location.assign('/login')
+				return
+			}
+
+			const payload = await readJson<AccountSecretsPayload>(response)
+			if (!response.ok || !payload?.ok) {
+				throw new Error('Unable to load your secrets.')
+			}
+
+			applyPayload(payload, selection, null)
+			handle.update()
+		} catch (error) {
+			if (signal.aborted) return
+			status = 'error'
+			message =
+				error instanceof Error ? error.message : 'Unable to load your secrets.'
+			handle.update()
+		}
+	}
+
+	async function submitApproval(action: ApprovalAction) {
+		if (!approval || submittingApprovalAction != null) return
+		submittingApprovalAction = action
+		message = null
+		handle.update()
+
+		try {
+			const payload = await submitApprovalRequest<
+				AccountSecretsPayload & { error?: string; ok?: boolean }
+			>(action, approval.token)
+			if (!payload) return
+
+			const selection = getSelectionState(getCurrentHref())
+			applyPayload(
+				payload,
+				selection,
+				action === 'approve'
+					? 'Approved requested host.'
+					: 'Rejected host approval request.',
+			)
+			handle.update()
+
+			if (typeof window !== 'undefined' && window.location.search) {
+				const nextHref = selectedSecret
+					? buildHrefWithUpdatedFilters(
+							{},
+							{
+								pathname: buildAccountSecretPath({
+									name: selectedSecret.name,
+									scope: selectedSecret.scope,
+									appId: selectedSecret.appId,
+								}),
+							},
+						)
+					: buildHrefWithUpdatedFilters({}, { pathname: secretsBasePath })
+				const nextUrl = new URL(nextHref, window.location.href)
+				nextUrl.searchParams.delete('request')
+				nextUrl.searchParams.delete('allowed-host')
+				navigate(`${nextUrl.pathname}${nextUrl.search}`)
+				lastLoadedDataKey = getDataRefreshKey(nextUrl.toString())
+			}
+		} catch (error) {
+			submittingApprovalAction = null
+			message =
+				error instanceof Error ? error.message : 'Unable to process approval.'
+			handle.update()
+		}
+	}
+
+	async function saveSecretChanges(event: SubmitEvent) {
+		event.preventDefault()
+		if (saveState !== 'idle') return
+
+		saveState = 'saving'
+		message = null
+		handle.update()
+
+		try {
+			const response = await fetch(accountSecretsApiPath, {
+				method: 'POST',
+				headers: {
+					Accept: 'application/json',
+					'Content-Type': 'application/json',
+				},
+				credentials: 'include',
+				body: JSON.stringify({
+					action: 'save',
+					currentId: editorState.currentId,
+					name: editorState.name,
+					scope: editorState.scope,
+					appId: editorState.scope === 'app' ? editorState.appId : null,
+					description: editorState.description,
+					value: editorState.value,
+					allowedHosts: editorState.allowedHosts,
+				}),
+			})
+			if (response.status === 401) {
+				window.location.assign('/login')
+				return
+			}
+
+			const payload = await readJson<
+				AccountSecretsPayload & { error?: string; ok?: boolean }
+			>(response)
+			if (!response.ok || !payload?.ok) {
+				throw new Error(payload?.error || 'Unable to save secret.')
+			}
+
+			const nextSelection: SelectionState = {
+				selectedSecretId: payload.selectedSecret?.id ?? null,
+				isCreating: false,
+			}
+			applyPayload(
+				payload,
+				nextSelection,
+				editorState.currentId ? 'Saved secret.' : 'Created secret.',
+			)
+			handle.update()
+
+			if (payload.selectedSecret) {
+				navigate(buildSecretHref(payload.selectedSecret))
+			}
+		} catch (error) {
+			saveState = 'idle'
+			message =
+				error instanceof Error ? error.message : 'Unable to save secret.'
+			handle.update()
+		}
+	}
+
+	async function deleteSelectedSecret() {
+		if (!editorState.currentId || saveState !== 'idle') return
+
+		saveState = 'deleting'
+		message = null
+		handle.update()
+
+		try {
+			const response = await fetch(accountSecretsApiPath, {
+				method: 'POST',
+				headers: {
+					Accept: 'application/json',
+					'Content-Type': 'application/json',
+				},
+				credentials: 'include',
+				body: JSON.stringify({
+					action: 'delete',
+					currentId: editorState.currentId,
+				}),
+			})
+			if (response.status === 401) {
+				window.location.assign('/login')
+				return
+			}
+
+			const payload = await readJson<
+				AccountSecretsPayload & { error?: string; ok?: boolean }
+			>(response)
+			if (!response.ok || !payload?.ok) {
+				throw new Error(payload?.error || 'Unable to delete secret.')
+			}
+
+			applyPayload(
+				payload,
+				{ selectedSecretId: null, isCreating: false },
+				'Deleted secret.',
+			)
+			deleteSecretCheck.reset()
+			handle.update()
+			navigate(buildBaseSecretsHref())
+		} catch (error) {
+			saveState = 'idle'
+			message =
+				error instanceof Error ? error.message : 'Unable to delete secret.'
+			handle.update()
+		}
+	}
+
+	function updateAllowedHost(index: number, value: string) {
+		editorState = {
+			...editorState,
+			allowedHosts: editorState.allowedHosts.map((host, hostIndex) =>
+				hostIndex === index ? value : host,
+			),
+		}
+		handle.update()
+	}
+
+	function addAllowedHost() {
+		editorState = {
+			...editorState,
+			allowedHosts: [...editorState.allowedHosts, ''],
+		}
+		handle.update()
+	}
+
+	function removeAllowedHost(index: number) {
+		const nextHosts = editorState.allowedHosts.filter(
+			(_host, hostIndex) => hostIndex !== index,
+		)
+		editorState = {
+			...editorState,
+			allowedHosts: nextHosts.length > 0 ? nextHosts : [''],
+		}
+		handle.update()
+	}
+
+	return () => {
+		const currentHref = getCurrentHref()
+		const selection = getSelectionState(currentHref)
+		const filters = readFilterState(currentHref, apps)
+		const filteredSecrets = filterSecrets(secrets, filters)
+		const appOptions = apps.map((app) => ({
+			id: app.id,
+			label: app.title,
+			description: buildAppOptionDescription(app.updatedAt),
+		}))
+		const filterAppOptions = [
+			{
+				id: '',
+				label: 'All apps',
+				description: 'Show secrets across every app',
+			},
+			...appOptions,
+		]
+		const isRefreshingForLocationChange =
+			status !== 'loading' &&
+			getDataRefreshKey(currentHref) !== lastLoadedDataKey
+		if (status === 'loading' || isRefreshingForLocationChange) {
+			handle.queueTask(loadAccountSecrets)
+		}
+
+		const activeSecretId =
+			selection.selectedSecretId ?? selectedSecret?.id ?? null
+		const isMutating = saveState !== 'idle' || submittingApprovalAction != null
+		const canCreateAppSecrets = apps.length > 0
+		const showEditor = selection.isCreating || selectedSecret != null
+
+		return (
+			<section
+				css={{
+					maxWidth: '96rem',
+					margin: '0 auto',
+					display: 'grid',
+					gap: spacing.xl,
+				}}
+			>
+				<header
+					css={{
+						display: 'flex',
+						justifyContent: 'space-between',
+						alignItems: 'flex-start',
+						gap: spacing.md,
+						flexWrap: 'wrap',
+					}}
+				>
+					<div css={{ display: 'grid', gap: spacing.xs }}>
+						<h1
+							css={{
+								fontSize: typography.fontSize.xl,
+								fontWeight: typography.fontWeight.semibold,
+								color: colors.text,
+								margin: 0,
+							}}
+						>
+							{email ? `${email} secrets` : 'Secrets'}
+						</h1>
+						<p css={{ color: colors.textMuted, margin: 0 }}>
+							Create, update, and delete the secrets available to your account
+							and saved apps.
+						</p>
+					</div>
+					<button
+						type="button"
+						on={{ click: () => navigate(buildNewSecretHref()) }}
+						css={primaryButtonCss}
+					>
+						New secret
+					</button>
+				</header>
+
+				{approval && !isRefreshingForLocationChange ? (
+					<section
+						css={{
+							display: 'grid',
+							gap: spacing.md,
+							padding: spacing.lg,
+							borderRadius: radius.lg,
+							border: `1px solid ${colors.primary}`,
+							backgroundColor: colors.primarySoftest,
+						}}
+					>
+						<div css={{ display: 'grid', gap: spacing.xs }}>
+							<h2
+								css={{
+									margin: 0,
+									fontSize: typography.fontSize.lg,
+									fontWeight: typography.fontWeight.semibold,
+									color: colors.text,
+								}}
+							>
+								Approve host access
+							</h2>
+							<p css={{ margin: 0, color: colors.textMuted }}>
+								Allow <code>{approval.requestedHost}</code> to receive secret{' '}
+								<code>{approval.name}</code> from the{' '}
+								{getScopeLabel(approval.scope)} scope.
+							</p>
+							<p css={{ margin: 0, color: colors.textMuted }}>
+								Current allowed hosts:{' '}
+								{approval.currentAllowedHosts.length > 0
+									? approval.currentAllowedHosts.join(', ')
+									: 'none'}
+							</p>
+						</div>
+						<div css={{ display: 'flex', gap: spacing.sm, flexWrap: 'wrap' }}>
+							<button
+								type="button"
+								disabled={isMutating || isRefreshingForLocationChange}
+								on={{ click: () => void submitApproval('approve') }}
+								css={primaryButtonCss}
+							>
+								Approve host
+							</button>
+							<button
+								type="button"
+								disabled={isMutating || isRefreshingForLocationChange}
+								on={{ click: () => void submitApproval('reject') }}
+								css={secondaryButtonCss}
+							>
+								Reject
+							</button>
+						</div>
+					</section>
+				) : null}
+
+				{status === 'loading' ? (
+					<p css={{ color: colors.textMuted, margin: 0 }}>Loading secrets…</p>
+				) : null}
+				{message ? (
+					<p
+						css={{
+							color: status === 'error' ? colors.error : colors.text,
+							margin: 0,
+						}}
+						role="alert"
+					>
+						{message}
+					</p>
+				) : null}
+
+				<section
+					css={{
+						display: 'grid',
+						gridTemplateColumns: 'minmax(18rem, 22rem) minmax(0, 1fr)',
+						gap: spacing.lg,
+						alignItems: 'start',
+						[mq.mobile]: {
+							gridTemplateColumns: '1fr',
+						},
+					}}
+				>
+					<aside
+						css={{
+							display: 'grid',
+							gap: spacing.md,
+							padding: spacing.lg,
+							borderRadius: radius.lg,
+							border: `1px solid ${colors.border}`,
+							backgroundColor: colors.surface,
+							boxShadow: shadows.sm,
+							alignSelf: 'start',
+						}}
+					>
+						<div css={{ display: 'grid', gap: spacing.xs }}>
+							<h2
+								css={{
+									margin: 0,
+									fontSize: typography.fontSize.lg,
+									fontWeight: typography.fontWeight.semibold,
+									color: colors.text,
+								}}
+							>
+								Saved secrets
+							</h2>
+							<p css={{ margin: 0, color: colors.textMuted }}>
+								Select a secret to edit its metadata, value, and allowed hosts.
+							</p>
+						</div>
+						<div
+							css={{
+								display: 'grid',
+								gap: spacing.sm,
+							}}
+						>
+							<label css={fieldCss}>
+								<span css={fieldLabelCss}>Search</span>
+								<input
+									type="search"
+									value={filters.search}
+									placeholder="Search secrets"
+									aria-label="Search secrets"
+									on={{
+										input: (event) => {
+											replaceSecretsLocation(
+												buildHrefWithUpdatedFilters({
+													search: event.currentTarget.value,
+												}),
+											)
+										},
+									}}
+									css={inputCss}
+								/>
+							</label>
+							<label css={fieldCss}>
+								<span css={fieldLabelCss}>Scope</span>
+								<select
+									value={filters.scope}
+									aria-label="Filter secrets by scope"
+									on={{
+										change: (event) => {
+											const nextScope = event.currentTarget
+												.value as SecretFilterScope
+											replaceSecretsLocation(
+												buildHrefWithUpdatedFilters({
+													scope: nextScope,
+													appId: nextScope === 'user' ? '' : filters.appId,
+												}),
+											)
+										},
+									}}
+									css={inputCss}
+								>
+									<option value="all">All scopes</option>
+									<option value="user">User</option>
+									<option value="app">App</option>
+								</select>
+							</label>
+							{apps.length > 0
+								? filterAppCombobox({
+										id: 'secret-app-filter',
+										label: 'App filter',
+										placeholder: 'Filter by app',
+										value: filters.scope === 'user' ? '' : filters.appId,
+										disabled: filters.scope === 'user',
+										options: filterAppOptions,
+										onChange: (appId) => {
+											replaceSecretsLocation(
+												buildHrefWithUpdatedFilters({
+													appId,
+												}),
+											)
+										},
+										inputCss,
+										listCss: comboboxListCss,
+										optionCss: comboboxOptionCss,
+									})
+								: null}
+						</div>
+						{status === 'ready' && secrets.length === 0 ? (
+							<p css={{ margin: 0, color: colors.textMuted }}>
+								No secrets yet. Create one to get started.
+							</p>
+						) : status === 'ready' && filteredSecrets.length === 0 ? (
+							<p css={{ margin: 0, color: colors.textMuted }}>
+								No secrets match the current filters.
+							</p>
+						) : (
+							<div
+								css={{
+									maxHeight: 'min(65vh, 48rem)',
+									overflowY: 'auto',
+									paddingRight: spacing.xs,
+								}}
+							>
+								<ul
+									css={{
+										listStyle: 'none',
+										padding: 0,
+										margin: 0,
+										display: 'grid',
+										gap: spacing.sm,
+									}}
+								>
+									{filteredSecrets.map((secret) => {
+										const isActive = activeSecretId === secret.id
+										return (
+											<li key={secret.id}>
+												<button
+													type="button"
+													on={{
+														click: () => navigate(buildSecretHref(secret)),
+													}}
+													css={{
+														width: '100%',
+														textAlign: 'left',
+														display: 'grid',
+														gap: spacing.xs,
+														padding: spacing.md,
+														borderRadius: radius.md,
+														border: `1px solid ${
+															isActive ? colors.primary : colors.border
+														}`,
+														backgroundColor: isActive
+															? colors.primarySoftest
+															: colors.background,
+														color: colors.text,
+														cursor: 'pointer',
+														transition: `background-color ${transitions.normal}, border-color ${transitions.normal}`,
+													}}
+												>
+													<div
+														css={{
+															display: 'flex',
+															justifyContent: 'space-between',
+															gap: spacing.sm,
+															alignItems: 'baseline',
+														}}
+													>
+														<strong>{secret.name}</strong>
+														<span
+															css={{
+																fontSize: typography.fontSize.xs,
+																color: colors.textMuted,
+															}}
+														>
+															{formatRelativeTtl(secret.ttlMs)}
+														</span>
+													</div>
+													<span
+														css={{
+															fontSize: typography.fontSize.sm,
+															color: colors.textMuted,
+														}}
+													>
+														{getScopeLabel(secret.scope)}
+														{secret.appTitle ? ` - ${secret.appTitle}` : ''}
+													</span>
+													{secret.description ? (
+														<span
+															css={{
+																fontSize: typography.fontSize.sm,
+																color: colors.textMuted,
+															}}
+														>
+															{secret.description}
+														</span>
+													) : null}
+												</button>
+											</li>
+										)
+									})}
+								</ul>
+							</div>
+						)}
+					</aside>
+
+					<div
+						css={{
+							display: 'grid',
+							gap: spacing.lg,
+							padding: spacing.lg,
+							borderRadius: radius.lg,
+							border: `1px solid ${colors.border}`,
+							backgroundColor: colors.surface,
+							boxShadow: shadows.sm,
+						}}
+					>
+						{showEditor ? (
+							<form
+								css={{ display: 'grid', gap: spacing.lg }}
+								on={{ submit: saveSecretChanges }}
+							>
+								<div css={{ display: 'grid', gap: spacing.xs }}>
+									<h2
+										css={{
+											margin: 0,
+											fontSize: typography.fontSize.lg,
+											fontWeight: typography.fontWeight.semibold,
+											color: colors.text,
+										}}
+									>
+										{selection.isCreating ? 'New secret' : selectedSecret?.name}
+									</h2>
+									<p css={{ margin: 0, color: colors.textMuted }}>
+										{selection.isCreating
+											? 'Create a new user or app secret.'
+											: 'Update the secret value and metadata for this entry.'}
+									</p>
+								</div>
+
+								<div
+									css={{
+										display: 'grid',
+										gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+										gap: spacing.md,
+										[mq.mobile]: {
+											gridTemplateColumns: '1fr',
+										},
+									}}
+								>
+									<label css={fieldCss}>
+										<span css={fieldLabelCss}>Name</span>
+										<input
+											type="text"
+											required
+											value={editorState.name}
+											placeholder="api-token"
+											on={{
+												input: (event) => {
+													editorState = {
+														...editorState,
+														name: event.currentTarget.value,
+													}
+													handle.update()
+												},
+											}}
+											css={inputCss}
+										/>
+									</label>
+
+									<label css={fieldCss}>
+										<span css={fieldLabelCss}>Scope</span>
+										<select
+											value={editorState.scope}
+											on={{
+												change: (event) => {
+													const scope = event.currentTarget.value as SecretScope
+													editorState = {
+														...editorState,
+														scope,
+														appId:
+															scope === 'app'
+																? editorState.appId || apps[0]?.id || ''
+																: '',
+													}
+													handle.update()
+												},
+											}}
+											css={inputCss}
+										>
+											<option value="user">User</option>
+											{canCreateAppSecrets ? (
+												<option value="app">App</option>
+											) : null}
+										</select>
+									</label>
+								</div>
+
+								{editorState.scope === 'app'
+									? editorAppCombobox({
+											id: 'secret-editor-app',
+											label: 'App',
+											placeholder: 'Choose an app',
+											value: editorState.appId,
+											options: appOptions,
+											onChange: (appId) => {
+												editorState = {
+													...editorState,
+													appId,
+												}
+												handle.update()
+											},
+											inputCss,
+											listCss: comboboxListCss,
+											optionCss: comboboxOptionCss,
+										})
+									: null}
+
+								<label css={fieldCss}>
+									<span css={fieldLabelCss}>Description</span>
+									<textarea
+										value={editorState.description}
+										rows={3}
+										placeholder="What this secret is used for"
+										on={{
+											input: (event) => {
+												editorState = {
+													...editorState,
+													description: event.currentTarget.value,
+												}
+												handle.update()
+											},
+										}}
+										css={textareaCss}
+									/>
+								</label>
+
+								<label css={fieldCss}>
+									<span css={fieldLabelCss}>Secret value</span>
+									<div
+										css={{
+											position: 'relative',
+											display: 'flex',
+											alignItems: 'center',
+										}}
+									>
+										{showSecretValue ? (
+											<input
+												type="text"
+												required
+												autoComplete="new-password"
+												value={editorState.value}
+												placeholder="Enter the secret value"
+												on={{
+													input: (event) => {
+														editorState = {
+															...editorState,
+															value: event.currentTarget.value,
+														}
+														handle.update()
+													},
+												}}
+												css={{
+													...inputCss,
+													paddingRight: '3rem',
+												}}
+											/>
+										) : (
+											<input
+												type="password"
+												required
+												autoComplete="new-password"
+												value={editorState.value}
+												placeholder="Enter the secret value"
+												on={{
+													input: (event) => {
+														editorState = {
+															...editorState,
+															value: event.currentTarget.value,
+														}
+														handle.update()
+													},
+												}}
+												css={{
+													...inputCss,
+													paddingRight: '3rem',
+												}}
+											/>
+										)}
+										<button
+											type="button"
+											aria-label={
+												showSecretValue
+													? 'Hide secret value'
+													: 'Show secret value'
+											}
+											title={
+												showSecretValue
+													? 'Hide secret value'
+													: 'Show secret value'
+											}
+											on={{
+												click: () => {
+													showSecretValue = !showSecretValue
+													handle.update()
+												},
+											}}
+											css={{
+												position: 'absolute',
+												right: spacing.sm,
+												background: 'none',
+												border: 'none',
+												padding: 0,
+												color: colors.textMuted,
+												cursor: 'pointer',
+												display: 'flex',
+												alignItems: 'center',
+												justifyContent: 'center',
+												'&:hover': {
+													color: colors.text,
+												},
+											}}
+										>
+											{showSecretValue ? (
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													width="20"
+													height="20"
+													viewBox="0 0 24 24"
+													fill="none"
+													stroke="currentColor"
+													stroke-width="2"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+												>
+													<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+													<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
+													<path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
+													<line x1="2" x2="22" y1="2" y2="22" />
+												</svg>
+											) : (
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													width="20"
+													height="20"
+													viewBox="0 0 24 24"
+													fill="none"
+													stroke="currentColor"
+													stroke-width="2"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+												>
+													<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+													<circle cx="12" cy="12" r="3" />
+												</svg>
+											)}
+										</button>
+									</div>
+								</label>
+
+								<div css={{ display: 'grid', gap: spacing.sm }}>
+									<div css={{ display: 'grid', gap: spacing.xs }}>
+										<span css={fieldLabelCss}>Allowed hosts</span>
+										<p css={{ margin: 0, color: colors.textMuted }}>
+											Leave this empty to require explicit host approval before
+											a secret can be used.
+										</p>
+									</div>
+									<div css={{ display: 'grid', gap: spacing.sm }}>
+										{editorState.allowedHosts.map((host, index) => (
+											<div
+												key={`${index}-${host}`}
+												css={{
+													display: 'grid',
+													gridTemplateColumns: 'minmax(0, 1fr) auto',
+													gap: spacing.sm,
+													[mq.mobile]: {
+														gridTemplateColumns: '1fr',
+													},
+												}}
+											>
+												<input
+													type="text"
+													value={host}
+													placeholder="api.example.com"
+													on={{
+														input: (event) =>
+															updateAllowedHost(
+																index,
+																event.currentTarget.value,
+															),
+													}}
+													css={inputCss}
+												/>
+												<button
+													type="button"
+													on={{ click: () => removeAllowedHost(index) }}
+													css={secondaryButtonCss}
+												>
+													Remove
+												</button>
+											</div>
+										))}
+									</div>
+									<div>
+										<button
+											type="button"
+											on={{ click: addAllowedHost }}
+											css={secondaryButtonCss}
+										>
+											Add host
+										</button>
+									</div>
+								</div>
+
+								{selectedSecret ? (
+									<div
+										css={{
+											display: 'grid',
+											gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+											gap: spacing.md,
+											padding: spacing.md,
+											borderRadius: radius.md,
+											backgroundColor: colors.background,
+											border: `1px solid ${colors.border}`,
+											[mq.mobile]: {
+												gridTemplateColumns: '1fr',
+											},
+										}}
+									>
+										<div css={{ display: 'grid', gap: spacing.xs }}>
+											<span css={fieldLabelCss}>Created</span>
+											<span css={{ color: colors.textMuted }}>
+												{formatTimestamp(selectedSecret.createdAt)}
+											</span>
+										</div>
+										<div css={{ display: 'grid', gap: spacing.xs }}>
+											<span css={fieldLabelCss}>Updated</span>
+											<span css={{ color: colors.textMuted }}>
+												{formatTimestamp(selectedSecret.updatedAt)}
+											</span>
+										</div>
+										<div css={{ display: 'grid', gap: spacing.xs }}>
+											<span css={fieldLabelCss}>Expiry</span>
+											<span css={{ color: colors.textMuted }}>
+												{formatRelativeTtl(selectedSecret.ttlMs)}
+											</span>
+										</div>
+									</div>
+								) : null}
+
+								<div
+									css={{
+										display: 'flex',
+										gap: spacing.sm,
+										flexWrap: 'wrap',
+									}}
+								>
+									<button
+										type="submit"
+										disabled={
+											isMutating ||
+											(editorState.scope === 'app' && !editorState.appId)
+										}
+										css={primaryButtonCss}
+									>
+										{saveState === 'saving' ? 'Saving...' : 'Save'}
+									</button>
+									{editorState.currentId ? (
+										<button
+											type="button"
+											disabled={isMutating}
+											{...deleteSecretCheck.getButtonProps({
+												on: {
+													click: () => void deleteSelectedSecret(),
+												},
+											})}
+											aria-label={
+												deleteSecretCheck.doubleCheck
+													? `Confirm delete secret "${editorState.name}"`
+													: `Delete secret "${editorState.name}"`
+											}
+											title={
+												deleteSecretCheck.doubleCheck
+													? `Click again to delete "${editorState.name}"`
+													: `Delete secret "${editorState.name}"`
+											}
+											css={dangerButtonCss}
+										>
+											{saveState === 'deleting'
+												? 'Deleting...'
+												: deleteSecretCheck.doubleCheck
+													? 'Confirm delete'
+													: 'Delete'}
+										</button>
+									) : null}
+								</div>
+							</form>
+						) : (
+							<div css={{ display: 'grid', gap: spacing.sm }}>
+								<h2
+									css={{
+										margin: 0,
+										fontSize: typography.fontSize.lg,
+										fontWeight: typography.fontWeight.semibold,
+										color: colors.text,
+									}}
+								>
+									Select a secret
+								</h2>
+								<p css={{ margin: 0, color: colors.textMuted }}>
+									Pick a secret from the list to edit it, or create a new one.
+								</p>
+							</div>
+						)}
+					</div>
+				</section>
+			</section>
+		)
+	}
+}
+
+const fieldCss = {
+	display: 'grid',
+	gap: spacing.xs,
+}
+
+const fieldLabelCss = {
+	color: colors.text,
+	fontWeight: typography.fontWeight.medium,
+	fontSize: typography.fontSize.sm,
+}
+
+const inputCss = {
+	width: '100%',
+	padding: spacing.sm,
+	borderRadius: radius.md,
+	border: `1px solid ${colors.border}`,
+	backgroundColor: colors.background,
+	color: colors.text,
+	fontSize: typography.fontSize.base,
+	fontFamily: typography.fontFamily,
+	boxSizing: 'border-box' as const,
+}
+
+const textareaCss = {
+	...inputCss,
+	resize: 'vertical' as const,
+	minHeight: '7rem',
+}
+
+const comboboxListCss = {
+	position: 'absolute' as const,
+	top: '100%',
+	left: 0,
+	right: 0,
+	zIndex: 10,
+	marginTop: spacing.xs,
+	maxHeight: '18rem',
+	overflowY: 'auto' as const,
+	borderRadius: radius.md,
+	border: `1px solid ${colors.border}`,
+	backgroundColor: colors.surface,
+	boxShadow: shadows.md,
+	padding: spacing.xs,
+	display: 'grid',
+	gap: spacing.xs,
+}
+
+const comboboxOptionCss = {
+	display: 'grid',
+	gap: spacing.xs,
+	width: '100%',
+	textAlign: 'left' as const,
+	padding: spacing.sm,
+	borderRadius: radius.md,
+	border: 'none',
+	backgroundColor: 'transparent',
+	color: colors.text,
+	cursor: 'pointer',
+	'&[data-active="true"]': {
+		backgroundColor: colors.primarySoftest,
+	},
+	'&:hover': {
+		backgroundColor: colors.primarySoftest,
+	},
+}
+
+const primaryButtonCss = {
+	padding: `${spacing.sm} ${spacing.md}`,
+	borderRadius: radius.full,
+	border: 'none',
+	backgroundColor: colors.primary,
+	color: colors.onPrimary,
+	fontWeight: typography.fontWeight.medium,
+	cursor: 'pointer',
+}
+
+const secondaryButtonCss = {
+	...primaryButtonCss,
+	backgroundColor: 'transparent',
+	color: colors.text,
+	border: `1px solid ${colors.border}`,
+}
+
+const dangerButtonCss = {
+	...primaryButtonCss,
+	backgroundColor: colors.danger,
+	color: colors.onDanger,
+}
diff --git a/packages/worker/client/routes/account.tsx b/packages/worker/client/routes/account.tsx
index 4405bb29e5..a2d73d392f 100644
--- a/packages/worker/client/routes/account.tsx
+++ b/packages/worker/client/routes/account.tsx
@@ -1,56 +1,111 @@
 import { type Handle } from 'remix/component'
-import { colors, spacing, typography } from '#client/styles/tokens.ts'
+import { colors, mq, spacing, typography } from '#client/styles/tokens.ts'
+import {
+	type AccountStatus,
+	type ApprovalAction,
+	type ApprovalView,
+	accountSecretsApiPath,
+	readJson,
+	submitApprovalRequest,
+} from '#client/routes/account-approval-shared.ts'
 
-type AccountStatus = 'idle' | 'loading' | 'ready' | 'error'
+type AccountSecretsPayload = {
+	ok: true
+	email: string
+	approval: ApprovalView | null
+}
 
 export function AccountRoute(handle: Handle) {
 	let status: AccountStatus = 'loading'
 	let email = ''
+	let approval: ApprovalView | null = null
 	let message: string | null = null
+	let submittingApprovalAction: ApprovalAction | null = null
+	let lastLoadedHref = ''
 
-	async function loadAccount(signal: AbortSignal) {
+	async function loadAccountSecrets(signal: AbortSignal) {
 		try {
-			const response = await fetch('/session', {
-				headers: { Accept: 'application/json' },
-				credentials: 'include',
-				signal,
-			})
+			const href =
+				typeof window === 'undefined' ? '/account' : window.location.href
+			lastLoadedHref = href
+			const response = await fetch(
+				`${accountSecretsApiPath}${new URL(href).search}`,
+				{
+					headers: { Accept: 'application/json' },
+					credentials: 'include',
+					signal,
+				},
+			)
 			if (signal.aborted) return
-			const payload = await response.json().catch(() => null)
-			const sessionEmail =
-				response.ok &&
-				payload?.ok &&
-				typeof payload?.session?.email === 'string'
-					? payload.session.email.trim()
-					: ''
-			if (!sessionEmail) {
+			if (response.status === 401) {
 				window.location.assign('/login')
 				return
 			}
-			email = sessionEmail
+			const payload = await readJson<AccountSecretsPayload>(response)
+			if (!response.ok || !payload?.ok) {
+				throw new Error('Unable to load your account secrets.')
+			}
+			email = payload.email
+			approval = payload.approval
 			status = 'ready'
 			message = null
+			submittingApprovalAction = null
 			handle.update()
-		} catch {
+		} catch (error) {
 			if (signal.aborted) return
 			status = 'error'
-			message = 'Unable to load your account.'
+			message =
+				error instanceof Error ? error.message : 'Unable to load your account.'
+			handle.update()
+		}
+	}
+
+	async function submitApproval(action: ApprovalAction) {
+		if (!approval || submittingApprovalAction != null) return
+		submittingApprovalAction = action
+		message = null
+		handle.update()
+		try {
+			const payload = await submitApprovalRequest<
+				AccountSecretsPayload & { error?: string; ok?: boolean }
+			>(action, approval.token)
+			if (!payload) return
+			email = payload.email
+			approval = payload.approval
+			submittingApprovalAction = null
+			message =
+				action === 'approve'
+					? 'Approved requested host.'
+					: 'Rejected host approval request.'
+			handle.update()
+			if (typeof window !== 'undefined' && window.location.search) {
+				window.history.replaceState(null, '', '/account')
+				lastLoadedHref = window.location.href
+			}
+		} catch (error) {
+			submittingApprovalAction = null
+			message =
+				error instanceof Error ? error.message : 'Unable to process approval.'
 			handle.update()
 		}
 	}
 
 	return () => {
-		if (status === 'loading') {
-			handle.queueTask(loadAccount)
+		const currentHref =
+			typeof window === 'undefined' ? '/account' : window.location.href
+		const isRefreshingForLocationChange =
+			status !== 'loading' && currentHref !== lastLoadedHref
+		if (status === 'loading' || isRefreshingForLocationChange) {
+			handle.queueTask(loadAccountSecrets)
 		}
 
 		return (
 			<section
 				css={{
-					maxWidth: '28rem',
+					maxWidth: '64rem',
 					margin: '0 auto',
 					display: 'grid',
-					gap: spacing.lg,
+					gap: spacing.xl,
 				}}
 			>
 				<header css={{ display: 'grid', gap: spacing.xs }}>
@@ -62,19 +117,150 @@ export function AccountRoute(handle: Handle) {
 							margin: 0,
 						}}
 					>
-						{email ? `Welcome, ${email}` : 'Welcome'}
+						{email ? `${email} account` : 'Account'}
 					</h1>
-					<p css={{ color: colors.textMuted }}>You are signed in to kody.</p>
+					<p css={{ color: colors.textMuted, margin: 0 }}>
+						Review approval requests and manage your stored secrets.
+					</p>
 				</header>
+
+				{approval && !isRefreshingForLocationChange ? (
+					<section
+						css={{
+							display: 'grid',
+							gap: spacing.md,
+							padding: spacing.lg,
+							borderRadius: '1rem',
+							border: `1px solid ${colors.primary}`,
+							backgroundColor: colors.primarySoftest,
+						}}
+					>
+						<div css={{ display: 'grid', gap: spacing.xs }}>
+							<h2
+								css={{
+									margin: 0,
+									fontSize: typography.fontSize.lg,
+									fontWeight: typography.fontWeight.semibold,
+									color: colors.text,
+								}}
+							>
+								Approve host access
+							</h2>
+							<p css={{ margin: 0, color: colors.textMuted }}>
+								Allow <code>{approval.requestedHost}</code> to receive secret{' '}
+								<code>{approval.name}</code> from the {approval.scope} scope.
+							</p>
+							<p css={{ margin: 0, color: colors.textMuted }}>
+								Current allowed hosts:{' '}
+								{approval.currentAllowedHosts.length > 0
+									? approval.currentAllowedHosts.join(', ')
+									: 'none'}
+							</p>
+						</div>
+						<div css={{ display: 'flex', gap: spacing.sm, flexWrap: 'wrap' }}>
+							<button
+								type="button"
+								disabled={
+									submittingApprovalAction != null ||
+									isRefreshingForLocationChange
+								}
+								on={{ click: () => void submitApproval('approve') }}
+								css={primaryButtonCss}
+							>
+								Approve host
+							</button>
+							<button
+								type="button"
+								disabled={
+									submittingApprovalAction != null ||
+									isRefreshingForLocationChange
+								}
+								on={{ click: () => void submitApproval('reject') }}
+								css={secondaryButtonCss}
+							>
+								Reject
+							</button>
+						</div>
+					</section>
+				) : null}
+
 				{status === 'loading' ? (
-					<p css={{ color: colors.textMuted }}>Loading your account…</p>
+					<p css={{ color: colors.textMuted, margin: 0 }}>
+						Loading secret approvals…
+					</p>
 				) : null}
 				{message ? (
-					<p css={{ color: colors.error }} role="alert">
+					<p
+						css={{ color: status === 'error' ? colors.error : colors.text }}
+						role="alert"
+					>
 						{message}
 					</p>
 				) : null}
+
+				{status === 'ready' ? (
+					<section
+						css={{
+							display: 'grid',
+							gap: spacing.md,
+							padding: spacing.lg,
+							border: `1px solid ${colors.border}`,
+							borderRadius: '1rem',
+							backgroundColor: colors.surface,
+						}}
+					>
+						<h2
+							css={{
+								margin: 0,
+								fontSize: typography.fontSize.lg,
+								fontWeight: typography.fontWeight.semibold,
+								color: colors.text,
+							}}
+						>
+							Secret management
+						</h2>
+						<p css={{ margin: 0, color: colors.textMuted }}>
+							Create, edit, and delete secrets from the dedicated management
+							page.
+						</p>
+						<div>
+							<a
+								href="/account/secrets"
+								css={{
+									color: colors.primaryText,
+									textDecoration: 'none',
+									fontWeight: typography.fontWeight.medium,
+									'&:hover': {
+										textDecoration: 'underline',
+									},
+								}}
+							>
+								Manage secrets
+							</a>
+						</div>
+					</section>
+				) : null}
 			</section>
 		)
 	}
 }
+
+const primaryButtonCss = {
+	padding: `${spacing.sm} ${spacing.md}`,
+	borderRadius: '999px',
+	border: 'none',
+	backgroundColor: colors.primary,
+	color: 'white',
+	fontWeight: typography.fontWeight.medium,
+	cursor: 'pointer',
+	[mq.mobile]: {
+		width: '100%',
+	},
+}
+
+const secondaryButtonCss = {
+	...primaryButtonCss,
+	backgroundColor: 'transparent',
+	color: colors.text,
+	border: `1px solid ${colors.border}`,
+}
diff --git a/packages/worker/client/routes/index.tsx b/packages/worker/client/routes/index.tsx
index 4fb7396595..f71d99c1bd 100644
--- a/packages/worker/client/routes/index.tsx
+++ b/packages/worker/client/routes/index.tsx
@@ -1,4 +1,5 @@
 import { AccountRoute } from './account.tsx'
+import { AccountSecretsRoute } from './account-secrets.tsx'
 import { ChatRoute } from './chat.tsx'
 import { HomeRoute } from './home.tsx'
 import { LoginRoute } from './login.tsx'
@@ -13,6 +14,13 @@ export const clientRoutes = {
 	'/chat/:threadId': <ChatRoute />,
 	'/ui/:id': <SavedUiRoute />,
 	'/account': <AccountRoute />,
+	'/account/secrets': <AccountSecretsRoute />,
+	'/account/secrets/new': <AccountSecretsRoute />,
+	'/account/secrets/approve': <AccountSecretsRoute />,
+	'/account/secrets/:secretId': <AccountSecretsRoute />,
+	'/account/secrets/user/:secretName': <AccountSecretsRoute />,
+	'/account/secrets/app/:appId/:secretName': <AccountSecretsRoute />,
+	'/account/secrets/session/:sessionId/:secretName': <AccountSecretsRoute />,
 	'/login': <LoginRoute />,
 	'/signup': <LoginRoute />,
 	'/reset-password': <ResetPasswordRoute />,
diff --git a/packages/worker/client/typeahead-combobox.tsx b/packages/worker/client/typeahead-combobox.tsx
new file mode 100644
index 0000000000..8bbe901173
--- /dev/null
+++ b/packages/worker/client/typeahead-combobox.tsx
@@ -0,0 +1,244 @@
+import { type Handle } from 'remix/component'
+
+type ComboboxOption = {
+	id: string
+	label: string
+	description?: string | null
+}
+
+type TypeaheadComboboxProps = {
+	id: string
+	label: string
+	placeholder?: string
+	emptyText?: string
+	value: string
+	options: Array<ComboboxOption>
+	disabled?: boolean
+	onChange: (value: string) => void
+	inputCss?: Record<string, unknown>
+	listCss?: Record<string, unknown>
+	optionCss?: Record<string, unknown>
+}
+
+export function TypeaheadCombobox(handle: Handle) {
+	let isOpen = false
+	let query = ''
+	let highlightedIndex = 0
+	let blurTimeoutId: number | null = null
+
+	function clearBlurTimeout() {
+		if (blurTimeoutId == null || typeof window === 'undefined') return
+		window.clearTimeout(blurTimeoutId)
+		blurTimeoutId = null
+	}
+
+	function scheduleClose() {
+		if (typeof window === 'undefined') return
+		clearBlurTimeout()
+		blurTimeoutId = window.setTimeout(() => {
+			isOpen = false
+			handle.update()
+		}, 100)
+	}
+
+	return (props: TypeaheadComboboxProps) => {
+		const selectedOption =
+			props.options.find((option) => option.id === props.value) ?? null
+		if (!isOpen && query !== (selectedOption?.label ?? '')) {
+			query = selectedOption?.label ?? ''
+		}
+
+		const normalizedQuery = query.trim().toLowerCase()
+		const filteredOptions = props.options.filter((option) => {
+			if (!normalizedQuery) return true
+			return [option.label, option.description ?? '']
+				.join(' ')
+				.toLowerCase()
+				.includes(normalizedQuery)
+		})
+		const hasOptions = filteredOptions.length > 0
+		const clampedIndex = hasOptions
+			? Math.min(highlightedIndex, filteredOptions.length - 1)
+			: 0
+		const activeOption = hasOptions ? filteredOptions[clampedIndex] : null
+		const inputId = props.id
+		const listboxId = `${props.id}-listbox`
+
+		function selectOption(option: ComboboxOption) {
+			clearBlurTimeout()
+			query = option.label
+			highlightedIndex = 0
+			isOpen = false
+			props.onChange(option.id)
+			handle.update()
+		}
+
+		function handleFocus() {
+			if (props.disabled) return
+			clearBlurTimeout()
+			isOpen = true
+			highlightedIndex = 0
+			handle.update()
+		}
+
+		function handleBlur() {
+			scheduleClose()
+		}
+
+		function handleInput(event: Event) {
+			if (!(event.currentTarget instanceof HTMLInputElement)) return
+			query = event.currentTarget.value
+			highlightedIndex = 0
+			if (!isOpen) isOpen = true
+			handle.update()
+		}
+
+		function handleKeyDown(event: KeyboardEvent) {
+			if (props.disabled) return
+			if (event.key === 'ArrowDown') {
+				event.preventDefault()
+				if (!isOpen) {
+					isOpen = true
+					highlightedIndex = 0
+				} else if (hasOptions) {
+					highlightedIndex = Math.min(
+						clampedIndex + 1,
+						filteredOptions.length - 1,
+					)
+				}
+				handle.update()
+				return
+			}
+			if (event.key === 'ArrowUp') {
+				event.preventDefault()
+				if (!isOpen) {
+					isOpen = true
+					highlightedIndex = hasOptions ? filteredOptions.length - 1 : 0
+				} else if (hasOptions) {
+					highlightedIndex = Math.max(clampedIndex - 1, 0)
+				}
+				handle.update()
+				return
+			}
+			if (event.key === 'Enter') {
+				if (!isOpen || !activeOption) return
+				event.preventDefault()
+				selectOption(activeOption)
+				return
+			}
+			if (event.key === 'Escape') {
+				if (!isOpen) return
+				event.preventDefault()
+				isOpen = false
+				query = selectedOption?.label ?? ''
+				handle.update()
+			}
+		}
+
+		return (
+			<div
+				css={{
+					position: 'relative',
+					display: 'grid',
+					gap: 'var(--spacing-xs)',
+				}}
+			>
+				<label
+					for={inputId}
+					css={{ display: 'grid', gap: 'var(--spacing-xs)' }}
+				>
+					<span
+						css={{
+							color: 'var(--color-text)',
+							fontWeight: 'var(--font-weight-medium)',
+							fontSize: 'var(--font-size-sm)',
+						}}
+					>
+						{props.label}
+					</span>
+				</label>
+				<input
+					id={inputId}
+					type="text"
+					role="combobox"
+					autocomplete="off"
+					aria-autocomplete="list"
+					aria-controls={listboxId}
+					aria-expanded={isOpen}
+					aria-activedescendant={
+						isOpen && activeOption
+							? `${props.id}-option-${activeOption.id}`
+							: undefined
+					}
+					placeholder={props.placeholder}
+					value={query}
+					disabled={props.disabled}
+					on={{
+						focus: handleFocus,
+						blur: handleBlur,
+						input: handleInput,
+						keydown: handleKeyDown,
+					}}
+					css={props.inputCss as never}
+				/>
+				{isOpen ? (
+					<div
+						id={listboxId}
+						role="listbox"
+						aria-label={props.label}
+						css={props.listCss as never}
+					>
+						{hasOptions ? (
+							filteredOptions.map((option, index) => {
+								const isActive = index === clampedIndex
+								return (
+									<button
+										key={option.id}
+										id={`${props.id}-option-${option.id}`}
+										type="button"
+										role="option"
+										aria-selected={isActive}
+										on={{
+											mousedown: (event) => {
+												event.preventDefault()
+												selectOption(option)
+											},
+											mouseenter: () => {
+												highlightedIndex = index
+												handle.update()
+											},
+										}}
+										css={props.optionCss as never}
+										data-active={isActive ? 'true' : 'false'}
+									>
+										<span>{option.label}</span>
+										{option.description ? (
+											<span
+												css={{
+													fontSize: 'var(--font-size-sm)',
+													color: 'var(--color-text-muted)',
+												}}
+											>
+												{option.description}
+											</span>
+										) : null}
+									</button>
+								)
+							})
+						) : (
+							<div
+								css={{
+									padding: 'var(--spacing-sm)',
+									fontSize: 'var(--font-size-sm)',
+									color: 'var(--color-text-muted)',
+								}}
+							>
+								{props.emptyText ?? 'No matches'}
+							</div>
+						)}
+					</div>
+				) : null}
+			</div>
+		)
+	}
+}
diff --git a/packages/worker/migrations/0009-secret-allowed-hosts.sql b/packages/worker/migrations/0009-secret-allowed-hosts.sql
new file mode 100644
index 0000000000..123a498b13
--- /dev/null
+++ b/packages/worker/migrations/0009-secret-allowed-hosts.sql
@@ -0,0 +1,2 @@
+ALTER TABLE secret_entries
+ADD COLUMN allowed_hosts TEXT NOT NULL DEFAULT '[]';
diff --git a/packages/worker/src/app/authenticated-user.ts b/packages/worker/src/app/authenticated-user.ts
index 377abbcfad..78fd0518ad 100644
--- a/packages/worker/src/app/authenticated-user.ts
+++ b/packages/worker/src/app/authenticated-user.ts
@@ -39,7 +39,7 @@ export async function readAuthenticatedAppUser(request: Request, env: Env) {
 			new Set([session.id, emailBasedUserId].filter(Boolean)),
 		),
 		mcpUser: {
-			userId: session.id,
+			userId: emailBasedUserId,
 			email: session.email,
 			displayName: buildDisplayName(session.email),
 		},
diff --git a/packages/worker/src/app/handlers/account-secrets.ts b/packages/worker/src/app/handlers/account-secrets.ts
new file mode 100644
index 0000000000..18810162c4
--- /dev/null
+++ b/packages/worker/src/app/handlers/account-secrets.ts
@@ -0,0 +1,657 @@
+import { type BuildAction } from 'remix/fetch-router'
+import {
+	buildAccountSecretId,
+	parseAccountSecretId,
+} from '@kody-internal/shared/account-secret-route.ts'
+import { readAuthSessionResult } from '#app/auth-session.ts'
+import { readAuthenticatedAppUser } from '#app/authenticated-user.ts'
+import { redirectToLogin } from '#app/auth-redirect.ts'
+import { Layout } from '#app/layout.ts'
+import { render } from '#app/render.ts'
+import { verifySecretHostApprovalToken } from '#mcp/secrets/host-approval.ts'
+import {
+	deleteSecret,
+	listAppSecretsByAppIds,
+	listSecrets,
+	resolveSecret,
+	saveSecret,
+	setSecretAllowedHosts,
+} from '#mcp/secrets/service.ts'
+import { type SecretContext, type SecretScope } from '#mcp/secrets/types.ts'
+import { listUiArtifactsByUserId } from '#mcp/ui-artifacts-repo.ts'
+import { type routes } from '#app/routes.ts'
+import { normalizeAllowedHosts } from '#mcp/secrets/allowed-hosts.ts'
+
+type AccountEditableSecretScope = Extract<SecretScope, 'app' | 'user'>
+
+type SavedAppOption = {
+	id: string
+	title: string
+	updatedAt: string
+}
+
+type AccountSecretListItem = {
+	id: string
+	name: string
+	scope: AccountEditableSecretScope
+	description: string
+	appId: string | null
+	appTitle: string | null
+	allowedHosts: Array<string>
+	createdAt: string
+	updatedAt: string
+	ttlMs: number | null
+}
+
+type AccountSecretDetail = AccountSecretListItem & {
+	value: string
+}
+
+type SecretApprovalView = {
+	token: string
+	name: string
+	scope: SecretScope
+	requestedHost: string
+	currentAllowedHosts: Array<string>
+}
+
+type AccountSecretsPayload = {
+	ok: true
+	email: string
+	apps: Array<SavedAppOption>
+	secrets: Array<AccountSecretListItem>
+	selectedSecret: AccountSecretDetail | null
+	approval: SecretApprovalView | null
+}
+
+type SecretApprovalAction = 'approve' | 'reject'
+
+export function createAccountSecretsHandler(_env: Env) {
+	return {
+		middleware: [],
+		async action({ request }) {
+			const { session, setCookie } = await readAuthSessionResult(request)
+			if (!session) {
+				return redirectToLogin(request)
+			}
+
+			const response = render(Layout({ title: 'Secrets' }))
+			if (setCookie) {
+				response.headers.set('Set-Cookie', setCookie)
+			}
+			return response
+		},
+	} satisfies BuildAction<
+		typeof routes.accountSecrets.method,
+		typeof routes.accountSecrets.pattern
+	>
+}
+
+export function createAccountSecretsApiHandler(env: Env) {
+	return {
+		middleware: [],
+		async action({ request }) {
+			const user = await readAuthenticatedAppUser(request, env)
+			if (!user) {
+				return jsonResponse({ ok: false, error: 'Unauthorized.' }, 401)
+			}
+
+			if (request.method === 'GET') {
+				const payload = await buildAccountSecretsPayload({
+					request,
+					env,
+					user,
+					selectedSecretId: readSelectedSecretId(request),
+				})
+				return jsonResponse(payload)
+			}
+
+			if (request.method !== 'POST') {
+				return jsonResponse({ ok: false, error: 'Method not allowed.' }, 405)
+			}
+
+			const body = await request.json().catch(() => null)
+			if (!body || typeof body !== 'object') {
+				return jsonResponse({ ok: false, error: 'Invalid request body.' }, 400)
+			}
+
+			const action = readString(body, 'action')
+			if (action === 'approve' || action === 'reject') {
+				return handleApprovalAction({
+					request,
+					env,
+					user,
+					action,
+					body,
+				})
+			}
+			if (action === 'save') {
+				return handleSaveAction({
+					request,
+					env,
+					user,
+					body,
+				})
+			}
+			if (action === 'delete') {
+				return handleDeleteAction({
+					request,
+					env,
+					user,
+					body,
+				})
+			}
+
+			return jsonResponse({ ok: false, error: 'Invalid action.' }, 400)
+		},
+	} satisfies BuildAction<
+		typeof routes.accountSecretsApi.method,
+		typeof routes.accountSecretsApi.pattern
+	>
+}
+
+async function buildAccountSecretsPayload(input: {
+	request: Request
+	env: Env
+	user: NonNullable<Awaited<ReturnType<typeof readAuthenticatedAppUser>>>
+	selectedSecretId?: string | null
+	savedApps?: Array<SavedAppOption>
+}): Promise<AccountSecretsPayload> {
+	const url = new URL(input.request.url)
+	const approvalToken = url.searchParams.get('request')
+	const requestedApprovalHost = readApprovalHost(url)
+
+	const savedApps =
+		input.savedApps ??
+		(await listSavedAppsForUser({
+			env: input.env,
+			user: input.user,
+		}))
+	const secrets = await listAccountSecrets({
+		env: input.env,
+		user: input.user,
+		savedApps,
+	})
+	const selectedSecret = input.selectedSecretId
+		? await resolveAccountSecretDetail({
+				env: input.env,
+				userId: input.user.mcpUser.userId,
+				secretId: input.selectedSecretId,
+				secrets,
+			})
+		: null
+
+	const approval = approvalToken
+		? await resolveSecretApprovalView({
+				env: input.env,
+				userId: input.user.mcpUser.userId,
+				token: approvalToken,
+				requestedHost: requestedApprovalHost,
+			}).catch(() => null)
+		: null
+
+	return {
+		ok: true,
+		email: input.user.email,
+		apps: savedApps,
+		secrets,
+		selectedSecret,
+		approval,
+	}
+}
+
+async function listSavedAppsForUser(input: {
+	env: Env
+	user: NonNullable<Awaited<ReturnType<typeof readAuthenticatedAppUser>>>
+}) {
+	const apps = await Promise.all(
+		input.user.artifactOwnerIds.map((ownerId) =>
+			listUiArtifactsByUserId(input.env.APP_DB, ownerId),
+		),
+	)
+	const dedupedIds = new Set<string>()
+	return apps
+		.flat()
+		.filter((app) => {
+			if (dedupedIds.has(app.id)) return false
+			dedupedIds.add(app.id)
+			return true
+		})
+		.map((app) => ({
+			id: app.id,
+			title: app.title,
+			updatedAt: app.updated_at,
+		}))
+		.sort((left, right) => {
+			return (
+				right.updatedAt.localeCompare(left.updatedAt) ||
+				left.title.localeCompare(right.title)
+			)
+		})
+}
+
+async function listAccountSecrets(input: {
+	env: Env
+	user: NonNullable<Awaited<ReturnType<typeof readAuthenticatedAppUser>>>
+	savedApps: Array<SavedAppOption>
+}) {
+	const appTitles = new Map(input.savedApps.map((app) => [app.id, app.title]))
+	const [userSecrets, appSecrets] = await Promise.all([
+		listSecrets({
+			env: input.env,
+			userId: input.user.mcpUser.userId,
+			scope: 'user',
+		}),
+		listAppSecretsByAppIds({
+			env: input.env,
+			userId: input.user.mcpUser.userId,
+			appIds: input.savedApps.map((app) => app.id),
+		}),
+	])
+
+	return [
+		...userSecrets.map((secret) => toAccountSecretListItem(secret, appTitles)),
+		...Array.from(appSecrets.values())
+			.flat()
+			.map((secret) => toAccountSecretListItem(secret, appTitles)),
+	].sort((left, right) => {
+		return (
+			left.name.localeCompare(right.name) ||
+			left.scope.localeCompare(right.scope) ||
+			(left.appTitle ?? '').localeCompare(right.appTitle ?? '')
+		)
+	})
+}
+
+async function resolveSecretApprovalView(input: {
+	env: Env
+	userId: string
+	token: string
+	requestedHost: string | null
+}) {
+	const approval = await verifySecretHostApprovalToken(input.env, input.token)
+	if (approval.userId !== input.userId) {
+		throw new Error('Approval request mismatch.')
+	}
+	if (
+		input.requestedHost != null &&
+		approval.requestedHost !== normalizeAllowedHosts([input.requestedHost])[0]
+	) {
+		throw new Error('Approval request host mismatch.')
+	}
+	const secrets = await listSecrets({
+		env: input.env,
+		userId: input.userId,
+		scope: approval.scope,
+		secretContext: approval.secretContext,
+	})
+	const secret = secrets.find(
+		(item) => item.name === approval.name && item.scope === approval.scope,
+	)
+	if (!secret) {
+		throw new Error('Secret not found.')
+	}
+	return {
+		token: input.token,
+		name: approval.name,
+		scope: approval.scope,
+		requestedHost: approval.requestedHost,
+		currentAllowedHosts: secret.allowedHosts,
+	} satisfies SecretApprovalView
+}
+
+async function resolveAccountSecretDetail(input: {
+	env: Env
+	userId: string
+	secretId: string
+	secrets: Array<AccountSecretListItem>
+}) {
+	const parsed = parseAccountSecretId(input.secretId)
+	if (!parsed) return null
+
+	const selected = input.secrets.find((secret) => secret.id === input.secretId)
+	if (!selected) return null
+
+	const resolved = await resolveSecret({
+		env: input.env,
+		userId: input.userId,
+		name: parsed.name,
+		scope: parsed.scope,
+		secretContext: getSecretContextForAccountSecret(parsed),
+	})
+	if (!resolved.found || resolved.value == null) return null
+
+	return {
+		...selected,
+		value: resolved.value,
+	} satisfies AccountSecretDetail
+}
+
+function toAccountSecretListItem(
+	secret: {
+		name: string
+		scope: SecretScope
+		description: string
+		appId: string | null
+		allowedHosts: Array<string>
+		createdAt: string
+		updatedAt: string
+		ttlMs: number | null
+	},
+	appTitles: Map<string, string>,
+) {
+	if (secret.scope === 'session') {
+		throw new Error('Session secrets are not editable from the account page.')
+	}
+	const scope = secret.scope === 'app' ? 'app' : 'user'
+
+	return {
+		id: buildAccountSecretId({
+			name: secret.name,
+			scope,
+			appId: secret.appId,
+		}),
+		name: secret.name,
+		scope,
+		description: secret.description,
+		appId: secret.appId,
+		appTitle: secret.appId ? (appTitles.get(secret.appId) ?? null) : null,
+		allowedHosts: secret.allowedHosts,
+		createdAt: secret.createdAt,
+		updatedAt: secret.updatedAt,
+		ttlMs: secret.ttlMs,
+	} satisfies AccountSecretListItem
+}
+
+async function handleApprovalAction(input: {
+	request: Request
+	env: Env
+	user: NonNullable<Awaited<ReturnType<typeof readAuthenticatedAppUser>>>
+	action: SecretApprovalAction
+	body: object
+}) {
+	const token = readString(input.body, 'requestToken')
+	if (!token) {
+		return jsonResponse(
+			{ ok: false, error: 'Approval request token is required.' },
+			400,
+		)
+	}
+
+	try {
+		const approval = await verifySecretHostApprovalToken(input.env, token)
+		if (approval.userId !== input.user.mcpUser.userId) {
+			return jsonResponse(
+				{ ok: false, error: 'Approval request mismatch.' },
+				403,
+			)
+		}
+
+		if (input.action === 'approve') {
+			const current = await listSecrets({
+				env: input.env,
+				userId: input.user.mcpUser.userId,
+				scope: approval.scope,
+				secretContext: approval.secretContext,
+			})
+			const secret = current.find(
+				(item) => item.name === approval.name && item.scope === approval.scope,
+			)
+			if (!secret) {
+				return jsonResponse({ ok: false, error: 'Secret not found.' }, 404)
+			}
+			await setSecretAllowedHosts({
+				env: input.env,
+				userId: input.user.mcpUser.userId,
+				name: approval.name,
+				scope: approval.scope,
+				allowedHosts: [...secret.allowedHosts, approval.requestedHost],
+				secretContext: approval.secretContext,
+			})
+		}
+
+		const payload = await buildAccountSecretsPayload({
+			request: input.request,
+			env: input.env,
+			user: input.user,
+			selectedSecretId: readSelectedSecretId(input.request),
+		})
+		return jsonResponse(payload)
+	} catch (error) {
+		return jsonResponse(
+			{
+				ok: false,
+				error:
+					error instanceof Error
+						? error.message
+						: 'Unable to process approval request.',
+			},
+			400,
+		)
+	}
+}
+
+async function handleSaveAction(input: {
+	request: Request
+	env: Env
+	user: NonNullable<Awaited<ReturnType<typeof readAuthenticatedAppUser>>>
+	body: object
+}) {
+	const currentId = readOptionalString(input.body, 'currentId')
+	const name = readString(input.body, 'name')
+	const value = readString(input.body, 'value')
+	const scope = readAccountSecretScope(input.body)
+	const description = readOptionalString(input.body, 'description') ?? ''
+	const allowedHosts = normalizeAllowedHosts(
+		readStringArray(input.body, 'allowedHosts'),
+	)
+
+	if (!name) {
+		return jsonResponse({ ok: false, error: 'Secret name is required.' }, 400)
+	}
+	if (!value) {
+		return jsonResponse({ ok: false, error: 'Secret value is required.' }, 400)
+	}
+	if (!scope) {
+		return jsonResponse({ ok: false, error: 'Secret scope is required.' }, 400)
+	}
+
+	const savedApps = await listSavedAppsForUser({
+		env: input.env,
+		user: input.user,
+	})
+	const appId = readAppIdForScope({
+		body: input.body,
+		scope,
+		savedApps,
+	})
+	if (scope === 'app' && !appId) {
+		return jsonResponse(
+			{ ok: false, error: 'Choose an app for app secrets.' },
+			400,
+		)
+	}
+
+	const secrets = await listAccountSecrets({
+		env: input.env,
+		user: input.user,
+		savedApps,
+	})
+	const secretById = new Map(secrets.map((secret) => [secret.id, secret]))
+	const currentSecret = currentId ? (secretById.get(currentId) ?? null) : null
+	if (currentId && !currentSecret) {
+		return jsonResponse({ ok: false, error: 'Secret not found.' }, 404)
+	}
+
+	const nextId = buildAccountSecretId({
+		name,
+		scope,
+		appId,
+	})
+	if (currentId !== nextId && secretById.has(nextId)) {
+		return jsonResponse(
+			{
+				ok: false,
+				error: 'A secret with that name and scope already exists.',
+			},
+			409,
+		)
+	}
+
+	try {
+		await saveSecret({
+			env: input.env,
+			userId: input.user.mcpUser.userId,
+			name,
+			value,
+			scope,
+			description,
+			secretContext: getSecretContextForAccountSecret({
+				scope,
+				appId,
+			}),
+		})
+		await setSecretAllowedHosts({
+			env: input.env,
+			userId: input.user.mcpUser.userId,
+			name,
+			scope,
+			allowedHosts,
+			secretContext: getSecretContextForAccountSecret({
+				scope,
+				appId,
+			}),
+		})
+
+		if (currentSecret && currentSecret.id !== nextId) {
+			await deleteSecret({
+				env: input.env,
+				userId: input.user.mcpUser.userId,
+				name: currentSecret.name,
+				scope: currentSecret.scope,
+				secretContext: getSecretContextForAccountSecret(currentSecret),
+			})
+		}
+
+		const payload = await buildAccountSecretsPayload({
+			request: input.request,
+			env: input.env,
+			user: input.user,
+			savedApps,
+			selectedSecretId: nextId,
+		})
+		return jsonResponse(payload)
+	} catch (error) {
+		return jsonResponse(
+			{
+				ok: false,
+				error:
+					error instanceof Error ? error.message : 'Unable to save secret.',
+			},
+			400,
+		)
+	}
+}
+
+async function handleDeleteAction(input: {
+	request: Request
+	env: Env
+	user: NonNullable<Awaited<ReturnType<typeof readAuthenticatedAppUser>>>
+	body: object
+}) {
+	const currentId = readString(input.body, 'currentId')
+	if (!currentId) {
+		return jsonResponse({ ok: false, error: 'Secret id is required.' }, 400)
+	}
+
+	const secret = parseAccountSecretId(currentId)
+	if (!secret || secret.scope === 'session') {
+		return jsonResponse({ ok: false, error: 'Invalid secret id.' }, 400)
+	}
+
+	const deleted = await deleteSecret({
+		env: input.env,
+		userId: input.user.mcpUser.userId,
+		name: secret.name,
+		scope: secret.scope,
+		secretContext: getSecretContextForAccountSecret(secret),
+	})
+	if (!deleted) {
+		return jsonResponse({ ok: false, error: 'Secret not found.' }, 404)
+	}
+
+	const payload = await buildAccountSecretsPayload({
+		request: input.request,
+		env: input.env,
+		user: input.user,
+		selectedSecretId: null,
+	})
+	return jsonResponse({
+		...payload,
+		deleted: true,
+	})
+}
+
+function getSecretContextForAccountSecret(input: {
+	scope: SecretScope
+	appId: string | null
+	sessionId?: string | null
+}): SecretContext {
+	return {
+		sessionId: input.scope === 'session' ? (input.sessionId ?? null) : null,
+		appId: input.scope === 'app' ? input.appId : null,
+	}
+}
+
+function readSelectedSecretId(request: Request) {
+	return new URL(request.url).searchParams.get('selected')
+}
+
+function readApprovalHost(url: URL) {
+	const value = url.searchParams.get('allowed-host')
+	return value?.trim() ? value.trim() : null
+}
+
+function readString(body: object, key: string) {
+	const value = (body as Record<string, unknown>)[key]
+	return typeof value === 'string' && value.trim() ? value.trim() : null
+}
+
+function readOptionalString(body: object, key: string) {
+	const value = (body as Record<string, unknown>)[key]
+	return typeof value === 'string' ? value.trim() : null
+}
+
+function readStringArray(body: object, key: string) {
+	const value = (body as Record<string, unknown>)[key]
+	if (!Array.isArray(value)) return []
+	return value.filter((item): item is string => typeof item === 'string')
+}
+
+function readAccountSecretScope(
+	body: object,
+): AccountEditableSecretScope | null {
+	const raw = readString(body, 'scope')
+	return raw === 'app' || raw === 'user' ? raw : null
+}
+
+function readAppIdForScope(input: {
+	body: object
+	scope: AccountEditableSecretScope
+	savedApps: Array<SavedAppOption>
+}) {
+	if (input.scope !== 'app') return null
+	const appId = readString(input.body, 'appId')
+	if (!appId) return null
+	return input.savedApps.some((app) => app.id === appId) ? appId : null
+}
+
+function jsonResponse(body: Record<string, unknown>, status = 200) {
+	return new Response(JSON.stringify(body), {
+		status,
+		headers: {
+			'Cache-Control': 'no-store',
+			'Content-Type': 'application/json; charset=utf-8',
+		},
+	})
+}
diff --git a/packages/worker/src/app/handlers/account.ts b/packages/worker/src/app/handlers/account.ts
index 763dc1e842..fef993a3e2 100644
--- a/packages/worker/src/app/handlers/account.ts
+++ b/packages/worker/src/app/handlers/account.ts
@@ -14,11 +14,7 @@ export const account = {
 			return redirectToLogin(request)
 		}
 
-		const response = render(
-			Layout({
-				title: 'Account',
-			}),
-		)
+		const response = render(Layout({ title: 'Account' }))
 		if (setCookie) {
 			response.headers.set('Set-Cookie', setCookie)
 		}
diff --git a/packages/worker/src/app/router.ts b/packages/worker/src/app/router.ts
index ff68128223..39f378d1f1 100644
--- a/packages/worker/src/app/router.ts
+++ b/packages/worker/src/app/router.ts
@@ -1,5 +1,9 @@
 import { createRouter } from 'remix/fetch-router'
 import { account } from '#app/handlers/account.ts'
+import {
+	createAccountSecretsApiHandler,
+	createAccountSecretsHandler,
+} from '#app/handlers/account-secrets.ts'
 import { createAuthHandler } from '#app/handlers/auth.ts'
 import { chat } from '#app/handlers/chat.ts'
 import {
@@ -43,6 +47,39 @@ export function createAppRouter(appEnv: AppEnv) {
 	router.map(routes.login, login)
 	router.map(routes.signup, signup)
 	router.map(routes.account, account)
+	router.map(routes.accountSecrets, createAccountSecretsHandler(appEnv as Env))
+	router.map(
+		routes.accountSecretNew,
+		createAccountSecretsHandler(appEnv as Env),
+	)
+	router.map(
+		routes.accountSecretsApprove,
+		createAccountSecretsHandler(appEnv as Env),
+	)
+	router.map(
+		routes.accountSecretDetail,
+		createAccountSecretsHandler(appEnv as Env),
+	)
+	router.map(
+		routes.accountSecretUserDetail,
+		createAccountSecretsHandler(appEnv as Env),
+	)
+	router.map(
+		routes.accountSecretAppDetail,
+		createAccountSecretsHandler(appEnv as Env),
+	)
+	router.map(
+		routes.accountSecretSessionDetail,
+		createAccountSecretsHandler(appEnv as Env),
+	)
+	router.map(
+		routes.accountSecretsApi,
+		createAccountSecretsApiHandler(appEnv as Env),
+	)
+	router.map(
+		routes.accountSecretsApiPost,
+		createAccountSecretsApiHandler(appEnv as Env),
+	)
 	router.map(routes.savedUi, createSavedUiPageHandler(appEnv as Env))
 	router.map(routes.auth, createAuthHandler(appEnv))
 	router.map(routes.session, session)
diff --git a/packages/worker/src/app/routes.ts b/packages/worker/src/app/routes.ts
index cc50588b6a..4ec4906367 100644
--- a/packages/worker/src/app/routes.ts
+++ b/packages/worker/src/app/routes.ts
@@ -5,6 +5,15 @@ export const routes = route({
 	chat: '/chat',
 	chatThread: '/chat/:threadId',
 	savedUi: '/ui/:id',
+	accountSecrets: '/account/secrets',
+	accountSecretNew: '/account/secrets/new',
+	accountSecretDetail: '/account/secrets/:secretId',
+	accountSecretUserDetail: '/account/secrets/user/:secretName',
+	accountSecretAppDetail: '/account/secrets/app/:appId/:secretName',
+	accountSecretSessionDetail: '/account/secrets/session/:sessionId/:secretName',
+	accountSecretsApprove: '/account/secrets/approve',
+	accountSecretsApi: '/account/secrets.json',
+	accountSecretsApiPost: post('/account/secrets.json'),
 	chatThreads: '/chat-threads',
 	chatThreadsCreate: post('/chat-threads'),
 	chatThreadsUpdate: post('/chat-threads/update'),
diff --git a/packages/worker/src/index.ts b/packages/worker/src/index.ts
index 9f1473356f..f4303711a6 100644
--- a/packages/worker/src/index.ts
+++ b/packages/worker/src/index.ts
@@ -30,8 +30,9 @@ import {
 import { withCors } from './utils.ts'
 import { handleCapabilityReindexRequest } from './capability-maintenance.ts'
 import { handleSkillReindexRequest } from './skill-maintenance.ts'
+import { CodemodeFetchGateway } from '#mcp/fetch-gateway.ts'
 
-export { ChatAgent, HomeConnectorSession, HomeMCP, MCP }
+export { ChatAgent, CodemodeFetchGateway, HomeConnectorSession, HomeMCP, MCP }
 
 const claudeWidgetDomainSuffix = '.claudemcpcontent.com'
 
diff --git a/packages/worker/src/mcp/capabilities/meta/meta-run-skill.ts b/packages/worker/src/mcp/capabilities/meta/meta-run-skill.ts
index 3795b0effe..787e6cd838 100644
--- a/packages/worker/src/mcp/capabilities/meta/meta-run-skill.ts
+++ b/packages/worker/src/mcp/capabilities/meta/meta-run-skill.ts
@@ -1,3 +1,4 @@
+import { exports as workerExports } from 'cloudflare:workers'
 import { z } from 'zod'
 import { defineDomainCapability } from '#mcp/capabilities/define-domain-capability.ts'
 import { capabilityDomainNames } from '#mcp/capabilities/domain-metadata.ts'
@@ -73,6 +74,7 @@ export const metaRunSkillCapability = defineDomainCapability(
 				ctx.callerContext,
 				row.code,
 				shouldPassParams ? params : undefined,
+				workerExports,
 			)
 			if (exec.error) {
 				return {
diff --git a/packages/worker/src/mcp/capabilities/secrets/domain.ts b/packages/worker/src/mcp/capabilities/secrets/domain.ts
index f5a3637c62..9dbc2727c6 100644
--- a/packages/worker/src/mcp/capabilities/secrets/domain.ts
+++ b/packages/worker/src/mcp/capabilities/secrets/domain.ts
@@ -1,19 +1,12 @@
 import { defineDomain } from '#mcp/capabilities/define-domain.ts'
 import { capabilityDomainNames } from '#mcp/capabilities/domain-metadata.ts'
 import { secretDeleteCapability } from './secret-delete.ts'
-import { secretGetCapability } from './secret-get.ts'
 import { secretListCapability } from './secret-list.ts'
-import { secretUpdateCapability } from './secret-update.ts'
 
 export const secretsDomain = defineDomain({
 	name: capabilityDomainNames.secrets,
 	description:
-		'Server-side secret references that can be discovered by name, resolved during execute-time code, and explicitly updated or deleted without placing raw secret values into prompts or saved app source.',
+		'Server-side secret references that can be discovered by name, listed with allowed-host metadata, and deleted without placing raw secret values into prompts or saved app source.',
 	keywords: ['secret', 'credentials', 'reference', 'secure input'],
-	capabilities: [
-		secretListCapability,
-		secretGetCapability,
-		secretUpdateCapability,
-		secretDeleteCapability,
-	],
+	capabilities: [secretListCapability, secretDeleteCapability],
 })
diff --git a/packages/worker/src/mcp/capabilities/secrets/secret-get.ts b/packages/worker/src/mcp/capabilities/secrets/secret-get.ts
deleted file mode 100644
index 48633ccabe..0000000000
--- a/packages/worker/src/mcp/capabilities/secrets/secret-get.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { z } from 'zod'
-import { defineDomainCapability } from '#mcp/capabilities/define-domain-capability.ts'
-import { capabilityDomainNames } from '#mcp/capabilities/domain-metadata.ts'
-import { type CapabilityContext } from '#mcp/capabilities/types.ts'
-import { requireMcpUser } from '#mcp/capabilities/meta/require-user.ts'
-import { resolveSecret } from '#mcp/secrets/service.ts'
-import { secretScopeValues } from '#mcp/secrets/types.ts'
-
-export const secretGetCapability = defineDomainCapability(
-	capabilityDomainNames.secrets,
-	{
-		name: 'secret_get',
-		description:
-			'Resolve a secret value for server-side execution. Use the injected `secrets.get(name, { scope })` or `secrets.require(name, { scope })` helper from execute-time code instead of calling this directly when possible.',
-		keywords: ['secret', 'resolve', 'read', 'credential'],
-		readOnly: true,
-		idempotent: true,
-		destructive: false,
-		inputSchema: z.object({
-			name: z
-				.string()
-				.min(1)
-				.describe('Secret name to resolve from the accessible secret scopes.'),
-			scope: z
-				.enum(secretScopeValues)
-				.optional()
-				.describe(
-					'Optional scope override. When omitted, resolution uses the default scope precedence order.',
-				),
-		}),
-		outputSchema: z.object({
-			found: z.boolean(),
-			value: z.string().nullable(),
-			scope: z.enum(secretScopeValues).nullable(),
-		}),
-		async handler(args, ctx: CapabilityContext) {
-			const user = requireMcpUser(ctx.callerContext)
-			return resolveSecret({
-				env: ctx.env,
-				userId: user.userId,
-				name: args.name,
-				scope: args.scope ?? null,
-				secretContext: {
-					sessionId: ctx.callerContext.secretContext?.sessionId ?? null,
-					appId: ctx.callerContext.secretContext?.appId ?? null,
-				},
-			})
-		},
-	},
-)
diff --git a/packages/worker/src/mcp/capabilities/secrets/secret-list.ts b/packages/worker/src/mcp/capabilities/secrets/secret-list.ts
index a5de55de18..2190f4fbad 100644
--- a/packages/worker/src/mcp/capabilities/secrets/secret-list.ts
+++ b/packages/worker/src/mcp/capabilities/secrets/secret-list.ts
@@ -12,7 +12,7 @@ export const secretListCapability = defineDomainCapability(
 	{
 		name: 'secret_list',
 		description:
-			'List available secret references for the signed-in user without revealing secret values. When scope is omitted, results include every accessible scope in precedence order. Use the injected `secrets.list({ scope })` helper inside execute-time code when you want the same metadata from the sandbox.',
+			'List available secret references for the signed-in user without revealing secret values. When scope is omitted, results include every accessible scope in precedence order. Use `codemode.secret_list({ scope })` inside execute-time code when you want the same metadata, including allowed hosts, from the sandbox.',
 		keywords: ['secret', 'list', 'discovery', 'metadata', 'credentials'],
 		readOnly: true,
 		idempotent: true,
@@ -45,6 +45,7 @@ export const secretListCapability = defineDomainCapability(
 					scope: secret.scope,
 					description: secret.description,
 					app_id: secret.appId,
+					allowed_hosts: secret.allowedHosts,
 					created_at: secret.createdAt,
 					updated_at: secret.updatedAt,
 					ttl_ms: secret.ttlMs,
diff --git a/packages/worker/src/mcp/capabilities/secrets/secret-update.ts b/packages/worker/src/mcp/capabilities/secrets/secret-update.ts
deleted file mode 100644
index bdf82d5808..0000000000
--- a/packages/worker/src/mcp/capabilities/secrets/secret-update.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { z } from 'zod'
-import { defineDomainCapability } from '#mcp/capabilities/define-domain-capability.ts'
-import { capabilityDomainNames } from '#mcp/capabilities/domain-metadata.ts'
-import { type CapabilityContext } from '#mcp/capabilities/types.ts'
-import { requireMcpUser } from '#mcp/capabilities/meta/require-user.ts'
-import { updateSecret } from '#mcp/secrets/service.ts'
-import { secretScopeValues } from '#mcp/secrets/types.ts'
-import { secretMetadataSchema } from './shared.ts'
-
-export const secretUpdateCapability = defineDomainCapability(
-	capabilityDomainNames.secrets,
-	{
-		name: 'secret_update',
-		description:
-			'Update an existing secret value or description for the signed-in user. Use this when rotating a secret or correcting its non-sensitive metadata.',
-		keywords: ['secret', 'update', 'rotate', 'credential'],
-		readOnly: false,
-		idempotent: false,
-		destructive: false,
-		inputSchema: z
-			.object({
-				name: z.string().min(1).describe('Secret name to update.'),
-				scope: z
-					.enum(secretScopeValues)
-					.describe('Scope that owns the secret being updated.'),
-				value: z
-					.string()
-					.min(1)
-					.optional()
-					.describe('Optional replacement value for the secret.'),
-				description: z
-					.string()
-					.optional()
-					.describe(
-						'Optional replacement description for the secret metadata.',
-					),
-			})
-			.refine(
-				(value) => value.value !== undefined || value.description !== undefined,
-				{
-					message: 'Provide `value`, `description`, or both.',
-					path: ['value'],
-				},
-			),
-		outputSchema: z.object({
-			secret: secretMetadataSchema,
-		}),
-		async handler(args, ctx: CapabilityContext) {
-			const user = requireMcpUser(ctx.callerContext)
-			const secret = await updateSecret({
-				env: ctx.env,
-				userId: user.userId,
-				name: args.name,
-				scope: args.scope,
-				value: args.value,
-				description: args.description,
-				secretContext: {
-					sessionId: ctx.callerContext.secretContext?.sessionId ?? null,
-					appId: ctx.callerContext.secretContext?.appId ?? null,
-				},
-			})
-			return {
-				secret: {
-					name: secret.name,
-					scope: secret.scope,
-					description: secret.description,
-					app_id: secret.appId,
-					created_at: secret.createdAt,
-					updated_at: secret.updatedAt,
-					ttl_ms: secret.ttlMs,
-				},
-			}
-		},
-	},
-)
diff --git a/packages/worker/src/mcp/capabilities/secrets/shared.ts b/packages/worker/src/mcp/capabilities/secrets/shared.ts
index cea52b391b..d0b9834393 100644
--- a/packages/worker/src/mcp/capabilities/secrets/shared.ts
+++ b/packages/worker/src/mcp/capabilities/secrets/shared.ts
@@ -6,6 +6,7 @@ export const secretMetadataSchema = z.object({
 	scope: z.enum(secretScopeValues),
 	description: z.string(),
 	app_id: z.string().nullable(),
+	allowed_hosts: z.array(z.string()),
 	created_at: z.string(),
 	updated_at: z.string(),
 	ttl_ms: z.number().int().nonnegative().nullable(),
diff --git a/packages/worker/src/mcp/capabilities/unified-search.test.ts b/packages/worker/src/mcp/capabilities/unified-search.test.ts
index a41bc24591..7fd4810181 100644
--- a/packages/worker/src/mcp/capabilities/unified-search.test.ts
+++ b/packages/worker/src/mcp/capabilities/unified-search.test.ts
@@ -141,7 +141,7 @@ test('search can return standalone user secrets and nest app secrets on apps', a
 	}
 	expect(secret.scope).toBe('user')
 	expect(secret.name).toBe('cloudflareToken')
-	expect(secret.usage).toContain('secrets.require')
+	expect(secret.usage).toContain('{{secret:')
 
 	const app = result.matches.find((match) => match.type === 'app')
 	if (!app || app.type !== 'app') {
diff --git a/packages/worker/src/mcp/capabilities/unified-search.ts b/packages/worker/src/mcp/capabilities/unified-search.ts
index 702f6d1d21..819fca1a1b 100644
--- a/packages/worker/src/mcp/capabilities/unified-search.ts
+++ b/packages/worker/src/mcp/capabilities/unified-search.ts
@@ -123,9 +123,7 @@ export type UnifiedSearchMatch =
 	| UiArtifactSearchHit
 
 function buildSecretUsage(name: string) {
-	return `Resolve during execute with secrets.require(${JSON.stringify(
-		name,
-	)}, { scope: "user" }).`
+	return `Use in execute-time fetch placeholders like {{secret:${name}|scope=user}} and ask the user to approve each destination host in the app when needed.`
 }
 
 function rowToSecretHit(
diff --git a/packages/worker/src/mcp/executor.ts b/packages/worker/src/mcp/executor.ts
index 134b3b6df7..d7ecd24679 100644
--- a/packages/worker/src/mcp/executor.ts
+++ b/packages/worker/src/mcp/executor.ts
@@ -1,62 +1,141 @@
-import {
-	DynamicWorkerExecutor,
-	normalizeCode,
-	type ExecuteResult,
-} from '@cloudflare/codemode'
+import { DynamicWorkerExecutor, type ExecuteResult } from '@cloudflare/codemode'
+import { exports as workerExports } from 'cloudflare:workers'
+type WorkerLoopbackExports = Exclude<typeof workerExports, undefined>
+import { type FetchGatewayProps } from '#mcp/fetch-gateway.ts'
 
 const charsPerToken = 4
 const maxTokens = 6_000
 const maxChars = maxTokens * charsPerToken
 
-export function createExecuteExecutor(env: Env) {
+export function createExecuteExecutor(input: {
+	env: Env
+	exports?: WorkerLoopbackExports
+	gatewayProps: FetchGatewayProps
+}) {
+	const loopbackExports = input.exports ?? workerExports
+	if (!loopbackExports?.CodemodeFetchGateway) {
+		throw new Error(
+			'CodemodeFetchGateway export is required for execute-time fetch.',
+		)
+	}
 	return new DynamicWorkerExecutor({
-		loader: env.LOADER,
+		loader: input.env.LOADER,
 		timeout: 90_000,
+		globalOutbound: loopbackExports.CodemodeFetchGateway({
+			props: input.gatewayProps,
+		}),
 	})
 }
 
-export function wrapExecuteCode(code: string) {
-	const normalized = normalizeCode(code)
-	return normalizeCode(`async () => {
-  const listSecrets = async (options = {}) => {
-    const result = await codemode.secret_list(options);
-    return Array.isArray(result?.secrets) ? result.secrets : [];
-  };
-  const getSecret = async (name, options = {}) => {
-    const result = await codemode.secret_get({
-      name,
-      ...(options && typeof options === 'object' ? options : {}),
-    });
-    if (!result || result.found !== true || typeof result.value !== 'string') {
-      return null;
-    }
-    if (typeof result.scope === 'string') {
-      console.log(\`Secret used: \${result.scope}:\${name}\`);
-    }
-    return result.value;
-  };
-  const requireSecret = async (name, options = {}) => {
-    const value = await getSecret(name, options);
-    if (value === null) {
-      throw new Error(\`Secret not found: \${name}\`);
-    }
-    return value;
-  };
-  const secrets = {
-    list: listSecrets,
-    get: getSecret,
-    require: requireSecret,
-  };
-  const userCode = (${normalized});
-  return await userCode();
-}`)
+export type ExecutionErrorDetails =
+	| {
+			kind: 'host_approval_required'
+			message: string
+			nextStep: string
+			approvalUrl: string | null
+			host: string | null
+			secretNames: Array<string>
+			suggestedAction: {
+				type: 'approve_secret_host'
+			}
+	  }
+	| {
+			kind: 'secret_required'
+			message: string
+			nextStep: string
+			secretNames: Array<string>
+			suggestedAction: {
+				type: 'open_generated_ui'
+				reason: 'collect_secret'
+			}
+	  }
+	| {
+			kind: 'auth_required'
+			message: string
+			nextStep: string
+			suggestedAction: {
+				type: 'sign_in'
+			}
+	  }
+
+export function getExecutionErrorDetails(
+	error: unknown,
+): ExecutionErrorDetails | null {
+	const message = stringifyExecutionError(error)
+
+	const hostApprovalMatch = message.match(
+		/^Secret "([^"]+)" is not allowed for host "([^"]+)"/,
+	)
+	if (hostApprovalMatch) {
+		return {
+			kind: 'host_approval_required',
+			message,
+			nextStep:
+				'Ask the user whether they want to approve this host in the account web UI, then retry after approval.',
+			approvalUrl: extractFirstUrl(message),
+			host: hostApprovalMatch[2] ?? null,
+			secretNames: [hostApprovalMatch[1] ?? ''].filter(Boolean),
+			suggestedAction: {
+				type: 'approve_secret_host',
+			},
+		}
+	}
+
+	const missingSecretMatch = message.match(/^Secret "([^"]+)" was not found\./)
+	if (missingSecretMatch) {
+		return {
+			kind: 'secret_required',
+			message,
+			nextStep:
+				'Open a generated UI so the user can provide and save this secret, then retry the workflow. Do not ask the user to paste the secret into chat.',
+			secretNames: [missingSecretMatch[1] ?? ''].filter(Boolean),
+			suggestedAction: {
+				type: 'open_generated_ui',
+				reason: 'collect_secret',
+			},
+		}
+	}
+
+	if (
+		message ===
+		'Network requests that use secret placeholders require an authenticated user.'
+	) {
+		return {
+			kind: 'auth_required',
+			message,
+			nextStep: 'Ask the user to sign in to Kody, then retry the request.',
+			suggestedAction: {
+				type: 'sign_in',
+			},
+		}
+	}
+
+	return null
 }
 
 export function formatExecutionOutput(result: ExecuteResult) {
-	if (result.error) return `Error: ${result.error}`
+	if (result.error) {
+		const errorText = stringifyExecutionError(result.error)
+		const details = getExecutionErrorDetails(result.error)
+		if (!details) return `Error: ${errorText}`
+		return `Error: ${errorText}\n\nNext step: ${details.nextStep}`
+	}
 	return truncateExecutionResult(result.result)
 }
 
+function stringifyExecutionError(error: unknown) {
+	return error instanceof Error ? error.message : String(error)
+}
+
+function extractFirstUrl(message: string) {
+	for (const part of message.split(/\s+/)) {
+		if (part.startsWith('http://') || part.startsWith('https://')) {
+			return part.replace(/[),.;]+$/, '')
+		}
+	}
+	return null
+}
+
 function truncateExecutionResult(value: unknown) {
 	const text =
 		typeof value === 'string'
diff --git a/packages/worker/src/mcp/fetch-gateway.ts b/packages/worker/src/mcp/fetch-gateway.ts
new file mode 100644
index 0000000000..9ca8774d87
--- /dev/null
+++ b/packages/worker/src/mcp/fetch-gateway.ts
@@ -0,0 +1,194 @@
+import { WorkerEntrypoint } from 'cloudflare:workers'
+import {
+	buildSecretHostApprovalUrl,
+	createSecretHostApprovalToken,
+} from '#mcp/secrets/host-approval.ts'
+import { normalizeHost } from '#mcp/secrets/allowed-hosts.ts'
+import { resolveSecret, type ResolvedSecret } from '#mcp/secrets/service.ts'
+import { type SecretContext, type SecretScope } from '#mcp/secrets/types.ts'
+
+const secretPlaceholderRegex =
+	/\{\{secret:([a-zA-Z0-9._-]+)(?:\|scope=(session|app|user))?\}\}/g
+
+type FetchGatewayProps = {
+	baseUrl: string
+	userId: string | null
+	secretContext: SecretContext | null
+}
+export type { FetchGatewayProps }
+
+type ReferencedSecret = {
+	name: string
+	scope: SecretScope | null
+}
+
+export class CodemodeFetchGateway extends WorkerEntrypoint<
+	Env,
+	FetchGatewayProps
+> {
+	async fetch(request: Request) {
+		const transformed = await expandSecretPlaceholders({
+			request,
+			props: this.ctx.props,
+			env: this.env,
+		})
+		return fetch(transformed)
+	}
+}
+
+export async function expandSecretPlaceholders(input: {
+	request: Request
+	props: FetchGatewayProps
+	env: Pick<Env, 'APP_DB' | 'COOKIE_SECRET'>
+}) {
+	const headers = new Headers(input.request.headers)
+	const requestBody = await readRequestBody(input.request)
+	const replacements = new Map<string, string>()
+	const resolvedSecrets: Array<{
+		referenced: ReferencedSecret
+		resolved: ResolvedSecret
+	}> = []
+	const referencedSecrets = collectReferencedSecrets([
+		input.request.url,
+		...Array.from(headers.values()),
+		requestBody,
+	])
+	const hasReferencedSecrets = referencedSecrets.length > 0
+	if (hasReferencedSecrets) {
+		ensureFetchAllowed(input.props)
+	}
+	for (const referenced of referencedSecrets) {
+		const resolved = await resolveSecret({
+			env: input.env,
+			userId: input.props.userId!,
+			name: referenced.name,
+			scope: referenced.scope,
+			secretContext: input.props.secretContext,
+		})
+		if (!resolved.found || typeof resolved.value !== 'string') {
+			throw new Error(`Secret "${referenced.name}" was not found.`)
+		}
+		const placeholder = buildSecretPlaceholder(referenced)
+		replacements.set(placeholder, resolved.value)
+		resolvedSecrets.push({ referenced, resolved })
+	}
+	const nextUrl = replaceSecretPlaceholders(input.request.url, replacements)
+	let requestedHost = ''
+	if (hasReferencedSecrets) {
+		try {
+			requestedHost = new URL(nextUrl).hostname
+		} catch {
+			throw new Error(
+				'Unable to resolve the request host after secret expansion.',
+			)
+		}
+		const normalizedHost = normalizeHost(requestedHost)
+		for (const { referenced, resolved } of resolvedSecrets) {
+			const allowedForHost = resolved.allowedHosts.includes(normalizedHost)
+			if (allowedForHost) continue
+			const approvalToken = await createSecretHostApprovalToken(input.env, {
+				userId: input.props.userId!,
+				name: referenced.name,
+				scope: resolved.scope ?? referenced.scope ?? 'user',
+				requestedHost,
+				secretContext: input.props.secretContext,
+			})
+			const approvalUrl = buildSecretHostApprovalUrl({
+				baseUrl: input.props.baseUrl,
+				token: approvalToken,
+				name: referenced.name,
+				scope: resolved.scope ?? referenced.scope ?? 'user',
+				requestedHost,
+				secretContext: input.props.secretContext,
+			})
+			throw new Error(
+				`Secret "${referenced.name}" is not allowed for host "${requestedHost}". If this request is expected, ask the user whether this host should be added to the secret's allowed hosts: ${approvalUrl}`,
+			)
+		}
+	}
+	for (const [key, value] of Array.from(headers.entries())) {
+		headers.set(key, replaceSecretPlaceholders(value, replacements))
+	}
+	const nextBody =
+		requestBody == null
+			? undefined
+			: replaceSecretPlaceholders(requestBody, replacements)
+	const nextRedirect =
+		hasReferencedSecrets && input.request.redirect === 'follow'
+			? 'manual'
+			: input.request.redirect
+	return new Request(nextUrl, {
+		method: input.request.method,
+		headers,
+		body: shouldSendBody(input.request.method) ? nextBody : undefined,
+		redirect: nextRedirect,
+		credentials: input.request.credentials,
+		mode: input.request.mode,
+		cache: input.request.cache,
+		integrity: input.request.integrity,
+		keepalive: input.request.keepalive,
+		signal: input.request.signal,
+	})
+}
+
+function ensureFetchAllowed(props: FetchGatewayProps) {
+	if (!props.userId) {
+		throw new Error(
+			'Network requests that use secret placeholders require an authenticated user.',
+		)
+	}
+}
+
+function collectReferencedSecrets(values: Array<string | null | undefined>) {
+	const deduped = new Map<string, ReferencedSecret>()
+	for (const value of values) {
+		if (!value) continue
+		for (const referenced of parseSecretPlaceholders(value)) {
+			deduped.set(buildSecretPlaceholder(referenced), referenced)
+		}
+	}
+	return Array.from(deduped.values())
+}
+
+function parseSecretPlaceholders(value: string) {
+	const secrets: Array<ReferencedSecret> = []
+	for (const match of value.matchAll(secretPlaceholderRegex)) {
+		const name = match[1]?.trim()
+		if (!name) continue
+		const scope = match[2]
+		secrets.push({
+			name,
+			scope:
+				scope === 'app' || scope === 'session' || scope === 'user'
+					? scope
+					: null,
+		})
+	}
+	return secrets
+}
+
+function buildSecretPlaceholder(secret: ReferencedSecret) {
+	return secret.scope
+		? `{{secret:${secret.name}|scope=${secret.scope}}}`
+		: `{{secret:${secret.name}}}`
+}
+
+function replaceSecretPlaceholders(
+	value: string,
+	replacements: ReadonlyMap<string, string>,
+) {
+	let nextValue = value
+	for (const [placeholder, secretValue] of replacements.entries()) {
+		nextValue = nextValue.replaceAll(placeholder, secretValue)
+	}
+	return nextValue
+}
+
+async function readRequestBody(request: Request) {
+	if (!shouldSendBody(request.method)) return null
+	return request.text()
+}
+
+function shouldSendBody(method: string) {
+	return method !== 'GET' && method !== 'HEAD'
+}
diff --git a/packages/worker/src/mcp/generated-ui-api.ts b/packages/worker/src/mcp/generated-ui-api.ts
index 00dceb2957..b3531656f2 100644
--- a/packages/worker/src/mcp/generated-ui-api.ts
+++ b/packages/worker/src/mcp/generated-ui-api.ts
@@ -1,10 +1,14 @@
 import { createRouter, type BuildAction } from 'remix/fetch-router'
 import { post, route } from 'remix/fetch-router/routes'
 import { z } from 'zod'
+import { exports as workerExports } from 'cloudflare:workers'
 import { readAuthenticatedAppUser } from '#app/authenticated-user.ts'
 import { getAppBaseUrl } from '#app/app-base-url.ts'
 import { createMcpCallerContext } from '#mcp/context.ts'
-import { formatExecutionOutput } from '#mcp/executor.ts'
+import {
+	formatExecutionOutput,
+	getExecutionErrorDetails,
+} from '#mcp/executor.ts'
 import {
 	createGeneratedUiAppSession,
 	verifyGeneratedUiAppSession,
@@ -38,7 +42,6 @@ const generatedUiApiRoutes = route({
 	sourceWithSuffix: '/ui-api/:id/source',
 	execute: post('/ui-api/:id/execute'),
 	listSecrets: '/ui-api/:id/secrets',
-	saveSecret: post('/ui-api/:id/secrets'),
 	deleteSecret: post('/ui-api/:id/secrets/delete'),
 })
 
@@ -94,11 +97,7 @@ function createGeneratedUiApiRouter(env: Env) {
 	router.map(generatedUiApiRoutes.execute, createGeneratedUiExecuteHandler(env))
 	router.map(
 		generatedUiApiRoutes.listSecrets,
-		createGeneratedUiListSecretsHandler(env),
-	)
-	router.map(
-		generatedUiApiRoutes.saveSecret,
-		createGeneratedUiSaveSecretHandler(env),
+		createGeneratedUiSecretsHandler(env),
 	)
 	router.map(
 		generatedUiApiRoutes.deleteSecret,
@@ -201,12 +200,16 @@ function createGeneratedUiExecuteHandler(env: Env) {
 					},
 				}),
 				body.data.code,
+				undefined,
+				workerExports,
 			)
 			if (result.error) {
+				const errorDetails = getExecutionErrorDetails(result.error)
 				return jsonResponse(
 					{
 						ok: false,
 						error: formatExecutionOutput(result),
+						errorDetails,
 						logs: result.logs ?? [],
 					},
 					400,
@@ -224,7 +227,7 @@ function createGeneratedUiExecuteHandler(env: Env) {
 	>
 }
 
-function createGeneratedUiListSecretsHandler(env: Env) {
+function createGeneratedUiSecretsHandler(env: Env) {
 	return {
 		middleware: [],
 		async action({ request, params }) {
@@ -234,49 +237,40 @@ function createGeneratedUiListSecretsHandler(env: Env) {
 				routeId: getGeneratedUiRouteId(params),
 			})
 			if (context instanceof Response) return context
-			const url = new URL(request.url)
-			const scope = parseOptionalScope(url.searchParams.get('scope'))
-			if (url.searchParams.has('scope') && scope == null) {
-				return jsonResponse({ error: 'Invalid secret scope.' }, 400)
+			if (request.method === 'GET') {
+				const url = new URL(request.url)
+				const scope = parseOptionalScope(url.searchParams.get('scope'))
+				if (url.searchParams.has('scope') && scope == null) {
+					return jsonResponse({ error: 'Invalid secret scope.' }, 400)
+				}
+				const secrets = await listSecrets({
+					env,
+					userId: context.user.userId,
+					scope,
+					secretContext: {
+						sessionId: context.sessionId,
+						appId: context.appId,
+					},
+				})
+				return jsonResponse({
+					ok: true,
+					secrets: secrets.map((secret) => ({
+						name: secret.name,
+						scope: secret.scope,
+						description: secret.description,
+						app_id: secret.appId,
+						allowed_hosts: secret.allowedHosts,
+						created_at: secret.createdAt,
+						updated_at: secret.updatedAt,
+						ttl_ms: secret.ttlMs,
+					})),
+				})
+			}
+
+			if (request.method !== 'POST') {
+				return jsonResponse({ error: 'Method not allowed.' }, 405)
 			}
-			const secrets = await listSecrets({
-				env,
-				userId: context.user.userId,
-				scope,
-				secretContext: {
-					sessionId: context.sessionId,
-					appId: context.appId,
-				},
-			})
-			return jsonResponse({
-				ok: true,
-				secrets: secrets.map((secret) => ({
-					name: secret.name,
-					scope: secret.scope,
-					description: secret.description,
-					app_id: secret.appId,
-					created_at: secret.createdAt,
-					updated_at: secret.updatedAt,
-					ttl_ms: secret.ttlMs,
-				})),
-			})
-		},
-	} satisfies BuildAction<
-		typeof generatedUiApiRoutes.listSecrets.method,
-		typeof generatedUiApiRoutes.listSecrets.pattern
-	>
-}
 
-function createGeneratedUiSaveSecretHandler(env: Env) {
-	return {
-		middleware: [],
-		async action({ request, params }) {
-			const context = await requireGeneratedUiSessionContext({
-				request,
-				env,
-				routeId: getGeneratedUiRouteId(params),
-			})
-			if (context instanceof Response) return context
 			const body = secretMutationSchema.safeParse(
 				await request.json().catch(() => null),
 			)
@@ -304,6 +298,7 @@ function createGeneratedUiSaveSecretHandler(env: Env) {
 						scope: saved.scope,
 						description: saved.description,
 						app_id: saved.appId,
+						allowed_hosts: saved.allowedHosts,
 						created_at: saved.createdAt,
 						updated_at: saved.updatedAt,
 						ttl_ms: saved.ttlMs,
@@ -321,8 +316,8 @@ function createGeneratedUiSaveSecretHandler(env: Env) {
 			}
 		},
 	} satisfies BuildAction<
-		typeof generatedUiApiRoutes.saveSecret.method,
-		typeof generatedUiApiRoutes.saveSecret.pattern
+		typeof generatedUiApiRoutes.listSecrets.method,
+		typeof generatedUiApiRoutes.listSecrets.pattern
 	>
 }
 
diff --git a/packages/worker/src/mcp/index.ts b/packages/worker/src/mcp/index.ts
index 855d56b47b..91853e6576 100644
--- a/packages/worker/src/mcp/index.ts
+++ b/packages/worker/src/mcp/index.ts
@@ -1,4 +1,5 @@
 import * as Sentry from '@sentry/cloudflare'
+import { type exports as workerExports } from 'cloudflare:workers'
 import { invariant } from '@epic-web/invariant'
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
 import { CfWorkerJsonSchemaValidator } from '@modelcontextprotocol/sdk/validation/cfworker-provider.js'
@@ -31,10 +32,11 @@ Quick start
 - Call 'search' first to discover what Kody can do (results include type 'capability', 'skill', 'app', or 'secret').
 - Call 'execute' or 'meta_run_skill' next to run capability code.
 - Call 'open_generated_ui' when you want an interactive UI rendered in an MCP App host.
+- Never ask the user to paste secrets, tokens, API keys, passwords, OAuth codes, or client secrets into chat. Use saved secrets when available, or use 'open_generated_ui' to collect and save sensitive values instead.
 - Use 'meta_save_skill' only for workflows that are reasonably repeatable—patterns you expect to run again with similar structure or inputs. Do not save one-off tasks, unique ad-hoc work, or highly bespoke requests as skills; run those with 'execute' instead. Use 'meta_update_skill' to replace an existing skill's code in place.
 - When a saved skill declares parameters, pass values via meta_run_skill params; the codemode can read them from the params variable.
 - Use 'ui_save_app' to persist reusable UI source for later reopening via 'app_id'. Saved apps are user-scoped UI artifacts, not codemode skills.
-- Use the injected 'secrets' helper during execute-time code to list metadata or resolve user/app/session secret references without placing secret values in prompts or saved app source.
+- Use \`codemode.secret_list(args)\` during execute-time code to list secret metadata only; it does not return plaintext values.
 
 Kody source repository
 - Kody (this app and MCP server) is developed at https://github.com/kentcdodds/kody. When you launch a Cursor Cloud Agent to improve Kody itself, use that repository URL (unless the user explicitly points you at another fork or repo).
@@ -78,8 +80,10 @@ How to use execute
 - Each capability call returns that capability's raw structured result value.
 - When chaining calls, read fields from the previous result using its outputSchema.
 - Chain multiple calls, use conditionals, and return structured results.
-- The sandbox also injects a read-oriented 'secrets' helper for metadata/lookup: \`await secrets.list()\`, \`await secrets.list({ scope: 'app' })\`, \`await secrets.get('name')\`, \`await secrets.require('cloudflareToken', { scope: 'user' })\`.
-- Mutating secret operations stay on \`codemode\`: for example \`await codemode.secret_update({ name: 'cloudflareToken', scope: 'app', value: '...' })\` or \`await codemode.secret_delete({ name: 'cloudflareToken', scope: 'app' })\`.
+- Use \`await codemode.secret_list({})\` or \`await codemode.secret_list({ scope: 'app' })\` when you need secret metadata such as names, descriptions, scopes, and allowed hosts from the sandbox.
+- Use normal \`fetch(...)\` for outbound HTTP. To inject a stored secret, place a placeholder such as \`{{secret:cloudflareToken}}\` or \`{{secret:cloudflareToken|scope=user}}\` in the URL, headers, or request body; the host resolves it server-side and blocks unapproved destinations.
+- Saving or updating a secret does not authorize sending it anywhere. If a fetch fails because a host is not approved for that secret, ask the user whether to open the approval link and approve that host in the web app.
+- Secrets are intentionally not readable or updatable through \`codemode\`. Never ask the user to paste a secret into chat; use generated UI flows such as \`saveSecret(...)\` when the user needs to provide or rotate a value, and use \`codemode.secret_delete(...)\` only when removing a stored secret reference.
 - Your code must be an async arrow function that returns the result.
 - Example: const result = await codemode[capabilityName](args)
 
@@ -87,6 +91,7 @@ MCP App tools
 - Use 'open_generated_ui' when you want an interactive UI in MCP App compatible hosts.
 - Pass either inline source code with 'code' or reopen a saved app with 'app_id' (exactly one is allowed).
 - Prefer body-focused HTML fragments when possible, but full HTML documents are also supported.
+- Use generated UI whenever the user needs to enter a sensitive value. Do not ask the user to paste secrets or credentials into chat.
 - The shell exposes a small standard library on 'window.kodyWidget' for follow-up messages, external links, fullscreen requests, 'executeCode(code)', and secret management helpers such as 'saveSecret', 'listSecrets', and 'deleteSecret'.
 - 'executeCode(code)' runs server-side code for the generated UI session so execute-time secrets can be resolved without embedding their raw values in app source.
 - The shell also provides lightweight semantic HTML styles plus theme tokens such as '--color-*', '--spacing-*', '--radius-*', '--shadow-*', and '--font-*'.
@@ -108,6 +113,9 @@ class MCPBase extends McpAgent<Env, State, Props> {
 	getEnv() {
 		return this.env
 	}
+	getLoopbackExports() {
+		return this.ctx.exports as typeof workerExports
+	}
 	requireDomain() {
 		const { baseUrl } = this.getCallerContext()
 		invariant(
diff --git a/packages/worker/src/mcp/mcp-registration-agent.ts b/packages/worker/src/mcp/mcp-registration-agent.ts
index 88745116b7..7ecb80869e 100644
--- a/packages/worker/src/mcp/mcp-registration-agent.ts
+++ b/packages/worker/src/mcp/mcp-registration-agent.ts
@@ -6,4 +6,5 @@ export type McpRegistrationAgent = {
 	getEnv(): Env
 	getCallerContext(): McpCallerContext
 	requireDomain(): string
+	getLoopbackExports(): Cloudflare.Exports
 }
diff --git a/packages/worker/src/mcp/mcp-server-e2e.test.ts b/packages/worker/src/mcp/mcp-server-e2e.test.ts
index 9dca4d65a4..5e61a414b6 100644
--- a/packages/worker/src/mcp/mcp-server-e2e.test.ts
+++ b/packages/worker/src/mcp/mcp-server-e2e.test.ts
@@ -386,6 +386,32 @@ async function authorizeWithPassword(
 	return code
 }
 
+async function loginToApp(
+	origin: string,
+	user: { email: string; password: string },
+) {
+	const response = await fetch(new URL('/auth', origin), {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			Accept: 'application/json',
+		},
+		body: JSON.stringify({
+			mode: 'login',
+			email: user.email,
+			password: user.password,
+		}),
+	})
+	const cookieHeader = response.headers.get('set-cookie')
+	if (!cookieHeader) {
+		const body = await response.text().catch(() => '')
+		throw new Error(
+			`Login did not return a session cookie (${response.status}): ${body}`,
+		)
+	}
+	return cookieHeader.split(';')[0] ?? cookieHeader
+}
+
 type TestOAuthProvider = OAuthClientProvider & {
 	waitForAuthorizationCode: () => Promise<string>
 }
@@ -729,6 +755,56 @@ test('mcp server executes ui_save_app via execute tool', async () => {
 	expect(textOutput).toContain('meta_save_skill')
 })
 
+test('mcp server returns structured guidance for missing secret errors in execute', async () => {
+	await using database = await createTestDatabase()
+	await using server = await startDevServer(database.persistDir)
+	await using mcpClient = await createMcpClient(server.origin, database.user)
+
+	const result = await mcpClient.client.callTool({
+		name: 'execute',
+		arguments: {
+			code: `async () => {
+				await fetch('https://example.com/private', {
+					headers: {
+						Authorization: 'Bearer {{secret:missingToken|scope=user}}',
+					},
+				})
+				return { ok: true }
+			}`,
+		},
+	})
+
+	const structuredResult = (result as CallToolResult).structuredContent as
+		| {
+				error?: unknown
+				errorDetails?: Record<string, unknown>
+		  }
+		| undefined
+	const errorDetails = structuredResult?.errorDetails
+	const textOutput =
+		(result as CallToolResult).content.find(
+			(item): item is Extract<ContentBlock, { type: 'text' }> =>
+				item.type === 'text',
+		)?.text ?? ''
+
+	expect((result as CallToolResult).isError).toBe(true)
+	expect(textOutput).toContain('Secret "missingToken" was not found.')
+	expect(textOutput).toContain(
+		'Next step: Open a generated UI so the user can provide and save this secret, then retry the workflow. Do not ask the user to paste the secret into chat.',
+	)
+	expect(errorDetails).toEqual({
+		kind: 'secret_required',
+		message: 'Secret "missingToken" was not found.',
+		nextStep:
+			'Open a generated UI so the user can provide and save this secret, then retry the workflow. Do not ask the user to paste the secret into chat.',
+		secretNames: ['missingToken'],
+		suggestedAction: {
+			type: 'open_generated_ui',
+			reason: 'collect_secret',
+		},
+	})
+})
+
 test('mcp server opens generated ui with inline code and serves shell resource', async () => {
 	await using database = await createTestDatabase()
 	await using server = await startDevServer(database.persistDir)
@@ -1023,85 +1099,27 @@ test('generated ui sessions support secret storage, execute-time resolution, and
 			scope: 'session',
 		}),
 	})
-	expect(saveSessionSecretResponse.ok).toBe(true)
-
-	const executeResponse = await fetch(executeUrl!, {
-		method: 'POST',
-		headers: {
-			Authorization: `Bearer ${token}`,
-			'Content-Type': 'application/json',
-			Accept: 'application/json',
-		},
-		body: JSON.stringify({
-			code: `async () => {
-				const appSecret = await secrets.require('cloudflareToken')
-				const userSecret = await secrets.require('globalApiKey', { scope: 'user' })
-				const sessionSecret = await secrets.require('ephemeralCode', { scope: 'session' })
-				return {
-					appSecretLength: appSecret.length,
-					userSecretLength: userSecret.length,
-					sessionSecretLength: sessionSecret.length,
-				}
-			}`,
-		}),
-	})
-	expect(executeResponse.ok).toBe(true)
-	const executePayload = (await executeResponse.json()) as {
+	const saveSessionSecretRaw = await saveSessionSecretResponse.text()
+	const saveSessionSecretPayload = JSON.parse(saveSessionSecretRaw) as {
 		ok?: boolean
-		result?: {
-			appSecretLength?: number
-			userSecretLength?: number
-			sessionSecretLength?: number
-		}
-		logs?: Array<string>
+		secret?: Record<string, unknown>
+		error?: string
 	}
-	expect(executePayload.ok).toBe(true)
-	expect(executePayload.result).toEqual({
-		appSecretLength: 'secret-app-token'.length,
-		userSecretLength: 'secret-user-token'.length,
-		sessionSecretLength: '123456'.length,
-	})
-	expect(executePayload.logs?.join('\n')).toContain(
-		'Secret used: app:cloudflareToken',
-	)
-	expect(executePayload.logs?.join('\n')).toContain(
-		'Secret used: user:globalApiKey',
-	)
-	expect(executePayload.logs?.join('\n')).toContain(
-		'Secret used: session:ephemeralCode',
-	)
-
-	const sessionListExecuteResponse = await fetch(executeUrl!, {
-		method: 'POST',
-		headers: {
-			Authorization: `Bearer ${token}`,
-			'Content-Type': 'application/json',
-			Accept: 'application/json',
-		},
-		body: JSON.stringify({
-			code: `async () => {
-				return await secrets.list({ scope: 'session' })
-			}`,
-		}),
+	expect(
+		saveSessionSecretResponse.ok,
+		`${saveSessionSecretResponse.status} ${saveSessionSecretRaw}`,
+	).toBe(true)
+	expect(saveSessionSecretPayload.ok).toBe(true)
+	expect(saveSessionSecretPayload.secret).toEqual({
+		name: 'ephemeralCode',
+		scope: 'session',
+		description: 'Session-only verification code',
+		app_id: null,
+		allowed_hosts: [],
+		created_at: expect.any(String),
+		updated_at: expect.any(String),
+		ttl_ms: expect.any(Number),
 	})
-	expect(sessionListExecuteResponse.ok).toBe(true)
-	const sessionListExecutePayload =
-		(await sessionListExecuteResponse.json()) as {
-			ok?: boolean
-			result?: Array<Record<string, unknown>>
-		}
-	expect(sessionListExecutePayload.ok).toBe(true)
-	expect(sessionListExecutePayload.result).toEqual([
-		{
-			name: 'ephemeralCode',
-			scope: 'session',
-			description: 'Session-only verification code',
-			app_id: null,
-			created_at: expect.any(String),
-			updated_at: expect.any(String),
-			ttl_ms: expect.any(Number),
-		},
-	])
 
 	const listSecretsResponse = await fetch(`${secretsUrl!}?scope=app`, {
 		headers: {
@@ -1109,8 +1127,9 @@ test('generated ui sessions support secret storage, execute-time resolution, and
 			Accept: 'application/json',
 		},
 	})
-	expect(listSecretsResponse.ok).toBe(true)
-	const listSecretsPayload = (await listSecretsResponse.json()) as {
+	const listSecretsRaw = await listSecretsResponse.text()
+	expect(listSecretsResponse.ok, listSecretsRaw).toBe(true)
+	const listSecretsPayload = JSON.parse(listSecretsRaw) as {
 		ok?: boolean
 		secrets?: Array<{ name?: string; scope?: string }>
 	}
@@ -1121,13 +1140,18 @@ test('generated ui sessions support secret storage, execute-time resolution, and
 			scope: 'app',
 			description: 'App-scoped Cloudflare deployment token',
 			app_id: appId,
+			allowed_hosts: [],
 			created_at: expect.any(String),
 			updated_at: expect.any(String),
 			ttl_ms: null,
 		},
 	])
 
-	const updateSecretExecuteResponse = await fetch(executeUrl!, {
+	const approvedFetchReference = crypto
+		.randomUUID()
+		.replace(/-/g, '')
+		.slice(0, 24)
+	const blockedFetchExecuteResponse = await fetch(executeUrl!, {
 		method: 'POST',
 		headers: {
 			Authorization: `Bearer ${token}`,
@@ -1136,35 +1160,97 @@ test('generated ui sessions support secret storage, execute-time resolution, and
 		},
 		body: JSON.stringify({
 			code: `async () => {
-				return await codemode.secret_update({
-					name: 'cloudflareToken',
-					scope: 'app',
-					value: 'rotated-app-token',
-					description: 'Rotated Cloudflare deployment token',
-				})
+				const response = await fetch(
+					'https://example.com/deploy?reference=${approvedFetchReference}',
+					{
+						method: 'POST',
+						headers: {
+							Authorization: 'Bearer {{secret:cloudflareToken|scope=app}}',
+						},
+						body: JSON.stringify({ note: 'deploy' }),
+					},
+				)
+				return {
+					status: response.status,
+				}
 			}`,
 		}),
 	})
-	expect(updateSecretExecuteResponse.ok).toBe(true)
-	const updateSecretExecutePayload =
-		(await updateSecretExecuteResponse.json()) as {
+	expect(blockedFetchExecuteResponse.status).toBe(400)
+	const blockedFetchExecutePayload =
+		(await blockedFetchExecuteResponse.json()) as {
 			ok?: boolean
-			result?: {
-				secret?: Record<string, unknown>
-			}
+			error?: string
+			errorDetails?: Record<string, unknown>
 		}
-	expect(updateSecretExecutePayload.ok).toBe(true)
-	expect(updateSecretExecutePayload.result?.secret).toEqual({
-		name: 'cloudflareToken',
-		scope: 'app',
-		description: 'Rotated Cloudflare deployment token',
-		app_id: appId,
-		created_at: expect.any(String),
-		updated_at: expect.any(String),
-		ttl_ms: null,
+	expect(blockedFetchExecutePayload.ok).toBe(false)
+	expect(blockedFetchExecutePayload.error).toContain(
+		'Secret "cloudflareToken" is not allowed for host "example.com"',
+	)
+	expect(blockedFetchExecutePayload.error).toContain(
+		"ask the user whether this host should be added to the secret's allowed hosts",
+	)
+	const approvalMatch =
+		blockedFetchExecutePayload.error?.match(
+			/https?:\/\/\S*\/account\/secrets\/[^\s?]+\?[^)\s]*allowed-host=[^&\s)]+[^)\s]*/,
+		) ?? null
+	expect(approvalMatch).not.toBeNull()
+	expect(blockedFetchExecutePayload.errorDetails).toEqual({
+		kind: 'host_approval_required',
+		message: expect.stringContaining(
+			'Secret "cloudflareToken" is not allowed for host "example.com"',
+		),
+		nextStep:
+			'Ask the user whether they want to approve this host in the account web UI, then retry after approval.',
+		approvalUrl: approvalMatch![0],
+		host: 'example.com',
+		secretNames: ['cloudflareToken'],
+		suggestedAction: {
+			type: 'approve_secret_host',
+		},
+	})
+
+	const appCookieHeader = await loginToApp(server.origin, database.user)
+	const approvalResponse = await fetch(approvalMatch![0]!, {
+		headers: {
+			Cookie: appCookieHeader,
+		},
 	})
+	expect(approvalResponse.ok).toBe(true)
 
-	const updatedValueExecuteResponse = await fetch(executeUrl!, {
+	const approvalApiResponse = await fetch(
+		new URL('/account/secrets.json', server.origin),
+		{
+			method: 'POST',
+			headers: {
+				Cookie: appCookieHeader,
+				'Content-Type': 'application/json',
+				Accept: 'application/json',
+			},
+			body: JSON.stringify({
+				action: 'approve',
+				requestToken: new URL(approvalMatch![0]!).searchParams.get('request'),
+			}),
+		},
+	)
+	const approvalApiRaw = await approvalApiResponse.text()
+	expect(approvalApiResponse.ok, approvalApiRaw).toBe(true)
+	const approvalApiPayload = JSON.parse(approvalApiRaw) as {
+		ok?: boolean
+		secrets?: Array<Record<string, unknown>>
+	}
+	expect(approvalApiPayload.ok).toBe(true)
+	expect(approvalApiPayload.secrets).toEqual(
+		expect.arrayContaining([
+			expect.objectContaining({
+				name: 'cloudflareToken',
+				scope: 'app',
+				allowedHosts: ['example.com'],
+			}),
+		]),
+	)
+
+	const approvedFetchExecuteResponse = await fetch(executeUrl!, {
 		method: 'POST',
 		headers: {
 			Authorization: `Bearer ${token}`,
@@ -1173,22 +1259,42 @@ test('generated ui sessions support secret storage, execute-time resolution, and
 		},
 		body: JSON.stringify({
 			code: `async () => {
-				const rotated = await secrets.require('cloudflareToken', { scope: 'app' })
-				return { rotatedLength: rotated.length }
+				const response = await fetch(
+					'https://example.com/deploy?reference=${approvedFetchReference}',
+					{
+						method: 'POST',
+						headers: {
+							Authorization: 'Bearer {{secret:cloudflareToken|scope=app}}',
+						},
+						body: JSON.stringify({ note: 'deploy' }),
+					},
+				)
+				return {
+					ok: response.ok,
+					status: response.status,
+				}
 			}`,
 		}),
 	})
-	expect(updatedValueExecuteResponse.ok).toBe(true)
-	const updatedValueExecutePayload =
-		(await updatedValueExecuteResponse.json()) as {
+	if (!approvedFetchExecuteResponse.ok) {
+		const raw = await approvedFetchExecuteResponse.text().catch(() => '')
+		throw new Error(
+			`Approved fetch failed (${approvedFetchExecuteResponse.status}): ${raw}. reference=${approvedFetchReference}`,
+		)
+	}
+	const approvedFetchExecutePayload =
+		(await approvedFetchExecuteResponse.json()) as {
 			ok?: boolean
 			result?: {
-				rotatedLength?: number
+				ok?: boolean
+				status?: number
 			}
 		}
-	expect(updatedValueExecutePayload.result?.rotatedLength).toBe(
-		'rotated-app-token'.length,
-	)
+	expect(approvedFetchExecutePayload.ok).toBe(true)
+	expect(approvedFetchExecutePayload.result).toEqual({
+		ok: false,
+		status: 405,
+	})
 
 	const searchResult = await mcpClient.client.callTool({
 		name: 'search',
@@ -1220,7 +1326,7 @@ test('generated ui sessions support secret storage, execute-time resolution, and
 	expect(appMatch?.availableSecrets).toEqual([
 		{
 			name: 'cloudflareToken',
-			description: 'Rotated Cloudflare deployment token',
+			description: 'App-scoped Cloudflare deployment token',
 		},
 	])
 
diff --git a/packages/worker/src/mcp/run-codemode-registry.ts b/packages/worker/src/mcp/run-codemode-registry.ts
index d23d5082e4..5d0be933b6 100644
--- a/packages/worker/src/mcp/run-codemode-registry.ts
+++ b/packages/worker/src/mcp/run-codemode-registry.ts
@@ -3,6 +3,7 @@ import {
 	type ResolvedProvider,
 	type ToolProvider,
 } from '@cloudflare/codemode'
+import { exports as workerExports } from 'cloudflare:workers'
 import { type McpCallerContext } from '@kody-internal/shared/chat.ts'
 import { buildParameterizedSkillCode } from '#mcp/skills/skill-parameters.ts'
 import { getCapabilityRegistryForContext } from '#mcp/capabilities/registry.ts'
@@ -51,14 +52,25 @@ export async function runCodemodeWithRegistry(
 	callerContext: McpCallerContext,
 	code: string,
 	params?: Record<string, unknown>,
+	executorExports?: typeof workerExports,
 ) {
-	const { createExecuteExecutor, wrapExecuteCode } =
-		await import('#mcp/executor.ts')
-	const executor = createExecuteExecutor(env)
+	const { createExecuteExecutor } = await import('#mcp/executor.ts')
+	const executor = createExecuteExecutor({
+		env,
+		exports: executorExports ?? workerExports,
+		gatewayProps: {
+			baseUrl: callerContext.baseUrl,
+			userId: callerContext.user?.userId ?? null,
+			secretContext: {
+				sessionId: callerContext.secretContext?.sessionId ?? null,
+				appId: callerContext.secretContext?.appId ?? null,
+			},
+		},
+	})
 	const provider = await buildCodemodeProvider(env, callerContext)
 	const wrapped =
 		params !== undefined
 			? await buildParameterizedSkillCode(code, params)
 			: code
-	return executor.execute(wrapExecuteCode(wrapped), [provider])
+	return executor.execute(wrapped, [provider])
 }
diff --git a/packages/worker/src/mcp/secrets/allowed-hosts.ts b/packages/worker/src/mcp/secrets/allowed-hosts.ts
new file mode 100644
index 0000000000..1d0e62c880
--- /dev/null
+++ b/packages/worker/src/mcp/secrets/allowed-hosts.ts
@@ -0,0 +1,31 @@
+export function normalizeHost(host: string) {
+	return host.trim().toLowerCase()
+}
+
+export function normalizeAllowedHosts(hosts: Array<string>) {
+	return Array.from(
+		new Set(
+			hosts
+				.map((host) => normalizeHost(host))
+				.filter((host) => host.length > 0),
+		),
+	).sort()
+}
+
+export function parseAllowedHosts(raw: string | null | undefined) {
+	if (!raw) return []
+	try {
+		const parsed = JSON.parse(raw)
+		return Array.isArray(parsed)
+			? normalizeAllowedHosts(
+					parsed.filter((value): value is string => typeof value === 'string'),
+				)
+			: []
+	} catch {
+		return []
+	}
+}
+
+export function stringifyAllowedHosts(hosts: Array<string>) {
+	return JSON.stringify(normalizeAllowedHosts(hosts))
+}
diff --git a/packages/worker/src/mcp/secrets/host-approval.ts b/packages/worker/src/mcp/secrets/host-approval.ts
new file mode 100644
index 0000000000..3bc948a383
--- /dev/null
+++ b/packages/worker/src/mcp/secrets/host-approval.ts
@@ -0,0 +1,97 @@
+import { buildAccountSecretPath } from '@kody-internal/shared/account-secret-route.ts'
+import { decryptStringWithPurpose, encryptStringWithPurpose } from './crypto.ts'
+import { normalizeHost } from './allowed-hosts.ts'
+import { type SecretContext, type SecretScope } from './types.ts'
+
+const secretHostApprovalPurpose = 'secret-host-approval'
+const defaultSecretHostApprovalTtlMs = 1000 * 60 * 60 * 24
+
+export type SecretHostApprovalRequest = {
+	userId: string
+	name: string
+	scope: SecretScope
+	requestedHost: string
+	secretContext: SecretContext | null
+	iat: number
+	exp: number
+}
+
+export async function createSecretHostApprovalToken(
+	env: Pick<Env, 'COOKIE_SECRET'>,
+	input: {
+		userId: string
+		name: string
+		scope: SecretScope
+		requestedHost: string
+		secretContext: SecretContext | null
+		ttlMs?: number
+	},
+) {
+	const now = Date.now()
+	const ttlMs = input.ttlMs ?? defaultSecretHostApprovalTtlMs
+	return encryptStringWithPurpose(
+		env,
+		secretHostApprovalPurpose,
+		JSON.stringify({
+			userId: input.userId,
+			name: input.name.trim(),
+			scope: input.scope,
+			requestedHost: normalizeHost(input.requestedHost),
+			secretContext: input.secretContext ?? null,
+			iat: now,
+			exp: now + ttlMs,
+		} satisfies SecretHostApprovalRequest),
+	)
+}
+
+export async function verifySecretHostApprovalToken(
+	env: Pick<Env, 'COOKIE_SECRET'>,
+	token: string,
+) {
+	const raw = await decryptStringWithPurpose(
+		env,
+		secretHostApprovalPurpose,
+		token,
+	)
+	const parsed = JSON.parse(raw) as Partial<SecretHostApprovalRequest>
+	if (
+		typeof parsed.userId !== 'string' ||
+		typeof parsed.name !== 'string' ||
+		typeof parsed.scope !== 'string' ||
+		typeof parsed.requestedHost !== 'string'
+	) {
+		throw new Error('Invalid secret host approval request.')
+	}
+	if (typeof parsed.exp === 'number' && Date.now() > parsed.exp) {
+		throw new Error('Secret host approval request has expired.')
+	}
+	return {
+		userId: parsed.userId,
+		name: parsed.name.trim(),
+		scope: parsed.scope as SecretScope,
+		requestedHost: normalizeHost(parsed.requestedHost),
+		secretContext: parsed.secretContext ?? null,
+		iat: typeof parsed.iat === 'number' ? parsed.iat : Date.now(),
+		exp: typeof parsed.exp === 'number' ? parsed.exp : Date.now(),
+	} satisfies SecretHostApprovalRequest
+}
+
+export function buildSecretHostApprovalUrl(input: {
+	baseUrl: string
+	token: string
+	name: string
+	scope: SecretScope
+	requestedHost: string
+	secretContext: SecretContext | null
+}) {
+	const secretPath = buildAccountSecretPath({
+		name: input.name,
+		scope: input.scope,
+		appId: input.secretContext?.appId ?? null,
+		sessionId: input.secretContext?.sessionId ?? null,
+	})
+	const url = new URL(secretPath, input.baseUrl)
+	url.searchParams.set('allowed-host', normalizeHost(input.requestedHost))
+	url.searchParams.set('request', input.token)
+	return url.toString()
+}
diff --git a/packages/worker/src/mcp/secrets/repo.ts b/packages/worker/src/mcp/secrets/repo.ts
index 15d8deb384..c815bb6f85 100644
--- a/packages/worker/src/mcp/secrets/repo.ts
+++ b/packages/worker/src/mcp/secrets/repo.ts
@@ -9,6 +9,7 @@ type SecretMetadataRow = {
 	binding_key: string
 	name: string
 	description: string
+	allowed_hosts: string
 	created_at: string
 	updated_at: string
 	expires_at: string | null
@@ -72,7 +73,7 @@ export async function getSecretEntry(input: {
 }): Promise<SecretEntryRow | null> {
 	const row = await input.db
 		.prepare(
-			`SELECT bucket_id, name, description, encrypted_value, created_at, updated_at
+			`SELECT bucket_id, name, description, encrypted_value, allowed_hosts, created_at, updated_at
 			FROM secret_entries
 			WHERE bucket_id = ? AND name = ?
 			LIMIT 1`,
@@ -93,12 +94,13 @@ export async function upsertSecretEntry(input: {
 	await input.db
 		.prepare(
 			`INSERT INTO secret_entries (
-				bucket_id, name, description, encrypted_value, created_at, updated_at
-			) VALUES (?, ?, ?, ?, ?, ?)
+				bucket_id, name, description, encrypted_value, allowed_hosts, created_at, updated_at
+			) VALUES (?, ?, ?, ?, ?, ?, ?)
 			ON CONFLICT(bucket_id, name)
 			DO UPDATE SET
 				description = excluded.description,
 				encrypted_value = excluded.encrypted_value,
+				allowed_hosts = excluded.allowed_hosts,
 				updated_at = excluded.updated_at`,
 		)
 		.bind(
@@ -106,6 +108,7 @@ export async function upsertSecretEntry(input: {
 			input.row.name,
 			input.row.description,
 			input.row.encrypted_value,
+			input.row.allowed_hosts,
 			input.row.created_at ?? now,
 			input.row.updated_at ?? now,
 		)
@@ -130,7 +133,7 @@ export async function listSecretMetadataForBucket(input: {
 }): Promise<Array<SecretMetadataRow>> {
 	const { results } = await input.db
 		.prepare(
-			`SELECT ? AS scope, ? AS binding_key, name, description, created_at, updated_at, ? AS expires_at
+			`SELECT ? AS scope, ? AS binding_key, name, description, allowed_hosts, created_at, updated_at, ? AS expires_at
 			FROM secret_entries
 			WHERE bucket_id = ?
 			ORDER BY name ASC`,
@@ -153,7 +156,7 @@ export async function listUserScopeSecretMetadata(input: {
 	const now = input.now ?? new Date().toISOString()
 	const { results } = await input.db
 		.prepare(
-			`SELECT b.scope, b.binding_key, e.name, e.description, e.created_at, e.updated_at, b.expires_at
+			`SELECT b.scope, b.binding_key, e.name, e.description, e.allowed_hosts, e.created_at, e.updated_at, b.expires_at
 			FROM secret_buckets b
 			JOIN secret_entries e ON e.bucket_id = b.id
 			WHERE b.user_id = ? AND b.scope = 'user'
@@ -176,7 +179,7 @@ export async function listAppScopeSecretMetadata(input: {
 	const placeholders = input.appIds.map(() => '?').join(', ')
 	const { results } = await input.db
 		.prepare(
-			`SELECT b.scope, b.binding_key, e.name, e.description, e.created_at, e.updated_at, b.expires_at
+			`SELECT b.scope, b.binding_key, e.name, e.description, e.allowed_hosts, e.created_at, e.updated_at, b.expires_at
 			FROM secret_buckets b
 			JOIN secret_entries e ON e.bucket_id = b.id
 			WHERE b.user_id = ? AND b.scope = 'app'
@@ -207,6 +210,7 @@ function mapSecretEntryRow(row: Record<string, unknown>): SecretEntryRow {
 		name: String(row['name']),
 		description: String(row['description']),
 		encrypted_value: String(row['encrypted_value']),
+		allowed_hosts: String(row['allowed_hosts']),
 		created_at: String(row['created_at']),
 		updated_at: String(row['updated_at']),
 	}
@@ -218,6 +222,7 @@ function mapSecretMetadataRow(row: Record<string, unknown>): SecretMetadataRow {
 		binding_key: String(row['binding_key']),
 		name: String(row['name']),
 		description: String(row['description']),
+		allowed_hosts: String(row['allowed_hosts']),
 		created_at: String(row['created_at']),
 		updated_at: String(row['updated_at']),
 		expires_at: row['expires_at'] == null ? null : String(row['expires_at']),
diff --git a/packages/worker/src/mcp/secrets/service.ts b/packages/worker/src/mcp/secrets/service.ts
index 402f5822e0..44f331397c 100644
--- a/packages/worker/src/mcp/secrets/service.ts
+++ b/packages/worker/src/mcp/secrets/service.ts
@@ -1,3 +1,9 @@
+import {
+	normalizeAllowedHosts,
+	normalizeHost,
+	parseAllowedHosts,
+	stringifyAllowedHosts,
+} from './allowed-hosts.ts'
 import { decryptSecretValue, encryptSecretValue } from './crypto.ts'
 import {
 	deleteSecretEntry,
@@ -60,6 +66,7 @@ export type ResolvedSecret = {
 	found: boolean
 	value: string | null
 	scope: SecretScope | null
+	allowedHosts: Array<string>
 }
 
 export async function saveSecret(
@@ -94,6 +101,7 @@ export async function saveSecret(
 			name,
 			description,
 			encrypted_value: await encryptSecretValue(input.env, value),
+			allowed_hosts: existingEntry?.allowed_hosts ?? '[]',
 			created_at: existingEntry?.created_at ?? now,
 			updated_at: now,
 		},
@@ -103,6 +111,9 @@ export async function saveSecret(
 		scope: input.scope,
 		description,
 		appId: input.scope === 'app' ? bucket.binding_key : null,
+		allowedHosts: existingEntry
+			? parseAllowedHosts(existingEntry.allowed_hosts)
+			: [],
 		createdAt: existingEntry?.created_at ?? now,
 		updatedAt: now,
 		expiresAt: bucket.expires_at,
@@ -132,6 +143,7 @@ export async function listSecrets(
 			scope: row.scope,
 			description: row.description,
 			appId: row.scope === 'app' ? row.binding_key : null,
+			allowedHosts: parseAllowedHosts(row.allowed_hosts),
 			createdAt: row.created_at,
 			updatedAt: row.updated_at,
 			expiresAt: row.expires_at,
@@ -163,12 +175,14 @@ export async function resolveSecret(
 			found: true,
 			value: await decryptSecretValue(input.env, entry.encrypted_value),
 			scope,
+			allowedHosts: parseAllowedHosts(entry.allowed_hosts),
 		}
 	}
 	return {
 		found: false,
 		value: null,
 		scope: null,
+		allowedHosts: [],
 	}
 }
 
@@ -233,6 +247,7 @@ export async function updateSecret(
 			encrypted_value: hasValueUpdate
 				? await encryptSecretValue(input.env, nextValue!)
 				: existingEntry.encrypted_value,
+			allowed_hosts: existingEntry.allowed_hosts,
 			created_at: existingEntry.created_at,
 			updated_at: now,
 		},
@@ -242,6 +257,7 @@ export async function updateSecret(
 		scope: input.scope,
 		description: nextDescription,
 		appId: input.scope === 'app' ? bucket.binding_key : null,
+		allowedHosts: parseAllowedHosts(existingEntry.allowed_hosts),
 		createdAt: existingEntry.created_at,
 		updatedAt: now,
 		expiresAt: bucket.expires_at,
@@ -285,6 +301,7 @@ export async function listAppSecretsByAppIds(input: {
 				scope: row.scope,
 				description: row.description,
 				appId,
+				allowedHosts: parseAllowedHosts(row.allowed_hosts),
 				createdAt: row.created_at,
 				updatedAt: row.updated_at,
 				expiresAt: row.expires_at,
@@ -418,6 +435,7 @@ function toSecretMetadata(input: {
 	scope: SecretScope
 	description: string
 	appId: string | null
+	allowedHosts: Array<string>
 	createdAt: string
 	updatedAt: string
 	expiresAt: string | null
@@ -427,6 +445,7 @@ function toSecretMetadata(input: {
 		scope: input.scope,
 		description: input.description,
 		appId: input.appId,
+		allowedHosts: normalizeAllowedHosts(input.allowedHosts),
 		createdAt: input.createdAt,
 		updatedAt: input.updatedAt,
 		ttlMs:
@@ -435,3 +454,67 @@ function toSecretMetadata(input: {
 				: Math.max(0, new Date(input.expiresAt).getTime() - Date.now()),
 	}
 }
+
+export async function setSecretAllowedHosts(input: {
+	env: Pick<Env, 'APP_DB'>
+	userId: string
+	name: string
+	scope: SecretScope
+	allowedHosts: Array<string>
+	secretContext?: SecretContext | null
+}) {
+	const name = input.name.trim()
+	if (!name) {
+		throw new Error('Secret name is required.')
+	}
+	const bucket = await getExistingBucketForScope({
+		db: input.env.APP_DB,
+		userId: input.userId,
+		scope: input.scope,
+		secretContext: input.secretContext ?? null,
+	})
+	if (!bucket) {
+		throw new Error('Secret not found for this scope.')
+	}
+	const existingEntry = await getSecretEntry({
+		db: input.env.APP_DB,
+		bucketId: bucket.id,
+		name,
+	})
+	if (!existingEntry) {
+		throw new Error('Secret not found for this scope.')
+	}
+	const now = new Date().toISOString()
+	await upsertSecretEntry({
+		db: input.env.APP_DB,
+		row: {
+			...existingEntry,
+			allowed_hosts: stringifyAllowedHosts(input.allowedHosts),
+			updated_at: now,
+		},
+	})
+	return toSecretMetadata({
+		name,
+		scope: input.scope,
+		description: existingEntry.description,
+		appId: input.scope === 'app' ? bucket.binding_key : null,
+		allowedHosts: input.allowedHosts,
+		createdAt: existingEntry.created_at,
+		updatedAt: now,
+		expiresAt: bucket.expires_at,
+	})
+}
+
+export async function resolveSecretForHost(
+	input: ResolveSecretInput & {
+		host: string
+	},
+) {
+	const normalizedHost = normalizeHost(input.host)
+	const resolved = await resolveSecret(input)
+	if (!resolved.found) return resolved
+	return {
+		...resolved,
+		allowedForHost: resolved.allowedHosts.includes(normalizedHost),
+	}
+}
diff --git a/packages/worker/src/mcp/secrets/types.ts b/packages/worker/src/mcp/secrets/types.ts
index c9cffe58d0..e21fe65b45 100644
--- a/packages/worker/src/mcp/secrets/types.ts
+++ b/packages/worker/src/mcp/secrets/types.ts
@@ -17,6 +17,7 @@ export type SecretEntryRow = {
 	name: string
 	description: string
 	encrypted_value: string
+	allowed_hosts: string
 	created_at: string
 	updated_at: string
 }
@@ -26,6 +27,7 @@ export type SecretMetadata = {
 	scope: SecretScope
 	description: string
 	appId: string | null
+	allowedHosts: Array<string>
 	createdAt: string
 	updatedAt: string
 	ttlMs: number | null
diff --git a/packages/worker/src/mcp/tools/execute.ts b/packages/worker/src/mcp/tools/execute.ts
index 98eed26d68..6df35256b0 100644
--- a/packages/worker/src/mcp/tools/execute.ts
+++ b/packages/worker/src/mcp/tools/execute.ts
@@ -1,7 +1,10 @@
 import * as Sentry from '@sentry/cloudflare'
 import { type ToolAnnotations } from '@modelcontextprotocol/sdk/types.js'
 import { z } from 'zod'
-import { formatExecutionOutput } from '#mcp/executor.ts'
+import {
+	formatExecutionOutput,
+	getExecutionErrorDetails,
+} from '#mcp/executor.ts'
 import { runCodemodeWithRegistry } from '#mcp/run-codemode-registry.ts'
 import { type McpRegistrationAgent } from '#mcp/mcp-registration-agent.ts'
 import {
@@ -40,6 +43,19 @@ Each capability call resolves to the raw returned value itself, not an MCP
 wrapper object. When chaining calls, read fields from the previous result using
 the capability's \`outputSchema\` from \`search\` with \`detail: true\`.
 
+Network access:
+- Regular \`fetch(...)\` is available inside the sandbox and is routed through a host-side gateway.
+- To inject a saved secret into a request, use a placeholder string such as \`{{secret:cloudflareToken}}\` or \`{{secret:cloudflareToken|scope=user}}\` in the URL, headers, or request body.
+- Secret placeholders only work for hosts that the user has already approved for that secret.
+- If a request is blocked because the host is not approved, do not retry blindly. Ask the user whether they want to approve that host, then provide the approval link from the error message.
+- Saving or updating a secret does not authorize outbound use automatically. Host approval happens separately in the app.
+
+Secrets:
+- Never ask the user to paste secrets, tokens, API keys, passwords, OAuth codes, client secrets, or other credentials into chat. If a workflow needs a secret value that is not already stored, use generated UI to collect and save it instead.
+- Use \`await codemode.secret_list({})\` to inspect available secret metadata before building a request. The result is metadata only and does not reveal secret values.
+- Pass \`scope\` to narrow results, for example \`await codemode.secret_list({ scope: 'app' })\`.
+- Do not expect \`codemode.secret_get(...)\`, \`codemode.secret_require(...)\`, or any injected \`secrets\` helper to be available in execute-time code.
+
 Your code must be an async arrow function that returns the result.
 
 Examples:
@@ -97,11 +113,19 @@ export async function registerExecuteTool(agent: McpRegistrationAgent) {
 						'mcp.tool': 'execute',
 					},
 				},
-				async () => runCodemodeWithRegistry(env, callerContext, code),
+				async () =>
+					runCodemodeWithRegistry(
+						env,
+						callerContext,
+						code,
+						undefined,
+						agent.getLoopbackExports(),
+					),
 			)
 			const durationMs = Math.round(performance.now() - startedAt)
 
 			if (result.error) {
+				const errorDetails = getExecutionErrorDetails(result.error)
 				const { errorName, errorMessage } = errorFields(result.error)
 				logMcpEvent({
 					category: 'mcp',
@@ -126,6 +150,7 @@ export async function registerExecuteTool(agent: McpRegistrationAgent) {
 					],
 					structuredContent: {
 						error: result.error,
+						errorDetails,
 						logs: result.logs ?? [],
 					},
 					isError: true,
diff --git a/packages/worker/src/mcp/tools/open-generated-ui.ts b/packages/worker/src/mcp/tools/open-generated-ui.ts
index 8616e014a5..3dbd0b278f 100644
--- a/packages/worker/src/mcp/tools/open-generated-ui.ts
+++ b/packages/worker/src/mcp/tools/open-generated-ui.ts
@@ -20,11 +20,113 @@ Behavior:
 - The shell provides a tiny standard library on \`window.kodyWidget\` plus lightweight default styles for semantic HTML, forms, tables, buttons, and code blocks.
 - After rendering, the shell automatically reports the rendered widget size to the host via the standard MCP Apps \`ui/notifications/size-changed\` notification.
 - \`executeCode(code)\` runs server-side code through the generated UI session when available, keeping secret resolution on the server.
-- \`saveSecret({ name, value, description?, scope? })\`, \`listSecrets({ scope? })\`, and \`deleteSecret({ name, scope? })\` let the UI manage secret references without embedding raw values in generated code.
-- Secret metadata returned by the UI helpers includes \`created_at\`, \`updated_at\`, and \`ttl_ms\` when available so the UI can explain lifecycle and expiry.
+- \`saveSecret({ name, value, description?, scope? })\`, \`saveSecrets([...])\`, \`listSecrets({ scope? })\`, and \`deleteSecret({ name, scope? })\` let the UI manage secret references without embedding raw values in generated code.
+- Use generated UI whenever the user needs to enter a sensitive value. Do not ask the user to paste secrets, tokens, API keys, passwords, OAuth codes, or other credentials into chat.
+- Saving a secret does not authorize outbound use automatically. If generated code later needs to send that secret to a host, the agent must ask the user to approve that host through the app approval flow.
+- Secret metadata returned by the UI helpers includes \`allowed_hosts\`, \`created_at\`, \`updated_at\`, and \`ttl_ms\` when available so the UI can explain lifecycle, approval state, and expiry.
+- Prefer the higher-level helpers below for OAuth, form persistence, and secret-bearing requests instead of hand-rolling state handling or parsing raw approval-link errors.
+- If an OAuth flow needs a callback URL, do not rely on an ephemeral inline render. Persist the UI with \`ui_save_app\`, reopen it as a hosted saved app, and use that hosted URL as the provider callback/redirect target so the generated UI can receive and handle the callback on reload.
+- When the OAuth provider does not support dynamic client registration, the agent should tell the user the exact registration values to enter in the provider's app settings instead of vaguely saying "set up OAuth." At minimum, provide the exact callback/redirect URL, and include any other required values such as homepage URL, origin, or logout URL when that provider requires them.
 
 Mini standard library:
 \`\`\`ts
+type SecretScope = 'session' | 'app' | 'user'
+
+type SecretMetadata = {
+  name: string
+  scope: SecretScope
+  description: string
+  app_id: string | null
+  allowed_hosts: string[]
+  created_at: string
+  updated_at: string
+  ttl_ms: number | null
+}
+
+type SaveSecretInput = {
+  name: string
+  value: string
+  description?: string
+  scope?: SecretScope
+}
+
+type SaveSecretResult = {
+  ok: boolean
+  secret?: SecretMetadata
+  error?: string
+}
+
+type SaveSecretsResult = {
+  ok: boolean
+  results: Array<{
+    name: string
+    ok: boolean
+    secret?: SecretMetadata
+    error?: string
+  }>
+}
+
+type FetchWithSecretsSuccess = {
+  ok: true
+  status: number
+  headers: Record<string, string>
+  data: unknown
+  text: string | null
+}
+
+type FetchWithSecretsHttpError = {
+  ok: false
+  kind: 'http_error'
+  status: number
+  headers: Record<string, string>
+  data: unknown
+  text: string | null
+}
+
+type FetchWithSecretsApprovalError = {
+  ok: false
+  kind: 'host_approval_required'
+  approvalUrl: string | null
+  message: string
+  host: string | null
+  secretNames: string[]
+}
+
+type FetchWithSecretsExecutionError = {
+  ok: false
+  kind: 'execution_error'
+  message: string
+}
+
+type FetchWithSecretsResult =
+  | FetchWithSecretsSuccess
+  | FetchWithSecretsHttpError
+  | FetchWithSecretsApprovalError
+  | FetchWithSecretsExecutionError
+
+type OAuthCallbackResult =
+  | { kind: 'none' }
+  | {
+      kind: 'error'
+      error: string
+      errorDescription: string | null
+      callbackUrl: string
+    }
+  | {
+      kind: 'success'
+      code: string
+      state: string | null
+      callbackUrl: string
+      expectedState: string | null
+      stateMatches: boolean | null
+    }
+
+type SecretFormController = {
+  form: HTMLFormElement
+  save(): Promise<SaveSecretsResult>
+  destroy(): void
+}
+
 declare global {
   interface Window {
     kodyWidget: {
@@ -32,14 +134,94 @@ declare global {
       openLink(url: string): boolean
       toggleFullscreen(): Promise<'inline' | 'fullscreen' | 'pip' | null>
       executeCode(code: string): Promise<unknown>
-      saveSecret(input: { name: string; value: string; description?: string; scope?: 'session' | 'app' | 'user' }): Promise<{ ok: boolean; secret?: { name: string; scope: 'session' | 'app' | 'user'; description: string; app_id: string | null; created_at: string; updated_at: string; ttl_ms: number | null }; error?: string }>
-      listSecrets(input?: { scope?: 'session' | 'app' | 'user' }): Promise<Array<{ name: string; scope: 'session' | 'app' | 'user'; description: string; app_id: string | null; created_at: string; updated_at: string; ttl_ms: number | null }>>
-      deleteSecret(input: { name: string; scope?: 'session' | 'app' | 'user' }): Promise<{ ok: boolean; deleted?: boolean; error?: string }>
+      saveSecret(input: SaveSecretInput): Promise<SaveSecretResult>
+      saveSecrets(input: SaveSecretInput[]): Promise<SaveSecretsResult>
+      listSecrets(input?: { scope?: SecretScope }): Promise<SecretMetadata[]>
+      deleteSecret(input: { name: string; scope?: SecretScope }): Promise<{ ok: boolean; deleted?: boolean; error?: string }>
+
+      formToObject(form: HTMLFormElement | string): Record<string, FormDataEntryValue | FormDataEntryValue[]>
+      fillFromSearchParams(form: HTMLFormElement | string, mapping?: Record<string, string>): Record<string, FormDataEntryValue | FormDataEntryValue[]>
+      persistForm(form: HTMLFormElement | string, options: { storageKey: string; fields?: string[] }): Record<string, string | string[]>
+      restoreForm(form: HTMLFormElement | string, options: { storageKey: string }): Record<string, FormDataEntryValue | FormDataEntryValue[]> | null
+
+      buildSecretForm(input: {
+        form: HTMLFormElement | string
+        fields: Array<{
+          inputName: string
+          secretName: string
+          description?: string
+          scope?: SecretScope
+        }>
+        onSuccess?: (
+          result: SaveSecretsResult,
+          values: Record<string, FormDataEntryValue | FormDataEntryValue[]>
+        ) => void | Promise<void>
+        onError?: (
+          result: SaveSecretsResult,
+          values: Record<string, FormDataEntryValue | FormDataEntryValue[]>
+        ) => void | Promise<void>
+      }): SecretFormController
+
+      createOAuthState(key: string): string
+      getOAuthState(key: string): string | null
+      clearOAuthState(key: string): void
+      validateOAuthCallbackState(input: {
+        key: string
+        returnedState: string | null | undefined
+      }): {
+        valid: boolean
+        expectedState: string | null
+        returnedState: string | null
+      }
+      readOAuthCallback(input?: {
+        url?: string
+        expectedStateKey?: string
+      }): OAuthCallbackResult
+
+      fetchWithSecrets(input: {
+        url: string
+        method?: string
+        headers?: Record<string, string>
+        body?: string | Record<string, unknown> | unknown[] | null
+      }): Promise<FetchWithSecretsResult>
+      exchangeOAuthCode(input: {
+        tokenUrl: string
+        code: string
+        redirectUri: string
+        clientIdSecretName: string
+        clientSecretSecretName: string
+        scope?: SecretScope
+        extraParams?: Record<string, string | number | boolean>
+      }): Promise<FetchWithSecretsResult>
+      saveOAuthTokens(input: {
+        payload: Record<string, unknown>
+        accessTokenSecretName: string
+        refreshTokenSecretName?: string
+        scope?: SecretScope
+        accessTokenDescription?: string
+        refreshTokenDescription?: string
+      }): Promise<{
+        ok: boolean
+        accessTokenSaved: boolean
+        refreshTokenSaved: boolean
+        error?: string
+        results: SaveSecretsResult['results']
+      }>
     }
   }
 }
 \`\`\`
 
+How to use the helpers:
+- Use \`saveSecrets([...])\` when a form collects multiple credentials such as client ID + client secret.
+- Use \`buildSecretForm(...)\` when a normal HTML form should save one or more fields as secrets on submit.
+- \`formToObject(...)\` returns one value per field name by default. If the same field name appears multiple times, it returns an array from \`FormData.getAll(...)\` for that key instead of dropping repeated values.
+- Use \`createOAuthState(...)\`, \`readOAuthCallback(...)\`, and \`validateOAuthCallbackState(...)\` for hosted OAuth pages instead of hand-rolling state storage and callback parsing.
+- If the OAuth flow requires a browser callback, save the UI first and use the hosted saved-app URL as the callback target. Inline ephemeral UIs are not sufficient for provider callbacks that must return to a stable URL.
+- Use \`exchangeOAuthCode(...)\` for OAuth token exchanges that should run through server-side \`execute\` with secret placeholders.
+- Use \`saveOAuthTokens(...)\` right after a successful token exchange to persist \`access_token\` and optional \`refresh_token\` under explicit secret names.
+- Use \`fetchWithSecrets(...)\` when the UI needs to make a secret-bearing outbound request and handle approval-required failures in a structured way. If it returns \`kind: 'host_approval_required'\`, show the approval link and retry only after the user approves it in the account admin UI.
+
 Theme tokens:
 - \`--color-bg\`, \`--color-surface\`, \`--color-fg\`, \`--color-muted\`
 - \`--color-border\`, \`--color-accent\`, \`--color-accent-contrast\`
@@ -55,15 +237,39 @@ Example:
 <script>
   document.querySelector('form')?.addEventListener('submit', async (event) => {
     event.preventDefault()
-    await window.kodyWidget.saveSecret({
-      name: 'cloudflareToken',
-      value: '...',
-      description: 'Cloudflare API token for this app',
-      scope: 'app',
+    const saveResult = await window.kodyWidget.saveSecrets([
+      {
+        name: 'github-oauth-client-id',
+        value: '...',
+        description: 'GitHub OAuth client ID',
+        scope: 'user',
+      },
+      {
+        name: 'github-oauth-client-secret',
+        value: '...',
+        description: 'GitHub OAuth client secret',
+        scope: 'user',
+      },
+    ])
+    if (!saveResult.ok) return
+
+    const state = window.kodyWidget.createOAuthState('github-oauth')
+    const tokenResult = await window.kodyWidget.exchangeOAuthCode({
+      tokenUrl: 'https://github.com/login/oauth/access_token',
+      code: '...',
+      redirectUri: 'https://example.com/callback',
+      clientIdSecretName: 'github-oauth-client-id',
+      clientSecretSecretName: 'github-oauth-client-secret',
+      scope: 'user',
     })
-    const result = await window.kodyWidget.executeCode(\`async () => { ... }\`)
-    window.kodyWidget.sendMessage(\`Done: ...\`)
-    ...
+    if (tokenResult.ok) {
+      await window.kodyWidget.saveOAuthTokens({
+        payload: tokenResult.data as Record<string, unknown>,
+        accessTokenSecretName: 'github-access-token',
+        refreshTokenSecretName: 'github-refresh-token',
+        scope: 'user',
+      })
+    }
   })
 </script>
 \`\`\`
diff --git a/packages/worker/src/mcp/tools/search.ts b/packages/worker/src/mcp/tools/search.ts
index fc9cc8b165..b09b22092f 100644
--- a/packages/worker/src/mcp/tools/search.ts
+++ b/packages/worker/src/mcp/tools/search.ts
@@ -46,7 +46,7 @@ const searchTool = {
 	description: `
 Search Kody **builtin capabilities**, your saved **skills** (meta domain), your saved **apps** (apps domain), and your reusable **user secret references** by natural language before calling \`execute\` or opening a UI.
 
-Each match has **type** \`capability\`, \`skill\`, \`app\`, or \`secret\`. To run a saved skill, call \`meta_run_skill\` with the \`skill_id\` and optional \`params\`. If you need to inspect the code, call \`meta_get_skill\` and then pass its code to \`execute\`. To reopen a saved app, call \`open_generated_ui\` with the \`app_id\`. User-scoped secret references never include raw secret values and can be resolved during execution via the \`secrets\` helper. App-bound secrets are attached to their corresponding app results rather than returned as standalone secret hits.
+Each match has **type** \`capability\`, \`skill\`, \`app\`, or \`secret\`. To run a saved skill, call \`meta_run_skill\` with the \`skill_id\` and optional \`params\`. If you need to inspect the code, call \`meta_get_skill\` and then pass its code to \`execute\`. To reopen a saved app, call \`open_generated_ui\` with the \`app_id\`. User-scoped secret references never include raw secret values; inspect secret metadata during execution with \`codemode.secret_list(...)\`, and use generated UI when the user needs to provide a missing secret. App-bound secrets are attached to their corresponding app results rather than returned as standalone secret hits.
 
 If search results seem incomplete, call \`meta_list_capabilities\` to inspect the exact current runtime capability registry (including dynamic capabilities such as connected home tools), or call \`meta_get_home_connector_status\` to confirm whether the home connector is connected.
 
diff --git a/packages/worker/src/test-support/cloudflare-workers-stub.ts b/packages/worker/src/test-support/cloudflare-workers-stub.ts
index 08b9ba6677..4f9912714b 100644
--- a/packages/worker/src/test-support/cloudflare-workers-stub.ts
+++ b/packages/worker/src/test-support/cloudflare-workers-stub.ts
@@ -8,4 +8,20 @@ export class DurableObject<TEnv = unknown> {
 	}
 }
 
+export class WorkerEntrypoint<TEnv = unknown, TProps = unknown> {
+	protected readonly ctx: { props: TProps }
+	protected readonly env: TEnv
+
+	constructor(ctx: { props: TProps }, env: TEnv) {
+		this.ctx = ctx
+		this.env = env
+	}
+}
+
 export class RpcTarget {}
+
+export const exports = {
+	CodemodeFetchGateway() {
+		return async (request: Request) => fetch(request)
+	},
+} satisfies Record<string, unknown>