From 210a4fcb1103c21d137532f36866c2eca5e7394c Mon Sep 17 00:00:00 2001
From: Steve James <sjames@cloudflare.com>
Date: Tue, 24 Feb 2026 19:42:31 +0100
Subject: [PATCH 1/6] add style option to ui

---
 gateway/package-lock.json                   | 1556 ++++++++++++++++++-
 gateway/package.json                        |    1 +
 gateway/src/session/do.ts                   |   17 +-
 gateway/ui/src/react/App.tsx                |  204 +--
 gateway/ui/src/react/components/OsShell.tsx |  784 ++++++++++
 gateway/ui/src/react/tabViews.tsx           |  106 ++
 gateway/ui/src/styles.css                   |    1 +
 gateway/ui/src/styles/os-shell.css          |  447 ++++++
 8 files changed, 2998 insertions(+), 118 deletions(-)
 create mode 100644 gateway/ui/src/react/components/OsShell.tsx
 create mode 100644 gateway/ui/src/react/tabViews.tsx
 create mode 100644 gateway/ui/src/styles/os-shell.css

diff --git a/gateway/package-lock.json b/gateway/package-lock.json
index 977c432..4bf8d00 100644
--- a/gateway/package-lock.json
+++ b/gateway/package-lock.json
@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@clack/prompts": "^1.0.0",
 				"@mariozechner/pi-ai": "^0.54.0",
+				"agents": "^0.5.1",
 				"picocolors": "^1.1.1",
 				"ws": "^8.19.0"
 			},
@@ -23,6 +24,55 @@
 				"wrangler": "^4.61.1"
 			}
 		},
+		"node_modules/@ai-sdk/gateway": {
+			"version": "3.0.53",
+			"resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-3.0.53.tgz",
+			"integrity": "sha512-QT3FEoNARMRlk8JJVR7L98exiK9C8AGfrEJVbRxBT1yIXKs/N19o/+PsjTRVsARgDJNcy9JbJp1FspKucEat0Q==",
+			"license": "Apache-2.0",
+			"peer": true,
+			"dependencies": {
+				"@ai-sdk/provider": "3.0.8",
+				"@ai-sdk/provider-utils": "4.0.15",
+				"@vercel/oidc": "3.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"zod": "^3.25.76 || ^4.1.8"
+			}
+		},
+		"node_modules/@ai-sdk/provider": {
+			"version": "3.0.8",
+			"resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-3.0.8.tgz",
+			"integrity": "sha512-oGMAgGoQdBXbZqNG0Ze56CHjDZ1IDYOwGYxYjO5KLSlz5HiNQ9udIXsPZ61VWaHGZ5XW/jyjmr6t2xz2jGVwbQ==",
+			"license": "Apache-2.0",
+			"peer": true,
+			"dependencies": {
+				"json-schema": "^0.4.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@ai-sdk/provider-utils": {
+			"version": "4.0.15",
+			"resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-4.0.15.tgz",
+			"integrity": "sha512-8XiKWbemmCbvNN0CLR9u3PQiet4gtEVIrX4zzLxnCj06AwsEDJwJVBbKrEI4t6qE8XRSIvU2irka0dcpziKW6w==",
+			"license": "Apache-2.0",
+			"peer": true,
+			"dependencies": {
+				"@ai-sdk/provider": "3.0.8",
+				"@standard-schema/spec": "^1.1.0",
+				"eventsource-parser": "^3.0.6"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"zod": "^3.25.76 || ^4.1.8"
+			}
+		},
 		"node_modules/@anthropic-ai/sdk": {
 			"version": "0.73.0",
 			"resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.73.0.tgz",
@@ -43,6 +93,23 @@
 				}
 			}
 		},
+		"node_modules/@apidevtools/json-schema-ref-parser": {
+			"version": "11.9.3",
+			"resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-11.9.3.tgz",
+			"integrity": "sha512-60vepv88RwcJtSHrD6MjIL6Ta3SOYbgfnkHb+ppAVK+o9mXprRtulx7VlRl3lN3bbvysAfCS7WMVfhUYemB0IQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@jsdevtools/ono": "^7.1.3",
+				"@types/json-schema": "^7.0.15",
+				"js-yaml": "^4.1.0"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/philsturgeon"
+			}
+		},
 		"node_modules/@aws-crypto/crc32": {
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/@aws-crypto/crc32/-/crc32-5.2.0.tgz",
@@ -1125,6 +1192,24 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@babel/runtime-corejs3": {
+			"version": "7.29.0",
+			"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.29.0.tgz",
+			"integrity": "sha512-TgUkdp71C9pIbBcHudc+gXZnihEDOjUAmXO1VO4HHGES7QLZcShR0stfKIxLSNIYx2fqhmJChOjm/wkF8wv4gA==",
+			"license": "MIT",
+			"dependencies": {
+				"core-js-pure": "^3.48.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@cfworker/json-schema": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/@cfworker/json-schema/-/json-schema-4.1.1.tgz",
+			"integrity": "sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og==",
+			"license": "MIT"
+		},
 		"node_modules/@clack/core": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@clack/core/-/core-1.0.0.tgz",
@@ -2421,7 +2506,6 @@
 			"version": "4.20260131.0",
 			"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20260131.0.tgz",
 			"integrity": "sha512-ELgvb2mp68Al50p+FmpgCO2hgU5o4tmz8pi7kShN+cRXc0UZoEdxpDIikR0CeT7b3tV7wlnEnsUzd0UoJLS0oQ==",
-			"dev": true,
 			"license": "MIT OR Apache-2.0"
 		},
 		"node_modules/@cspotcode/source-map-support": {
@@ -2913,6 +2997,18 @@
 				}
 			}
 		},
+		"node_modules/@hono/node-server": {
+			"version": "1.19.9",
+			"resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.9.tgz",
+			"integrity": "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.14.1"
+			},
+			"peerDependencies": {
+				"hono": "^4"
+			}
+		},
 		"node_modules/@iarna/toml": {
 			"version": "2.2.5",
 			"resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
@@ -3455,6 +3551,12 @@
 				"@jridgewell/sourcemap-codec": "^1.4.10"
 			}
 		},
+		"node_modules/@jsdevtools/ono": {
+			"version": "7.1.3",
+			"resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
+			"integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
+			"license": "MIT"
+		},
 		"node_modules/@mariozechner/pi-ai": {
 			"version": "0.54.0",
 			"resolved": "https://registry.npmjs.org/@mariozechner/pi-ai/-/pi-ai-0.54.0.tgz",
@@ -3509,6 +3611,46 @@
 				"url": "https://github.com/sponsors/colinhacks"
 			}
 		},
+		"node_modules/@modelcontextprotocol/sdk": {
+			"version": "1.26.0",
+			"resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.26.0.tgz",
+			"integrity": "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==",
+			"license": "MIT",
+			"dependencies": {
+				"@hono/node-server": "^1.19.9",
+				"ajv": "^8.17.1",
+				"ajv-formats": "^3.0.1",
+				"content-type": "^1.0.5",
+				"cors": "^2.8.5",
+				"cross-spawn": "^7.0.5",
+				"eventsource": "^3.0.2",
+				"eventsource-parser": "^3.0.0",
+				"express": "^5.2.1",
+				"express-rate-limit": "^8.2.1",
+				"hono": "^4.11.4",
+				"jose": "^6.1.3",
+				"json-schema-typed": "^8.0.2",
+				"pkce-challenge": "^5.0.0",
+				"raw-body": "^3.0.0",
+				"zod": "^3.25 || ^4.0",
+				"zod-to-json-schema": "^3.25.1"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@cfworker/json-schema": "^4.1.1",
+				"zod": "^3.25 || ^4.0"
+			},
+			"peerDependenciesMeta": {
+				"@cfworker/json-schema": {
+					"optional": true
+				},
+				"zod": {
+					"optional": false
+				}
+			}
+		},
 		"node_modules/@octokit/auth-token": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-5.1.2.tgz",
@@ -3709,6 +3851,16 @@
 				"@octokit/openapi-types": "^25.1.0"
 			}
 		},
+		"node_modules/@opentelemetry/api": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
+			"integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
+			"license": "Apache-2.0",
+			"peer": true,
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
 		"node_modules/@pkgjs/parseargs": {
 			"version": "0.11.0",
 			"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -4858,6 +5010,13 @@
 			"dev": true,
 			"license": "CC0-1.0"
 		},
+		"node_modules/@standard-schema/spec": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+			"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+			"license": "MIT",
+			"peer": true
+		},
 		"node_modules/@tootallnate/quickjs-emscripten": {
 			"version": "0.23.0",
 			"resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
@@ -4899,6 +5058,18 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/json-schema": {
+			"version": "7.0.15",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+			"license": "MIT"
+		},
+		"node_modules/@types/lodash": {
+			"version": "4.17.24",
+			"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
+			"integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
+			"license": "MIT"
+		},
 		"node_modules/@types/node": {
 			"version": "25.2.0",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.0.tgz",
@@ -4908,6 +5079,16 @@
 				"undici-types": "~7.16.0"
 			}
 		},
+		"node_modules/@vercel/oidc": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@vercel/oidc/-/oidc-3.1.0.tgz",
+			"integrity": "sha512-Fw28YZpRnA3cAHHDlkt7xQHiJ0fcL+NRcIqsocZQUSmbzeIKRpwttJjik5ZGanXP+vlA4SbTg+AbA3bP363l+w==",
+			"license": "Apache-2.0",
+			"peer": true,
+			"engines": {
+				"node": ">= 20"
+			}
+		},
 		"node_modules/@vitest/expect": {
 			"version": "3.2.4",
 			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
@@ -5023,6 +5204,19 @@
 				"url": "https://opencollective.com/vitest"
 			}
 		},
+		"node_modules/accepts": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+			"integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+			"license": "MIT",
+			"dependencies": {
+				"mime-types": "^3.0.0",
+				"negotiator": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/acorn": {
 			"version": "8.14.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
@@ -5055,6 +5249,99 @@
 				"node": ">= 14"
 			}
 		},
+		"node_modules/agents": {
+			"version": "0.5.1",
+			"resolved": "https://registry.npmjs.org/agents/-/agents-0.5.1.tgz",
+			"integrity": "sha512-Rx7KXpArykLdsPcSzNGtF3uARrQsn9DY5hDGqD9Pl3FrK/aZ6Z6svXb5FhGZPOapXMgf+DyEDY/NPPHNsVLNag==",
+			"license": "MIT",
+			"dependencies": {
+				"@cfworker/json-schema": "^4.1.1",
+				"@modelcontextprotocol/sdk": "1.26.0",
+				"cron-schedule": "^6.0.0",
+				"json-schema": "^0.4.0",
+				"json-schema-to-typescript": "^15.0.4",
+				"mimetext": "^3.0.28",
+				"nanoid": "^5.1.6",
+				"partyserver": "^0.2.0",
+				"partysocket": "1.1.14",
+				"yargs": "^18.0.0"
+			},
+			"bin": {
+				"agents": "dist/cli/index.js"
+			},
+			"peerDependencies": {
+				"@ai-sdk/openai": "^3.0.0",
+				"@ai-sdk/react": "^3.0.0",
+				"@cloudflare/ai-chat": "^0.1.3",
+				"@cloudflare/codemode": "^0.1.0",
+				"@x402/core": "^2.0.0",
+				"@x402/evm": "^2.0.0",
+				"ai": "^6.0.0",
+				"react": "^19.0.0",
+				"viem": ">=2.0.0",
+				"zod": "^3.25.0 || ^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@ai-sdk/openai": {
+					"optional": true
+				},
+				"@ai-sdk/react": {
+					"optional": true
+				},
+				"@cloudflare/ai-chat": {
+					"optional": true
+				},
+				"@cloudflare/codemode": {
+					"optional": true
+				},
+				"@x402/core": {
+					"optional": true
+				},
+				"@x402/evm": {
+					"optional": true
+				},
+				"viem": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/agents/node_modules/nanoid": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
+			"integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^18 || >=20"
+			}
+		},
+		"node_modules/ai": {
+			"version": "6.0.97",
+			"resolved": "https://registry.npmjs.org/ai/-/ai-6.0.97.tgz",
+			"integrity": "sha512-eZIAcBymwGhBwncRH/v9pillZNMeRCDkc4BwcvwXerXd7sxjVxRis3ZNCNCpP02pVH4NLs81ljm4cElC4vbNcQ==",
+			"license": "Apache-2.0",
+			"peer": true,
+			"dependencies": {
+				"@ai-sdk/gateway": "3.0.53",
+				"@ai-sdk/provider": "3.0.8",
+				"@ai-sdk/provider-utils": "4.0.15",
+				"@opentelemetry/api": "1.9.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"zod": "^3.25.76 || ^4.1.8"
+			}
+		},
 		"node_modules/ajv": {
 			"version": "8.17.1",
 			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
@@ -5740,6 +6027,12 @@
 				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
 			}
 		},
+		"node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+			"license": "Python-2.0"
+		},
 		"node_modules/assertion-error": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -5837,6 +6130,30 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/body-parser": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+			"integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+			"license": "MIT",
+			"dependencies": {
+				"bytes": "^3.1.2",
+				"content-type": "^1.0.5",
+				"debug": "^4.4.3",
+				"http-errors": "^2.0.0",
+				"iconv-lite": "^0.7.0",
+				"on-finished": "^2.4.1",
+				"qs": "^6.14.1",
+				"raw-body": "^3.0.1",
+				"type-is": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/bowser": {
 			"version": "2.13.1",
 			"resolved": "https://registry.npmjs.org/bowser/-/bowser-2.13.1.tgz",
@@ -5884,6 +6201,15 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/bytes": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/cac": {
 			"version": "6.7.14",
 			"resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -5894,6 +6220,35 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/call-bind-apply-helpers": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+			"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/call-bound": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+			"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+			"license": "MIT",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.2",
+				"get-intrinsic": "^1.3.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/chai": {
 			"version": "5.3.3",
 			"resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
@@ -5940,6 +6295,60 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/cliui": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
+			"integrity": "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==",
+			"license": "ISC",
+			"dependencies": {
+				"string-width": "^7.2.0",
+				"strip-ansi": "^7.1.0",
+				"wrap-ansi": "^9.0.0"
+			},
+			"engines": {
+				"node": ">=20"
+			}
+		},
+		"node_modules/cliui/node_modules/emoji-regex": {
+			"version": "10.6.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+			"integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+			"license": "MIT"
+		},
+		"node_modules/cliui/node_modules/string-width": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+			"integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^10.3.0",
+				"get-east-asian-width": "^1.0.0",
+				"strip-ansi": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/cliui/node_modules/wrap-ansi": {
+			"version": "9.0.2",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+			"integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^6.2.1",
+				"string-width": "^7.0.0",
+				"strip-ansi": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
 		"node_modules/color": {
 			"version": "4.2.3",
 			"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -5993,6 +6402,28 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/content-disposition": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+			"integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/content-type": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+			"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/cookie": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
@@ -6007,6 +6438,26 @@
 				"url": "https://opencollective.com/express"
 			}
 		},
+		"node_modules/cookie-signature": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+			"integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.6.0"
+			}
+		},
+		"node_modules/core-js-pure": {
+			"version": "3.48.0",
+			"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.48.0.tgz",
+			"integrity": "sha512-1slJgk89tWC51HQ1AEqG+s2VuwpTRr8ocu4n20QUcH1v9lAN0RXen0Q0AABa/DK1I7RrNWLucplOHMx8hfTGTw==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
 		"node_modules/core-util-is": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -6014,6 +6465,32 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/cors": {
+			"version": "2.8.6",
+			"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+			"integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+			"license": "MIT",
+			"dependencies": {
+				"object-assign": "^4",
+				"vary": "^1"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/cron-schedule": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/cron-schedule/-/cron-schedule-6.0.0.tgz",
+			"integrity": "sha512-BoZaseYGXOo5j5HUwTaegIog3JJbuH4BbrY9A1ArLjXpy+RWb3mV28F/9Gv1dDA7E2L8kngWva4NWisnLTyfgQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=20"
+			}
+		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.6",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -6128,10 +6605,19 @@
 				"node": ">= 14"
 			}
 		},
-		"node_modules/detect-libc": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
-			"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+		"node_modules/depd": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/detect-libc": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+			"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
 			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
@@ -6271,6 +6757,20 @@
 				}
 			}
 		},
+		"node_modules/dunder-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+			"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+			"license": "MIT",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"gopd": "^1.2.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/eastasianwidth": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -6286,12 +6786,27 @@
 				"safe-buffer": "^5.0.1"
 			}
 		},
+		"node_modules/ee-first": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+			"license": "MIT"
+		},
 		"node_modules/emoji-regex": {
 			"version": "9.2.2",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
 			"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
 			"license": "MIT"
 		},
+		"node_modules/encodeurl": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+			"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/env-paths": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz",
@@ -6315,6 +6830,24 @@
 				"url": "https://github.com/sponsors/antfu"
 			}
 		},
+		"node_modules/es-define-property": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+			"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-errors": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+			"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/es-module-lexer": {
 			"version": "1.7.0",
 			"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
@@ -6322,6 +6855,18 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/es-object-atoms": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+			"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/esbuild": {
 			"version": "0.27.0",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.0.tgz",
@@ -6364,6 +6909,21 @@
 				"@esbuild/win32-x64": "0.27.0"
 			}
 		},
+		"node_modules/escalade": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+			"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/escape-html": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+			"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+			"license": "MIT"
+		},
 		"node_modules/escodegen": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
@@ -6426,6 +6986,42 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/etag": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+			"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/event-target-polyfill": {
+			"version": "0.0.4",
+			"resolved": "https://registry.npmjs.org/event-target-polyfill/-/event-target-polyfill-0.0.4.tgz",
+			"integrity": "sha512-Gs6RLjzlLRdT8X9ZipJdIZI/Y6/HhRLyq9RdDlCsnpxr/+Nn6bU2EFGuC94GjxqhM+Nmij2Vcq98yoHrU8uNFQ==",
+			"license": "MIT"
+		},
+		"node_modules/eventsource": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
+			"integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
+			"license": "MIT",
+			"dependencies": {
+				"eventsource-parser": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/eventsource-parser": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
+			"integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
 		"node_modules/execa": {
 			"version": "9.6.1",
 			"resolved": "https://registry.npmjs.org/execa/-/execa-9.6.1.tgz",
@@ -6476,6 +7072,85 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/express": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+			"integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+			"license": "MIT",
+			"dependencies": {
+				"accepts": "^2.0.0",
+				"body-parser": "^2.2.1",
+				"content-disposition": "^1.0.0",
+				"content-type": "^1.0.5",
+				"cookie": "^0.7.1",
+				"cookie-signature": "^1.2.1",
+				"debug": "^4.4.0",
+				"depd": "^2.0.0",
+				"encodeurl": "^2.0.0",
+				"escape-html": "^1.0.3",
+				"etag": "^1.8.1",
+				"finalhandler": "^2.1.0",
+				"fresh": "^2.0.0",
+				"http-errors": "^2.0.0",
+				"merge-descriptors": "^2.0.0",
+				"mime-types": "^3.0.0",
+				"on-finished": "^2.4.1",
+				"once": "^1.4.0",
+				"parseurl": "^1.3.3",
+				"proxy-addr": "^2.0.7",
+				"qs": "^6.14.0",
+				"range-parser": "^1.2.1",
+				"router": "^2.2.0",
+				"send": "^1.1.0",
+				"serve-static": "^2.2.0",
+				"statuses": "^2.0.1",
+				"type-is": "^2.0.1",
+				"vary": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/express-rate-limit": {
+			"version": "8.2.1",
+			"resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz",
+			"integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==",
+			"license": "MIT",
+			"dependencies": {
+				"ip-address": "10.0.1"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/express-rate-limit"
+			},
+			"peerDependencies": {
+				"express": ">= 4.11"
+			}
+		},
+		"node_modules/express-rate-limit/node_modules/ip-address": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
+			"integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/express/node_modules/cookie": {
+			"version": "0.7.2",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+			"integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/exsolve": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
@@ -6557,7 +7232,6 @@
 			"version": "6.5.0",
 			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
 			"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=12.0.0"
@@ -6610,6 +7284,27 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/finalhandler": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+			"integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.4.0",
+				"encodeurl": "^2.0.0",
+				"escape-html": "^1.0.3",
+				"on-finished": "^2.4.1",
+				"parseurl": "^1.3.3",
+				"statuses": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/find-process": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/find-process/-/find-process-2.0.0.tgz",
@@ -6699,6 +7394,24 @@
 				"node": ">=12.20.0"
 			}
 		},
+		"node_modules/forwarded": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+			"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/fresh": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+			"integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/fsevents": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -6714,6 +7427,15 @@
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
+		"node_modules/function-bind": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/gaxios": {
 			"version": "7.1.3",
 			"resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.1.3.tgz",
@@ -6743,6 +7465,64 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/get-caller-file": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+			"license": "ISC",
+			"engines": {
+				"node": "6.* || 8.* || >= 10.*"
+			}
+		},
+		"node_modules/get-east-asian-width": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.5.0.tgz",
+			"integrity": "sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/get-intrinsic": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+			"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+			"license": "MIT",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.2",
+				"es-define-property": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"es-object-atoms": "^1.1.1",
+				"function-bind": "^1.1.2",
+				"get-proto": "^1.0.1",
+				"gopd": "^1.2.0",
+				"has-symbols": "^1.1.0",
+				"hasown": "^2.0.2",
+				"math-intrinsics": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/get-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+			"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+			"license": "MIT",
+			"dependencies": {
+				"dunder-proto": "^1.0.1",
+				"es-object-atoms": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/get-stream": {
 			"version": "9.0.1",
 			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz",
@@ -6850,6 +7630,18 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/gopd": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+			"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/graceful-fs": {
 			"version": "4.2.11",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -6880,6 +7672,59 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/has-symbols": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+			"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/hasown": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+			"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+			"license": "MIT",
+			"dependencies": {
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/hono": {
+			"version": "4.12.2",
+			"resolved": "https://registry.npmjs.org/hono/-/hono-4.12.2.tgz",
+			"integrity": "sha512-gJnaDHXKDayjt8ue0n8Gs0A007yKXj4Xzb8+cNjZeYsSzzwKc0Lr+OZgYwVfB0pHfUs17EPoLvrOsEaJ9mj+Tg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=16.9.0"
+			}
+		},
+		"node_modules/http-errors": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+			"integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+			"license": "MIT",
+			"dependencies": {
+				"depd": "~2.0.0",
+				"inherits": "~2.0.4",
+				"setprototypeof": "~1.2.0",
+				"statuses": "~2.0.2",
+				"toidentifier": "~1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/http-proxy-agent": {
 			"version": "7.0.2",
 			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -6916,6 +7761,22 @@
 				"node": ">=18.18.0"
 			}
 		},
+		"node_modules/iconv-lite": {
+			"version": "0.7.2",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+			"integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/immediate": {
 			"version": "3.0.6",
 			"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
@@ -6927,7 +7788,6 @@
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
 			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/ip-address": {
@@ -6939,6 +7799,15 @@
 				"node": ">= 12"
 			}
 		},
+		"node_modules/ipaddr.js": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+			"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
 		"node_modules/is-arrayish": {
 			"version": "0.3.4",
 			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
@@ -6962,6 +7831,15 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/is-extglob": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/is-fullwidth-code-point": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -6971,6 +7849,18 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/is-glob": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+			"license": "MIT",
+			"dependencies": {
+				"is-extglob": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/is-inside-container": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -7015,6 +7905,12 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/is-promise": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+			"integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+			"license": "MIT"
+		},
 		"node_modules/is-stream": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz",
@@ -7085,6 +7981,21 @@
 				"@pkgjs/parseargs": "^0.11.0"
 			}
 		},
+		"node_modules/jose": {
+			"version": "6.1.3",
+			"resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz",
+			"integrity": "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/panva"
+			}
+		},
+		"node_modules/js-base64": {
+			"version": "3.7.8",
+			"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.8.tgz",
+			"integrity": "sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==",
+			"license": "BSD-3-Clause"
+		},
 		"node_modules/js-tokens": {
 			"version": "9.0.1",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
@@ -7092,6 +8003,18 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/js-yaml": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+			"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+			"license": "MIT",
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
 		"node_modules/json-bigint": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
@@ -7101,6 +8024,12 @@
 				"bignumber.js": "^9.0.0"
 			}
 		},
+		"node_modules/json-schema": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+			"integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+			"license": "(AFL-2.1 OR BSD-3-Clause)"
+		},
 		"node_modules/json-schema-to-ts": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/json-schema-to-ts/-/json-schema-to-ts-3.1.1.tgz",
@@ -7114,12 +8043,41 @@
 				"node": ">=16"
 			}
 		},
+		"node_modules/json-schema-to-typescript": {
+			"version": "15.0.4",
+			"resolved": "https://registry.npmjs.org/json-schema-to-typescript/-/json-schema-to-typescript-15.0.4.tgz",
+			"integrity": "sha512-Su9oK8DR4xCmDsLlyvadkXzX6+GGXJpbhwoLtOGArAG61dvbW4YQmSEno2y66ahpIdmLMg6YUf/QHLgiwvkrHQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@apidevtools/json-schema-ref-parser": "^11.5.5",
+				"@types/json-schema": "^7.0.15",
+				"@types/lodash": "^4.17.7",
+				"is-glob": "^4.0.3",
+				"js-yaml": "^4.1.0",
+				"lodash": "^4.17.21",
+				"minimist": "^1.2.8",
+				"prettier": "^3.2.5",
+				"tinyglobby": "^0.2.9"
+			},
+			"bin": {
+				"json2ts": "dist/src/cli.js"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
 		"node_modules/json-schema-traverse": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
 			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
 			"license": "MIT"
 		},
+		"node_modules/json-schema-typed": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-8.0.2.tgz",
+			"integrity": "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==",
+			"license": "BSD-2-Clause"
+		},
 		"node_modules/jszip": {
 			"version": "3.10.1",
 			"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
@@ -7191,6 +8149,12 @@
 				"immediate": "~3.0.5"
 			}
 		},
+		"node_modules/lodash": {
+			"version": "4.17.23",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+			"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+			"license": "MIT"
+		},
 		"node_modules/loglevel": {
 			"version": "1.9.2",
 			"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
@@ -7233,21 +8197,113 @@
 			"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
 			"dev": true,
 			"license": "MIT",
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.5.5"
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.5.5"
+			}
+		},
+		"node_modules/math-intrinsics": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+			"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/media-typer": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+			"integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/merge-descriptors": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+			"integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/mime": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
+			"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"mime": "cli.js"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/mime-db": {
+			"version": "1.54.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+			"integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+			"integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+			"license": "MIT",
+			"dependencies": {
+				"mime-db": "^1.54.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/mimetext": {
+			"version": "3.0.28",
+			"resolved": "https://registry.npmjs.org/mimetext/-/mimetext-3.0.28.tgz",
+			"integrity": "sha512-eQXpbNrtxLCjUtiVbR/qR09dbPgZ2o+KR1uA7QKqGhbn8QV7HIL16mXXsobBL4/8TqoYh1us31kfz+dNfCev9g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.26.0",
+				"@babel/runtime-corejs3": "^7.26.0",
+				"js-base64": "^3.7.7",
+				"mime-types": "^2.1.35"
+			},
+			"funding": {
+				"type": "patreon",
+				"url": "https://patreon.com/muratgozel"
+			}
+		},
+		"node_modules/mimetext/node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
 			}
 		},
-		"node_modules/mime": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
-			"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-			"dev": true,
+		"node_modules/mimetext/node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
 			"license": "MIT",
-			"bin": {
-				"mime": "cli.js"
+			"dependencies": {
+				"mime-db": "1.52.0"
 			},
 			"engines": {
-				"node": ">=10.0.0"
+				"node": ">= 0.6"
 			}
 		},
 		"node_modules/miniflare": {
@@ -7308,6 +8364,15 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
+		"node_modules/minimist": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/minipass": {
 			"version": "7.1.2",
 			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -7342,6 +8407,15 @@
 				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 			}
 		},
+		"node_modules/negotiator": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+			"integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/netmask": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
@@ -7432,6 +8506,27 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/object-assign": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/object-inspect": {
+			"version": "1.13.4",
+			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+			"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/ohash": {
 			"version": "2.0.11",
 			"resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
@@ -7439,6 +8534,27 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/on-finished": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+			"license": "MIT",
+			"dependencies": {
+				"ee-first": "1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/once": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+			"license": "ISC",
+			"dependencies": {
+				"wrappy": "1"
+			}
+		},
 		"node_modules/open": {
 			"version": "10.2.0",
 			"resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
@@ -7559,12 +8675,60 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/parseurl": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+			"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/partial-json": {
 			"version": "0.1.7",
 			"resolved": "https://registry.npmjs.org/partial-json/-/partial-json-0.1.7.tgz",
 			"integrity": "sha512-Njv/59hHaokb/hRUjce3Hdv12wd60MtM9Z5Olmn+nehe0QDAsRtRbJPvJ0Z91TusF0SuZRIvnM+S4l6EIP8leA==",
 			"license": "MIT"
 		},
+		"node_modules/partyserver": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/partyserver/-/partyserver-0.2.0.tgz",
+			"integrity": "sha512-yjaReXbTjMIH0zzWshtA3Um+A3BGYYRZWg0AzTzCIlxL4oDLLf/1og9xhhm1lAMFe52uej8QEwJzACnCy9s5ww==",
+			"license": "ISC",
+			"dependencies": {
+				"nanoid": "^5.1.6"
+			},
+			"peerDependencies": {
+				"@cloudflare/workers-types": "^4.20240729.0"
+			}
+		},
+		"node_modules/partyserver/node_modules/nanoid": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
+			"integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^18 || >=20"
+			}
+		},
+		"node_modules/partysocket": {
+			"version": "1.1.14",
+			"resolved": "https://registry.npmjs.org/partysocket/-/partysocket-1.1.14.tgz",
+			"integrity": "sha512-QcmlVPfNL55BZ8jETbX0VdKgBniYKbWB9Kma0ksE0gNRgXy9Q/lNn2T8iOBR4qpZHJJvS1jleI5W7MKmg+ynzQ==",
+			"license": "MIT",
+			"dependencies": {
+				"event-target-polyfill": "^0.0.4"
+			}
+		},
 		"node_modules/path-key": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -7630,7 +8794,6 @@
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
 			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=12"
@@ -7639,6 +8802,15 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/pkce-challenge": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz",
+			"integrity": "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=16.20.0"
+			}
+		},
 		"node_modules/postcss": {
 			"version": "8.5.6",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -7668,6 +8840,21 @@
 				"node": "^10 || ^12 || >=14"
 			}
 		},
+		"node_modules/prettier": {
+			"version": "3.8.1",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+			"integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+			"license": "MIT",
+			"bin": {
+				"prettier": "bin/prettier.cjs"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
+		},
 		"node_modules/pretty-ms": {
 			"version": "9.3.0",
 			"resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.3.0.tgz",
@@ -7734,6 +8921,19 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/proxy-addr": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+			"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+			"license": "MIT",
+			"dependencies": {
+				"forwarded": "0.2.0",
+				"ipaddr.js": "1.9.1"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
 		"node_modules/proxy-agent": {
 			"version": "6.5.0",
 			"resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz",
@@ -7759,6 +8959,55 @@
 			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
 			"license": "MIT"
 		},
+		"node_modules/qs": {
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+			"integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"side-channel": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=0.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/range-parser": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/raw-body": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+			"integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+			"license": "MIT",
+			"dependencies": {
+				"bytes": "~3.1.2",
+				"http-errors": "~2.0.1",
+				"iconv-lite": "~0.7.0",
+				"unpipe": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/react": {
+			"version": "19.2.4",
+			"resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+			"integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/readable-stream": {
 			"version": "2.3.8",
 			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
@@ -7871,6 +9120,32 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/router": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+			"integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.4.0",
+				"depd": "^2.0.0",
+				"is-promise": "^4.0.0",
+				"parseurl": "^1.3.3",
+				"path-to-regexp": "^8.0.0"
+			},
+			"engines": {
+				"node": ">= 18"
+			}
+		},
+		"node_modules/router/node_modules/path-to-regexp": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+			"integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/run-applescript": {
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
@@ -7904,6 +9179,12 @@
 			],
 			"license": "MIT"
 		},
+		"node_modules/safer-buffer": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+			"license": "MIT"
+		},
 		"node_modules/semver": {
 			"version": "7.7.3",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
@@ -7917,6 +9198,51 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/send": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+			"integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.4.3",
+				"encodeurl": "^2.0.0",
+				"escape-html": "^1.0.3",
+				"etag": "^1.8.1",
+				"fresh": "^2.0.0",
+				"http-errors": "^2.0.1",
+				"mime-types": "^3.0.2",
+				"ms": "^2.1.3",
+				"on-finished": "^2.4.1",
+				"range-parser": "^1.2.1",
+				"statuses": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/serve-static": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+			"integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+			"license": "MIT",
+			"dependencies": {
+				"encodeurl": "^2.0.0",
+				"escape-html": "^1.0.3",
+				"parseurl": "^1.3.3",
+				"send": "^1.2.0"
+			},
+			"engines": {
+				"node": ">= 18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/setimmediate": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -7924,6 +9250,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/setprototypeof": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+			"license": "ISC"
+		},
 		"node_modules/sharp": {
 			"version": "0.34.5",
 			"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
@@ -7990,6 +9322,78 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/side-channel": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+			"integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"object-inspect": "^1.13.3",
+				"side-channel-list": "^1.0.0",
+				"side-channel-map": "^1.0.1",
+				"side-channel-weakmap": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/side-channel-list": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+			"integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"object-inspect": "^1.13.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/side-channel-map": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+			"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.5",
+				"object-inspect": "^1.13.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/side-channel-weakmap": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+			"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.5",
+				"object-inspect": "^1.13.3",
+				"side-channel-map": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/siginfo": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
@@ -8090,6 +9494,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/statuses": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+			"integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/std-env": {
 			"version": "3.10.0",
 			"resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
@@ -8290,7 +9703,6 @@
 			"version": "0.2.15",
 			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
 			"integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"fdir": "^6.5.0",
@@ -8333,6 +9745,15 @@
 				"node": ">=14.0.0"
 			}
 		},
+		"node_modules/toidentifier": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+			"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.6"
+			}
+		},
 		"node_modules/ts-algebra": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/ts-algebra/-/ts-algebra-2.0.0.tgz",
@@ -8365,6 +9786,20 @@
 				"fsevents": "~2.3.3"
 			}
 		},
+		"node_modules/type-is": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+			"integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+			"license": "MIT",
+			"dependencies": {
+				"content-type": "^1.0.5",
+				"media-typer": "^1.1.0",
+				"mime-types": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/typescript": {
 			"version": "5.9.3",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -8432,6 +9867,15 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/unpipe": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+			"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -8439,6 +9883,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/vary": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+			"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/vite": {
 			"version": "7.3.1",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
@@ -8798,6 +10251,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/wrappy": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+			"license": "ISC"
+		},
 		"node_modules/ws": {
 			"version": "8.19.0",
 			"resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
@@ -8835,6 +10294,15 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"license": "ISC",
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/yaml": {
 			"version": "2.8.2",
 			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
@@ -8851,6 +10319,55 @@
 				"url": "https://github.com/sponsors/eemeli"
 			}
 		},
+		"node_modules/yargs": {
+			"version": "18.0.0",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",
+			"integrity": "sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==",
+			"license": "MIT",
+			"dependencies": {
+				"cliui": "^9.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"string-width": "^7.2.0",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^22.0.0"
+			},
+			"engines": {
+				"node": "^20.19.0 || ^22.12.0 || >=23"
+			}
+		},
+		"node_modules/yargs-parser": {
+			"version": "22.0.0",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+			"integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
+			"license": "ISC",
+			"engines": {
+				"node": "^20.19.0 || ^22.12.0 || >=23"
+			}
+		},
+		"node_modules/yargs/node_modules/emoji-regex": {
+			"version": "10.6.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+			"integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+			"license": "MIT"
+		},
+		"node_modules/yargs/node_modules/string-width": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+			"integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^10.3.0",
+				"get-east-asian-width": "^1.0.0",
+				"strip-ansi": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/yoctocolors": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.2.tgz",
@@ -8894,7 +10411,6 @@
 			"resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
 			"integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
 			"license": "MIT",
-			"peer": true,
 			"funding": {
 				"url": "https://github.com/sponsors/colinhacks"
 			}
diff --git a/gateway/package.json b/gateway/package.json
index 860145b..c71d066 100644
--- a/gateway/package.json
+++ b/gateway/package.json
@@ -30,6 +30,7 @@
 	"dependencies": {
 		"@clack/prompts": "^1.0.0",
 		"@mariozechner/pi-ai": "^0.54.0",
+		"agents": "^0.5.1",
 		"picocolors": "^1.1.1",
 		"ws": "^8.19.0"
 	}
diff --git a/gateway/src/session/do.ts b/gateway/src/session/do.ts
index 937530f..5819296 100644
--- a/gateway/src/session/do.ts
+++ b/gateway/src/session/do.ts
@@ -64,6 +64,7 @@ import {
   parseToolApprovalDecision,
   type ToolApprovalEvaluation,
 } from "./tool-approval";
+import { Agent, Connection, ConnectionContext } from "agents";
 
 type PendingToolCall = {
   id: string;
@@ -290,11 +291,15 @@ class MediaCache {
   }
 }
 
-export class Session extends DurableObject<Env> {
+export class Session extends Agent<Env> {
   private static generateSessionId(): string {
     return crypto.randomUUID();
   }
 
+  shouldSendProtocolMessages(_: Connection, __: ConnectionContext): boolean {
+    return false;
+  }
+
   /**
    * Extract agentId from session key.
    * Session key format: agent:{agentId}:{...}
@@ -1243,10 +1248,12 @@ export class Session extends DurableObject<Env> {
 
     // If this turn resumed from tool calls, inject queued user messages now so they
     // are included before the next LLM continuation, without waiting for run end.
-    let continuationOverrides: {
-      thinkLevel?: string;
-      model?: { provider: string; id: string };
-    } | undefined;
+    let continuationOverrides:
+      | {
+          thinkLevel?: string;
+          model?: { provider: string; id: string };
+        }
+      | undefined;
     if (hadPendingToolCalls && this.messageQueue.length > 0) {
       const queuedMessages = [...this.messageQueue];
       this.messageQueue = [];
diff --git a/gateway/ui/src/react/App.tsx b/gateway/ui/src/react/App.tsx
index bb9d4c8..343bcce 100644
--- a/gateway/ui/src/react/App.tsx
+++ b/gateway/ui/src/react/App.tsx
@@ -1,4 +1,4 @@
-import { lazy, Suspense, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Badge } from "@cloudflare/kumo/components/badge";
 import { Button } from "@cloudflare/kumo/components/button";
 import { Input } from "@cloudflare/kumo/components/input";
@@ -6,60 +6,66 @@ import { Select } from "@cloudflare/kumo/components/select";
 import { SensitiveInput } from "@cloudflare/kumo/components/sensitive-input";
 import { Surface } from "@cloudflare/kumo/components/surface";
 import { getGatewayUrl, type UiSettings } from "../ui/storage";
-import { TAB_GROUPS, TAB_ICONS, TAB_LABELS, type Tab } from "../ui/types";
+import { TAB_GROUPS, TAB_ICONS, TAB_LABELS } from "../ui/types";
+import { OsShell } from "./components/OsShell";
 import { useReactUiStore } from "./state/store";
+import { preloadTabView, TabView } from "./tabViews";
 
-const ChatView = lazy(() =>
-  import("./views/ChatView").then((module) => ({ default: module.ChatView })),
-);
-const OverviewView = lazy(() =>
-  import("./views/OverviewView").then((module) => ({
-    default: module.OverviewView,
-  })),
-);
-const SessionsView = lazy(() =>
-  import("./views/SessionsView").then((module) => ({
-    default: module.SessionsView,
-  })),
-);
-const ChannelsView = lazy(() =>
-  import("./views/ChannelsView").then((module) => ({
-    default: module.ChannelsView,
-  })),
-);
-const NodesView = lazy(() =>
-  import("./views/NodesView").then((module) => ({ default: module.NodesView })),
-);
-const WorkspaceView = lazy(() =>
-  import("./views/WorkspaceView").then((module) => ({
-    default: module.WorkspaceView,
-  })),
-);
-const CronView = lazy(() =>
-  import("./views/CronView").then((module) => ({ default: module.CronView })),
-);
-const LogsView = lazy(() =>
-  import("./views/LogsView").then((module) => ({ default: module.LogsView })),
-);
-const PairingView = lazy(() =>
-  import("./views/PairingView").then((module) => ({
-    default: module.PairingView,
-  })),
-);
-const ConfigView = lazy(() =>
-  import("./views/ConfigView").then((module) => ({
-    default: module.ConfigView,
-  })),
-);
-const DebugView = lazy(() =>
-  import("./views/DebugView").then((module) => ({ default: module.DebugView })),
-);
+type LayoutMode = "classic" | "os";
+
+const LAYOUT_MODE_STORAGE_KEY = "gsv-layout-mode";
+const LAYOUT_MODE_QUERY_PARAM = "shell";
+
+function getInitialLayoutMode(): LayoutMode {
+  if (typeof window === "undefined") {
+    return "classic";
+  }
+
+  const searchParams = new URLSearchParams(window.location.search);
+  if (searchParams.get(LAYOUT_MODE_QUERY_PARAM) === "os") {
+    return "os";
+  }
+
+  const stored = window.localStorage.getItem(LAYOUT_MODE_STORAGE_KEY);
+  return stored === "os" ? "os" : "classic";
+}
+
+function persistLayoutMode(mode: LayoutMode): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  window.localStorage.setItem(LAYOUT_MODE_STORAGE_KEY, mode);
+  const url = new URL(window.location.href);
+  if (mode === "os") {
+    url.searchParams.set(LAYOUT_MODE_QUERY_PARAM, "os");
+  } else {
+    url.searchParams.delete(LAYOUT_MODE_QUERY_PARAM);
+  }
+  window.history.replaceState(
+    window.history.state,
+    "",
+    `${url.pathname}${url.search}${url.hash}`,
+  );
+}
 
 export function App() {
   const initialize = useReactUiStore((s) => s.initialize);
   const cleanup = useReactUiStore((s) => s.cleanup);
   const syncTabFromLocation = useReactUiStore((s) => s.syncTabFromLocation);
   const setMobileLayout = useReactUiStore((s) => s.setMobileLayout);
+  const showConnectScreen = useReactUiStore((s) => s.showConnectScreen);
+  const tab = useReactUiStore((s) => s.tab);
+  const switchTab = useReactUiStore((s) => s.switchTab);
+  const isMobileLayout = useReactUiStore((s) => s.isMobileLayout);
+  const connectionState = useReactUiStore((s) => s.connectionState);
+  const updateSettings = useReactUiStore((s) => s.updateSettings);
+  const settings = useReactUiStore((s) => s.settings);
+  const disconnect = useReactUiStore((s) => s.disconnect);
+
+  const [layoutMode, setLayoutMode] = useState<LayoutMode>(() =>
+    getInitialLayoutMode(),
+  );
 
   useEffect(() => {
     initialize();
@@ -82,12 +88,48 @@ export function App() {
     };
   }, [syncTabFromLocation]);
 
-  const showConnectScreen = useReactUiStore((s) => s.showConnectScreen);
+  useEffect(() => {
+    persistLayoutMode(layoutMode);
+  }, [layoutMode]);
+
+  useEffect(() => {
+    if (layoutMode === "os" && isMobileLayout) {
+      setLayoutMode("classic");
+    }
+  }, [isMobileLayout, layoutMode]);
+
+  useEffect(() => {
+    preloadTabView(tab);
+  }, [tab]);
+
   if (showConnectScreen) {
     return <ConnectScreen />;
   }
 
-  return <MainShell />;
+  if (layoutMode === "os" && !isMobileLayout) {
+    return (
+      <OsShell
+        tab={tab}
+        onSwitchTab={switchTab}
+        connectionState={connectionState}
+        theme={settings.theme}
+        onToggleTheme={() =>
+          updateSettings({
+            theme: settings.theme === "dark" ? "light" : "dark",
+          })
+        }
+        onDisconnect={disconnect}
+        onExitOsMode={() => setLayoutMode("classic")}
+      />
+    );
+  }
+
+  return (
+    <MainShell
+      osModeAvailable={!isMobileLayout}
+      onEnableOsMode={() => setLayoutMode("os")}
+    />
+  );
 }
 
 function ConnectScreen() {
@@ -166,7 +208,13 @@ function ConnectScreen() {
   );
 }
 
-function MainShell() {
+function MainShell({
+  osModeAvailable,
+  onEnableOsMode,
+}: {
+  osModeAvailable: boolean;
+  onEnableOsMode: () => void;
+}) {
   const tab = useReactUiStore((s) => s.tab);
   const switchTab = useReactUiStore((s) => s.switchTab);
   const isMobileLayout = useReactUiStore((s) => s.isMobileLayout);
@@ -216,6 +264,8 @@ function MainShell() {
                   className={`nav-item ${groupTab === tab ? "active" : ""}`}
                   key={groupTab}
                   onClick={() => switchTab(groupTab)}
+                  onMouseEnter={() => preloadTabView(groupTab)}
+                  onFocus={() => preloadTabView(groupTab)}
                 >
                   <span className="nav-item-icon">{TAB_ICONS[groupTab]}</span>
                   <span className="nav-item-label">{TAB_LABELS[groupTab]}</span>
@@ -251,6 +301,16 @@ function MainShell() {
             <h1 className="topbar-title">{TAB_LABELS[tab]}</h1>
           </div>
           <div className="topbar-actions">
+            {osModeAvailable ? (
+              <Button
+                variant="secondary"
+                className="ui-button-fix"
+                size="base"
+                onClick={onEnableOsMode}
+              >
+                OS mode
+              </Button>
+            ) : null}
             <Button
               variant="ghost"
               shape="square"
@@ -276,51 +336,9 @@ function MainShell() {
         </header>
 
         <div className="page-content">
-          <ReactTabView tab={tab} />
+          <TabView tab={tab} />
         </div>
       </div>
     </div>
   );
 }
-
-function ReactTabView({ tab }: { tab: Tab }) {
-  return (
-    <Suspense fallback={<TabLoadingFallback />}>
-      {tab === "chat" ? <ChatView /> : null}
-      {tab === "overview" ? <OverviewView /> : null}
-      {tab === "sessions" ? <SessionsView /> : null}
-      {tab === "channels" ? <ChannelsView /> : null}
-      {tab === "nodes" ? <NodesView /> : null}
-      {tab === "workspace" ? <WorkspaceView /> : null}
-      {tab === "cron" ? <CronView /> : null}
-      {tab === "logs" ? <LogsView /> : null}
-      {tab === "pairing" ? <PairingView /> : null}
-      {tab === "config" ? <ConfigView /> : null}
-      {tab === "debug" ? <DebugView /> : null}
-      {!TAB_LABELS[tab] ? (
-        <div className="view-container">
-          <Surface className="card">
-            <div className="card-body">
-              <p className="text-secondary">Unknown tab: {tab}</p>
-            </div>
-          </Surface>
-        </div>
-      ) : null}
-    </Suspense>
-  );
-}
-
-function TabLoadingFallback() {
-  return (
-    <div className="view-container">
-      <Surface className="card">
-        <div className="card-body">
-          <div className="thinking-indicator">
-            <span className="spinner"></span>
-            <span>Loading view...</span>
-          </div>
-        </div>
-      </Surface>
-    </div>
-  );
-}
diff --git a/gateway/ui/src/react/components/OsShell.tsx b/gateway/ui/src/react/components/OsShell.tsx
new file mode 100644
index 0000000..4f78af7
--- /dev/null
+++ b/gateway/ui/src/react/components/OsShell.tsx
@@ -0,0 +1,784 @@
+import { Badge } from "@cloudflare/kumo/components/badge";
+import { Button } from "@cloudflare/kumo/components/button";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
+import { TAB_GROUPS, TAB_ICONS, TAB_LABELS, type Tab } from "../../ui/types";
+import { preloadTabView, TabView } from "../tabViews";
+
+const WINDOW_MIN_WIDTH = 420;
+const WINDOW_MIN_HEIGHT = 280;
+const WINDOW_MARGIN = 12;
+
+type WindowRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+type OsWindow = WindowRect & {
+  id: number;
+  tab: Tab;
+  z: number;
+  minimized: boolean;
+  maximized: boolean;
+  restoreRect?: WindowRect;
+};
+
+type ResizeEdge = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
+
+type InteractionState =
+  | {
+      type: "drag";
+      windowId: number;
+      startClientX: number;
+      startClientY: number;
+      startRect: WindowRect;
+    }
+  | {
+      type: "resize";
+      windowId: number;
+      edge: ResizeEdge;
+      startClientX: number;
+      startClientY: number;
+      startRect: WindowRect;
+    };
+
+type OsShellProps = {
+  tab: Tab;
+  onSwitchTab: (tab: Tab) => void;
+  connectionState: "connected" | "connecting" | "disconnected";
+  theme: "dark" | "light" | "system";
+  onToggleTheme: () => void;
+  onDisconnect: () => void;
+  onExitOsMode: () => void;
+};
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function getDesktopBounds(node: HTMLDivElement | null): WindowRect {
+  if (node) {
+    const rect = node.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+      return {
+        x: 0,
+        y: 0,
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+      };
+    }
+  }
+
+  if (typeof window !== "undefined") {
+    return {
+      x: 0,
+      y: 0,
+      width: Math.max(720, Math.round(window.innerWidth - 320)),
+      height: Math.max(420, Math.round(window.innerHeight - 140)),
+    };
+  }
+
+  return { x: 0, y: 0, width: 960, height: 640 };
+}
+
+function clampRectToBounds(rect: WindowRect, bounds: WindowRect): WindowRect {
+  const maxWidth = Math.max(WINDOW_MIN_WIDTH, bounds.width - WINDOW_MARGIN * 2);
+  const maxHeight = Math.max(WINDOW_MIN_HEIGHT, bounds.height - WINDOW_MARGIN * 2);
+  const width = clamp(rect.width, WINDOW_MIN_WIDTH, maxWidth);
+  const height = clamp(rect.height, WINDOW_MIN_HEIGHT, maxHeight);
+  const maxX = Math.max(WINDOW_MARGIN, bounds.width - width - WINDOW_MARGIN);
+  const maxY = Math.max(WINDOW_MARGIN, bounds.height - height - WINDOW_MARGIN);
+  return {
+    x: clamp(rect.x, WINDOW_MARGIN, maxX),
+    y: clamp(rect.y, WINDOW_MARGIN, maxY),
+    width,
+    height,
+  };
+}
+
+function createWindow(
+  tab: Tab,
+  id: number,
+  z: number,
+  index: number,
+  bounds: WindowRect,
+): OsWindow {
+  const baseRect: WindowRect = {
+    x: 36 + (index % 6) * 24,
+    y: 34 + (index % 6) * 18,
+    width: Math.round(bounds.width * 0.68),
+    height: Math.round(bounds.height * 0.74),
+  };
+  const rect = clampRectToBounds(baseRect, bounds);
+  return {
+    id,
+    tab,
+    z,
+    minimized: false,
+    maximized: false,
+    ...rect,
+  };
+}
+
+function resizeRect(
+  startRect: WindowRect,
+  edge: ResizeEdge,
+  deltaX: number,
+  deltaY: number,
+  bounds: WindowRect,
+): WindowRect {
+  let nextX = startRect.x;
+  let nextY = startRect.y;
+  let nextWidth = startRect.width;
+  let nextHeight = startRect.height;
+
+  if (edge.includes("e")) {
+    const maxWidth = bounds.width - startRect.x - WINDOW_MARGIN;
+    nextWidth = clamp(startRect.width + deltaX, WINDOW_MIN_WIDTH, maxWidth);
+  }
+
+  if (edge.includes("s")) {
+    const maxHeight = bounds.height - startRect.y - WINDOW_MARGIN;
+    nextHeight = clamp(startRect.height + deltaY, WINDOW_MIN_HEIGHT, maxHeight);
+  }
+
+  if (edge.includes("w")) {
+    const maxX = startRect.x + startRect.width - WINDOW_MIN_WIDTH;
+    nextX = clamp(startRect.x + deltaX, WINDOW_MARGIN, maxX);
+    nextWidth = startRect.width - (nextX - startRect.x);
+  }
+
+  if (edge.includes("n")) {
+    const maxY = startRect.y + startRect.height - WINDOW_MIN_HEIGHT;
+    nextY = clamp(startRect.y + deltaY, WINDOW_MARGIN, maxY);
+    nextHeight = startRect.height - (nextY - startRect.y);
+  }
+
+  return clampRectToBounds(
+    {
+      x: nextX,
+      y: nextY,
+      width: nextWidth,
+      height: nextHeight,
+    },
+    bounds,
+  );
+}
+
+const RESIZE_HANDLES: { edge: ResizeEdge; className: string }[] = [
+  { edge: "n", className: "os-resize-handle n" },
+  { edge: "s", className: "os-resize-handle s" },
+  { edge: "e", className: "os-resize-handle e" },
+  { edge: "w", className: "os-resize-handle w" },
+  { edge: "ne", className: "os-resize-handle ne" },
+  { edge: "nw", className: "os-resize-handle nw" },
+  { edge: "se", className: "os-resize-handle se" },
+  { edge: "sw", className: "os-resize-handle sw" },
+];
+
+export function OsShell({
+  tab,
+  onSwitchTab,
+  connectionState,
+  theme,
+  onToggleTheme,
+  onDisconnect,
+  onExitOsMode,
+}: OsShellProps) {
+  const desktopRef = useRef<HTMLDivElement | null>(null);
+  const interactionRef = useRef<InteractionState | null>(null);
+  const windowsRef = useRef<OsWindow[]>([]);
+  const focusedWindowIdRef = useRef<number | null>(1);
+  const nextWindowIdRef = useRef(2);
+  const nextZRef = useRef(2);
+
+  const [windows, setWindows] = useState<OsWindow[]>(() => {
+    const bounds = getDesktopBounds(null);
+    return [createWindow(tab, 1, 1, 0, bounds)];
+  });
+  const [focusedWindowId, setFocusedWindowId] = useState<number | null>(1);
+
+  const launchTabs = useMemo(() => TAB_GROUPS.flatMap((group) => group.tabs), []);
+  const openTabs = useMemo(() => new Set(windows.map((windowState) => windowState.tab)), [windows]);
+  const visibleWindows = useMemo(
+    () =>
+      windows
+        .filter((windowState) => !windowState.minimized)
+        .sort((left, right) => left.z - right.z),
+    [windows],
+  );
+  const focusedTab = useMemo(
+    () => windows.find((windowState) => windowState.id === focusedWindowId)?.tab ?? null,
+    [focusedWindowId, windows],
+  );
+
+  useEffect(() => {
+    windowsRef.current = windows;
+  }, [windows]);
+
+  useEffect(() => {
+    focusedWindowIdRef.current = focusedWindowId;
+  }, [focusedWindowId]);
+
+  const connectionBadgeVariant = useMemo(() => {
+    if (connectionState === "connected") {
+      return "primary";
+    }
+    if (connectionState === "connecting") {
+      return "outline";
+    }
+    return "destructive";
+  }, [connectionState]);
+
+  const focusWindow = useCallback(
+    (windowId: number, syncTab = true) => {
+      const target = windowsRef.current.find((windowState) => windowState.id === windowId);
+      if (!target) {
+        return;
+      }
+      const nextZ = nextZRef.current++;
+      setWindows((previous) =>
+        previous.map((windowState) =>
+          windowState.id === windowId
+            ? {
+                ...windowState,
+                minimized: false,
+                z: nextZ,
+              }
+            : windowState,
+        ),
+      );
+      setFocusedWindowId(windowId);
+      if (syncTab) {
+        onSwitchTab(target.tab);
+      }
+    },
+    [onSwitchTab],
+  );
+
+  const openWindow = useCallback(
+    (windowTab: Tab, syncTab = true) => {
+      preloadTabView(windowTab);
+      const existing = windowsRef.current.find(
+        (windowState) => windowState.tab === windowTab,
+      );
+      if (existing) {
+        focusWindow(existing.id, syncTab);
+        return;
+      }
+
+      const bounds = getDesktopBounds(desktopRef.current);
+      const windowId = nextWindowIdRef.current++;
+      const nextZ = nextZRef.current++;
+      const windowState = createWindow(
+        windowTab,
+        windowId,
+        nextZ,
+        windowsRef.current.length,
+        bounds,
+      );
+
+      setWindows((previous) => [...previous, windowState]);
+      setFocusedWindowId(windowId);
+      if (syncTab) {
+        onSwitchTab(windowTab);
+      }
+    },
+    [focusWindow, onSwitchTab],
+  );
+
+  const closeWindow = useCallback(
+    (windowId: number) => {
+      const currentWindows = windowsRef.current;
+      const target = currentWindows.find((windowState) => windowState.id === windowId);
+      if (!target) {
+        return;
+      }
+
+      const remaining = currentWindows.filter((windowState) => windowState.id !== windowId);
+      if (!remaining.length) {
+        setWindows([]);
+        setFocusedWindowId(null);
+        return;
+      }
+
+      if (focusedWindowIdRef.current !== windowId) {
+        setWindows(remaining);
+        return;
+      }
+
+      const nextFocusTarget =
+        remaining
+          .filter((windowState) => !windowState.minimized)
+          .sort((left, right) => right.z - left.z)[0] ??
+        [...remaining].sort((left, right) => right.z - left.z)[0];
+      const nextZ = nextZRef.current++;
+
+      setWindows(
+        remaining.map((windowState) =>
+          windowState.id === nextFocusTarget.id
+            ? {
+                ...windowState,
+                minimized: false,
+                z: nextZ,
+              }
+            : windowState,
+        ),
+      );
+      setFocusedWindowId(nextFocusTarget.id);
+      onSwitchTab(nextFocusTarget.tab);
+    },
+    [onSwitchTab],
+  );
+
+  const minimizeWindow = useCallback(
+    (windowId: number) => {
+      const currentWindows = windowsRef.current;
+      const target = currentWindows.find((windowState) => windowState.id === windowId);
+      if (!target) {
+        return;
+      }
+
+      setWindows((previous) =>
+        previous.map((windowState) =>
+          windowState.id === windowId
+            ? { ...windowState, minimized: true }
+            : windowState,
+        ),
+      );
+
+      if (focusedWindowIdRef.current !== windowId) {
+        return;
+      }
+
+      const nextVisible = currentWindows
+        .filter(
+          (windowState) =>
+            windowState.id !== windowId && !windowState.minimized,
+        )
+        .sort((left, right) => right.z - left.z);
+      if (!nextVisible.length) {
+        setFocusedWindowId(null);
+        return;
+      }
+      focusWindow(nextVisible[0].id);
+    },
+    [focusWindow],
+  );
+
+  const toggleWindowMaximized = useCallback(
+    (windowId: number) => {
+      const current = windowsRef.current.find((windowState) => windowState.id === windowId);
+      if (!current) {
+        return;
+      }
+      const bounds = getDesktopBounds(desktopRef.current);
+      const nextZ = nextZRef.current++;
+      setWindows((previous) =>
+        previous.map((windowState) => {
+          if (windowState.id !== windowId) {
+            return windowState;
+          }
+          if (windowState.maximized) {
+            const restored = clampRectToBounds(
+              windowState.restoreRect ?? windowState,
+              bounds,
+            );
+            return {
+              ...windowState,
+              ...restored,
+              maximized: false,
+              restoreRect: undefined,
+              z: nextZ,
+            };
+          }
+          return {
+            ...windowState,
+            x: 0,
+            y: 0,
+            width: bounds.width,
+            height: bounds.height,
+            maximized: true,
+            restoreRect: {
+              x: windowState.x,
+              y: windowState.y,
+              width: windowState.width,
+              height: windowState.height,
+            },
+            z: nextZ,
+          };
+        }),
+      );
+      setFocusedWindowId(windowId);
+      onSwitchTab(current.tab);
+    },
+    [onSwitchTab],
+  );
+
+  const beginDrag = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>, windowId: number) => {
+      if (event.button !== 0) {
+        return;
+      }
+      const target = windowsRef.current.find((windowState) => windowState.id === windowId);
+      if (!target || target.minimized || target.maximized) {
+        return;
+      }
+      if ((event.target as HTMLElement).closest("[data-window-action]")) {
+        return;
+      }
+
+      focusWindow(windowId);
+      interactionRef.current = {
+        type: "drag",
+        windowId,
+        startClientX: event.clientX,
+        startClientY: event.clientY,
+        startRect: {
+          x: target.x,
+          y: target.y,
+          width: target.width,
+          height: target.height,
+        },
+      };
+      document.body.classList.add("os-dragging");
+      event.preventDefault();
+    },
+    [focusWindow],
+  );
+
+  const beginResize = useCallback(
+    (
+      event: ReactPointerEvent<HTMLDivElement>,
+      windowId: number,
+      edge: ResizeEdge,
+    ) => {
+      if (event.button !== 0) {
+        return;
+      }
+      const target = windowsRef.current.find((windowState) => windowState.id === windowId);
+      if (!target || target.minimized || target.maximized) {
+        return;
+      }
+
+      focusWindow(windowId);
+      interactionRef.current = {
+        type: "resize",
+        windowId,
+        edge,
+        startClientX: event.clientX,
+        startClientY: event.clientY,
+        startRect: {
+          x: target.x,
+          y: target.y,
+          width: target.width,
+          height: target.height,
+        },
+      };
+      document.body.classList.add("os-dragging");
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [focusWindow],
+  );
+
+  useEffect(() => {
+    const onPointerMove = (event: PointerEvent) => {
+      const interaction = interactionRef.current;
+      if (!interaction) {
+        return;
+      }
+
+      const bounds = getDesktopBounds(desktopRef.current);
+      const deltaX = event.clientX - interaction.startClientX;
+      const deltaY = event.clientY - interaction.startClientY;
+
+      setWindows((previous) =>
+        previous.map((windowState) => {
+          if (windowState.id !== interaction.windowId) {
+            return windowState;
+          }
+
+          if (interaction.type === "drag") {
+            const nextRect = clampRectToBounds(
+              {
+                ...interaction.startRect,
+                x: interaction.startRect.x + deltaX,
+                y: interaction.startRect.y + deltaY,
+              },
+              bounds,
+            );
+            return {
+              ...windowState,
+              x: nextRect.x,
+              y: nextRect.y,
+            };
+          }
+
+          const nextRect = resizeRect(
+            interaction.startRect,
+            interaction.edge,
+            deltaX,
+            deltaY,
+            bounds,
+          );
+          return { ...windowState, ...nextRect };
+        }),
+      );
+    };
+
+    const stopInteraction = () => {
+      if (!interactionRef.current) {
+        return;
+      }
+      interactionRef.current = null;
+      document.body.classList.remove("os-dragging");
+    };
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", stopInteraction);
+    window.addEventListener("pointercancel", stopInteraction);
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", stopInteraction);
+      window.removeEventListener("pointercancel", stopInteraction);
+      document.body.classList.remove("os-dragging");
+    };
+  }, []);
+
+  useEffect(() => {
+    const onResize = () => {
+      const bounds = getDesktopBounds(desktopRef.current);
+      setWindows((previous) =>
+        previous.map((windowState) => {
+          if (windowState.maximized) {
+            return {
+              ...windowState,
+              x: 0,
+              y: 0,
+              width: bounds.width,
+              height: bounds.height,
+            };
+          }
+          const nextRect = clampRectToBounds(windowState, bounds);
+          return { ...windowState, ...nextRect };
+        }),
+      );
+    };
+
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    preloadTabView(tab);
+    const existing = windowsRef.current.find((windowState) => windowState.tab === tab);
+    if (existing) {
+      if (focusedWindowIdRef.current !== existing.id || existing.minimized) {
+        focusWindow(existing.id, false);
+      }
+      return;
+    }
+    openWindow(tab, false);
+  }, [focusWindow, openWindow, tab]);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (!(event.metaKey || event.ctrlKey)) {
+        return;
+      }
+      if (event.key.toLowerCase() !== "w") {
+        return;
+      }
+      if (focusedWindowIdRef.current === null) {
+        return;
+      }
+      event.preventDefault();
+      closeWindow(focusedWindowIdRef.current);
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [closeWindow]);
+
+  return (
+    <div className="os-shell">
+      <header className="os-menubar">
+        <div className="os-menubar-brand">
+          <span className="os-menubar-logo">⚡</span>
+          <span className="os-menubar-title">GSV Control OS</span>
+        </div>
+        <div className="os-menubar-status">
+          <Badge className="ui-badge-fix" variant={connectionBadgeVariant}>
+            {connectionState}
+          </Badge>
+          <Button
+            variant="secondary"
+            className="ui-button-fix"
+            size="sm"
+            onClick={onExitOsMode}
+          >
+            Classic
+          </Button>
+          <Button
+            variant="ghost"
+            shape="square"
+            aria-label="Toggle theme"
+            title="Toggle theme"
+            onClick={onToggleTheme}
+          >
+            {theme === "dark" ? "🌙" : "☀️"}
+          </Button>
+          <Button
+            variant="secondary"
+            className="ui-button-fix"
+            size="sm"
+            onClick={onDisconnect}
+          >
+            Disconnect
+          </Button>
+        </div>
+      </header>
+
+      <div className="os-workspace">
+        <aside className="os-launchpad">
+          {TAB_GROUPS.map((group) => (
+            <section className="os-launch-group" key={group.label}>
+              <h2 className="os-launch-group-label">{group.label}</h2>
+              <div className="os-launch-grid">
+                {group.tabs.map((windowTab) => {
+                  const isOpen = openTabs.has(windowTab);
+                  const isFocused = focusedTab === windowTab;
+                  return (
+                    <button
+                      key={windowTab}
+                      type="button"
+                      className={`os-launch-item ${isOpen ? "open" : ""} ${
+                        isFocused ? "focused" : ""
+                      }`}
+                      onClick={() => openWindow(windowTab)}
+                      onMouseEnter={() => preloadTabView(windowTab)}
+                      onFocus={() => preloadTabView(windowTab)}
+                    >
+                      <span className="os-launch-icon">{TAB_ICONS[windowTab]}</span>
+                      <span className="os-launch-label">{TAB_LABELS[windowTab]}</span>
+                    </button>
+                  );
+                })}
+              </div>
+            </section>
+          ))}
+        </aside>
+
+        <main className="os-desktop" ref={desktopRef}>
+          {visibleWindows.map((windowState) => (
+            <section
+              key={windowState.id}
+              className={`os-window ${
+                focusedWindowId === windowState.id ? "focused" : ""
+              } ${windowState.maximized ? "maximized" : ""}`}
+              style={{
+                transform: `translate(${windowState.x}px, ${windowState.y}px)`,
+                width: `${windowState.width}px`,
+                height: `${windowState.height}px`,
+                zIndex: windowState.z,
+              }}
+              onMouseDown={() => focusWindow(windowState.id)}
+            >
+              <div
+                className="os-window-titlebar"
+                onPointerDown={(event) => beginDrag(event, windowState.id)}
+              >
+                <div className="os-window-actions">
+                  <button
+                    type="button"
+                    className="os-window-action close"
+                    data-window-action
+                    aria-label={`Close ${TAB_LABELS[windowState.tab]}`}
+                    onClick={() => closeWindow(windowState.id)}
+                  />
+                  <button
+                    type="button"
+                    className="os-window-action minimize"
+                    data-window-action
+                    aria-label={`Minimize ${TAB_LABELS[windowState.tab]}`}
+                    onClick={() => minimizeWindow(windowState.id)}
+                  />
+                  <button
+                    type="button"
+                    className="os-window-action maximize"
+                    data-window-action
+                    aria-label={`Toggle maximize ${TAB_LABELS[windowState.tab]}`}
+                    onClick={() => toggleWindowMaximized(windowState.id)}
+                  />
+                </div>
+                <div className="os-window-title">
+                  <span className="os-window-title-icon">{TAB_ICONS[windowState.tab]}</span>
+                  <span className="os-window-title-label">{TAB_LABELS[windowState.tab]}</span>
+                </div>
+              </div>
+
+              <div className="os-window-content">
+                <TabView tab={windowState.tab} />
+              </div>
+
+              {!windowState.maximized
+                ? RESIZE_HANDLES.map((handle) => (
+                    <div
+                      key={handle.edge}
+                      className={handle.className}
+                      onPointerDown={(event) =>
+                        beginResize(event, windowState.id, handle.edge)
+                      }
+                    />
+                  ))
+                : null}
+            </section>
+          ))}
+
+          {!visibleWindows.length ? (
+            <div className="os-desktop-empty">
+              <p>All windows minimized</p>
+              <span>Select an app from the dock to continue.</span>
+            </div>
+          ) : null}
+        </main>
+      </div>
+
+      <footer className="os-dock">
+        {launchTabs.map((windowTab) => {
+          const isOpen = openTabs.has(windowTab);
+          const isFocused = focusedTab === windowTab;
+          return (
+            <button
+              key={windowTab}
+              type="button"
+              className={`os-dock-item ${isOpen ? "open" : ""} ${
+                isFocused ? "focused" : ""
+              }`}
+              onClick={() => openWindow(windowTab)}
+              onMouseEnter={() => preloadTabView(windowTab)}
+              onFocus={() => preloadTabView(windowTab)}
+            >
+              <span className="os-dock-item-icon">{TAB_ICONS[windowTab]}</span>
+              <span className="os-dock-item-label">{TAB_LABELS[windowTab]}</span>
+              <span className="os-dock-indicator" />
+            </button>
+          );
+        })}
+      </footer>
+    </div>
+  );
+}
diff --git a/gateway/ui/src/react/tabViews.tsx b/gateway/ui/src/react/tabViews.tsx
new file mode 100644
index 0000000..c2d550e
--- /dev/null
+++ b/gateway/ui/src/react/tabViews.tsx
@@ -0,0 +1,106 @@
+import { Surface } from "@cloudflare/kumo/components/surface";
+import {
+  lazy,
+  Suspense,
+  type ComponentType,
+  type LazyExoticComponent,
+} from "react";
+import { type Tab } from "../ui/types";
+
+type TabViewModule = { default: ComponentType };
+type TabViewLoader = () => Promise<TabViewModule>;
+
+const TAB_VIEW_LOADERS: Record<Tab, TabViewLoader> = {
+  chat: () =>
+    import("./views/ChatView").then((module) => ({ default: module.ChatView })),
+  overview: () =>
+    import("./views/OverviewView").then((module) => ({
+      default: module.OverviewView,
+    })),
+  sessions: () =>
+    import("./views/SessionsView").then((module) => ({
+      default: module.SessionsView,
+    })),
+  channels: () =>
+    import("./views/ChannelsView").then((module) => ({
+      default: module.ChannelsView,
+    })),
+  nodes: () =>
+    import("./views/NodesView").then((module) => ({ default: module.NodesView })),
+  workspace: () =>
+    import("./views/WorkspaceView").then((module) => ({
+      default: module.WorkspaceView,
+    })),
+  cron: () =>
+    import("./views/CronView").then((module) => ({ default: module.CronView })),
+  logs: () =>
+    import("./views/LogsView").then((module) => ({ default: module.LogsView })),
+  pairing: () =>
+    import("./views/PairingView").then((module) => ({
+      default: module.PairingView,
+    })),
+  config: () =>
+    import("./views/ConfigView").then((module) => ({
+      default: module.ConfigView,
+    })),
+  debug: () =>
+    import("./views/DebugView").then((module) => ({ default: module.DebugView })),
+};
+
+const TAB_VIEW_COMPONENTS: Record<Tab, LazyExoticComponent<ComponentType>> = {
+  chat: lazy(TAB_VIEW_LOADERS.chat),
+  overview: lazy(TAB_VIEW_LOADERS.overview),
+  sessions: lazy(TAB_VIEW_LOADERS.sessions),
+  channels: lazy(TAB_VIEW_LOADERS.channels),
+  nodes: lazy(TAB_VIEW_LOADERS.nodes),
+  workspace: lazy(TAB_VIEW_LOADERS.workspace),
+  cron: lazy(TAB_VIEW_LOADERS.cron),
+  logs: lazy(TAB_VIEW_LOADERS.logs),
+  pairing: lazy(TAB_VIEW_LOADERS.pairing),
+  config: lazy(TAB_VIEW_LOADERS.config),
+  debug: lazy(TAB_VIEW_LOADERS.debug),
+};
+
+const preloadedTabs = new Set<Tab>();
+
+export function preloadTabView(tab: Tab): void {
+  if (preloadedTabs.has(tab)) {
+    return;
+  }
+  preloadedTabs.add(tab);
+  void TAB_VIEW_LOADERS[tab]();
+}
+
+export function TabView({ tab }: { tab: Tab }) {
+  const View = TAB_VIEW_COMPONENTS[tab];
+  return (
+    <Suspense fallback={<TabLoadingFallback />}>
+      {View ? (
+        <View />
+      ) : (
+        <div className="view-container">
+          <Surface className="card">
+            <div className="card-body">
+              <p className="text-secondary">Unknown tab: {tab}</p>
+            </div>
+          </Surface>
+        </div>
+      )}
+    </Suspense>
+  );
+}
+
+function TabLoadingFallback() {
+  return (
+    <div className="view-container">
+      <Surface className="card">
+        <div className="card-body">
+          <div className="thinking-indicator">
+            <span className="spinner"></span>
+            <span>Loading view...</span>
+          </div>
+        </div>
+      </Surface>
+    </div>
+  );
+}
diff --git a/gateway/ui/src/styles.css b/gateway/ui/src/styles.css
index c1e10a9..dda6a30 100644
--- a/gateway/ui/src/styles.css
+++ b/gateway/ui/src/styles.css
@@ -3,3 +3,4 @@
 @import "./styles/layout.css";
 @import "./styles/components.css";
 @import "./styles/chat.css";
+@import "./styles/os-shell.css";
diff --git a/gateway/ui/src/styles/os-shell.css b/gateway/ui/src/styles/os-shell.css
new file mode 100644
index 0000000..257805f
--- /dev/null
+++ b/gateway/ui/src/styles/os-shell.css
@@ -0,0 +1,447 @@
+.os-shell {
+  --os-menubar-height: 48px;
+  --os-dock-height: 74px;
+
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  min-height: 100dvh;
+  color: var(--text-primary);
+  background:
+    radial-gradient(circle at 10% 6%, color-mix(in srgb, var(--accent-primary) 18%, transparent) 0%, transparent 38%),
+    radial-gradient(circle at 96% -12%, color-mix(in srgb, var(--accent-success) 14%, transparent) 0%, transparent 42%),
+    linear-gradient(140deg, color-mix(in srgb, var(--bg-primary) 90%, #0f172a) 0%, color-mix(in srgb, var(--bg-secondary) 84%, #111827) 100%);
+}
+
+.os-menubar {
+  height: var(--os-menubar-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: 0 var(--space-4);
+  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 85%, transparent);
+  background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
+  backdrop-filter: blur(16px);
+}
+
+.os-menubar-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.os-menubar-logo {
+  font-size: 1.1rem;
+}
+
+.os-menubar-title {
+  font-size: var(--font-size-sm);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.os-menubar-status {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.os-workspace {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(200px, 232px) minmax(0, 1fr);
+  gap: var(--space-3);
+  padding: var(--space-3);
+}
+
+.os-launchpad {
+  overflow: auto;
+  border-radius: var(--radius-lg);
+  border: 1px solid color-mix(in srgb, var(--border-default) 75%, transparent);
+  background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
+  backdrop-filter: blur(12px);
+  padding: var(--space-3);
+}
+
+.os-launch-group {
+  margin-bottom: var(--space-4);
+}
+
+.os-launch-group:last-child {
+  margin-bottom: 0;
+}
+
+.os-launch-group-label {
+  margin: 0 0 var(--space-2);
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 700;
+}
+
+.os-launch-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-2);
+}
+
+.os-launch-item {
+  border: 1px solid transparent;
+  background: color-mix(in srgb, var(--bg-primary) 64%, transparent);
+  border-radius: var(--radius-md);
+  min-height: 42px;
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-2);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.14s ease;
+}
+
+.os-launch-item:hover,
+.os-launch-item:focus-visible {
+  outline: none;
+  border-color: color-mix(in srgb, var(--accent-primary) 26%, var(--border-default));
+  background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
+  color: var(--text-primary);
+  transform: translateY(-1px);
+}
+
+.os-launch-item.open {
+  border-color: color-mix(in srgb, var(--accent-primary) 24%, var(--border-default));
+}
+
+.os-launch-item.focused {
+  background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-secondary));
+  border-color: color-mix(in srgb, var(--accent-primary) 36%, var(--border-default));
+  color: var(--text-primary);
+}
+
+.os-launch-icon {
+  font-size: 1rem;
+  text-align: center;
+}
+
+.os-launch-label {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.os-desktop {
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  border: 1px solid color-mix(in srgb, var(--border-default) 75%, transparent);
+  background:
+    linear-gradient(130deg, color-mix(in srgb, var(--bg-primary) 80%, #0f172a) 0%, color-mix(in srgb, var(--bg-secondary) 78%, #1f2937) 100%);
+}
+
+.os-desktop::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(to right, color-mix(in srgb, var(--border-muted) 36%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in srgb, var(--border-muted) 36%, transparent) 1px, transparent 1px);
+  background-size: 40px 40px;
+  opacity: 0.16;
+}
+
+.os-window {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  border: 1px solid color-mix(in srgb, var(--border-default) 85%, transparent);
+  background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
+  box-shadow: 0 22px 48px rgba(3, 10, 24, 0.28);
+  transition: box-shadow 0.16s ease, border-color 0.16s ease;
+}
+
+.os-window.focused {
+  border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-default));
+  box-shadow:
+    0 26px 58px rgba(4, 12, 30, 0.32),
+    0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent);
+}
+
+.os-window.maximized {
+  border-radius: 0;
+}
+
+.os-window-titlebar {
+  height: 38px;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-3);
+  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
+  padding: 0 var(--space-3);
+  background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
+  backdrop-filter: blur(8px);
+  user-select: none;
+  cursor: grab;
+}
+
+.os-window-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.os-window-action {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.18);
+  cursor: pointer;
+  transition: transform 0.12s ease, filter 0.12s ease;
+}
+
+.os-window-action:hover {
+  transform: scale(1.08);
+  filter: brightness(1.02);
+}
+
+.os-window-action.close {
+  background: #ff5f57;
+}
+
+.os-window-action.minimize {
+  background: #febc2e;
+}
+
+.os-window-action.maximize {
+  background: #28c840;
+}
+
+.os-window-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.os-window-title-icon {
+  font-size: 0.95rem;
+}
+
+.os-window-title-label {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.os-window-content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--space-3);
+  background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
+}
+
+.os-window-content .view-container {
+  max-width: none;
+}
+
+.os-window-content .chat-container {
+  min-height: 100%;
+  height: 100%;
+  max-width: none;
+}
+
+.os-window-content .workspace-layout {
+  min-height: 100%;
+}
+
+.os-resize-handle {
+  position: absolute;
+  z-index: 2;
+}
+
+.os-resize-handle.n {
+  left: 12px;
+  right: 12px;
+  top: -3px;
+  height: 6px;
+  cursor: ns-resize;
+}
+
+.os-resize-handle.s {
+  left: 12px;
+  right: 12px;
+  bottom: -3px;
+  height: 6px;
+  cursor: ns-resize;
+}
+
+.os-resize-handle.e {
+  top: 12px;
+  bottom: 12px;
+  right: -3px;
+  width: 6px;
+  cursor: ew-resize;
+}
+
+.os-resize-handle.w {
+  top: 12px;
+  bottom: 12px;
+  left: -3px;
+  width: 6px;
+  cursor: ew-resize;
+}
+
+.os-resize-handle.ne,
+.os-resize-handle.nw,
+.os-resize-handle.se,
+.os-resize-handle.sw {
+  width: 12px;
+  height: 12px;
+}
+
+.os-resize-handle.ne {
+  top: -3px;
+  right: -3px;
+  cursor: nesw-resize;
+}
+
+.os-resize-handle.nw {
+  top: -3px;
+  left: -3px;
+  cursor: nwse-resize;
+}
+
+.os-resize-handle.se {
+  bottom: -3px;
+  right: -3px;
+  cursor: nwse-resize;
+}
+
+.os-resize-handle.sw {
+  bottom: -3px;
+  left: -3px;
+  cursor: nesw-resize;
+}
+
+.os-desktop-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  pointer-events: none;
+  color: var(--text-muted);
+}
+
+.os-desktop-empty p {
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.os-desktop-empty span {
+  font-size: var(--font-size-sm);
+}
+
+.os-dock {
+  height: var(--os-dock-height);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  overflow-x: auto;
+  border-top: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
+  background: color-mix(in srgb, var(--bg-secondary) 74%, transparent);
+  backdrop-filter: blur(14px);
+  padding: var(--space-2) var(--space-3);
+}
+
+.os-dock-item {
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--bg-primary) 68%, transparent);
+  min-width: 78px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 8px 10px 7px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
+}
+
+.os-dock-item:hover,
+.os-dock-item:focus-visible {
+  outline: none;
+  transform: translateY(-2px);
+  border-color: color-mix(in srgb, var(--accent-primary) 26%, var(--border-default));
+  background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
+  color: var(--text-primary);
+}
+
+.os-dock-item.open {
+  border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-default));
+}
+
+.os-dock-item.focused {
+  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-secondary));
+  border-color: color-mix(in srgb, var(--accent-primary) 34%, var(--border-default));
+  color: var(--text-primary);
+}
+
+.os-dock-item-icon {
+  font-size: 1.08rem;
+  line-height: 1;
+}
+
+.os-dock-item-label {
+  font-size: 0.68rem;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+}
+
+.os-dock-indicator {
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  opacity: 0;
+  background: color-mix(in srgb, var(--accent-primary) 72%, white);
+}
+
+.os-dock-item.open .os-dock-indicator {
+  opacity: 1;
+}
+
+body.os-dragging * {
+  user-select: none !important;
+}
+
+body.os-dragging .os-window-titlebar {
+  cursor: grabbing;
+}
+
+@media (max-width: 1280px) {
+  .os-workspace {
+    grid-template-columns: minmax(170px, 208px) minmax(0, 1fr);
+  }
+}

From ae045f6d37c9ac9a259d15da098a178ccc058090 Mon Sep 17 00:00:00 2001
From: Steve James <sjames@cloudflare.com>
Date: Tue, 24 Feb 2026 19:58:43 +0100
Subject: [PATCH 2/6] second pass

---
 gateway/ui/index.html                       |   2 +-
 gateway/ui/src/react/components/OsShell.tsx | 857 ++++++++++++++++++--
 gateway/ui/src/styles/os-shell.css          | 584 +++++++++++--
 3 files changed, 1319 insertions(+), 124 deletions(-)

diff --git a/gateway/ui/index.html b/gateway/ui/index.html
index 6ca32a7..81ca668 100644
--- a/gateway/ui/index.html
+++ b/gateway/ui/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="app"></div>
diff --git a/gateway/ui/src/react/components/OsShell.tsx b/gateway/ui/src/react/components/OsShell.tsx
index 4f78af7..1ec6f42 100644
--- a/gateway/ui/src/react/components/OsShell.tsx
+++ b/gateway/ui/src/react/components/OsShell.tsx
@@ -6,6 +6,8 @@ import {
   useMemo,
   useRef,
   useState,
+  type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
 } from "react";
 import { TAB_GROUPS, TAB_ICONS, TAB_LABELS, type Tab } from "../../ui/types";
@@ -14,6 +16,27 @@ import { preloadTabView, TabView } from "../tabViews";
 const WINDOW_MIN_WIDTH = 420;
 const WINDOW_MIN_HEIGHT = 280;
 const WINDOW_MARGIN = 12;
+const SNAP_THRESHOLD = 28;
+const CLOCK_REFRESH_MS = 15_000;
+
+const TAB_ACCENTS: Record<Tab, string> = {
+  chat: "hsl(191 95% 58%)",
+  overview: "hsl(36 96% 60%)",
+  sessions: "hsl(164 80% 52%)",
+  channels: "hsl(9 88% 63%)",
+  nodes: "hsl(214 90% 62%)",
+  workspace: "hsl(152 70% 48%)",
+  cron: "hsl(48 98% 59%)",
+  logs: "hsl(2 88% 63%)",
+  pairing: "hsl(24 92% 64%)",
+  config: "hsl(205 68% 68%)",
+  debug: "hsl(337 84% 62%)",
+};
+
+const CLOCK_FORMATTER = new Intl.DateTimeFormat(undefined, {
+  hour: "numeric",
+  minute: "2-digit",
+});
 
 type WindowRect = {
   x: number;
@@ -28,10 +51,12 @@ type OsWindow = WindowRect & {
   z: number;
   minimized: boolean;
   maximized: boolean;
+  snapped: "left" | "right" | null;
   restoreRect?: WindowRect;
 };
 
 type ResizeEdge = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
+type SnapZone = "left" | "right" | "top";
 
 type InteractionState =
   | {
@@ -50,6 +75,24 @@ type InteractionState =
       startRect: WindowRect;
     };
 
+type OpenWindowOptions = {
+  syncTab?: boolean;
+  newWindow?: boolean;
+};
+
+type SnapPreviewState = {
+  zone: SnapZone;
+  rect: WindowRect;
+};
+
+type CommandAction = {
+  id: string;
+  label: string;
+  hint?: string;
+  keywords?: string[];
+  run: () => void;
+};
+
 type OsShellProps = {
   tab: Tab;
   onSwitchTab: (tab: Tab) => void;
@@ -64,6 +107,28 @@ function clamp(value: number, min: number, max: number): number {
   return Math.min(max, Math.max(min, value));
 }
 
+function isTypingTarget(target: EventTarget | null): boolean {
+  const element = target as HTMLElement | null;
+  if (!element) {
+    return false;
+  }
+  const tagName = element.tagName;
+  return (
+    element.isContentEditable ||
+    tagName === "INPUT" ||
+    tagName === "TEXTAREA" ||
+    tagName === "SELECT"
+  );
+}
+
+function shouldOpenNewWindow(event: ReactMouseEvent<HTMLButtonElement>): boolean {
+  return event.altKey || event.shiftKey || event.metaKey || event.ctrlKey;
+}
+
+function formatClock(date: Date): string {
+  return CLOCK_FORMATTER.format(date);
+}
+
 function getDesktopBounds(node: HTMLDivElement | null): WindowRect {
   if (node) {
     const rect = node.getBoundingClientRect();
@@ -89,6 +154,34 @@ function getDesktopBounds(node: HTMLDivElement | null): WindowRect {
   return { x: 0, y: 0, width: 960, height: 640 };
 }
 
+function getDesktopClientBounds(node: HTMLDivElement | null): {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+} {
+  if (node) {
+    const rect = node.getBoundingClientRect();
+    return {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height,
+    };
+  }
+
+  if (typeof window !== "undefined") {
+    return {
+      left: 0,
+      top: 0,
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+  }
+
+  return { left: 0, top: 0, width: 960, height: 640 };
+}
+
 function clampRectToBounds(rect: WindowRect, bounds: WindowRect): WindowRect {
   const maxWidth = Math.max(WINDOW_MIN_WIDTH, bounds.width - WINDOW_MARGIN * 2);
   const maxHeight = Math.max(WINDOW_MIN_HEIGHT, bounds.height - WINDOW_MARGIN * 2);
@@ -112,8 +205,8 @@ function createWindow(
   bounds: WindowRect,
 ): OsWindow {
   const baseRect: WindowRect = {
-    x: 36 + (index % 6) * 24,
-    y: 34 + (index % 6) * 18,
+    x: 36 + (index % 7) * 24,
+    y: 34 + (index % 7) * 18,
     width: Math.round(bounds.width * 0.68),
     height: Math.round(bounds.height * 0.74),
   };
@@ -124,6 +217,7 @@ function createWindow(
     z,
     minimized: false,
     maximized: false,
+    snapped: null,
     ...rect,
   };
 }
@@ -173,6 +267,63 @@ function resizeRect(
   );
 }
 
+function detectSnapZone(
+  clientX: number,
+  clientY: number,
+  desktopClientBounds: { left: number; top: number; width: number; height: number },
+): SnapZone | null {
+  const localX = clientX - desktopClientBounds.left;
+  const localY = clientY - desktopClientBounds.top;
+
+  if (
+    localX < 0 ||
+    localY < 0 ||
+    localX > desktopClientBounds.width ||
+    localY > desktopClientBounds.height
+  ) {
+    return null;
+  }
+
+  if (localY <= SNAP_THRESHOLD) {
+    return "top";
+  }
+  if (localX <= SNAP_THRESHOLD) {
+    return "left";
+  }
+  if (localX >= desktopClientBounds.width - SNAP_THRESHOLD) {
+    return "right";
+  }
+  return null;
+}
+
+function getSnapRect(zone: SnapZone, bounds: WindowRect): WindowRect {
+  if (zone === "top") {
+    return {
+      x: 0,
+      y: 0,
+      width: bounds.width,
+      height: bounds.height,
+    };
+  }
+
+  const halfWidth = Math.max(WINDOW_MIN_WIDTH, Math.floor(bounds.width / 2));
+  if (zone === "left") {
+    return {
+      x: 0,
+      y: 0,
+      width: halfWidth,
+      height: bounds.height,
+    };
+  }
+
+  return {
+    x: bounds.width - halfWidth,
+    y: 0,
+    width: halfWidth,
+    height: bounds.height,
+  };
+}
+
 const RESIZE_HANDLES: { edge: ResizeEdge; className: string }[] = [
   { edge: "n", className: "os-resize-handle n" },
   { edge: "s", className: "os-resize-handle s" },
@@ -194,8 +345,10 @@ export function OsShell({
   onExitOsMode,
 }: OsShellProps) {
   const desktopRef = useRef<HTMLDivElement | null>(null);
+  const commandInputRef = useRef<HTMLInputElement | null>(null);
   const interactionRef = useRef<InteractionState | null>(null);
   const windowsRef = useRef<OsWindow[]>([]);
+  const snapPreviewRef = useRef<SnapPreviewState | null>(null);
   const focusedWindowIdRef = useRef<number | null>(1);
   const nextWindowIdRef = useRef(2);
   const nextZRef = useRef(2);
@@ -205,9 +358,17 @@ export function OsShell({
     return [createWindow(tab, 1, 1, 0, bounds)];
   });
   const [focusedWindowId, setFocusedWindowId] = useState<number | null>(1);
+  const [snapPreview, setSnapPreview] = useState<SnapPreviewState | null>(null);
+  const [commandOpen, setCommandOpen] = useState(false);
+  const [commandQuery, setCommandQuery] = useState("");
+  const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
+  const [clockLabel, setClockLabel] = useState(() => formatClock(new Date()));
 
   const launchTabs = useMemo(() => TAB_GROUPS.flatMap((group) => group.tabs), []);
-  const openTabs = useMemo(() => new Set(windows.map((windowState) => windowState.tab)), [windows]);
+  const openTabs = useMemo(
+    () => new Set(windows.map((windowState) => windowState.tab)),
+    [windows],
+  );
   const visibleWindows = useMemo(
     () =>
       windows
@@ -215,10 +376,43 @@ export function OsShell({
         .sort((left, right) => left.z - right.z),
     [windows],
   );
-  const focusedTab = useMemo(
-    () => windows.find((windowState) => windowState.id === focusedWindowId)?.tab ?? null,
+  const focusedWindow = useMemo(
+    () =>
+      focusedWindowId === null
+        ? null
+        : windows.find((windowState) => windowState.id === focusedWindowId) ?? null,
     [focusedWindowId, windows],
   );
+  const focusedTab = focusedWindow?.tab ?? null;
+  const focusedTabLabel = focusedTab ? TAB_LABELS[focusedTab] : "No focus";
+  const totalWindowCount = windows.length;
+  const visibleWindowCount = visibleWindows.length;
+  const shellFocusAccent = focusedTab
+    ? TAB_ACCENTS[focusedTab]
+    : "var(--accent-primary)";
+  const shellStyle = useMemo(
+    () =>
+      ({
+        "--os-focus-accent": shellFocusAccent,
+      }) as CSSProperties,
+    [shellFocusAccent],
+  );
+  const connectionStateLabel = useMemo(() => {
+    if (connectionState === "connected") {
+      return "online";
+    }
+    if (connectionState === "connecting") {
+      return "linking";
+    }
+    return "offline";
+  }, [connectionState]);
+  const windowCountByTab = useMemo(() => {
+    const counts: Partial<Record<Tab, number>> = {};
+    for (const windowState of windows) {
+      counts[windowState.tab] = (counts[windowState.tab] ?? 0) + 1;
+    }
+    return counts;
+  }, [windows]);
 
   useEffect(() => {
     windowsRef.current = windows;
@@ -228,6 +422,17 @@ export function OsShell({
     focusedWindowIdRef.current = focusedWindowId;
   }, [focusedWindowId]);
 
+  useEffect(() => {
+    const updateClock = () => {
+      setClockLabel(formatClock(new Date()));
+    };
+    updateClock();
+    const interval = window.setInterval(updateClock, CLOCK_REFRESH_MS);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, []);
+
   const connectionBadgeVariant = useMemo(() => {
     if (connectionState === "connected") {
       return "primary";
@@ -265,14 +470,17 @@ export function OsShell({
   );
 
   const openWindow = useCallback(
-    (windowTab: Tab, syncTab = true) => {
+    (windowTab: Tab, options: OpenWindowOptions = {}) => {
+      const { newWindow = false, syncTab = true } = options;
       preloadTabView(windowTab);
-      const existing = windowsRef.current.find(
-        (windowState) => windowState.tab === windowTab,
-      );
-      if (existing) {
-        focusWindow(existing.id, syncTab);
-        return;
+
+      const existingTopWindow = windowsRef.current
+        .filter((windowState) => windowState.tab === windowTab)
+        .sort((left, right) => right.z - left.z)[0];
+
+      if (existingTopWindow && !newWindow) {
+        focusWindow(existingTopWindow.id, syncTab);
+        return existingTopWindow.id;
       }
 
       const bounds = getDesktopBounds(desktopRef.current);
@@ -291,6 +499,7 @@ export function OsShell({
       if (syncTab) {
         onSwitchTab(windowTab);
       }
+      return windowId;
     },
     [focusWindow, onSwitchTab],
   );
@@ -350,7 +559,10 @@ export function OsShell({
       setWindows((previous) =>
         previous.map((windowState) =>
           windowState.id === windowId
-            ? { ...windowState, minimized: true }
+            ? {
+                ...windowState,
+                minimized: true,
+              }
             : windowState,
         ),
       );
@@ -360,10 +572,7 @@ export function OsShell({
       }
 
       const nextVisible = currentWindows
-        .filter(
-          (windowState) =>
-            windowState.id !== windowId && !windowState.minimized,
-        )
+        .filter((windowState) => windowState.id !== windowId && !windowState.minimized)
         .sort((left, right) => right.z - left.z);
       if (!nextVisible.length) {
         setFocusedWindowId(null);
@@ -374,32 +583,55 @@ export function OsShell({
     [focusWindow],
   );
 
+  const restoreWindow = useCallback(
+    (windowId: number) => {
+      const target = windowsRef.current.find((windowState) => windowState.id === windowId);
+      if (!target || !target.restoreRect) {
+        return;
+      }
+      const bounds = getDesktopBounds(desktopRef.current);
+      const restored = clampRectToBounds(target.restoreRect, bounds);
+      const nextZ = nextZRef.current++;
+
+      setWindows((previous) =>
+        previous.map((windowState) =>
+          windowState.id === windowId
+            ? {
+                ...windowState,
+                ...restored,
+                z: nextZ,
+                maximized: false,
+                snapped: null,
+                restoreRect: undefined,
+              }
+            : windowState,
+        ),
+      );
+      setFocusedWindowId(windowId);
+      onSwitchTab(target.tab);
+    },
+    [onSwitchTab],
+  );
+
   const toggleWindowMaximized = useCallback(
     (windowId: number) => {
       const current = windowsRef.current.find((windowState) => windowState.id === windowId);
       if (!current) {
         return;
       }
+      if (current.maximized) {
+        restoreWindow(windowId);
+        return;
+      }
+
       const bounds = getDesktopBounds(desktopRef.current);
       const nextZ = nextZRef.current++;
+
       setWindows((previous) =>
         previous.map((windowState) => {
           if (windowState.id !== windowId) {
             return windowState;
           }
-          if (windowState.maximized) {
-            const restored = clampRectToBounds(
-              windowState.restoreRect ?? windowState,
-              bounds,
-            );
-            return {
-              ...windowState,
-              ...restored,
-              maximized: false,
-              restoreRect: undefined,
-              z: nextZ,
-            };
-          }
           return {
             ...windowState,
             x: 0,
@@ -407,6 +639,7 @@ export function OsShell({
             width: bounds.width,
             height: bounds.height,
             maximized: true,
+            snapped: null,
             restoreRect: {
               x: windowState.x,
               y: windowState.y,
@@ -420,6 +653,48 @@ export function OsShell({
       setFocusedWindowId(windowId);
       onSwitchTab(current.tab);
     },
+    [onSwitchTab, restoreWindow],
+  );
+
+  const snapWindow = useCallback(
+    (windowId: number, zone: SnapZone) => {
+      const target = windowsRef.current.find((windowState) => windowState.id === windowId);
+      if (!target) {
+        return;
+      }
+      const bounds = getDesktopBounds(desktopRef.current);
+      const snappedRect = clampRectToBounds(getSnapRect(zone, bounds), bounds);
+      const nextZ = nextZRef.current++;
+
+      setWindows((previous) =>
+        previous.map((windowState) => {
+          if (windowState.id !== windowId) {
+            return windowState;
+          }
+
+          const preserveRestoreRect =
+            windowState.restoreRect ??
+            ({
+              x: windowState.x,
+              y: windowState.y,
+              width: windowState.width,
+              height: windowState.height,
+            } satisfies WindowRect);
+
+          return {
+            ...windowState,
+            ...snappedRect,
+            z: nextZ,
+            maximized: zone === "top",
+            snapped: zone === "top" ? null : zone,
+            restoreRect: preserveRestoreRect,
+          };
+        }),
+      );
+
+      setFocusedWindowId(windowId);
+      onSwitchTab(target.tab);
+    },
     [onSwitchTab],
   );
 
@@ -436,19 +711,40 @@ export function OsShell({
         return;
       }
 
+      const bounds = getDesktopBounds(desktopRef.current);
+      let startRect: WindowRect = {
+        x: target.x,
+        y: target.y,
+        width: target.width,
+        height: target.height,
+      };
+
+      if (target.snapped && target.restoreRect) {
+        startRect = clampRectToBounds(target.restoreRect, bounds);
+        setWindows((previous) =>
+          previous.map((windowState) =>
+            windowState.id === windowId
+              ? {
+                  ...windowState,
+                  ...startRect,
+                  snapped: null,
+                  restoreRect: undefined,
+                }
+              : windowState,
+          ),
+        );
+      }
+
       focusWindow(windowId);
       interactionRef.current = {
         type: "drag",
         windowId,
         startClientX: event.clientX,
         startClientY: event.clientY,
-        startRect: {
-          x: target.x,
-          y: target.y,
-          width: target.width,
-          height: target.height,
-        },
+        startRect,
       };
+      snapPreviewRef.current = null;
+      setSnapPreview(null);
       document.body.classList.add("os-dragging");
       event.preventDefault();
     },
@@ -483,6 +779,8 @@ export function OsShell({
           height: target.height,
         },
       };
+      snapPreviewRef.current = null;
+      setSnapPreview(null);
       document.body.classList.add("os-dragging");
       event.preventDefault();
       event.stopPropagation();
@@ -501,13 +799,13 @@ export function OsShell({
       const deltaX = event.clientX - interaction.startClientX;
       const deltaY = event.clientY - interaction.startClientY;
 
-      setWindows((previous) =>
-        previous.map((windowState) => {
-          if (windowState.id !== interaction.windowId) {
-            return windowState;
-          }
+      if (interaction.type === "drag") {
+        setWindows((previous) =>
+          previous.map((windowState) => {
+            if (windowState.id !== interaction.windowId) {
+              return windowState;
+            }
 
-          if (interaction.type === "drag") {
             const nextRect = clampRectToBounds(
               {
                 ...interaction.startRect,
@@ -516,31 +814,67 @@ export function OsShell({
               },
               bounds,
             );
+
             return {
               ...windowState,
               x: nextRect.x,
               y: nextRect.y,
             };
-          }
+          }),
+        );
 
-          const nextRect = resizeRect(
-            interaction.startRect,
-            interaction.edge,
-            deltaX,
-            deltaY,
-            bounds,
-          );
-          return { ...windowState, ...nextRect };
-        }),
-      );
+        const desktopClientBounds = getDesktopClientBounds(desktopRef.current);
+        const snapZone = detectSnapZone(
+          event.clientX,
+          event.clientY,
+          desktopClientBounds,
+        );
+        const nextPreview = snapZone
+          ? {
+              zone: snapZone,
+              rect: clampRectToBounds(getSnapRect(snapZone, bounds), bounds),
+            }
+          : null;
+        if (snapPreviewRef.current?.zone !== nextPreview?.zone) {
+          snapPreviewRef.current = nextPreview;
+          setSnapPreview(nextPreview);
+        }
+      } else {
+        setWindows((previous) =>
+          previous.map((windowState) => {
+            if (windowState.id !== interaction.windowId) {
+              return windowState;
+            }
+
+            const nextRect = resizeRect(
+              interaction.startRect,
+              interaction.edge,
+              deltaX,
+              deltaY,
+              bounds,
+            );
+            return { ...windowState, ...nextRect };
+          }),
+        );
+      }
     };
 
     const stopInteraction = () => {
-      if (!interactionRef.current) {
+      const interaction = interactionRef.current;
+      if (!interaction) {
         return;
       }
+
       interactionRef.current = null;
       document.body.classList.remove("os-dragging");
+
+      const preview = snapPreviewRef.current;
+      snapPreviewRef.current = null;
+      setSnapPreview(null);
+
+      if (interaction.type === "drag" && preview) {
+        snapWindow(interaction.windowId, preview.zone);
+      }
     };
 
     window.addEventListener("pointermove", onPointerMove);
@@ -552,7 +886,7 @@ export function OsShell({
       window.removeEventListener("pointercancel", stopInteraction);
       document.body.classList.remove("os-dragging");
     };
-  }, []);
+  }, [snapWindow]);
 
   useEffect(() => {
     const onResize = () => {
@@ -568,6 +902,7 @@ export function OsShell({
               height: bounds.height,
             };
           }
+
           const nextRect = clampRectToBounds(windowState, bounds);
           return { ...windowState, ...nextRect };
         }),
@@ -582,39 +917,287 @@ export function OsShell({
 
   useEffect(() => {
     preloadTabView(tab);
-    const existing = windowsRef.current.find((windowState) => windowState.tab === tab);
+    const existing = windowsRef.current
+      .filter((windowState) => windowState.tab === tab)
+      .sort((left, right) => right.z - left.z)[0];
     if (existing) {
       if (focusedWindowIdRef.current !== existing.id || existing.minimized) {
         focusWindow(existing.id, false);
       }
       return;
     }
-    openWindow(tab, false);
+    openWindow(tab, { syncTab: false });
   }, [focusWindow, openWindow, tab]);
 
+  const commandActions = useMemo<CommandAction[]>(() => {
+    const actions: CommandAction[] = [];
+
+    for (const windowTab of launchTabs) {
+      const tabLabel = TAB_LABELS[windowTab];
+      const count = windowCountByTab[windowTab] ?? 0;
+      actions.push({
+        id: `focus-${windowTab}`,
+        label: count ? `Focus ${tabLabel}` : `Open ${tabLabel}`,
+        hint: count ? `${count} window${count > 1 ? "s" : ""} running` : "launch app",
+        keywords: [windowTab, tabLabel, "focus", "open"],
+        run: () => {
+          openWindow(windowTab, { newWindow: false });
+        },
+      });
+      actions.push({
+        id: `new-${windowTab}`,
+        label: `Open new ${tabLabel} window`,
+        hint: "spawn parallel workspace",
+        keywords: [windowTab, tabLabel, "new", "window", "duplicate"],
+        run: () => {
+          openWindow(windowTab, { newWindow: true });
+        },
+      });
+    }
+
+    if (focusedWindow) {
+      actions.push({
+        id: "close-focused",
+        label: "Close focused window",
+        hint: "Cmd/Ctrl + W",
+        keywords: ["close", "window"],
+        run: () => closeWindow(focusedWindow.id),
+      });
+      actions.push({
+        id: "minimize-focused",
+        label: "Minimize focused window",
+        hint: "hide to dock",
+        keywords: ["minimize", "hide", "window"],
+        run: () => minimizeWindow(focusedWindow.id),
+      });
+      actions.push({
+        id: focusedWindow.maximized ? "restore-focused" : "maximize-focused",
+        label: focusedWindow.maximized
+          ? "Restore focused window"
+          : "Maximize focused window",
+        hint: focusedWindow.maximized ? "return to previous size" : "fill desktop",
+        keywords: ["maximize", "restore", "window"],
+        run: () => {
+          if (focusedWindow.maximized) {
+            restoreWindow(focusedWindow.id);
+            return;
+          }
+          toggleWindowMaximized(focusedWindow.id);
+        },
+      });
+      actions.push({
+        id: "snap-left-focused",
+        label: "Snap focused window left",
+        hint: "Shift + Left Arrow",
+        keywords: ["snap", "left", "window"],
+        run: () => snapWindow(focusedWindow.id, "left"),
+      });
+      actions.push({
+        id: "snap-right-focused",
+        label: "Snap focused window right",
+        hint: "Shift + Right Arrow",
+        keywords: ["snap", "right", "window"],
+        run: () => snapWindow(focusedWindow.id, "right"),
+      });
+      actions.push({
+        id: "snap-top-focused",
+        label: "Snap focused window full screen",
+        hint: "Shift + Up Arrow",
+        keywords: ["snap", "maximize", "top", "window"],
+        run: () => snapWindow(focusedWindow.id, "top"),
+      });
+    }
+
+    actions.push({
+      id: "toggle-theme",
+      label: "Toggle theme",
+      hint: "switch light/dark",
+      keywords: ["theme", "dark", "light"],
+      run: () => onToggleTheme(),
+    });
+    actions.push({
+      id: "exit-os-mode",
+      label: "Switch to classic view",
+      hint: "disable OS shell",
+      keywords: ["classic", "mode", "layout"],
+      run: () => onExitOsMode(),
+    });
+    actions.push({
+      id: "disconnect",
+      label: "Disconnect gateway",
+      hint: "close websocket session",
+      keywords: ["disconnect", "gateway", "logout"],
+      run: () => onDisconnect(),
+    });
+
+    return actions;
+  }, [
+    closeWindow,
+    focusedWindow,
+    launchTabs,
+    minimizeWindow,
+    onDisconnect,
+    onExitOsMode,
+    onToggleTheme,
+    openWindow,
+    restoreWindow,
+    snapWindow,
+    toggleWindowMaximized,
+    windowCountByTab,
+  ]);
+
+  const filteredCommandActions = useMemo(() => {
+    const query = commandQuery.trim().toLowerCase();
+    if (!query) {
+      return commandActions;
+    }
+    return commandActions.filter((action) => {
+      const corpus = [
+        action.label,
+        action.hint ?? "",
+        ...(action.keywords ?? []),
+      ]
+        .join(" ")
+        .toLowerCase();
+      return corpus.includes(query);
+    });
+  }, [commandActions, commandQuery]);
+
+  const executeCommand = useCallback((action: CommandAction) => {
+    action.run();
+    setCommandOpen(false);
+    setCommandQuery("");
+    setSelectedCommandIndex(0);
+  }, []);
+
+  useEffect(() => {
+    setSelectedCommandIndex(0);
+  }, [commandQuery, commandOpen]);
+
+  useEffect(() => {
+    if (selectedCommandIndex < filteredCommandActions.length) {
+      return;
+    }
+    setSelectedCommandIndex(Math.max(0, filteredCommandActions.length - 1));
+  }, [filteredCommandActions.length, selectedCommandIndex]);
+
+  useEffect(() => {
+    if (!commandOpen) {
+      return;
+    }
+    const frame = window.requestAnimationFrame(() => {
+      commandInputRef.current?.focus();
+    });
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [commandOpen]);
+
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
-      if (!(event.metaKey || event.ctrlKey)) {
+      const metaOrCtrl = event.metaKey || event.ctrlKey;
+      const lowerKey = event.key.toLowerCase();
+
+      if (metaOrCtrl && lowerKey === "k") {
+        event.preventDefault();
+        setCommandOpen(true);
         return;
       }
-      if (event.key.toLowerCase() !== "w") {
+
+      if (commandOpen) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          setCommandOpen(false);
+          setCommandQuery("");
+          return;
+        }
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          setSelectedCommandIndex((current) => {
+            if (!filteredCommandActions.length) {
+              return 0;
+            }
+            return (current + 1) % filteredCommandActions.length;
+          });
+          return;
+        }
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          setSelectedCommandIndex((current) => {
+            if (!filteredCommandActions.length) {
+              return 0;
+            }
+            return (current - 1 + filteredCommandActions.length) % filteredCommandActions.length;
+          });
+          return;
+        }
+        if (event.key === "Enter") {
+          event.preventDefault();
+          if (!filteredCommandActions.length) {
+            return;
+          }
+          executeCommand(
+            filteredCommandActions[selectedCommandIndex] ?? filteredCommandActions[0],
+          );
+        }
         return;
       }
-      if (focusedWindowIdRef.current === null) {
+
+      if (metaOrCtrl && lowerKey === "w") {
+        if (focusedWindowIdRef.current === null) {
+          return;
+        }
+        event.preventDefault();
+        closeWindow(focusedWindowIdRef.current);
         return;
       }
-      event.preventDefault();
-      closeWindow(focusedWindowIdRef.current);
+
+      if (isTypingTarget(event.target)) {
+        return;
+      }
+
+      if (event.shiftKey && !metaOrCtrl && focusedWindowIdRef.current !== null) {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          snapWindow(focusedWindowIdRef.current, "left");
+          return;
+        }
+        if (event.key === "ArrowRight") {
+          event.preventDefault();
+          snapWindow(focusedWindowIdRef.current, "right");
+          return;
+        }
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          snapWindow(focusedWindowIdRef.current, "top");
+        }
+      }
     };
 
     window.addEventListener("keydown", onKeyDown);
     return () => {
       window.removeEventListener("keydown", onKeyDown);
     };
-  }, [closeWindow]);
+  }, [
+    closeWindow,
+    commandOpen,
+    executeCommand,
+    filteredCommandActions,
+    selectedCommandIndex,
+    snapWindow,
+  ]);
+
+  const onAppClick = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>, windowTab: Tab) => {
+      openWindow(windowTab, {
+        newWindow: shouldOpenNewWindow(event),
+      });
+    },
+    [openWindow],
+  );
 
   return (
-    <div className="os-shell">
+    <div className="os-shell" style={shellStyle}>
       <header className="os-menubar">
         <div className="os-menubar-brand">
           <span className="os-menubar-logo">⚡</span>
@@ -624,6 +1207,21 @@ export function OsShell({
           <Badge className="ui-badge-fix" variant={connectionBadgeVariant}>
             {connectionState}
           </Badge>
+          <div className="os-menubar-telemetry">
+            <span className="os-menubar-chip">
+              {totalWindowCount} window{totalWindowCount === 1 ? "" : "s"}
+            </span>
+            <span className="os-menubar-chip">{focusedTabLabel}</span>
+            <span className="os-menubar-chip mono">{clockLabel}</span>
+          </div>
+          <Button
+            variant="secondary"
+            className="ui-button-fix"
+            size="sm"
+            onClick={() => setCommandOpen(true)}
+          >
+            ⌘K
+          </Button>
           <Button
             variant="secondary"
             className="ui-button-fix"
@@ -661,6 +1259,7 @@ export function OsShell({
                 {group.tabs.map((windowTab) => {
                   const isOpen = openTabs.has(windowTab);
                   const isFocused = focusedTab === windowTab;
+                  const count = windowCountByTab[windowTab] ?? 0;
                   return (
                     <button
                       key={windowTab}
@@ -668,33 +1267,81 @@ export function OsShell({
                       className={`os-launch-item ${isOpen ? "open" : ""} ${
                         isFocused ? "focused" : ""
                       }`}
-                      onClick={() => openWindow(windowTab)}
+                      style={
+                        {
+                          "--os-item-accent": TAB_ACCENTS[windowTab],
+                        } as CSSProperties
+                      }
+                      onClick={(event) => onAppClick(event, windowTab)}
                       onMouseEnter={() => preloadTabView(windowTab)}
                       onFocus={() => preloadTabView(windowTab)}
                     >
                       <span className="os-launch-icon">{TAB_ICONS[windowTab]}</span>
                       <span className="os-launch-label">{TAB_LABELS[windowTab]}</span>
+                      {count > 1 ? <span className="os-launch-count">{count}</span> : null}
                     </button>
                   );
                 })}
               </div>
             </section>
           ))}
+          <p className="os-launch-hint">
+            Tip: hold <kbd>Shift</kbd>/<kbd>Alt</kbd>/<kbd>Cmd</kbd> while opening an app to spawn another window.
+          </p>
         </aside>
 
         <main className="os-desktop" ref={desktopRef}>
+          {snapPreview ? (
+            <div
+              className={`os-snap-preview ${snapPreview.zone}`}
+              style={{
+                transform: `translate(${snapPreview.rect.x}px, ${snapPreview.rect.y}px)`,
+                width: `${snapPreview.rect.width}px`,
+                height: `${snapPreview.rect.height}px`,
+              }}
+            />
+          ) : null}
+
+          <aside className="os-status-rail">
+            <section className="os-status-card">
+              <p className="os-status-title">System Pulse</p>
+              <div className="os-status-grid">
+                <span>Link</span>
+                <strong>{connectionStateLabel}</strong>
+                <span>Active</span>
+                <strong>{focusedTabLabel}</strong>
+                <span>Visible</span>
+                <strong>{visibleWindowCount}</strong>
+                <span>Theme</span>
+                <strong>{theme}</strong>
+              </div>
+            </section>
+            <section className="os-status-card">
+              <p className="os-status-title">Quick Keys</p>
+              <p className="os-status-shortcut">
+                <kbd>⌘K</kbd> palette
+              </p>
+              <p className="os-status-shortcut">
+                <kbd>⇧</kbd> + <kbd>←</kbd>/<kbd>→</kbd>/<kbd>↑</kbd> snap
+              </p>
+            </section>
+          </aside>
+
           {visibleWindows.map((windowState) => (
             <section
               key={windowState.id}
               className={`os-window ${
                 focusedWindowId === windowState.id ? "focused" : ""
               } ${windowState.maximized ? "maximized" : ""}`}
-              style={{
-                transform: `translate(${windowState.x}px, ${windowState.y}px)`,
-                width: `${windowState.width}px`,
-                height: `${windowState.height}px`,
-                zIndex: windowState.z,
-              }}
+              style={
+                {
+                  "--os-tab-accent": TAB_ACCENTS[windowState.tab],
+                  transform: `translate(${windowState.x}px, ${windowState.y}px)`,
+                  width: `${windowState.width}px`,
+                  height: `${windowState.height}px`,
+                  zIndex: windowState.z,
+                } as CSSProperties
+              }
               onMouseDown={() => focusWindow(windowState.id)}
             >
               <div
@@ -728,6 +1375,14 @@ export function OsShell({
                   <span className="os-window-title-icon">{TAB_ICONS[windowState.tab]}</span>
                   <span className="os-window-title-label">{TAB_LABELS[windowState.tab]}</span>
                 </div>
+                <button
+                  type="button"
+                  className="os-window-clone"
+                  data-window-action
+                  onClick={() => openWindow(windowState.tab, { newWindow: true })}
+                >
+                  + window
+                </button>
               </div>
 
               <div className="os-window-content">
@@ -761,6 +1416,7 @@ export function OsShell({
         {launchTabs.map((windowTab) => {
           const isOpen = openTabs.has(windowTab);
           const isFocused = focusedTab === windowTab;
+          const count = windowCountByTab[windowTab] ?? 0;
           return (
             <button
               key={windowTab}
@@ -768,17 +1424,74 @@ export function OsShell({
               className={`os-dock-item ${isOpen ? "open" : ""} ${
                 isFocused ? "focused" : ""
               }`}
-              onClick={() => openWindow(windowTab)}
+              style={
+                {
+                  "--os-item-accent": TAB_ACCENTS[windowTab],
+                } as CSSProperties
+              }
+              onClick={(event) => onAppClick(event, windowTab)}
               onMouseEnter={() => preloadTabView(windowTab)}
               onFocus={() => preloadTabView(windowTab)}
             >
               <span className="os-dock-item-icon">{TAB_ICONS[windowTab]}</span>
               <span className="os-dock-item-label">{TAB_LABELS[windowTab]}</span>
+              {count > 1 ? <span className="os-dock-item-count">{count}</span> : null}
               <span className="os-dock-indicator" />
             </button>
           );
         })}
       </footer>
+
+      {commandOpen ? (
+        <div
+          className="os-command-overlay"
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget) {
+              setCommandOpen(false);
+              setCommandQuery("");
+            }
+          }}
+        >
+          <div className="os-command-palette" role="dialog" aria-modal="true">
+            <div className="os-command-header">
+              <p>Command Palette</p>
+              <span>
+                {filteredCommandActions.length} action
+                {filteredCommandActions.length === 1 ? "" : "s"} · ⌘K
+              </span>
+            </div>
+            <input
+              ref={commandInputRef}
+              className="os-command-input"
+              value={commandQuery}
+              onChange={(event) => setCommandQuery(event.target.value)}
+              placeholder="Open app, snap window, switch mode..."
+            />
+            <div className="os-command-results">
+              {filteredCommandActions.length ? (
+                filteredCommandActions.map((action, index) => (
+                  <button
+                    key={action.id}
+                    type="button"
+                    className={`os-command-item ${
+                      index === selectedCommandIndex ? "active" : ""
+                    }`}
+                    onMouseEnter={() => setSelectedCommandIndex(index)}
+                    onClick={() => executeCommand(action)}
+                  >
+                    <span className="os-command-item-label">{action.label}</span>
+                    {action.hint ? (
+                      <span className="os-command-item-hint">{action.hint}</span>
+                    ) : null}
+                  </button>
+                ))
+              ) : (
+                <div className="os-command-empty">No command matches “{commandQuery}”.</div>
+              )}
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/gateway/ui/src/styles/os-shell.css b/gateway/ui/src/styles/os-shell.css
index 257805f..7e208f9 100644
--- a/gateway/ui/src/styles/os-shell.css
+++ b/gateway/ui/src/styles/os-shell.css
@@ -1,16 +1,51 @@
 .os-shell {
-  --os-menubar-height: 48px;
-  --os-dock-height: 74px;
+  --os-menubar-height: 50px;
+  --os-dock-height: 80px;
+  --os-focus-accent: var(--accent-primary);
 
+  position: relative;
+  isolation: isolate;
   display: flex;
   flex-direction: column;
   height: 100dvh;
   min-height: 100dvh;
+  overflow: hidden;
+  font-family: "Space Grotesk", var(--font-sans);
   color: var(--text-primary);
   background:
-    radial-gradient(circle at 10% 6%, color-mix(in srgb, var(--accent-primary) 18%, transparent) 0%, transparent 38%),
-    radial-gradient(circle at 96% -12%, color-mix(in srgb, var(--accent-success) 14%, transparent) 0%, transparent 42%),
-    linear-gradient(140deg, color-mix(in srgb, var(--bg-primary) 90%, #0f172a) 0%, color-mix(in srgb, var(--bg-secondary) 84%, #111827) 100%);
+    radial-gradient(circle at 17% 24%, color-mix(in srgb, var(--os-focus-accent) 14%, transparent) 0%, transparent 34%),
+    radial-gradient(circle at 78% 12%, color-mix(in srgb, #58fff4 10%, transparent) 0%, transparent 29%),
+    linear-gradient(138deg, color-mix(in srgb, var(--bg-primary) 92%, #020617) 0%, color-mix(in srgb, var(--bg-secondary) 74%, #0f172a) 100%);
+}
+
+.os-shell::before,
+.os-shell::after {
+  content: "";
+  position: absolute;
+  inset: -22%;
+  pointer-events: none;
+  filter: blur(72px);
+  opacity: 0.42;
+  z-index: 0;
+}
+
+.os-shell::before {
+  background:
+    radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--accent-primary) 42%, transparent) 0%, transparent 48%),
+    radial-gradient(circle at 78% 12%, color-mix(in srgb, #58fff4 40%, transparent) 0%, transparent 44%);
+  animation: os-aurora-drift 16s ease-in-out infinite alternate;
+}
+
+.os-shell::after {
+  background:
+    radial-gradient(circle at 84% 76%, color-mix(in srgb, #a3b2ff 38%, transparent) 0%, transparent 45%),
+    radial-gradient(circle at 26% 88%, color-mix(in srgb, #6d7cff 36%, transparent) 0%, transparent 48%);
+  animation: os-aurora-drift 21s ease-in-out infinite alternate-reverse;
+}
+
+.os-shell > * {
+  position: relative;
+  z-index: 1;
 }
 
 .os-menubar {
@@ -20,9 +55,9 @@
   justify-content: space-between;
   gap: var(--space-3);
   padding: 0 var(--space-4);
-  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 85%, transparent);
-  background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
-  backdrop-filter: blur(16px);
+  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
+  background: color-mix(in srgb, var(--bg-secondary) 64%, transparent);
+  backdrop-filter: blur(18px) saturate(120%);
 }
 
 .os-menubar-brand {
@@ -33,13 +68,13 @@
 }
 
 .os-menubar-logo {
-  font-size: 1.1rem;
+  font-size: 1rem;
 }
 
 .os-menubar-title {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
   white-space: nowrap;
 }
@@ -50,11 +85,39 @@
   gap: var(--space-2);
 }
 
+.os-menubar-telemetry {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-right: 4px;
+}
+
+.os-menubar-chip {
+  height: 24px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
+  background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
+  color: var(--text-secondary);
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.os-menubar-chip.mono {
+  font-family: var(--font-mono);
+  letter-spacing: 0;
+  text-transform: none;
+}
+
 .os-workspace {
   flex: 1;
   min-height: 0;
   display: grid;
-  grid-template-columns: minmax(200px, 232px) minmax(0, 1fr);
+  grid-template-columns: minmax(214px, 244px) minmax(0, 1fr);
   gap: var(--space-3);
   padding: var(--space-3);
 }
@@ -62,9 +125,10 @@
 .os-launchpad {
   overflow: auto;
   border-radius: var(--radius-lg);
-  border: 1px solid color-mix(in srgb, var(--border-default) 75%, transparent);
-  background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
+  background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
   backdrop-filter: blur(12px);
+  box-shadow: 0 16px 42px rgba(3, 8, 20, 0.26);
   padding: var(--space-3);
 }
 
@@ -73,7 +137,7 @@
 }
 
 .os-launch-group:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--space-2);
 }
 
 .os-launch-group-label {
@@ -81,7 +145,7 @@
   font-size: var(--font-size-xs);
   color: var(--text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   font-weight: 700;
 }
 
@@ -92,12 +156,13 @@
 }
 
 .os-launch-item {
+  --os-item-accent: var(--accent-primary);
   border: 1px solid transparent;
-  background: color-mix(in srgb, var(--bg-primary) 64%, transparent);
+  background: color-mix(in srgb, var(--bg-primary) 66%, transparent);
   border-radius: var(--radius-md);
-  min-height: 42px;
+  min-height: 44px;
   display: grid;
-  grid-template-columns: 28px minmax(0, 1fr);
+  grid-template-columns: 28px minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--space-2);
   padding: 0 var(--space-2);
@@ -109,19 +174,19 @@
 .os-launch-item:hover,
 .os-launch-item:focus-visible {
   outline: none;
-  border-color: color-mix(in srgb, var(--accent-primary) 26%, var(--border-default));
-  background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
+  border-color: color-mix(in srgb, var(--os-item-accent) 36%, var(--border-default));
+  background: color-mix(in srgb, var(--bg-hover) 76%, transparent);
   color: var(--text-primary);
   transform: translateY(-1px);
 }
 
 .os-launch-item.open {
-  border-color: color-mix(in srgb, var(--accent-primary) 24%, var(--border-default));
+  border-color: color-mix(in srgb, var(--os-item-accent) 30%, var(--border-default));
 }
 
 .os-launch-item.focused {
-  background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-secondary));
-  border-color: color-mix(in srgb, var(--accent-primary) 36%, var(--border-default));
+  background: color-mix(in srgb, var(--os-item-accent) 22%, var(--bg-secondary));
+  border-color: color-mix(in srgb, var(--os-item-accent) 44%, var(--border-default));
   color: var(--text-primary);
 }
 
@@ -138,14 +203,52 @@
   overflow: hidden;
 }
 
+.os-launch-count {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--os-item-accent) 26%, transparent);
+  border: 1px solid color-mix(in srgb, var(--os-item-accent) 36%, transparent);
+  color: var(--text-primary);
+  font-size: 0.7rem;
+  font-weight: 700;
+}
+
+.os-launch-hint {
+  margin: var(--space-2) 0 0;
+  font-size: 0.72rem;
+  line-height: 1.45;
+  color: var(--text-muted);
+}
+
+.os-launch-hint kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 20px;
+  border-radius: 6px;
+  padding: 0 6px;
+  margin: 0 2px;
+  border: 1px solid color-mix(in srgb, var(--border-default) 76%, transparent);
+  background: color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
+  font-size: 0.68rem;
+  color: var(--text-secondary);
+}
+
 .os-desktop {
   position: relative;
   min-height: 0;
   overflow: hidden;
   border-radius: var(--radius-lg);
-  border: 1px solid color-mix(in srgb, var(--border-default) 75%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
   background:
-    linear-gradient(130deg, color-mix(in srgb, var(--bg-primary) 80%, #0f172a) 0%, color-mix(in srgb, var(--bg-secondary) 78%, #1f2937) 100%);
+    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--os-focus-accent) 12%, transparent) 0%, transparent 32%),
+    linear-gradient(130deg, color-mix(in srgb, var(--bg-primary) 76%, #030712) 0%, color-mix(in srgb, var(--bg-secondary) 70%, #0b1120) 100%);
 }
 
 .os-desktop::before {
@@ -154,29 +257,163 @@
   inset: 0;
   pointer-events: none;
   background-image:
-    linear-gradient(to right, color-mix(in srgb, var(--border-muted) 36%, transparent) 1px, transparent 1px),
-    linear-gradient(to bottom, color-mix(in srgb, var(--border-muted) 36%, transparent) 1px, transparent 1px);
-  background-size: 40px 40px;
-  opacity: 0.16;
+    linear-gradient(to right, color-mix(in srgb, var(--border-muted) 30%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in srgb, var(--border-muted) 30%, transparent) 1px, transparent 1px);
+  background-size: 42px 42px;
+  opacity: 0.18;
+}
+
+.os-desktop::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--os-focus-accent) 8%, transparent),
+      transparent 20%
+    ),
+    repeating-linear-gradient(
+      180deg,
+      transparent 0,
+      transparent 2px,
+      color-mix(in srgb, var(--bg-tertiary) 12%, transparent) 3px,
+      transparent 4px
+    );
+  mix-blend-mode: screen;
+  opacity: 0.44;
+}
+
+.os-status-rail {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  z-index: 3;
+  width: min(250px, 30%);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+}
+
+.os-status-card {
+  border-radius: 14px;
+  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
+  background: color-mix(in srgb, var(--bg-secondary) 74%, transparent);
+  box-shadow: 0 14px 36px rgba(4, 10, 24, 0.28);
+  backdrop-filter: blur(14px);
+  padding: 12px;
+}
+
+.os-status-title {
+  margin: 0 0 8px;
+  color: var(--text-muted);
+  font-size: 0.67rem;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.os-status-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  row-gap: 6px;
+  column-gap: 8px;
+}
+
+.os-status-grid span {
+  color: var(--text-muted);
+  font-size: 0.72rem;
+}
+
+.os-status-grid strong {
+  color: var(--text-primary);
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.os-status-shortcut {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.74rem;
+  line-height: 1.4;
+}
+
+.os-status-shortcut + .os-status-shortcut {
+  margin-top: 6px;
+}
+
+.os-status-shortcut kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  margin: 0 1px;
+  padding: 0 4px;
+  border: 1px solid color-mix(in srgb, var(--border-default) 75%, transparent);
+  background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
+  font-size: 0.65rem;
+  color: var(--text-secondary);
+}
+
+.os-snap-preview {
+  position: absolute;
+  z-index: 4;
+  pointer-events: none;
+  border-radius: calc(var(--radius-lg) - 2px);
+  border: 1px solid color-mix(in srgb, var(--os-focus-accent) 52%, transparent);
+  background: color-mix(in srgb, var(--os-focus-accent) 14%, transparent);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--os-focus-accent) 32%, transparent),
+    0 24px 56px color-mix(in srgb, var(--os-focus-accent) 24%, transparent);
+  animation: os-snap-pulse 0.45s ease;
 }
 
 .os-window {
+  --os-tab-accent: var(--accent-primary);
   position: absolute;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border-radius: var(--radius-lg);
-  border: 1px solid color-mix(in srgb, var(--border-default) 85%, transparent);
-  background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
-  box-shadow: 0 22px 48px rgba(3, 10, 24, 0.28);
-  transition: box-shadow 0.16s ease, border-color 0.16s ease;
+  border: 1px solid color-mix(in srgb, var(--border-default) 84%, transparent);
+  background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
+  box-shadow: 0 22px 48px rgba(3, 10, 24, 0.34);
+  transition: box-shadow 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
+  animation: os-window-enter 170ms ease-out;
+}
+
+.os-window::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      circle at 72% -14%,
+      color-mix(in srgb, var(--os-tab-accent) 18%, transparent) 0%,
+      transparent 50%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--os-tab-accent) 10%, transparent),
+      transparent 40%
+    );
+  z-index: 0;
+  opacity: 0.8;
 }
 
 .os-window.focused {
-  border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-default));
+  border-color: color-mix(in srgb, var(--os-tab-accent) 42%, var(--border-default));
   box-shadow:
-    0 26px 58px rgba(4, 12, 30, 0.32),
-    0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent);
+    0 26px 58px rgba(4, 12, 30, 0.34),
+    0 0 0 1px color-mix(in srgb, var(--os-tab-accent) 26%, transparent),
+    0 0 38px color-mix(in srgb, var(--os-tab-accent) 18%, transparent);
 }
 
 .os-window.maximized {
@@ -186,15 +423,22 @@
 .os-window-titlebar {
   height: 38px;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--space-3);
   border-bottom: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
   padding: 0 var(--space-3);
-  background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--os-tab-accent) 18%, transparent),
+      color-mix(in srgb, var(--bg-tertiary) 72%, transparent) 32%
+    );
   backdrop-filter: blur(8px);
   user-select: none;
   cursor: grab;
+  position: relative;
+  z-index: 1;
 }
 
 .os-window-actions {
@@ -207,14 +451,14 @@
   width: 12px;
   height: 12px;
   border-radius: 999px;
-  border: 1px solid rgba(0, 0, 0, 0.18);
+  border: 1px solid rgba(0, 0, 0, 0.22);
   cursor: pointer;
   transition: transform 0.12s ease, filter 0.12s ease;
 }
 
 .os-window-action:hover {
   transform: scale(1.08);
-  filter: brightness(1.02);
+  filter: brightness(1.03);
 }
 
 .os-window-action.close {
@@ -248,12 +492,33 @@
   text-overflow: ellipsis;
 }
 
+.os-window-clone {
+  border: 1px solid color-mix(in srgb, var(--border-default) 76%, transparent);
+  border-radius: 999px;
+  height: 26px;
+  padding: 0 10px;
+  background: color-mix(in srgb, var(--bg-tertiary) 74%, transparent);
+  color: var(--text-secondary);
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  transition: all 0.12s ease;
+}
+
+.os-window-clone:hover {
+  border-color: color-mix(in srgb, var(--os-tab-accent) 38%, var(--border-default));
+  color: var(--text-primary);
+  background: color-mix(in srgb, var(--os-tab-accent) 18%, transparent);
+}
+
 .os-window-content {
   flex: 1;
   min-height: 0;
   overflow: auto;
   padding: var(--space-3);
   background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
+  position: relative;
+  z-index: 1;
 }
 
 .os-window-content .view-container {
@@ -368,16 +633,17 @@
   gap: var(--space-2);
   overflow-x: auto;
   border-top: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-secondary) 74%, transparent);
-  backdrop-filter: blur(14px);
+  background: color-mix(in srgb, var(--bg-secondary) 68%, transparent);
+  backdrop-filter: blur(16px);
   padding: var(--space-2) var(--space-3);
 }
 
 .os-dock-item {
+  --os-item-accent: var(--accent-primary);
   border: 1px solid transparent;
   border-radius: var(--radius-md);
   background: color-mix(in srgb, var(--bg-primary) 68%, transparent);
-  min-width: 78px;
+  min-width: 84px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -387,27 +653,49 @@
   color: var(--text-secondary);
   cursor: pointer;
   transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.os-dock-item::before {
+  content: "";
+  position: absolute;
+  left: 14%;
+  right: 14%;
+  top: -9px;
+  height: 18px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--os-item-accent) 44%, transparent);
+  filter: blur(10px);
+  opacity: 0;
+  transition: opacity 0.14s ease;
+  pointer-events: none;
 }
 
 .os-dock-item:hover,
 .os-dock-item:focus-visible {
   outline: none;
   transform: translateY(-2px);
-  border-color: color-mix(in srgb, var(--accent-primary) 26%, var(--border-default));
+  border-color: color-mix(in srgb, var(--os-item-accent) 34%, var(--border-default));
   background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
   color: var(--text-primary);
 }
 
 .os-dock-item.open {
-  border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-default));
+  border-color: color-mix(in srgb, var(--os-item-accent) 26%, var(--border-default));
 }
 
 .os-dock-item.focused {
-  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-secondary));
-  border-color: color-mix(in srgb, var(--accent-primary) 34%, var(--border-default));
+  background: color-mix(in srgb, var(--os-item-accent) 22%, var(--bg-secondary));
+  border-color: color-mix(in srgb, var(--os-item-accent) 42%, var(--border-default));
   color: var(--text-primary);
 }
 
+.os-dock-item:hover::before,
+.os-dock-item.focused::before {
+  opacity: 0.8;
+}
+
 .os-dock-item-icon {
   font-size: 1.08rem;
   line-height: 1;
@@ -415,23 +703,151 @@
 
 .os-dock-item-label {
   font-size: 0.68rem;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.04em;
   white-space: nowrap;
 }
 
+.os-dock-item-count {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--os-item-accent) 28%, transparent);
+  color: var(--text-primary);
+  font-size: 0.64rem;
+  font-weight: 700;
+}
+
 .os-dock-indicator {
   display: block;
   width: 6px;
   height: 6px;
   border-radius: 999px;
   opacity: 0;
-  background: color-mix(in srgb, var(--accent-primary) 72%, white);
+  background: color-mix(in srgb, var(--os-item-accent) 70%, white);
 }
 
 .os-dock-item.open .os-dock-indicator {
   opacity: 1;
 }
 
+.os-command-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 250;
+  background: color-mix(in srgb, #020617 62%, transparent);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: max(14dvh, 84px);
+}
+
+.os-command-palette {
+  width: min(760px, calc(100vw - 32px));
+  border-radius: 18px;
+  border: 1px solid color-mix(in srgb, var(--os-focus-accent) 38%, var(--border-default));
+  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
+  backdrop-filter: blur(18px);
+  box-shadow:
+    0 28px 84px rgba(3, 8, 24, 0.5),
+    0 0 0 1px color-mix(in srgb, var(--os-focus-accent) 28%, transparent);
+  overflow: hidden;
+  animation: os-command-enter 150ms ease-out;
+}
+
+.os-command-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 11px 14px;
+  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
+  color: var(--text-secondary);
+}
+
+.os-command-header p {
+  margin: 0;
+  font-size: 0.74rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 700;
+}
+
+.os-command-header span {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+}
+
+.os-command-input {
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 66%, transparent);
+  background: transparent;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 1.02rem;
+  font-weight: 500;
+  padding: 14px 16px;
+}
+
+.os-command-input:focus {
+  outline: none;
+}
+
+.os-command-input::placeholder {
+  color: var(--text-muted);
+}
+
+.os-command-results {
+  max-height: min(52dvh, 520px);
+  overflow: auto;
+  padding: 8px;
+}
+
+.os-command-item {
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  text-align: left;
+  padding: 10px 12px;
+  cursor: pointer;
+}
+
+.os-command-item:hover,
+.os-command-item.active {
+  border-color: color-mix(in srgb, var(--os-focus-accent) 34%, var(--border-default));
+  background: color-mix(in srgb, var(--os-focus-accent) 18%, transparent);
+  color: var(--text-primary);
+}
+
+.os-command-item-label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.os-command-item-hint {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.os-command-empty {
+  padding: 12px;
+  color: var(--text-muted);
+  font-size: 0.84rem;
+}
+
 body.os-dragging * {
   user-select: none !important;
 }
@@ -440,8 +856,74 @@ body.os-dragging .os-window-titlebar {
   cursor: grabbing;
 }
 
+@keyframes os-aurora-drift {
+  0% {
+    transform: translate3d(-4%, -2%, 0) scale(1);
+  }
+  100% {
+    transform: translate3d(5%, 4%, 0) scale(1.08);
+  }
+}
+
+@keyframes os-snap-pulse {
+  0% {
+    opacity: 0.2;
+    transform: scale(0.985);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes os-window-enter {
+  0% {
+    opacity: 0;
+    filter: saturate(80%);
+  }
+  100% {
+    opacity: 1;
+    filter: saturate(100%);
+  }
+}
+
+@keyframes os-command-enter {
+  0% {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @media (max-width: 1280px) {
   .os-workspace {
-    grid-template-columns: minmax(170px, 208px) minmax(0, 1fr);
+    grid-template-columns: minmax(182px, 216px) minmax(0, 1fr);
+  }
+
+  .os-status-rail {
+    width: min(208px, 30%);
+  }
+}
+
+@media (max-width: 1120px) {
+  .os-menubar-telemetry {
+    display: none;
+  }
+
+  .os-status-rail {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .os-shell::before,
+  .os-shell::after,
+  .os-snap-preview,
+  .os-window,
+  .os-command-palette {
+    animation: none !important;
   }
 }

From bac41bd4166cdd75db6341657b7263021296165a Mon Sep 17 00:00:00 2001
From: Steve James <sjames@cloudflare.com>
Date: Wed, 25 Feb 2026 00:12:09 +0100
Subject: [PATCH 3/6] proper os pt.1

---
 gateway/ui/src/react/App.tsx                |    2 +-
 gateway/ui/src/react/components/OsShell.tsx |  399 +++----
 gateway/ui/src/react/tabViews.tsx           |    5 +
 gateway/ui/src/react/views/SettingsView.tsx |   36 +
 gateway/ui/src/styles/base.css              |  237 ++--
 gateway/ui/src/styles/chat.css              |  428 ++------
 gateway/ui/src/styles/components.css        |  376 +++----
 gateway/ui/src/styles/layout.css            |  392 +------
 gateway/ui/src/styles/os-shell.css          | 1093 ++++++-------------
 gateway/ui/src/ui/app.ts                    |  446 +++++---
 gateway/ui/src/ui/navigation.ts             |    1 +
 gateway/ui/src/ui/types.ts                  |   61 +-
 12 files changed, 1281 insertions(+), 2195 deletions(-)
 create mode 100644 gateway/ui/src/react/views/SettingsView.tsx

diff --git a/gateway/ui/src/react/App.tsx b/gateway/ui/src/react/App.tsx
index 343bcce..169dcb2 100644
--- a/gateway/ui/src/react/App.tsx
+++ b/gateway/ui/src/react/App.tsx
@@ -267,7 +267,7 @@ function MainShell({
                   onMouseEnter={() => preloadTabView(groupTab)}
                   onFocus={() => preloadTabView(groupTab)}
                 >
-                  <span className="nav-item-icon">{TAB_ICONS[groupTab]}</span>
+                  <span className="nav-item-icon" dangerouslySetInnerHTML={{ __html: TAB_ICONS[groupTab] }} />
                   <span className="nav-item-label">{TAB_LABELS[groupTab]}</span>
                 </button>
               ))}
diff --git a/gateway/ui/src/react/components/OsShell.tsx b/gateway/ui/src/react/components/OsShell.tsx
index 1ec6f42..695a397 100644
--- a/gateway/ui/src/react/components/OsShell.tsx
+++ b/gateway/ui/src/react/components/OsShell.tsx
@@ -1,5 +1,3 @@
-import { Badge } from "@cloudflare/kumo/components/badge";
-import { Button } from "@cloudflare/kumo/components/button";
 import {
   useCallback,
   useEffect,
@@ -10,7 +8,7 @@ import {
   type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
 } from "react";
-import { TAB_GROUPS, TAB_ICONS, TAB_LABELS, type Tab } from "../../ui/types";
+import { TAB_ICONS, TAB_LABELS, OS_DOCK_TABS, TAB_GROUPS, type Tab } from "../../ui/types";
 import { preloadTabView, TabView } from "../tabViews";
 
 const WINDOW_MIN_WIDTH = 420;
@@ -31,6 +29,7 @@ const TAB_ACCENTS: Record<Tab, string> = {
   pairing: "hsl(24 92% 64%)",
   config: "hsl(205 68% 68%)",
   debug: "hsl(337 84% 62%)",
+  settings: "hsl(220 60% 65%)",
 };
 
 const CLOCK_FORMATTER = new Intl.DateTimeFormat(undefined, {
@@ -364,7 +363,8 @@ export function OsShell({
   const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
   const [clockLabel, setClockLabel] = useState(() => formatClock(new Date()));
 
-  const launchTabs = useMemo(() => TAB_GROUPS.flatMap((group) => group.tabs), []);
+  const launchTabs = OS_DOCK_TABS;
+  const allTabs = useMemo(() => TAB_GROUPS.flatMap((group) => group.tabs), []);
   const openTabs = useMemo(
     () => new Set(windows.map((windowState) => windowState.tab)),
     [windows],
@@ -932,7 +932,7 @@ export function OsShell({
   const commandActions = useMemo<CommandAction[]>(() => {
     const actions: CommandAction[] = [];
 
-    for (const windowTab of launchTabs) {
+    for (const windowTab of allTabs.concat(launchTabs.filter(t => !allTabs.includes(t)))) {
       const tabLabel = TAB_LABELS[windowTab];
       const count = windowCountByTab[windowTab] ?? 0;
       actions.push({
@@ -1198,253 +1198,159 @@ export function OsShell({
 
   return (
     <div className="os-shell" style={shellStyle}>
-      <header className="os-menubar">
-        <div className="os-menubar-brand">
-          <span className="os-menubar-logo">⚡</span>
-          <span className="os-menubar-title">GSV Control OS</span>
+      {/* ── Ambient Background ── */}
+      <div className="os-ambient">
+        <div className="os-orb os-orb-1" />
+        <div className="os-orb os-orb-2" />
+        <div className="os-orb os-orb-3" />
+      </div>
+
+      {/* ── Status Bar (minimal, macOS-style) ── */}
+      <header className="os-statusbar">
+        <div className="os-statusbar-left">
+          <span className="os-statusbar-brand">GSV</span>
+          <span className={`os-statusbar-dot ${connectionState}`} />
+          <span className="os-statusbar-label">{connectionStateLabel}</span>
         </div>
-        <div className="os-menubar-status">
-          <Badge className="ui-badge-fix" variant={connectionBadgeVariant}>
-            {connectionState}
-          </Badge>
-          <div className="os-menubar-telemetry">
-            <span className="os-menubar-chip">
-              {totalWindowCount} window{totalWindowCount === 1 ? "" : "s"}
-            </span>
-            <span className="os-menubar-chip">{focusedTabLabel}</span>
-            <span className="os-menubar-chip mono">{clockLabel}</span>
-          </div>
-          <Button
-            variant="secondary"
-            className="ui-button-fix"
-            size="sm"
-            onClick={() => setCommandOpen(true)}
-          >
-            ⌘K
-          </Button>
-          <Button
-            variant="secondary"
-            className="ui-button-fix"
-            size="sm"
+        <div className="os-statusbar-right">
+          <button
+            type="button"
+            className="os-statusbar-btn"
             onClick={onExitOsMode}
+            title="Switch to classic view"
           >
             Classic
-          </Button>
-          <Button
-            variant="ghost"
-            shape="square"
-            aria-label="Toggle theme"
-            title="Toggle theme"
-            onClick={onToggleTheme}
-          >
-            {theme === "dark" ? "🌙" : "☀️"}
-          </Button>
-          <Button
-            variant="secondary"
-            className="ui-button-fix"
-            size="sm"
+          </button>
+          <button
+            type="button"
+            className="os-statusbar-btn"
             onClick={onDisconnect}
+            title="Disconnect"
           >
-            Disconnect
-          </Button>
+            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>
+          </button>
+          <span className="os-statusbar-clock">{clockLabel}</span>
         </div>
       </header>
 
-      <div className="os-workspace">
-        <aside className="os-launchpad">
-          {TAB_GROUPS.map((group) => (
-            <section className="os-launch-group" key={group.label}>
-              <h2 className="os-launch-group-label">{group.label}</h2>
-              <div className="os-launch-grid">
-                {group.tabs.map((windowTab) => {
-                  const isOpen = openTabs.has(windowTab);
-                  const isFocused = focusedTab === windowTab;
-                  const count = windowCountByTab[windowTab] ?? 0;
-                  return (
-                    <button
-                      key={windowTab}
-                      type="button"
-                      className={`os-launch-item ${isOpen ? "open" : ""} ${
-                        isFocused ? "focused" : ""
-                      }`}
-                      style={
-                        {
-                          "--os-item-accent": TAB_ACCENTS[windowTab],
-                        } as CSSProperties
-                      }
-                      onClick={(event) => onAppClick(event, windowTab)}
-                      onMouseEnter={() => preloadTabView(windowTab)}
-                      onFocus={() => preloadTabView(windowTab)}
-                    >
-                      <span className="os-launch-icon">{TAB_ICONS[windowTab]}</span>
-                      <span className="os-launch-label">{TAB_LABELS[windowTab]}</span>
-                      {count > 1 ? <span className="os-launch-count">{count}</span> : null}
-                    </button>
-                  );
-                })}
-              </div>
-            </section>
-          ))}
-          <p className="os-launch-hint">
-            Tip: hold <kbd>Shift</kbd>/<kbd>Alt</kbd>/<kbd>Cmd</kbd> while opening an app to spawn another window.
-          </p>
-        </aside>
-
-        <main className="os-desktop" ref={desktopRef}>
-          {snapPreview ? (
+      {/* ── Desktop (full canvas for windows) ── */}
+      <main className="os-desktop" ref={desktopRef}>
+        {snapPreview ? (
+          <div
+            className={`os-snap-preview ${snapPreview.zone}`}
+            style={{
+              transform: `translate(${snapPreview.rect.x}px, ${snapPreview.rect.y}px)`,
+              width: `${snapPreview.rect.width}px`,
+              height: `${snapPreview.rect.height}px`,
+            }}
+          />
+        ) : null}
+
+        {visibleWindows.map((windowState) => (
+          <section
+            key={windowState.id}
+            className={`os-window ${
+              focusedWindowId === windowState.id ? "focused" : ""
+            } ${windowState.maximized ? "maximized" : ""}`}
+            style={
+              {
+                "--os-tab-accent": TAB_ACCENTS[windowState.tab],
+                transform: `translate(${windowState.x}px, ${windowState.y}px)`,
+                width: `${windowState.width}px`,
+                height: `${windowState.height}px`,
+                zIndex: windowState.z,
+              } as CSSProperties
+            }
+            onMouseDown={() => focusWindow(windowState.id)}
+          >
             <div
-              className={`os-snap-preview ${snapPreview.zone}`}
-              style={{
-                transform: `translate(${snapPreview.rect.x}px, ${snapPreview.rect.y}px)`,
-                width: `${snapPreview.rect.width}px`,
-                height: `${snapPreview.rect.height}px`,
-              }}
-            />
-          ) : null}
-
-          <aside className="os-status-rail">
-            <section className="os-status-card">
-              <p className="os-status-title">System Pulse</p>
-              <div className="os-status-grid">
-                <span>Link</span>
-                <strong>{connectionStateLabel}</strong>
-                <span>Active</span>
-                <strong>{focusedTabLabel}</strong>
-                <span>Visible</span>
-                <strong>{visibleWindowCount}</strong>
-                <span>Theme</span>
-                <strong>{theme}</strong>
-              </div>
-            </section>
-            <section className="os-status-card">
-              <p className="os-status-title">Quick Keys</p>
-              <p className="os-status-shortcut">
-                <kbd>⌘K</kbd> palette
-              </p>
-              <p className="os-status-shortcut">
-                <kbd>⇧</kbd> + <kbd>←</kbd>/<kbd>→</kbd>/<kbd>↑</kbd> snap
-              </p>
-            </section>
-          </aside>
-
-          {visibleWindows.map((windowState) => (
-            <section
-              key={windowState.id}
-              className={`os-window ${
-                focusedWindowId === windowState.id ? "focused" : ""
-              } ${windowState.maximized ? "maximized" : ""}`}
-              style={
-                {
-                  "--os-tab-accent": TAB_ACCENTS[windowState.tab],
-                  transform: `translate(${windowState.x}px, ${windowState.y}px)`,
-                  width: `${windowState.width}px`,
-                  height: `${windowState.height}px`,
-                  zIndex: windowState.z,
-                } as CSSProperties
-              }
-              onMouseDown={() => focusWindow(windowState.id)}
+              className="os-window-titlebar"
+              onPointerDown={(event) => beginDrag(event, windowState.id)}
+              onDoubleClick={() => toggleWindowMaximized(windowState.id)}
             >
-              <div
-                className="os-window-titlebar"
-                onPointerDown={(event) => beginDrag(event, windowState.id)}
-              >
-                <div className="os-window-actions">
-                  <button
-                    type="button"
-                    className="os-window-action close"
-                    data-window-action
-                    aria-label={`Close ${TAB_LABELS[windowState.tab]}`}
-                    onClick={() => closeWindow(windowState.id)}
-                  />
-                  <button
-                    type="button"
-                    className="os-window-action minimize"
-                    data-window-action
-                    aria-label={`Minimize ${TAB_LABELS[windowState.tab]}`}
-                    onClick={() => minimizeWindow(windowState.id)}
-                  />
-                  <button
-                    type="button"
-                    className="os-window-action maximize"
-                    data-window-action
-                    aria-label={`Toggle maximize ${TAB_LABELS[windowState.tab]}`}
-                    onClick={() => toggleWindowMaximized(windowState.id)}
-                  />
-                </div>
-                <div className="os-window-title">
-                  <span className="os-window-title-icon">{TAB_ICONS[windowState.tab]}</span>
-                  <span className="os-window-title-label">{TAB_LABELS[windowState.tab]}</span>
-                </div>
+              <div className="os-window-actions">
+                <button
+                  type="button"
+                  className="os-window-action close"
+                  data-window-action
+                  aria-label={`Close ${TAB_LABELS[windowState.tab]}`}
+                  onClick={() => closeWindow(windowState.id)}
+                />
+                <button
+                  type="button"
+                  className="os-window-action minimize"
+                  data-window-action
+                  aria-label={`Minimize ${TAB_LABELS[windowState.tab]}`}
+                  onClick={() => minimizeWindow(windowState.id)}
+                />
                 <button
                   type="button"
-                  className="os-window-clone"
+                  className="os-window-action maximize"
                   data-window-action
-                  onClick={() => openWindow(windowState.tab, { newWindow: true })}
-                >
-                  + window
-                </button>
+                  aria-label={`Toggle maximize ${TAB_LABELS[windowState.tab]}`}
+                  onClick={() => toggleWindowMaximized(windowState.id)}
+                />
               </div>
-
-              <div className="os-window-content">
-                <TabView tab={windowState.tab} />
+              <div className="os-window-title">
+                <span className="os-window-title-label">{TAB_LABELS[windowState.tab]}</span>
               </div>
+            </div>
 
-              {!windowState.maximized
-                ? RESIZE_HANDLES.map((handle) => (
-                    <div
-                      key={handle.edge}
-                      className={handle.className}
-                      onPointerDown={(event) =>
-                        beginResize(event, windowState.id, handle.edge)
-                      }
-                    />
-                  ))
-                : null}
-            </section>
-          ))}
-
-          {!visibleWindows.length ? (
-            <div className="os-desktop-empty">
-              <p>All windows minimized</p>
-              <span>Select an app from the dock to continue.</span>
+            <div className="os-window-content">
+              <TabView tab={windowState.tab} />
             </div>
-          ) : null}
-        </main>
-      </div>
 
-      <footer className="os-dock">
-        {launchTabs.map((windowTab) => {
-          const isOpen = openTabs.has(windowTab);
-          const isFocused = focusedTab === windowTab;
-          const count = windowCountByTab[windowTab] ?? 0;
-          return (
-            <button
-              key={windowTab}
-              type="button"
-              className={`os-dock-item ${isOpen ? "open" : ""} ${
-                isFocused ? "focused" : ""
-              }`}
-              style={
-                {
-                  "--os-item-accent": TAB_ACCENTS[windowTab],
-                } as CSSProperties
-              }
-              onClick={(event) => onAppClick(event, windowTab)}
-              onMouseEnter={() => preloadTabView(windowTab)}
-              onFocus={() => preloadTabView(windowTab)}
-            >
-              <span className="os-dock-item-icon">{TAB_ICONS[windowTab]}</span>
-              <span className="os-dock-item-label">{TAB_LABELS[windowTab]}</span>
-              {count > 1 ? <span className="os-dock-item-count">{count}</span> : null}
-              <span className="os-dock-indicator" />
-            </button>
-          );
-        })}
-      </footer>
+            {!windowState.maximized
+              ? RESIZE_HANDLES.map((handle) => (
+                  <div
+                    key={handle.edge}
+                    className={handle.className}
+                    onPointerDown={(event) =>
+                      beginResize(event, windowState.id, handle.edge)
+                    }
+                  />
+                ))
+              : null}
+          </section>
+        ))}
+
+        {!visibleWindows.length ? (
+          <div className="os-desktop-empty">
+            <p>No open windows</p>
+            <span>Click an app in the dock below, or press <kbd>⌘K</kbd></span>
+          </div>
+        ) : null}
+      </main>
+
+      {/* ── Dock (centered floating pill, icon-only) ── */}
+      <div className="os-dock-container">
+        <div className="os-dock">
+          {launchTabs.map((windowTab) => {
+            const isOpen = openTabs.has(windowTab);
+            const isFocused = focusedTab === windowTab;
+            return (
+              <button
+                key={windowTab}
+                type="button"
+                className={`os-dock-item ${isOpen ? "open" : ""} ${
+                  isFocused ? "focused" : ""
+                }`}
+                onClick={(event) => onAppClick(event, windowTab)}
+                onMouseEnter={() => preloadTabView(windowTab)}
+                onFocus={() => preloadTabView(windowTab)}
+                title={TAB_LABELS[windowTab]}
+              >
+                <span className="os-dock-item-icon" dangerouslySetInnerHTML={{ __html: TAB_ICONS[windowTab] }} />
+              </button>
+            );
+          })}
+        </div>
+      </div>
 
+      {/* ── Launcher / Command Palette ── */}
       {commandOpen ? (
         <div
-          className="os-command-overlay"
+          className="os-launcher-overlay"
           onMouseDown={(event) => {
             if (event.target === event.currentTarget) {
               setCommandOpen(false);
@@ -1452,41 +1358,36 @@ export function OsShell({
             }
           }}
         >
-          <div className="os-command-palette" role="dialog" aria-modal="true">
-            <div className="os-command-header">
-              <p>Command Palette</p>
-              <span>
-                {filteredCommandActions.length} action
-                {filteredCommandActions.length === 1 ? "" : "s"} · ⌘K
-              </span>
+          <div className="os-launcher" role="dialog" aria-modal="true">
+            <div className="os-launcher-search">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+              <input
+                ref={commandInputRef}
+                value={commandQuery}
+                onChange={(event) => setCommandQuery(event.target.value)}
+                placeholder="Search apps and commands..."
+              />
             </div>
-            <input
-              ref={commandInputRef}
-              className="os-command-input"
-              value={commandQuery}
-              onChange={(event) => setCommandQuery(event.target.value)}
-              placeholder="Open app, snap window, switch mode..."
-            />
-            <div className="os-command-results">
+            <div className="os-launcher-results">
               {filteredCommandActions.length ? (
                 filteredCommandActions.map((action, index) => (
                   <button
                     key={action.id}
                     type="button"
-                    className={`os-command-item ${
+                    className={`os-launcher-item ${
                       index === selectedCommandIndex ? "active" : ""
                     }`}
                     onMouseEnter={() => setSelectedCommandIndex(index)}
                     onClick={() => executeCommand(action)}
                   >
-                    <span className="os-command-item-label">{action.label}</span>
+                    <span className="os-launcher-item-label">{action.label}</span>
                     {action.hint ? (
-                      <span className="os-command-item-hint">{action.hint}</span>
+                      <span className="os-launcher-item-hint">{action.hint}</span>
                     ) : null}
                   </button>
                 ))
               ) : (
-                <div className="os-command-empty">No command matches “{commandQuery}”.</div>
+                <div className="os-launcher-empty">No results for "{commandQuery}"</div>
               )}
             </div>
           </div>
diff --git a/gateway/ui/src/react/tabViews.tsx b/gateway/ui/src/react/tabViews.tsx
index c2d550e..95ebe30 100644
--- a/gateway/ui/src/react/tabViews.tsx
+++ b/gateway/ui/src/react/tabViews.tsx
@@ -45,6 +45,10 @@ const TAB_VIEW_LOADERS: Record<Tab, TabViewLoader> = {
     })),
   debug: () =>
     import("./views/DebugView").then((module) => ({ default: module.DebugView })),
+  settings: () =>
+    import("./views/SettingsView").then((module) => ({
+      default: module.SettingsView,
+    })),
 };
 
 const TAB_VIEW_COMPONENTS: Record<Tab, LazyExoticComponent<ComponentType>> = {
@@ -59,6 +63,7 @@ const TAB_VIEW_COMPONENTS: Record<Tab, LazyExoticComponent<ComponentType>> = {
   pairing: lazy(TAB_VIEW_LOADERS.pairing),
   config: lazy(TAB_VIEW_LOADERS.config),
   debug: lazy(TAB_VIEW_LOADERS.debug),
+  settings: lazy(TAB_VIEW_LOADERS.settings),
 };
 
 const preloadedTabs = new Set<Tab>();
diff --git a/gateway/ui/src/react/views/SettingsView.tsx b/gateway/ui/src/react/views/SettingsView.tsx
new file mode 100644
index 0000000..88f19ac
--- /dev/null
+++ b/gateway/ui/src/react/views/SettingsView.tsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { PairingView } from "./PairingView";
+import { ConfigView } from "./ConfigView";
+import { DebugView } from "./DebugView";
+
+type SettingsTab = "pairing" | "config" | "debug";
+
+const SETTINGS_TABS: { id: SettingsTab; label: string }[] = [
+  { id: "pairing", label: "Pairing" },
+  { id: "config", label: "Config" },
+  { id: "debug", label: "Debug" },
+];
+
+export function SettingsView() {
+  const [activeTab, setActiveTab] = useState<SettingsTab>("config");
+
+  return (
+    <div className="view-container">
+      <div className="tabs">
+        {SETTINGS_TABS.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            className={`tab ${activeTab === tab.id ? "active" : ""}`}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      {activeTab === "pairing" && <PairingView />}
+      {activeTab === "config" && <ConfigView />}
+      {activeTab === "debug" && <DebugView />}
+    </div>
+  );
+}
diff --git a/gateway/ui/src/styles/base.css b/gateway/ui/src/styles/base.css
index fab8022..e15eca4 100644
--- a/gateway/ui/src/styles/base.css
+++ b/gateway/ui/src/styles/base.css
@@ -1,174 +1,113 @@
-/* CSS Variables */
+/* ── Design Tokens ── */
 :root {
-  --bg-primary: var(--color-kumo-base);
-  --bg-secondary: var(--color-kumo-elevated);
-  --bg-tertiary: var(--color-kumo-tint);
-  --bg-hover: var(--color-kumo-overlay);
-
-  --text-primary: var(--text-color-kumo-default);
-  --text-secondary: var(--text-color-kumo-strong);
-  --text-muted: var(--text-color-kumo-inactive);
-
-  --border-default: var(--color-kumo-line);
-  --border-muted: color-mix(in srgb, var(--color-kumo-line) 70%, transparent);
-
-  --accent-primary: var(--color-kumo-brand);
-  --accent-success: var(--text-color-kumo-success);
-  --accent-warning: var(--text-color-kumo-warning);
-  --accent-danger: var(--text-color-kumo-danger);
-
-  /* Typography */
-  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
+  --bg-base: #0a0a0c;
+  --glass-bg: rgba(255, 255, 255, 0.03);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-border-active: rgba(255, 255, 255, 0.14);
+  --glass-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
+
+  --text-main: #f3f3f3;
+  --text-muted: #71717a;
+  --text-dim: #3f3f46;
+
+  --accent: #3b82f6;
+  --accent-glow: rgba(59, 130, 246, 0.5);
+  --accent-success: #22c55e;
+  --accent-warning: #eab308;
+  --accent-danger: #ef4444;
+
+  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  --font-size-xs: 0.6875rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-base: 0.875rem;
+  --font-size-lg: 1rem;
   --font-size-xl: 1.25rem;
 
-  /* Spacing */
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.25rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-
-  /* Border radius */
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-
-  /* Shadows */
-  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.08);
-  --shadow-md: 0 16px 30px rgba(0, 0, 0, 0.12);
-  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.16);
-
-  /* Layout */
-  --nav-width: 248px;
-  --topbar-height: 56px;
-}
-
-/* Reset */
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-h1, h2, h3, h4, h5, h6, p, ul, ol {
-  margin: 0;
-  padding: 0;
-}
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+
+  /* Aliases consumed by view templates */
+  --bg-primary: var(--bg-base);
+  --bg-secondary: rgba(255, 255, 255, 0.03);
+  --bg-tertiary: rgba(255, 255, 255, 0.06);
+  --bg-hover: rgba(255, 255, 255, 0.08);
+  --text-primary: var(--text-main);
+  --text-secondary: #a1a1aa;
+  --border-default: var(--glass-border);
+  --border-muted: rgba(255, 255, 255, 0.05);
+  --accent-primary: var(--accent);
+
+  --nav-width: 0;       /* unused - kept for compat */
+  --topbar-height: 0;   /* unused - kept for compat */
+}
+
+/* ── Reset ── */
+*, *::before, *::after { box-sizing: border-box; }
+h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; padding: 0; }
 
 html, body {
   height: 100%;
   overflow: hidden;
+  background: var(--bg-base);
 }
 
 body {
-  font-family: var(--font-sans);
+  font-family: var(--font-family);
   font-size: var(--font-size-base);
   line-height: 1.5;
-  color: var(--text-primary);
-  background:
-    radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--accent-primary) 12%, transparent) 0%, transparent 44%),
-    radial-gradient(circle at 82% 4%, color-mix(in srgb, var(--accent-success) 9%, transparent) 0%, transparent 36%),
-    var(--bg-primary);
+  color: var(--text-main);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 600;
-  line-height: 1.25;
-}
-
-h1 { font-size: 1.5rem; }
-h2 { font-size: 1.25rem; }
-h3 { font-size: 1.125rem; }
-h4 { font-size: 1rem; }
-
-a {
-  color: var(--text-color-kumo-link);
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
+/* ── Typography ── */
+h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
+h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
+h3 { font-size: 1.0625rem; font-weight: 600; }
+h4 { font-size: var(--font-size-base); font-weight: 600; }
 
-code, pre {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
-}
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
 
+code, pre { font-family: var(--font-mono); font-size: 0.9em; }
 code {
-  background: color-mix(in srgb, var(--bg-tertiary) 80%, transparent);
-  padding: 0.2em 0.4em;
+  background: rgba(255,255,255,0.06);
+  padding: 0.15em 0.4em;
   border-radius: var(--radius-sm);
 }
-
 pre {
-  background: color-mix(in srgb, var(--bg-tertiary) 62%, transparent);
+  background: rgba(0,0,0,0.3);
   padding: var(--space-4);
   border-radius: var(--radius-md);
   overflow-x: auto;
-}
-
-pre code {
-  background: none;
-  padding: 0;
-}
-
-/* Scrollbars */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border-default);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-muted);
-}
-
-/* Utilities */
-.muted {
-  color: var(--text-muted);
-}
-
-.text-secondary {
-  color: var(--text-secondary);
-}
-
-.text-success {
-  color: var(--accent-success);
-}
-
-.text-warning {
-  color: var(--accent-warning);
-}
-
-.text-danger {
-  color: var(--accent-danger);
-}
-
-.mono {
-  font-family: var(--font-mono);
-}
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  border: 1px solid var(--glass-border);
+}
+pre code { background: none; padding: 0; }
+
+/* ── Scrollbars ── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
+
+/* ── Utilities ── */
+.muted { color: var(--text-muted); }
+.text-secondary { color: var(--text-secondary); }
+.text-success { color: var(--accent-success); }
+.text-warning { color: var(--accent-warning); }
+.text-danger { color: var(--accent-danger); }
+.mono { font-family: var(--font-mono); }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
diff --git a/gateway/ui/src/styles/chat.css b/gateway/ui/src/styles/chat.css
index 4ecc8d6..a521096 100644
--- a/gateway/ui/src/styles/chat.css
+++ b/gateway/ui/src/styles/chat.css
@@ -1,22 +1,26 @@
-/* Chat Container */
+/* ── Chat Container ── */
 .chat-container {
   display: flex;
   flex-direction: column;
-  min-height: calc(100dvh - var(--topbar-height) - (var(--space-5) * 2));
   height: 100%;
-  max-width: 980px;
-  margin: 0 auto;
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
-  box-shadow: var(--shadow-sm);
+  min-height: 0;
+}
+
+.session-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-4);
+  border-bottom: 1px solid var(--glass-border);
+  font-size: var(--font-size-xs);
+  background: rgba(255,255,255,0.02);
 }
+.session-key { font-family: var(--font-mono); color: var(--text-muted); }
+.session-stats { display: flex; align-items: center; gap: var(--space-4); color: var(--text-muted); }
 
-/* Messages Area */
+/* ── Messages ── */
 .chat-messages {
   flex: 1;
-  min-height: 0;
   overflow-y: auto;
   padding: var(--space-4);
   display: flex;
@@ -24,213 +28,147 @@
   gap: var(--space-4);
 }
 
-/* Message Bubble */
 .message {
   display: flex;
   flex-direction: column;
   max-width: min(88%, 720px);
   min-width: 0;
 }
-
-.message.user {
-  align-self: flex-end;
-}
-
-.message.assistant {
-  align-self: flex-start;
-}
+.message.user { align-self: flex-end; }
+.message.assistant { align-self: flex-start; }
 
 .message-bubble {
   padding: var(--space-3) var(--space-4);
   border-radius: var(--radius-lg);
-  line-height: 1.5;
-  max-width: 100%;
-  min-width: 0;
+  line-height: 1.6;
   overflow-wrap: anywhere;
 }
-
 .message.user .message-bubble {
-  background: var(--accent-primary);
-  color: white;
+  background: var(--accent);
+  color: #fff;
   border-bottom-right-radius: var(--radius-sm);
 }
-
 .message.assistant .message-bubble {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-muted);
+  background: rgba(255,255,255,0.05);
+  border: 1px solid var(--glass-border);
   border-bottom-left-radius: var(--radius-sm);
 }
 
 .message-meta {
   font-size: var(--font-size-xs);
   color: var(--text-muted);
-  margin-top: var(--space-1);
+  margin-top: 4px;
   display: flex;
   align-items: center;
   gap: var(--space-2);
 }
+.message.user .message-meta { justify-content: flex-end; }
 
-.message.user .message-meta {
-  justify-content: flex-end;
-}
-
-/* Message Content - Markdown */
+/* ── Message Content ── */
 .message-content {
-  white-space: normal;
   font-size: var(--font-size-sm);
-  margin-bottom: var(--space-2);
   overflow-wrap: anywhere;
   word-break: break-word;
 }
-
-.message-content:last-child {
-  margin-bottom: 0;
-}
-
-.message-content > *:first-child {
-  margin-top: 0;
-}
-
-.message-content > *:last-child {
-  margin-bottom: 0;
-}
-
-.message-content p {
-  margin-bottom: var(--space-2);
-}
-
-.message-content p:last-child {
-  margin-bottom: 0;
-}
-
-.message-content ul,
-.message-content ol {
-  margin: var(--space-2) 0;
-  padding-left: var(--space-5);
-}
-
-.message-content li {
-  margin-bottom: var(--space-1);
-}
-
+.message-content:last-child { margin-bottom: 0; }
+.message-content > *:first-child { margin-top: 0; }
+.message-content > *:last-child { margin-bottom: 0; }
+.message-content p { margin-bottom: var(--space-2); }
+.message-content p:last-child { margin-bottom: 0; }
+.message-content ul, .message-content ol { margin: var(--space-2) 0; padding-left: var(--space-5); }
+.message-content li { margin-bottom: var(--space-1); }
 .message-content pre {
-  margin: var(--space-2) 0;
-  background: var(--bg-tertiary);
+  margin: var(--space-3) 0;
   border-radius: var(--radius-md);
   overflow-x: auto;
   padding: var(--space-3);
-  max-width: 100%;
-}
-
-.message-content code {
   font-size: 0.85em;
 }
+.message.user .message-content a { color: #fff; text-decoration: underline; }
+.message.user .message-content code { background: rgba(255,255,255,0.2); color: #fff; }
+.message.user .message-content pre { background: rgba(255,255,255,0.14); }
 
-.message.user .message-content a {
-  color: white;
-  text-decoration: underline;
-}
-
-.message.user .message-content code {
-  background: rgba(255, 255, 255, 0.2);
-  color: white;
-}
-
-.message.user .message-content pre {
-  background: rgba(255, 255, 255, 0.14);
-}
-
-.message-image-wrap {
-  margin: var(--space-2) 0;
-}
-
+.message-image-wrap { margin: var(--space-2) 0; }
 .message-image {
   max-width: min(420px, 100%);
-  width: 100%;
   border-radius: var(--radius-md);
-  border: 1px solid var(--border-default);
+  border: 1px solid var(--glass-border);
   display: block;
 }
 
+/* ── Thinking ── */
 .thinking-block {
   margin: var(--space-2) 0;
-  border: 1px solid var(--border-default);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
-  background: var(--bg-tertiary);
+  background: rgba(255,255,255,0.03);
 }
-
 .thinking-block summary {
   cursor: pointer;
   padding: var(--space-2) var(--space-3);
   font-size: var(--font-size-xs);
-  color: var(--text-secondary);
+  color: var(--text-muted);
 }
-
 .thinking-block pre {
   margin: 0;
   padding: var(--space-3);
-  border-top: 1px solid var(--border-muted);
+  border-top: 1px solid var(--glass-border);
   font-size: var(--font-size-xs);
   white-space: pre-wrap;
   word-break: break-word;
 }
+.thinking-dots { display: flex; gap: 4px; }
+.thinking-dot {
+  width: 6px; height: 6px;
+  background: var(--text-muted);
+  border-radius: 50%;
+  animation: thinking 1.4s infinite;
+}
+.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
+.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
+@keyframes thinking {
+  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+  40% { transform: scale(1); opacity: 1; }
+}
 
-/* Tool Call Cards */
+/* ── Tool Calls ── */
 .tool-call {
   margin: var(--space-2) 0;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-muted);
+  background: rgba(255,255,255,0.03);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
   overflow: hidden;
 }
-
 .tool-call-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-2) var(--space-3);
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-muted);
+  background: rgba(255,255,255,0.02);
+  border-bottom: 1px solid var(--glass-border);
   font-size: var(--font-size-xs);
-  font-weight: 500;
   cursor: pointer;
 }
-
 .tool-call-name {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   font-family: var(--font-mono);
-  color: var(--accent-primary);
+  color: var(--accent);
 }
-
-.tool-call-status {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-
+.tool-call-status { display: flex; align-items: center; gap: var(--space-1); }
 .tool-call-body {
   padding: var(--space-2) var(--space-3);
   font-size: var(--font-size-xs);
   font-family: var(--font-mono);
   max-height: 200px;
-  overflow-y: auto;
-  overflow-x: auto;
-}
-
-.tool-call-body.collapsed {
-  display: none;
-}
-
-.tool-result-bubble {
-  border-left: 3px solid var(--accent-success);
-}
-
-.tool-result-bubble.tool-result-error {
-  border-left-color: var(--accent-danger);
+  overflow: auto;
 }
+.tool-call-body.collapsed { display: none; }
 
+/* ── Tool Results ── */
+.tool-result-bubble { border-left: 3px solid var(--accent-success); }
+.tool-result-bubble.tool-result-error { border-left-color: var(--accent-danger); }
 .tool-result-header {
   display: flex;
   align-items: center;
@@ -238,186 +176,74 @@
   gap: var(--space-3);
   margin-bottom: var(--space-2);
 }
-
-.tool-result-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  min-width: 0;
-}
-
+.tool-result-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
 .tool-result-json {
   margin: 0;
   padding: var(--space-3);
-  background: var(--bg-tertiary);
+  background: rgba(0,0,0,0.3);
   border-radius: var(--radius-md);
-  border: 1px solid var(--border-muted);
+  border: 1px solid var(--glass-border);
   font-size: var(--font-size-xs);
   line-height: 1.45;
   overflow-x: auto;
-  max-width: 100%;
   white-space: pre;
 }
-
-.tool-result-json code {
-  background: none;
-  padding: 0;
-  font-size: inherit;
-}
-
+.tool-result-json code { background: none; padding: 0; font-size: inherit; }
 .tool-result-json-details {
-  border: 1px solid var(--border-muted);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
-  background: var(--bg-tertiary);
   overflow: hidden;
 }
-
 .tool-result-json-details summary {
   cursor: pointer;
   padding: var(--space-2) var(--space-3);
   font-size: var(--font-size-xs);
-  color: var(--text-secondary);
+  color: var(--text-muted);
   user-select: none;
   list-style: none;
 }
+.tool-result-json-details summary::-webkit-details-marker { display: none; }
+.tool-result-json-details .tool-result-json { border: none; border-top: 1px solid var(--glass-border); border-radius: 0; }
+.tool-result-json-toggle-open { display: none; }
+.tool-result-json-details[open] .tool-result-json-toggle-open { display: inline; }
+.tool-result-json-details[open] .tool-result-json-toggle-closed { display: none; }
 
-.tool-result-json-details summary::-webkit-details-marker {
-  display: none;
-}
-
-.tool-result-json-details .tool-result-json {
-  margin: 0;
-  border: none;
-  border-top: 1px solid var(--border-muted);
-  border-radius: 0;
-}
-
-.tool-result-json-toggle-open {
-  display: none;
-}
-
-.tool-result-json-details[open] .tool-result-json-toggle-open {
-  display: inline;
-}
-
-.tool-result-json-details[open] .tool-result-json-toggle-closed {
-  display: none;
-}
-
-/* Input Area */
+/* ── Chat Input ── */
 .chat-input-area {
   padding: var(--space-3) var(--space-4);
-  border-top: 1px solid var(--border-muted);
-  background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
-  backdrop-filter: blur(8px);
-}
-
-.chat-input-wrapper {
-  display: flex;
-  gap: var(--space-2);
-  align-items: flex-end;
+  border-top: 1px solid var(--glass-border);
+  background: rgba(0,0,0,0.15);
 }
-
+.chat-input-wrapper { display: flex; gap: var(--space-2); align-items: flex-end; }
 .chat-input {
   flex: 1;
   padding: var(--space-3) var(--space-4);
   font-family: inherit;
   font-size: var(--font-size-sm);
-  color: var(--text-primary);
-  background: var(--bg-primary);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-lg);
+  color: var(--text-main);
+  background: rgba(255,255,255,0.05);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
   resize: none;
   min-height: 44px;
   max-height: 200px;
-  transition: border-color 0.15s;
-  border-radius: 9999px;
-  padding-inline: var(--space-4);
+  transition: all 0.2s;
 }
-
 .chat-input:focus {
   outline: none;
-  border-color: var(--accent-primary);
-}
-
-.chat-input::placeholder {
-  color: var(--text-muted);
+  border-color: var(--accent);
+  background: rgba(255,255,255,0.08);
+  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
 }
-
+.chat-input::placeholder { color: var(--text-muted); }
 .chat-send-btn {
   padding: var(--space-3);
-  width: 44px;
-  height: 44px;
-  border-radius: 9999px;
+  width: 44px; height: 44px;
+  border-radius: var(--radius-full);
   flex-shrink: 0;
 }
 
-/* Thinking Indicator */
-.thinking-indicator {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-4);
-  font-size: var(--font-size-sm);
-  color: var(--text-muted);
-}
-
-.thinking-dots {
-  display: flex;
-  gap: 4px;
-}
-
-.thinking-dot {
-  width: 6px;
-  height: 6px;
-  background: var(--text-muted);
-  border-radius: 50%;
-  animation: thinking 1.4s infinite;
-}
-
-.thinking-dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.thinking-dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes thinking {
-  0%, 80%, 100% {
-    transform: scale(0.8);
-    opacity: 0.5;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* Session Info Bar */
-.session-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-2) var(--space-4);
-  background: color-mix(in srgb, var(--bg-tertiary) 84%, transparent);
-  border-bottom: 1px solid var(--border-muted);
-  font-size: var(--font-size-xs);
-}
-
-.session-key {
-  font-family: var(--font-mono);
-  color: var(--text-secondary);
-}
-
-.session-stats {
-  display: flex;
-  align-items: center;
-  gap: var(--space-4);
-  color: var(--text-muted);
-}
-
-/* Empty Chat */
+/* ── Chat Empty ── */
 .chat-empty {
   flex: 1;
   display: flex;
@@ -427,62 +253,14 @@
   text-align: center;
   padding: var(--space-8);
 }
+.chat-empty-icon { font-size: 3rem; margin-bottom: var(--space-4); opacity: 0.4; }
+.chat-empty-title { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: var(--space-2); }
+.chat-empty-description { color: var(--text-muted); max-width: 400px; }
 
-.chat-empty-icon {
-  font-size: 4rem;
-  margin-bottom: var(--space-4);
-  opacity: 0.5;
-}
-
-.chat-empty-title {
-  font-size: var(--font-size-xl);
-  font-weight: 600;
-  margin-bottom: var(--space-2);
-}
-
-.chat-empty-description {
-  color: var(--text-muted);
-  max-width: 400px;
-}
-
+/* ── Responsive ── */
 @media (max-width: 720px) {
-  .chat-container {
-    min-height: calc(100dvh - var(--topbar-height) - (var(--space-3) * 2));
-    border-radius: var(--radius-lg);
-  }
-
-  .chat-messages {
-    padding: var(--space-3);
-    gap: var(--space-3);
-  }
-
-  .message {
-    max-width: 96%;
-  }
-
-  .message-bubble {
-    padding: var(--space-2) var(--space-3);
-  }
-
-  .session-bar {
-    padding: var(--space-2) var(--space-3);
-  }
-
-  .chat-input-area {
-    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
-  }
-
-  .chat-input-wrapper {
-    gap: var(--space-1);
-  }
-
-  .chat-input {
-    font-size: 16px;
-    max-height: 180px;
-  }
-
-  .chat-send-btn {
-    width: 42px;
-    height: 42px;
-  }
+  .chat-messages { padding: var(--space-3); gap: var(--space-3); }
+  .message { max-width: 96%; }
+  .chat-input-area { padding: var(--space-2) var(--space-3); }
+  .chat-input { font-size: 16px; }
 }
diff --git a/gateway/ui/src/styles/components.css b/gateway/ui/src/styles/components.css
index 0d4bd3f..7259986 100644
--- a/gateway/ui/src/styles/components.css
+++ b/gateway/ui/src/styles/components.css
@@ -1,4 +1,4 @@
-/* Buttons */
+/* ── Buttons ── */
 .btn {
   display: inline-flex;
   align-items: center;
@@ -9,51 +9,45 @@
   font-size: var(--font-size-sm);
   font-weight: 500;
   line-height: 1.5;
-  border: 1px solid var(--border-default);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
+  background: rgba(255,255,255,0.05);
+  color: var(--text-main);
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
-}
-
-.btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  white-space: nowrap;
 }
+.btn:disabled { opacity: 0.4; cursor: not-allowed; }
 
 .btn-primary {
-  background: var(--accent-primary);
-  border-color: var(--accent-primary);
-  color: var(--text-color-kumo-inverse);
-  box-shadow: var(--shadow-sm);
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  box-shadow: 0 4px 12px var(--accent-glow);
 }
-
 .btn-primary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent-primary) 82%, black);
-  border-color: color-mix(in srgb, var(--accent-primary) 82%, black);
+  filter: brightness(1.1);
   transform: translateY(-1px);
+  box-shadow: 0 8px 20px var(--accent-glow);
 }
 
 .btn-secondary {
-  background: var(--bg-secondary);
-  border-color: var(--border-default);
-  color: var(--text-primary);
+  background: rgba(255,255,255,0.05);
+  border-color: var(--glass-border);
 }
-
 .btn-secondary:hover:not(:disabled) {
-  background: var(--bg-hover);
-  transform: translateY(-1px);
+  background: rgba(255,255,255,0.1);
+  border-color: var(--glass-border-active);
 }
 
 .btn-danger {
-  background: var(--accent-danger);
-  border-color: var(--accent-danger);
-  color: white;
+  background: rgba(239,68,68,0.15);
+  border-color: rgba(239,68,68,0.3);
+  color: var(--accent-danger);
 }
-
 .btn-danger:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent-danger) 86%, black);
-  border-color: color-mix(in srgb, var(--accent-danger) 86%, black);
-  transform: translateY(-1px);
+  background: var(--accent-danger);
+  color: #fff;
 }
 
 .btn-ghost {
@@ -61,58 +55,44 @@
   border-color: transparent;
   color: var(--text-secondary);
 }
-
 .btn-ghost:hover:not(:disabled) {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
+  background: rgba(255,255,255,0.06);
+  color: var(--text-main);
 }
 
-.btn-sm {
-  padding: var(--space-1) var(--space-3);
-  font-size: var(--font-size-xs);
-}
-
-.btn-icon {
-  padding: var(--space-2);
-}
+.btn-sm { padding: 3px var(--space-3); font-size: var(--font-size-xs); }
+.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--font-size-base); }
+.btn-icon { padding: var(--space-2); }
 
-/* Cards */
+/* ── Cards ── */
 .card {
-  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
-  border: 1px solid var(--border-default);
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
-  box-shadow: var(--shadow-sm);
+  display: flex;
+  flex-direction: column;
 }
-
 .card-header {
-  padding: var(--space-4);
-  border-bottom: 1px solid var(--border-muted);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--glass-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  background: rgba(255,255,255,0.02);
 }
-
-.card-title {
-  font-weight: 600;
-  font-size: var(--font-size-base);
-}
-
-.card-body {
-  padding: var(--space-4);
-}
-
+.card-title { font-weight: 600; font-size: var(--font-size-base); }
+.card-body { padding: var(--space-4); flex: 1; }
 .card-footer {
   padding: var(--space-3) var(--space-4);
-  border-top: 1px solid var(--border-muted);
-  background: var(--bg-tertiary);
-}
-
-/* Forms */
-.form-group {
-  margin-bottom: var(--space-4);
+  border-top: 1px solid var(--glass-border);
+  background: rgba(255,255,255,0.02);
 }
 
+/* ── Forms ── */
+.form-group { margin-bottom: var(--space-4); }
 .form-label {
   display: block;
   font-size: var(--font-size-sm);
@@ -128,246 +108,146 @@
   padding: var(--space-2) var(--space-3);
   font-family: inherit;
   font-size: var(--font-size-sm);
-  color: var(--text-primary);
-  background: color-mix(in srgb, var(--bg-primary) 90%, var(--bg-secondary));
-  border: 1px solid var(--border-default);
+  color: var(--text-main);
+  background: rgba(255,255,255,0.05);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: all 0.2s;
 }
-
 .form-input:focus,
 .form-select:focus,
 .form-textarea:focus {
   outline: none;
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
+  border-color: var(--accent);
+  background: rgba(255,255,255,0.08);
+  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
 }
-
 .form-input::placeholder,
-.form-textarea::placeholder {
-  color: var(--text-muted);
-}
-
-.form-textarea {
-  resize: vertical;
-  min-height: 100px;
-}
-
-.form-hint {
-  font-size: var(--font-size-xs);
-  color: var(--text-muted);
-  margin-top: var(--space-1);
-}
-
-/* Kumo control spacing hardening */
-.ui-button-fix {
-  min-height: 2rem;
-  padding-inline: var(--space-3) !important;
-}
-
-.ui-badge-fix {
-  line-height: 1.25;
-  padding: var(--space-1) var(--space-2) !important;
-}
-
-.ui-input-fix {
-  min-height: 2.5rem;
-  border-radius: var(--radius-md) !important;
-  padding-inline: var(--space-3) !important;
-}
-
-textarea.ui-input-fix {
-  min-height: 6.5rem;
-  padding-block: var(--space-2) !important;
-}
-
-.ui-sensitive-fix {
-  min-height: 2.5rem;
-  border-radius: var(--radius-md) !important;
-  padding-inline: var(--space-3);
-}
-
-/* Pills / Badges */
+.form-textarea::placeholder { color: var(--text-muted); }
+.form-textarea { resize: vertical; min-height: 80px; }
+.form-hint { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-1); }
+
+/* Kumo overrides */
+.ui-button-fix { border-radius: var(--radius-md) !important; }
+.ui-badge-fix { border-radius: var(--radius-full) !important; }
+.ui-input-fix { border-radius: var(--radius-md) !important; }
+textarea.ui-input-fix { border-radius: var(--radius-md) !important; }
+.ui-sensitive-fix { border-radius: var(--radius-md) !important; }
+
+/* ── Pills / Badges ── */
 .pill {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
-  padding: var(--space-1) var(--space-2);
+  padding: 2px 10px;
   font-size: var(--font-size-xs);
   font-weight: 500;
-  border-radius: 9999px;
-  background: var(--bg-tertiary);
+  border-radius: var(--radius-full);
+  background: rgba(255,255,255,0.06);
   color: var(--text-secondary);
-  border: 1px solid var(--border-default);
-}
-
-.pill-success {
-  background: color-mix(in srgb, var(--accent-success) 20%, transparent);
-  color: var(--accent-success);
-}
-
-.pill-warning {
-  background: color-mix(in srgb, var(--accent-warning) 20%, transparent);
-  color: var(--accent-warning);
-}
-
-.pill-danger {
-  background: color-mix(in srgb, var(--accent-danger) 20%, transparent);
-  color: var(--accent-danger);
-}
-
-/* Table */
-.table {
-  width: 100%;
-  border-collapse: collapse;
+  border: 1px solid var(--glass-border);
 }
+.pill-success { background: rgba(34,197,94,0.12); color: var(--accent-success); border-color: rgba(34,197,94,0.25); }
+.pill-warning { background: rgba(234,179,8,0.12); color: var(--accent-warning); border-color: rgba(234,179,8,0.25); }
+.pill-danger  { background: rgba(239,68,68,0.12); color: var(--accent-danger);  border-color: rgba(239,68,68,0.25); }
 
+/* ── Table ── */
+.table { width: 100%; border-collapse: collapse; }
 .table th,
 .table td {
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-2) var(--space-3);
   text-align: left;
-  border-bottom: 1px solid var(--border-muted);
+  border-bottom: 1px solid var(--glass-border);
 }
-
 .table th {
   font-size: var(--font-size-xs);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-muted);
-  background: var(--bg-tertiary);
-}
-
-.table tr:hover td {
-  background: var(--bg-tertiary);
 }
+.table tr:hover td { background: rgba(255,255,255,0.03); }
 
-/* Loading Spinner */
+/* ── Spinner ── */
 .spinner {
-  width: 1em;
-  height: 1em;
-  border: 2px solid var(--border-default);
-  border-top-color: var(--accent-primary);
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255,255,255,0.1);
+  border-top-color: var(--accent);
   border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* Stat Card */
-.stat {
-  text-align: center;
-}
-
-.stat-value {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  line-height: 1.2;
-}
-
-.stat-label {
-  font-size: var(--font-size-sm);
-  color: var(--text-muted);
-}
-
-/* Key-Value List */
-.kv-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-.kv-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  animation: spin 0.7s linear infinite;
+  display: inline-block;
 }
+@keyframes spin { to { transform: rotate(360deg); } }
 
-.kv-key {
-  font-size: var(--font-size-sm);
-  color: var(--text-muted);
-}
+/* ── Stat ── */
+.stat { padding: var(--space-3) 0; }
+.stat-value { font-size: 2rem; font-weight: 700; color: var(--text-main); line-height: 1.2; }
+.stat-label { font-size: var(--font-size-sm); color: var(--text-muted); }
 
-.kv-value {
-  font-size: var(--font-size-sm);
-  color: var(--text-primary);
-  font-weight: 500;
-}
+/* ── KV List ── */
+.kv-list { display: flex; flex-direction: column; gap: var(--space-3); }
+.kv-row { display: flex; justify-content: space-between; align-items: center; }
+.kv-key { font-size: var(--font-size-sm); color: var(--text-muted); }
+.kv-value { font-size: var(--font-size-sm); color: var(--text-main); font-weight: 500; }
 
-/* Tabs */
+/* ── Tabs ── */
 .tabs {
   display: flex;
   gap: var(--space-1);
-  border-bottom: 1px solid var(--border-muted);
+  border-bottom: 1px solid var(--glass-border);
   margin-bottom: var(--space-4);
 }
-
 .tab {
   padding: var(--space-2) var(--space-4);
   font-size: var(--font-size-sm);
   font-weight: 500;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   border-bottom: 2px solid transparent;
   cursor: pointer;
-  transition: color 0.15s, border-color 0.15s;
-}
-
-.tab:hover {
-  color: var(--text-primary);
-}
-
-.tab.active {
-  color: var(--accent-primary);
-  border-bottom-color: var(--accent-primary);
-}
-
-/* Tooltip */
-[data-tooltip] {
-  position: relative;
-}
-
-[data-tooltip]::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: var(--space-1) var(--space-2);
-  font-size: var(--font-size-xs);
-  white-space: nowrap;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-sm);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.15s;
-  z-index: 100;
-}
-
-[data-tooltip]:hover::after {
-  opacity: 1;
+  transition: all 0.15s;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 }
+.tab:hover { color: var(--text-main); background: rgba(255,255,255,0.04); }
+.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
 
-/* Logs Output */
+/* ── Logs ── */
 .logs-output {
   margin: 0;
   padding: var(--space-4);
   font-family: var(--font-mono);
   font-size: var(--font-size-xs);
   line-height: 1.6;
-  color: var(--text-primary);
-  background: color-mix(in srgb, var(--bg-primary) 88%, var(--bg-tertiary));
-  overflow-x: auto;
+  color: var(--text-secondary);
+  background: rgba(0,0,0,0.3);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  overflow: auto;
+  max-height: 60dvh;
   white-space: pre;
-  max-height: 600px;
-  overflow-y: auto;
 }
 
-/* Button large (used in connect screen) */
-.btn-lg {
-  padding: var(--space-3) var(--space-6);
-  font-size: var(--font-size-base);
+/* ── Nav item (used by workspace file browser) ── */
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all 0.15s;
+  font-size: var(--font-size-sm);
+}
+.nav-item:hover { background: rgba(255,255,255,0.06); color: var(--text-main); }
+.nav-item.active { background: rgba(59,130,246,0.12); color: var(--text-main); }
+
+/* ── Thinking indicator ── */
+.thinking-indicator {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  font-size: var(--font-size-sm);
+  color: var(--text-muted);
 }
diff --git a/gateway/ui/src/styles/layout.css b/gateway/ui/src/styles/layout.css
index 069544e..15b26f3 100644
--- a/gateway/ui/src/styles/layout.css
+++ b/gateway/ui/src/styles/layout.css
@@ -1,219 +1,15 @@
-/* Main Layout */
-.app-shell {
-  position: relative;
-  display: flex;
-  min-height: 100dvh;
-  height: 100dvh;
-  overflow: hidden;
-}
-
-.nav-backdrop {
-  position: fixed;
-  inset: 0;
-  background: color-mix(in srgb, var(--bg-primary) 72%, black);
-  border: none;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-  z-index: 35;
-}
-
-.nav-backdrop.open {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* Sidebar Navigation */
-.nav-sidebar {
-  width: var(--nav-width);
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--bg-secondary) 96%, transparent) 0%,
-    color-mix(in srgb, var(--bg-primary) 96%, transparent) 100%
-  );
-  border-right: 1px solid var(--border-default);
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  z-index: 40;
-}
-
-.nav-header {
-  padding: var(--space-4);
-  border-bottom: 1px solid var(--border-muted);
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-}
-
-.nav-logo {
-  font-size: 1.3rem;
-}
-
-.nav-title {
-  font-weight: 700;
-  font-size: var(--font-size-lg);
-  letter-spacing: 0.03em;
-}
-
-.nav-groups {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-3) 0;
-}
-
-.nav-group {
-  margin-bottom: var(--space-4);
-}
-
-.nav-group-label {
-  padding: var(--space-2) var(--space-4);
-  font-size: var(--font-size-xs);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  margin: 0 var(--space-2);
-  padding: var(--space-2) var(--space-3);
-  color: var(--text-secondary);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-  border: 1px solid transparent;
-}
-
-.nav-item:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-  border-color: var(--border-default);
-}
-
-.nav-item.active {
-  background: color-mix(in srgb, var(--accent-primary) 11%, var(--bg-secondary));
-  color: var(--text-primary);
-  border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-default));
-}
-
-.nav-item-icon {
-  font-size: 1.1rem;
-  width: 1.3rem;
-  text-align: center;
-}
-
-.nav-item-label {
-  font-size: var(--font-size-sm);
-}
-
-/* Connection Status */
-.nav-footer {
-  padding: var(--space-4);
-  border-top: 1px solid var(--border-muted);
-}
-
-.connection-status {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-}
-
-.connection-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--accent-danger);
-}
-
-.connection-dot.connected {
-  background: var(--accent-success);
-}
-
-.connection-dot.connecting {
-  background: var(--accent-warning);
-  animation: pulse 1s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-/* Main Content Area */
-.main-content {
-  min-width: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-/* Topbar */
-.topbar {
-  height: var(--topbar-height);
-  background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
-  border-bottom: 1px solid var(--border-muted);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  padding: 0 var(--space-4);
-  flex-shrink: 0;
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  backdrop-filter: blur(10px);
-}
-
-.topbar-title-wrap {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  min-width: 0;
-}
-
-.topbar-title {
-  font-weight: 600;
-  font-size: var(--font-size-lg);
-}
-
-.topbar-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.topbar-menu-btn {
-  display: none;
-}
-
-/* Page Content */
-.page-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-5) var(--space-6) var(--space-6);
-}
-
-/* View Containers */
+/* ── View Containers (rendered inside window-content) ── */
 .view-container {
-  max-width: 1280px;
+  max-width: 100%;
   margin: 0 auto;
 }
 
-/* Cards Grid */
 .cards-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: var(--space-4);
 }
 
-/* Section Headers */
 .section-header {
   display: flex;
   align-items: center;
@@ -227,16 +23,17 @@
   font-weight: 600;
 }
 
-/* Empty State */
+/* ── Empty State ── */
 .empty-state {
   text-align: center;
-  padding: var(--space-8);
+  padding: var(--space-8) var(--space-4);
   color: var(--text-muted);
 }
 
 .empty-state-icon {
-  font-size: 3rem;
+  font-size: 2.5rem;
   margin-bottom: var(--space-4);
+  opacity: 0.5;
 }
 
 .empty-state-title {
@@ -248,76 +45,15 @@
 
 .empty-state-description {
   font-size: var(--font-size-sm);
+  color: var(--text-muted);
 }
 
-/* Connect Screen */
-.connect-screen {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100dvh;
-  padding: var(--space-4);
-}
-
-.connect-card {
-  width: 100%;
-  max-width: 460px;
-  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-xl);
-  padding: var(--space-6);
-  box-shadow: var(--shadow-md);
-}
-
-.connect-header {
-  text-align: center;
-  margin-bottom: var(--space-6);
-}
-
-.connect-logo {
-  font-size: 3rem;
-  display: block;
-  margin-bottom: var(--space-2);
-}
-
-.connect-header h1 {
-  font-size: 2rem;
-  font-weight: 700;
-  margin: 0 0 var(--space-2);
-}
-
-.connect-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-.connect-error {
-  padding: var(--space-3);
-  background: color-mix(in srgb, var(--accent-danger) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--accent-danger) 35%, var(--border-default));
-  border-radius: var(--radius-md);
-  color: var(--accent-danger);
-  font-size: var(--font-size-sm);
-}
-
-.connect-btn {
-  width: 100%;
-  margin-top: var(--space-2);
-}
-
-.connect-footer {
-  margin-top: var(--space-6);
-  text-align: center;
-  font-size: var(--font-size-sm);
-}
-
-/* Workspace */
+/* ── Workspace Layout ── */
 .workspace-layout {
   display: grid;
-  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
+  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
   gap: var(--space-4);
-  min-height: min(76dvh, 860px);
+  min-height: min(68dvh, 700px);
 }
 
 .workspace-panel {
@@ -339,79 +75,71 @@
   padding: var(--space-4);
   font-family: var(--font-mono);
   font-size: var(--font-size-sm);
-  background: var(--bg-primary);
-  color: var(--text-primary);
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--text-main);
   border: none;
   resize: none;
   outline: none;
+  line-height: 1.6;
 }
 
-/* Responsive */
-@media (max-width: 960px) {
-  .app-shell {
-    position: relative;
-  }
-
-  .nav-sidebar {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: min(82vw, 320px);
-    transform: translateX(-100%);
-    transition: transform 0.2s ease;
-    box-shadow: var(--shadow-lg);
-  }
+/* ── Connect Screen ── */
+.connect-screen {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  z-index: 200;
+}
 
-  .nav-sidebar.open {
-    transform: translateX(0);
-  }
+.connect-header {
+  text-align: center;
+  margin-bottom: var(--space-6);
+}
 
-  .topbar-menu-btn {
-    display: inline-flex;
-  }
+.connect-header h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: var(--space-2);
+}
 
-  .page-content {
-    padding: var(--space-4);
-  }
+.connect-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
 
-  .section-header {
-    flex-wrap: wrap;
-  }
+.connect-error {
+  padding: var(--space-3);
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: var(--radius-md);
+  color: var(--accent-danger);
+  font-size: var(--font-size-sm);
+}
 
-  .cards-grid {
-    grid-template-columns: 1fr;
-  }
+.connect-btn { width: 100%; margin-top: var(--space-2); }
 
-  .connect-card {
-    padding: var(--space-5);
-  }
+.connect-footer {
+  margin-top: var(--space-6);
+  text-align: center;
+  font-size: var(--font-size-sm);
 }
 
+/* ── Responsive ── */
 @media (max-width: 720px) {
-  .topbar {
-    padding: 0 var(--space-3);
-  }
-
-  .topbar-title {
-    font-size: var(--font-size-base);
-  }
-
-  .page-content {
-    padding: var(--space-3);
-  }
-
   .workspace-layout {
     grid-template-columns: 1fr;
     min-height: auto;
-    gap: var(--space-3);
-  }
-
-  .workspace-panel {
-    min-height: 280px;
-  }
-
-  .workspace-panel:first-child {
-    min-height: 220px;
   }
+  .workspace-panel { min-height: 240px; }
+  .cards-grid { grid-template-columns: 1fr; }
 }
diff --git a/gateway/ui/src/styles/os-shell.css b/gateway/ui/src/styles/os-shell.css
index 7e208f9..e788c68 100644
--- a/gateway/ui/src/styles/os-shell.css
+++ b/gateway/ui/src/styles/os-shell.css
@@ -1,609 +1,286 @@
+/* ═══════════════════════════════════════════
+   GSV OS — Desktop Shell
+   macOS-style floating window desktop.
+   ═══════════════════════════════════════════ */
+
+/* ── Root Shell ── */
 .os-shell {
-  --os-menubar-height: 50px;
-  --os-dock-height: 80px;
   --os-focus-accent: var(--accent-primary);
-
-  position: relative;
-  isolation: isolate;
-  display: flex;
-  flex-direction: column;
-  height: 100dvh;
-  min-height: 100dvh;
+  position: fixed;
+  inset: 0;
   overflow: hidden;
-  font-family: "Space Grotesk", var(--font-sans);
-  color: var(--text-primary);
-  background:
-    radial-gradient(circle at 17% 24%, color-mix(in srgb, var(--os-focus-accent) 14%, transparent) 0%, transparent 34%),
-    radial-gradient(circle at 78% 12%, color-mix(in srgb, #58fff4 10%, transparent) 0%, transparent 29%),
-    linear-gradient(138deg, color-mix(in srgb, var(--bg-primary) 92%, #020617) 0%, color-mix(in srgb, var(--bg-secondary) 74%, #0f172a) 100%);
+  font-family: var(--font-family);
+  color: var(--text-main);
+  -webkit-font-smoothing: antialiased;
 }
 
-.os-shell::before,
-.os-shell::after {
-  content: "";
+/* ── Ambient Orb Background ── */
+.os-ambient {
   position: absolute;
-  inset: -22%;
-  pointer-events: none;
-  filter: blur(72px);
-  opacity: 0.42;
+  inset: 0;
   z-index: 0;
+  background: #0f0f13;
+  overflow: hidden;
 }
 
-.os-shell::before {
-  background:
-    radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--accent-primary) 42%, transparent) 0%, transparent 48%),
-    radial-gradient(circle at 78% 12%, color-mix(in srgb, #58fff4 40%, transparent) 0%, transparent 44%);
-  animation: os-aurora-drift 16s ease-in-out infinite alternate;
-}
-
-.os-shell::after {
-  background:
-    radial-gradient(circle at 84% 76%, color-mix(in srgb, #a3b2ff 38%, transparent) 0%, transparent 45%),
-    radial-gradient(circle at 26% 88%, color-mix(in srgb, #6d7cff 36%, transparent) 0%, transparent 48%);
-  animation: os-aurora-drift 21s ease-in-out infinite alternate-reverse;
-}
-
-.os-shell > * {
+.os-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.6;
+  animation: os-orb-float 20s infinite ease-in-out alternate;
+  will-change: transform;
+}
+.os-orb-1 {
+  width: 60vw; height: 60vw;
+  background: radial-gradient(circle, #4f46e5 0%, transparent 70%);
+  top: -20vw; left: -10vw;
+}
+.os-orb-2 {
+  width: 50vw; height: 50vw;
+  background: radial-gradient(circle, #db2777 0%, transparent 70%);
+  bottom: -10vw; right: -10vw;
+  animation-delay: -5s;
+}
+.os-orb-3 {
+  width: 40vw; height: 40vw;
+  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
+  top: 20vh; left: 40vw;
+  animation-delay: -10s;
+}
+
+@keyframes os-orb-float {
+  0%   { transform: translate(0, 0) scale(1); }
+  33%  { transform: translate(5vw, 5vh) scale(1.1); }
+  66%  { transform: translate(-5vw, 10vh) scale(0.9); }
+  100% { transform: translate(0, 0) scale(1); }
+}
+
+/* ── Status Bar (top, 32px, minimal) ── */
+.os-statusbar {
   position: relative;
-  z-index: 1;
-}
-
-.os-menubar {
-  height: var(--os-menubar-height);
+  z-index: 50;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--space-3);
-  padding: 0 var(--space-4);
-  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-secondary) 64%, transparent);
-  backdrop-filter: blur(18px) saturate(120%);
+  padding: 0 16px;
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  font-size: 13px;
+  font-weight: 500;
+  color: #fff;
 }
 
-.os-menubar-brand {
+.os-statusbar-left,
+.os-statusbar-right {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
-  min-width: 0;
+  gap: 12px;
 }
 
-.os-menubar-logo {
-  font-size: 1rem;
-}
-
-.os-menubar-title {
-  font-size: var(--font-size-xs);
+.os-statusbar-brand {
   font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.os-menubar-status {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.os-menubar-telemetry {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-right: 4px;
-}
-
-.os-menubar-chip {
-  height: 24px;
-  border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
-  color: var(--text-secondary);
-  font-size: 0.68rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  display: inline-flex;
-  align-items: center;
-  padding: 0 10px;
-}
-
-.os-menubar-chip.mono {
-  font-family: var(--font-mono);
-  letter-spacing: 0;
-  text-transform: none;
-}
-
-.os-workspace {
-  flex: 1;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: minmax(214px, 244px) minmax(0, 1fr);
-  gap: var(--space-3);
-  padding: var(--space-3);
+  font-size: 13px;
+  letter-spacing: 0.5px;
 }
 
-.os-launchpad {
-  overflow: auto;
-  border-radius: var(--radius-lg);
-  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
-  background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
-  backdrop-filter: blur(12px);
-  box-shadow: 0 16px 42px rgba(3, 8, 20, 0.26);
-  padding: var(--space-3);
+.os-statusbar-dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
+.os-statusbar-dot.connected    { background: var(--accent-success); box-shadow: 0 0 6px var(--accent-success); }
+.os-statusbar-dot.connecting   { background: var(--accent-warning); animation: os-pulse-dot 1s infinite; }
+.os-statusbar-dot.disconnected { background: var(--accent-danger); }
 
-.os-launch-group {
-  margin-bottom: var(--space-4);
-}
+@keyframes os-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
 
-.os-launch-group:last-child {
-  margin-bottom: var(--space-2);
-}
-
-.os-launch-group-label {
-  margin: 0 0 var(--space-2);
-  font-size: var(--font-size-xs);
+.os-statusbar-label {
+  font-size: 12px;
   color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  font-weight: 700;
+  font-weight: 400;
 }
 
-.os-launch-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--space-2);
-}
-
-.os-launch-item {
-  --os-item-accent: var(--accent-primary);
-  border: 1px solid transparent;
-  background: color-mix(in srgb, var(--bg-primary) 66%, transparent);
-  border-radius: var(--radius-md);
-  min-height: 44px;
-  display: grid;
-  grid-template-columns: 28px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--space-2);
-  padding: 0 var(--space-2);
-  color: var(--text-secondary);
+.os-statusbar-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
   cursor: pointer;
-  transition: all 0.14s ease;
-}
-
-.os-launch-item:hover,
-.os-launch-item:focus-visible {
-  outline: none;
-  border-color: color-mix(in srgb, var(--os-item-accent) 36%, var(--border-default));
-  background: color-mix(in srgb, var(--bg-hover) 76%, transparent);
-  color: var(--text-primary);
-  transform: translateY(-1px);
-}
-
-.os-launch-item.open {
-  border-color: color-mix(in srgb, var(--os-item-accent) 30%, var(--border-default));
-}
-
-.os-launch-item.focused {
-  background: color-mix(in srgb, var(--os-item-accent) 22%, var(--bg-secondary));
-  border-color: color-mix(in srgb, var(--os-item-accent) 44%, var(--border-default));
-  color: var(--text-primary);
-}
-
-.os-launch-icon {
-  font-size: 1rem;
-  text-align: center;
-}
-
-.os-launch-label {
-  font-size: var(--font-size-sm);
+  font-family: inherit;
+  font-size: 12px;
   font-weight: 500;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.os-launch-count {
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  border-radius: 999px;
-  display: inline-flex;
+  padding: 2px 8px;
+  border-radius: 4px;
+  display: flex;
   align-items: center;
-  justify-content: center;
-  background: color-mix(in srgb, var(--os-item-accent) 26%, transparent);
-  border: 1px solid color-mix(in srgb, var(--os-item-accent) 36%, transparent);
-  color: var(--text-primary);
-  font-size: 0.7rem;
-  font-weight: 700;
+  gap: 4px;
+  transition: all 0.15s;
 }
-
-.os-launch-hint {
-  margin: var(--space-2) 0 0;
-  font-size: 0.72rem;
-  line-height: 1.45;
-  color: var(--text-muted);
+.os-statusbar-btn:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.08);
+}
+.os-statusbar-btn svg {
+  width: 14px; height: 14px;
 }
 
-.os-launch-hint kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 22px;
-  height: 20px;
-  border-radius: 6px;
-  padding: 0 6px;
-  margin: 0 2px;
-  border: 1px solid color-mix(in srgb, var(--border-default) 76%, transparent);
-  background: color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
-  font-size: 0.68rem;
+.os-statusbar-clock {
+  font-size: 12px;
+  font-weight: 500;
   color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
 }
 
+/* ── Desktop (full-screen canvas for windows) ── */
 .os-desktop {
-  position: relative;
-  min-height: 0;
-  overflow: hidden;
-  border-radius: var(--radius-lg);
-  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
-  background:
-    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--os-focus-accent) 12%, transparent) 0%, transparent 32%),
-    linear-gradient(130deg, color-mix(in srgb, var(--bg-primary) 76%, #030712) 0%, color-mix(in srgb, var(--bg-secondary) 70%, #0b1120) 100%);
-}
-
-.os-desktop::before {
-  content: "";
   position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background-image:
-    linear-gradient(to right, color-mix(in srgb, var(--border-muted) 30%, transparent) 1px, transparent 1px),
-    linear-gradient(to bottom, color-mix(in srgb, var(--border-muted) 30%, transparent) 1px, transparent 1px);
-  background-size: 42px 42px;
-  opacity: 0.18;
-}
-
-.os-desktop::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background:
-    linear-gradient(
-      to bottom,
-      color-mix(in srgb, var(--os-focus-accent) 8%, transparent),
-      transparent 20%
-    ),
-    repeating-linear-gradient(
-      180deg,
-      transparent 0,
-      transparent 2px,
-      color-mix(in srgb, var(--bg-tertiary) 12%, transparent) 3px,
-      transparent 4px
-    );
-  mix-blend-mode: screen;
-  opacity: 0.44;
-}
-
-.os-status-rail {
-  position: absolute;
-  top: 14px;
-  right: 14px;
-  z-index: 3;
-  width: min(250px, 30%);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  pointer-events: none;
-}
-
-.os-status-card {
-  border-radius: 14px;
-  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
-  background: color-mix(in srgb, var(--bg-secondary) 74%, transparent);
-  box-shadow: 0 14px 36px rgba(4, 10, 24, 0.28);
-  backdrop-filter: blur(14px);
-  padding: 12px;
-}
-
-.os-status-title {
-  margin: 0 0 8px;
-  color: var(--text-muted);
-  font-size: 0.67rem;
-  letter-spacing: 0.11em;
-  text-transform: uppercase;
-  font-weight: 700;
-}
-
-.os-status-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  row-gap: 6px;
-  column-gap: 8px;
-}
-
-.os-status-grid span {
-  color: var(--text-muted);
-  font-size: 0.72rem;
-}
-
-.os-status-grid strong {
-  color: var(--text-primary);
-  font-size: 0.76rem;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-}
-
-.os-status-shortcut {
-  margin: 0;
-  color: var(--text-secondary);
-  font-size: 0.74rem;
-  line-height: 1.4;
-}
-
-.os-status-shortcut + .os-status-shortcut {
-  margin-top: 6px;
-}
-
-.os-status-shortcut kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  border-radius: 6px;
-  margin: 0 1px;
-  padding: 0 4px;
-  border: 1px solid color-mix(in srgb, var(--border-default) 75%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
-  font-size: 0.65rem;
-  color: var(--text-secondary);
+  top: 32px; left: 0; right: 0; bottom: 80px;
+  z-index: 1;
+  overflow: hidden;
 }
 
+/* ── Snap Preview ── */
 .os-snap-preview {
   position: absolute;
-  z-index: 4;
+  z-index: 3;
+  background: rgba(255, 255, 255, 0.04);
+  border: 2px dashed rgba(255, 255, 255, 0.12);
+  border-radius: var(--radius-xl);
   pointer-events: none;
-  border-radius: calc(var(--radius-lg) - 2px);
-  border: 1px solid color-mix(in srgb, var(--os-focus-accent) 52%, transparent);
-  background: color-mix(in srgb, var(--os-focus-accent) 14%, transparent);
-  box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--os-focus-accent) 32%, transparent),
-    0 24px 56px color-mix(in srgb, var(--os-focus-accent) 24%, transparent);
-  animation: os-snap-pulse 0.45s ease;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+/* ── Windows ── */
 .os-window {
-  --os-tab-accent: var(--accent-primary);
   position: absolute;
+  top: 0; left: 0;
+  will-change: transform;
   display: flex;
   flex-direction: column;
+  background: rgba(18, 18, 24, 0.78);
+  backdrop-filter: blur(30px) saturate(150%);
+  -webkit-backdrop-filter: blur(30px) saturate(150%);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  box-shadow:
+    0 25px 60px rgba(0, 0, 0, 0.5),
+    0 8px 20px rgba(0, 0, 0, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
   overflow: hidden;
-  border-radius: var(--radius-lg);
-  border: 1px solid color-mix(in srgb, var(--border-default) 84%, transparent);
-  background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
-  box-shadow: 0 22px 48px rgba(3, 10, 24, 0.34);
-  transition: box-shadow 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
-  animation: os-window-enter 170ms ease-out;
-}
-
-.os-window::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background:
-    radial-gradient(
-      circle at 72% -14%,
-      color-mix(in srgb, var(--os-tab-accent) 18%, transparent) 0%,
-      transparent 50%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--os-tab-accent) 10%, transparent),
-      transparent 40%
-    );
-  z-index: 0;
-  opacity: 0.8;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
 .os-window.focused {
-  border-color: color-mix(in srgb, var(--os-tab-accent) 42%, var(--border-default));
+  border-color: rgba(255, 255, 255, 0.12);
   box-shadow:
-    0 26px 58px rgba(4, 12, 30, 0.34),
-    0 0 0 1px color-mix(in srgb, var(--os-tab-accent) 26%, transparent),
-    0 0 38px color-mix(in srgb, var(--os-tab-accent) 18%, transparent);
+    0 30px 70px rgba(0, 0, 0, 0.55),
+    0 10px 24px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 0 0 1px rgba(255, 255, 255, 0.04);
 }
 
 .os-window.maximized {
   border-radius: 0;
+  border: none;
+  inset: 0;
+  width: 100% !important;
+  height: 100% !important;
+  transform: none !important;
 }
 
+/* ── Window Title Bar ── */
 .os-window-titlebar {
-  height: 38px;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
   align-items: center;
-  gap: var(--space-3);
-  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
-  padding: 0 var(--space-3);
-  background:
-    linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--os-tab-accent) 18%, transparent),
-      color-mix(in srgb, var(--bg-tertiary) 72%, transparent) 32%
-    );
-  backdrop-filter: blur(8px);
-  user-select: none;
+  padding: 0 16px;
+  background: rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   cursor: grab;
   position: relative;
-  z-index: 1;
+  user-select: none;
 }
+.os-window-titlebar:active { cursor: grabbing; }
 
+/* macOS traffic-light window controls */
 .os-window-actions {
   display: flex;
-  align-items: center;
-  gap: 6px;
+  gap: 8px;
+  z-index: 2;
+  flex-shrink: 0;
 }
 
 .os-window-action {
-  width: 12px;
-  height: 12px;
-  border-radius: 999px;
-  border: 1px solid rgba(0, 0, 0, 0.22);
+  width: 14px; height: 14px;
+  border-radius: 50%;
+  border: none;
   cursor: pointer;
-  transition: transform 0.12s ease, filter 0.12s ease;
-}
-
-.os-window-action:hover {
-  transform: scale(1.08);
-  filter: brightness(1.03);
-}
-
-.os-window-action.close {
-  background: #ff5f57;
-}
-
-.os-window-action.minimize {
-  background: #febc2e;
+  padding: 0;
+  transition: filter 0.15s, transform 0.1s;
 }
+.os-window-action:hover { filter: brightness(1.2); transform: scale(1.15); }
+.os-window-action:active { transform: scale(0.9); }
+.os-window-action.close    { background: #ff5f56; }
+.os-window-action.minimize { background: #ffbd2e; }
+.os-window-action.maximize { background: #27c93f; }
 
-.os-window-action.maximize {
-  background: #28c840;
+/* Dim traffic lights on unfocused windows */
+.os-window:not(.focused) .os-window-action {
+  background: rgba(255, 255, 255, 0.12) !important;
 }
+.os-window:not(.focused):hover .os-window-action.close    { background: #ff5f56 !important; }
+.os-window:not(.focused):hover .os-window-action.minimize { background: #ffbd2e !important; }
+.os-window:not(.focused):hover .os-window-action.maximize { background: #27c93f !important; }
 
+/* Centered title */
 .os-window-title {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  min-width: 0;
-}
-
-.os-window-title-icon {
-  font-size: 0.95rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+  max-width: 50%;
 }
-
 .os-window-title-label {
-  font-size: var(--font-size-sm);
+  font-size: 13px;
   font-weight: 600;
+  color: var(--text-muted);
+  letter-spacing: 0.3px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.os-window-clone {
-  border: 1px solid color-mix(in srgb, var(--border-default) 76%, transparent);
-  border-radius: 999px;
-  height: 26px;
-  padding: 0 10px;
-  background: color-mix(in srgb, var(--bg-tertiary) 74%, transparent);
+.os-window.focused .os-window-title-label {
   color: var(--text-secondary);
-  font-size: 0.72rem;
-  letter-spacing: 0.02em;
-  cursor: pointer;
-  transition: all 0.12s ease;
-}
-
-.os-window-clone:hover {
-  border-color: color-mix(in srgb, var(--os-tab-accent) 38%, var(--border-default));
-  color: var(--text-primary);
-  background: color-mix(in srgb, var(--os-tab-accent) 18%, transparent);
 }
 
+/* ── Window Content ── */
 .os-window-content {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  padding: var(--space-3);
-  background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
-  position: relative;
-  z-index: 1;
-}
-
-.os-window-content .view-container {
-  max-width: none;
-}
-
-.os-window-content .chat-container {
-  min-height: 100%;
-  height: 100%;
-  max-width: none;
-}
-
-.os-window-content .workspace-layout {
-  min-height: 100%;
-}
-
-.os-resize-handle {
-  position: absolute;
-  z-index: 2;
-}
-
-.os-resize-handle.n {
-  left: 12px;
-  right: 12px;
-  top: -3px;
-  height: 6px;
-  cursor: ns-resize;
-}
-
-.os-resize-handle.s {
-  left: 12px;
-  right: 12px;
-  bottom: -3px;
-  height: 6px;
-  cursor: ns-resize;
-}
-
-.os-resize-handle.e {
-  top: 12px;
-  bottom: 12px;
-  right: -3px;
-  width: 6px;
-  cursor: ew-resize;
-}
-
-.os-resize-handle.w {
-  top: 12px;
-  bottom: 12px;
-  left: -3px;
-  width: 6px;
-  cursor: ew-resize;
-}
-
-.os-resize-handle.ne,
-.os-resize-handle.nw,
-.os-resize-handle.se,
-.os-resize-handle.sw {
-  width: 12px;
-  height: 12px;
-}
-
-.os-resize-handle.ne {
-  top: -3px;
-  right: -3px;
-  cursor: nesw-resize;
-}
-
-.os-resize-handle.nw {
-  top: -3px;
-  left: -3px;
-  cursor: nwse-resize;
-}
-
-.os-resize-handle.se {
-  bottom: -3px;
-  right: -3px;
-  cursor: nwse-resize;
-}
-
-.os-resize-handle.sw {
-  bottom: -3px;
-  left: -3px;
-  cursor: nesw-resize;
-}
-
+  background: rgba(0, 0, 0, 0.2);
+  padding: var(--space-4);
+}
+.os-window-content .view-container { max-width: none; }
+.os-window-content .chat-container { min-height: 100%; height: 100%; padding: 0; }
+.os-window-content .workspace-layout { min-height: 100%; }
+
+/* ── Resize Handles ── */
+.os-resize-handle { position: absolute; z-index: 5; }
+.os-resize-handle.n  { top: 0; left: 8px; right: 8px; height: 6px; cursor: n-resize; }
+.os-resize-handle.s  { bottom: 0; left: 8px; right: 8px; height: 6px; cursor: s-resize; }
+.os-resize-handle.e  { top: 8px; right: 0; bottom: 8px; width: 6px; cursor: e-resize; }
+.os-resize-handle.w  { top: 8px; left: 0; bottom: 8px; width: 6px; cursor: w-resize; }
+.os-resize-handle.ne { top: 0; right: 0; width: 12px; height: 12px; cursor: ne-resize; }
+.os-resize-handle.nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nw-resize; }
+.os-resize-handle.se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: se-resize; }
+.os-resize-handle.sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: sw-resize; }
+
+/* ── Desktop Empty State ── */
 .os-desktop-empty {
   position: absolute;
   inset: 0;
@@ -611,319 +288,237 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--space-2);
+  gap: 8px;
   pointer-events: none;
-  color: var(--text-muted);
+  z-index: 0;
 }
-
 .os-desktop-empty p {
-  font-size: var(--font-size-lg);
-  font-weight: 600;
+  font-size: 16px;
+  font-weight: 500;
   color: var(--text-secondary);
 }
-
 .os-desktop-empty span {
-  font-size: var(--font-size-sm);
+  font-size: 13px;
+  color: var(--text-muted);
+}
+.os-desktop-empty kbd {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 5px;
+  padding: 1px 6px;
+  color: var(--text-secondary);
+}
+
+/* ── Dock (centered floating pill, icon-only) ── */
+.os-dock-container {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 50;
 }
 
 .os-dock {
-  height: var(--os-dock-height);
+  background: rgba(20, 20, 25, 0.6);
+  backdrop-filter: blur(40px) saturate(200%);
+  -webkit-backdrop-filter: blur(40px) saturate(200%);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 22px;
+  box-shadow:
+    0 20px 40px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
-  gap: var(--space-2);
-  overflow-x: auto;
-  border-top: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-secondary) 68%, transparent);
-  backdrop-filter: blur(16px);
-  padding: var(--space-2) var(--space-3);
+  padding: 6px 10px;
+  gap: 4px;
 }
 
 .os-dock-item {
-  --os-item-accent: var(--accent-primary);
-  border: 1px solid transparent;
-  border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--bg-primary) 68%, transparent);
-  min-width: 84px;
+  width: 48px; height: 48px;
+  border-radius: 14px;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 2px;
-  padding: 8px 10px 7px;
-  color: var(--text-secondary);
   cursor: pointer;
-  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   position: relative;
-  overflow: hidden;
+  color: rgba(255, 255, 255, 0.7);
+  background: transparent;
+  border: none;
+  padding: 0;
 }
-
-.os-dock-item::before {
-  content: "";
-  position: absolute;
-  left: 14%;
-  right: 14%;
-  top: -9px;
-  height: 18px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--os-item-accent) 44%, transparent);
-  filter: blur(10px);
-  opacity: 0;
-  transition: opacity 0.14s ease;
-  pointer-events: none;
+.os-dock-item:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-6px) scale(1.08);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
 }
-
-.os-dock-item:hover,
-.os-dock-item:focus-visible {
-  outline: none;
-  transform: translateY(-2px);
-  border-color: color-mix(in srgb, var(--os-item-accent) 34%, var(--border-default));
-  background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
-  color: var(--text-primary);
+.os-dock-item:active {
+  transform: translateY(0) scale(0.95);
 }
-
 .os-dock-item.open {
-  border-color: color-mix(in srgb, var(--os-item-accent) 26%, var(--border-default));
+  color: #fff;
 }
-
 .os-dock-item.focused {
-  background: color-mix(in srgb, var(--os-item-accent) 22%, var(--bg-secondary));
-  border-color: color-mix(in srgb, var(--os-item-accent) 42%, var(--border-default));
-  color: var(--text-primary);
-}
-
-.os-dock-item:hover::before,
-.os-dock-item.focused::before {
-  opacity: 0.8;
+  color: #fff;
 }
 
 .os-dock-item-icon {
-  font-size: 1.08rem;
-  line-height: 1;
-}
-
-.os-dock-item-label {
-  font-size: 0.68rem;
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-}
-
-.os-dock-item-count {
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 999px;
-  display: inline-flex;
+  width: 28px; height: 28px;
+  display: flex;
   align-items: center;
   justify-content: center;
-  background: color-mix(in srgb, var(--os-item-accent) 28%, transparent);
-  color: var(--text-primary);
-  font-size: 0.64rem;
-  font-weight: 700;
 }
-
-.os-dock-indicator {
-  display: block;
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  opacity: 0;
-  background: color-mix(in srgb, var(--os-item-accent) 70%, white);
+.os-dock-item-icon svg {
+  width: 24px; height: 24px;
 }
 
-.os-dock-item.open .os-dock-indicator {
-  opacity: 1;
+/* Running indicator dot */
+.os-dock-item::after {
+  content: '';
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px; height: 4px;
+  border-radius: 50%;
+  background: transparent;
+  transition: background 0.3s, box-shadow 0.3s;
+}
+.os-dock-item.open::after {
+  background: rgba(255, 255, 255, 0.4);
+}
+.os-dock-item.focused::after {
+  background: #fff;
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
 }
 
-.os-command-overlay {
+/* ── Launcher / Command Palette Overlay ── */
+.os-launcher-overlay {
   position: fixed;
   inset: 0;
-  z-index: 250;
-  background: color-mix(in srgb, #020617 62%, transparent);
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding-top: max(14dvh, 84px);
+  padding-top: 18vh;
 }
 
-.os-command-palette {
-  width: min(760px, calc(100vw - 32px));
-  border-radius: 18px;
-  border: 1px solid color-mix(in srgb, var(--os-focus-accent) 38%, var(--border-default));
-  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
-  backdrop-filter: blur(18px);
-  box-shadow:
-    0 28px 84px rgba(3, 8, 24, 0.5),
-    0 0 0 1px color-mix(in srgb, var(--os-focus-accent) 28%, transparent);
+.os-launcher {
+  width: 560px;
+  max-width: 90vw;
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+  background: rgba(20, 20, 26, 0.8);
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
   overflow: hidden;
-  animation: os-command-enter 150ms ease-out;
+  animation: os-launcher-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.os-command-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 11px 14px;
-  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
-  color: var(--text-secondary);
+@keyframes os-launcher-in {
+  from { opacity: 0; transform: scale(0.96) translateY(-10px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
 }
 
-.os-command-header p {
-  margin: 0;
-  font-size: 0.74rem;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  font-weight: 700;
+.os-launcher-search {
+  position: relative;
+  flex-shrink: 0;
 }
-
-.os-command-header span {
-  font-size: 0.72rem;
+.os-launcher-search svg {
+  position: absolute;
+  left: 18px; top: 50%;
+  transform: translateY(-50%);
+  width: 18px; height: 18px;
   color: var(--text-muted);
+  pointer-events: none;
 }
-
-.os-command-input {
+.os-launcher-search input {
   width: 100%;
-  border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 66%, transparent);
   background: transparent;
-  color: var(--text-primary);
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 16px 20px 16px 48px;
+  color: #fff;
+  font-size: 15px;
   font-family: inherit;
-  font-size: 1.02rem;
-  font-weight: 500;
-  padding: 14px 16px;
-}
-
-.os-command-input:focus {
   outline: none;
 }
-
-.os-command-input::placeholder {
-  color: var(--text-muted);
+.os-launcher-search input::placeholder {
+  color: var(--text-dim);
 }
 
-.os-command-results {
-  max-height: min(52dvh, 520px);
-  overflow: auto;
-  padding: 8px;
+.os-launcher-results {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px;
 }
 
-.os-command-item {
-  width: 100%;
-  border: 1px solid transparent;
-  border-radius: 12px;
-  background: transparent;
-  color: var(--text-secondary);
+.os-launcher-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--space-3);
-  text-align: left;
-  padding: 10px 12px;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 14px;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: transparent;
   cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+  transition: background 0.1s;
+  color: var(--text-main);
 }
-
-.os-command-item:hover,
-.os-command-item.active {
-  border-color: color-mix(in srgb, var(--os-focus-accent) 34%, var(--border-default));
-  background: color-mix(in srgb, var(--os-focus-accent) 18%, transparent);
-  color: var(--text-primary);
+.os-launcher-item:hover,
+.os-launcher-item.active {
+  background: rgba(255, 255, 255, 0.06);
+}
+.os-launcher-item.active {
+  outline: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.os-command-item-label {
-  font-size: 0.9rem;
+.os-launcher-item-label {
+  font-size: 13px;
   font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
-
-.os-command-item-hint {
-  font-size: 0.72rem;
-  color: var(--text-muted);
+.os-launcher-item-hint {
+  font-size: 11px;
+  color: var(--text-dim);
   white-space: nowrap;
 }
-
-.os-command-empty {
-  padding: 12px;
-  color: var(--text-muted);
-  font-size: 0.84rem;
+.os-launcher-empty {
+  padding: 24px 16px;
+  font-size: 13px;
+  color: var(--text-dim);
+  text-align: center;
 }
 
+/* ── Drag helper ── */
+body.os-dragging,
 body.os-dragging * {
   user-select: none !important;
+  cursor: grabbing !important;
 }
 
-body.os-dragging .os-window-titlebar {
-  cursor: grabbing;
-}
-
-@keyframes os-aurora-drift {
-  0% {
-    transform: translate3d(-4%, -2%, 0) scale(1);
-  }
-  100% {
-    transform: translate3d(5%, 4%, 0) scale(1.08);
-  }
-}
-
-@keyframes os-snap-pulse {
-  0% {
-    opacity: 0.2;
-    transform: scale(0.985);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes os-window-enter {
-  0% {
-    opacity: 0;
-    filter: saturate(80%);
-  }
-  100% {
-    opacity: 1;
-    filter: saturate(100%);
-  }
-}
-
-@keyframes os-command-enter {
-  0% {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 1280px) {
-  .os-workspace {
-    grid-template-columns: minmax(182px, 216px) minmax(0, 1fr);
-  }
-
-  .os-status-rail {
-    width: min(208px, 30%);
-  }
-}
-
-@media (max-width: 1120px) {
-  .os-menubar-telemetry {
-    display: none;
-  }
-
-  .os-status-rail {
-    display: none;
-  }
-}
-
+/* ── Reduced motion ── */
 @media (prefers-reduced-motion: reduce) {
-  .os-shell::before,
-  .os-shell::after,
-  .os-snap-preview,
+  .os-orb,
   .os-window,
-  .os-command-palette {
+  .os-launcher,
+  .os-dock-item {
     animation: none !important;
+    transition-duration: 0s !important;
   }
 }
diff --git a/gateway/ui/src/ui/app.ts b/gateway/ui/src/ui/app.ts
index c6fe243..59fcc05 100644
--- a/gateway/ui/src/ui/app.ts
+++ b/gateway/ui/src/ui/app.ts
@@ -4,6 +4,7 @@
 
 import { LitElement, html, nothing, type PropertyValues } from "lit";
 import { customElement, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { GatewayClient, type ConnectionState } from "./gateway-client";
 import { loadSettings, saveSettings, applyTheme, getGatewayUrl, type UiSettings } from "./storage";
 import { navigateTo, getCurrentTab } from "./navigation";
@@ -21,7 +22,7 @@ import type {
   ChannelLoginResult,
   ContentBlock,
 } from "./types";
-import { TAB_GROUPS, TAB_ICONS, TAB_LABELS } from "./types";
+import { TAB_GROUPS, TAB_ICONS, TAB_LABELS, WINDOW_DEFAULTS, type WindowState } from "./types";
 
 // View imports
 import { renderChat } from "./views/chat";
@@ -57,8 +58,12 @@ export class GsvApp extends LitElement {
 
   // ---- Navigation ----
   @state() tab: Tab = getCurrentTab();
-  @state() navDrawerOpen = false;
-  @state() isMobileLayout = false;
+
+  // ---- Window Management ----
+  @state() openWindows: Record<string, WindowState> = {};
+  @state() topZIndex = 10;
+  @state() showLauncher = false;
+  @state() launcherSearch = "";
 
   // ---- Chat State ----
   @state() chatMessages: Message[] = [];
@@ -116,16 +121,21 @@ export class GsvApp extends LitElement {
   private chatAutoScrollRaf: number | null = null;
   private chatStreamRunId: string | null = null;
   private channelsRefreshTimer: ReturnType<typeof setInterval> | null = null;
-  private mobileMediaQuery: MediaQueryList | null = null;
+  private dragState: { active: boolean; tab: string; startX: number; startY: number; initialX: number; initialY: number } = {
+    active: false, tab: "", startX: 0, startY: 0, initialX: 0, initialY: 0,
+  };
+  private clockTimer: ReturnType<typeof setInterval> | null = null;
+  @state() private clockText = "";
 
   // ---- Lifecycle ----
 
   connectedCallback() {
     super.connectedCallback();
     applyTheme(this.settings.theme);
-    this.mobileMediaQuery = window.matchMedia("(max-width: 960px)");
-    this.isMobileLayout = this.mobileMediaQuery.matches;
-    this.mobileMediaQuery.addEventListener("change", this.handleMobileMedia);
+
+    // Clock for status bar
+    this.updateClock();
+    this.clockTimer = setInterval(() => this.updateClock(), 1000);
     
     // Only auto-connect if we have previously connected successfully
     // (token is set or user explicitly clicked connect)
@@ -136,16 +146,20 @@ export class GsvApp extends LitElement {
     
     // Handle browser back/forward
     window.addEventListener("popstate", this.handlePopState);
+
+    // Global drag listeners
+    window.addEventListener("mousemove", this.onDrag);
+    window.addEventListener("mouseup", this.stopDrag);
   }
 
   protected updated(changed: PropertyValues<this>) {
-    if (changed.has("tab") || changed.has("connectionState")) {
+    if (changed.has("openWindows") || changed.has("connectionState")) {
       this.syncChannelsAutoRefresh();
     }
 
     if (
-      this.tab === "chat" &&
-      (changed.has("tab") ||
+      this.openWindows["chat"] &&
+      (changed.has("openWindows") ||
         changed.has("chatMessages") ||
         changed.has("chatStream") ||
         changed.has("chatLoading") ||
@@ -164,34 +178,159 @@ export class GsvApp extends LitElement {
     this.stopChannelsAutoRefresh();
     this.client?.stop();
     window.removeEventListener("popstate", this.handlePopState);
-    this.mobileMediaQuery?.removeEventListener("change", this.handleMobileMedia);
-    this.mobileMediaQuery = null;
+    window.removeEventListener("mousemove", this.onDrag);
+    window.removeEventListener("mouseup", this.stopDrag);
+    if (this.clockTimer) {
+      clearInterval(this.clockTimer);
+      this.clockTimer = null;
+    }
   }
 
   private handlePopState = () => {
-    this.tab = getCurrentTab();
-    this.closeNavDrawer();
+    const tab = getCurrentTab();
+    this.tab = tab;
+    this.openWindow(tab);
   };
 
-  private handleMobileMedia = (event: MediaQueryListEvent) => {
-    this.isMobileLayout = event.matches;
-    if (!event.matches) {
-      this.navDrawerOpen = false;
-    }
-  };
+  private updateClock() {
+    const now = new Date();
+    this.clockText = now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  }
 
-  private toggleNavDrawer() {
-    if (!this.isMobileLayout) {
+  // ---- Window Management ----
+
+  openWindow(tab: Tab) {
+    if (this.openWindows[tab]) {
+      // Already open: un-minimize and focus
+      if (this.openWindows[tab].minimized) {
+        this.openWindows = {
+          ...this.openWindows,
+          [tab]: { ...this.openWindows[tab], minimized: false },
+        };
+      }
+      this.focusWindow(tab);
       return;
     }
-    this.navDrawerOpen = !this.navDrawerOpen;
+
+    const defaults = WINDOW_DEFAULTS[tab];
+    const offset = Object.keys(this.openWindows).length * 30;
+    const newZ = this.topZIndex + 1;
+    this.topZIndex = newZ;
+
+    const ws: WindowState = {
+      tab,
+      x: Math.max(40, Math.round(window.innerWidth / 2 - defaults.width / 2 + offset)),
+      y: Math.max(40, Math.round(window.innerHeight / 2 - defaults.height / 2 + offset)),
+      width: defaults.width,
+      height: defaults.height,
+      minimized: false,
+      maximized: false,
+      zIndex: newZ,
+    };
+
+    this.openWindows = { ...this.openWindows, [tab]: ws };
+    this.tab = tab;
+    navigateTo(tab);
+    this.loadTabData(tab);
   }
 
-  private closeNavDrawer() {
-    if (!this.navDrawerOpen) {
-      return;
+  closeWindow(tab: string) {
+    const next = { ...this.openWindows };
+    delete next[tab];
+    this.openWindows = next;
+  }
+
+  minimizeWindow(tab: string) {
+    if (!this.openWindows[tab]) return;
+    this.openWindows = {
+      ...this.openWindows,
+      [tab]: { ...this.openWindows[tab], minimized: !this.openWindows[tab].minimized },
+    };
+  }
+
+  maximizeWindow(tab: string) {
+    if (!this.openWindows[tab]) return;
+    this.openWindows = {
+      ...this.openWindows,
+      [tab]: { ...this.openWindows[tab], maximized: !this.openWindows[tab].maximized },
+    };
+  }
+
+  focusWindow(tab: string) {
+    if (!this.openWindows[tab]) return;
+    const newZ = this.topZIndex + 1;
+    this.topZIndex = newZ;
+    this.openWindows = {
+      ...this.openWindows,
+      [tab]: { ...this.openWindows[tab], zIndex: newZ },
+    };
+    this.tab = tab as Tab;
+    navigateTo(tab as Tab);
+  }
+
+  private startWindowDrag(e: MouseEvent, tab: string) {
+    if ((e.target as HTMLElement).closest(".window-controls")) return;
+    if (this.openWindows[tab]?.maximized) return;
+
+    e.preventDefault();
+    this.focusWindow(tab);
+
+    this.dragState = {
+      active: true,
+      tab,
+      startX: e.clientX,
+      startY: e.clientY,
+      initialX: this.openWindows[tab].x,
+      initialY: this.openWindows[tab].y,
+    };
+
+    document.body.classList.add("os-dragging");
+  }
+
+  private onDrag = (e: MouseEvent) => {
+    if (!this.dragState.active) return;
+    e.preventDefault();
+
+    const dx = e.clientX - this.dragState.startX;
+    const dy = e.clientY - this.dragState.startY;
+    let newY = this.dragState.initialY + dy;
+    if (newY < 32) newY = 32; // Don't go above status bar
+
+    const tab = this.dragState.tab;
+    if (!this.openWindows[tab]) return;
+
+    this.openWindows = {
+      ...this.openWindows,
+      [tab]: {
+        ...this.openWindows[tab],
+        x: this.dragState.initialX + dx,
+        y: newY,
+      },
+    };
+  };
+
+  private stopDrag = () => {
+    if (!this.dragState.active) return;
+    this.dragState.active = false;
+    document.body.classList.remove("os-dragging");
+  };
+
+  toggleLauncher() {
+    this.showLauncher = !this.showLauncher;
+    this.launcherSearch = "";
+  }
+
+  private closeLauncherOnBackdrop(e: MouseEvent) {
+    if ((e.target as HTMLElement).classList.contains("launcher-overlay")) {
+      this.showLauncher = false;
+      this.launcherSearch = "";
     }
-    this.navDrawerOpen = false;
+  }
+
+  private launchFromLauncher(tab: Tab) {
+    this.showLauncher = false;
+    this.launcherSearch = "";
+    this.openWindow(tab);
   }
 
   private scheduleChatAutoScroll() {
@@ -210,7 +349,7 @@ export class GsvApp extends LitElement {
 
   private syncChannelsAutoRefresh() {
     const shouldRefresh =
-      this.tab === "channels" && this.connectionState === "connected";
+      !!this.openWindows["channels"] && this.connectionState === "connected";
 
     if (!shouldRefresh) {
       this.stopChannelsAutoRefresh();
@@ -302,12 +441,7 @@ export class GsvApp extends LitElement {
   // ---- Tab Navigation ----
 
   switchTab(tab: Tab) {
-    if (this.tab !== tab) {
-      this.tab = tab;
-      navigateTo(tab);
-      this.loadTabData(tab);
-    }
-    this.closeNavDrawer();
+    this.openWindow(tab);
   }
 
   private async loadTabData(tab: Tab) {
@@ -1014,20 +1148,142 @@ export class GsvApp extends LitElement {
       return this.renderConnectScreen();
     }
 
+    const allTabs: Tab[] = TAB_GROUPS.flatMap(g => g.tabs);
+    // Pinned tabs always show in dock; non-pinned only when open
+    const dockTabs = allTabs.filter(t => WINDOW_DEFAULTS[t].pinned || this.openWindows[t]);
+
     return html`
-      <div class="app-shell ${this.isMobileLayout ? "mobile" : ""} ${this.navDrawerOpen ? "nav-open" : ""}">
-        <button
-          type="button"
-          class="nav-backdrop ${this.navDrawerOpen ? "open" : ""}"
-          @click=${() => this.closeNavDrawer()}
-          aria-label="Close navigation menu"
-        ></button>
-        ${this.renderNav()}
-        <div class="main-content">
-          ${this.renderTopbar()}
-          <div class="page-content">
-            ${this.renderView()}
+      <!-- Ambient Background -->
+      <div class="ambient-bg">
+        <div class="orb orb-1"></div>
+        <div class="orb orb-2"></div>
+        <div class="orb orb-3"></div>
+      </div>
+
+      <!-- Status Bar -->
+      <div class="status-bar">
+        <div class="status-left">
+          <div class="status-btn" style="font-weight: 700;">GSV</div>
+          <div class="status-btn">
+            <span class="status-dot ${this.connectionState}"></span>
+            ${this.connectionState === "connected" ? "Connected" :
+              this.connectionState === "connecting" ? "Connecting..." :
+              "Disconnected"}
+          </div>
+        </div>
+        <div class="status-right">
+          <div class="status-btn" @click=${() => this.disconnect()} title="Disconnect">
+            <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>
           </div>
+          <div class="status-btn">${this.clockText}</div>
+        </div>
+      </div>
+
+      <!-- Desktop Area (contains windows) -->
+      <div class="desktop">
+        ${Object.values(this.openWindows).map(ws => this.renderWindow(ws))}
+      </div>
+
+      <!-- Launcher Overlay -->
+      <div
+        class="launcher-overlay ${this.showLauncher ? "show" : ""}"
+        @click=${(e: MouseEvent) => this.closeLauncherOnBackdrop(e)}
+      >
+        <div class="launcher">
+          <div class="launcher-search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+            <input
+              type="text"
+              placeholder="Search apps..."
+              .value=${this.launcherSearch}
+              @input=${(e: Event) => { this.launcherSearch = (e.target as HTMLInputElement).value; }}
+            />
+          </div>
+          <div class="launcher-grid">
+            ${allTabs
+              .filter(t => !this.launcherSearch || TAB_LABELS[t].toLowerCase().includes(this.launcherSearch.toLowerCase()))
+              .map(t => html`
+                <button
+                  class="launcher-item"
+                  @click=${() => this.launchFromLauncher(t)}
+                >
+                  ${unsafeHTML(TAB_ICONS[t])}
+                  <span>${TAB_LABELS[t]}</span>
+                </button>
+              `)}
+          </div>
+        </div>
+      </div>
+
+      <!-- Dock -->
+      <div class="dock-container">
+        <div class="dock">
+          <button
+            class="dock-item"
+            @click=${() => this.toggleLauncher()}
+            title="App Launcher"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+          </button>
+          <div class="dock-separator"></div>
+          ${dockTabs.map(t => {
+            const isOpen = !!this.openWindows[t];
+            const isFocused = isOpen && this.openWindows[t].zIndex === this.topZIndex;
+            return html`
+              <button
+                class="dock-item ${isOpen ? "running" : ""} ${isFocused ? "focused" : ""}"
+                @click=${() => {
+                  if (!isOpen) {
+                    this.openWindow(t);
+                  } else if (this.openWindows[t].minimized) {
+                    this.minimizeWindow(t);
+                  } else if (isFocused) {
+                    this.minimizeWindow(t);
+                  } else {
+                    this.focusWindow(t);
+                  }
+                }}
+                title=${TAB_LABELS[t]}
+              >
+                ${unsafeHTML(TAB_ICONS[t])}
+              </button>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderWindow(ws: WindowState) {
+    const isChat = ws.tab === "chat";
+    const isDragging = this.dragState.active && this.dragState.tab === ws.tab;
+
+    return html`
+      <div
+        class="window visible ${ws.minimized ? "minimized" : ""} ${ws.maximized ? "maximized" : ""} ${isDragging ? "dragging" : ""}"
+        style="left:${ws.x}px; top:${ws.y}px; width:${ws.width}px; height:${ws.height}px; z-index:${ws.zIndex};"
+        @mousedown=${() => this.focusWindow(ws.tab)}
+      >
+        <div
+          class="window-header"
+          @mousedown=${(e: MouseEvent) => this.startWindowDrag(e, ws.tab)}
+          @dblclick=${() => this.maximizeWindow(ws.tab)}
+        >
+          <div class="window-controls">
+            <button class="control-btn btn-close" @click=${(e: Event) => { e.stopPropagation(); this.closeWindow(ws.tab); }}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+            <button class="control-btn btn-minimize" @click=${(e: Event) => { e.stopPropagation(); this.minimizeWindow(ws.tab); }}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="5" y1="12" x2="19" y2="12"/></svg>
+            </button>
+            <button class="control-btn btn-maximize" @click=${(e: Event) => { e.stopPropagation(); this.maximizeWindow(ws.tab); }}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+            </button>
+          </div>
+          <div class="window-title">${TAB_LABELS[ws.tab]}</div>
+        </div>
+        <div class="window-content ${isChat ? "chat-content" : ""}">
+          ${this.renderViewContent(ws.tab)}
         </div>
       </div>
     `;
@@ -1037,10 +1293,21 @@ export class GsvApp extends LitElement {
     const isConnecting = this.connectionState === "connecting";
     
     return html`
+      <!-- Ambient Background -->
+      <div class="ambient-bg">
+        <div class="orb orb-1"></div>
+        <div class="orb orb-2"></div>
+        <div class="orb orb-3"></div>
+      </div>
+
       <div class="connect-screen">
         <div class="connect-card">
           <div class="connect-header">
-            <span class="connect-logo">🚀</span>
+            <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" style="color: var(--accent-primary);">
+              <polygon points="12 2 2 7 12 12 22 7 12 2"/>
+              <polyline points="2 17 12 22 22 17"/>
+              <polyline points="2 12 12 17 22 12"/>
+            </svg>
             <h1>GSV</h1>
             <p class="text-secondary">Connect to your Gateway</p>
           </div>
@@ -1097,94 +1364,13 @@ export class GsvApp extends LitElement {
               ${isConnecting ? html`<span class="spinner"></span> Connecting...` : "Connect"}
             </button>
           </div>
-          
-          <div class="connect-footer">
-            <p class="text-secondary">
-              Theme: 
-              <button 
-                class="btn btn-ghost btn-sm"
-                @click=${() => {
-                  const newTheme = this.settings.theme === "dark" ? "light" : "dark";
-                  this.settings = { ...this.settings, theme: newTheme };
-                  saveSettings({ theme: newTheme });
-                  applyTheme(newTheme);
-                }}
-              >
-                ${this.settings.theme === "dark" ? "🌙 Dark" : "☀️ Light"}
-              </button>
-            </p>
-          </div>
         </div>
       </div>
     `;
   }
 
-  private renderNav() {
-    return html`
-      <nav class="nav-sidebar ${this.navDrawerOpen ? "open" : ""}">
-        <div class="nav-header">
-          <span class="nav-logo">🚀</span>
-          <span class="nav-title">GSV</span>
-        </div>
-        
-        <div class="nav-groups">
-          ${TAB_GROUPS.map(group => html`
-            <div class="nav-group">
-              <div class="nav-group-label">${group.label}</div>
-              ${group.tabs.map(tab => html`
-                <div 
-                  class="nav-item ${this.tab === tab ? "active" : ""}"
-                  @click=${() => this.switchTab(tab)}
-                >
-                  <span class="nav-item-icon">${TAB_ICONS[tab]}</span>
-                  <span class="nav-item-label">${TAB_LABELS[tab]}</span>
-                </div>
-              `)}
-            </div>
-          `)}
-        </div>
-        
-        <div class="nav-footer">
-          <div class="connection-status">
-            <span class="connection-dot ${this.connectionState}"></span>
-            <span>${this.connectionState === "connected" ? "Connected" : 
-                   this.connectionState === "connecting" ? "Connecting..." : 
-                   "Disconnected"}</span>
-          </div>
-        </div>
-      </nav>
-    `;
-  }
-
-  private renderTopbar() {
-    return html`
-      <header class="topbar">
-        <div class="topbar-title-wrap">
-          <button
-            class="btn btn-ghost btn-icon topbar-menu-btn"
-            @click=${() => this.toggleNavDrawer()}
-            title="Toggle navigation"
-            aria-label="Toggle navigation menu"
-          >
-            ☰
-          </button>
-          <h1 class="topbar-title">${TAB_LABELS[this.tab]}</h1>
-        </div>
-        <div class="topbar-actions">
-          <button 
-            class="btn btn-ghost btn-icon"
-            @click=${() => this.updateSettings({ theme: this.settings.theme === "dark" ? "light" : "dark" })}
-            title="Toggle theme"
-          >
-            ${this.settings.theme === "dark" ? "🌙" : "☀️"}
-          </button>
-        </div>
-      </header>
-    `;
-  }
-
-  private renderView() {
-    switch (this.tab) {
+  private renderViewContent(tab: Tab) {
+    switch (tab) {
       case "chat":
         return renderChat(this);
       case "overview":
diff --git a/gateway/ui/src/ui/navigation.ts b/gateway/ui/src/ui/navigation.ts
index 2466a98..b3d7357 100644
--- a/gateway/ui/src/ui/navigation.ts
+++ b/gateway/ui/src/ui/navigation.ts
@@ -16,6 +16,7 @@ const TAB_PATHS: Record<Tab, string> = {
   pairing: "/pairing",
   config: "/config",
   debug: "/debug",
+  settings: "/settings",
 };
 
 const PATH_TABS: Record<string, Tab> = Object.fromEntries(
diff --git a/gateway/ui/src/ui/types.ts b/gateway/ui/src/ui/types.ts
index 4a86de3..5806e9f 100644
--- a/gateway/ui/src/ui/types.ts
+++ b/gateway/ui/src/ui/types.ts
@@ -197,7 +197,8 @@ export type Tab =
   | "logs"
   | "pairing"
   | "config"
-  | "debug";
+  | "debug"
+  | "settings";
 
 export const TAB_GROUPS: { label: string; tabs: Tab[] }[] = [
   { label: "Chat", tabs: ["chat"] },
@@ -206,18 +207,26 @@ export const TAB_GROUPS: { label: string; tabs: Tab[] }[] = [
   { label: "Settings", tabs: ["pairing", "config", "debug"] },
 ];
 
+/** Tabs that appear in the OS dock (settings replaces pairing/config/debug). */
+export const OS_DOCK_TABS: Tab[] = [
+  "chat", "overview", "sessions", "channels", "nodes",
+  "workspace", "cron", "logs", "settings",
+];
+
+// SVG icon strings (Feather-style, stroke-based)
 export const TAB_ICONS: Record<Tab, string> = {
-  chat: "\uD83D\uDCAC",
-  overview: "\uD83D\uDCCA",
-  sessions: "\uD83D\uDCCB",
-  channels: "\uD83D\uDCF1",
-  nodes: "\uD83D\uDDA5\uFE0F",
-  workspace: "\uD83D\uDCC1",
-  cron: "\u23F0",
-  logs: "\uD83D\uDCDC",
-  pairing: "\uD83E\uDD1D",
-  config: "\u2699\uFE0F",
-  debug: "\uD83D\uDD27",
+  chat: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
+  overview: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',
+  sessions: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>',
+  channels: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg>',
+  nodes: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>',
+  workspace: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>',
+  cron: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
+  logs: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>',
+  pairing: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"/><line x1="8" y1="12" x2="16" y2="12"/></svg>',
+  config: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>',
+  debug: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>',
+  settings: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
 };
 
 export const TAB_LABELS: Record<Tab, string> = {
@@ -232,4 +241,32 @@ export const TAB_LABELS: Record<Tab, string> = {
   pairing: "Pairing",
   config: "Config",
   debug: "Debug",
+  settings: "Settings",
+};
+
+// Window defaults
+export const WINDOW_DEFAULTS: Record<Tab, { width: number; height: number; pinned: boolean }> = {
+  chat: { width: 700, height: 550, pinned: true },
+  overview: { width: 820, height: 520, pinned: true },
+  sessions: { width: 700, height: 480, pinned: true },
+  channels: { width: 740, height: 520, pinned: true },
+  nodes: { width: 680, height: 460, pinned: false },
+  workspace: { width: 920, height: 600, pinned: true },
+  cron: { width: 780, height: 520, pinned: false },
+  logs: { width: 720, height: 480, pinned: false },
+  pairing: { width: 620, height: 420, pinned: false },
+  config: { width: 780, height: 560, pinned: false },
+  debug: { width: 680, height: 440, pinned: false },
+  settings: { width: 800, height: 560, pinned: false },
+};
+
+export type WindowState = {
+  tab: Tab;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  minimized: boolean;
+  maximized: boolean;
+  zIndex: number;
 };

From 1f13076fbd195e7dee9e478c79792c37371a03dd Mon Sep 17 00:00:00 2001
From: Steve James <sjames@cloudflare.com>
Date: Wed, 25 Feb 2026 15:03:49 +0100
Subject: [PATCH 4/6] surfaces

---
 cli/Cargo.lock                                | 1898 ++++++++++++++++-
 cli/Cargo.toml                                |    9 +
 cli/src/display.rs                            |  340 +++
 cli/src/lib.rs                                |    2 +
 cli/src/main.rs                               |  172 +-
 cli/src/protocol.rs                           |   92 +
 gateway/package.json                          |    8 +-
 gateway/src/agents/tools/constants.ts         |    3 +
 gateway/src/agents/tools/index.ts             |    7 +
 gateway/src/agents/tools/surface.ts           |  180 ++
 gateway/src/gateway/do.ts                     |  184 +-
 gateway/src/gateway/rpc-handlers/connect.ts   |    8 +
 gateway/src/gateway/rpc-handlers/index.ts     |   12 +
 gateway/src/gateway/rpc-handlers/surface.ts   |  172 ++
 gateway/src/protocol/methods.ts               |   37 +
 gateway/src/protocol/surface.ts               |  119 ++
 gateway/src/protocol/tools.ts                 |    1 +
 gateway/src/session/do.ts                     |    5 +-
 gateway/ui/src/react/App.tsx                  |  239 +--
 gateway/ui/src/react/components/OsShell.tsx   |  567 ++++-
 gateway/ui/src/react/components/Wallpaper.tsx |  152 ++
 gateway/ui/src/react/state/store.ts           |  162 +-
 gateway/ui/src/react/views/ConfigView.tsx     |  101 +-
 gateway/ui/src/react/views/SettingsView.tsx   |   53 +-
 gateway/ui/src/styles/base.css                |   38 +-
 gateway/ui/src/styles/chat.css                |   35 +
 gateway/ui/src/styles/components.css          |   56 +
 gateway/ui/src/styles/layout.css              |   14 +
 gateway/ui/src/styles/os-shell.css            |  591 ++++-
 gateway/ui/src/ui/gateway-client.ts           |   37 +
 gateway/ui/src/ui/storage.ts                  |   12 +
 gateway/ui/src/ui/types.ts                    |   25 +
 32 files changed, 4812 insertions(+), 519 deletions(-)
 create mode 100644 cli/src/display.rs
 create mode 100644 gateway/src/agents/tools/surface.ts
 create mode 100644 gateway/src/gateway/rpc-handlers/surface.ts
 create mode 100644 gateway/src/protocol/surface.ts
 create mode 100644 gateway/ui/src/react/components/Wallpaper.tsx

diff --git a/cli/Cargo.lock b/cli/Cargo.lock
index 4daf433..184e56a 100644
--- a/cli/Cargo.lock
+++ b/cli/Cargo.lock
@@ -96,7 +96,30 @@ checksum = "9035ad2d096bed7955a320ee7e2230574d28fd3c3a0f186cbea1ff3c7eed5dbb"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
+]
+
+[[package]]
+name = "atk"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "241b621213072e993be4f6f3a9e4b45f65b7e6faad43001be957184b7bb1824b"
+dependencies = [
+ "atk-sys",
+ "glib",
+ "libc",
+]
+
+[[package]]
+name = "atk-sys"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c5e48b684b0ca77d2bbadeef17424c2ea3c897d44d566a1617e7e8f30614d086"
+dependencies = [
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
 ]
 
 [[package]]
@@ -117,6 +140,12 @@ version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
 
+[[package]]
+name = "bitflags"
+version = "1.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
+
 [[package]]
 name = "bitflags"
 version = "2.10.0"
@@ -146,6 +175,15 @@ dependencies = [
  "generic-array",
 ]
 
+[[package]]
+name = "block2"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cdeb9d870516001442e364c5220d3574d2da8dc765554b4a617230d33fa58ef5"
+dependencies = [
+ "objc2",
+]
+
 [[package]]
 name = "bumpalo"
 version = "3.19.1"
@@ -176,6 +214,31 @@ version = "1.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b35204fbdc0b3f4446b89fc1ac2cf84a8a68971995d0bf2e925ec7cd960f9cb3"
 
+[[package]]
+name = "cairo-rs"
+version = "0.18.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ca26ef0159422fb77631dc9d17b102f253b876fe1586b03b803e63a309b4ee2"
+dependencies = [
+ "bitflags 2.10.0",
+ "cairo-sys-rs",
+ "glib",
+ "libc",
+ "once_cell",
+ "thiserror 1.0.69",
+]
+
+[[package]]
+name = "cairo-sys-rs"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "685c9fa8e590b8b3d678873528d83411db17242a73fccaed827770ea0fedda51"
+dependencies = [
+ "glib-sys",
+ "libc",
+ "system-deps",
+]
+
 [[package]]
 name = "cc"
 version = "1.2.55"
@@ -186,6 +249,12 @@ dependencies = [
  "shlex",
 ]
 
+[[package]]
+name = "cesu8"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6d43a04d8753f35258c91f8ec639f792891f748a1edbd759cf1dcea3382ad83c"
+
 [[package]]
 name = "cfb"
 version = "0.7.3"
@@ -197,6 +266,16 @@ dependencies = [
  "uuid",
 ]
 
+[[package]]
+name = "cfg-expr"
+version = "0.15.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d067ad48b8650848b989a59a86c6c36a995d02d2bf778d45c3c5d57bc2718f02"
+dependencies = [
+ "smallvec",
+ "target-lexicon",
+]
+
 [[package]]
 name = "cfg-if"
 version = "1.0.4"
@@ -219,7 +298,7 @@ dependencies = [
  "js-sys",
  "num-traits",
  "wasm-bindgen",
- "windows-link",
+ "windows-link 0.2.1",
 ]
 
 [[package]]
@@ -250,10 +329,10 @@ version = "4.5.55"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a92793da1a46a5f2a02a6f4c46c6496b28c43638adea8306fcb0caa1634f24e5"
 dependencies = [
- "heck",
+ "heck 0.5.0",
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -282,6 +361,16 @@ version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b05b61dc5112cbb17e4b6cd61790d9845d13888356391624cbe7e41efeac1e75"
 
+[[package]]
+name = "combine"
+version = "4.6.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba5a308b75df32fe02788e748662718f03fde005016435c444eea572398219fd"
+dependencies = [
+ "bytes",
+ "memchr",
+]
+
 [[package]]
 name = "console"
 version = "0.15.11"
@@ -314,6 +403,22 @@ version = "0.4.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d52eff69cd5e647efe296129160853a42795992097e8af39800e1060caeea9b"
 
+[[package]]
+name = "convert_case"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6245d59a3e82a7fc217c5828a6692dbc6dfb63a0c8c90495621f7b9d79704a0e"
+
+[[package]]
+name = "cookie"
+version = "0.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ddef33a339a91ea89fb53151bd0a4689cfce27055c291dfa69945475d22c747"
+dependencies = [
+ "time",
+ "version_check",
+]
+
 [[package]]
 name = "core-foundation"
 version = "0.9.4"
@@ -324,12 +429,46 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "core-foundation"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b2a6cd9ae233e7f62ba4e9353e81a88df7fc8a5987b8d445b4d90c879bd156f6"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "core-foundation-sys"
 version = "0.8.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "773648b94d0e5d620f64f280777445740e61fe701025087ec8b57f45c791888b"
 
+[[package]]
+name = "core-graphics"
+version = "0.24.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fa95a34622365fa5bbf40b20b75dba8dfa8c94c734aea8ac9a5ca38af14316f1"
+dependencies = [
+ "bitflags 2.10.0",
+ "core-foundation 0.10.1",
+ "core-graphics-types",
+ "foreign-types 0.5.0",
+ "libc",
+]
+
+[[package]]
+name = "core-graphics-types"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3d44a101f213f6c4cdc1853d4b78aef6db6bdfa3468798cc1d9912f4735013eb"
+dependencies = [
+ "bitflags 2.10.0",
+ "core-foundation 0.10.1",
+ "libc",
+]
+
 [[package]]
 name = "cpufeatures"
 version = "0.2.17"
@@ -348,6 +487,21 @@ dependencies = [
  "cfg-if",
 ]
 
+[[package]]
+name = "crossbeam-channel"
+version = "0.5.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82b8f8f868b36967f9606790d1903570de9ceaf870a7bf9fbbd3016d636a2cb2"
+dependencies = [
+ "crossbeam-utils",
+]
+
+[[package]]
+name = "crossbeam-utils"
+version = "0.8.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d0a5c400df2834b80a4c3327b3aad3a4c4cd4de0629063962b03235697506a28"
+
 [[package]]
 name = "crypto-common"
 version = "0.1.7"
@@ -358,12 +512,61 @@ dependencies = [
  "typenum",
 ]
 
+[[package]]
+name = "cssparser"
+version = "0.29.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f93d03419cb5950ccfd3daf3ff1c7a36ace64609a1a8746d493df1ca0afde0fa"
+dependencies = [
+ "cssparser-macros",
+ "dtoa-short",
+ "itoa",
+ "matches",
+ "phf 0.10.1",
+ "proc-macro2",
+ "quote",
+ "smallvec",
+ "syn 1.0.109",
+]
+
+[[package]]
+name = "cssparser-macros"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331"
+dependencies = [
+ "quote",
+ "syn 2.0.114",
+]
+
 [[package]]
 name = "data-encoding"
 version = "2.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d7a1e2f27636f116493b8b860f5546edb47c8d8f8ea73e1d2a20be88e28d1fea"
 
+[[package]]
+name = "deranged"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c9e6a11ca8224451684bc0d7d5a7adbf8f2fd6887261a1cfc3c0432f9d4068e"
+dependencies = [
+ "powerfmt",
+]
+
+[[package]]
+name = "derive_more"
+version = "0.99.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6edb4b64a43d977b8e99788fe3a04d483834fba1215a7e02caa415b626497f7f"
+dependencies = [
+ "convert_case",
+ "proc-macro2",
+ "quote",
+ "rustc_version",
+ "syn 2.0.114",
+]
+
 [[package]]
 name = "digest"
 version = "0.10.7"
@@ -380,7 +583,16 @@ version = "5.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "44c45a9d03d6676652bcb5e724c7e988de1acad23a711b5217ab9cbecbec2225"
 dependencies = [
- "dirs-sys",
+ "dirs-sys 0.4.1",
+]
+
+[[package]]
+name = "dirs"
+version = "6.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c3e8aa94d75141228480295a7d0e7feb620b1a5ad9f12bc40be62411e38cce4e"
+dependencies = [
+ "dirs-sys 0.5.0",
 ]
 
 [[package]]
@@ -391,10 +603,38 @@ checksum = "520f05a5cbd335fae5a99ff7a6ab8627577660ee5cfd6a94a6a929b52ff0321c"
 dependencies = [
  "libc",
  "option-ext",
- "redox_users",
+ "redox_users 0.4.6",
  "windows-sys 0.48.0",
 ]
 
+[[package]]
+name = "dirs-sys"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e01a3366d27ee9890022452ee61b2b63a67e6f13f58900b651ff5665f0bb1fab"
+dependencies = [
+ "libc",
+ "option-ext",
+ "redox_users 0.5.2",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "dispatch"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bd0c93bb4b0c6d9b77f4435b0ae98c24d17f1c45b2ff844c6151a07256ca923b"
+
+[[package]]
+name = "dispatch2"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "89a09f22a6c6069a18470eb92d2298acf25463f14256d24778e1230d789a2aec"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2",
+]
+
 [[package]]
 name = "displaydoc"
 version = "0.2.5"
@@ -403,9 +643,59 @@ checksum = "97369cbbc041bc366949bc74d34658d6cda5621039731c6310521892a3a20ae0"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
+]
+
+[[package]]
+name = "dlopen2"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e2c5bd4158e66d1e215c49b837e11d62f3267b30c92f1d171c4d3105e3dc4d4"
+dependencies = [
+ "dlopen2_derive",
+ "libc",
+ "once_cell",
+ "winapi",
+]
+
+[[package]]
+name = "dlopen2_derive"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fbbb781877580993a8707ec48672673ec7b81eeba04cfd2310bd28c08e47c8f"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
+]
+
+[[package]]
+name = "dpi"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d8b14ccef22fc6f5a8f4d7d768562a182c04ce9a3b3157b91390b52ddfdf1a76"
+
+[[package]]
+name = "dtoa"
+version = "1.0.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4c3cf4824e2d5f025c7b531afcb2325364084a16806f6d47fbc1f5fbd9960590"
+
+[[package]]
+name = "dtoa-short"
+version = "0.3.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd1511a7b6a56299bd043a9c167a6d2bfb37bf84a6dfceaba651168adfb43c87"
+dependencies = [
+ "dtoa",
 ]
 
+[[package]]
+name = "dunce"
+version = "1.0.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "92773504d58c093f6de2459af4af33faa518c13451eb8f2b5698ed3d36e7c813"
+
 [[package]]
 name = "encode_unicode"
 version = "1.0.0"
@@ -434,6 +724,16 @@ version = "2.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "37909eebbb50d72f9059c3b6d82c0463f2ff062c9e95845c43a6c9c0355411be"
 
+[[package]]
+name = "field-offset"
+version = "0.3.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "38e2275cc4e4fc009b0669731a1e5ab7ebf11f469eaede2bab9309a5b4d6057f"
+dependencies = [
+ "memoffset",
+ "rustc_version",
+]
+
 [[package]]
 name = "filetime"
 version = "0.2.27"
@@ -473,7 +773,28 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f6f339eb8adc052cd2ca78910fda869aefa38d22d5cb648e6485e4d3fc06f3b1"
 dependencies = [
- "foreign-types-shared",
+ "foreign-types-shared 0.1.1",
+]
+
+[[package]]
+name = "foreign-types"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d737d9aa519fb7b749cbc3b962edcf310a8dd1f4b67c91c4f83975dbdd17d965"
+dependencies = [
+ "foreign-types-macros",
+ "foreign-types-shared 0.3.1",
+]
+
+[[package]]
+name = "foreign-types-macros"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a5c6c585bc94aaf2c7b51dd4c2ba22680844aba4c687be581871a6f518c5742"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -482,6 +803,12 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "00b0228411908ca8685dba7fc2cdd70ec9990a6e753e89b6ac91a84c40fbaf4b"
 
+[[package]]
+name = "foreign-types-shared"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "aa9a19cbb55df58761df49b23516a86d432839add4af60fc256da840f66ed35b"
+
 [[package]]
 name = "form_urlencoded"
 version = "1.2.2"
@@ -491,6 +818,16 @@ dependencies = [
  "percent-encoding",
 ]
 
+[[package]]
+name = "futf"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df420e2e84819663797d1ec6544b13c5be84629e7bb00dc960d6917db2987843"
+dependencies = [
+ "mac",
+ "new_debug_unreachable",
+]
+
 [[package]]
 name = "futures-channel"
 version = "0.3.31"
@@ -506,6 +843,23 @@ version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "05f29059c0c2090612e8d742178b0580d2dc940c837851ad723096f87af6663e"
 
+[[package]]
+name = "futures-executor"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e28d1d997f585e54aebc3f97d39e72338912123a67330d723fdbb564d646c9f"
+dependencies = [
+ "futures-core",
+ "futures-task",
+ "futures-util",
+]
+
+[[package]]
+name = "futures-io"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cecba35d7ad927e23624b22ad55235f2239cfa44fd10428eecbeba6d6a717718"
+
 [[package]]
 name = "futures-macro"
 version = "0.3.31"
@@ -514,7 +868,7 @@ checksum = "162ee34ebcb7c64a8abebc059ce0fee27c2262618d7b60ed8faf72fef13c3650"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -544,14 +898,119 @@ dependencies = [
  "slab",
 ]
 
+[[package]]
+name = "fxhash"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c31b6d751ae2c7f11320402d34e41349dd1016f8d5d45e48c4312bc8625af50c"
+dependencies = [
+ "byteorder",
+]
+
+[[package]]
+name = "gdk"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d9f245958c627ac99d8e529166f9823fb3b838d1d41fd2b297af3075093c2691"
+dependencies = [
+ "cairo-rs",
+ "gdk-pixbuf",
+ "gdk-sys",
+ "gio",
+ "glib",
+ "libc",
+ "pango",
+]
+
+[[package]]
+name = "gdk-pixbuf"
+version = "0.18.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50e1f5f1b0bfb830d6ccc8066d18db35c487b1b2b1e8589b5dfe9f07e8defaec"
+dependencies = [
+ "gdk-pixbuf-sys",
+ "gio",
+ "glib",
+ "libc",
+ "once_cell",
+]
+
+[[package]]
+name = "gdk-pixbuf-sys"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f9839ea644ed9c97a34d129ad56d38a25e6756f99f3a88e15cd39c20629caf7"
+dependencies = [
+ "gio-sys",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "gdk-sys"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c2d13f38594ac1e66619e188c6d5a1adb98d11b2fcf7894fc416ad76aa2f3f7"
+dependencies = [
+ "cairo-sys-rs",
+ "gdk-pixbuf-sys",
+ "gio-sys",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "pango-sys",
+ "pkg-config",
+ "system-deps",
+]
+
+[[package]]
+name = "gdkwayland-sys"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "140071d506d223f7572b9f09b5e155afbd77428cd5cc7af8f2694c41d98dfe69"
+dependencies = [
+ "gdk-sys",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "pkg-config",
+ "system-deps",
+]
+
+[[package]]
+name = "gdkx11-sys"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6e2e7445fe01ac26f11601db260dd8608fe172514eb63b3b5e261ea6b0f4428d"
+dependencies = [
+ "gdk-sys",
+ "glib-sys",
+ "libc",
+ "system-deps",
+ "x11",
+]
+
 [[package]]
 name = "generic-array"
 version = "0.14.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "85649ca51fd72272d7821adaf274ad91c288277713d9c18820d8499a7ff69e9a"
+checksum = "85649ca51fd72272d7821adaf274ad91c288277713d9c18820d8499a7ff69e9a"
+dependencies = [
+ "typenum",
+ "version_check",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.1.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8fc3cb4d91f53b50155bdcfd23f6a4c39ae1969c2ae85982b135750cccaf5fce"
 dependencies = [
- "typenum",
- "version_check",
+ "cfg-if",
+ "libc",
+ "wasi 0.9.0+wasi-snapshot-preview1",
 ]
 
 [[package]]
@@ -563,7 +1022,7 @@ dependencies = [
  "cfg-if",
  "js-sys",
  "libc",
- "wasi",
+ "wasi 0.11.1+wasi-snapshot-preview1",
  "wasm-bindgen",
 ]
 
@@ -581,12 +1040,102 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "gio"
+version = "0.18.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4fc8f532f87b79cbc51a79748f16a6828fb784be93145a322fa14d06d354c73"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-util",
+ "gio-sys",
+ "glib",
+ "libc",
+ "once_cell",
+ "pin-project-lite",
+ "smallvec",
+ "thiserror 1.0.69",
+]
+
+[[package]]
+name = "gio-sys"
+version = "0.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "37566df850baf5e4cb0dfb78af2e4b9898d817ed9263d1090a2df958c64737d2"
+dependencies = [
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+ "winapi",
+]
+
+[[package]]
+name = "glib"
+version = "0.18.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "233daaf6e83ae6a12a52055f568f9d7cf4671dabb78ff9560ab6da230ce00ee5"
+dependencies = [
+ "bitflags 2.10.0",
+ "futures-channel",
+ "futures-core",
+ "futures-executor",
+ "futures-task",
+ "futures-util",
+ "gio-sys",
+ "glib-macros",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "memchr",
+ "once_cell",
+ "smallvec",
+ "thiserror 1.0.69",
+]
+
+[[package]]
+name = "glib-macros"
+version = "0.18.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0bb0228f477c0900c880fd78c8759b95c7636dbd7842707f49e132378aa2acdc"
+dependencies = [
+ "heck 0.4.1",
+ "proc-macro-crate 2.0.2",
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
+]
+
+[[package]]
+name = "glib-sys"
+version = "0.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "063ce2eb6a8d0ea93d2bf8ba1957e78dbab6be1c2220dd3daca57d5a9d869898"
+dependencies = [
+ "libc",
+ "system-deps",
+]
+
 [[package]]
 name = "glob"
 version = "0.3.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0cc23270f6e1808e30a928bdc84dea0b9b4136a8bc82338574f23baf47bbd280"
 
+[[package]]
+name = "gobject-sys"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0850127b514d1c4a4654ead6dedadb18198999985908e6ffe4436f53c785ce44"
+dependencies = [
+ "glib-sys",
+ "libc",
+ "system-deps",
+]
+
 [[package]]
 name = "gsv"
 version = "0.0.1"
@@ -597,7 +1146,7 @@ dependencies = [
  "chrono",
  "clap",
  "cliclack",
- "dirs",
+ "dirs 5.0.1",
  "flate2",
  "futures-util",
  "glob",
@@ -613,13 +1162,69 @@ dependencies = [
  "serde",
  "serde_json",
  "sha2",
+ "tao",
  "tar",
  "tokio",
  "tokio-tungstenite",
  "toml",
+ "url",
+ "urlencoding",
  "uuid",
  "walkdir",
  "whoami",
+ "wry",
+]
+
+[[package]]
+name = "gtk"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fd56fb197bfc42bd5d2751f4f017d44ff59fbb58140c6b49f9b3b2bdab08506a"
+dependencies = [
+ "atk",
+ "cairo-rs",
+ "field-offset",
+ "futures-channel",
+ "gdk",
+ "gdk-pixbuf",
+ "gio",
+ "glib",
+ "gtk-sys",
+ "gtk3-macros",
+ "libc",
+ "pango",
+ "pkg-config",
+]
+
+[[package]]
+name = "gtk-sys"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f29a1c21c59553eb7dd40e918be54dccd60c52b049b75119d5d96ce6b624414"
+dependencies = [
+ "atk-sys",
+ "cairo-sys-rs",
+ "gdk-pixbuf-sys",
+ "gdk-sys",
+ "gio-sys",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "pango-sys",
+ "system-deps",
+]
+
+[[package]]
+name = "gtk3-macros"
+version = "0.18.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "52ff3c5b21f14f0736fed6dcfc0bfb4225ebf5725f3c0209edeec181e4d73e9d"
+dependencies = [
+ "proc-macro-crate 1.3.1",
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -628,6 +1233,12 @@ version = "0.16.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "841d1cc9bed7f9236f321df977030373f4a4163ae1a7dbfe1a51a2c1a51d9100"
 
+[[package]]
+name = "heck"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "95505c38b4572b2d910cecb0281560f54b440a19336cbbcb27bf6ce6adc6f5a8"
+
 [[package]]
 name = "heck"
 version = "0.5.0"
@@ -642,7 +1253,19 @@ checksum = "617aaa3557aef3810a6369d0a99fac8a080891b68bd9f9812a1eeda0c0730cbd"
 dependencies = [
  "cfg-if",
  "libc",
- "windows-link",
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "html5ever"
+version = "0.29.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b7410cae13cbc75623c98ac4cbfd1f0bedddf3227afc24f370cf0f50a44a11c"
+dependencies = [
+ "log",
+ "mac",
+ "markup5ever",
+ "match_token",
 ]
 
 [[package]]
@@ -773,7 +1396,7 @@ dependencies = [
  "js-sys",
  "log",
  "wasm-bindgen",
- "windows-core",
+ "windows-core 0.62.2",
 ]
 
 [[package]]
@@ -959,6 +1582,28 @@ version = "1.0.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "92ecc6618181def0457392ccd0ee51198e065e016d1d527a7ac1b6dc7c1f09d2"
 
+[[package]]
+name = "jni"
+version = "0.21.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a87aa2bb7d2af34197c04845522473242e1aa17c12f4935d5856491a7fb8c97"
+dependencies = [
+ "cesu8",
+ "cfg-if",
+ "combine",
+ "jni-sys",
+ "log",
+ "thiserror 1.0.69",
+ "walkdir",
+ "windows-sys 0.45.0",
+]
+
+[[package]]
+name = "jni-sys"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8eaf4bc02d17cbdd7ff4c7438cafcdf7fb9a4613313ad11b4f8fefe7d3fa0130"
+
 [[package]]
 name = "js-sys"
 version = "0.3.85"
@@ -980,6 +1625,24 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "kuchikiki"
+version = "0.8.8-speedreader"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02cb977175687f33fa4afa0c95c112b987ea1443e5a51c8f8ff27dc618270cc2"
+dependencies = [
+ "cssparser",
+ "html5ever",
+ "indexmap",
+ "selectors",
+]
+
+[[package]]
+name = "lazy_static"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe"
+
 [[package]]
 name = "libc"
 version = "0.2.180"
@@ -992,9 +1655,9 @@ version = "0.1.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d0b95e02c851351f877147b7deea7b1afb1df71b63aa5f8270716e0c5720616"
 dependencies = [
- "bitflags",
+ "bitflags 2.10.0",
  "libc",
- "redox_syscall",
+ "redox_syscall 0.7.0",
 ]
 
 [[package]]
@@ -1009,6 +1672,15 @@ version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6373607a59f0be73a39b6fe456b8192fcc3585f602af20751600e974dd455e77"
 
+[[package]]
+name = "lock_api"
+version = "0.4.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "224399e74b87b5f3557511d98dff8b14089b3dadafcab6bb93eab67d3aace965"
+dependencies = [
+ "scopeguard",
+]
+
 [[package]]
 name = "log"
 version = "0.4.29"
@@ -1021,12 +1693,58 @@ version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "112b39cec0b298b6c1999fee3e31427f74f676e4cb9879ed1a121b43661a4154"
 
+[[package]]
+name = "mac"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
+
+[[package]]
+name = "markup5ever"
+version = "0.14.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c7a7213d12e1864c0f002f52c2923d4556935a43dec5e71355c2760e0f6e7a18"
+dependencies = [
+ "log",
+ "phf 0.11.3",
+ "phf_codegen 0.11.3",
+ "string_cache",
+ "string_cache_codegen",
+ "tendril",
+]
+
+[[package]]
+name = "match_token"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "88a9689d8d44bf9964484516275f5cd4c9b59457a6940c1d5d0ecbb94510a36b"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
+]
+
+[[package]]
+name = "matches"
+version = "0.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2532096657941c2fea9c289d370a250971c689d4f143798ff67113ec042024a5"
+
 [[package]]
 name = "memchr"
 version = "2.7.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f52b00d39961fc5b2736ea853c9cc86238e165017a493d1d5c8eac6bdc4cc273"
 
+[[package]]
+name = "memoffset"
+version = "0.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "488016bfae457b036d996092f6cb448677611ce4449e970ceaf42695203f218a"
+dependencies = [
+ "autocfg",
+]
+
 [[package]]
 name = "mime"
 version = "0.3.17"
@@ -1060,7 +1778,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a69bcab0ad47271a0234d9422b131806bf3968021e5dc9328caf2d4cd58557fc"
 dependencies = [
  "libc",
- "wasi",
+ "wasi 0.11.1+wasi-snapshot-preview1",
  "windows-sys 0.61.2",
 ]
 
@@ -1091,6 +1809,54 @@ dependencies = [
  "tempfile",
 ]
 
+[[package]]
+name = "ndk"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c3f42e7bbe13d351b6bead8286a43aac9534b82bd3cc43e47037f012ebfd62d4"
+dependencies = [
+ "bitflags 2.10.0",
+ "jni-sys",
+ "log",
+ "ndk-sys",
+ "num_enum",
+ "raw-window-handle",
+ "thiserror 1.0.69",
+]
+
+[[package]]
+name = "ndk-context"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27b02d87554356db9e9a873add8782d4ea6e3e58ea071a9adb9a2e8ddb884a8b"
+
+[[package]]
+name = "ndk-sys"
+version = "0.6.0+11769913"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee6cda3051665f1fb8d9e08fc35c96d5a244fb1be711a03b71118828afc9a873"
+dependencies = [
+ "jni-sys",
+]
+
+[[package]]
+name = "new_debug_unreachable"
+version = "1.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "650eef8c711430f1a879fdd01d4745a7deea475becfb90269c06775983bbf086"
+
+[[package]]
+name = "nodrop"
+version = "0.1.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72ef4a56884ca558e5ddb05a1d1e7e1bfd9a68d9ed024c21704cc98872dae1bb"
+
+[[package]]
+name = "num-conv"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
+
 [[package]]
 name = "num-traits"
 version = "0.2.19"
@@ -1100,6 +1866,113 @@ dependencies = [
  "autocfg",
 ]
 
+[[package]]
+name = "num_enum"
+version = "0.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1207a7e20ad57b847bbddc6776b968420d38292bbfe2089accff5e19e82454c"
+dependencies = [
+ "num_enum_derive",
+ "rustversion",
+]
+
+[[package]]
+name = "num_enum_derive"
+version = "0.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff32365de1b6743cb203b710788263c44a03de03802daf96092f2da4fe6ba4d7"
+dependencies = [
+ "proc-macro-crate 3.4.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
+]
+
+[[package]]
+name = "objc2"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b7c2599ce0ec54857b29ce62166b0ed9b4f6f1a70ccc9a71165b6154caca8c05"
+dependencies = [
+ "objc2-encode",
+ "objc2-exception-helper",
+]
+
+[[package]]
+name = "objc2-app-kit"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d49e936b501e5c5bf01fda3a9452ff86dc3ea98ad5f283e1455153142d97518c"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2",
+ "objc2-core-foundation",
+ "objc2-foundation",
+]
+
+[[package]]
+name = "objc2-core-foundation"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a180dd8642fa45cdb7dd721cd4c11b1cadd4929ce112ebd8b9f5803cc79d536"
+dependencies = [
+ "bitflags 2.10.0",
+ "dispatch2",
+ "objc2",
+]
+
+[[package]]
+name = "objc2-encode"
+version = "4.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef25abbcd74fb2609453eb695bd2f860d389e457f67dc17cafc8b8cbc89d0c33"
+
+[[package]]
+name = "objc2-exception-helper"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c7a1c5fbb72d7735b076bb47b578523aedc40f3c439bea6dfd595c089d79d98a"
+dependencies = [
+ "cc",
+]
+
+[[package]]
+name = "objc2-foundation"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3e0adef53c21f888deb4fa59fc59f7eb17404926ee8a6f59f5df0fd7f9f3272"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2",
+ "objc2-core-foundation",
+]
+
+[[package]]
+name = "objc2-ui-kit"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d87d638e33c06f577498cbcc50491496a3ed4246998a7fbba7ccb98b1e7eab22"
+dependencies = [
+ "bitflags 2.10.0",
+ "objc2",
+ "objc2-core-foundation",
+ "objc2-foundation",
+]
+
+[[package]]
+name = "objc2-web-kit"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b2e5aaab980c433cf470df9d7af96a7b46a9d892d521a2cbbb2f8a4c16751e7f"
+dependencies = [
+ "bitflags 2.10.0",
+ "block2",
+ "objc2",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation",
+]
+
 [[package]]
 name = "once_cell"
 version = "1.21.3"
@@ -1118,9 +1991,9 @@ version = "0.10.75"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "08838db121398ad17ab8531ce9de97b244589089e290a384c900cb9ff7434328"
 dependencies = [
- "bitflags",
+ "bitflags 2.10.0",
  "cfg-if",
- "foreign-types",
+ "foreign-types 0.3.2",
  "libc",
  "once_cell",
  "openssl-macros",
@@ -1135,7 +2008,7 @@ checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -1160,7 +2033,55 @@ dependencies = [
 name = "option-ext"
 version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "04744f49eae99ab78e0d5c0b603ab218f515ea8cfe5a456d7629ad883a3b6e7d"
+checksum = "04744f49eae99ab78e0d5c0b603ab218f515ea8cfe5a456d7629ad883a3b6e7d"
+
+[[package]]
+name = "pango"
+version = "0.18.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7ca27ec1eb0457ab26f3036ea52229edbdb74dee1edd29063f5b9b010e7ebee4"
+dependencies = [
+ "gio",
+ "glib",
+ "libc",
+ "once_cell",
+ "pango-sys",
+]
+
+[[package]]
+name = "pango-sys"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "436737e391a843e5933d6d9aa102cb126d501e815b83601365a948a518555dc5"
+dependencies = [
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "parking_lot"
+version = "0.12.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93857453250e3077bd71ff98b6a65ea6621a19bb0f559a85248955ac12c45a1a"
+dependencies = [
+ "lock_api",
+ "parking_lot_core",
+]
+
+[[package]]
+name = "parking_lot_core"
+version = "0.9.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2621685985a2ebf1c516881c026032ac7deafcda1a2c9b7850dc81e3dfcb64c1"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "redox_syscall 0.5.18",
+ "smallvec",
+ "windows-link 0.2.1",
+]
 
 [[package]]
 name = "percent-encoding"
@@ -1198,7 +2119,7 @@ dependencies = [
  "pest_meta",
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -1211,6 +2132,126 @@ dependencies = [
  "sha2",
 ]
 
+[[package]]
+name = "phf"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3dfb61232e34fcb633f43d12c58f83c1df82962dcdfa565a4e866ffc17dafe12"
+dependencies = [
+ "phf_shared 0.8.0",
+]
+
+[[package]]
+name = "phf"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fabbf1ead8a5bcbc20f5f8b939ee3f5b0f6f281b6ad3468b84656b658b455259"
+dependencies = [
+ "phf_macros",
+ "phf_shared 0.10.0",
+ "proc-macro-hack",
+]
+
+[[package]]
+name = "phf"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fd6780a80ae0c52cc120a26a1a42c1ae51b247a253e4e06113d23d2c2edd078"
+dependencies = [
+ "phf_shared 0.11.3",
+]
+
+[[package]]
+name = "phf_codegen"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cbffee61585b0411840d3ece935cce9cb6321f01c45477d30066498cd5e1a815"
+dependencies = [
+ "phf_generator 0.8.0",
+ "phf_shared 0.8.0",
+]
+
+[[package]]
+name = "phf_codegen"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "aef8048c789fa5e851558d709946d6d79a8ff88c0440c587967f8e94bfb1216a"
+dependencies = [
+ "phf_generator 0.11.3",
+ "phf_shared 0.11.3",
+]
+
+[[package]]
+name = "phf_generator"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "17367f0cc86f2d25802b2c26ee58a7b23faeccf78a396094c13dced0d0182526"
+dependencies = [
+ "phf_shared 0.8.0",
+ "rand 0.7.3",
+]
+
+[[package]]
+name = "phf_generator"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d5285893bb5eb82e6aaf5d59ee909a06a16737a8970984dd7746ba9283498d6"
+dependencies = [
+ "phf_shared 0.10.0",
+ "rand 0.8.5",
+]
+
+[[package]]
+name = "phf_generator"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c80231409c20246a13fddb31776fb942c38553c51e871f8cbd687a4cfb5843d"
+dependencies = [
+ "phf_shared 0.11.3",
+ "rand 0.8.5",
+]
+
+[[package]]
+name = "phf_macros"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "58fdf3184dd560f160dd73922bea2d5cd6e8f064bf4b13110abd81b03697b4e0"
+dependencies = [
+ "phf_generator 0.10.0",
+ "phf_shared 0.10.0",
+ "proc-macro-hack",
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]
+
+[[package]]
+name = "phf_shared"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c00cf8b9eafe68dde5e9eaa2cef8ee84a9336a47d566ec55ca16589633b65af7"
+dependencies = [
+ "siphasher 0.3.11",
+]
+
+[[package]]
+name = "phf_shared"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6796ad771acdc0123d2a88dc428b5e38ef24456743ddb1744ed628f9815c096"
+dependencies = [
+ "siphasher 0.3.11",
+]
+
+[[package]]
+name = "phf_shared"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67eabc2ef2a60eb7faa00097bd1ffdb5bd28e62bf39990626a582201b7a754e5"
+dependencies = [
+ "siphasher 1.0.2",
+]
+
 [[package]]
 name = "pin-project-lite"
 version = "0.2.16"
@@ -1244,6 +2285,12 @@ dependencies = [
  "zerovec",
 ]
 
+[[package]]
+name = "powerfmt"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"
+
 [[package]]
 name = "ppv-lite86"
 version = "0.2.21"
@@ -1253,6 +2300,71 @@ dependencies = [
  "zerocopy",
 ]
 
+[[package]]
+name = "precomputed-hash"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "925383efa346730478fb4838dbe9137d2a47675ad789c546d150a6e1dd4ab31c"
+
+[[package]]
+name = "proc-macro-crate"
+version = "1.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f4c021e1093a56626774e81216a4ce732a735e5bad4868a03f3ed65ca0c3919"
+dependencies = [
+ "once_cell",
+ "toml_edit 0.19.15",
+]
+
+[[package]]
+name = "proc-macro-crate"
+version = "2.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b00f26d3400549137f92511a46ac1cd8ce37cb5598a96d382381458b992a5d24"
+dependencies = [
+ "toml_datetime 0.6.3",
+ "toml_edit 0.20.2",
+]
+
+[[package]]
+name = "proc-macro-crate"
+version = "3.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "219cb19e96be00ab2e37d6e299658a0cfa83e52429179969b0f0121b4ac46983"
+dependencies = [
+ "toml_edit 0.23.10+spec-1.0.0",
+]
+
+[[package]]
+name = "proc-macro-error"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da25490ff9892aab3fcf7c36f08cfb902dd3e71ca0f9f9517bea02a73a5ce38c"
+dependencies = [
+ "proc-macro-error-attr",
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+ "version_check",
+]
+
+[[package]]
+name = "proc-macro-error-attr"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a1be40180e52ecc98ad80b184934baf3d0d29f979574e439af5a55274b35f869"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "version_check",
+]
+
+[[package]]
+name = "proc-macro-hack"
+version = "0.5.20+deprecated"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc375e1527247fe1a97d8b7156678dfe7c1af2fc075c9a4db3690ecd2a148068"
+
 [[package]]
 name = "proc-macro2"
 version = "1.0.106"
@@ -1350,6 +2462,20 @@ version = "5.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "69cdb34c158ceb288df11e18b4bd39de994f6657d83847bdffdbd7f346754b0f"
 
+[[package]]
+name = "rand"
+version = "0.7.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6a6b1679d49b24bbfe0c803429aa1874472f50d9b363131f0e89fc356b544d03"
+dependencies = [
+ "getrandom 0.1.16",
+ "libc",
+ "rand_chacha 0.2.2",
+ "rand_core 0.5.1",
+ "rand_hc",
+ "rand_pcg",
+]
+
 [[package]]
 name = "rand"
 version = "0.8.5"
@@ -1371,6 +2497,16 @@ dependencies = [
  "rand_core 0.9.5",
 ]
 
+[[package]]
+name = "rand_chacha"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f4c8ed856279c9737206bf725bf36935d8666ead7aa69b52be55af369d193402"
+dependencies = [
+ "ppv-lite86",
+ "rand_core 0.5.1",
+]
+
 [[package]]
 name = "rand_chacha"
 version = "0.3.1"
@@ -1391,6 +2527,15 @@ dependencies = [
  "rand_core 0.9.5",
 ]
 
+[[package]]
+name = "rand_core"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "90bde5296fc891b0cef12a6d03ddccc162ce7b2aff54160af9338f8d40df6d19"
+dependencies = [
+ "getrandom 0.1.16",
+]
+
 [[package]]
 name = "rand_core"
 version = "0.6.4"
@@ -1409,13 +2554,46 @@ dependencies = [
  "getrandom 0.3.4",
 ]
 
+[[package]]
+name = "rand_hc"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ca3129af7b92a17112d59ad498c6f81eaf463253766b90396d39ea7a39d6613c"
+dependencies = [
+ "rand_core 0.5.1",
+]
+
+[[package]]
+name = "rand_pcg"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "16abd0c1b639e9eb4d7c50c0b8100b0d0f849be2349829c740fe8e6eb4816429"
+dependencies = [
+ "rand_core 0.5.1",
+]
+
+[[package]]
+name = "raw-window-handle"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "20675572f6f24e9e76ef639bc5552774ed45f1c30e2951e1e99c59888861c539"
+
+[[package]]
+name = "redox_syscall"
+version = "0.5.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed2bf2547551a7053d6fdfafda3f938979645c44812fbfcda098faae3f1a362d"
+dependencies = [
+ "bitflags 2.10.0",
+]
+
 [[package]]
 name = "redox_syscall"
 version = "0.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "49f3fe0889e69e2ae9e41f4d6c4c0181701d00e4697b356fb1f74173a5e0ee27"
 dependencies = [
- "bitflags",
+ "bitflags 2.10.0",
 ]
 
 [[package]]
@@ -1429,6 +2607,17 @@ dependencies = [
  "thiserror 1.0.69",
 ]
 
+[[package]]
+name = "redox_users"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4e608c6638b9c18977b00b475ac1f28d14e84b27d8d42f70e0bf1e3dec127ac"
+dependencies = [
+ "getrandom 0.2.17",
+ "libredox",
+ "thiserror 2.0.18",
+]
+
 [[package]]
 name = "regex"
 version = "1.12.2"
@@ -1542,13 +2731,22 @@ version = "2.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "357703d41365b4b27c590e3ed91eabb1b663f07c4c084095e60cbed4362dff0d"
 
+[[package]]
+name = "rustc_version"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cfcb3a22ef46e85b45de6ee7e79d063319ebb6594faafcf1c225ea92ab6e9b92"
+dependencies = [
+ "semver",
+]
+
 [[package]]
 name = "rustix"
 version = "1.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "146c9e247ccc180c1f61615433868c99f3de3ae256a30a43b49f67c2d9171f34"
 dependencies = [
- "bitflags",
+ "bitflags 2.10.0",
  "errno",
  "libc",
  "linux-raw-sys",
@@ -1620,14 +2818,20 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "scopeguard"
+version = "1.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
+
 [[package]]
 name = "security-framework"
 version = "2.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "897b2245f0b511c87893af39b033e5ca9cce68824c4d7e7630b5a1d339658d02"
 dependencies = [
- "bitflags",
- "core-foundation",
+ "bitflags 2.10.0",
+ "core-foundation 0.9.4",
  "core-foundation-sys",
  "libc",
  "security-framework-sys",
@@ -1643,6 +2847,30 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "selectors"
+version = "0.24.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c37578180969d00692904465fb7f6b3d50b9a2b952b87c23d0e2e5cb5013416"
+dependencies = [
+ "bitflags 1.3.2",
+ "cssparser",
+ "derive_more",
+ "fxhash",
+ "log",
+ "phf 0.8.0",
+ "phf_codegen 0.8.0",
+ "precomputed-hash",
+ "servo_arc",
+ "smallvec",
+]
+
+[[package]]
+name = "semver"
+version = "1.0.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d767eb0aabc880b29956c35734170f26ed551a859dbd361d140cdbeca61ab1e2"
+
 [[package]]
 name = "serde"
 version = "1.0.228"
@@ -1670,7 +2898,7 @@ checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -1707,6 +2935,16 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "servo_arc"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d52aa42f8fdf0fed91e5ce7f23d8138441002fa31dca008acf47e6fd4721f741"
+dependencies = [
+ "nodrop",
+ "stable_deref_trait",
+]
+
 [[package]]
 name = "sha1"
 version = "0.10.6"
@@ -1751,6 +2989,18 @@ version = "0.3.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e320a6c5ad31d271ad523dcf3ad13e2767ad8b1cb8f047f75a8aeaf8da139da2"
 
+[[package]]
+name = "siphasher"
+version = "0.3.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "38b58827f4464d87d377d175e90bf58eb00fd8716ff0a62f80356b5e61555d0d"
+
+[[package]]
+name = "siphasher"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b2aa850e253778c88a04c3d7323b043aeda9d3e30d5971937c1855769763678e"
+
 [[package]]
 name = "slab"
 version = "0.4.11"
@@ -1785,6 +3035,31 @@ version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6ce2be8dc25455e1f91df71bfa12ad37d7af1092ae736f3a6cd0e37bc7810596"
 
+[[package]]
+name = "string_cache"
+version = "0.8.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf776ba3fa74f83bf4b63c3dcbbf82173db2632ed8452cb2d891d33f459de70f"
+dependencies = [
+ "new_debug_unreachable",
+ "parking_lot",
+ "phf_shared 0.11.3",
+ "precomputed-hash",
+ "serde",
+]
+
+[[package]]
+name = "string_cache_codegen"
+version = "0.5.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c711928715f1fe0fe509c53b43e993a9a557babc2d0a3567d0a3006f1ac931a0"
+dependencies = [
+ "phf_generator 0.11.3",
+ "phf_shared 0.11.3",
+ "proc-macro2",
+ "quote",
+]
+
 [[package]]
 name = "strsim"
 version = "0.11.1"
@@ -1798,34 +3073,109 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
 
 [[package]]
-name = "syn"
-version = "2.0.114"
+name = "syn"
+version = "1.0.109"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b64191b275b66ffe2469e8af2c1cfe3bafa67b529ead792a6d0160888b4237"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "syn"
+version = "2.0.114"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4d107df263a3013ef9b1879b0df87d706ff80f65a86ea879bd9c31f9b307c2a"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "sync_wrapper"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0bf256ce5efdfa370213c1dabab5935a12e49f2c58d15e9eac2870d3b4f27263"
+dependencies = [
+ "futures-core",
+]
+
+[[package]]
+name = "synstructure"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "728a70f3dbaf5bab7f0c4b1ac8d7ae5ea60a4b5549c8a5914361c99147a709d2"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
+]
+
+[[package]]
+name = "system-deps"
+version = "6.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d4d107df263a3013ef9b1879b0df87d706ff80f65a86ea879bd9c31f9b307c2a"
+checksum = "a3e535eb8dded36d55ec13eddacd30dec501792ff23a0b1682c38601b8cf2349"
 dependencies = [
- "proc-macro2",
- "quote",
- "unicode-ident",
+ "cfg-expr",
+ "heck 0.5.0",
+ "pkg-config",
+ "toml",
+ "version-compare",
 ]
 
 [[package]]
-name = "sync_wrapper"
-version = "1.0.2"
+name = "tao"
+version = "0.34.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0bf256ce5efdfa370213c1dabab5935a12e49f2c58d15e9eac2870d3b4f27263"
+checksum = "f3a753bdc39c07b192151523a3f77cd0394aa75413802c883a0f6f6a0e5ee2e7"
 dependencies = [
- "futures-core",
+ "bitflags 2.10.0",
+ "block2",
+ "core-foundation 0.10.1",
+ "core-graphics",
+ "crossbeam-channel",
+ "dispatch",
+ "dlopen2",
+ "dpi",
+ "gdkwayland-sys",
+ "gdkx11-sys",
+ "gtk",
+ "jni",
+ "lazy_static",
+ "libc",
+ "log",
+ "ndk",
+ "ndk-context",
+ "ndk-sys",
+ "objc2",
+ "objc2-app-kit",
+ "objc2-foundation",
+ "once_cell",
+ "parking_lot",
+ "raw-window-handle",
+ "scopeguard",
+ "tao-macros",
+ "unicode-segmentation",
+ "url",
+ "windows",
+ "windows-core 0.61.2",
+ "windows-version",
+ "x11-dl",
 ]
 
 [[package]]
-name = "synstructure"
-version = "0.13.2"
+name = "tao-macros"
+version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "728a70f3dbaf5bab7f0c4b1ac8d7ae5ea60a4b5549c8a5914361c99147a709d2"
+checksum = "f4e16beb8b2ac17db28eab8bca40e62dbfbb34c0fcdc6d9826b11b7b5d047dfd"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -1839,6 +3189,12 @@ dependencies = [
  "xattr",
 ]
 
+[[package]]
+name = "target-lexicon"
+version = "0.12.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "61c41af27dd6d1e27b1b16b489db798443478cef1f06a660c96db617ba5de3b1"
+
 [[package]]
 name = "tempfile"
 version = "3.24.0"
@@ -1852,6 +3208,17 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "tendril"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d24a120c5fc464a3458240ee02c299ebcb9d67b5249c8848b09d639dca8d7bb0"
+dependencies = [
+ "futf",
+ "mac",
+ "utf-8",
+]
+
 [[package]]
 name = "textwrap"
 version = "0.16.2"
@@ -1889,7 +3256,7 @@ checksum = "4fee6c4efc90059e10f81e6d42c60a18f76588c3d74cb83a0b242a2b6c7504c1"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -1900,7 +3267,38 @@ checksum = "ebc4ee7f67670e9b64d05fa4253e753e016c6c95ff35b89b7941d6b856dec1d5"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
+]
+
+[[package]]
+name = "time"
+version = "0.3.41"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a7619e19bc266e0f9c5e6686659d394bc57973859340060a69221e57dbc0c40"
+dependencies = [
+ "deranged",
+ "itoa",
+ "num-conv",
+ "powerfmt",
+ "serde",
+ "time-core",
+ "time-macros",
+]
+
+[[package]]
+name = "time-core"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c9e9a38711f559d9e3ce1cdb06dd7c5b8ea546bc90052da6d06bb76da74bb07c"
+
+[[package]]
+name = "time-macros"
+version = "0.2.22"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3526739392ec93fd8b359c8e98514cb3e8e021beb4e5f597b00a0221f8ed8a49"
+dependencies = [
+ "num-conv",
+ "time-core",
 ]
 
 [[package]]
@@ -1952,7 +3350,7 @@ checksum = "af407857209536a95c8e56f8231ef2c2e2aff839b22e07a1ffcbc617e9db9fa5"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -1995,44 +3393,78 @@ dependencies = [
 
 [[package]]
 name = "toml"
-version = "0.8.23"
+version = "0.8.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dc1beb996b9d83529a9e75c17a1686767d148d70663143c7854d8b4a09ced362"
+checksum = "185d8ab0dfbb35cf1399a6344d8484209c088f75f8f68230da55d48d95d43e3d"
 dependencies = [
  "serde",
  "serde_spanned",
- "toml_datetime",
- "toml_edit",
+ "toml_datetime 0.6.3",
+ "toml_edit 0.20.2",
 ]
 
 [[package]]
 name = "toml_datetime"
-version = "0.6.11"
+version = "0.6.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "22cddaf88f4fbc13c51aebbf5f8eceb5c7c5a9da2ac40a13519eb5b0a0e8f11c"
+checksum = "7cda73e2f1397b1262d6dfdcef8aafae14d1de7748d66822d3bfeeb6d03e5e4b"
 dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "toml_datetime"
+version = "0.7.5+spec-1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "92e1cfed4a3038bc5a127e35a2d360f145e1f4b971b551a2ba5fd7aedf7e1347"
+dependencies = [
+ "serde_core",
+]
+
+[[package]]
+name = "toml_edit"
+version = "0.19.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b5bb770da30e5cbfde35a2d7b9b8a2c4b8ef89548a7a6aeab5c9a576e3e7421"
+dependencies = [
+ "indexmap",
+ "toml_datetime 0.6.3",
+ "winnow 0.5.40",
+]
+
 [[package]]
 name = "toml_edit"
-version = "0.22.27"
+version = "0.20.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41fe8c660ae4257887cf66394862d21dbca4a6ddd26f04a3560410406a2f819a"
+checksum = "396e4d48bbb2b7554c944bde63101b5ae446cff6ec4a24227428f15eb72ef338"
 dependencies = [
  "indexmap",
  "serde",
  "serde_spanned",
- "toml_datetime",
- "toml_write",
- "winnow",
+ "toml_datetime 0.6.3",
+ "winnow 0.5.40",
 ]
 
 [[package]]
-name = "toml_write"
-version = "0.1.2"
+name = "toml_edit"
+version = "0.23.10+spec-1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "84c8b9f757e028cee9fa244aea147aab2a9ec09d5325a9b01e0a49730c2b5269"
+dependencies = [
+ "indexmap",
+ "toml_datetime 0.7.5+spec-1.1.0",
+ "toml_parser",
+ "winnow 0.7.14",
+]
+
+[[package]]
+name = "toml_parser"
+version = "1.0.9+spec-1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5d99f8c9a7727884afe522e9bd5edbfc91a3312b36a77b5fb8926e4c31a41801"
+checksum = "702d4415e08923e7e1ef96cd5727c0dfed80b4d2fa25db9647fe5eb6f7c5a4c4"
+dependencies = [
+ "winnow 0.7.14",
+]
 
 [[package]]
 name = "tower"
@@ -2055,7 +3487,7 @@ version = "0.6.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d4e6559d53cc268e5031cd8429d05415bc4cb4aefc4aa5d6cc35fbf5b924a1f8"
 dependencies = [
- "bitflags",
+ "bitflags 2.10.0",
  "bytes",
  "futures-util",
  "http",
@@ -2155,6 +3587,12 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3b09c83c3c29d37506a3e260c08c03743a6bb66a9cd432c6934ab501a190571f"
 
+[[package]]
+name = "unicode-segmentation"
+version = "1.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493"
+
 [[package]]
 name = "unicode-width"
 version = "0.2.2"
@@ -2185,6 +3623,12 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "urlencoding"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "daf8dba3b7eb870caf1ddeed7bc9d2a049f3cfdfae7cb521b087cc33ae4c49da"
+
 [[package]]
 name = "utf-8"
 version = "0.7.6"
@@ -2220,6 +3664,12 @@ version = "0.2.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "accd4ea62f7bb7a82fe23066fb0957d48ef677f6eeb8215f372f52e48bb32426"
 
+[[package]]
+name = "version-compare"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03c2856837ef78f57382f06b2b8563a2f512f7185d732608fd9176cb3b8edf0e"
+
 [[package]]
 name = "version_check"
 version = "0.9.5"
@@ -2245,6 +3695,12 @@ dependencies = [
  "try-lock",
 ]
 
+[[package]]
+name = "wasi"
+version = "0.9.0+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cccddf32554fecc6acb585f82a32a72e28b48f8c4c1883ddfeeeaa96f7d8e519"
+
 [[package]]
 name = "wasi"
 version = "0.11.1+wasi-snapshot-preview1"
@@ -2312,7 +3768,7 @@ dependencies = [
  "bumpalo",
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
  "wasm-bindgen-shared",
 ]
 
@@ -2363,6 +3819,42 @@ dependencies = [
  "rustls-pki-types",
 ]
 
+[[package]]
+name = "webview2-com"
+version = "0.38.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7130243a7a5b33c54a444e54842e6a9e133de08b5ad7b5861cd8ed9a6a5bc96a"
+dependencies = [
+ "webview2-com-macros",
+ "webview2-com-sys",
+ "windows",
+ "windows-core 0.61.2",
+ "windows-implement",
+ "windows-interface",
+]
+
+[[package]]
+name = "webview2-com-macros"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67a921c1b6914c367b2b823cd4cde6f96beec77d30a939c8199bb377cf9b9b54"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
+]
+
+[[package]]
+name = "webview2-com-sys"
+version = "0.38.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "381336cfffd772377d291702245447a5251a2ffa5bad679c99e61bc48bacbf9c"
+dependencies = [
+ "thiserror 2.0.18",
+ "windows",
+ "windows-core 0.61.2",
+]
+
 [[package]]
 name = "whoami"
 version = "1.6.1"
@@ -2374,6 +3866,22 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "winapi"
+version = "0.3.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c839a674fcd7a98952e593242ea400abe93992746761e38641405d28b00f419"
+dependencies = [
+ "winapi-i686-pc-windows-gnu",
+ "winapi-x86_64-pc-windows-gnu",
+]
+
+[[package]]
+name = "winapi-i686-pc-windows-gnu"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ac3b87c63620426dd9b991e5ce0329eff545bccbbb34f3be09ff6fb6ab51b7b6"
+
 [[package]]
 name = "winapi-util"
 version = "0.1.11"
@@ -2383,6 +3891,47 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "winapi-x86_64-pc-windows-gnu"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
+
+[[package]]
+name = "windows"
+version = "0.61.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9babd3a767a4c1aef6900409f85f5d53ce2544ccdfaa86dad48c91782c6d6893"
+dependencies = [
+ "windows-collections",
+ "windows-core 0.61.2",
+ "windows-future",
+ "windows-link 0.1.3",
+ "windows-numerics",
+]
+
+[[package]]
+name = "windows-collections"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3beeceb5e5cfd9eb1d76b381630e82c4241ccd0d27f1a39ed41b2760b255c5e8"
+dependencies = [
+ "windows-core 0.61.2",
+]
+
+[[package]]
+name = "windows-core"
+version = "0.61.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c0fdd3ddb90610c7638aa2b3a3ab2904fb9e5cdbecc643ddb3647212781c4ae3"
+dependencies = [
+ "windows-implement",
+ "windows-interface",
+ "windows-link 0.1.3",
+ "windows-result 0.3.4",
+ "windows-strings 0.4.2",
+]
+
 [[package]]
 name = "windows-core"
 version = "0.62.2"
@@ -2391,9 +3940,20 @@ checksum = "b8e83a14d34d0623b51dce9581199302a221863196a1dde71a7663a4c2be9deb"
 dependencies = [
  "windows-implement",
  "windows-interface",
- "windows-link",
- "windows-result",
- "windows-strings",
+ "windows-link 0.2.1",
+ "windows-result 0.4.1",
+ "windows-strings 0.5.1",
+]
+
+[[package]]
+name = "windows-future"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc6a41e98427b19fe4b73c550f060b59fa592d7d686537eebf9385621bfbad8e"
+dependencies = [
+ "windows-core 0.61.2",
+ "windows-link 0.1.3",
+ "windows-threading",
 ]
 
 [[package]]
@@ -2404,7 +3964,7 @@ checksum = "053e2e040ab57b9dc951b72c264860db7eb3b0200ba345b4e4c3b14f67855ddf"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -2415,22 +3975,56 @@ checksum = "3f316c4a2570ba26bbec722032c4099d8c8bc095efccdc15688708623367e358"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
+[[package]]
+name = "windows-link"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e6ad25900d524eaabdbbb96d20b4311e1e7ae1699af4fb28c17ae66c80d798a"
+
 [[package]]
 name = "windows-link"
 version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
 
+[[package]]
+name = "windows-numerics"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9150af68066c4c5c07ddc0ce30421554771e528bde427614c61038bc2c92c2b1"
+dependencies = [
+ "windows-core 0.61.2",
+ "windows-link 0.1.3",
+]
+
+[[package]]
+name = "windows-result"
+version = "0.3.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56f42bd332cc6c8eac5af113fc0c1fd6a8fd2aa08a0119358686e5160d0586c6"
+dependencies = [
+ "windows-link 0.1.3",
+]
+
 [[package]]
 name = "windows-result"
 version = "0.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7781fa89eaf60850ac3d2da7af8e5242a5ea78d1a11c49bf2910bb5a73853eb5"
 dependencies = [
- "windows-link",
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "windows-strings"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56e6c93f3a0c3b36176cb1327a4958a0353d5d166c2a35cb268ace15e91d3b57"
+dependencies = [
+ "windows-link 0.1.3",
 ]
 
 [[package]]
@@ -2439,7 +4033,16 @@ version = "0.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7837d08f69c77cf6b07689544538e017c1bfcf57e34b4c0ff58e6c2cd3b37091"
 dependencies = [
- "windows-link",
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.45.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75283be5efb2831d37ea142365f009c02ec203cd29a3ebecbc093d52315b66d0"
+dependencies = [
+ "windows-targets 0.42.2",
 ]
 
 [[package]]
@@ -2484,7 +4087,22 @@ version = "0.61.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ae137229bcbd6cdf0f7b80a31df61766145077ddf49416a728b02cb3921ff3fc"
 dependencies = [
- "windows-link",
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e5180c00cd44c9b1c88adb3693291f1cd93605ded80c250a75d472756b4d071"
+dependencies = [
+ "windows_aarch64_gnullvm 0.42.2",
+ "windows_aarch64_msvc 0.42.2",
+ "windows_i686_gnu 0.42.2",
+ "windows_i686_msvc 0.42.2",
+ "windows_x86_64_gnu 0.42.2",
+ "windows_x86_64_gnullvm 0.42.2",
+ "windows_x86_64_msvc 0.42.2",
 ]
 
 [[package]]
@@ -2524,7 +4142,7 @@ version = "0.53.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4945f9f551b88e0d65f3db0bc25c33b8acea4d9e41163edf90dcd0b19f9069f3"
 dependencies = [
- "windows-link",
+ "windows-link 0.2.1",
  "windows_aarch64_gnullvm 0.53.1",
  "windows_aarch64_msvc 0.53.1",
  "windows_i686_gnu 0.53.1",
@@ -2535,6 +4153,30 @@ dependencies = [
  "windows_x86_64_msvc 0.53.1",
 ]
 
+[[package]]
+name = "windows-threading"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b66463ad2e0ea3bbf808b7f1d371311c80e115c0b71d60efc142cafbcfb057a6"
+dependencies = [
+ "windows-link 0.1.3",
+]
+
+[[package]]
+name = "windows-version"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e4060a1da109b9d0326b7262c8e12c84df67cc0dbc9e33cf49e01ccc2eb63631"
+dependencies = [
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "597a5118570b68bc08d8d59125332c54f1ba9d9adeedeef5b99b02ba2b0698f8"
+
 [[package]]
 name = "windows_aarch64_gnullvm"
 version = "0.48.5"
@@ -2553,6 +4195,12 @@ version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a9d8416fa8b42f5c947f8482c43e7d89e73a173cead56d044f6a56104a6d1b53"
 
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e08e8864a60f06ef0d0ff4ba04124db8b0fb3be5776a5cd47641e942e58c4d43"
+
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.48.5"
@@ -2571,6 +4219,12 @@ version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b9d782e804c2f632e395708e99a94275910eb9100b2114651e04744e9b125006"
 
+[[package]]
+name = "windows_i686_gnu"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c61d927d8da41da96a81f029489353e68739737d3beca43145c8afec9a31a84f"
+
 [[package]]
 name = "windows_i686_gnu"
 version = "0.48.5"
@@ -2601,6 +4255,12 @@ version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fa7359d10048f68ab8b09fa71c3daccfb0e9b559aed648a8f95469c27057180c"
 
+[[package]]
+name = "windows_i686_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "44d840b6ec649f480a41c8d80f9c65108b92d89345dd94027bfe06ac444d1060"
+
 [[package]]
 name = "windows_i686_msvc"
 version = "0.48.5"
@@ -2619,6 +4279,12 @@ version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1e7ac75179f18232fe9c285163565a57ef8d3c89254a30685b57d83a38d326c2"
 
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8de912b8b8feb55c064867cf047dda097f92d51efad5b491dfb98f6bbb70cb36"
+
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.48.5"
@@ -2637,6 +4303,12 @@ version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9c3842cdd74a865a8066ab39c8a7a473c0778a3f29370b5fd6b4b9aa7df4a499"
 
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "26d41b46a36d453748aedef1486d5c7a85db22e56aff34643984ea85514e94a3"
+
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.48.5"
@@ -2655,6 +4327,12 @@ version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0ffa179e2d07eee8ad8f57493436566c7cc30ac536a3379fdf008f47f6bb7ae1"
 
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0"
+
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.48.5"
@@ -2673,6 +4351,15 @@ version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d6bbff5f0aada427a1e5a6da5f1f98158182f26556f345ac9e04d36d0ebed650"
 
+[[package]]
+name = "winnow"
+version = "0.5.40"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f593a95398737aeed53e489c785df13f3618e41dbcd6718c6addbf1395aa6876"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "winnow"
 version = "0.7.14"
@@ -2694,6 +4381,65 @@ version = "0.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9edde0db4769d2dc68579893f2306b26c6ecfbe0ef499b013d731b7b9247e0b9"
 
+[[package]]
+name = "wry"
+version = "0.54.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bb26159b420aa77684589a744ae9a9461a95395b848764ad12290a14d960a11a"
+dependencies = [
+ "base64",
+ "block2",
+ "cookie",
+ "crossbeam-channel",
+ "dirs 6.0.0",
+ "dpi",
+ "dunce",
+ "html5ever",
+ "http",
+ "jni",
+ "kuchikiki",
+ "libc",
+ "ndk",
+ "objc2",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation",
+ "objc2-ui-kit",
+ "objc2-web-kit",
+ "once_cell",
+ "percent-encoding",
+ "raw-window-handle",
+ "sha2",
+ "tao-macros",
+ "thiserror 2.0.18",
+ "url",
+ "webview2-com",
+ "windows",
+ "windows-core 0.61.2",
+ "windows-version",
+]
+
+[[package]]
+name = "x11"
+version = "2.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "502da5464ccd04011667b11c435cb992822c2c0dbde1770c988480d312a0db2e"
+dependencies = [
+ "libc",
+ "pkg-config",
+]
+
+[[package]]
+name = "x11-dl"
+version = "2.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "38735924fedd5314a6e548792904ed8c6de6636285cb9fec04d5b1db85c1516f"
+dependencies = [
+ "libc",
+ "once_cell",
+ "pkg-config",
+]
+
 [[package]]
 name = "xattr"
 version = "1.6.1"
@@ -2723,7 +4469,7 @@ checksum = "b659052874eb698efe5b9e8cf382204678a0086ebf46982b79d6ca3182927e5d"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
  "synstructure",
 ]
 
@@ -2744,7 +4490,7 @@ checksum = "7cb7e4e8436d9db52fbd6625dbf2f45243ab84994a72882ec8227b99e72b439a"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -2764,7 +4510,7 @@ checksum = "d71e5d6e06ab090c67b5e44993ec16b72dcbaabc526db883a360057678b48502"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
  "synstructure",
 ]
 
@@ -2785,7 +4531,7 @@ checksum = "85a5b4158499876c763cb03bc4e49185d3cccbabb15b33c627f7884f43db852e"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
@@ -2818,7 +4564,7 @@ checksum = "eadce39539ca5cb3985590102671f2567e659fca9666581ad3411d59207951f3"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.114",
 ]
 
 [[package]]
diff --git a/cli/Cargo.toml b/cli/Cargo.toml
index 87072f5..9fea8e1 100644
--- a/cli/Cargo.toml
+++ b/cli/Cargo.toml
@@ -48,6 +48,12 @@ rpassword = "7"
 # Only needed when rustls feature is enabled
 rustls_crate = { package = "rustls", version = "0.23", default-features = false, features = ["ring", "std"], optional = true }
 
+# Display feature: native webview windows for surface rendering
+tao = { version = "0.34", optional = true }
+wry = { version = "0.54", optional = true, default-features = false }
+url = { version = "2", optional = true }
+urlencoding = { version = "2", optional = true }
+
 [profile.release]
 strip = true
 lto = true
@@ -70,3 +76,6 @@ rustls = [
     "reqwest/rustls-tls",
     "rustls_crate",
 ]
+
+# Enable native webview display for node surfaces (--display flag)
+display = ["dep:tao", "dep:wry", "dep:url", "dep:urlencoding"]
diff --git a/cli/src/display.rs b/cli/src/display.rs
new file mode 100644
index 0000000..f704438
--- /dev/null
+++ b/cli/src/display.rs
@@ -0,0 +1,340 @@
+//! Display module — native webview windows for surface rendering.
+//!
+//! When a node runs with `--display`, this module creates a tao event loop
+//! on the main thread and manages wry webview windows for each surface
+//! that targets this node.
+//!
+//! Architecture:
+//!   Main thread:  tao EventLoop (blocks forever, manages windows)
+//!   Background:   tokio runtime (WebSocket connection, tool execution)
+//!   Communication: EventLoopProxy<DisplayEvent> (Send, thread-safe)
+
+use std::collections::HashMap;
+
+use tao::{
+    dpi::LogicalSize,
+    event::{Event, WindowEvent},
+    event_loop::{ControlFlow, EventLoop, EventLoopBuilder, EventLoopProxy, EventLoopWindowTarget},
+    window::{Window, WindowBuilder, WindowId},
+};
+use wry::{WebView, WebViewBuilder};
+
+// ── Display Events ──
+
+/// Events sent from the tokio async runtime to the main thread event loop.
+#[derive(Debug)]
+pub enum DisplayEvent {
+    /// Open a new surface as a webview window.
+    OpenSurface {
+        surface_id: String,
+        url: String,
+        label: String,
+    },
+    /// Close an existing surface window.
+    CloseSurface { surface_id: String },
+    /// Update an existing surface (title).
+    UpdateSurface {
+        surface_id: String,
+        label: Option<String>,
+    },
+    /// Shut down the display event loop.
+    Shutdown,
+}
+
+// ── Display Handle (async-safe sender) ──
+
+/// Cloneable handle for sending display events from any thread.
+/// Wraps tao's EventLoopProxy which is Send + Sync.
+#[derive(Clone)]
+pub struct DisplayHandle {
+    proxy: EventLoopProxy<DisplayEvent>,
+}
+
+impl DisplayHandle {
+    pub fn open_surface(&self, surface_id: String, url: String, label: String) {
+        let _ = self.proxy.send_event(DisplayEvent::OpenSurface {
+            surface_id,
+            url,
+            label,
+        });
+    }
+
+    pub fn close_surface(&self, surface_id: String) {
+        let _ = self
+            .proxy
+            .send_event(DisplayEvent::CloseSurface { surface_id });
+    }
+
+    pub fn update_surface(&self, surface_id: String, label: Option<String>) {
+        let _ = self
+            .proxy
+            .send_event(DisplayEvent::UpdateSurface { surface_id, label });
+    }
+
+    pub fn shutdown(&self) {
+        let _ = self.proxy.send_event(DisplayEvent::Shutdown);
+    }
+}
+
+// ── Constructors ──
+
+/// Create the display event loop and return a handle for async communication.
+/// Call this on the main thread before spawning the tokio runtime.
+pub fn create_display() -> (DisplayHandle, EventLoop<DisplayEvent>) {
+    let event_loop = EventLoopBuilder::<DisplayEvent>::with_user_event().build();
+    let proxy = event_loop.create_proxy();
+    (DisplayHandle { proxy }, event_loop)
+}
+
+// ── URL Resolution ──
+
+/// Convert a WebSocket gateway URL to an HTTP URL for loading the web UI.
+pub fn gateway_http_url(ws_url: &str) -> String {
+    ws_url
+        .replace("wss://", "https://")
+        .replace("ws://", "http://")
+        .trim_end_matches("/ws")
+        .to_string()
+}
+
+/// Normalize a URL to its embeddable form for known services.
+/// Native webviews don't have X-Frame-Options restrictions, but embed URLs
+/// give us autoplay and a cleaner player UI.
+pub fn to_embed_url(raw: &str) -> String {
+    // Parse or return as-is
+    let Ok(url) = url::Url::parse(raw) else {
+        return raw.to_string();
+    };
+    let host = url
+        .host_str()
+        .unwrap_or("")
+        .trim_start_matches("www.")
+        .trim_start_matches("m.");
+
+    // YouTube
+    if host == "youtube.com" {
+        // watch?v=ID
+        if let Some(vid) = url
+            .query_pairs()
+            .find(|(k, _)| k == "v")
+            .map(|(_, v)| v.to_string())
+        {
+            return format!("https://www.youtube.com/embed/{}?autoplay=1", vid);
+        }
+        // /shorts/ID
+        if let Some(rest) = url.path().strip_prefix("/shorts/") {
+            let id = rest.split('/').next().unwrap_or(rest);
+            if !id.is_empty() {
+                return format!("https://www.youtube.com/embed/{}?autoplay=1", id);
+            }
+        }
+        // Already /embed/ — add autoplay if missing
+        if url.path().starts_with("/embed/") {
+            if url.query().map_or(true, |q| !q.contains("autoplay")) {
+                let sep = if url.query().is_some() { "&" } else { "?" };
+                return format!("{}{}autoplay=1", raw, sep);
+            }
+            return raw.to_string();
+        }
+    }
+    if host == "youtu.be" {
+        let id = url
+            .path()
+            .trim_start_matches('/')
+            .split('/')
+            .next()
+            .unwrap_or("");
+        if !id.is_empty() {
+            return format!("https://www.youtube.com/embed/{}?autoplay=1", id);
+        }
+    }
+
+    // Vimeo
+    if host == "vimeo.com" {
+        if let Some(id) = url.path().trim_start_matches('/').split('/').next() {
+            if id.chars().all(|c| c.is_ascii_digit()) && !id.is_empty() {
+                return format!("https://player.vimeo.com/video/{}?autoplay=1", id);
+            }
+        }
+    }
+    if host == "player.vimeo.com" {
+        if url.query().map_or(true, |q| !q.contains("autoplay")) {
+            let sep = if url.query().is_some() { "&" } else { "?" };
+            return format!("{}{}autoplay=1", raw, sep);
+        }
+        return raw.to_string();
+    }
+
+    // Spotify
+    if host == "open.spotify.com" && !url.path().starts_with("/embed/") {
+        return format!("https://open.spotify.com/embed{}", url.path());
+    }
+
+    // Figma
+    if host == "figma.com"
+        && (url.path().starts_with("/file/") || url.path().starts_with("/design/"))
+    {
+        return format!(
+            "https://www.figma.com/embed?embed_host=gsv&url={}",
+            urlencoding::encode(raw)
+        );
+    }
+
+    // Loom
+    if host == "loom.com" {
+        if let Some(rest) = url.path().strip_prefix("/share/") {
+            let id = rest
+                .split('/')
+                .next()
+                .unwrap_or(rest)
+                .split('?')
+                .next()
+                .unwrap_or(rest);
+            if !id.is_empty() {
+                return format!("https://www.loom.com/embed/{}?autoplay=1", id);
+            }
+        }
+    }
+
+    raw.to_string()
+}
+
+/// Resolve the URL to load in a webview for a given surface.
+/// Unlike the web UI (which needs embed URLs for iframe X-Frame-Options),
+/// native wry webviews are full browser contexts that can load any URL directly.
+pub fn resolve_surface_url(ws_url: &str, kind: &str, content_ref: &str) -> String {
+    match kind {
+        "webview" | "media" => content_ref.to_string(),
+        "app" => {
+            let base = gateway_http_url(ws_url);
+            format!("{}/?shell=os&tab={}", base, content_ref)
+        }
+        _ => content_ref.to_string(),
+    }
+}
+
+// ── Event Loop ──
+
+struct SurfaceWindow {
+    window: Window,
+    _webview: WebView,
+}
+
+/// Run the display event loop. **Blocks the calling thread forever.**
+/// Must be called on the main thread (macOS Cocoa requirement).
+pub fn run_display_loop(event_loop: EventLoop<DisplayEvent>) -> ! {
+    let mut surfaces: HashMap<String, SurfaceWindow> = HashMap::new();
+    let mut window_to_surface: HashMap<WindowId, String> = HashMap::new();
+
+    event_loop.run(move |event, target, control_flow| {
+        *control_flow = ControlFlow::Wait;
+
+        match event {
+            Event::UserEvent(display_event) => {
+                handle_display_event(
+                    display_event,
+                    target,
+                    &mut surfaces,
+                    &mut window_to_surface,
+                    control_flow,
+                );
+            }
+            Event::WindowEvent {
+                window_id,
+                event: WindowEvent::CloseRequested,
+                ..
+            } => {
+                if let Some(surface_id) = window_to_surface.remove(&window_id) {
+                    surfaces.remove(&surface_id);
+                    eprintln!("[display] Window closed by user: {}", surface_id);
+                }
+            }
+            _ => {}
+        }
+    })
+}
+
+fn handle_display_event(
+    event: DisplayEvent,
+    target: &EventLoopWindowTarget<DisplayEvent>,
+    surfaces: &mut HashMap<String, SurfaceWindow>,
+    window_to_surface: &mut HashMap<WindowId, String>,
+    control_flow: &mut ControlFlow,
+) {
+    match event {
+        DisplayEvent::OpenSurface {
+            surface_id,
+            url,
+            label,
+        } => {
+            // Close existing surface with the same ID (replace)
+            if let Some(old) = surfaces.remove(&surface_id) {
+                window_to_surface.remove(&old.window.id());
+            }
+
+            let window = match WindowBuilder::new()
+                .with_title(&label)
+                .with_inner_size(LogicalSize::new(1024.0, 768.0))
+                .build(target)
+            {
+                Ok(w) => w,
+                Err(e) => {
+                    eprintln!(
+                        "[display] Failed to create window for surface {}: {}",
+                        surface_id, e
+                    );
+                    return;
+                }
+            };
+
+            // Native webviews are full browser contexts — no iframe restrictions.
+            // Load the original URL directly (no embed conversion needed).
+            let ua = "Mozilla/5.0 (Macintosh; Intel Mac OS X 14_0) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15";
+
+            let webview = match WebViewBuilder::new()
+                .with_url(&url)
+                .with_user_agent(ua)
+                .with_autoplay(true)
+                .build(&window)
+            {
+                Ok(wv) => wv,
+                Err(e) => {
+                    eprintln!(
+                        "[display] Failed to create webview for surface {}: {}",
+                        surface_id, e
+                    );
+                    return;
+                }
+            };
+
+            eprintln!("[display] Opened surface {} -> {}", surface_id, url);
+            let window_id = window.id();
+            window_to_surface.insert(window_id, surface_id.clone());
+            surfaces.insert(
+                surface_id,
+                SurfaceWindow {
+                    window,
+                    _webview: webview,
+                },
+            );
+        }
+        DisplayEvent::CloseSurface { surface_id } => {
+            if let Some(sw) = surfaces.remove(&surface_id) {
+                window_to_surface.remove(&sw.window.id());
+                eprintln!("[display] Closed surface {}", surface_id);
+            }
+        }
+        DisplayEvent::UpdateSurface { surface_id, label } => {
+            if let Some(sw) = surfaces.get(&surface_id) {
+                if let Some(label) = label {
+                    sw.window.set_title(&label);
+                    eprintln!("[display] Updated surface {} title: {}", surface_id, label);
+                }
+            }
+        }
+        DisplayEvent::Shutdown => {
+            eprintln!("[display] Shutdown requested");
+            *control_flow = ControlFlow::Exit;
+        }
+    }
+}
diff --git a/cli/src/lib.rs b/cli/src/lib.rs
index 5a3ad8c..0e99bf5 100644
--- a/cli/src/lib.rs
+++ b/cli/src/lib.rs
@@ -2,6 +2,8 @@ pub mod build_info;
 pub mod config;
 pub mod connection;
 pub mod deploy;
+#[cfg(feature = "display")]
+pub mod display;
 pub mod gateway_client;
 pub mod logger;
 pub mod protocol;
diff --git a/cli/src/main.rs b/cli/src/main.rs
index 002b92e..171697b 100644
--- a/cli/src/main.rs
+++ b/cli/src/main.rs
@@ -64,6 +64,11 @@ enum Commands {
         #[arg(long)]
         foreground: bool,
 
+        /// Enable display server mode: open native webview windows for surfaces.
+        /// Requires --foreground. Compile with --features display.
+        #[arg(long)]
+        display: bool,
+
         /// Node ID (default: hostname) - used as namespace prefix for tools
         #[arg(long)]
         id: Option<String>,
@@ -799,16 +804,136 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
             .expect("Failed to install rustls crypto provider");
     }
 
-    // Now start tokio runtime and run async main
+    // Parse CLI early to detect display mode (needs main thread for tao event loop)
+    let cli = Cli::parse();
+
+    // Display mode: tao event loop on main thread, tokio on background thread.
+    // Must be handled before creating the tokio runtime because macOS Cocoa
+    // requires the event loop to run on the main thread.
+    #[cfg(feature = "display")]
+    if let Commands::Node {
+        display: true,
+        id,
+        workspace,
+        action: None,
+        ..
+    } = &cli.command
+    {
+        let cfg = CliConfig::load();
+        let url = cli
+            .url
+            .clone()
+            .unwrap_or_else(|| cfg.gateway_url());
+        let token = cli.token.clone().or_else(|| cfg.gateway_token());
+        let node_id = resolve_node_id(id.clone(), &cfg);
+        let workspace_path = resolve_node_workspace(workspace.clone(), &cfg);
+        return run_node_display_main(&url, token, node_id, workspace_path);
+    }
+
+    // Standard path: tokio runtime on main thread
     tokio::runtime::Builder::new_multi_thread()
         .enable_all()
         .build()?
-        .block_on(async_main())
+        .block_on(async_main_with(cli))
 }
 
-async fn async_main() -> Result<(), Box<dyn std::error::Error>> {
-    let cli = Cli::parse();
+/// Display mode entry point: tao event loop on main thread, tokio on background thread.
+/// This function never returns normally (tao's event loop diverges).
+#[cfg(feature = "display")]
+fn run_node_display_main(
+    url: &str,
+    token: Option<String>,
+    node_id: String,
+    workspace: PathBuf,
+) -> Result<(), Box<dyn std::error::Error>> {
+    use gsv::display::{create_display, run_display_loop};
+
+    let (display_handle, event_loop) = create_display();
+
+    eprintln!(
+        "[display] Starting display node '{}' -> {}",
+        node_id, url
+    );
+
+    // Spawn tokio runtime on a background thread.
+    // The main thread is reserved for the tao/wry event loop (macOS requirement).
+    let url_owned = url.to_string();
+    let display_for_thread = display_handle.clone();
+    std::thread::spawn(move || {
+        let rt = tokio::runtime::Builder::new_multi_thread()
+            .enable_all()
+            .build()
+            .expect("Failed to build tokio runtime for display node");
+
+        rt.block_on(async move {
+            // Channel for surface events from the node event handler
+            let (surface_tx, mut surface_rx) =
+                tokio::sync::mpsc::unbounded_channel::<(String, Option<serde_json::Value>)>();
+
+            // Task that receives surface events and forwards to tao display loop
+            let display = display_for_thread.clone();
+            let gw_url = url_owned.clone();
+            tokio::spawn(async move {
+                while let Some((event_name, payload)) = surface_rx.recv().await {
+                    process_surface_event(&display, &gw_url, &event_name, payload);
+                }
+            });
+
+            if let Err(e) =
+                run_node(&url_owned, token, node_id, workspace, true, Some(surface_tx)).await
+            {
+                eprintln!("[display] Node error: {}", e);
+                display_for_thread.shutdown();
+            }
+        });
+    });
+
+    // Run tao event loop on main thread (blocks forever)
+    run_display_loop(event_loop);
+}
+
+/// Process a surface event from the gateway and forward to the display handle.
+#[cfg(feature = "display")]
+fn process_surface_event(
+    display: &gsv::display::DisplayHandle,
+    gateway_url: &str,
+    event_name: &str,
+    payload: Option<serde_json::Value>,
+) {
+    use gsv::display::resolve_surface_url;
+    use gsv::protocol::{SurfaceClosedPayload, SurfaceOpenedPayload, SurfaceUpdatedPayload};
+
+    let Some(payload) = payload else {
+        return;
+    };
+
+    match event_name {
+        "surface.opened" => {
+            if let Ok(data) = serde_json::from_value::<SurfaceOpenedPayload>(payload) {
+                let url = resolve_surface_url(
+                    gateway_url,
+                    &data.surface.kind,
+                    &data.surface.content_ref,
+                );
+                display.open_surface(data.surface.surface_id, url, data.surface.label);
+            }
+        }
+        "surface.closed" => {
+            if let Ok(data) = serde_json::from_value::<SurfaceClosedPayload>(payload) {
+                display.close_surface(data.surface_id);
+            }
+        }
+        "surface.updated" => {
+            if let Ok(data) = serde_json::from_value::<SurfaceUpdatedPayload>(payload) {
+                let label = Some(data.surface.label.clone());
+                display.update_surface(data.surface.surface_id, label);
+            }
+        }
+        _ => {}
+    }
+}
 
+async fn async_main_with(cli: Cli) -> Result<(), Box<dyn std::error::Error>> {
     // Load config from file
     let cfg = CliConfig::load();
 
@@ -831,10 +956,20 @@ async fn async_main() -> Result<(), Box<dyn std::error::Error>> {
         }
         Commands::Node {
             foreground,
+            display,
             id,
             workspace,
             action,
         } => {
+            if display && !foreground {
+                return Err("--display requires --foreground".into());
+            }
+            #[cfg(not(feature = "display"))]
+            if display {
+                return Err(
+                    "--display requires the 'display' feature. Rebuild with: cargo build --features display".into(),
+                );
+            }
             if let Some(action) = action {
                 if foreground {
                     return Err(
@@ -850,7 +985,7 @@ async fn async_main() -> Result<(), Box<dyn std::error::Error>> {
             } else if foreground {
                 let node_id = resolve_node_id(id, &cfg);
                 let workspace = resolve_node_workspace(workspace, &cfg);
-                run_node(&url, token, node_id, workspace).await
+                run_node(&url, token, node_id, workspace, display, None).await
             } else {
                 run_node_default_managed(
                     &cfg,
@@ -3077,6 +3212,7 @@ fn capabilities_for_tool(tool_name: &str) -> Result<Vec<&'static str>, String> {
 
 fn build_execution_node_runtime(
     tool_defs: &[ToolDefinition],
+    display: bool,
 ) -> Result<NodeRuntimeInfo, Box<dyn std::error::Error>> {
     let mut seen_tool_names = HashSet::new();
     let mut host_capabilities = HashSet::new();
@@ -3111,6 +3247,11 @@ fn build_execution_node_runtime(
         host_capabilities.insert(capability.to_string());
     }
 
+    // Advertise display capability when running with --display
+    if display {
+        host_capabilities.insert("display.surface".to_string());
+    }
+
     let mut normalized_host_capabilities: Vec<String> = host_capabilities.into_iter().collect();
     normalized_host_capabilities.sort();
 
@@ -3267,6 +3408,8 @@ async fn run_node(
     token: Option<String>,
     node_id: String,
     workspace: PathBuf,
+    display_mode: bool,
+    surface_tx: Option<tokio::sync::mpsc::UnboundedSender<(String, Option<serde_json::Value>)>>,
 ) -> Result<(), Box<dyn std::error::Error>> {
     let logger = NodeLogger::new(&node_id, &workspace)?;
     let log_path = logger::node_log_path()?;
@@ -3326,13 +3469,14 @@ async fn run_node(
         let tools = all_tools_with_workspace(workspace.clone());
         let tool_defs: Vec<_> = tools.iter().map(|t| t.definition()).collect();
         let tool_names: Vec<String> = tool_defs.iter().map(|t| t.name.clone()).collect();
-        let node_runtime = build_execution_node_runtime(&tool_defs)?;
+        let node_runtime = build_execution_node_runtime(&tool_defs, display_mode)?;
 
         logger.info(
             "tools.register",
             json!({
                 "toolCount": tool_names.len(),
                 "tools": tool_names,
+                "displayMode": display_mode,
             }),
         );
 
@@ -3395,6 +3539,7 @@ async fn run_node(
         let logger_clone = logger.clone();
         let coordinator_for_events = transfer_coordinator.clone();
         let workspace_for_transfers = workspace.clone();
+        let surface_tx_clone = surface_tx.clone();
 
         conn.set_event_handler(move |frame| {
             let conn = conn_clone.clone();
@@ -3402,6 +3547,7 @@ async fn run_node(
             let logger = logger_clone.clone();
             let coordinator = coordinator_for_events.clone();
             let transfer_workspace = workspace_for_transfers.clone();
+            let surface_tx = surface_tx_clone.clone();
 
             tokio::spawn(async move {
                 if let Frame::Evt(evt) = frame {
@@ -3659,6 +3805,20 @@ async fn run_node(
                                 }
                             }
                         }
+                    } else if evt.event.starts_with("surface.") {
+                        // Forward surface events to display module (if active)
+                        if let Some(ref tx) = surface_tx {
+                            let event_name = evt.event.clone();
+                            if let Err(e) = tx.send((event_name.clone(), evt.payload.clone())) {
+                                logger.warn(
+                                    "surface.event.forward_failed",
+                                    json!({
+                                        "event": event_name,
+                                        "error": e.to_string(),
+                                    }),
+                                );
+                            }
+                        }
                     }
                 }
             });
diff --git a/cli/src/protocol.rs b/cli/src/protocol.rs
index 77884c4..8e7891c 100644
--- a/cli/src/protocol.rs
+++ b/cli/src/protocol.rs
@@ -230,6 +230,98 @@ pub struct TransferDoneParams {
     pub error: Option<String>,
 }
 
+// ── Surface Protocol ──
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SurfaceRect {
+    pub x: f64,
+    pub y: f64,
+    pub width: f64,
+    pub height: f64,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct Surface {
+    pub surface_id: String,
+    pub kind: String, // "app" | "media" | "component" | "webview"
+    pub label: String,
+    pub content_ref: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub content_data: Option<Value>,
+    pub target_client_id: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub source_client_id: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub source_session_key: Option<String>,
+    pub state: String, // "open" | "minimized" | "closed"
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub rect: Option<SurfaceRect>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub z_index: Option<i64>,
+    pub created_at: f64,
+    pub updated_at: f64,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SurfaceOpenParams {
+    pub kind: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub label: Option<String>,
+    pub content_ref: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub content_data: Option<Value>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub target_client_id: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub state: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub rect: Option<SurfaceRect>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SurfaceCloseParams {
+    pub surface_id: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SurfaceUpdateParams {
+    pub surface_id: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub state: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub rect: Option<SurfaceRect>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub label: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub z_index: Option<i64>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub content_data: Option<Value>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SurfaceOpenedPayload {
+    pub surface: Surface,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SurfaceClosedPayload {
+    pub surface_id: String,
+    pub target_client_id: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SurfaceUpdatedPayload {
+    pub surface: Surface,
+}
+
 impl RequestFrame {
     pub fn new(method: &str, params: Option<Value>) -> Self {
         Self {
diff --git a/gateway/package.json b/gateway/package.json
index c71d066..437e7fd 100644
--- a/gateway/package.json
+++ b/gateway/package.json
@@ -4,14 +4,10 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"deploy": "bun alchemy/cli.ts",
-		"deploy:up": "bun alchemy/cli.ts up",
-		"deploy:wizard": "bun alchemy/cli.ts wizard",
-		"deploy:destroy": "bun alchemy/cli.ts destroy",
-		"deploy:status": "bun alchemy/cli.ts status",
-		"deploy:wrangler": "wrangler deploy",
+		"deploy": "wrangler deploy",
 		"dev": "wrangler dev",
 		"start": "wrangler dev",
+		"build:ui": "cd ui && npm run build",
 		"cf-typegen": "wrangler types",
 		"test": "vitest",
 		"test:run": "vitest run",
diff --git a/gateway/src/agents/tools/constants.ts b/gateway/src/agents/tools/constants.ts
index 33cf6e1..4f51f42 100644
--- a/gateway/src/agents/tools/constants.ts
+++ b/gateway/src/agents/tools/constants.ts
@@ -11,4 +11,7 @@ export const NATIVE_TOOLS = {
   MESSAGE: `${NATIVE_TOOL_PREFIX}Message`,
   SESSIONS_LIST: `${NATIVE_TOOL_PREFIX}SessionsList`,
   SESSION_SEND: `${NATIVE_TOOL_PREFIX}SessionSend`,
+  OPEN_VIEW: `${NATIVE_TOOL_PREFIX}OpenView`,
+  LIST_VIEWS: `${NATIVE_TOOL_PREFIX}ListViews`,
+  CLOSE_VIEW: `${NATIVE_TOOL_PREFIX}CloseView`,
 } as const;
diff --git a/gateway/src/agents/tools/index.ts b/gateway/src/agents/tools/index.ts
index 777b8ed..c7c2ba5 100644
--- a/gateway/src/agents/tools/index.ts
+++ b/gateway/src/agents/tools/index.ts
@@ -18,6 +18,10 @@ import {
   workspaceNativeToolHandlers,
 } from "./workspace";
 import { getTransferToolDefinitions } from "./transfer";
+import {
+  getSurfaceToolDefinitions,
+  surfaceNativeToolHandlers,
+} from "./surface";
 import type {
   NativeToolExecutionContext,
   NativeToolHandlerMap,
@@ -32,6 +36,7 @@ export * from "./gateway";
 export * from "./message";
 export * from "./sessions";
 export * from "./transfer";
+export * from "./surface";
 
 const nativeToolHandlers: NativeToolHandlerMap = {
   ...workspaceNativeToolHandlers,
@@ -39,6 +44,7 @@ const nativeToolHandlers: NativeToolHandlerMap = {
   ...cronNativeToolHandlers,
   ...messageNativeToolHandlers,
   ...sessionsNativeToolHandlers,
+  ...surfaceNativeToolHandlers,
 };
 
 export function isNativeTool(toolName: string): boolean {
@@ -53,6 +59,7 @@ export function getNativeToolDefinitions(): ToolDefinition[] {
     ...getMessageToolDefinitions(),
     ...getSessionsToolDefinitions(),
     ...getTransferToolDefinitions(),
+    ...getSurfaceToolDefinitions(),
   ];
 }
 
diff --git a/gateway/src/agents/tools/surface.ts b/gateway/src/agents/tools/surface.ts
new file mode 100644
index 0000000..0c57bae
--- /dev/null
+++ b/gateway/src/agents/tools/surface.ts
@@ -0,0 +1,180 @@
+import { NATIVE_TOOLS } from "./constants";
+import type { ToolDefinition } from "../../protocol/tools";
+import type { NativeToolHandlerMap } from "./types";
+import type { Surface } from "../../protocol/surface";
+
+export const getSurfaceToolDefinitions = (): ToolDefinition[] => [
+  {
+    name: NATIVE_TOOLS.OPEN_VIEW,
+    description:
+      "Open a view on a connected client or node. Use this to display apps, media, or web content on the user's screen. " +
+      "If targetClientId is omitted: webview/media surfaces prefer display-capable nodes (native windows); " +
+      "app surfaces prefer web clients. " +
+      "kind=app opens a built-in app tab (chat, sessions, channels, nodes, workspace, cron, logs, settings, overview). " +
+      "kind=media opens a media player (contentRef should be a URL). " +
+      "kind=webview opens an arbitrary URL.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        kind: {
+          type: "string",
+          enum: ["app", "media", "webview"],
+          description: "Type of view to open.",
+        },
+        contentRef: {
+          type: "string",
+          description:
+            "What to display. For kind=app, this is the tab name (e.g., 'chat', 'sessions'). " +
+            "For kind=media or kind=webview, this is a URL.",
+        },
+        label: {
+          type: "string",
+          description: "Optional window title. Defaults to contentRef.",
+        },
+        targetClientId: {
+          type: "string",
+          description:
+            "Optional ID of the client or node to open the view on. " +
+            "If omitted, webview/media views auto-target display nodes; app views auto-target web clients.",
+        },
+      },
+      required: ["kind", "contentRef"],
+    },
+  },
+  {
+    name: NATIVE_TOOLS.LIST_VIEWS,
+    description:
+      "List all currently open views (surfaces) across all connected clients. " +
+      "Use this to see what the user is looking at, or to find a surfaceId to close.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        targetClientId: {
+          type: "string",
+          description:
+            "Optional. Filter views to a specific client/node.",
+        },
+      },
+      required: [],
+    },
+  },
+  {
+    name: NATIVE_TOOLS.CLOSE_VIEW,
+    description:
+      "Close a view (surface) by its surfaceId. Use gsv__ListViews first to find the surfaceId.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        surfaceId: {
+          type: "string",
+          description: "The surfaceId of the view to close.",
+        },
+      },
+      required: ["surfaceId"],
+    },
+  },
+];
+
+export const surfaceNativeToolHandlers: NativeToolHandlerMap = {
+  [NATIVE_TOOLS.OPEN_VIEW]: async (context, args) => {
+    if (!context.gateway) {
+      return {
+        ok: false,
+        error: "OpenView tool unavailable: gateway context missing",
+      };
+    }
+
+    const kind = typeof args.kind === "string" ? args.kind : "app";
+    const contentRef =
+      typeof args.contentRef === "string" ? args.contentRef : "";
+    const label =
+      typeof args.label === "string" ? args.label : undefined;
+    const targetClientId =
+      typeof args.targetClientId === "string"
+        ? args.targetClientId
+        : undefined;
+
+    if (!contentRef) {
+      return { ok: false, error: "contentRef is required" };
+    }
+
+    const result = (await context.gateway.openSurface({
+      kind,
+      contentRef,
+      label,
+      targetClientId,
+    })) as unknown as { ok: boolean; surface?: Surface; error?: string };
+
+    if (!result.ok) {
+      return { ok: false, error: result.error };
+    }
+
+    return {
+      ok: true,
+      result: {
+        surfaceId: result.surface?.surfaceId,
+        kind: result.surface?.kind,
+        contentRef: result.surface?.contentRef,
+        targetClientId: result.surface?.targetClientId,
+        label: result.surface?.label,
+      },
+    };
+  },
+
+  [NATIVE_TOOLS.LIST_VIEWS]: async (context, args) => {
+    if (!context.gateway) {
+      return {
+        ok: false,
+        error: "ListViews tool unavailable: gateway context missing",
+      };
+    }
+
+    const targetClientId =
+      typeof args.targetClientId === "string"
+        ? args.targetClientId
+        : undefined;
+
+    const result = (await context.gateway.listSurfaces(
+      targetClientId,
+    )) as unknown as { surfaces: Surface[]; count: number };
+
+    return {
+      ok: true,
+      result: {
+        count: result.count,
+        surfaces: result.surfaces.map((s: Surface) => ({
+          surfaceId: s.surfaceId,
+          kind: s.kind,
+          label: s.label,
+          contentRef: s.contentRef,
+          targetClientId: s.targetClientId,
+          state: s.state,
+        })),
+      },
+    };
+  },
+
+  [NATIVE_TOOLS.CLOSE_VIEW]: async (context, args) => {
+    if (!context.gateway) {
+      return {
+        ok: false,
+        error: "CloseView tool unavailable: gateway context missing",
+      };
+    }
+
+    const surfaceId =
+      typeof args.surfaceId === "string" ? args.surfaceId : "";
+    if (!surfaceId) {
+      return { ok: false, error: "surfaceId is required" };
+    }
+
+    const result = (await context.gateway.closeSurface(
+      surfaceId,
+    )) as unknown as { ok: boolean; error?: string };
+    if (!result.ok) {
+      return { ok: false, error: result.error };
+    }
+
+    return { ok: true, result: { closed: true, surfaceId } };
+  },
+};
diff --git a/gateway/src/gateway/do.ts b/gateway/src/gateway/do.ts
index 3abc018..55e6493 100644
--- a/gateway/src/gateway/do.ts
+++ b/gateway/src/gateway/do.ts
@@ -1,6 +1,6 @@
 import { DurableObject } from "cloudflare:workers";
 import type { ChannelWorkerInterface } from "../channel-interface";
-import { PersistedObject, snapshot } from "../shared/persisted-object";
+import { PersistedObject, snapshot, type Proxied } from "../shared/persisted-object";
 import type {
   Frame,
   EventFrame,
@@ -61,6 +61,7 @@ import {
   type CronRunResult,
 } from "../cron";
 import type { ChatEventPayload } from "../protocol/chat";
+import type { Surface } from "../protocol/surface";
 import type {
   ChannelRegistryEntry,
   ChannelId,
@@ -149,6 +150,12 @@ export class Gateway extends DurableObject<Env> {
     },
   );
 
+  // Surface registry — renderable views across all clients
+  readonly surfaces = PersistedObject<Record<string, Surface>>(
+    this.ctx.storage.kv,
+    { prefix: "surfaces:" },
+  );
+
   // Heartbeat scheduler state (persisted to survive DO eviction)
   readonly heartbeatScheduler: { initialized: boolean } = PersistedObject<{
     initialized: boolean;
@@ -345,6 +352,8 @@ export class Gateway extends DurableObject<Env> {
       }
       this.clients.delete(clientId);
       this.nodeService.cleanupClientPendingOperations(clientId);
+      // Cleanup surfaces targeting this disconnected client.
+      this.cleanupSurfacesForClient(clientId);
     } else if (mode === "node" && nodeId) {
       // Ignore close events from stale sockets that were replaced by reconnect.
       if (this.nodes.get(nodeId) !== ws) {
@@ -360,6 +369,7 @@ export class Gateway extends DurableObject<Env> {
         `Node disconnected during log request: ${nodeId}`,
       );
       failTransfersForNode(this, nodeId);
+      this.cleanupSurfacesForClient(nodeId);
       console.log(`[Gateway] Node ${nodeId} marked offline`);
     } else if (mode === "channel" && channelKey) {
       // Ignore close events from stale sockets that were replaced by reconnect.
@@ -828,6 +838,71 @@ export class Gateway extends DurableObject<Env> {
     return this.getFullConfig();
   }
 
+  /** Broadcast an event frame to all connected clients. */
+  broadcastToClients<T>(event: string, payload: T): void {
+    const evt: EventFrame<T> = { type: "evt", event, payload };
+    const message = JSON.stringify(evt);
+    for (const ws of this.clients.values()) {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(message);
+      }
+    }
+  }
+
+  /**
+   * Broadcast a surface event to all web clients AND the targeted node
+   * (if the surface targets a display-capable node).
+   *
+   * @param excludeWs - Skip this WebSocket (the requesting client already
+   *   gets the data from the RPC response, so echoing the event back causes
+   *   duplicate windows in the OS shell).
+   */
+  broadcastSurfaceEvent<T>(event: string, payload: T, targetClientId?: string, excludeWs?: WebSocket): void {
+    const evt: EventFrame<T> = { type: "evt", event, payload };
+    const message = JSON.stringify(evt);
+
+    // Broadcast to all web clients except the sender
+    for (const ws of this.clients.values()) {
+      if (ws === excludeWs) continue;
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(message);
+      }
+    }
+
+    // Also send to the targeted node if it's a node (not a web client)
+    if (targetClientId && this.nodes.has(targetClientId)) {
+      const nodeWs = this.nodes.get(targetClientId);
+      if (nodeWs && nodeWs !== excludeWs && nodeWs.readyState === WebSocket.OPEN) {
+        nodeWs.send(message);
+      }
+    }
+  }
+
+  /** Check if a node has the display.surface capability. */
+  nodeHasDisplayCapability(nodeId: string): boolean {
+    const runtime = this.nodeService.getNodeRuntime(nodeId);
+    return runtime?.hostCapabilities?.includes("display.surface") ?? false;
+  }
+
+  /** Find the first display-capable node. */
+  findDisplayNode(): string | null {
+    for (const nodeId of this.nodes.keys()) {
+      if (this.nodeHasDisplayCapability(nodeId)) {
+        return nodeId;
+      }
+    }
+    return null;
+  }
+
+  /** Clean up surfaces targeting a disconnected client or node. */
+  cleanupSurfacesForClient(clientId: string): void {
+    for (const [surfaceId, surface] of Object.entries(this.surfaces)) {
+      if (surface.targetClientId === clientId) {
+        delete this.surfaces[surfaceId];
+      }
+    }
+  }
+
   broadcastToSession(sessionKey: string, payload: ChatEventPayload): void {
     const evt: EventFrame<ChatEventPayload> = {
       type: "evt",
@@ -894,6 +969,113 @@ export class Gateway extends DurableObject<Env> {
     }
   }
 
+  // ---- Surface System (agent tool entry points) ----
+
+  /**
+   * Open a surface on a specific client or the first available client.
+   * Called by Session DO via gateway stub (for agent tools like gsv__OpenView).
+   */
+  async openSurface(params: {
+    kind: string;
+    contentRef: string;
+    label?: string;
+    contentData?: unknown;
+    targetClientId?: string;
+    sourceSessionKey?: string;
+  }): Promise<{ ok: boolean; surface?: Surface; error?: string }> {
+    let targetClientId = params.targetClientId;
+
+    // Auto-target resolution:
+    //   1. For webview/media surfaces, prefer display-capable nodes (native windows,
+    //      no X-Frame-Options issues, autoplay works). Fall back to web clients.
+    //   2. For app surfaces, prefer web clients (built-in tab views).
+    //   3. If nothing is connected, error out.
+    if (!targetClientId) {
+      const isNativeKind = params.kind === "webview" || params.kind === "media";
+      const displayNode = this.findDisplayNode();
+      const firstClient = this.clients.keys().next();
+
+      if (isNativeKind && displayNode) {
+        targetClientId = displayNode;
+      } else if (!firstClient.done) {
+        targetClientId = firstClient.value;
+      } else if (displayNode) {
+        targetClientId = displayNode;
+      } else {
+        return { ok: false, error: "No clients or display-capable nodes connected" };
+      }
+    }
+
+    // Verify target is connected
+    if (!this.clients.has(targetClientId) && !this.nodes.has(targetClientId)) {
+      return { ok: false, error: `Target not connected: ${targetClientId}` };
+    }
+
+    const now = Date.now();
+    const surfaceId = crypto.randomUUID();
+    const surface: Surface = {
+      surfaceId,
+      kind: params.kind as Surface["kind"],
+      label: params.label ?? params.contentRef,
+      contentRef: params.contentRef,
+      contentData: params.contentData,
+      targetClientId,
+      sourceSessionKey: params.sourceSessionKey,
+      state: "open",
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    this.surfaces[surfaceId] = surface;
+
+    // Broadcast to all clients + targeted node
+    this.broadcastSurfaceEvent("surface.opened", { surface }, targetClientId);
+
+    console.log(
+      `[Gateway] Surface opened via tool: ${surfaceId} kind=${surface.kind} ref=${surface.contentRef} target=${targetClientId}`,
+    );
+
+    return { ok: true, surface };
+  }
+
+  /**
+   * List all surfaces, optionally filtered by target client.
+   * Called by Session DO via gateway stub (for agent tools like gsv__ListViews).
+   */
+  async listSurfaces(targetClientId?: string): Promise<{
+    surfaces: Surface[];
+    count: number;
+  }> {
+    const all = Object.values(this.surfaces);
+    const filtered = targetClientId
+      ? all.filter((s) => s.targetClientId === targetClientId)
+      : all;
+    // Snapshot proxied values so they serialize correctly across the RPC boundary.
+    const snapped = filtered.map((s) =>
+      snapshot(s as unknown as Proxied<Surface>),
+    );
+    return { surfaces: snapped, count: snapped.length };
+  }
+
+  /**
+   * Close a surface by ID.
+   * Called by Session DO via gateway stub (for agent tools like gsv__CloseView).
+   */
+  async closeSurface(surfaceId: string): Promise<{ ok: boolean; error?: string }> {
+    const surface = this.surfaces[surfaceId];
+    if (!surface) {
+      return { ok: false, error: `Surface not found: ${surfaceId}` };
+    }
+
+    const targetClientId = surface.targetClientId;
+    delete this.surfaces[surfaceId];
+
+    this.broadcastSurfaceEvent("surface.closed", { surfaceId, targetClientId }, targetClientId);
+
+    console.log(`[Gateway] Surface closed via tool: ${surfaceId}`);
+    return { ok: true };
+  }
+
   // ---- Heartbeat System ----
 
   private getGatewayAlarmParticipants(
diff --git a/gateway/src/gateway/rpc-handlers/connect.ts b/gateway/src/gateway/rpc-handlers/connect.ts
index 124500b..b0a3261 100644
--- a/gateway/src/gateway/rpc-handlers/connect.ts
+++ b/gateway/src/gateway/rpc-handlers/connect.ts
@@ -156,6 +156,11 @@ export const handleConnect: Handler<"connect"> = async (ctx) => {
         "channel.login",
         "channel.logout",
         "channels.list",
+        "surface.open",
+        "surface.close",
+        "surface.update",
+        "surface.focus",
+        "surface.list",
       ],
       events: [
         "chat",
@@ -163,6 +168,9 @@ export const handleConnect: Handler<"connect"> = async (ctx) => {
         "tool.result",
         "logs.get",
         "channel.outbound",
+        "surface.opened",
+        "surface.closed",
+        "surface.updated",
       ],
     },
   };
diff --git a/gateway/src/gateway/rpc-handlers/index.ts b/gateway/src/gateway/rpc-handlers/index.ts
index 9f18e10..607537f 100644
--- a/gateway/src/gateway/rpc-handlers/index.ts
+++ b/gateway/src/gateway/rpc-handlers/index.ts
@@ -58,6 +58,13 @@ import {
   handleTransferComplete,
   handleTransferDone,
 } from "./transfer";
+import {
+  handleSurfaceOpen,
+  handleSurfaceClose,
+  handleSurfaceUpdate,
+  handleSurfaceFocus,
+  handleSurfaceList,
+} from "./surface";
 
 export function buildRpcHandlers(): Partial<{ [M in RpcMethod]: Handler<M> }> {
   return {
@@ -111,5 +118,10 @@ export function buildRpcHandlers(): Partial<{ [M in RpcMethod]: Handler<M> }> {
     "transfer.accept": handleTransferAccept,
     "transfer.complete": handleTransferComplete,
     "transfer.done": handleTransferDone,
+    "surface.open": handleSurfaceOpen,
+    "surface.close": handleSurfaceClose,
+    "surface.update": handleSurfaceUpdate,
+    "surface.focus": handleSurfaceFocus,
+    "surface.list": handleSurfaceList,
   };
 }
diff --git a/gateway/src/gateway/rpc-handlers/surface.ts b/gateway/src/gateway/rpc-handlers/surface.ts
new file mode 100644
index 0000000..3c7d823
--- /dev/null
+++ b/gateway/src/gateway/rpc-handlers/surface.ts
@@ -0,0 +1,172 @@
+import { RpcError } from "../../shared/utils";
+import { snapshot, type Proxied } from "../../shared/persisted-object";
+import type { Handler } from "../../protocol/methods";
+import type { Surface } from "../../protocol/surface";
+import type {
+  SurfaceOpenedPayload,
+  SurfaceClosedPayload,
+  SurfaceUpdatedPayload,
+} from "../../protocol/surface";
+
+/** Cast a PersistedObject value to Proxied for snapshot(). */
+function snap(s: Surface): Surface {
+  return snapshot(s as unknown as Proxied<Surface>);
+}
+
+function generateSurfaceId(): string {
+  return crypto.randomUUID();
+}
+
+function getCallerClientId(ws: WebSocket): string {
+  const attachment = ws.deserializeAttachment();
+  if (attachment.mode === "client" && attachment.clientId) {
+    return attachment.clientId;
+  }
+  if (attachment.mode === "node" && attachment.nodeId) {
+    return attachment.nodeId;
+  }
+  throw new RpcError(403, "Only clients and nodes can manage surfaces");
+}
+
+export const handleSurfaceOpen: Handler<"surface.open"> = ({ gw, ws, params }) => {
+  if (!params?.contentRef) {
+    throw new RpcError(400, "contentRef is required");
+  }
+
+  const callerId = getCallerClientId(ws);
+  const targetClientId = params.targetClientId ?? callerId;
+
+  // Verify target exists (client or node)
+  if (!gw.clients.has(targetClientId) && !gw.nodes.has(targetClientId)) {
+    throw new RpcError(
+      404,
+      `Target client not connected: ${targetClientId}`,
+    );
+  }
+
+  const now = Date.now();
+  const surfaceId = generateSurfaceId();
+  const surface: Surface = {
+    surfaceId,
+    kind: params.kind,
+    label: params.label ?? params.contentRef,
+    contentRef: params.contentRef,
+    contentData: params.contentData,
+    targetClientId,
+    sourceClientId: callerId,
+    state: params.state ?? "open",
+    rect: params.rect,
+    createdAt: now,
+    updatedAt: now,
+  };
+
+  gw.surfaces[surfaceId] = surface;
+
+  // Broadcast to other clients + targeted node (exclude sender — they get the RPC response)
+  gw.broadcastSurfaceEvent<SurfaceOpenedPayload>("surface.opened", {
+    surface: snap(surface),
+  }, targetClientId, ws);
+
+  console.log(
+    `[Gateway] Surface opened: ${surfaceId} kind=${surface.kind} ref=${surface.contentRef} target=${targetClientId} source=${callerId}`,
+  );
+
+  return { surface: snap(surface) };
+};
+
+export const handleSurfaceClose: Handler<"surface.close"> = ({ gw, ws, params }) => {
+  if (!params?.surfaceId) {
+    throw new RpcError(400, "surfaceId is required");
+  }
+
+  const surface = gw.surfaces[params.surfaceId];
+  if (!surface) {
+    throw new RpcError(404, `Surface not found: ${params.surfaceId}`);
+  }
+
+  const targetClientId = surface.targetClientId;
+  delete gw.surfaces[params.surfaceId];
+
+  // Broadcast to other clients + targeted node (exclude sender)
+  gw.broadcastSurfaceEvent<SurfaceClosedPayload>("surface.closed", {
+    surfaceId: params.surfaceId,
+    targetClientId,
+  }, targetClientId, ws);
+
+  console.log(`[Gateway] Surface closed: ${params.surfaceId}`);
+
+  return { ok: true as const, surfaceId: params.surfaceId };
+};
+
+export const handleSurfaceUpdate: Handler<"surface.update"> = ({ gw, ws, params }) => {
+  if (!params?.surfaceId) {
+    throw new RpcError(400, "surfaceId is required");
+  }
+
+  const surface = gw.surfaces[params.surfaceId];
+  if (!surface) {
+    throw new RpcError(404, `Surface not found: ${params.surfaceId}`);
+  }
+
+  // Apply updates
+  if (params.state !== undefined) surface.state = params.state;
+  if (params.rect !== undefined) surface.rect = params.rect;
+  if (params.label !== undefined) surface.label = params.label;
+  if (params.zIndex !== undefined) surface.zIndex = params.zIndex;
+  if (params.contentData !== undefined) surface.contentData = params.contentData;
+  surface.updatedAt = Date.now();
+
+  // The PersistedObject proxy auto-persists mutations,
+  // but we explicitly re-assign to ensure the top-level key triggers a put.
+  gw.surfaces[params.surfaceId] = surface;
+
+  // Broadcast to other clients + targeted node (exclude sender)
+  gw.broadcastSurfaceEvent<SurfaceUpdatedPayload>("surface.updated", {
+    surface: snap(surface),
+  }, surface.targetClientId, ws);
+
+  return { surface: snap(surface) };
+};
+
+export const handleSurfaceFocus: Handler<"surface.focus"> = ({ gw, ws, params }) => {
+  if (!params?.surfaceId) {
+    throw new RpcError(400, "surfaceId is required");
+  }
+
+  const surface = gw.surfaces[params.surfaceId];
+  if (!surface) {
+    throw new RpcError(404, `Surface not found: ${params.surfaceId}`);
+  }
+
+  // Compute a zIndex higher than all current surfaces for the same target
+  let maxZ = 0;
+  for (const s of Object.values(gw.surfaces)) {
+    if (s.targetClientId === surface.targetClientId && s.zIndex !== undefined) {
+      maxZ = Math.max(maxZ, s.zIndex);
+    }
+  }
+  surface.zIndex = maxZ + 1;
+  surface.state = "open"; // un-minimize on focus
+  surface.updatedAt = Date.now();
+  gw.surfaces[params.surfaceId] = surface;
+
+  gw.broadcastSurfaceEvent<SurfaceUpdatedPayload>("surface.updated", {
+    surface: snap(surface),
+  }, surface.targetClientId, ws);
+
+  return { surface: snap(surface) };
+};
+
+export const handleSurfaceList: Handler<"surface.list"> = ({ gw, params }) => {
+  const allSurfaces = Object.values(gw.surfaces);
+  const targetFilter = params?.targetClientId;
+
+  const filtered = targetFilter
+    ? allSurfaces.filter((s) => s.targetClientId === targetFilter)
+    : allSurfaces;
+
+  return {
+    surfaces: filtered.map((s) => snap(s)),
+    count: filtered.length,
+  };
+};
diff --git a/gateway/src/protocol/methods.ts b/gateway/src/protocol/methods.ts
index 024fe5c..3114da9 100644
--- a/gateway/src/protocol/methods.ts
+++ b/gateway/src/protocol/methods.ts
@@ -35,6 +35,18 @@ import type {
   TransferCompleteParams,
   TransferDoneParams,
 } from "./transfer";
+import type {
+  SurfaceOpenParams,
+  SurfaceOpenResult,
+  SurfaceCloseParams,
+  SurfaceCloseResult,
+  SurfaceUpdateParams,
+  SurfaceUpdateResult,
+  SurfaceFocusParams,
+  SurfaceFocusResult,
+  SurfaceListParams,
+  SurfaceListResult,
+} from "./surface";
 import type {
   CronJob,
   CronJobCreate,
@@ -425,6 +437,31 @@ export type RpcMethods = {
     };
   };
 
+  "surface.open": {
+    params: SurfaceOpenParams;
+    result: SurfaceOpenResult;
+  };
+
+  "surface.close": {
+    params: SurfaceCloseParams;
+    result: SurfaceCloseResult;
+  };
+
+  "surface.update": {
+    params: SurfaceUpdateParams;
+    result: SurfaceUpdateResult;
+  };
+
+  "surface.focus": {
+    params: SurfaceFocusParams;
+    result: SurfaceFocusResult;
+  };
+
+  "surface.list": {
+    params: SurfaceListParams;
+    result: SurfaceListResult;
+  };
+
   "tool.request": {
     params: ToolRequestParams;
     result: {
diff --git a/gateway/src/protocol/surface.ts b/gateway/src/protocol/surface.ts
new file mode 100644
index 0000000..599eae6
--- /dev/null
+++ b/gateway/src/protocol/surface.ts
@@ -0,0 +1,119 @@
+/**
+ * Surface Protocol — renderable views managed by the Gateway display server.
+ *
+ * A Surface is the protocol-level abstraction for a renderable view.
+ * It maps to:
+ *   - A window in the OS-shell web UI
+ *   - A WebView on native node clients (future)
+ *   - A panel in terminal-mode clients (future)
+ *
+ * The Gateway maintains the authoritative surface registry; clients
+ * send requests to open/close/update, and the gateway broadcasts
+ * state changes to all connected clients via events.
+ */
+
+// ── Surface Kind ──
+// What kind of content this surface renders.
+export type SurfaceKind =
+  | "app"       // built-in app tab (chat, settings, overview, etc.)
+  | "media"     // media player (video, audio, image)
+  | "component" // custom agent-rendered component (future)
+  | "webview";  // arbitrary URL (future)
+
+// ── Surface State ──
+export type SurfaceState = "open" | "minimized" | "closed";
+
+// ── Position / size hint ──
+export type SurfaceRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+// ── Core Surface record ──
+export type Surface = {
+  surfaceId: string;
+  kind: SurfaceKind;
+  label: string;
+  contentRef: string;         // tab name, media URL, component ID, or URL
+  contentData?: unknown;      // extra data (component props, media metadata)
+  targetClientId: string;     // which client/node should render this
+  sourceClientId?: string;    // who requested opening it
+  sourceSessionKey?: string;  // if opened by an agent tool
+  state: SurfaceState;
+  rect?: SurfaceRect;
+  zIndex?: number;
+  createdAt: number;
+  updatedAt: number;
+};
+
+// ── RPC params / results ──
+
+export type SurfaceOpenParams = {
+  kind: SurfaceKind;
+  label?: string;
+  contentRef: string;
+  contentData?: unknown;
+  targetClientId?: string;    // omit = self
+  state?: SurfaceState;       // default "open"
+  rect?: SurfaceRect;
+};
+
+export type SurfaceOpenResult = {
+  surface: Surface;
+};
+
+export type SurfaceCloseParams = {
+  surfaceId: string;
+};
+
+export type SurfaceCloseResult = {
+  ok: true;
+  surfaceId: string;
+};
+
+export type SurfaceUpdateParams = {
+  surfaceId: string;
+  state?: SurfaceState;
+  rect?: SurfaceRect;
+  label?: string;
+  zIndex?: number;
+  contentData?: unknown;
+};
+
+export type SurfaceUpdateResult = {
+  surface: Surface;
+};
+
+export type SurfaceFocusParams = {
+  surfaceId: string;
+};
+
+export type SurfaceFocusResult = {
+  surface: Surface;
+};
+
+export type SurfaceListParams = {
+  targetClientId?: string;    // filter by target client
+} | undefined;
+
+export type SurfaceListResult = {
+  surfaces: Surface[];
+  count: number;
+};
+
+// ── Event payloads ──
+
+export type SurfaceOpenedPayload = {
+  surface: Surface;
+};
+
+export type SurfaceClosedPayload = {
+  surfaceId: string;
+  targetClientId: string;
+};
+
+export type SurfaceUpdatedPayload = {
+  surface: Surface;
+};
diff --git a/gateway/src/protocol/tools.ts b/gateway/src/protocol/tools.ts
index 30433d7..c456449 100644
--- a/gateway/src/protocol/tools.ts
+++ b/gateway/src/protocol/tools.ts
@@ -11,6 +11,7 @@ export const CAPABILITY_IDS = [
   "filesystem.edit",
   "text.search",
   "shell.exec",
+  "display.surface",
 ] as const;
 export type CapabilityId = (typeof CAPABILITY_IDS)[number];
 
diff --git a/gateway/src/session/do.ts b/gateway/src/session/do.ts
index 5819296..9b642c6 100644
--- a/gateway/src/session/do.ts
+++ b/gateway/src/session/do.ts
@@ -291,14 +291,11 @@ class MediaCache {
   }
 }
 
-export class Session extends Agent<Env> {
+export class Session extends DurableObject<Env> {
   private static generateSessionId(): string {
     return crypto.randomUUID();
   }
 
-  shouldSendProtocolMessages(_: Connection, __: ConnectionContext): boolean {
-    return false;
-  }
 
   /**
    * Extract agentId from session key.
diff --git a/gateway/ui/src/react/App.tsx b/gateway/ui/src/react/App.tsx
index 169dcb2..c7accc8 100644
--- a/gateway/ui/src/react/App.tsx
+++ b/gateway/ui/src/react/App.tsx
@@ -1,84 +1,32 @@
-import { useEffect, useMemo, useState } from "react";
-import { Badge } from "@cloudflare/kumo/components/badge";
+import { useEffect, useState } from "react";
 import { Button } from "@cloudflare/kumo/components/button";
 import { Input } from "@cloudflare/kumo/components/input";
 import { Select } from "@cloudflare/kumo/components/select";
 import { SensitiveInput } from "@cloudflare/kumo/components/sensitive-input";
 import { Surface } from "@cloudflare/kumo/components/surface";
 import { getGatewayUrl, type UiSettings } from "../ui/storage";
-import { TAB_GROUPS, TAB_ICONS, TAB_LABELS } from "../ui/types";
 import { OsShell } from "./components/OsShell";
 import { useReactUiStore } from "./state/store";
-import { preloadTabView, TabView } from "./tabViews";
-
-type LayoutMode = "classic" | "os";
-
-const LAYOUT_MODE_STORAGE_KEY = "gsv-layout-mode";
-const LAYOUT_MODE_QUERY_PARAM = "shell";
-
-function getInitialLayoutMode(): LayoutMode {
-  if (typeof window === "undefined") {
-    return "classic";
-  }
-
-  const searchParams = new URLSearchParams(window.location.search);
-  if (searchParams.get(LAYOUT_MODE_QUERY_PARAM) === "os") {
-    return "os";
-  }
-
-  const stored = window.localStorage.getItem(LAYOUT_MODE_STORAGE_KEY);
-  return stored === "os" ? "os" : "classic";
-}
-
-function persistLayoutMode(mode: LayoutMode): void {
-  if (typeof window === "undefined") {
-    return;
-  }
-
-  window.localStorage.setItem(LAYOUT_MODE_STORAGE_KEY, mode);
-  const url = new URL(window.location.href);
-  if (mode === "os") {
-    url.searchParams.set(LAYOUT_MODE_QUERY_PARAM, "os");
-  } else {
-    url.searchParams.delete(LAYOUT_MODE_QUERY_PARAM);
-  }
-  window.history.replaceState(
-    window.history.state,
-    "",
-    `${url.pathname}${url.search}${url.hash}`,
-  );
-}
+import { preloadTabView } from "./tabViews";
 
 export function App() {
   const initialize = useReactUiStore((s) => s.initialize);
   const cleanup = useReactUiStore((s) => s.cleanup);
   const syncTabFromLocation = useReactUiStore((s) => s.syncTabFromLocation);
-  const setMobileLayout = useReactUiStore((s) => s.setMobileLayout);
   const showConnectScreen = useReactUiStore((s) => s.showConnectScreen);
   const tab = useReactUiStore((s) => s.tab);
   const switchTab = useReactUiStore((s) => s.switchTab);
-  const isMobileLayout = useReactUiStore((s) => s.isMobileLayout);
   const connectionState = useReactUiStore((s) => s.connectionState);
   const updateSettings = useReactUiStore((s) => s.updateSettings);
   const settings = useReactUiStore((s) => s.settings);
   const disconnect = useReactUiStore((s) => s.disconnect);
 
-  const [layoutMode, setLayoutMode] = useState<LayoutMode>(() =>
-    getInitialLayoutMode(),
-  );
-
   useEffect(() => {
     initialize();
-    const media = window.matchMedia("(max-width: 960px)");
-    const updateLayout = () => setMobileLayout(media.matches);
-    updateLayout();
-    media.addEventListener("change", updateLayout);
-
     return () => {
-      media.removeEventListener("change", updateLayout);
       cleanup();
     };
-  }, [cleanup, initialize, setMobileLayout]);
+  }, [cleanup, initialize]);
 
   useEffect(() => {
     const onPopState = () => syncTabFromLocation();
@@ -88,16 +36,6 @@ export function App() {
     };
   }, [syncTabFromLocation]);
 
-  useEffect(() => {
-    persistLayoutMode(layoutMode);
-  }, [layoutMode]);
-
-  useEffect(() => {
-    if (layoutMode === "os" && isMobileLayout) {
-      setLayoutMode("classic");
-    }
-  }, [isMobileLayout, layoutMode]);
-
   useEffect(() => {
     preloadTabView(tab);
   }, [tab]);
@@ -106,28 +44,20 @@ export function App() {
     return <ConnectScreen />;
   }
 
-  if (layoutMode === "os" && !isMobileLayout) {
-    return (
-      <OsShell
-        tab={tab}
-        onSwitchTab={switchTab}
-        connectionState={connectionState}
-        theme={settings.theme}
-        onToggleTheme={() =>
-          updateSettings({
-            theme: settings.theme === "dark" ? "light" : "dark",
-          })
-        }
-        onDisconnect={disconnect}
-        onExitOsMode={() => setLayoutMode("classic")}
-      />
-    );
-  }
-
   return (
-    <MainShell
-      osModeAvailable={!isMobileLayout}
-      onEnableOsMode={() => setLayoutMode("os")}
+    <OsShell
+      tab={tab}
+      onSwitchTab={switchTab}
+      connectionState={connectionState}
+      theme={settings.theme}
+      wallpaper={settings.wallpaper ?? "starfield"}
+      onToggleTheme={() =>
+        updateSettings({
+          theme: settings.theme === "dark" ? "light" : "dark",
+        })
+      }
+      onChangeWallpaper={(wp) => updateSettings({ wallpaper: wp })}
+      onDisconnect={disconnect}
     />
   );
 }
@@ -155,7 +85,7 @@ function ConnectScreen() {
     <div className="connect-screen">
       <Surface className="connect-card">
         <div className="connect-header">
-          <span className="connect-logo">⚡</span>
+          <span className="connect-logo">GSV</span>
           <h1>GSV</h1>
           <p className="text-secondary">Gateway control UI</p>
         </div>
@@ -207,138 +137,3 @@ function ConnectScreen() {
     </div>
   );
 }
-
-function MainShell({
-  osModeAvailable,
-  onEnableOsMode,
-}: {
-  osModeAvailable: boolean;
-  onEnableOsMode: () => void;
-}) {
-  const tab = useReactUiStore((s) => s.tab);
-  const switchTab = useReactUiStore((s) => s.switchTab);
-  const isMobileLayout = useReactUiStore((s) => s.isMobileLayout);
-  const navDrawerOpen = useReactUiStore((s) => s.navDrawerOpen);
-  const toggleNavDrawer = useReactUiStore((s) => s.toggleNavDrawer);
-  const closeNavDrawer = useReactUiStore((s) => s.closeNavDrawer);
-  const connectionState = useReactUiStore((s) => s.connectionState);
-  const updateSettings = useReactUiStore((s) => s.updateSettings);
-  const settings = useReactUiStore((s) => s.settings);
-  const disconnect = useReactUiStore((s) => s.disconnect);
-
-  const connectionBadgeVariant = useMemo(() => {
-    if (connectionState === "connected") {
-      return "primary";
-    }
-    if (connectionState === "connecting") {
-      return "outline";
-    }
-    return "destructive";
-  }, [connectionState]);
-
-  return (
-    <div
-      className={`app-shell ${isMobileLayout ? "mobile" : ""} ${
-        navDrawerOpen ? "nav-open" : ""
-      }`}
-    >
-      <button
-        type="button"
-        className={`nav-backdrop ${navDrawerOpen ? "open" : ""}`}
-        onClick={() => closeNavDrawer()}
-        aria-label="Close navigation menu"
-      />
-      <nav className={`nav-sidebar ${navDrawerOpen ? "open" : ""}`}>
-        <div className="nav-header">
-          <span className="nav-logo">⚡</span>
-          <span className="nav-title">GSV</span>
-        </div>
-
-        <div className="nav-groups">
-          {TAB_GROUPS.map((group) => (
-            <div className="nav-group" key={group.label}>
-              <div className="nav-group-label">{group.label}</div>
-              {group.tabs.map((groupTab) => (
-                <button
-                  type="button"
-                  className={`nav-item ${groupTab === tab ? "active" : ""}`}
-                  key={groupTab}
-                  onClick={() => switchTab(groupTab)}
-                  onMouseEnter={() => preloadTabView(groupTab)}
-                  onFocus={() => preloadTabView(groupTab)}
-                >
-                  <span className="nav-item-icon" dangerouslySetInnerHTML={{ __html: TAB_ICONS[groupTab] }} />
-                  <span className="nav-item-label">{TAB_LABELS[groupTab]}</span>
-                </button>
-              ))}
-            </div>
-          ))}
-        </div>
-
-        <div className="nav-footer">
-          <div className="connection-status">
-            <Badge className="ui-badge-fix" variant={connectionBadgeVariant}>
-              {connectionState}
-            </Badge>
-          </div>
-        </div>
-      </nav>
-
-      <div className="main-content">
-        <header className="topbar">
-          <div className="topbar-title-wrap">
-            <Button
-              variant="ghost"
-              shape="square"
-              size="sm"
-              className="topbar-menu-btn"
-              aria-label="Toggle navigation menu"
-              title="Toggle navigation"
-              onClick={() => toggleNavDrawer()}
-            >
-              ☰
-            </Button>
-            <h1 className="topbar-title">{TAB_LABELS[tab]}</h1>
-          </div>
-          <div className="topbar-actions">
-            {osModeAvailable ? (
-              <Button
-                variant="secondary"
-                className="ui-button-fix"
-                size="base"
-                onClick={onEnableOsMode}
-              >
-                OS mode
-              </Button>
-            ) : null}
-            <Button
-              variant="ghost"
-              shape="square"
-              aria-label="Toggle theme"
-              title="Toggle theme"
-              onClick={() =>
-                updateSettings({
-                  theme: settings.theme === "dark" ? "light" : "dark",
-                })
-              }
-            >
-              {settings.theme === "dark" ? "🌙" : "☀️"}
-            </Button>
-            <Button
-              variant="secondary"
-              className="ui-button-fix"
-              size="base"
-              onClick={() => disconnect()}
-            >
-              Disconnect
-            </Button>
-          </div>
-        </header>
-
-        <div className="page-content">
-          <TabView tab={tab} />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/gateway/ui/src/react/components/OsShell.tsx b/gateway/ui/src/react/components/OsShell.tsx
index 695a397..3b95c19 100644
--- a/gateway/ui/src/react/components/OsShell.tsx
+++ b/gateway/ui/src/react/components/OsShell.tsx
@@ -8,8 +8,11 @@ import {
   type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
 } from "react";
-import { TAB_ICONS, TAB_LABELS, OS_DOCK_TABS, TAB_GROUPS, type Tab } from "../../ui/types";
+import { TAB_ICONS, TAB_LABELS, OS_DOCK_TABS, TAB_GROUPS, type Tab, type Surface } from "../../ui/types";
+import type { Wallpaper } from "../../ui/storage";
 import { preloadTabView, TabView } from "../tabViews";
+import { WallpaperBg } from "./Wallpaper";
+import { useReactUiStore } from "../state/store";
 
 const WINDOW_MIN_WIDTH = 420;
 const WINDOW_MIN_HEIGHT = 280;
@@ -17,6 +20,68 @@ const WINDOW_MARGIN = 12;
 const SNAP_THRESHOLD = 28;
 const CLOCK_REFRESH_MS = 15_000;
 
+/**
+ * Normalize a URL to its embeddable form for known services.
+ * Returns the embed URL if a transformation applies, or the original URL otherwise.
+ */
+function toEmbedUrl(raw: string): string {
+  try {
+    const u = new URL(raw);
+    const host = u.hostname.replace(/^www\./, "");
+
+    // YouTube: watch?v=ID → /embed/ID, youtu.be/ID → /embed/ID, shorts/ID → /embed/ID
+    if (host === "youtube.com" || host === "m.youtube.com") {
+      const videoId = u.searchParams.get("v");
+      if (videoId) return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
+      const shortsMatch = u.pathname.match(/^\/shorts\/([^/?]+)/);
+      if (shortsMatch) return `https://www.youtube.com/embed/${shortsMatch[1]}?autoplay=1`;
+      if (u.pathname.startsWith("/embed/")) {
+        u.searchParams.set("autoplay", "1");
+        return u.toString();
+      }
+    }
+    if (host === "youtu.be") {
+      const videoId = u.pathname.slice(1).split("/")[0];
+      if (videoId) return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
+    }
+
+    // Vimeo: vimeo.com/ID → player.vimeo.com/video/ID
+    if (host === "vimeo.com") {
+      const videoId = u.pathname.match(/^\/(\d+)/)?.[1];
+      if (videoId) return `https://player.vimeo.com/video/${videoId}?autoplay=1`;
+    }
+    if (host === "player.vimeo.com") {
+      u.searchParams.set("autoplay", "1");
+      return u.toString();
+    }
+
+    // Spotify: open.spotify.com/track/ID → open.spotify.com/embed/track/ID (etc.)
+    if (host === "open.spotify.com" && !u.pathname.startsWith("/embed/")) {
+      return `https://open.spotify.com/embed${u.pathname}`;
+    }
+
+    // Google Maps: /maps/... → /maps/embed/...
+    if (host === "google.com" && u.pathname.startsWith("/maps") && !u.pathname.includes("/embed")) {
+      return `https://www.google.com/maps/embed/v1/place?key=&q=${encodeURIComponent(raw)}`;
+    }
+
+    // Figma: figma.com/file/... or figma.com/design/... → embed
+    if (host === "figma.com" && (u.pathname.startsWith("/file/") || u.pathname.startsWith("/design/"))) {
+      return `https://www.figma.com/embed?embed_host=gsv&url=${encodeURIComponent(raw)}`;
+    }
+
+    // Loom: loom.com/share/ID → loom.com/embed/ID
+    if (host === "loom.com" || host === "www.loom.com") {
+      const shareMatch = u.pathname.match(/^\/share\/([^/?]+)/);
+      if (shareMatch) return `https://www.loom.com/embed/${shareMatch[1]}?autoplay=1`;
+    }
+
+    return raw;
+  } catch {
+    return raw;
+  }
+}
+
 const TAB_ACCENTS: Record<Tab, string> = {
   chat: "hsl(191 95% 58%)",
   overview: "hsl(36 96% 60%)",
@@ -52,6 +117,11 @@ type OsWindow = WindowRect & {
   maximized: boolean;
   snapped: "left" | "right" | null;
   restoreRect?: WindowRect;
+  surfaceId?: string;
+  /** URL for webview/media surfaces (renders as iframe instead of TabView). */
+  url?: string;
+  /** Custom title label for webview/media windows. */
+  surfaceLabel?: string;
 };
 
 type ResizeEdge = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
@@ -97,9 +167,10 @@ type OsShellProps = {
   onSwitchTab: (tab: Tab) => void;
   connectionState: "connected" | "connecting" | "disconnected";
   theme: "dark" | "light" | "system";
+  wallpaper: Wallpaper;
   onToggleTheme: () => void;
+  onChangeWallpaper: (wallpaper: Wallpaper) => void;
   onDisconnect: () => void;
-  onExitOsMode: () => void;
 };
 
 function clamp(value: number, min: number, max: number): number {
@@ -339,10 +410,18 @@ export function OsShell({
   onSwitchTab,
   connectionState,
   theme,
+  wallpaper,
   onToggleTheme,
+  onChangeWallpaper,
   onDisconnect,
-  onExitOsMode,
 }: OsShellProps) {
+  // ── Surface protocol integration ──
+  const storeSurfaces = useReactUiStore((s) => s.surfaces);
+  const storeSurfaceOpen = useReactUiStore((s) => s.surfaceOpen);
+  const storeSurfaceClose = useReactUiStore((s) => s.surfaceClose);
+  const storeSurfaceUpdate = useReactUiStore((s) => s.surfaceUpdate);
+  const storeSurfaceFocus = useReactUiStore((s) => s.surfaceFocus);
+
   const desktopRef = useRef<HTMLDivElement | null>(null);
   const commandInputRef = useRef<HTMLInputElement | null>(null);
   const interactionRef = useRef<InteractionState | null>(null);
@@ -351,9 +430,25 @@ export function OsShell({
   const focusedWindowIdRef = useRef<number | null>(1);
   const nextWindowIdRef = useRef(2);
   const nextZRef = useRef(2);
+  // Track which surfaceIds this client owns (locally opened), to avoid echo loops.
+  const ownedSurfaceIdsRef = useRef<Set<string>>(new Set());
+  // Track window IDs that have a surfaceOpen RPC in flight (surfaceId not yet known).
+  // Maps windowId → contentRef (tab name) so reconciliation can match pending opens.
+  const pendingSurfaceOpensRef = useRef<Map<number, string>>(new Map());
+  // Stable refs for surface actions (avoid callback dependency churn).
+  const surfaceOpenRef = useRef(storeSurfaceOpen);
+  surfaceOpenRef.current = storeSurfaceOpen;
+  const surfaceCloseRef = useRef(storeSurfaceClose);
+  surfaceCloseRef.current = storeSurfaceClose;
+  const surfaceUpdateRef = useRef(storeSurfaceUpdate);
+  surfaceUpdateRef.current = storeSurfaceUpdate;
+  const surfaceFocusRef = useRef(storeSurfaceFocus);
+  surfaceFocusRef.current = storeSurfaceFocus;
 
   const [windows, setWindows] = useState<OsWindow[]>(() => {
     const bounds = getDesktopBounds(null);
+    // Mark the initial window as pending so reconciliation doesn't duplicate it.
+    pendingSurfaceOpensRef.current.set(1, tab);
     return [createWindow(tab, 1, 1, 0, bounds)];
   });
   const [focusedWindowId, setFocusedWindowId] = useState<number | null>(1);
@@ -365,15 +460,20 @@ export function OsShell({
 
   const launchTabs = OS_DOCK_TABS;
   const allTabs = useMemo(() => TAB_GROUPS.flatMap((group) => group.tabs), []);
+  /** Windows backed by a gateway surface URL (webview/media) — not tied to a Tab. */
+  const surfaceWindows = useMemo(
+    () => windows.filter((windowState) => windowState.url),
+    [windows],
+  );
   const openTabs = useMemo(
-    () => new Set(windows.map((windowState) => windowState.tab)),
+    () => new Set(windows.filter((w) => !w.url).map((w) => w.tab)),
     [windows],
   );
+  // Do NOT sort by z-index here — sorting reorders the array on every focus
+  // change, causing React to physically move DOM nodes (reloads iframes,
+  // resets scroll). CSS z-index (set via inline style) handles stacking.
   const visibleWindows = useMemo(
-    () =>
-      windows
-        .filter((windowState) => !windowState.minimized)
-        .sort((left, right) => left.z - right.z),
+    () => windows.filter((windowState) => !windowState.minimized),
     [windows],
   );
   const focusedWindow = useMemo(
@@ -383,8 +483,13 @@ export function OsShell({
         : windows.find((windowState) => windowState.id === focusedWindowId) ?? null,
     [focusedWindowId, windows],
   );
-  const focusedTab = focusedWindow?.tab ?? null;
-  const focusedTabLabel = focusedTab ? TAB_LABELS[focusedTab] : "No focus";
+  const focusedIsUrl = focusedWindow?.url != null;
+  const focusedTab = focusedIsUrl ? null : (focusedWindow?.tab ?? null);
+  const focusedTabLabel = focusedIsUrl
+    ? (focusedWindow?.surfaceLabel ?? "Webview")
+    : focusedTab
+      ? TAB_LABELS[focusedTab]
+      : "No focus";
   const totalWindowCount = windows.length;
   const visibleWindowCount = visibleWindows.length;
   const shellFocusAccent = focusedTab
@@ -409,7 +514,9 @@ export function OsShell({
   const windowCountByTab = useMemo(() => {
     const counts: Partial<Record<Tab, number>> = {};
     for (const windowState of windows) {
-      counts[windowState.tab] = (counts[windowState.tab] ?? 0) + 1;
+      if (!windowState.url) {
+        counts[windowState.tab] = (counts[windowState.tab] ?? 0) + 1;
+      }
     }
     return counts;
   }, [windows]);
@@ -433,6 +540,30 @@ export function OsShell({
     };
   }, []);
 
+  // Register the initial window (id=1) with the gateway surface registry.
+  // This runs once on mount. The pending marker was set synchronously in useState.
+  useEffect(() => {
+    const initialWindow = windowsRef.current.find((w) => w.id === 1);
+    if (!initialWindow) return;
+    void surfaceOpenRef.current({
+      kind: "app",
+      contentRef: initialWindow.tab,
+      label: TAB_LABELS[initialWindow.tab],
+      rect: { x: initialWindow.x, y: initialWindow.y, width: initialWindow.width, height: initialWindow.height },
+    }).then((surface) => {
+      pendingSurfaceOpensRef.current.delete(1);
+      if (surface) {
+        ownedSurfaceIdsRef.current.add(surface.surfaceId);
+        setWindows((prev) =>
+          prev.map((w) =>
+            w.id === 1 ? { ...w, surfaceId: surface.surfaceId } : w,
+          ),
+        );
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const connectionBadgeVariant = useMemo(() => {
     if (connectionState === "connected") {
       return "primary";
@@ -443,6 +574,20 @@ export function OsShell({
     return "destructive";
   }, [connectionState]);
 
+  /** Fire-and-forget: sync a window's state to the gateway surface registry. */
+  const syncSurfaceState = useCallback(
+    (win: OsWindow) => {
+      if (!win.surfaceId) return;
+      void surfaceUpdateRef.current({
+        surfaceId: win.surfaceId,
+        state: win.minimized ? "minimized" : "open",
+        rect: { x: win.x, y: win.y, width: win.width, height: win.height },
+        zIndex: win.z,
+      });
+    },
+    [],
+  );
+
   const focusWindow = useCallback(
     (windowId: number, syncTab = true) => {
       const target = windowsRef.current.find((windowState) => windowState.id === windowId);
@@ -465,6 +610,10 @@ export function OsShell({
       if (syncTab) {
         onSwitchTab(target.tab);
       }
+      // Surface sync: focus
+      if (target.surfaceId) {
+        void surfaceFocusRef.current(target.surfaceId);
+      }
     },
     [onSwitchTab],
   );
@@ -499,6 +648,29 @@ export function OsShell({
       if (syncTab) {
         onSwitchTab(windowTab);
       }
+
+      // Surface sync: register this window with the gateway.
+      // Mark as pending SYNCHRONOUSLY so reconciliation skips duplicates
+      // even if the surfaceOpen RPC resolves before the .then() patches the window.
+      pendingSurfaceOpensRef.current.set(windowId, windowTab);
+      void surfaceOpenRef.current({
+        kind: "app",
+        contentRef: windowTab,
+        label: TAB_LABELS[windowTab],
+        rect: { x: windowState.x, y: windowState.y, width: windowState.width, height: windowState.height },
+      }).then((surface) => {
+        pendingSurfaceOpensRef.current.delete(windowId);
+        if (surface) {
+          ownedSurfaceIdsRef.current.add(surface.surfaceId);
+          // Patch the window with its surfaceId
+          setWindows((prev) =>
+            prev.map((w) =>
+              w.id === windowId ? { ...w, surfaceId: surface.surfaceId } : w,
+            ),
+          );
+        }
+      });
+
       return windowId;
     },
     [focusWindow, onSwitchTab],
@@ -512,6 +684,12 @@ export function OsShell({
         return;
       }
 
+      // Surface sync: close
+      if (target.surfaceId) {
+        ownedSurfaceIdsRef.current.delete(target.surfaceId);
+        void surfaceCloseRef.current(target.surfaceId);
+      }
+
       const remaining = currentWindows.filter((windowState) => windowState.id !== windowId);
       if (!remaining.length) {
         setWindows([]);
@@ -567,6 +745,14 @@ export function OsShell({
         ),
       );
 
+      // Surface sync: minimized
+      if (target.surfaceId) {
+        void surfaceUpdateRef.current({
+          surfaceId: target.surfaceId,
+          state: "minimized",
+        });
+      }
+
       if (focusedWindowIdRef.current !== windowId) {
         return;
       }
@@ -609,6 +795,16 @@ export function OsShell({
       );
       setFocusedWindowId(windowId);
       onSwitchTab(target.tab);
+
+      // Surface sync: restored rect
+      if (target.surfaceId) {
+        void surfaceUpdateRef.current({
+          surfaceId: target.surfaceId,
+          state: "open",
+          rect: restored,
+          zIndex: nextZ,
+        });
+      }
     },
     [onSwitchTab],
   );
@@ -652,6 +848,16 @@ export function OsShell({
       );
       setFocusedWindowId(windowId);
       onSwitchTab(current.tab);
+
+      // Surface sync: maximized rect
+      if (current.surfaceId) {
+        void surfaceUpdateRef.current({
+          surfaceId: current.surfaceId,
+          state: "open",
+          rect: { x: 0, y: 0, width: bounds.width, height: bounds.height },
+          zIndex: nextZ,
+        });
+      }
     },
     [onSwitchTab, restoreWindow],
   );
@@ -694,6 +900,16 @@ export function OsShell({
 
       setFocusedWindowId(windowId);
       onSwitchTab(target.tab);
+
+      // Surface sync: snapped rect
+      if (target.surfaceId) {
+        void surfaceUpdateRef.current({
+          surfaceId: target.surfaceId,
+          state: "open",
+          rect: snappedRect,
+          zIndex: nextZ,
+        });
+      }
     },
     [onSwitchTab],
   );
@@ -874,6 +1090,19 @@ export function OsShell({
 
       if (interaction.type === "drag" && preview) {
         snapWindow(interaction.windowId, preview.zone);
+        // snapWindow handles its own surface sync
+      } else {
+        // Drag without snap, or resize: sync the settled rect
+        const settled = windowsRef.current.find(
+          (w) => w.id === interaction.windowId,
+        );
+        if (settled?.surfaceId) {
+          void surfaceUpdateRef.current({
+            surfaceId: settled.surfaceId,
+            rect: { x: settled.x, y: settled.y, width: settled.width, height: settled.height },
+            zIndex: settled.z,
+          });
+        }
       }
     };
 
@@ -929,6 +1158,111 @@ export function OsShell({
     openWindow(tab, { syncTab: false });
   }, [focusWindow, openWindow, tab]);
 
+  // ── A3: Inbound surface reconciliation ──
+  // When surfaces arrive from other clients or agents, create/destroy local windows.
+  useEffect(() => {
+    const currentWindows = windowsRef.current;
+    const localSurfaceIds = new Set(
+      currentWindows
+        .filter((w) => w.surfaceId)
+        .map((w) => w.surfaceId as string),
+    );
+    const remoteSurfaceIds = new Set(Object.keys(storeSurfaces));
+
+    // 1. Surfaces that were removed externally → close matching local windows
+    for (const win of currentWindows) {
+      if (win.surfaceId && !remoteSurfaceIds.has(win.surfaceId)) {
+        // Only auto-close if we didn't locally initiate the close (owned check)
+        if (!ownedSurfaceIdsRef.current.has(win.surfaceId)) {
+          setWindows((prev) => prev.filter((w) => w.id !== win.id));
+        }
+      }
+    }
+
+    // 2. New surfaces that we don't have a local window for → create one
+    const pendingContentRefs = new Set(pendingSurfaceOpensRef.current.values());
+    for (const [surfaceId, surface] of Object.entries(storeSurfaces)) {
+      if (localSurfaceIds.has(surfaceId)) continue;
+      if (ownedSurfaceIdsRef.current.has(surfaceId)) continue; // we opened it, patch is in flight
+      if (surface.state === "closed") continue;
+      // Skip app surfaces that match a window with a pending surfaceOpen RPC.
+      // This prevents the race where the store gets the surface before the
+      // .then() callback patches the window's surfaceId.
+      if (surface.kind === "app" && pendingContentRefs.has(surface.contentRef)) continue;
+
+      const bounds = getDesktopBounds(desktopRef.current);
+      const windowId = nextWindowIdRef.current++;
+      const nextZ = nextZRef.current++;
+
+      const rect: WindowRect = surface.rect
+        ? clampRectToBounds(surface.rect, bounds)
+        : clampRectToBounds(
+            {
+              x: 36 + (windowId % 7) * 24,
+              y: 34 + (windowId % 7) * 18,
+              width: Math.round(bounds.width * 0.68),
+              height: Math.round(bounds.height * 0.74),
+            },
+            bounds,
+          );
+
+      if (surface.kind === "app") {
+        // App surfaces map to a built-in tab
+        const surfaceTab = surface.contentRef as Tab;
+        if (!TAB_LABELS[surfaceTab]) continue; // invalid tab
+        preloadTabView(surfaceTab);
+
+        setWindows((prev) => [
+          ...prev,
+          {
+            id: windowId,
+            tab: surfaceTab,
+            z: surface.zIndex ?? nextZ,
+            minimized: surface.state === "minimized",
+            maximized: false,
+            snapped: null,
+            surfaceId,
+            ...rect,
+          },
+        ]);
+      } else if (surface.kind === "webview" || surface.kind === "media") {
+        // Webview/media surfaces render as iframe windows
+        setWindows((prev) => [
+          ...prev,
+          {
+            id: windowId,
+            tab: "chat" as Tab, // fallback tab (unused for rendering, needed for type)
+            z: surface.zIndex ?? nextZ,
+            minimized: surface.state === "minimized",
+            maximized: false,
+            snapped: null,
+            surfaceId,
+            url: toEmbedUrl(surface.contentRef),
+            surfaceLabel: surface.label,
+            ...rect,
+          },
+        ]);
+      }
+    }
+
+    // 3. Surface state updates (minimized/open) from remote
+    for (const win of currentWindows) {
+      if (!win.surfaceId) continue;
+      if (ownedSurfaceIdsRef.current.has(win.surfaceId)) continue;
+      const surface = storeSurfaces[win.surfaceId];
+      if (!surface) continue;
+
+      const shouldBeMinimized = surface.state === "minimized";
+      if (win.minimized !== shouldBeMinimized) {
+        setWindows((prev) =>
+          prev.map((w) =>
+            w.id === win.id ? { ...w, minimized: shouldBeMinimized } : w,
+          ),
+        );
+      }
+    }
+  }, [storeSurfaces]);
+
   const commandActions = useMemo<CommandAction[]>(() => {
     const actions: CommandAction[] = [];
 
@@ -1015,13 +1349,6 @@ export function OsShell({
       keywords: ["theme", "dark", "light"],
       run: () => onToggleTheme(),
     });
-    actions.push({
-      id: "exit-os-mode",
-      label: "Switch to classic view",
-      hint: "disable OS shell",
-      keywords: ["classic", "mode", "layout"],
-      run: () => onExitOsMode(),
-    });
     actions.push({
       id: "disconnect",
       label: "Disconnect gateway",
@@ -1037,7 +1364,6 @@ export function OsShell({
     launchTabs,
     minimizeWindow,
     onDisconnect,
-    onExitOsMode,
     onToggleTheme,
     openWindow,
     restoreWindow,
@@ -1198,12 +1524,8 @@ export function OsShell({
 
   return (
     <div className="os-shell" style={shellStyle}>
-      {/* ── Ambient Background ── */}
-      <div className="os-ambient">
-        <div className="os-orb os-orb-1" />
-        <div className="os-orb os-orb-2" />
-        <div className="os-orb os-orb-3" />
-      </div>
+      {/* ── Wallpaper Background ── */}
+      <WallpaperBg wallpaper={wallpaper} onChangeWallpaper={onChangeWallpaper} />
 
       {/* ── Status Bar (minimal, macOS-style) ── */}
       <header className="os-statusbar">
@@ -1213,14 +1535,6 @@ export function OsShell({
           <span className="os-statusbar-label">{connectionStateLabel}</span>
         </div>
         <div className="os-statusbar-right">
-          <button
-            type="button"
-            className="os-statusbar-btn"
-            onClick={onExitOsMode}
-            title="Switch to classic view"
-          >
-            Classic
-          </button>
           <button
             type="button"
             className="os-statusbar-btn"
@@ -1246,73 +1560,102 @@ export function OsShell({
           />
         ) : null}
 
-        {visibleWindows.map((windowState) => (
-          <section
-            key={windowState.id}
-            className={`os-window ${
-              focusedWindowId === windowState.id ? "focused" : ""
-            } ${windowState.maximized ? "maximized" : ""}`}
-            style={
-              {
-                "--os-tab-accent": TAB_ACCENTS[windowState.tab],
-                transform: `translate(${windowState.x}px, ${windowState.y}px)`,
-                width: `${windowState.width}px`,
-                height: `${windowState.height}px`,
-                zIndex: windowState.z,
-              } as CSSProperties
-            }
-            onMouseDown={() => focusWindow(windowState.id)}
-          >
-            <div
-              className="os-window-titlebar"
-              onPointerDown={(event) => beginDrag(event, windowState.id)}
-              onDoubleClick={() => toggleWindowMaximized(windowState.id)}
+        {visibleWindows.map((windowState) => {
+          const isUrlWindow = Boolean(windowState.url);
+          const windowTitle = isUrlWindow
+            ? (windowState.surfaceLabel ?? "Webview")
+            : TAB_LABELS[windowState.tab];
+          const accentColor = isUrlWindow
+            ? "hsl(260 70% 62%)"
+            : TAB_ACCENTS[windowState.tab];
+
+          return (
+            <section
+              key={windowState.id}
+              className={`os-window ${
+                focusedWindowId === windowState.id ? "focused" : ""
+              } ${windowState.maximized ? "maximized" : ""}`}
+              style={
+                {
+                  "--os-tab-accent": accentColor,
+                  transform: `translate(${windowState.x}px, ${windowState.y}px)`,
+                  width: `${windowState.width}px`,
+                  height: `${windowState.height}px`,
+                  zIndex: windowState.z,
+                } as CSSProperties
+              }
+              onMouseDown={() => focusWindow(windowState.id)}
             >
-              <div className="os-window-actions">
-                <button
-                  type="button"
-                  className="os-window-action close"
-                  data-window-action
-                  aria-label={`Close ${TAB_LABELS[windowState.tab]}`}
-                  onClick={() => closeWindow(windowState.id)}
-                />
-                <button
-                  type="button"
-                  className="os-window-action minimize"
-                  data-window-action
-                  aria-label={`Minimize ${TAB_LABELS[windowState.tab]}`}
-                  onClick={() => minimizeWindow(windowState.id)}
-                />
-                <button
-                  type="button"
-                  className="os-window-action maximize"
-                  data-window-action
-                  aria-label={`Toggle maximize ${TAB_LABELS[windowState.tab]}`}
-                  onClick={() => toggleWindowMaximized(windowState.id)}
-                />
-              </div>
-              <div className="os-window-title">
-                <span className="os-window-title-label">{TAB_LABELS[windowState.tab]}</span>
+              <div
+                className="os-window-titlebar"
+                onPointerDown={(event) => beginDrag(event, windowState.id)}
+                onDoubleClick={() => toggleWindowMaximized(windowState.id)}
+              >
+                <div className="os-window-actions">
+                  <button
+                    type="button"
+                    className="os-window-action close"
+                    data-window-action
+                    aria-label={`Close ${windowTitle}`}
+                    onClick={() => closeWindow(windowState.id)}
+                  />
+                  <button
+                    type="button"
+                    className="os-window-action minimize"
+                    data-window-action
+                    aria-label={`Minimize ${windowTitle}`}
+                    onClick={() => minimizeWindow(windowState.id)}
+                  />
+                  <button
+                    type="button"
+                    className="os-window-action maximize"
+                    data-window-action
+                    aria-label={`Toggle maximize ${windowTitle}`}
+                    onClick={() => toggleWindowMaximized(windowState.id)}
+                  />
+                </div>
+                <div className="os-window-title">
+                  <span className="os-window-title-label">{windowTitle}</span>
+                </div>
               </div>
-            </div>
 
-            <div className="os-window-content">
-              <TabView tab={windowState.tab} />
-            </div>
+              <div className="os-window-content">
+                {isUrlWindow ? (
+                  <div className="os-window-iframe-wrap">
+                    <iframe
+                      src={windowState.url}
+                      title={windowTitle}
+                      className="os-window-iframe"
+                      sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+                      allow="autoplay; fullscreen; picture-in-picture"
+                    />
+                    <div className="os-window-iframe-fallback">
+                      <span>{windowTitle}</span>
+                      <a href={windowState.url} target="_blank" rel="noopener noreferrer">
+                        Open externally
+                        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+                      </a>
+                    </div>
+                  </div>
+                ) : (
+                  <TabView tab={windowState.tab} />
+                )}
+              </div>
 
-            {!windowState.maximized
-              ? RESIZE_HANDLES.map((handle) => (
-                  <div
-                    key={handle.edge}
-                    className={handle.className}
-                    onPointerDown={(event) =>
-                      beginResize(event, windowState.id, handle.edge)
-                    }
-                  />
-                ))
-              : null}
-          </section>
-        ))}
+              {!windowState.maximized
+                ? RESIZE_HANDLES.map((handle) => (
+                    <div
+                      key={handle.edge}
+                      className={handle.className}
+                      onPointerDown={(event) =>
+                        beginResize(event, windowState.id, handle.edge)
+                      }
+                    />
+                  ))
+                : null}
+            </section>
+          );
+        })}
 
         {!visibleWindows.length ? (
           <div className="os-desktop-empty">
@@ -1344,6 +1687,38 @@ export function OsShell({
               </button>
             );
           })}
+
+          {/* ── Dynamic surface windows (webview/media) ── */}
+          {surfaceWindows.length > 0 ? (
+            <>
+              <div className="os-dock-separator" />
+              {surfaceWindows.map((sw) => {
+                const isFocused = focusedWindowId === sw.id;
+                return (
+                  <button
+                    key={`surface-${sw.id}`}
+                    type="button"
+                    className={`os-dock-item open ${isFocused ? "focused" : ""}`}
+                    onClick={() => {
+                      if (sw.minimized) {
+                        setWindows((prev) =>
+                          prev.map((w) =>
+                            w.id === sw.id ? { ...w, minimized: false } : w,
+                          ),
+                        );
+                      }
+                      focusWindow(sw.id);
+                    }}
+                    title={sw.surfaceLabel ?? "Webview"}
+                  >
+                    <span className="os-dock-item-icon">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+                    </span>
+                  </button>
+                );
+              })}
+            </>
+          ) : null}
         </div>
       </div>
 
diff --git a/gateway/ui/src/react/components/Wallpaper.tsx b/gateway/ui/src/react/components/Wallpaper.tsx
new file mode 100644
index 0000000..a4f1324
--- /dev/null
+++ b/gateway/ui/src/react/components/Wallpaper.tsx
@@ -0,0 +1,152 @@
+import { useCallback, useEffect, useRef, type CSSProperties, type MouseEvent as ReactMouseEvent } from "react";
+import { WALLPAPER_OPTIONS, type Wallpaper } from "../../ui/storage";
+
+type WallpaperBgProps = {
+  wallpaper: Wallpaper;
+  onChangeWallpaper: (wallpaper: Wallpaper) => void;
+};
+
+/** Render ~120 tiny stars as absolutely positioned dots. */
+function StarCanvas() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let animId: number;
+    let w = 0;
+    let h = 0;
+
+    type Star = { x: number; y: number; r: number; a: number; da: number; dx: number; dy: number };
+    let stars: Star[] = [];
+
+    function resize() {
+      w = window.innerWidth * window.devicePixelRatio;
+      h = window.innerHeight * window.devicePixelRatio;
+      canvas!.width = w;
+      canvas!.height = h;
+      canvas!.style.width = `${window.innerWidth}px`;
+      canvas!.style.height = `${window.innerHeight}px`;
+    }
+
+    function init() {
+      resize();
+      const count = Math.round((w * h) / 12000); // density
+      stars = Array.from({ length: count }, () => ({
+        x: Math.random() * w,
+        y: Math.random() * h,
+        r: Math.random() * 1.2 + 0.3,
+        a: Math.random(),
+        da: (Math.random() - 0.5) * 0.003,
+        dx: (Math.random() - 0.5) * 0.08,
+        dy: (Math.random() - 0.5) * 0.08,
+      }));
+    }
+
+    function draw() {
+      const isLight = document.documentElement.getAttribute("data-theme") === "light";
+      ctx!.clearRect(0, 0, w, h);
+      for (const star of stars) {
+        star.x += star.dx;
+        star.y += star.dy;
+        star.a += star.da;
+        if (star.a > 1 || star.a < 0.1) star.da = -star.da;
+        if (star.x < 0) star.x = w;
+        if (star.x > w) star.x = 0;
+        if (star.y < 0) star.y = h;
+        if (star.y > h) star.y = 0;
+
+        ctx!.beginPath();
+        ctx!.arc(star.x, star.y, star.r, 0, Math.PI * 2);
+        ctx!.fillStyle = isLight
+          ? `rgba(0, 0, 0, ${star.a * 0.25})`
+          : `rgba(255, 255, 255, ${star.a * 0.7})`;
+        ctx!.fill();
+      }
+      animId = requestAnimationFrame(draw);
+    }
+
+    init();
+    draw();
+    window.addEventListener("resize", init);
+    return () => {
+      cancelAnimationFrame(animId);
+      window.removeEventListener("resize", init);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none" }}
+    />
+  );
+}
+
+export function WallpaperBg({ wallpaper, onChangeWallpaper }: WallpaperBgProps) {
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  const closeMenu = useCallback(() => {
+    if (menuRef.current) {
+      menuRef.current.style.display = "none";
+    }
+  }, []);
+
+  // Right-click context menu
+  const onContextMenu = useCallback(
+    (event: ReactMouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      const menu = menuRef.current;
+      if (!menu) return;
+      menu.style.display = "block";
+      menu.style.left = `${event.clientX}px`;
+      menu.style.top = `${event.clientY}px`;
+
+      const onClickAway = () => {
+        closeMenu();
+        window.removeEventListener("click", onClickAway);
+      };
+      // Delay to not immediately close
+      requestAnimationFrame(() => {
+        window.addEventListener("click", onClickAway);
+      });
+    },
+    [closeMenu],
+  );
+
+  const selectWallpaper = useCallback(
+    (wp: Wallpaper) => {
+      onChangeWallpaper(wp);
+      closeMenu();
+    },
+    [onChangeWallpaper, closeMenu],
+  );
+
+  return (
+    <div
+      className={`os-wallpaper os-wp-${wallpaper}`}
+      onContextMenu={onContextMenu}
+    >
+      {wallpaper === "starfield" ? <StarCanvas /> : null}
+
+      {/* Right-click context menu */}
+      <div ref={menuRef} className="os-ctx-menu" style={{ display: "none" } as CSSProperties}>
+        <div className="os-ctx-menu-label">Wallpaper</div>
+        {WALLPAPER_OPTIONS.map((opt) => (
+          <button
+            key={opt.id}
+            type="button"
+            className={`os-ctx-menu-item ${opt.id === wallpaper ? "active" : ""}`}
+            onClick={() => selectWallpaper(opt.id)}
+          >
+            <span className={`os-ctx-menu-preview os-wp-${opt.id}`} />
+            <span>{opt.label}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/gateway/ui/src/react/state/store.ts b/gateway/ui/src/react/state/store.ts
index 82cb592..88f46cc 100644
--- a/gateway/ui/src/react/state/store.ts
+++ b/gateway/ui/src/react/state/store.ts
@@ -19,6 +19,7 @@ import type {
   EventFrame,
   Message,
   SessionRegistryEntry,
+  Surface,
   Tab,
   ToolDefinition,
 } from "../../ui/types";
@@ -96,8 +97,6 @@ type ReactUiStore = {
   showConnectScreen: boolean;
 
   tab: Tab;
-  navDrawerOpen: boolean;
-  isMobileLayout: boolean;
 
   chatMessages: Message[];
   chatLoading: boolean;
@@ -144,6 +143,8 @@ type ReactUiStore = {
   pairingRequests: PendingPair[];
   pairingLoading: boolean;
 
+  surfaces: Record<string, Surface>;
+
   client: GatewayClient | null;
 
   initialize: () => void;
@@ -152,11 +153,6 @@ type ReactUiStore = {
   syncTabFromLocation: () => void;
   switchTab: (tab: Tab) => void;
 
-  setMobileLayout: (isMobile: boolean) => void;
-  setNavDrawerOpen: (open: boolean) => void;
-  toggleNavDrawer: () => void;
-  closeNavDrawer: () => void;
-
   startConnection: () => void;
   stopConnection: () => void;
   connect: () => void;
@@ -216,6 +212,25 @@ type ReactUiStore = {
 
   updateSettings: (updates: Partial<UiSettings>) => void;
 
+  surfaceOpen: (params: {
+    kind: string;
+    contentRef: string;
+    label?: string;
+    contentData?: unknown;
+    targetClientId?: string;
+    rect?: { x: number; y: number; width: number; height: number };
+  }) => Promise<Surface | null>;
+  surfaceClose: (surfaceId: string) => Promise<void>;
+  surfaceUpdate: (params: {
+    surfaceId: string;
+    state?: string;
+    rect?: { x: number; y: number; width: number; height: number };
+    label?: string;
+    zIndex?: number;
+  }) => Promise<void>;
+  surfaceFocus: (surfaceId: string) => Promise<void>;
+  surfaceList: (targetClientId?: string) => Promise<void>;
+
   clearDebugLog: () => void;
   rpcRequest: (method: string, params?: unknown) => Promise<unknown>;
 };
@@ -289,8 +304,6 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
   showConnectScreen: true,
 
   tab: getCurrentTab(),
-  navDrawerOpen: false,
-  isMobileLayout: false,
 
   chatMessages: [],
   chatLoading: false,
@@ -337,6 +350,8 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
   pairingRequests: [],
   pairingLoading: false,
 
+  surfaces: {},
+
   client: null,
 
   initialize: () => {
@@ -370,7 +385,6 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
   syncTabFromLocation: () => {
     const tab = getCurrentTab();
     set({ tab });
-    get().closeNavDrawer();
     void get().loadTabData(tab);
     syncChannelsAutoRefresh(get);
   },
@@ -381,35 +395,9 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
       navigateTo(tab);
       void get().loadTabData(tab);
     }
-    get().closeNavDrawer();
     syncChannelsAutoRefresh(get);
   },
 
-  setMobileLayout: (isMobile) => {
-    set({ isMobileLayout: isMobile });
-    if (!isMobile) {
-      set({ navDrawerOpen: false });
-    }
-  },
-
-  setNavDrawerOpen: (open) => {
-    set({ navDrawerOpen: open });
-  },
-
-  toggleNavDrawer: () => {
-    if (!get().isMobileLayout) {
-      return;
-    }
-    set({ navDrawerOpen: !get().navDrawerOpen });
-  },
-
-  closeNavDrawer: () => {
-    if (!get().navDrawerOpen) {
-      return;
-    }
-    set({ navDrawerOpen: false });
-  },
-
   startConnection: () => {
     const existingClient = get().client;
     if (existingClient) {
@@ -437,6 +425,7 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
             get().loadTools(),
             get().loadSessions(),
             get().loadChannels(),
+            get().surfaceList(),
           ]).then(() => get().loadTabData(get().tab));
         } else {
           syncChannelsAutoRefresh(get);
@@ -499,6 +488,23 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
               currentRunId: matchesCurrentRun ? null : get().currentRunId,
             });
           }
+        } else if (event.event === "surface.opened") {
+          const { surface } = event.payload as { surface: Surface };
+          set((state) => ({
+            surfaces: { ...state.surfaces, [surface.surfaceId]: surface },
+          }));
+        } else if (event.event === "surface.closed") {
+          const { surfaceId } = event.payload as { surfaceId: string };
+          set((state) => {
+            const next = { ...state.surfaces };
+            delete next[surfaceId];
+            return { surfaces: next };
+          });
+        } else if (event.event === "surface.updated") {
+          const { surface } = event.payload as { surface: Surface };
+          set((state) => ({
+            surfaces: { ...state.surfaces, [surface.surfaceId]: surface },
+          }));
         }
       },
     });
@@ -1143,6 +1149,90 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
     }
   },
 
+  surfaceOpen: async (params) => {
+    const client = get().client;
+    if (!client) return null;
+    try {
+      const res = await client.surfaceOpen(params);
+      if (res.ok && res.payload) {
+        const { surface } = res.payload as { surface: Surface };
+        set((state) => ({
+          surfaces: { ...state.surfaces, [surface.surfaceId]: surface },
+        }));
+        return surface;
+      }
+    } catch (e) {
+      console.error("[Store] surfaceOpen failed:", e);
+    }
+    return null;
+  },
+
+  surfaceClose: async (surfaceId) => {
+    const client = get().client;
+    if (!client) return;
+    try {
+      await client.surfaceClose(surfaceId);
+      // Optimistic removal (event will confirm)
+      set((state) => {
+        const next = { ...state.surfaces };
+        delete next[surfaceId];
+        return { surfaces: next };
+      });
+    } catch (e) {
+      console.error("[Store] surfaceClose failed:", e);
+    }
+  },
+
+  surfaceUpdate: async (params) => {
+    const client = get().client;
+    if (!client) return;
+    try {
+      const res = await client.surfaceUpdate(params);
+      if (res.ok && res.payload) {
+        const { surface } = res.payload as { surface: Surface };
+        set((state) => ({
+          surfaces: { ...state.surfaces, [surface.surfaceId]: surface },
+        }));
+      }
+    } catch (e) {
+      console.error("[Store] surfaceUpdate failed:", e);
+    }
+  },
+
+  surfaceFocus: async (surfaceId) => {
+    const client = get().client;
+    if (!client) return;
+    try {
+      const res = await client.surfaceFocus(surfaceId);
+      if (res.ok && res.payload) {
+        const { surface } = res.payload as { surface: Surface };
+        set((state) => ({
+          surfaces: { ...state.surfaces, [surface.surfaceId]: surface },
+        }));
+      }
+    } catch (e) {
+      console.error("[Store] surfaceFocus failed:", e);
+    }
+  },
+
+  surfaceList: async (targetClientId) => {
+    const client = get().client;
+    if (!client) return;
+    try {
+      const res = await client.surfaceList(targetClientId);
+      if (res.ok && res.payload) {
+        const { surfaces } = res.payload as { surfaces: Surface[] };
+        const map: Record<string, Surface> = {};
+        for (const s of surfaces) {
+          map[s.surfaceId] = s;
+        }
+        set({ surfaces: map });
+      }
+    } catch (e) {
+      console.error("[Store] surfaceList failed:", e);
+    }
+  },
+
   clearDebugLog: () => {
     set({ debugLog: [] });
   },
diff --git a/gateway/ui/src/react/views/ConfigView.tsx b/gateway/ui/src/react/views/ConfigView.tsx
index dda25c5..597dd8a 100644
--- a/gateway/ui/src/react/views/ConfigView.tsx
+++ b/gateway/ui/src/react/views/ConfigView.tsx
@@ -44,6 +44,11 @@ const MODEL_OPTIONS = [
   { provider: "google", id: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
 ];
 
+// Stable fallback so the Zustand selector never creates a new object reference
+// when config is null.  (s.config || {}) would return a fresh {} on every store
+// update, causing ConfigView to re-render on every unrelated event.
+const EMPTY_CONFIG: GsvConfig = {};
+
 function parseAllowFrom(text: string): string[] {
   return text
     .split("\n")
@@ -52,7 +57,7 @@ function parseAllowFrom(text: string): string[] {
 }
 
 export function ConfigView() {
-  const config = useReactUiStore((s) => (s.config || {}) as GsvConfig);
+  const config = useReactUiStore((s) => (s.config as GsvConfig) ?? EMPTY_CONFIG);
   const configLoading = useReactUiStore((s) => s.configLoading);
   const connectionState = useReactUiStore((s) => s.connectionState);
   const settings = useReactUiStore((s) => s.settings);
@@ -60,56 +65,68 @@ export function ConfigView() {
   const saveConfig = useReactUiStore((s) => s.saveConfig);
   const updateSettings = useReactUiStore((s) => s.updateSettings);
 
-  const model = config.model || {
-    provider: "anthropic",
-    id: "claude-sonnet-4-20250514",
-  };
-  const apiKeys = config.apiKeys || {};
-  const auth = config.auth || {};
-  const transcriptionProvider = config.transcription?.provider || "workers-ai";
-  const whatsapp = config.channels?.whatsapp || { dmPolicy: "pairing", allowFrom: [] };
-  const identityLinks = config.session?.identityLinks || {};
-  const heartbeat = config.agents?.defaultHeartbeat || {};
-
+  // ── Derive config fields with runtime guards ──
+  const rawModel = config.model;
+  const configModel = useMemo(() => ({
+    provider: String(
+      (rawModel && typeof rawModel === "object" && "provider" in rawModel ? rawModel.provider : null) || "anthropic",
+    ),
+    id: String(
+      (rawModel && typeof rawModel === "object" && "id" in rawModel ? rawModel.id : null) || "claude-sonnet-4-20250514",
+    ),
+  }), [rawModel]);
+
+  const apiKeys = (config.apiKeys && typeof config.apiKeys === "object" ? config.apiKeys : {}) as Record<string, string | undefined>;
+  const auth = (config.auth && typeof config.auth === "object" ? config.auth : {}) as Record<string, string | undefined>;
+  const transcriptionProvider = String(config.transcription && typeof config.transcription === "object" && "provider" in config.transcription ? config.transcription.provider : "") || "workers-ai";
+  const rawWhatsapp = config.channels && typeof config.channels === "object" && "whatsapp" in config.channels ? config.channels.whatsapp : null;
+  const whatsapp = (rawWhatsapp && typeof rawWhatsapp === "object" ? rawWhatsapp : { dmPolicy: "pairing", allowFrom: [] }) as { dmPolicy?: string; allowFrom?: string[] };
+  const rawIdentityLinks = config.session && typeof config.session === "object" && "identityLinks" in config.session ? config.session.identityLinks : null;
+  const identityLinks = (rawIdentityLinks && typeof rawIdentityLinks === "object" ? rawIdentityLinks : {}) as Record<string, string[]>;
+  const rawHeartbeat = config.agents && typeof config.agents === "object" && "defaultHeartbeat" in config.agents ? config.agents.defaultHeartbeat : null;
+  const heartbeat = (rawHeartbeat && typeof rawHeartbeat === "object" ? rawHeartbeat : {}) as { every?: string; target?: string };
+
+  // ── Local form state ──
   const [gatewayUrl, setGatewayUrl] = useState(settings.gatewayUrl);
   const [sessionKey, setSessionKey] = useState(settings.sessionKey);
-  const [modelProvider, setModelProvider] = useState(model.provider);
-  const [modelId, setModelId] = useState(model.id);
-  const [anthropicKey, setAnthropicKey] = useState(apiKeys.anthropic || "");
-  const [openAiKey, setOpenAiKey] = useState(apiKeys.openai || "");
-  const [googleKey, setGoogleKey] = useState(apiKeys.google || "");
-  const [openRouterKey, setOpenRouterKey] = useState(apiKeys.openrouter || "");
-  const [authToken, setAuthToken] = useState(auth.token || "");
+  const [modelProvider, setModelProvider] = useState(configModel.provider);
+  const [modelId, setModelId] = useState(configModel.id);
+  const [anthropicKey, setAnthropicKey] = useState(String(apiKeys.anthropic || ""));
+  const [openAiKey, setOpenAiKey] = useState(String(apiKeys.openai || ""));
+  const [googleKey, setGoogleKey] = useState(String(apiKeys.google || ""));
+  const [openRouterKey, setOpenRouterKey] = useState(String(apiKeys.openrouter || ""));
+  const [authToken, setAuthToken] = useState(String(auth.token || ""));
   const [allowFromText, setAllowFromText] = useState(
-    (whatsapp.allowFrom || []).join("\n"),
+    (Array.isArray(whatsapp.allowFrom) ? whatsapp.allowFrom : []).map(String).join("\n"),
   );
-  const [heartbeatEvery, setHeartbeatEvery] = useState(heartbeat.every || "");
+  const [heartbeatEvery, setHeartbeatEvery] = useState(String(heartbeat.every || ""));
   const [newIdentityName, setNewIdentityName] = useState("");
   const [newIdentityValues, setNewIdentityValues] = useState("");
 
+  // ── Sync local state from config/settings changes ──
   useEffect(() => {
     setGatewayUrl(settings.gatewayUrl);
     setSessionKey(settings.sessionKey);
   }, [settings.gatewayUrl, settings.sessionKey]);
 
   useEffect(() => {
-    setModelProvider(model.provider);
-    setModelId(model.id);
-  }, [model.provider, model.id]);
+    setModelProvider(configModel.provider);
+    setModelId(configModel.id);
+  }, [configModel.provider, configModel.id]);
 
   useEffect(() => {
-    setAnthropicKey(apiKeys.anthropic || "");
-    setOpenAiKey(apiKeys.openai || "");
-    setGoogleKey(apiKeys.google || "");
-    setOpenRouterKey(apiKeys.openrouter || "");
+    setAnthropicKey(String(apiKeys.anthropic || ""));
+    setOpenAiKey(String(apiKeys.openai || ""));
+    setGoogleKey(String(apiKeys.google || ""));
+    setOpenRouterKey(String(apiKeys.openrouter || ""));
   }, [apiKeys.anthropic, apiKeys.google, apiKeys.openai, apiKeys.openrouter]);
 
   useEffect(() => {
-    setAuthToken(auth.token || "");
+    setAuthToken(String(auth.token || ""));
   }, [auth.token]);
 
   const allowFromValue = useMemo(
-    () => (whatsapp.allowFrom || []).join("\n"),
+    () => (Array.isArray(whatsapp.allowFrom) ? whatsapp.allowFrom : []).map(String).join("\n"),
     [whatsapp.allowFrom],
   );
   useEffect(() => {
@@ -117,12 +134,13 @@ export function ConfigView() {
   }, [allowFromValue]);
 
   useEffect(() => {
-    setHeartbeatEvery(heartbeat.every || "");
+    setHeartbeatEvery(String(heartbeat.every || ""));
   }, [heartbeat.every]);
 
-  const modelValue = `${model.provider}/${model.id}`;
-  const modelHasQuickSelect = MODEL_OPTIONS.some(
-    (option) => `${option.provider}/${option.id}` === modelValue,
+  // ── Model Select: derive from local state to avoid re-render loops ──
+  const localModelValue = `${modelProvider}/${modelId}`;
+  const localModelHasQuickSelect = MODEL_OPTIONS.some(
+    (option) => `${option.provider}/${option.id}` === localModelValue,
   );
 
   const commitModel = () => {
@@ -221,7 +239,7 @@ export function ConfigView() {
             <Select<string>
               label="Quick Select"
               hideLabel={false}
-              value={modelHasQuickSelect ? modelValue : ""}
+              value={localModelHasQuickSelect ? localModelValue : ""}
               onValueChange={(value) => {
                 const selected = String(value || "").trim();
                 if (!selected.includes("/")) {
@@ -232,7 +250,6 @@ export function ConfigView() {
                 setModelId(id);
                 void saveConfig("model", { provider, id });
               }}
-              placeholder="Select a common model"
             >
               <Select.Option value="">Custom model</Select.Option>
               {MODEL_OPTIONS.map((option) => (
@@ -254,7 +271,7 @@ export function ConfigView() {
               value={modelProvider}
               onChange={(event) => setModelProvider(event.target.value)}
               onBlur={commitModel}
-              description={`Current: ${model.provider}`}
+              description={`Current: ${configModel.provider}`}
             />
           </div>
 
@@ -266,7 +283,7 @@ export function ConfigView() {
               value={modelId}
               onChange={(event) => setModelId(event.target.value)}
               onBlur={commitModel}
-              description={`Current: ${model.id}`}
+              description={`Current: ${configModel.id}`}
             />
           </div>
         </div>
@@ -418,7 +435,7 @@ export function ConfigView() {
             <Select<string>
               label="DM Access Policy"
               hideLabel={false}
-              value={whatsapp.dmPolicy || "pairing"}
+              value={String(whatsapp.dmPolicy || "pairing")}
               onValueChange={(value) =>
                 void saveConfig("channels.whatsapp.dmPolicy", String(value))
               }
@@ -498,7 +515,7 @@ export function ConfigView() {
                     </Button>
                   </div>
                   <code className="mono" style={{ fontSize: "var(--font-size-xs)" }}>
-                    {(ids || []).join(", ")}
+                    {(Array.isArray(ids) ? ids : []).map(String).join(", ")}
                   </code>
                 </div>
               </Surface>
@@ -578,7 +595,7 @@ export function ConfigView() {
           <Select<string>
             label="Delivery Target"
             hideLabel={false}
-            value={heartbeat.target || "last"}
+            value={String(heartbeat.target || "last")}
             onValueChange={(value) =>
               void saveConfig("agents.defaultHeartbeat.target", String(value))
             }
@@ -597,7 +614,7 @@ export function ConfigView() {
           <details>
             <summary style={{ cursor: "pointer" }}>View raw JSON</summary>
             <pre style={{ marginTop: "var(--space-3)", maxHeight: 420, overflow: "auto" }}>
-              <code>{JSON.stringify(config || {}, null, 2)}</code>
+              <code>{JSON.stringify(config, null, 2)}</code>
             </pre>
           </details>
         </div>
diff --git a/gateway/ui/src/react/views/SettingsView.tsx b/gateway/ui/src/react/views/SettingsView.tsx
index 88f19ac..6b38ee6 100644
--- a/gateway/ui/src/react/views/SettingsView.tsx
+++ b/gateway/ui/src/react/views/SettingsView.tsx
@@ -1,18 +1,66 @@
 import { useState } from "react";
+import { WALLPAPER_OPTIONS, type Wallpaper } from "../../ui/storage";
+import { useReactUiStore } from "../state/store";
 import { PairingView } from "./PairingView";
 import { ConfigView } from "./ConfigView";
 import { DebugView } from "./DebugView";
 
-type SettingsTab = "pairing" | "config" | "debug";
+type SettingsTab = "display" | "pairing" | "config" | "debug";
 
 const SETTINGS_TABS: { id: SettingsTab; label: string }[] = [
+  { id: "display", label: "Display" },
   { id: "pairing", label: "Pairing" },
   { id: "config", label: "Config" },
   { id: "debug", label: "Debug" },
 ];
 
+function DisplaySettings() {
+  const settings = useReactUiStore((s) => s.settings);
+  const updateSettings = useReactUiStore((s) => s.updateSettings);
+  const currentWallpaper = settings.wallpaper ?? "starfield";
+
+  return (
+    <div className="settings-display">
+      <h3 className="settings-section-title">Wallpaper</h3>
+      <p className="settings-section-desc">
+        Choose a desktop background. You can also right-click the desktop to change wallpaper.
+      </p>
+      <div className="settings-wallpaper-grid">
+        {WALLPAPER_OPTIONS.map((opt) => (
+          <button
+            key={opt.id}
+            type="button"
+            className={`settings-wallpaper-card ${opt.id === currentWallpaper ? "active" : ""}`}
+            onClick={() => updateSettings({ wallpaper: opt.id })}
+          >
+            <div className={`settings-wallpaper-preview os-wp-${opt.id}`} />
+            <div className="settings-wallpaper-info">
+              <span className="settings-wallpaper-name">{opt.label}</span>
+              <span className="settings-wallpaper-desc">{opt.description}</span>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      <h3 className="settings-section-title" style={{ marginTop: "1.5rem" }}>Theme</h3>
+      <div className="settings-theme-row">
+        {(["dark", "light", "system"] as const).map((theme) => (
+          <button
+            key={theme}
+            type="button"
+            className={`settings-theme-btn ${settings.theme === theme ? "active" : ""}`}
+            onClick={() => updateSettings({ theme })}
+          >
+            {theme.charAt(0).toUpperCase() + theme.slice(1)}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export function SettingsView() {
-  const [activeTab, setActiveTab] = useState<SettingsTab>("config");
+  const [activeTab, setActiveTab] = useState<SettingsTab>("display");
 
   return (
     <div className="view-container">
@@ -28,6 +76,7 @@ export function SettingsView() {
           </button>
         ))}
       </div>
+      {activeTab === "display" && <DisplaySettings />}
       {activeTab === "pairing" && <PairingView />}
       {activeTab === "config" && <ConfigView />}
       {activeTab === "debug" && <DebugView />}
diff --git a/gateway/ui/src/styles/base.css b/gateway/ui/src/styles/base.css
index e15eca4..d841302 100644
--- a/gateway/ui/src/styles/base.css
+++ b/gateway/ui/src/styles/base.css
@@ -50,8 +50,32 @@
   --border-muted: rgba(255, 255, 255, 0.05);
   --accent-primary: var(--accent);
 
-  --nav-width: 0;       /* unused - kept for compat */
-  --topbar-height: 0;   /* unused - kept for compat */
+}
+
+/* ── Light Theme Tokens ── */
+[data-theme="light"] {
+  --bg-base: #f0f0f2;
+  --glass-bg: rgba(0, 0, 0, 0.03);
+  --glass-border: rgba(0, 0, 0, 0.1);
+  --glass-border-active: rgba(0, 0, 0, 0.18);
+  --glass-shadow: 0 30px 60px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+
+  --text-main: #1a1a1e;
+  --text-muted: #6b6b76;
+  --text-dim: #a0a0ab;
+
+  --accent: #2563eb;
+  --accent-glow: rgba(37, 99, 235, 0.3);
+
+  --bg-primary: var(--bg-base);
+  --bg-secondary: rgba(0, 0, 0, 0.03);
+  --bg-tertiary: rgba(0, 0, 0, 0.05);
+  --bg-hover: rgba(0, 0, 0, 0.06);
+  --text-primary: var(--text-main);
+  --text-secondary: #52525b;
+  --border-default: var(--glass-border);
+  --border-muted: rgba(0, 0, 0, 0.06);
+  --accent-primary: var(--accent);
 }
 
 /* ── Reset ── */
@@ -97,11 +121,21 @@ pre {
 }
 pre code { background: none; padding: 0; }
 
+/* ── Light theme element overrides ── */
+[data-theme="light"] code {
+  background: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] pre {
+  background: rgba(0, 0, 0, 0.04);
+}
+
 /* ── Scrollbars ── */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
+[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); }
+[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }
 
 /* ── Utilities ── */
 .muted { color: var(--text-muted); }
diff --git a/gateway/ui/src/styles/chat.css b/gateway/ui/src/styles/chat.css
index a521096..f9fb1d6 100644
--- a/gateway/ui/src/styles/chat.css
+++ b/gateway/ui/src/styles/chat.css
@@ -257,6 +257,41 @@
 .chat-empty-title { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: var(--space-2); }
 .chat-empty-description { color: var(--text-muted); max-width: 400px; }
 
+/* ── Light Theme Overrides ── */
+[data-theme="light"] .session-bar {
+  background: rgba(0, 0, 0, 0.02);
+}
+[data-theme="light"] .message.assistant .message-bubble {
+  background: rgba(0, 0, 0, 0.04);
+}
+[data-theme="light"] .message.user .message-content code {
+  background: rgba(255, 255, 255, 0.25);
+}
+[data-theme="light"] .message.user .message-content pre {
+  background: rgba(255, 255, 255, 0.18);
+}
+[data-theme="light"] .thinking-block {
+  background: rgba(0, 0, 0, 0.02);
+}
+[data-theme="light"] .tool-call {
+  background: rgba(0, 0, 0, 0.02);
+}
+[data-theme="light"] .tool-call-header {
+  background: rgba(0, 0, 0, 0.02);
+}
+[data-theme="light"] .tool-result-json {
+  background: rgba(0, 0, 0, 0.03);
+}
+[data-theme="light"] .chat-input-area {
+  background: rgba(0, 0, 0, 0.03);
+}
+[data-theme="light"] .chat-input {
+  background: rgba(0, 0, 0, 0.04);
+}
+[data-theme="light"] .chat-input:focus {
+  background: rgba(0, 0, 0, 0.06);
+}
+
 /* ── Responsive ── */
 @media (max-width: 720px) {
   .chat-messages { padding: var(--space-3); gap: var(--space-3); }
diff --git a/gateway/ui/src/styles/components.css b/gateway/ui/src/styles/components.css
index 7259986..4e7ed39 100644
--- a/gateway/ui/src/styles/components.css
+++ b/gateway/ui/src/styles/components.css
@@ -251,3 +251,59 @@ textarea.ui-input-fix { border-radius: var(--radius-md) !important; }
   font-size: var(--font-size-sm);
   color: var(--text-muted);
 }
+
+/* ── Light Theme Overrides ── */
+[data-theme="light"] .btn {
+  background: rgba(0, 0, 0, 0.04);
+}
+[data-theme="light"] .btn-secondary {
+  background: rgba(0, 0, 0, 0.04);
+}
+[data-theme="light"] .btn-secondary:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.08);
+}
+[data-theme="light"] .btn-ghost:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.05);
+}
+[data-theme="light"] .btn-danger {
+  background: rgba(239, 68, 68, 0.08);
+  border-color: rgba(239, 68, 68, 0.2);
+}
+[data-theme="light"] .card-header {
+  background: rgba(0, 0, 0, 0.02);
+}
+[data-theme="light"] .card-footer {
+  background: rgba(0, 0, 0, 0.02);
+}
+[data-theme="light"] .form-input,
+[data-theme="light"] .form-select,
+[data-theme="light"] .form-textarea {
+  background: rgba(0, 0, 0, 0.03);
+}
+[data-theme="light"] .form-input:focus,
+[data-theme="light"] .form-select:focus,
+[data-theme="light"] .form-textarea:focus {
+  background: rgba(0, 0, 0, 0.05);
+}
+[data-theme="light"] .pill {
+  background: rgba(0, 0, 0, 0.05);
+}
+[data-theme="light"] .table tr:hover td {
+  background: rgba(0, 0, 0, 0.02);
+}
+[data-theme="light"] .spinner {
+  border-color: rgba(0, 0, 0, 0.1);
+  border-top-color: var(--accent);
+}
+[data-theme="light"] .logs-output {
+  background: rgba(0, 0, 0, 0.03);
+}
+[data-theme="light"] .tab:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+[data-theme="light"] .nav-item:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+[data-theme="light"] .nav-item.active {
+  background: rgba(37, 99, 235, 0.08);
+}
diff --git a/gateway/ui/src/styles/layout.css b/gateway/ui/src/styles/layout.css
index 15b26f3..2ba807e 100644
--- a/gateway/ui/src/styles/layout.css
+++ b/gateway/ui/src/styles/layout.css
@@ -134,6 +134,20 @@
   font-size: var(--font-size-sm);
 }
 
+/* ── Light Theme Overrides ── */
+[data-theme="light"] .workspace-editor {
+  background: rgba(0, 0, 0, 0.03);
+}
+[data-theme="light"] .connect-screen {
+  background: rgba(255, 255, 255, 0.4);
+}
+[data-theme="light"] .connect-header h1 {
+  background: linear-gradient(135deg, #1a1a1e 0%, #52525b 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
 /* ── Responsive ── */
 @media (max-width: 720px) {
   .workspace-layout {
diff --git a/gateway/ui/src/styles/os-shell.css b/gateway/ui/src/styles/os-shell.css
index e788c68..53426e5 100644
--- a/gateway/ui/src/styles/os-shell.css
+++ b/gateway/ui/src/styles/os-shell.css
@@ -14,46 +14,196 @@
   -webkit-font-smoothing: antialiased;
 }
 
-/* ── Ambient Orb Background ── */
-.os-ambient {
+/* ── Wallpaper Background ── */
+.os-wallpaper {
   position: absolute;
   inset: 0;
   z-index: 0;
-  background: #0f0f13;
   overflow: hidden;
 }
 
-.os-orb {
+/* Starfield: deep dark space, stars rendered via canvas */
+.os-wp-starfield {
+  background: radial-gradient(ellipse at 50% 40%, #0c0c18 0%, #050508 60%, #000 100%);
+}
+
+/* Mesh gradient: smooth multi-color gradient, slow shift */
+.os-wp-mesh {
+  background: #0a0a10;
+}
+.os-wp-mesh::before,
+.os-wp-mesh::after {
+  content: "";
   position: absolute;
   border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.6;
-  animation: os-orb-float 20s infinite ease-in-out alternate;
-  will-change: transform;
+  filter: blur(90px);
+  opacity: 0.75;
+  animation: os-mesh-drift 30s infinite ease-in-out alternate;
 }
-.os-orb-1 {
-  width: 60vw; height: 60vw;
-  background: radial-gradient(circle, #4f46e5 0%, transparent 70%);
-  top: -20vw; left: -10vw;
+.os-wp-mesh::before {
+  width: 55vw; height: 55vw;
+  background: radial-gradient(circle, hsl(240 70% 38%) 0%, transparent 70%);
+  top: -15vw; left: -5vw;
 }
-.os-orb-2 {
+.os-wp-mesh::after {
   width: 50vw; height: 50vw;
-  background: radial-gradient(circle, #db2777 0%, transparent 70%);
-  bottom: -10vw; right: -10vw;
-  animation-delay: -5s;
+  background: radial-gradient(circle, hsl(280 60% 32%) 0%, transparent 70%);
+  bottom: -10vw; right: -5vw;
+  animation-delay: -12s;
 }
-.os-orb-3 {
-  width: 40vw; height: 40vw;
-  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
-  top: 20vh; left: 40vw;
-  animation-delay: -10s;
+@keyframes os-mesh-drift {
+  0%   { transform: translate(0, 0) scale(1); }
+  50%  { transform: translate(3vw, 4vh) scale(1.05); }
+  100% { transform: translate(-2vw, -3vh) scale(0.97); }
 }
 
-@keyframes os-orb-float {
-  0%   { transform: translate(0, 0) scale(1); }
-  33%  { transform: translate(5vw, 5vh) scale(1.1); }
-  66%  { transform: translate(-5vw, 10vh) scale(0.9); }
-  100% { transform: translate(0, 0) scale(1); }
+/* Aurora: horizontal flowing color bands */
+.os-wp-aurora {
+  background: #050510;
+}
+.os-wp-aurora::before {
+  content: "";
+  position: absolute;
+  top: 10%; left: -20%;
+  width: 140%; height: 50%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(34, 197, 94, 0.35) 20%,
+    rgba(6, 182, 212, 0.4) 40%,
+    rgba(79, 70, 229, 0.35) 60%,
+    rgba(34, 197, 94, 0.3) 80%,
+    transparent 100%
+  );
+  filter: blur(50px);
+  animation: os-aurora-wave 20s infinite ease-in-out alternate;
+}
+.os-wp-aurora::after {
+  content: "";
+  position: absolute;
+  top: 30%; left: -10%;
+  width: 120%; height: 30%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(6, 182, 212, 0.25) 30%,
+    rgba(168, 85, 247, 0.2) 60%,
+    transparent 100%
+  );
+  filter: blur(60px);
+  animation: os-aurora-wave 25s infinite ease-in-out alternate-reverse;
+}
+@keyframes os-aurora-wave {
+  0%   { transform: translateX(-5vw) scaleY(1); }
+  50%  { transform: translateX(5vw) scaleY(1.3); }
+  100% { transform: translateX(-3vw) scaleY(0.9); }
+}
+
+/* Dark grain: near-black with subtle noise texture */
+.os-wp-dark-grain {
+  background: #0a0a0c;
+}
+.os-wp-dark-grain::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 256px 256px;
+  opacity: 1;
+}
+.os-wp-dark-grain::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 70%);
+}
+
+/* Grid: faint dot matrix */
+.os-wp-grid {
+  background: #08080c;
+}
+.os-wp-grid::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: radial-gradient(ellipse at 50% 50%, black 40%, transparent 80%);
+  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 40%, transparent 80%);
+}
+.os-wp-grid::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at 50% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 60%);
+}
+
+/* ── Right-click Context Menu ── */
+.os-ctx-menu {
+  position: fixed;
+  z-index: 300;
+  min-width: 200px;
+  background: rgba(20, 20, 26, 0.88);
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius-md);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
+  padding: 6px;
+  animation: os-ctx-in 0.15s ease-out;
+}
+@keyframes os-ctx-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.os-ctx-menu-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-dim);
+  padding: 6px 10px 4px;
+}
+
+.os-ctx-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 10px;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: transparent;
+  color: var(--text-main);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+  transition: background 0.1s;
+}
+.os-ctx-menu-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+.os-ctx-menu-item.active {
+  color: var(--accent);
+}
+.os-ctx-menu-item.active::after {
+  content: "";
+  margin-left: auto;
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+/* Tiny preview swatch in the context menu */
+.os-ctx-menu-preview {
+  width: 24px; height: 24px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 /* ── Status Bar (top, 32px, minimal) ── */
@@ -269,6 +419,64 @@
 .os-window-content .chat-container { min-height: 100%; height: 100%; padding: 0; }
 .os-window-content .workspace-layout { min-height: 100%; }
 
+/* Iframe windows (webview / media surfaces) */
+.os-window-iframe-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.os-window-iframe {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+}
+.os-window-iframe-fallback {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background: rgba(15, 15, 20, 0.95);
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+}
+.os-window-iframe-fallback span {
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+}
+.os-window-iframe-fallback a {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 12px;
+  text-decoration: none;
+  transition: background 0.2s, color 0.2s;
+}
+.os-window-iframe-fallback a:hover {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+}
+.os-window-content:has(.os-window-iframe-wrap) {
+  padding: 0;
+  overflow: hidden;
+}
+/* Disable iframe pointer events during drag/resize to prevent capture */
+body.os-dragging .os-window-iframe {
+  pointer-events: none;
+}
+
 /* ── Resize Handles ── */
 .os-resize-handle { position: absolute; z-index: 5; }
 .os-resize-handle.n  { top: 0; left: 8px; right: 8px; height: 6px; cursor: n-resize; }
@@ -396,6 +604,15 @@
   box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
 }
 
+/* ── Dock separator (divides static app icons from dynamic surface windows) ── */
+.os-dock-separator {
+  width: 1px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.15);
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+
 /* ── Launcher / Command Palette Overlay ── */
 .os-launcher-overlay {
   position: fixed;
@@ -512,6 +729,328 @@ body.os-dragging * {
   cursor: grabbing !important;
 }
 
+/* ── Settings Display Tab ── */
+.settings-display {
+  padding: 8px 0;
+}
+.settings-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-main);
+  margin: 0 0 4px;
+}
+.settings-section-desc {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin: 0 0 12px;
+}
+.settings-wallpaper-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 10px;
+}
+.settings-wallpaper-card {
+  all: unset;
+  cursor: pointer;
+  border-radius: 10px;
+  border: 2px solid transparent;
+  overflow: hidden;
+  background: var(--glass-bg, rgba(255, 255, 255, 0.04));
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.settings-wallpaper-card:hover {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+.settings-wallpaper-card.active {
+  border-color: var(--accent-primary, hsl(191 95% 58%));
+  box-shadow: 0 0 0 1px var(--accent-primary, hsl(191 95% 58%));
+}
+.settings-wallpaper-preview {
+  width: 100%;
+  height: 80px;
+  position: relative;
+  overflow: hidden;
+}
+.settings-wallpaper-info {
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.settings-wallpaper-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-main);
+}
+.settings-wallpaper-desc {
+  font-size: 11px;
+  color: var(--text-dim);
+}
+.settings-theme-row {
+  display: flex;
+  gap: 8px;
+}
+.settings-theme-btn {
+  all: unset;
+  cursor: pointer;
+  padding: 6px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: var(--glass-bg, rgba(255, 255, 255, 0.04));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+.settings-theme-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-main);
+}
+.settings-theme-btn.active {
+  background: var(--accent-primary, hsl(191 95% 58%));
+  color: #000;
+  border-color: var(--accent-primary, hsl(191 95% 58%));
+}
+
+/* ═══════════════════════════════════════════
+   Light Theme Overrides
+   Glassmorphism with darker overlays on light backgrounds.
+   Applied when <html data-theme="light">.
+   ═══════════════════════════════════════════ */
+
+/* ── Status Bar ── */
+[data-theme="light"] .os-statusbar {
+  background: rgba(255, 255, 255, 0.55);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  color: #1a1a1e;
+}
+[data-theme="light"] .os-statusbar-label {
+  color: #52525b;
+}
+[data-theme="light"] .os-statusbar-btn {
+  color: #52525b;
+}
+[data-theme="light"] .os-statusbar-btn:hover {
+  color: #1a1a1e;
+  background: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .os-statusbar-clock {
+  color: #3f3f46;
+}
+
+/* ── Windows ── */
+[data-theme="light"] .os-window {
+  background: rgba(255, 255, 255, 0.62);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 25px 60px rgba(0, 0, 0, 0.12),
+    0 8px 20px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+[data-theme="light"] .os-window.focused {
+  border-color: rgba(0, 0, 0, 0.15);
+  box-shadow:
+    0 30px 70px rgba(0, 0, 0, 0.15),
+    0 10px 24px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+/* ── Window Title Bar ── */
+[data-theme="light"] .os-window-titlebar {
+  background: rgba(0, 0, 0, 0.02);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .os-window-title-label {
+  color: #6b6b76;
+}
+[data-theme="light"] .os-window.focused .os-window-title-label {
+  color: #3f3f46;
+}
+
+/* Unfocused traffic lights: use dark-tinted dots */
+[data-theme="light"] .os-window:not(.focused) .os-window-action {
+  background: rgba(0, 0, 0, 0.1) !important;
+}
+[data-theme="light"] .os-window:not(.focused):hover .os-window-action.close    { background: #ff5f56 !important; }
+[data-theme="light"] .os-window:not(.focused):hover .os-window-action.minimize { background: #ffbd2e !important; }
+[data-theme="light"] .os-window:not(.focused):hover .os-window-action.maximize { background: #27c93f !important; }
+
+/* ── Window Content ── */
+[data-theme="light"] .os-window-content {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+/* ── Iframe fallback ── */
+[data-theme="light"] .os-window-iframe-fallback {
+  background: rgba(245, 245, 248, 0.95);
+  color: rgba(0, 0, 0, 0.5);
+}
+[data-theme="light"] .os-window-iframe-fallback span {
+  color: rgba(0, 0, 0, 0.7);
+}
+[data-theme="light"] .os-window-iframe-fallback a {
+  background: rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.7);
+}
+[data-theme="light"] .os-window-iframe-fallback a:hover {
+  background: rgba(0, 0, 0, 0.1);
+  color: #1a1a1e;
+}
+
+/* ── Snap Preview ── */
+[data-theme="light"] .os-snap-preview {
+  background: rgba(0, 0, 0, 0.04);
+  border: 2px dashed rgba(0, 0, 0, 0.15);
+}
+
+/* ── Dock ── */
+[data-theme="light"] .os-dock {
+  background: rgba(255, 255, 255, 0.55);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 20px 40px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+[data-theme="light"] .os-dock-item {
+  color: rgba(0, 0, 0, 0.5);
+}
+[data-theme="light"] .os-dock-item:hover {
+  color: #1a1a1e;
+  background: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .os-dock-item.open {
+  color: #1a1a1e;
+}
+[data-theme="light"] .os-dock-item.focused {
+  color: #1a1a1e;
+}
+[data-theme="light"] .os-dock-item.open::after {
+  background: rgba(0, 0, 0, 0.3);
+}
+[data-theme="light"] .os-dock-item.focused::after {
+  background: #1a1a1e;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+}
+[data-theme="light"] .os-dock-separator {
+  background: rgba(0, 0, 0, 0.12);
+}
+
+/* ── Desktop Empty State ── */
+[data-theme="light"] .os-desktop-empty kbd {
+  background: rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* ── Context Menu ── */
+[data-theme="light"] .os-ctx-menu {
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+}
+[data-theme="light"] .os-ctx-menu-item:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+[data-theme="light"] .os-ctx-menu-preview {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* ── Launcher / Command Palette ── */
+[data-theme="light"] .os-launcher-overlay {
+  background: rgba(255, 255, 255, 0.3);
+}
+[data-theme="light"] .os-launcher {
+  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+[data-theme="light"] .os-launcher-search input {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  color: #1a1a1e;
+}
+[data-theme="light"] .os-launcher-item:hover,
+[data-theme="light"] .os-launcher-item.active {
+  background: rgba(0, 0, 0, 0.05);
+}
+[data-theme="light"] .os-launcher-item.active {
+  outline: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* ── Settings Theme Buttons ── */
+[data-theme="light"] .settings-theme-btn {
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+[data-theme="light"] .settings-theme-btn:hover {
+  background: rgba(0, 0, 0, 0.07);
+}
+[data-theme="light"] .settings-theme-btn.active {
+  background: var(--accent-primary, hsl(191 95% 58%));
+  color: #fff;
+  border-color: var(--accent-primary, hsl(191 95% 58%));
+}
+
+/* ── Light-theme Wallpaper overrides ── */
+[data-theme="light"] .os-wp-starfield {
+  background: radial-gradient(ellipse at 50% 40%, #dde0ea 0%, #c8cdd8 60%, #b8bece 100%);
+}
+[data-theme="light"] .os-wp-mesh {
+  background: #dce0ea;
+}
+[data-theme="light"] .os-wp-mesh::before {
+  background: radial-gradient(circle, hsl(240 60% 68%) 0%, transparent 70%);
+}
+[data-theme="light"] .os-wp-mesh::after {
+  background: radial-gradient(circle, hsl(280 50% 70%) 0%, transparent 70%);
+}
+[data-theme="light"] .os-wp-aurora {
+  background: #dce2ee;
+}
+[data-theme="light"] .os-wp-aurora::before {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(34, 197, 94, 0.35) 20%,
+    rgba(6, 182, 212, 0.4) 40%,
+    rgba(79, 70, 229, 0.35) 60%,
+    rgba(34, 197, 94, 0.3) 80%,
+    transparent 100%
+  );
+}
+[data-theme="light"] .os-wp-aurora::after {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(6, 182, 212, 0.25) 30%,
+    rgba(168, 85, 247, 0.2) 60%,
+    transparent 100%
+  );
+}
+[data-theme="light"] .os-wp-dark-grain {
+  background: #e2e2e6;
+}
+[data-theme="light"] .os-wp-dark-grain::after {
+  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.06) 0%, transparent 70%);
+}
+[data-theme="light"] .os-wp-grid {
+  background: #dce0ea;
+}
+[data-theme="light"] .os-wp-grid::before {
+  background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px);
+}
+[data-theme="light"] .os-wp-grid::after {
+  background: radial-gradient(ellipse at 50% 40%, rgba(59, 130, 246, 0.12) 0%, transparent 60%);
+}
+
+/* ── Settings Wallpaper Cards ── */
+[data-theme="light"] .settings-wallpaper-card {
+  background: rgba(0, 0, 0, 0.03);
+}
+[data-theme="light"] .settings-wallpaper-card:hover {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
 /* ── Reduced motion ── */
 @media (prefers-reduced-motion: reduce) {
   .os-orb,
diff --git a/gateway/ui/src/ui/gateway-client.ts b/gateway/ui/src/ui/gateway-client.ts
index 71ea064..8ef5924 100644
--- a/gateway/ui/src/ui/gateway-client.ts
+++ b/gateway/ui/src/ui/gateway-client.ts
@@ -372,4 +372,41 @@ export class GatewayClient {
   async pairReject(channel: string, senderId: string): Promise<ResponseFrame> {
     return this.request("pair.reject", { channel, senderId });
   }
+
+  // ---- Surfaces ----
+
+  async surfaceOpen(params: {
+    kind: string;
+    contentRef: string;
+    label?: string;
+    contentData?: unknown;
+    targetClientId?: string;
+    state?: string;
+    rect?: { x: number; y: number; width: number; height: number };
+  }): Promise<ResponseFrame> {
+    return this.request("surface.open", params);
+  }
+
+  async surfaceClose(surfaceId: string): Promise<ResponseFrame> {
+    return this.request("surface.close", { surfaceId });
+  }
+
+  async surfaceUpdate(params: {
+    surfaceId: string;
+    state?: string;
+    rect?: { x: number; y: number; width: number; height: number };
+    label?: string;
+    zIndex?: number;
+    contentData?: unknown;
+  }): Promise<ResponseFrame> {
+    return this.request("surface.update", params);
+  }
+
+  async surfaceFocus(surfaceId: string): Promise<ResponseFrame> {
+    return this.request("surface.focus", { surfaceId });
+  }
+
+  async surfaceList(targetClientId?: string): Promise<ResponseFrame> {
+    return this.request("surface.list", targetClientId ? { targetClientId } : undefined);
+  }
 }
diff --git a/gateway/ui/src/ui/storage.ts b/gateway/ui/src/ui/storage.ts
index 1ac5791..df2270f 100644
--- a/gateway/ui/src/ui/storage.ts
+++ b/gateway/ui/src/ui/storage.ts
@@ -2,11 +2,22 @@
  * Local Storage for UI Settings
  */
 
+export type Wallpaper = "starfield" | "mesh" | "aurora" | "dark-grain" | "grid";
+
+export const WALLPAPER_OPTIONS: { id: Wallpaper; label: string; description: string }[] = [
+  { id: "starfield", label: "Starfield", description: "Drifting stars on deep space" },
+  { id: "mesh", label: "Mesh Gradient", description: "Smooth shifting color gradient" },
+  { id: "aurora", label: "Aurora", description: "Flowing bands of polar light" },
+  { id: "dark-grain", label: "Dark Grain", description: "Near-black with subtle noise" },
+  { id: "grid", label: "Grid", description: "Faint geometric dot matrix" },
+];
+
 export type UiSettings = {
   gatewayUrl: string;
   token: string;
   sessionKey: string;
   theme: "dark" | "light" | "system";
+  wallpaper: Wallpaper;
 };
 
 const STORAGE_KEY = "gsv-ui-settings";
@@ -27,6 +38,7 @@ const DEFAULT_SETTINGS: UiSettings = {
   token: "",
   sessionKey: "agent:main:web:dm:local",
   theme: "dark",
+  wallpaper: "starfield",
 };
 
 /**
diff --git a/gateway/ui/src/ui/types.ts b/gateway/ui/src/ui/types.ts
index 5806e9f..f9c4c4c 100644
--- a/gateway/ui/src/ui/types.ts
+++ b/gateway/ui/src/ui/types.ts
@@ -35,6 +35,31 @@ export type ErrorShape = {
   retryable?: boolean;
 };
 
+// Surface protocol types
+export type SurfaceKind = "app" | "media" | "component" | "webview";
+export type SurfaceState = "open" | "minimized" | "closed";
+export type SurfaceRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+export type Surface = {
+  surfaceId: string;
+  kind: SurfaceKind;
+  label: string;
+  contentRef: string;
+  contentData?: unknown;
+  targetClientId: string;
+  sourceClientId?: string;
+  sourceSessionKey?: string;
+  state: SurfaceState;
+  rect?: SurfaceRect;
+  zIndex?: number;
+  createdAt: number;
+  updatedAt: number;
+};
+
 // Tool types
 export type ToolDefinition = {
   name: string;

From d82a52486a10041460021dcf184b7244dd7475b2 Mon Sep 17 00:00:00 2001
From: Steve James <sjames@cloudflare.com>
Date: Thu, 26 Feb 2026 09:26:52 +0100
Subject: [PATCH 5/6] display server

---
 cli/Cargo.toml                                |   2 +-
 cli/src/display.rs                            | 315 ++++++++++-
 cli/src/main.rs                               | 517 +++++++++++++++++-
 cli/src/protocol.rs                           |  55 ++
 gateway/src/agents/tools/constants.ts         |   4 +-
 gateway/src/agents/tools/index.ts             |   4 +-
 gateway/src/agents/tools/surface.ts           | 262 ++++-----
 gateway/src/agents/tools/types.ts             |   4 +-
 gateway/src/gateway/do.ts                     | 226 +++++++-
 gateway/src/gateway/rpc-handlers/connect.ts   |   5 +
 gateway/src/gateway/rpc-handlers/fs.ts        |  19 +
 gateway/src/gateway/rpc-handlers/index.ts     |   6 +
 gateway/src/gateway/rpc-handlers/surface.ts   | 123 +++++
 gateway/src/index.ts                          |  83 ++-
 gateway/src/protocol/fs.ts                    |  33 ++
 gateway/src/protocol/methods.ts               |  20 +-
 gateway/src/protocol/surface.ts               |  45 ++
 gateway/src/session/do.ts                     |   9 +
 gateway/ui/src/react/App.tsx                  |   2 +-
 gateway/ui/src/react/components/OsShell.tsx   |   6 +-
 gateway/ui/src/react/components/Wallpaper.tsx |  86 +--
 gateway/ui/src/react/state/store.ts           |   7 +-
 gateway/ui/src/react/views/ChatView.tsx       | 312 +++++------
 gateway/ui/src/react/views/SettingsView.tsx   |   2 +-
 gateway/ui/src/styles/chat.css                | 467 +++++++++-------
 gateway/ui/src/styles/os-shell.css            | 101 +++-
 gateway/ui/src/ui/gateway-client.ts           |  16 +-
 gateway/ui/src/ui/storage.ts                  |   5 +-
 28 files changed, 2088 insertions(+), 648 deletions(-)
 create mode 100644 gateway/src/gateway/rpc-handlers/fs.ts
 create mode 100644 gateway/src/protocol/fs.ts

diff --git a/cli/Cargo.toml b/cli/Cargo.toml
index 9fea8e1..40fdc3b 100644
--- a/cli/Cargo.toml
+++ b/cli/Cargo.toml
@@ -50,7 +50,7 @@ rustls_crate = { package = "rustls", version = "0.23", default-features = false,
 
 # Display feature: native webview windows for surface rendering
 tao = { version = "0.34", optional = true }
-wry = { version = "0.54", optional = true, default-features = false }
+wry = { version = "0.54", optional = true, default-features = false, features = ["fullscreen"] }
 url = { version = "2", optional = true }
 urlencoding = { version = "2", optional = true }
 
diff --git a/cli/src/display.rs b/cli/src/display.rs
index f704438..a1d0c13 100644
--- a/cli/src/display.rs
+++ b/cli/src/display.rs
@@ -8,8 +8,11 @@
 //!   Main thread:  tao EventLoop (blocks forever, manages windows)
 //!   Background:   tokio runtime (WebSocket connection, tool execution)
 //!   Communication: EventLoopProxy<DisplayEvent> (Send, thread-safe)
+//!                  + mpsc channel for eval results (main → tokio)
 
 use std::collections::HashMap;
+use std::path::PathBuf;
+use std::sync::mpsc;
 
 use tao::{
     dpi::LogicalSize,
@@ -17,7 +20,7 @@ use tao::{
     event_loop::{ControlFlow, EventLoop, EventLoopBuilder, EventLoopProxy, EventLoopWindowTarget},
     window::{Window, WindowBuilder, WindowId},
 };
-use wry::{WebView, WebViewBuilder};
+use wry::{WebContext, WebView, WebViewBuilder};
 
 // ── Display Events ──
 
@@ -29,6 +32,9 @@ pub enum DisplayEvent {
         surface_id: String,
         url: String,
         label: String,
+        /// Browser profile ID (derived from URL origin). When set,
+        /// wry uses a persistent data directory for this profile.
+        profile_id: Option<String>,
     },
     /// Close an existing surface window.
     CloseSurface { surface_id: String },
@@ -37,10 +43,29 @@ pub enum DisplayEvent {
         surface_id: String,
         label: Option<String>,
     },
+    /// Execute JavaScript in a webview surface and return the result via IPC.
+    EvalScript {
+        surface_id: String,
+        eval_id: String,
+        script: String,
+    },
     /// Shut down the display event loop.
     Shutdown,
 }
 
+// ── Eval Result (main thread → tokio) ──
+
+/// Result of a JavaScript eval, sent from the main thread IPC handler
+/// back to the tokio runtime for forwarding to the gateway.
+#[derive(Debug, Clone)]
+pub struct EvalResult {
+    pub eval_id: String,
+    pub surface_id: String,
+    pub ok: bool,
+    pub result: Option<String>,
+    pub error: Option<String>,
+}
+
 // ── Display Handle (async-safe sender) ──
 
 /// Cloneable handle for sending display events from any thread.
@@ -48,14 +73,24 @@ pub enum DisplayEvent {
 #[derive(Clone)]
 pub struct DisplayHandle {
     proxy: EventLoopProxy<DisplayEvent>,
+    /// Base directory for browser profile storage.
+    /// Profiles are stored in `{profile_dir}/{profile_id}/`.
+    pub profile_dir: PathBuf,
 }
 
 impl DisplayHandle {
-    pub fn open_surface(&self, surface_id: String, url: String, label: String) {
+    pub fn open_surface(
+        &self,
+        surface_id: String,
+        url: String,
+        label: String,
+        profile_id: Option<String>,
+    ) {
         let _ = self.proxy.send_event(DisplayEvent::OpenSurface {
             surface_id,
             url,
             label,
+            profile_id,
         });
     }
 
@@ -71,6 +106,14 @@ impl DisplayHandle {
             .send_event(DisplayEvent::UpdateSurface { surface_id, label });
     }
 
+    pub fn eval_script(&self, surface_id: String, eval_id: String, script: String) {
+        let _ = self.proxy.send_event(DisplayEvent::EvalScript {
+            surface_id,
+            eval_id,
+            script,
+        });
+    }
+
     pub fn shutdown(&self) {
         let _ = self.proxy.send_event(DisplayEvent::Shutdown);
     }
@@ -78,14 +121,31 @@ impl DisplayHandle {
 
 // ── Constructors ──
 
-/// Create the display event loop and return a handle for async communication.
+/// Create the display event loop and return a handle for async communication,
+/// plus a receiver for eval results flowing from the main thread back to tokio.
 /// Call this on the main thread before spawning the tokio runtime.
-pub fn create_display() -> (DisplayHandle, EventLoop<DisplayEvent>) {
+pub fn create_display(
+    profile_dir: PathBuf,
+) -> (
+    DisplayHandle,
+    EventLoop<DisplayEvent>,
+    mpsc::Receiver<EvalResult>,
+) {
     let event_loop = EventLoopBuilder::<DisplayEvent>::with_user_event().build();
     let proxy = event_loop.create_proxy();
-    (DisplayHandle { proxy }, event_loop)
+    let (eval_tx, eval_rx) = mpsc::channel();
+    // Store the eval sender in a thread-local so IPC handlers can access it.
+    // We pass it into run_display_loop instead.
+    EVAL_RESULT_SENDER.lock().unwrap().replace(eval_tx);
+    (DisplayHandle { proxy, profile_dir }, event_loop, eval_rx)
 }
 
+/// Global eval result sender. Set once by `create_display`, used by IPC handlers
+/// in webviews (which run on the main thread alongside the event loop).
+/// Using a Mutex<Option<>> because wry IPC closures need 'static + Fn.
+static EVAL_RESULT_SENDER: std::sync::Mutex<Option<mpsc::Sender<EvalResult>>> =
+    std::sync::Mutex::new(None);
+
 // ── URL Resolution ──
 
 /// Convert a WebSocket gateway URL to an HTTP URL for loading the web UI.
@@ -217,12 +277,15 @@ pub fn resolve_surface_url(ws_url: &str, kind: &str, content_ref: &str) -> Strin
 
 struct SurfaceWindow {
     window: Window,
-    _webview: WebView,
+    webview: WebView,
+    /// Browser profile context. Must outlive the WebView.
+    /// Drop order: webview drops first, then _web_context.
+    _web_context: Option<WebContext>,
 }
 
 /// Run the display event loop. **Blocks the calling thread forever.**
 /// Must be called on the main thread (macOS Cocoa requirement).
-pub fn run_display_loop(event_loop: EventLoop<DisplayEvent>) -> ! {
+pub fn run_display_loop(event_loop: EventLoop<DisplayEvent>, profile_dir: PathBuf) -> ! {
     let mut surfaces: HashMap<String, SurfaceWindow> = HashMap::new();
     let mut window_to_surface: HashMap<WindowId, String> = HashMap::new();
 
@@ -237,6 +300,7 @@ pub fn run_display_loop(event_loop: EventLoop<DisplayEvent>) -> ! {
                     &mut surfaces,
                     &mut window_to_surface,
                     control_flow,
+                    &profile_dir,
                 );
             }
             Event::WindowEvent {
@@ -260,12 +324,14 @@ fn handle_display_event(
     surfaces: &mut HashMap<String, SurfaceWindow>,
     window_to_surface: &mut HashMap<WindowId, String>,
     control_flow: &mut ControlFlow,
+    profile_dir: &PathBuf,
 ) {
     match event {
         DisplayEvent::OpenSurface {
             surface_id,
             url,
             label,
+            profile_id,
         } => {
             // Close existing surface with the same ID (replace)
             if let Some(old) = surfaces.remove(&surface_id) {
@@ -291,10 +357,43 @@ fn handle_display_event(
             // Load the original URL directly (no embed conversion needed).
             let ua = "Mozilla/5.0 (Macintosh; Intel Mac OS X 14_0) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15";
 
-            let webview = match WebViewBuilder::new()
+            // Persistent browser profile: assign a data directory so cookies,
+            // localStorage, and IndexedDB survive across window close/reopen.
+            // WebContext must outlive the WebView, so we keep it in an Option
+            // and store it alongside the window.
+            let mut web_context_storage: Option<WebContext> = None;
+            if let Some(ref pid) = profile_id {
+                let data_dir = profile_dir.join(pid);
+                if let Err(e) = std::fs::create_dir_all(&data_dir) {
+                    eprintln!(
+                        "[display] Failed to create profile dir {:?}: {}",
+                        data_dir, e
+                    );
+                } else {
+                    eprintln!("[display] Using browser profile: {} -> {:?}", pid, data_dir);
+                    web_context_storage = Some(WebContext::new(Some(data_dir)));
+                }
+            }
+
+            let builder = if let Some(ref mut ctx) = web_context_storage {
+                WebViewBuilder::new_with_web_context(ctx)
+            } else {
+                WebViewBuilder::new()
+            };
+
+            // Clone surface_id for the IPC handler closure
+            let sid_for_ipc = surface_id.clone();
+
+            let webview = match builder
                 .with_url(&url)
                 .with_user_agent(ua)
                 .with_autoplay(true)
+                .with_ipc_handler(move |msg: wry::http::Request<String>| {
+                    // IPC handler: receives JSON messages from JavaScript in the webview.
+                    // Used for returning eval script results.
+                    let body = msg.body();
+                    handle_ipc_message(&sid_for_ipc, body);
+                })
                 .build(&window)
             {
                 Ok(wv) => wv,
@@ -307,14 +406,23 @@ fn handle_display_event(
                 }
             };
 
-            eprintln!("[display] Opened surface {} -> {}", surface_id, url);
+            eprintln!(
+                "[display] Opened surface {} -> {}{}",
+                surface_id,
+                url,
+                profile_id
+                    .as_deref()
+                    .map(|p| format!(" (profile: {})", p))
+                    .unwrap_or_default()
+            );
             let window_id = window.id();
             window_to_surface.insert(window_id, surface_id.clone());
             surfaces.insert(
                 surface_id,
                 SurfaceWindow {
                     window,
-                    _webview: webview,
+                    webview,
+                    _web_context: web_context_storage,
                 },
             );
         }
@@ -332,9 +440,196 @@ fn handle_display_event(
                 }
             }
         }
+        DisplayEvent::EvalScript {
+            surface_id,
+            eval_id,
+            script,
+        } => {
+            if let Some(sw) = surfaces.get(&surface_id) {
+                // Two-call eval strategy — no eval() used, CSP/Trusted Types safe.
+                //
+                // wry's evaluate_script() bypasses page CSP (engine-level injection),
+                // but we can't use JS eval() because sites like YouTube enforce Trusted Types.
+                //
+                // Call 1 (expression form): wraps the script as `return (SCRIPT)`.
+                //   - Captures expression return values (document.title, Array.from(...), etc.)
+                //   - If the script has semicolons, this fails to parse SILENTLY (no code runs).
+                //
+                // Call 2 (statement form): wraps the script as-is in a function body.
+                //   - Always parseable for valid JS. Handles multi-statement scripts.
+                //   - Doesn't capture the last expression's value (returns undefined).
+                //
+                // A global guard prevents duplicate IPC responses. Call 1 runs first
+                // (JS is single-threaded); if it succeeds, Call 2 is a no-op.
+                let eval_id_json =
+                    serde_json::to_string(&eval_id).unwrap_or_else(|_| format!("\"{}\"", eval_id));
+
+                // Call 1: expression form — captures return value
+                let expr_call = format!(
+                    r#"(async () => {{
+    if (window.__gsv_ed && window.__gsv_ed[{eid}]) return;
+    try {{
+        const __r = await (async () => {{ return ({script}); }})();
+        if (window.__gsv_ed && window.__gsv_ed[{eid}]) return;
+        window.__gsv_ed = window.__gsv_ed || {{}};
+        window.__gsv_ed[{eid}] = true;
+        window.ipc.postMessage(JSON.stringify({{
+            type: "eval_result", evalId: {eid}, ok: true, result: __r
+        }}));
+    }} catch (_) {{}}
+}})()"#,
+                    script = script,
+                    eid = eval_id_json,
+                );
+
+                // Call 2: statement form — always parseable, always responds
+                let stmt_call = format!(
+                    r#"(async () => {{
+    if (window.__gsv_ed && window.__gsv_ed[{eid}]) return;
+    try {{
+        await (async () => {{ {script} }})();
+        if (window.__gsv_ed && window.__gsv_ed[{eid}]) return;
+        window.__gsv_ed = window.__gsv_ed || {{}};
+        window.__gsv_ed[{eid}] = true;
+        window.ipc.postMessage(JSON.stringify({{
+            type: "eval_result", evalId: {eid}, ok: true
+        }}));
+    }} catch (__e) {{
+        if (window.__gsv_ed && window.__gsv_ed[{eid}]) return;
+        window.__gsv_ed = window.__gsv_ed || {{}};
+        window.__gsv_ed[{eid}] = true;
+        window.ipc.postMessage(JSON.stringify({{
+            type: "eval_result", evalId: {eid}, ok: false, error: String(__e)
+        }}));
+    }}
+}})()"#,
+                    script = script,
+                    eid = eval_id_json,
+                );
+
+                let mut dispatched = false;
+                if let Err(e) = sw.webview.evaluate_script(&expr_call) {
+                    eprintln!(
+                        "[display] Eval expr call failed for surface {}: {}",
+                        surface_id, e
+                    );
+                } else {
+                    dispatched = true;
+                }
+                if let Err(e) = sw.webview.evaluate_script(&stmt_call) {
+                    eprintln!(
+                        "[display] Eval stmt call failed for surface {}: {}",
+                        surface_id, e
+                    );
+                } else {
+                    dispatched = true;
+                }
+
+                if dispatched {
+                    eprintln!(
+                        "[display] Eval dispatched: {} in surface {}",
+                        eval_id, surface_id
+                    );
+                } else {
+                    // Both calls failed at the engine level
+                    if let Ok(guard) = EVAL_RESULT_SENDER.lock() {
+                        if let Some(ref tx) = *guard {
+                            let _ = tx.send(EvalResult {
+                                eval_id,
+                                surface_id,
+                                ok: false,
+                                result: None,
+                                error: Some("Failed to dispatch eval to webview".to_string()),
+                            });
+                        }
+                    }
+                }
+            } else {
+                eprintln!("[display] Eval failed: surface {} not found", surface_id);
+                // Send error result back
+                if let Ok(guard) = EVAL_RESULT_SENDER.lock() {
+                    if let Some(ref tx) = *guard {
+                        let _ = tx.send(EvalResult {
+                            eval_id,
+                            surface_id,
+                            ok: false,
+                            result: None,
+                            error: Some("Surface not found on this display node".to_string()),
+                        });
+                    }
+                }
+            }
+        }
         DisplayEvent::Shutdown => {
             eprintln!("[display] Shutdown requested");
             *control_flow = ControlFlow::Exit;
         }
     }
 }
+
+/// Handle an IPC message from a webview. Called on the main thread.
+/// Parses eval result JSON and sends it through the eval result channel.
+fn handle_ipc_message(surface_id: &str, body: &str) {
+    // Parse the JSON message
+    let msg: serde_json::Value = match serde_json::from_str(body) {
+        Ok(v) => v,
+        Err(e) => {
+            eprintln!(
+                "[display] IPC parse error from surface {}: {} (body: {})",
+                surface_id,
+                e,
+                &body[..body.len().min(200)]
+            );
+            return;
+        }
+    };
+
+    let msg_type = msg.get("type").and_then(|v| v.as_str()).unwrap_or("");
+
+    match msg_type {
+        "eval_result" => {
+            let eval_id = msg
+                .get("evalId")
+                .and_then(|v| v.as_str())
+                .unwrap_or("")
+                .to_string();
+            let ok = msg.get("ok").and_then(|v| v.as_bool()).unwrap_or(false);
+            let result = msg.get("result").map(|v| v.to_string());
+            let error = msg
+                .get("error")
+                .and_then(|v| v.as_str())
+                .map(|s| s.to_string());
+
+            if eval_id.is_empty() {
+                eprintln!(
+                    "[display] IPC eval_result missing evalId from surface {}",
+                    surface_id
+                );
+                return;
+            }
+
+            eprintln!(
+                "[display] IPC eval result: {} ok={} surface={}",
+                eval_id, ok, surface_id
+            );
+
+            if let Ok(guard) = EVAL_RESULT_SENDER.lock() {
+                if let Some(ref tx) = *guard {
+                    let _ = tx.send(EvalResult {
+                        eval_id,
+                        surface_id: surface_id.to_string(),
+                        ok,
+                        result,
+                        error,
+                    });
+                }
+            }
+        }
+        _ => {
+            eprintln!(
+                "[display] Unknown IPC message type '{}' from surface {}",
+                msg_type, surface_id
+            );
+        }
+    }
+}
diff --git a/cli/src/main.rs b/cli/src/main.rs
index 171697b..9779a14 100644
--- a/cli/src/main.rs
+++ b/cli/src/main.rs
@@ -69,6 +69,11 @@ enum Commands {
         #[arg(long)]
         display: bool,
 
+        /// Directory for persistent browser profiles (cookies, localStorage).
+        /// Default: ~/.gsv/browser-profiles
+        #[arg(long)]
+        profile_dir: Option<PathBuf>,
+
         /// Node ID (default: hostname) - used as namespace prefix for tools
         #[arg(long)]
         id: Option<String>,
@@ -813,6 +818,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
     #[cfg(feature = "display")]
     if let Commands::Node {
         display: true,
+        profile_dir,
         id,
         workspace,
         action: None,
@@ -827,7 +833,13 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
         let token = cli.token.clone().or_else(|| cfg.gateway_token());
         let node_id = resolve_node_id(id.clone(), &cfg);
         let workspace_path = resolve_node_workspace(workspace.clone(), &cfg);
-        return run_node_display_main(&url, token, node_id, workspace_path);
+        let profile_path = profile_dir.clone().unwrap_or_else(|| {
+            dirs::home_dir()
+                .unwrap_or_else(|| PathBuf::from("."))
+                .join(".gsv")
+                .join("browser-profiles")
+        });
+        return run_node_display_main(&url, token, node_id, workspace_path, profile_path);
     }
 
     // Standard path: tokio runtime on main thread
@@ -845,14 +857,16 @@ fn run_node_display_main(
     token: Option<String>,
     node_id: String,
     workspace: PathBuf,
+    profile_dir: PathBuf,
 ) -> Result<(), Box<dyn std::error::Error>> {
     use gsv::display::{create_display, run_display_loop};
+    use gsv::protocol::SurfaceEvalResultPayload;
 
-    let (display_handle, event_loop) = create_display();
+    let (display_handle, event_loop, eval_result_rx) = create_display(profile_dir.clone());
 
     eprintln!(
-        "[display] Starting display node '{}' -> {}",
-        node_id, url
+        "[display] Starting display node '{}' -> {} (profiles: {:?})",
+        node_id, url, profile_dir
     );
 
     // Spawn tokio runtime on a background thread.
@@ -870,17 +884,46 @@ fn run_node_display_main(
             let (surface_tx, mut surface_rx) =
                 tokio::sync::mpsc::unbounded_channel::<(String, Option<serde_json::Value>)>();
 
+            // Bridge: std mpsc (main thread IPC) → tokio mpsc (async runtime).
+            // Eval results from webview IPC handlers flow from the main thread
+            // back to the tokio runtime via this channel.
+            // Convert display::EvalResult → protocol::SurfaceEvalResultPayload.
+            let (eval_bridge_tx, eval_bridge_rx) =
+                tokio::sync::mpsc::unbounded_channel::<SurfaceEvalResultPayload>();
+            std::thread::spawn(move || {
+                while let Ok(result) = eval_result_rx.recv() {
+                    let payload = SurfaceEvalResultPayload {
+                        eval_id: result.eval_id,
+                        surface_id: result.surface_id,
+                        ok: result.ok,
+                        result: result.result.and_then(|s| serde_json::from_str(&s).ok()),
+                        error: result.error,
+                    };
+                    if eval_bridge_tx.send(payload).is_err() {
+                        break; // tokio receiver dropped
+                    }
+                }
+            });
+
             // Task that receives surface events and forwards to tao display loop
             let display = display_for_thread.clone();
             let gw_url = url_owned.clone();
             tokio::spawn(async move {
                 while let Some((event_name, payload)) = surface_rx.recv().await {
-                    process_surface_event(&display, &gw_url, &event_name, payload);
+                    process_surface_event(&display, &gw_url, &event_name, payload).await;
                 }
             });
 
-            if let Err(e) =
-                run_node(&url_owned, token, node_id, workspace, true, Some(surface_tx)).await
+            if let Err(e) = run_node(
+                &url_owned,
+                token,
+                node_id,
+                workspace,
+                true,
+                Some(surface_tx),
+                Some(eval_bridge_rx),
+            )
+            .await
             {
                 eprintln!("[display] Node error: {}", e);
                 display_for_thread.shutdown();
@@ -889,19 +932,23 @@ fn run_node_display_main(
     });
 
     // Run tao event loop on main thread (blocks forever)
-    run_display_loop(event_loop);
+    run_display_loop(event_loop, profile_dir);
 }
 
 /// Process a surface event from the gateway and forward to the display handle.
+/// For webview surfaces with profiles, handles downloading the R2 snapshot
+/// before opening the webview (so the profile data is present on disk).
 #[cfg(feature = "display")]
-fn process_surface_event(
+async fn process_surface_event(
     display: &gsv::display::DisplayHandle,
     gateway_url: &str,
     event_name: &str,
     payload: Option<serde_json::Value>,
 ) {
-    use gsv::display::resolve_surface_url;
-    use gsv::protocol::{SurfaceClosedPayload, SurfaceOpenedPayload, SurfaceUpdatedPayload};
+    use gsv::display::{gateway_http_url, resolve_surface_url};
+    use gsv::protocol::{
+        FsAuthorizeResult, SurfaceClosedPayload, SurfaceOpenedPayload, SurfaceUpdatedPayload,
+    };
 
     let Some(payload) = payload else {
         return;
@@ -909,18 +956,136 @@ fn process_surface_event(
 
     match event_name {
         "surface.opened" => {
+            // Extract the pre-fetched fs read token (if any) before deserializing
+            let fs_token = payload
+                .get("fsReadToken")
+                .and_then(|v| serde_json::from_value::<FsAuthorizeResult>(v.clone()).ok());
+
             if let Ok(data) = serde_json::from_value::<SurfaceOpenedPayload>(payload) {
+                // If this is a webview with a profile and we have an fs token,
+                // try to download the R2 snapshot to hydrate the local profile
+                if let (Some(ref profile_id), Some(ref token_result)) =
+                    (&data.surface.profile_id, &fs_token)
+                {
+                    let profile_dir = display.profile_dir.join(profile_id);
+                    let snapshot_path = profile_dir.join("__snapshot.tar.gz");
+
+                    // Only download if local profile doesn't exist yet
+                    if !profile_dir.exists() {
+                        let http_base = gateway_http_url(gateway_url);
+                        let snapshot_url = format!(
+                            "{}/fs/browser-profiles/{}/snapshot.tar.gz",
+                            http_base, profile_id
+                        );
+                        eprintln!(
+                            "[display] Downloading profile snapshot for {} ...",
+                            profile_id
+                        );
+                        match download_profile_snapshot(
+                            &snapshot_url,
+                            &token_result.token,
+                            &snapshot_path,
+                        )
+                        .await
+                        {
+                            Ok(true) => {
+                                // Extract the snapshot
+                                if let Err(e) =
+                                    extract_profile_snapshot(&snapshot_path, &profile_dir)
+                                {
+                                    eprintln!(
+                                        "[display] Failed to extract profile {}: {}",
+                                        profile_id, e
+                                    );
+                                }
+                                // Clean up the snapshot file
+                                let _ = std::fs::remove_file(&snapshot_path);
+                                eprintln!(
+                                    "[display] Profile {} hydrated from R2",
+                                    profile_id
+                                );
+                            }
+                            Ok(false) => {
+                                // No snapshot in R2 — start fresh
+                                eprintln!(
+                                    "[display] No R2 snapshot for profile {}, starting fresh",
+                                    profile_id
+                                );
+                            }
+                            Err(e) => {
+                                eprintln!(
+                                    "[display] Profile download failed for {}: {}",
+                                    profile_id, e
+                                );
+                            }
+                        }
+                    }
+                }
+
                 let url = resolve_surface_url(
                     gateway_url,
                     &data.surface.kind,
                     &data.surface.content_ref,
                 );
-                display.open_surface(data.surface.surface_id, url, data.surface.label);
+                display.open_surface(
+                    data.surface.surface_id,
+                    url,
+                    data.surface.label,
+                    data.surface.profile_id,
+                );
             }
         }
         "surface.closed" => {
+            // Extract the pre-fetched fs write token before deserializing
+            let fs_write_token = payload
+                .get("fsWriteToken")
+                .and_then(|v| serde_json::from_value::<FsAuthorizeResult>(v.clone()).ok());
+
             if let Ok(data) = serde_json::from_value::<SurfaceClosedPayload>(payload) {
+                // Close the webview window first
                 display.close_surface(data.surface_id);
+
+                // Upload profile snapshot to R2 if this surface had a profile
+                if let (Some(ref profile_id), Some(ref token_result)) =
+                    (&data.profile_id, &fs_write_token)
+                {
+                    let profile_dir = display.profile_dir.join(profile_id);
+                    if profile_dir.exists() {
+                        let http_base = gateway_http_url(gateway_url);
+                        let upload_url = format!(
+                            "{}/fs/browser-profiles/{}/snapshot.tar.gz",
+                            http_base, profile_id
+                        );
+
+                        // Small delay to let the webview flush its data
+                        tokio::time::sleep(std::time::Duration::from_secs(1)).await;
+
+                        eprintln!(
+                            "[display] Uploading profile snapshot for {} ...",
+                            profile_id
+                        );
+                        match create_and_upload_profile(
+                            &profile_dir,
+                            &upload_url,
+                            &token_result.token,
+                        )
+                        .await
+                        {
+                            Ok(()) => {
+                                eprintln!(
+                                    "[display] Profile {} uploaded to R2",
+                                    profile_id
+                                );
+                            }
+                            Err(e) => {
+                                eprintln!(
+                                    "[display] Profile upload failed for {}: {}",
+                                    profile_id, e
+                                );
+                            }
+                        }
+                    }
+                }
             }
         }
         "surface.updated" => {
@@ -929,10 +1094,131 @@ fn process_surface_event(
                 display.update_surface(data.surface.surface_id, label);
             }
         }
+        "surface.eval" => {
+            // Forward eval request to the display's webview for JS execution.
+            // The result comes back via the IPC handler → eval result channel.
+            if let Ok(data) =
+                serde_json::from_value::<gsv::protocol::SurfaceEvalRequestPayload>(payload)
+            {
+                display.eval_script(data.surface_id, data.eval_id, data.script);
+            }
+        }
         _ => {}
     }
 }
 
+/// Download a profile snapshot from the /fs/ endpoint.
+/// Returns Ok(true) if downloaded, Ok(false) if 404 (no snapshot), Err on failure.
+#[cfg(feature = "display")]
+async fn download_profile_snapshot(
+    url: &str,
+    token: &str,
+    dest: &std::path::Path,
+) -> Result<bool, Box<dyn std::error::Error>> {
+    let client = reqwest::Client::new();
+    let resp = client
+        .get(url)
+        .header("Authorization", format!("Bearer {}", token))
+        .send()
+        .await?;
+
+    if resp.status() == reqwest::StatusCode::NOT_FOUND {
+        return Ok(false);
+    }
+    if !resp.status().is_success() {
+        return Err(format!("HTTP {}", resp.status()).into());
+    }
+
+    if let Some(parent) = dest.parent() {
+        std::fs::create_dir_all(parent)?;
+    }
+    let bytes = resp.bytes().await?;
+    std::fs::write(dest, &bytes)?;
+    Ok(true)
+}
+
+/// Extract a tar.gz snapshot into the profile directory.
+#[cfg(feature = "display")]
+fn extract_profile_snapshot(
+    archive_path: &std::path::Path,
+    dest_dir: &std::path::Path,
+) -> Result<(), Box<dyn std::error::Error>> {
+    let file = std::fs::File::open(archive_path)?;
+    let gz = flate2::read::GzDecoder::new(file);
+    let mut archive = tar::Archive::new(gz);
+    std::fs::create_dir_all(dest_dir)?;
+    archive.unpack(dest_dir)?;
+    Ok(())
+}
+
+/// Create a tar.gz snapshot of a profile directory and upload it to R2 via /fs/.
+#[cfg(feature = "display")]
+async fn create_and_upload_profile(
+    profile_dir: &std::path::Path,
+    upload_url: &str,
+    token: &str,
+) -> Result<(), Box<dyn std::error::Error>> {
+    // Create tar.gz in memory
+    let tar_gz_bytes = tokio::task::spawn_blocking({
+        let profile_dir = profile_dir.to_path_buf();
+        move || -> Result<Vec<u8>, String> {
+            let mut buf = Vec::new();
+            {
+                let enc = flate2::write::GzEncoder::new(&mut buf, flate2::Compression::fast());
+                let mut tar_builder = tar::Builder::new(enc);
+                tar_builder
+                    .append_dir_all(".", &profile_dir)
+                    .map_err(|e| format!("tar: {}", e))?;
+                let enc = tar_builder.into_inner().map_err(|e| format!("tar finish: {}", e))?;
+                enc.finish().map_err(|e| format!("gzip: {}", e))?;
+            }
+            Ok(buf)
+        }
+    })
+    .await
+    .map_err(|e| format!("spawn_blocking: {}", e))?
+    .map_err(|e| -> Box<dyn std::error::Error> { e.into() })?;
+
+    let size_mb = tar_gz_bytes.len() as f64 / (1024.0 * 1024.0);
+    if tar_gz_bytes.len() > 50 * 1024 * 1024 {
+        return Err(format!(
+            "Profile snapshot too large ({:.1} MB, limit 50 MB)",
+            size_mb
+        )
+        .into());
+    }
+    eprintln!(
+        "[display] Profile snapshot: {:.1} MB compressed",
+        size_mb
+    );
+
+    // Upload via HTTP PUT
+    let client = reqwest::Client::new();
+    let resp = client
+        .put(upload_url)
+        .header("Authorization", format!("Bearer {}", token))
+        .header("Content-Type", "application/gzip")
+        .header(
+            "X-R2-Meta",
+            serde_json::json!({
+                "version": "1",
+                "uploadedAt": chrono::Utc::now().to_rfc3339(),
+            })
+            .to_string(),
+        )
+        .body(tar_gz_bytes)
+        .send()
+        .await?;
+
+    if !resp.status().is_success() {
+        let status = resp.status();
+        let body = resp.text().await.unwrap_or_default();
+        return Err(format!("Upload failed: HTTP {} - {}", status, body).into());
+    }
+
+    Ok(())
+}
+
 async fn async_main_with(cli: Cli) -> Result<(), Box<dyn std::error::Error>> {
     // Load config from file
     let cfg = CliConfig::load();
@@ -957,6 +1243,7 @@ async fn async_main_with(cli: Cli) -> Result<(), Box<dyn std::error::Error>> {
         Commands::Node {
             foreground,
             display,
+            profile_dir: _,
             id,
             workspace,
             action,
@@ -985,7 +1272,7 @@ async fn async_main_with(cli: Cli) -> Result<(), Box<dyn std::error::Error>> {
             } else if foreground {
                 let node_id = resolve_node_id(id, &cfg);
                 let workspace = resolve_node_workspace(workspace, &cfg);
-                run_node(&url, token, node_id, workspace, display, None).await
+                run_node(&url, token, node_id, workspace, display, None, None).await
             } else {
                 run_node_default_managed(
                     &cfg,
@@ -3410,6 +3697,7 @@ async fn run_node(
     workspace: PathBuf,
     display_mode: bool,
     surface_tx: Option<tokio::sync::mpsc::UnboundedSender<(String, Option<serde_json::Value>)>>,
+    eval_result_rx: Option<tokio::sync::mpsc::UnboundedReceiver<gsv::protocol::SurfaceEvalResultPayload>>,
 ) -> Result<(), Box<dyn std::error::Error>> {
     let logger = NodeLogger::new(&node_id, &workspace)?;
     let log_path = logger::node_log_path()?;
@@ -3462,6 +3750,73 @@ async fn run_node(
     const INITIAL_RETRY_DELAY: tokio::time::Duration = tokio::time::Duration::from_secs(3);
     const MAX_RETRY_DELAY: tokio::time::Duration = tokio::time::Duration::from_secs(300);
     let mut retry_delay = INITIAL_RETRY_DELAY;
+    // Shared "current connection" reference for the eval result forwarder.
+    // Updated on each reconnect so the forwarder always uses the latest connection.
+    let current_conn: Arc<tokio::sync::Mutex<Option<Arc<Connection>>>> =
+        Arc::new(tokio::sync::Mutex::new(None));
+
+    // Spawn eval result forwarder task (runs for the lifetime of the node).
+    // Reads eval results from the display IPC bridge and sends them back
+    // to the gateway as surface.eval.result RPCs.
+    let _eval_result_task = if let Some(mut rx) = eval_result_rx {
+        let conn_ref = current_conn.clone();
+        let logger_for_eval = logger.clone();
+        Some(tokio::spawn(async move {
+            while let Some(result) = rx.recv().await {
+                let params = serde_json::to_value(&result).unwrap_or_default();
+                let conn_guard = conn_ref.lock().await;
+                let Some(ref conn) = *conn_guard else {
+                    logger_for_eval.warn(
+                        "surface.eval.result.no_conn",
+                        json!({ "evalId": result.eval_id }),
+                    );
+                    continue;
+                };
+                let conn = conn.clone();
+                drop(conn_guard); // Release lock before awaiting RPC
+
+                match conn
+                    .request_with_timeout(
+                        "surface.eval.result",
+                        Some(params),
+                        std::time::Duration::from_secs(10),
+                    )
+                    .await
+                {
+                    Ok(res) if res.ok => {
+                        logger_for_eval.info(
+                            "surface.eval.result.sent",
+                            json!({
+                                "evalId": result.eval_id,
+                                "surfaceId": result.surface_id,
+                                "ok": result.ok,
+                            }),
+                        );
+                    }
+                    Ok(res) => {
+                        logger_for_eval.warn(
+                            "surface.eval.result.failed",
+                            json!({
+                                "evalId": result.eval_id,
+                                "error": res.error,
+                            }),
+                        );
+                    }
+                    Err(e) => {
+                        logger_for_eval.warn(
+                            "surface.eval.result.send_error",
+                            json!({
+                                "evalId": result.eval_id,
+                                "error": e.to_string(),
+                            }),
+                        );
+                    }
+                }
+            }
+        }))
+    } else {
+        None
+    };
 
     loop {
         logger.info("connect.attempt", json!({ "url": url }));
@@ -3806,10 +4161,138 @@ async fn run_node(
                             }
                         }
                     } else if evt.event.starts_with("surface.") {
-                        // Forward surface events to display module (if active)
+                        // Forward surface events to display module (if active).
+                        // For surface.opened with a profileId, pre-fetch an fs read
+                        // token so the display task can download the profile snapshot.
                         if let Some(ref tx) = surface_tx {
                             let event_name = evt.event.clone();
-                            if let Err(e) = tx.send((event_name.clone(), evt.payload.clone())) {
+                            let mut extra = serde_json::Map::new();
+
+                            // Pre-fetch fs tokens for profile sync:
+                            // - surface.opened: read token (download snapshot)
+                            // - surface.closed: write token (upload snapshot)
+
+                            if event_name == "surface.closed" {
+                                if let Some(ref payload_val) = evt.payload {
+                                    if let Some(profile_id) = payload_val
+                                        .get("profileId")
+                                        .and_then(|v| v.as_str())
+                                    {
+                                        let prefix = format!(
+                                            "browser-profiles/{}/",
+                                            profile_id
+                                        );
+                                        let params = json!({
+                                            "pathPrefix": prefix,
+                                            "mode": "write"
+                                        });
+                                        match conn
+                                            .request_with_timeout(
+                                                "fs.authorize",
+                                                Some(params),
+                                                std::time::Duration::from_secs(5),
+                                            )
+                                            .await
+                                        {
+                                            Ok(res) if res.ok => {
+                                                if let Some(payload) = res.payload {
+                                                    extra.insert(
+                                                        "fsWriteToken".to_string(),
+                                                        payload,
+                                                    );
+                                                }
+                                            }
+                                            Ok(res) => {
+                                                logger.warn(
+                                                    "surface.fs_authorize_write.failed",
+                                                    json!({
+                                                        "error": res.error,
+                                                        "profileId": profile_id,
+                                                    }),
+                                                );
+                                            }
+                                            Err(e) => {
+                                                logger.warn(
+                                                    "surface.fs_authorize_write.error",
+                                                    json!({
+                                                        "error": e.to_string(),
+                                                        "profileId": profile_id,
+                                                    }),
+                                                );
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+
+                            if event_name == "surface.opened" {
+                                if let Some(ref payload_val) = evt.payload {
+                                    if let Some(profile_id) = payload_val
+                                        .get("surface")
+                                        .and_then(|s| s.get("profileId"))
+                                        .and_then(|v| v.as_str())
+                                    {
+                                        let prefix = format!(
+                                            "browser-profiles/{}/",
+                                            profile_id
+                                        );
+                                        let params = json!({
+                                            "pathPrefix": prefix,
+                                            "mode": "read"
+                                        });
+                                        match conn
+                                            .request_with_timeout(
+                                                "fs.authorize",
+                                                Some(params),
+                                                std::time::Duration::from_secs(5),
+                                            )
+                                            .await
+                                        {
+                                            Ok(res) if res.ok => {
+                                                if let Some(payload) = res.payload {
+                                                    extra.insert(
+                                                        "fsReadToken".to_string(),
+                                                        payload,
+                                                    );
+                                                }
+                                            }
+                                            Ok(res) => {
+                                                logger.warn(
+                                                    "surface.fs_authorize.failed",
+                                                    json!({
+                                                        "error": res.error,
+                                                        "profileId": profile_id,
+                                                    }),
+                                                );
+                                            }
+                                            Err(e) => {
+                                                logger.warn(
+                                                    "surface.fs_authorize.error",
+                                                    json!({
+                                                        "error": e.to_string(),
+                                                        "profileId": profile_id,
+                                                    }),
+                                                );
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+
+                            let send_val = if extra.is_empty() {
+                                evt.payload.clone()
+                            } else {
+                                // Merge extra fields into the payload
+                                let mut merged = evt
+                                    .payload
+                                    .as_ref()
+                                    .and_then(|v| v.as_object().cloned())
+                                    .unwrap_or_default();
+                                merged.extend(extra);
+                                Some(serde_json::Value::Object(merged))
+                            };
+
+                            if let Err(e) = tx.send((event_name.clone(), send_val)) {
                                 logger.warn(
                                     "surface.event.forward_failed",
                                     json!({
@@ -3825,6 +4308,10 @@ async fn run_node(
         })
         .await;
 
+        // Update the shared connection reference so the eval result forwarder
+        // uses the latest connection after each reconnect.
+        *current_conn.lock().await = Some(conn.clone());
+
         let flushed = flush_exec_event_outbox(&conn, &exec_event_outbox, &logger).await;
         if flushed > 0 {
             logger.info(
diff --git a/cli/src/protocol.rs b/cli/src/protocol.rs
index 8e7891c..147ff9b 100644
--- a/cli/src/protocol.rs
+++ b/cli/src/protocol.rs
@@ -241,6 +241,13 @@ pub struct SurfaceRect {
     pub height: f64,
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SurfaceProfileLock {
+    pub node_id: String,
+    pub surface_id: String,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct Surface {
@@ -262,6 +269,13 @@ pub struct Surface {
     pub z_index: Option<i64>,
     pub created_at: f64,
     pub updated_at: f64,
+    // Browser profile persistence
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub profile_id: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub profile_version: Option<u64>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub profile_lock: Option<SurfaceProfileLock>,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -314,6 +328,8 @@ pub struct SurfaceOpenedPayload {
 pub struct SurfaceClosedPayload {
     pub surface_id: String,
     pub target_client_id: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub profile_id: Option<String>,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -322,6 +338,45 @@ pub struct SurfaceUpdatedPayload {
     pub surface: Surface,
 }
 
+// ── Surface Eval Protocol ──
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SurfaceEvalRequestPayload {
+    pub eval_id: String,
+    pub surface_id: String,
+    pub script: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SurfaceEvalResultPayload {
+    pub eval_id: String,
+    pub surface_id: String,
+    pub ok: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub result: Option<Value>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub error: Option<String>,
+}
+
+// ── Filesystem Token Protocol ──
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct FsAuthorizeParams {
+    pub path_prefix: String,
+    pub mode: String, // "read" | "write"
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct FsAuthorizeResult {
+    pub token: String,
+    pub expires_at: f64,
+    pub path_prefix: String,
+}
+
 impl RequestFrame {
     pub fn new(method: &str, params: Option<Value>) -> Self {
         Self {
diff --git a/gateway/src/agents/tools/constants.ts b/gateway/src/agents/tools/constants.ts
index 4f51f42..3c617c8 100644
--- a/gateway/src/agents/tools/constants.ts
+++ b/gateway/src/agents/tools/constants.ts
@@ -11,7 +11,5 @@ export const NATIVE_TOOLS = {
   MESSAGE: `${NATIVE_TOOL_PREFIX}Message`,
   SESSIONS_LIST: `${NATIVE_TOOL_PREFIX}SessionsList`,
   SESSION_SEND: `${NATIVE_TOOL_PREFIX}SessionSend`,
-  OPEN_VIEW: `${NATIVE_TOOL_PREFIX}OpenView`,
-  LIST_VIEWS: `${NATIVE_TOOL_PREFIX}ListViews`,
-  CLOSE_VIEW: `${NATIVE_TOOL_PREFIX}CloseView`,
+  VIEW: `${NATIVE_TOOL_PREFIX}View`,
 } as const;
diff --git a/gateway/src/agents/tools/index.ts b/gateway/src/agents/tools/index.ts
index c7c2ba5..f2ab1da 100644
--- a/gateway/src/agents/tools/index.ts
+++ b/gateway/src/agents/tools/index.ts
@@ -65,13 +65,15 @@ export function getNativeToolDefinitions(): ToolDefinition[] {
 
 /**
  * Execute a native tool
- * Returns { ok, result?, error? }
+ * Returns { ok, result?, error?, deferred? }
  */
 export async function executeNativeTool(
   context: {
     bucket: R2Bucket;
     agentId: string;
     gateway?: NativeToolExecutionContext["gateway"];
+    callId?: string;
+    sessionKey?: string;
   },
   toolName: string,
   args: Record<string, unknown>,
diff --git a/gateway/src/agents/tools/surface.ts b/gateway/src/agents/tools/surface.ts
index 0c57bae..fefaf90 100644
--- a/gateway/src/agents/tools/surface.ts
+++ b/gateway/src/agents/tools/surface.ts
@@ -5,176 +5,178 @@ import type { Surface } from "../../protocol/surface";
 
 export const getSurfaceToolDefinitions = (): ToolDefinition[] => [
   {
-    name: NATIVE_TOOLS.OPEN_VIEW,
+    name: NATIVE_TOOLS.VIEW,
     description:
-      "Open a view on a connected client or node. Use this to display apps, media, or web content on the user's screen. " +
-      "If targetClientId is omitted: webview/media surfaces prefer display-capable nodes (native windows); " +
-      "app surfaces prefer web clients. " +
-      "kind=app opens a built-in app tab (chat, sessions, channels, nodes, workspace, cron, logs, settings, overview). " +
-      "kind=media opens a media player (contentRef should be a URL). " +
-      "kind=webview opens an arbitrary URL.",
+      "Manage views (surfaces) on connected clients and display nodes.\n\n" +
+      "Actions:\n" +
+      "  open  — Open a view. Requires kind and contentRef.\n" +
+      "          kind=app opens a built-in tab (chat, sessions, channels, nodes, workspace, cron, logs, settings, overview).\n" +
+      "          kind=media opens a media player (contentRef = URL).\n" +
+      "          kind=webview opens an arbitrary URL in a native browser window.\n" +
+      "          If targetClientId is omitted, webview/media auto-target display nodes; app auto-targets web clients.\n" +
+      "  list  — List all open views. Optional targetClientId filter.\n" +
+      "  close — Close a view by surfaceId.\n" +
+      "  eval  — Execute JavaScript in a webview surface (like DevTools console). Requires surfaceId and script.\n" +
+      "          Returns the JSON-serializable result. Only works on kind=webview surfaces on display nodes.",
     inputSchema: {
       type: "object",
       properties: {
+        action: {
+          type: "string",
+          enum: ["open", "list", "close", "eval"],
+          description: "The operation to perform.",
+        },
         kind: {
           type: "string",
           enum: ["app", "media", "webview"],
-          description: "Type of view to open.",
+          description: "Type of view to open. Required for action=open.",
         },
         contentRef: {
           type: "string",
           description:
-            "What to display. For kind=app, this is the tab name (e.g., 'chat', 'sessions'). " +
-            "For kind=media or kind=webview, this is a URL.",
+            "What to display. Required for action=open. " +
+            "For kind=app: tab name (e.g. 'chat'). For kind=media or kind=webview: a URL.",
         },
         label: {
           type: "string",
-          description: "Optional window title. Defaults to contentRef.",
+          description: "Window title. Defaults to contentRef. Used with action=open.",
         },
         targetClientId: {
           type: "string",
           description:
-            "Optional ID of the client or node to open the view on. " +
-            "If omitted, webview/media views auto-target display nodes; app views auto-target web clients.",
+            "Target client or node ID. Used with action=open (optional auto-target) and action=list (optional filter).",
         },
-      },
-      required: ["kind", "contentRef"],
-    },
-  },
-  {
-    name: NATIVE_TOOLS.LIST_VIEWS,
-    description:
-      "List all currently open views (surfaces) across all connected clients. " +
-      "Use this to see what the user is looking at, or to find a surfaceId to close.",
-    inputSchema: {
-      type: "object",
-      properties: {
-        targetClientId: {
+        surfaceId: {
           type: "string",
-          description:
-            "Optional. Filter views to a specific client/node.",
+          description: "The surfaceId of an existing view. Required for action=close and action=eval.",
         },
-      },
-      required: [],
-    },
-  },
-  {
-    name: NATIVE_TOOLS.CLOSE_VIEW,
-    description:
-      "Close a view (surface) by its surfaceId. Use gsv__ListViews first to find the surfaceId.",
-    inputSchema: {
-      type: "object",
-      properties: {
-        surfaceId: {
+        script: {
           type: "string",
-          description: "The surfaceId of the view to close.",
+          description:
+            "JavaScript to execute in the webview. Required for action=eval. " +
+            "The return value of the last expression is JSON-serialized and returned.",
         },
       },
-      required: ["surfaceId"],
+      required: ["action"],
     },
   },
 ];
 
 export const surfaceNativeToolHandlers: NativeToolHandlerMap = {
-  [NATIVE_TOOLS.OPEN_VIEW]: async (context, args) => {
+  [NATIVE_TOOLS.VIEW]: async (context, args) => {
     if (!context.gateway) {
-      return {
-        ok: false,
-        error: "OpenView tool unavailable: gateway context missing",
-      };
+      return { ok: false, error: "View tool unavailable: gateway context missing" };
     }
 
-    const kind = typeof args.kind === "string" ? args.kind : "app";
-    const contentRef =
-      typeof args.contentRef === "string" ? args.contentRef : "";
-    const label =
-      typeof args.label === "string" ? args.label : undefined;
-    const targetClientId =
-      typeof args.targetClientId === "string"
-        ? args.targetClientId
-        : undefined;
-
-    if (!contentRef) {
-      return { ok: false, error: "contentRef is required" };
-    }
+    const action = typeof args.action === "string" ? args.action : "";
 
-    const result = (await context.gateway.openSurface({
-      kind,
-      contentRef,
-      label,
-      targetClientId,
-    })) as unknown as { ok: boolean; surface?: Surface; error?: string };
+    switch (action) {
+      case "open": {
+        const kind = typeof args.kind === "string" ? args.kind : "app";
+        const contentRef = typeof args.contentRef === "string" ? args.contentRef : "";
+        const label = typeof args.label === "string" ? args.label : undefined;
+        const targetClientId = typeof args.targetClientId === "string" ? args.targetClientId : undefined;
 
-    if (!result.ok) {
-      return { ok: false, error: result.error };
-    }
+        if (!contentRef) {
+          return { ok: false, error: "contentRef is required for action=open" };
+        }
 
-    return {
-      ok: true,
-      result: {
-        surfaceId: result.surface?.surfaceId,
-        kind: result.surface?.kind,
-        contentRef: result.surface?.contentRef,
-        targetClientId: result.surface?.targetClientId,
-        label: result.surface?.label,
-      },
-    };
-  },
+        const result = (await context.gateway.openSurface({
+          kind,
+          contentRef,
+          label,
+          targetClientId,
+        })) as unknown as { ok: boolean; surface?: Surface; error?: string };
 
-  [NATIVE_TOOLS.LIST_VIEWS]: async (context, args) => {
-    if (!context.gateway) {
-      return {
-        ok: false,
-        error: "ListViews tool unavailable: gateway context missing",
-      };
-    }
+        if (!result.ok) {
+          return { ok: false, error: result.error };
+        }
 
-    const targetClientId =
-      typeof args.targetClientId === "string"
-        ? args.targetClientId
-        : undefined;
-
-    const result = (await context.gateway.listSurfaces(
-      targetClientId,
-    )) as unknown as { surfaces: Surface[]; count: number };
-
-    return {
-      ok: true,
-      result: {
-        count: result.count,
-        surfaces: result.surfaces.map((s: Surface) => ({
-          surfaceId: s.surfaceId,
-          kind: s.kind,
-          label: s.label,
-          contentRef: s.contentRef,
-          targetClientId: s.targetClientId,
-          state: s.state,
-        })),
-      },
-    };
-  },
+        return {
+          ok: true,
+          result: {
+            surfaceId: result.surface?.surfaceId,
+            kind: result.surface?.kind,
+            contentRef: result.surface?.contentRef,
+            targetClientId: result.surface?.targetClientId,
+            label: result.surface?.label,
+          },
+        };
+      }
 
-  [NATIVE_TOOLS.CLOSE_VIEW]: async (context, args) => {
-    if (!context.gateway) {
-      return {
-        ok: false,
-        error: "CloseView tool unavailable: gateway context missing",
-      };
-    }
+      case "list": {
+        const targetClientId = typeof args.targetClientId === "string" ? args.targetClientId : undefined;
 
-    const surfaceId =
-      typeof args.surfaceId === "string" ? args.surfaceId : "";
-    if (!surfaceId) {
-      return { ok: false, error: "surfaceId is required" };
-    }
+        const result = (await context.gateway.listSurfaces(
+          targetClientId,
+        )) as unknown as { surfaces: Surface[]; count: number };
 
-    const result = (await context.gateway.closeSurface(
-      surfaceId,
-    )) as unknown as { ok: boolean; error?: string };
-    if (!result.ok) {
-      return { ok: false, error: result.error };
-    }
+        return {
+          ok: true,
+          result: {
+            count: result.count,
+            surfaces: result.surfaces.map((s: Surface) => ({
+              surfaceId: s.surfaceId,
+              kind: s.kind,
+              label: s.label,
+              contentRef: s.contentRef,
+              targetClientId: s.targetClientId,
+              state: s.state,
+            })),
+          },
+        };
+      }
 
-    return { ok: true, result: { closed: true, surfaceId } };
+      case "close": {
+        const surfaceId = typeof args.surfaceId === "string" ? args.surfaceId : "";
+        if (!surfaceId) {
+          return { ok: false, error: "surfaceId is required for action=close" };
+        }
+
+        const result = (await context.gateway.closeSurface(
+          surfaceId,
+        )) as unknown as { ok: boolean; error?: string };
+
+        if (!result.ok) {
+          return { ok: false, error: result.error };
+        }
+
+        return { ok: true, result: { closed: true, surfaceId } };
+      }
+
+      case "eval": {
+        const surfaceId = typeof args.surfaceId === "string" ? args.surfaceId : "";
+        const script = typeof args.script === "string" ? args.script : "";
+
+        if (!surfaceId) {
+          return { ok: false, error: "surfaceId is required for action=eval" };
+        }
+        if (!script) {
+          return { ok: false, error: "script is required for action=eval" };
+        }
+
+        if (!context.callId || !context.sessionKey) {
+          return { ok: false, error: "eval requires callId and sessionKey in execution context" };
+        }
+
+        // Fire-and-forget: pass callId/sessionKey so the result routes back via Session DO toolResult()
+        const result = (await context.gateway.evalSurface(
+          surfaceId,
+          script,
+          context.callId,
+          context.sessionKey,
+        )) as unknown as { ok: boolean; error?: string; evalId?: string };
+
+        if (!result.ok) {
+          return { ok: false, error: result.error };
+        }
+
+        // Return deferred — the actual result arrives asynchronously via toolResult()
+        return { ok: true, deferred: true };
+      }
+
+      default:
+        return { ok: false, error: `Unknown action: "${action}". Use open, list, close, or eval.` };
+    }
   },
 };
diff --git a/gateway/src/agents/tools/types.ts b/gateway/src/agents/tools/types.ts
index a46bbfc..f489e0f 100644
--- a/gateway/src/agents/tools/types.ts
+++ b/gateway/src/agents/tools/types.ts
@@ -1,12 +1,14 @@
 import type { Gateway } from "../../gateway/do";
 
-export type NativeToolResult = { ok: boolean; result?: unknown; error?: string };
+export type NativeToolResult = { ok: boolean; result?: unknown; error?: string; deferred?: boolean };
 
 export type NativeToolExecutionContext = {
   bucket: R2Bucket;
   agentId: string;
   basePath: string;
   gateway?: DurableObjectStub<Gateway>;
+  callId?: string;
+  sessionKey?: string;
 };
 
 export type NativeToolHandler = (
diff --git a/gateway/src/gateway/do.ts b/gateway/src/gateway/do.ts
index 55e6493..caa1997 100644
--- a/gateway/src/gateway/do.ts
+++ b/gateway/src/gateway/do.ts
@@ -156,6 +156,22 @@ export class Gateway extends DurableObject<Env> {
     { prefix: "surfaces:" },
   );
 
+  // ── Filesystem token store (in-memory, ephemeral) ──
+  // Short-lived tokens for authenticated R2 access via /fs/ endpoint.
+  private fsTokens = new Map<string, import("../protocol/fs").FsToken>();
+
+  // ── Browser profile locks (in-memory) ──
+  // Tracks which node currently holds a profile open. Key = profileId.
+  private profileLocks = new Map<string, { nodeId: string; surfaceId: string }>();
+
+  // ── Pending surface eval calls ──
+  // Key: evalId, Value: { ws, frameId } for deferred RPC response (WS callers).
+  readonly pendingEvals = new Map<string, { ws: WebSocket; frameId: string }>();
+  // Key: evalId, Value: routing info for agent tool calls (fire-and-forget, routed back via Session DO).
+  readonly pendingEvalRoutes = PersistedObject<
+    Record<string, { sessionKey: string; callId: string; createdAt: number }>
+  >(this.ctx.storage.kv, { prefix: "pendingEvalRoutes:" });
+
   // Heartbeat scheduler state (persisted to survive DO eviction)
   readonly heartbeatScheduler: { initialized: boolean } = PersistedObject<{
     initialized: boolean;
@@ -898,9 +914,14 @@ export class Gateway extends DurableObject<Env> {
   cleanupSurfacesForClient(clientId: string): void {
     for (const [surfaceId, surface] of Object.entries(this.surfaces)) {
       if (surface.targetClientId === clientId) {
+        if (surface.profileId) {
+          this.releaseProfileLock(surface.profileId, surfaceId);
+        }
         delete this.surfaces[surfaceId];
       }
     }
+    // Also release any remaining profile locks for this node
+    this.releaseProfileLocksForNode(clientId);
   }
 
   broadcastToSession(sessionKey: string, payload: ChatEventPayload): void {
@@ -1013,6 +1034,38 @@ export class Gateway extends DurableObject<Env> {
 
     const now = Date.now();
     const surfaceId = crypto.randomUUID();
+
+    // Browser profile handling for webview surfaces
+    let profileId: string | undefined;
+    let profileVersion: number | undefined;
+    let profileLock: Surface["profileLock"] | undefined;
+    if (params.kind === "webview" && params.contentRef) {
+      profileId = Gateway.deriveProfileId(params.contentRef) ?? undefined;
+      if (profileId) {
+        // Check if target is a node (profile persistence only works on nodes)
+        const isNode = this.nodes.has(targetClientId);
+        if (isNode) {
+          if (!this.acquireProfileLock(profileId, targetClientId, surfaceId)) {
+            const holder = this.profileLocks.get(profileId);
+            return {
+              ok: false,
+              error: `Profile "${profileId}" is locked by node "${holder?.nodeId}"`,
+            };
+          }
+          profileLock = { nodeId: targetClientId, surfaceId };
+        }
+        // Check if a snapshot exists in R2
+        const snapshotKey = await this.getProfileSnapshotKey(profileId);
+        if (snapshotKey) {
+          // profileVersion is stored in surface metadata; for now read from R2 custom metadata
+          const head = await this.env.STORAGE.head(snapshotKey);
+          profileVersion = head?.customMetadata?.version
+            ? parseInt(head.customMetadata.version, 10)
+            : 1;
+        }
+      }
+    }
+
     const surface: Surface = {
       surfaceId,
       kind: params.kind as Surface["kind"],
@@ -1024,6 +1077,9 @@ export class Gateway extends DurableObject<Env> {
       state: "open",
       createdAt: now,
       updatedAt: now,
+      profileId,
+      profileVersion,
+      profileLock,
     };
 
     this.surfaces[surfaceId] = surface;
@@ -1032,7 +1088,8 @@ export class Gateway extends DurableObject<Env> {
     this.broadcastSurfaceEvent("surface.opened", { surface }, targetClientId);
 
     console.log(
-      `[Gateway] Surface opened via tool: ${surfaceId} kind=${surface.kind} ref=${surface.contentRef} target=${targetClientId}`,
+      `[Gateway] Surface opened via tool: ${surfaceId} kind=${surface.kind} ref=${surface.contentRef} target=${targetClientId}` +
+        (profileId ? ` profile=${profileId}` : ""),
     );
 
     return { ok: true, surface };
@@ -1067,15 +1124,180 @@ export class Gateway extends DurableObject<Env> {
       return { ok: false, error: `Surface not found: ${surfaceId}` };
     }
 
+    // Release browser profile lock if held
+    if (surface.profileId) {
+      this.releaseProfileLock(surface.profileId, surfaceId);
+    }
+
     const targetClientId = surface.targetClientId;
+    const profileId = surface.profileId;
     delete this.surfaces[surfaceId];
 
-    this.broadcastSurfaceEvent("surface.closed", { surfaceId, targetClientId }, targetClientId);
+    this.broadcastSurfaceEvent(
+      "surface.closed",
+      { surfaceId, targetClientId, profileId },
+      targetClientId,
+    );
 
     console.log(`[Gateway] Surface closed via tool: ${surfaceId}`);
     return { ok: true };
   }
 
+  /**
+   * Execute JavaScript in a webview surface (fire-and-forget).
+   * Called by Session DO via gateway stub (for agent tools like gsv__View eval).
+   * Sends the script to the target node and returns immediately.
+   * The result is routed back asynchronously via handleSurfaceEvalResult → Session DO toolResult().
+   */
+  async evalSurface(
+    surfaceId: string,
+    script: string,
+    callId?: string,
+    sessionKey?: string,
+  ): Promise<{ ok: boolean; error?: string; evalId?: string }> {
+    const surface = this.surfaces[surfaceId];
+    if (!surface) {
+      return { ok: false, error: `Surface not found: ${surfaceId}` };
+    }
+    if (surface.kind !== "webview") {
+      return { ok: false, error: `Surface kind "${surface.kind}" does not support eval` };
+    }
+
+    const targetClientId = surface.targetClientId;
+    if (!this.nodes.has(targetClientId)) {
+      return { ok: false, error: "Target is not a display node" };
+    }
+    const targetWs = this.nodes.get(targetClientId);
+    if (!targetWs || targetWs.readyState !== WebSocket.OPEN) {
+      return { ok: false, error: `Target node "${targetClientId}" not connected` };
+    }
+
+    const evalId = crypto.randomUUID();
+
+    // Store routing info so the result handler can route back to Session DO
+    if (callId && sessionKey) {
+      this.pendingEvalRoutes[evalId] = {
+        sessionKey,
+        callId,
+        createdAt: Date.now(),
+      };
+    }
+
+    // Send the eval request to the target node
+    const payload: import("../protocol/surface").SurfaceEvalRequestPayload = {
+      evalId,
+      surfaceId,
+      script,
+    };
+    targetWs.send(JSON.stringify({ type: "evt", event: "surface.eval", payload }));
+
+    console.log(`[Gateway] Surface eval dispatched via tool: ${evalId} -> surface ${surfaceId}`);
+
+    return { ok: true, evalId };
+  }
+
+  // ---- Filesystem Token System ----
+
+  /**
+   * Issue a short-lived token for R2 access via the /fs/ endpoint.
+   * Called by the fs.authorize RPC handler.
+   */
+  authorizeFs(pathPrefix: string, mode: import("../protocol/fs").FsMode): import("../protocol/fs").FsAuthorizeResult {
+    // Lazy GC: prune expired tokens
+    const now = Date.now();
+    for (const [tok, entry] of this.fsTokens) {
+      if (entry.expiresAt <= now) this.fsTokens.delete(tok);
+    }
+
+    const token = crypto.randomUUID();
+    const expiresAt = now + 60_000; // 60 seconds
+    this.fsTokens.set(token, { pathPrefix, mode, expiresAt });
+
+    return { token, expiresAt, pathPrefix };
+  }
+
+  /**
+   * Verify a token for a given path and mode.
+   * Called by the worker fetch handler before proxying R2 operations.
+   * Returns true if the token is valid and grants access to the requested path.
+   */
+  verifyFsToken(token: string, path: string, mode: import("../protocol/fs").FsMode): boolean {
+    const entry = this.fsTokens.get(token);
+    if (!entry) return false;
+
+    // Check expiry
+    if (entry.expiresAt <= Date.now()) {
+      this.fsTokens.delete(token);
+      return false;
+    }
+
+    // Check mode
+    if (entry.mode !== mode) return false;
+
+    // Check path prefix
+    if (!path.startsWith(entry.pathPrefix)) return false;
+
+    return true;
+  }
+
+  // ---- Browser Profile Locks ----
+
+  /**
+   * Derive a profileId from a URL origin.
+   * e.g. "https://github.com/settings" → "github.com"
+   */
+  static deriveProfileId(urlStr: string): string | null {
+    try {
+      const u = new URL(urlStr);
+      return u.hostname;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Acquire a profile lock for a node. Returns false if already locked by another node.
+   */
+  acquireProfileLock(profileId: string, nodeId: string, surfaceId: string): boolean {
+    const existing = this.profileLocks.get(profileId);
+    if (existing && existing.nodeId !== nodeId) {
+      return false; // locked by another node
+    }
+    this.profileLocks.set(profileId, { nodeId, surfaceId });
+    return true;
+  }
+
+  /**
+   * Release a profile lock. Only releases if the lock is held by the specified surface.
+   */
+  releaseProfileLock(profileId: string, surfaceId?: string): void {
+    const existing = this.profileLocks.get(profileId);
+    if (!existing) return;
+    if (surfaceId && existing.surfaceId !== surfaceId) return;
+    this.profileLocks.delete(profileId);
+  }
+
+  /**
+   * Release all profile locks held by a given node (on disconnect).
+   */
+  releaseProfileLocksForNode(nodeId: string): void {
+    for (const [profileId, lock] of this.profileLocks) {
+      if (lock.nodeId === nodeId) {
+        this.profileLocks.delete(profileId);
+      }
+    }
+  }
+
+  /**
+   * Get the current R2 snapshot path for a profile, if one has been uploaded.
+   * Returns the R2 key or null.
+   */
+  async getProfileSnapshotKey(profileId: string): Promise<string | null> {
+    const key = `browser-profiles/${profileId}/snapshot.tar.gz`;
+    const head = await this.env.STORAGE.head(key);
+    return head ? key : null;
+  }
+
   // ---- Heartbeat System ----
 
   private getGatewayAlarmParticipants(
diff --git a/gateway/src/gateway/rpc-handlers/connect.ts b/gateway/src/gateway/rpc-handlers/connect.ts
index b0a3261..d637589 100644
--- a/gateway/src/gateway/rpc-handlers/connect.ts
+++ b/gateway/src/gateway/rpc-handlers/connect.ts
@@ -161,6 +161,9 @@ export const handleConnect: Handler<"connect"> = async (ctx) => {
         "surface.update",
         "surface.focus",
         "surface.list",
+        "surface.eval",
+        "surface.eval.result",
+        "fs.authorize",
       ],
       events: [
         "chat",
@@ -171,6 +174,8 @@ export const handleConnect: Handler<"connect"> = async (ctx) => {
         "surface.opened",
         "surface.closed",
         "surface.updated",
+        "surface.eval",
+        "surface.eval.result",
       ],
     },
   };
diff --git a/gateway/src/gateway/rpc-handlers/fs.ts b/gateway/src/gateway/rpc-handlers/fs.ts
new file mode 100644
index 0000000..52c11b5
--- /dev/null
+++ b/gateway/src/gateway/rpc-handlers/fs.ts
@@ -0,0 +1,19 @@
+import type { Handler } from "../../protocol/methods";
+import { RpcError } from "../../shared/utils";
+
+export const handleFsAuthorize: Handler<"fs.authorize"> = ({ gw, params }) => {
+  if (!params?.pathPrefix || typeof params.pathPrefix !== "string") {
+    throw new RpcError(400, "pathPrefix is required");
+  }
+  if (params.mode !== "read" && params.mode !== "write") {
+    throw new RpcError(400, "mode must be 'read' or 'write'");
+  }
+
+  // Sanitize: no path traversal, no leading slash
+  const cleaned = params.pathPrefix.replace(/^\/+/, "").replace(/\.\.\//g, "");
+  if (!cleaned) {
+    throw new RpcError(400, "pathPrefix is empty after sanitization");
+  }
+
+  return gw.authorizeFs(cleaned, params.mode);
+};
diff --git a/gateway/src/gateway/rpc-handlers/index.ts b/gateway/src/gateway/rpc-handlers/index.ts
index 607537f..40781a2 100644
--- a/gateway/src/gateway/rpc-handlers/index.ts
+++ b/gateway/src/gateway/rpc-handlers/index.ts
@@ -64,7 +64,10 @@ import {
   handleSurfaceUpdate,
   handleSurfaceFocus,
   handleSurfaceList,
+  handleSurfaceEval,
+  handleSurfaceEvalResult,
 } from "./surface";
+import { handleFsAuthorize } from "./fs";
 
 export function buildRpcHandlers(): Partial<{ [M in RpcMethod]: Handler<M> }> {
   return {
@@ -123,5 +126,8 @@ export function buildRpcHandlers(): Partial<{ [M in RpcMethod]: Handler<M> }> {
     "surface.update": handleSurfaceUpdate,
     "surface.focus": handleSurfaceFocus,
     "surface.list": handleSurfaceList,
+    "surface.eval": handleSurfaceEval,
+    "surface.eval.result": handleSurfaceEvalResult,
+    "fs.authorize": handleFsAuthorize,
   };
 }
diff --git a/gateway/src/gateway/rpc-handlers/surface.ts b/gateway/src/gateway/rpc-handlers/surface.ts
index 3c7d823..f234a12 100644
--- a/gateway/src/gateway/rpc-handlers/surface.ts
+++ b/gateway/src/gateway/rpc-handlers/surface.ts
@@ -1,11 +1,14 @@
+import { env } from "cloudflare:workers";
 import { RpcError } from "../../shared/utils";
 import { snapshot, type Proxied } from "../../shared/persisted-object";
 import type { Handler } from "../../protocol/methods";
+import { DEFER_RESPONSE } from "../../protocol/methods";
 import type { Surface } from "../../protocol/surface";
 import type {
   SurfaceOpenedPayload,
   SurfaceClosedPayload,
   SurfaceUpdatedPayload,
+  SurfaceEvalRequestPayload,
 } from "../../protocol/surface";
 
 /** Cast a PersistedObject value to Proxied for snapshot(). */
@@ -84,6 +87,12 @@ export const handleSurfaceClose: Handler<"surface.close"> = ({ gw, ws, params })
     throw new RpcError(404, `Surface not found: ${params.surfaceId}`);
   }
 
+  // Release browser profile lock if held
+  const profileId = surface.profileId;
+  if (profileId) {
+    gw.releaseProfileLock(profileId, params.surfaceId);
+  }
+
   const targetClientId = surface.targetClientId;
   delete gw.surfaces[params.surfaceId];
 
@@ -91,6 +100,7 @@ export const handleSurfaceClose: Handler<"surface.close"> = ({ gw, ws, params })
   gw.broadcastSurfaceEvent<SurfaceClosedPayload>("surface.closed", {
     surfaceId: params.surfaceId,
     targetClientId,
+    profileId,
   }, targetClientId, ws);
 
   console.log(`[Gateway] Surface closed: ${params.surfaceId}`);
@@ -170,3 +180,116 @@ export const handleSurfaceList: Handler<"surface.list"> = ({ gw, params }) => {
     count: filtered.length,
   };
 };
+
+/**
+ * Execute JavaScript in a webview surface.
+ * This is a deferred handler — we send the eval request to the target node
+ * and wait for `surface.eval.result` to come back before responding.
+ */
+export const handleSurfaceEval: Handler<"surface.eval"> = ({ gw, ws, frame, params }) => {
+  if (!params?.surfaceId || !params?.script) {
+    throw new RpcError(400, "surfaceId and script are required");
+  }
+
+  const surface = gw.surfaces[params.surfaceId];
+  if (!surface) {
+    throw new RpcError(404, `Surface not found: ${params.surfaceId}`);
+  }
+
+  // Only webview surfaces support eval
+  if (surface.kind !== "webview") {
+    throw new RpcError(400, `Surface kind "${surface.kind}" does not support eval`);
+  }
+
+  const targetClientId = surface.targetClientId;
+
+  // Must be targeting a node (not a web client iframe)
+  if (!gw.nodes.has(targetClientId)) {
+    throw new RpcError(400, "Surface target is not a display node — eval requires native webview");
+  }
+
+  const targetWs = gw.nodes.get(targetClientId);
+  if (!targetWs || targetWs.readyState !== WebSocket.OPEN) {
+    throw new RpcError(503, `Target node "${targetClientId}" is not connected`);
+  }
+
+  const evalId = params.evalId ?? crypto.randomUUID();
+
+  // Store the pending eval so we can send the deferred response when the result arrives
+  gw.pendingEvals.set(evalId, { ws, frameId: frame.id });
+
+  // Send the eval request to the target node as an event
+  const evalPayload: SurfaceEvalRequestPayload = {
+    evalId,
+    surfaceId: params.surfaceId,
+    script: params.script,
+  };
+  targetWs.send(JSON.stringify({ type: "evt", event: "surface.eval", payload: evalPayload }));
+
+  console.log(`[Gateway] Surface eval dispatched: ${evalId} -> surface ${params.surfaceId}`);
+
+  // Defer the response — it will be sent when surface.eval.result arrives
+  return DEFER_RESPONSE;
+};
+
+/**
+ * Receive the result of a surface eval from a node.
+ * Routes back to Session DO (agent tool path) and/or resolves WS deferred response.
+ */
+export const handleSurfaceEvalResult: Handler<"surface.eval.result"> = async ({ gw, params }) => {
+  if (!params?.evalId) {
+    throw new RpcError(400, "evalId is required");
+  }
+
+  console.log(
+    `[Gateway] surface.eval.result received: evalId=${params.evalId} ok=${params.ok} hasResult=${params.result !== undefined} result=${JSON.stringify(params.result)?.slice(0, 200)} error=${params.error}`,
+  );
+
+  // ── Agent tool path: route result back to Session DO via toolResult() ──
+  const route = gw.pendingEvalRoutes[params.evalId];
+  if (route && typeof route === "object" && route.sessionKey && route.callId) {
+    const toolResult = params.ok
+      ? { callId: route.callId, result: { evalId: params.evalId, surfaceId: params.surfaceId, value: params.result } }
+      : { callId: route.callId, error: params.error || "Eval failed" };
+    console.log(
+      `[Gateway] Routing eval result to session ${route.sessionKey} callId=${route.callId} toolResult=${JSON.stringify(toolResult)?.slice(0, 300)}`,
+    );
+    try {
+      const sessionStub = env.SESSION.getByName(route.sessionKey);
+      await sessionStub.toolResult(toolResult);
+    } catch (e) {
+      console.error(`[Gateway] Failed to route eval result to session ${route.sessionKey}:`, e);
+    }
+    delete gw.pendingEvalRoutes[params.evalId];
+  } else {
+    console.log(
+      `[Gateway] No agent route found for evalId=${params.evalId} (pendingEvalRoutes keys: ${Object.keys(gw.pendingEvalRoutes).join(", ")})`,
+    );
+  }
+
+  // ── WS deferred path: direct WS caller → pendingEvals ──
+  const pending = gw.pendingEvals.get(params.evalId);
+  if (pending) {
+    gw.pendingEvals.delete(params.evalId);
+
+    // Send the deferred response to the original WS caller
+    const response = {
+      type: "res" as const,
+      id: pending.frameId,
+      ok: params.ok,
+      payload: {
+        evalId: params.evalId,
+        surfaceId: params.surfaceId,
+        ok: params.ok,
+        result: params.result,
+        error: params.error,
+      },
+    };
+
+    if (pending.ws.readyState === WebSocket.OPEN) {
+      pending.ws.send(JSON.stringify(response));
+    }
+  }
+
+  return { ok: true as const };
+};
diff --git a/gateway/src/index.ts b/gateway/src/index.ts
index a2c20e9..b1c0e99 100644
--- a/gateway/src/index.ts
+++ b/gateway/src/index.ts
@@ -97,9 +97,84 @@ export default {
       return stub.fetch(request);
     }
 
-    // Serve media files from R2
-    // /media/{uuid}.{ext}
-    // TODO: either remove or auth this
+    // ── Authenticated R2 access: /fs/{r2-key} ──
+    // Clients obtain a short-lived token via the `fs.authorize` WS RPC,
+    // then use it as a Bearer header here for direct R2 read/write.
+    const fsMatch = url.pathname.match(/^\/fs\/(.+)$/);
+    if (fsMatch && (request.method === "GET" || request.method === "PUT")) {
+      const r2Key = decodeURIComponent(fsMatch[1]);
+
+      // Extract Bearer token
+      const authHeader = request.headers.get("Authorization");
+      const token = authHeader?.startsWith("Bearer ")
+        ? authHeader.slice(7)
+        : null;
+      if (!token) {
+        return new Response("Unauthorized", { status: 401 });
+      }
+
+      // Path traversal guard
+      if (r2Key.includes("..")) {
+        return new Response("Bad Request", { status: 400 });
+      }
+
+      // Verify token against the Gateway DO
+      const stub = env.GATEWAY.get(env.GATEWAY.idFromName("singleton"));
+      const mode = request.method === "GET" ? "read" : "write";
+      const valid = await stub.verifyFsToken(token, r2Key, mode as "read" | "write");
+      if (!valid) {
+        return new Response("Forbidden", { status: 403 });
+      }
+
+      if (request.method === "GET") {
+        const object = await env.STORAGE.get(r2Key);
+        if (!object) {
+          return new Response("Not Found", { status: 404 });
+        }
+        const headers = new Headers();
+        headers.set(
+          "Content-Type",
+          object.httpMetadata?.contentType || "application/octet-stream",
+        );
+        headers.set("Cache-Control", "private, no-cache");
+        return new Response(object.body, { headers });
+      }
+
+      // PUT — write to R2
+      if (!request.body) {
+        return new Response("Body required", { status: 400 });
+      }
+
+      // Enforce 50 MB limit
+      const contentLength = request.headers.get("Content-Length");
+      if (contentLength && parseInt(contentLength, 10) > 50 * 1024 * 1024) {
+        return new Response("Payload Too Large", { status: 413 });
+      }
+
+      // Extract custom metadata from headers (optional)
+      const customMetadata: Record<string, string> = {};
+      const metaHeader = request.headers.get("X-R2-Meta");
+      if (metaHeader) {
+        try {
+          const parsed = JSON.parse(metaHeader);
+          for (const [k, v] of Object.entries(parsed)) {
+            if (typeof v === "string") customMetadata[k] = v;
+          }
+        } catch { /* ignore malformed metadata */ }
+      }
+
+      await env.STORAGE.put(r2Key, request.body, {
+        httpMetadata: {
+          contentType:
+            request.headers.get("Content-Type") || "application/octet-stream",
+        },
+        customMetadata,
+      });
+
+      return new Response("OK", { status: 200 });
+    }
+
+    // Legacy media endpoint (unauthenticated, to be migrated to /fs/)
     const mediaMatch = url.pathname.match(
       /^\/media\/([a-f0-9-]+\.[a-z0-9]+)$/i,
     );
@@ -114,7 +189,6 @@ export default {
       // Check if expired
       const expiresAt = object.customMetadata?.expiresAt;
       if (expiresAt && parseInt(expiresAt, 10) < Date.now()) {
-        // Clean up expired file
         await env.STORAGE.delete(key);
         return new Response("Expired", { status: 410 });
       }
@@ -125,7 +199,6 @@ export default {
         object.httpMetadata?.contentType || "application/octet-stream",
       );
       headers.set("Cache-Control", "private, max-age=3600");
-      // Allow cross-origin for LLM APIs
       headers.set("Access-Control-Allow-Origin", "*");
 
       return new Response(object.body, { headers });
diff --git a/gateway/src/protocol/fs.ts b/gateway/src/protocol/fs.ts
new file mode 100644
index 0000000..b7196d1
--- /dev/null
+++ b/gateway/src/protocol/fs.ts
@@ -0,0 +1,33 @@
+/**
+ * Filesystem (R2) access protocol.
+ *
+ * Clients request short-lived tokens via the `fs.authorize` RPC over WebSocket.
+ * The token is then used as a Bearer header on HTTP requests to `/fs/{r2-key}`.
+ * The worker fetch handler validates the token against the Gateway DO before
+ * proxying the R2 read/write.
+ */
+
+export type FsMode = "read" | "write";
+
+export type FsAuthorizeParams = {
+  /** R2 key prefix this token grants access to (e.g. "browser-profiles/github.com/") */
+  pathPrefix: string;
+  /** read = GET, write = PUT */
+  mode: FsMode;
+};
+
+export type FsAuthorizeResult = {
+  /** Opaque token to use as Bearer header */
+  token: string;
+  /** When this token expires (unix ms) */
+  expiresAt: number;
+  /** The /fs/ URL path prefix to use */
+  pathPrefix: string;
+};
+
+/** Internal token record stored in Gateway DO memory. */
+export type FsToken = {
+  pathPrefix: string;
+  mode: FsMode;
+  expiresAt: number;
+};
diff --git a/gateway/src/protocol/methods.ts b/gateway/src/protocol/methods.ts
index 3114da9..6f9b06c 100644
--- a/gateway/src/protocol/methods.ts
+++ b/gateway/src/protocol/methods.ts
@@ -46,7 +46,10 @@ import type {
   SurfaceFocusResult,
   SurfaceListParams,
   SurfaceListResult,
+  SurfaceEvalParams,
+  SurfaceEvalResult,
 } from "./surface";
+import type { FsAuthorizeParams, FsAuthorizeResult } from "./fs";
 import type {
   CronJob,
   CronJobCreate,
@@ -462,6 +465,16 @@ export type RpcMethods = {
     result: SurfaceListResult;
   };
 
+  "surface.eval": {
+    params: SurfaceEvalParams;
+    result: SurfaceEvalResult;
+  };
+
+  "surface.eval.result": {
+    params: SurfaceEvalResult;
+    result: { ok: true };
+  };
+
   "tool.request": {
     params: ToolRequestParams;
     result: {
@@ -493,10 +506,15 @@ export type RpcMethods = {
     params: TransferDoneParams;
     result: { ok: true };
   };
+
+  "fs.authorize": {
+    params: FsAuthorizeParams;
+    result: FsAuthorizeResult;
+  };
 };
 
 export type RpcMethod = keyof RpcMethods;
-export type DeferrableMethod = "tool.invoke" | "logs.get";
+export type DeferrableMethod = "tool.invoke" | "logs.get" | "surface.eval";
 export type ParamsOf<M extends RpcMethod> = RpcMethods[M]["params"];
 export type ResultOf<M extends RpcMethod> = RpcMethods[M]["result"];
 export type HandlerResult<M extends RpcMethod> =
diff --git a/gateway/src/protocol/surface.ts b/gateway/src/protocol/surface.ts
index 599eae6..aa35a2a 100644
--- a/gateway/src/protocol/surface.ts
+++ b/gateway/src/protocol/surface.ts
@@ -46,6 +46,13 @@ export type Surface = {
   zIndex?: number;
   createdAt: number;
   updatedAt: number;
+  // Browser profile persistence (webview surfaces)
+  profileId?: string;         // derived from URL origin (e.g. "github.com")
+  profileVersion?: number;    // monotonic, incremented on each R2 upload
+  profileLock?: {             // set when a node has the profile open
+    nodeId: string;
+    surfaceId: string;
+  };
 };
 
 // ── RPC params / results ──
@@ -103,6 +110,27 @@ export type SurfaceListResult = {
   count: number;
 };
 
+// ── Eval (JavaScript execution in webview surfaces) ──
+
+export type SurfaceEvalParams = {
+  surfaceId: string;
+  /** JavaScript code to execute in the webview context. */
+  script: string;
+  /** Unique eval ID for correlating the async result. Auto-generated if omitted. */
+  evalId?: string;
+};
+
+export type SurfaceEvalResult = {
+  evalId: string;
+  surfaceId: string;
+  /** True if the script executed without throwing. */
+  ok: boolean;
+  /** JSON-serializable return value from the script (if ok). */
+  result?: unknown;
+  /** Error message (if !ok). */
+  error?: string;
+};
+
 // ── Event payloads ──
 
 export type SurfaceOpenedPayload = {
@@ -112,8 +140,25 @@ export type SurfaceOpenedPayload = {
 export type SurfaceClosedPayload = {
   surfaceId: string;
   targetClientId: string;
+  profileId?: string;
 };
 
 export type SurfaceUpdatedPayload = {
   surface: Surface;
 };
+
+/** Sent by gateway to the target node to request JS execution. */
+export type SurfaceEvalRequestPayload = {
+  evalId: string;
+  surfaceId: string;
+  script: string;
+};
+
+/** Sent by the node back to gateway with the eval result. */
+export type SurfaceEvalResultPayload = {
+  evalId: string;
+  surfaceId: string;
+  ok: boolean;
+  result?: unknown;
+  error?: string;
+};
diff --git a/gateway/src/session/do.ts b/gateway/src/session/do.ts
index 9b642c6..b28decc 100644
--- a/gateway/src/session/do.ts
+++ b/gateway/src/session/do.ts
@@ -2105,11 +2105,20 @@ export class Session extends DurableObject<Env> {
           bucket: this.env.STORAGE,
           agentId,
           gateway,
+          callId: toolCall.id,
+          sessionKey: this.meta.sessionKey,
         },
         toolCall.name,
         toolCall.args,
       );
 
+      // Deferred tools (e.g. eval) will have their result routed back
+      // asynchronously via toolResult(). Don't set result/error here.
+      if (result.deferred) {
+        console.log(`[Session] Native tool ${toolCall.name} deferred (callId=${toolCall.id})`);
+        return;
+      }
+
       if (result.ok) {
         toolCall.result = result.result;
       } else {
diff --git a/gateway/ui/src/react/App.tsx b/gateway/ui/src/react/App.tsx
index c7accc8..fdbcf14 100644
--- a/gateway/ui/src/react/App.tsx
+++ b/gateway/ui/src/react/App.tsx
@@ -50,7 +50,7 @@ export function App() {
       onSwitchTab={switchTab}
       connectionState={connectionState}
       theme={settings.theme}
-      wallpaper={settings.wallpaper ?? "starfield"}
+      wallpaper={settings.wallpaper ?? "mesh"}
       onToggleTheme={() =>
         updateSettings({
           theme: settings.theme === "dark" ? "light" : "dark",
diff --git a/gateway/ui/src/react/components/OsShell.tsx b/gateway/ui/src/react/components/OsShell.tsx
index 3b95c19..71a7eb0 100644
--- a/gateway/ui/src/react/components/OsShell.tsx
+++ b/gateway/ui/src/react/components/OsShell.tsx
@@ -417,6 +417,7 @@ export function OsShell({
 }: OsShellProps) {
   // ── Surface protocol integration ──
   const storeSurfaces = useReactUiStore((s) => s.surfaces);
+  const storeClientId = useReactUiStore((s) => s.clientId);
   const storeSurfaceOpen = useReactUiStore((s) => s.surfaceOpen);
   const storeSurfaceClose = useReactUiStore((s) => s.surfaceClose);
   const storeSurfaceUpdate = useReactUiStore((s) => s.surfaceUpdate);
@@ -1185,6 +1186,9 @@ export function OsShell({
       if (localSurfaceIds.has(surfaceId)) continue;
       if (ownedSurfaceIdsRef.current.has(surfaceId)) continue; // we opened it, patch is in flight
       if (surface.state === "closed") continue;
+      // Only create windows for surfaces targeted at this client.
+      // Surfaces targeted at other clients or display nodes are not ours to render.
+      if (surface.targetClientId && storeClientId && surface.targetClientId !== storeClientId) continue;
       // Skip app surfaces that match a window with a pending surfaceOpen RPC.
       // This prevents the race where the store gets the surface before the
       // .then() callback patches the window's surfaceId.
@@ -1261,7 +1265,7 @@ export function OsShell({
         );
       }
     }
-  }, [storeSurfaces]);
+  }, [storeSurfaces, storeClientId]);
 
   const commandActions = useMemo<CommandAction[]>(() => {
     const actions: CommandAction[] = [];
diff --git a/gateway/ui/src/react/components/Wallpaper.tsx b/gateway/ui/src/react/components/Wallpaper.tsx
index a4f1324..e42ae8f 100644
--- a/gateway/ui/src/react/components/Wallpaper.tsx
+++ b/gateway/ui/src/react/components/Wallpaper.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, type CSSProperties, type MouseEvent as ReactMouseEvent } from "react";
+import { useCallback, useRef, type CSSProperties, type MouseEvent as ReactMouseEvent } from "react";
 import { WALLPAPER_OPTIONS, type Wallpaper } from "../../ui/storage";
 
 type WallpaperBgProps = {
@@ -6,86 +6,6 @@ type WallpaperBgProps = {
   onChangeWallpaper: (wallpaper: Wallpaper) => void;
 };
 
-/** Render ~120 tiny stars as absolutely positioned dots. */
-function StarCanvas() {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-
-    let animId: number;
-    let w = 0;
-    let h = 0;
-
-    type Star = { x: number; y: number; r: number; a: number; da: number; dx: number; dy: number };
-    let stars: Star[] = [];
-
-    function resize() {
-      w = window.innerWidth * window.devicePixelRatio;
-      h = window.innerHeight * window.devicePixelRatio;
-      canvas!.width = w;
-      canvas!.height = h;
-      canvas!.style.width = `${window.innerWidth}px`;
-      canvas!.style.height = `${window.innerHeight}px`;
-    }
-
-    function init() {
-      resize();
-      const count = Math.round((w * h) / 12000); // density
-      stars = Array.from({ length: count }, () => ({
-        x: Math.random() * w,
-        y: Math.random() * h,
-        r: Math.random() * 1.2 + 0.3,
-        a: Math.random(),
-        da: (Math.random() - 0.5) * 0.003,
-        dx: (Math.random() - 0.5) * 0.08,
-        dy: (Math.random() - 0.5) * 0.08,
-      }));
-    }
-
-    function draw() {
-      const isLight = document.documentElement.getAttribute("data-theme") === "light";
-      ctx!.clearRect(0, 0, w, h);
-      for (const star of stars) {
-        star.x += star.dx;
-        star.y += star.dy;
-        star.a += star.da;
-        if (star.a > 1 || star.a < 0.1) star.da = -star.da;
-        if (star.x < 0) star.x = w;
-        if (star.x > w) star.x = 0;
-        if (star.y < 0) star.y = h;
-        if (star.y > h) star.y = 0;
-
-        ctx!.beginPath();
-        ctx!.arc(star.x, star.y, star.r, 0, Math.PI * 2);
-        ctx!.fillStyle = isLight
-          ? `rgba(0, 0, 0, ${star.a * 0.25})`
-          : `rgba(255, 255, 255, ${star.a * 0.7})`;
-        ctx!.fill();
-      }
-      animId = requestAnimationFrame(draw);
-    }
-
-    init();
-    draw();
-    window.addEventListener("resize", init);
-    return () => {
-      cancelAnimationFrame(animId);
-      window.removeEventListener("resize", init);
-    };
-  }, []);
-
-  return (
-    <canvas
-      ref={canvasRef}
-      style={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none" }}
-    />
-  );
-}
-
 export function WallpaperBg({ wallpaper, onChangeWallpaper }: WallpaperBgProps) {
   const menuRef = useRef<HTMLDivElement | null>(null);
 
@@ -95,7 +15,6 @@ export function WallpaperBg({ wallpaper, onChangeWallpaper }: WallpaperBgProps)
     }
   }, []);
 
-  // Right-click context menu
   const onContextMenu = useCallback(
     (event: ReactMouseEvent<HTMLDivElement>) => {
       event.preventDefault();
@@ -109,7 +28,6 @@ export function WallpaperBg({ wallpaper, onChangeWallpaper }: WallpaperBgProps)
         closeMenu();
         window.removeEventListener("click", onClickAway);
       };
-      // Delay to not immediately close
       requestAnimationFrame(() => {
         window.addEventListener("click", onClickAway);
       });
@@ -130,8 +48,6 @@ export function WallpaperBg({ wallpaper, onChangeWallpaper }: WallpaperBgProps)
       className={`os-wallpaper os-wp-${wallpaper}`}
       onContextMenu={onContextMenu}
     >
-      {wallpaper === "starfield" ? <StarCanvas /> : null}
-
       {/* Right-click context menu */}
       <div ref={menuRef} className="os-ctx-menu" style={{ display: "none" } as CSSProperties}>
         <div className="os-ctx-menu-label">Wallpaper</div>
diff --git a/gateway/ui/src/react/state/store.ts b/gateway/ui/src/react/state/store.ts
index 88f46cc..911b143 100644
--- a/gateway/ui/src/react/state/store.ts
+++ b/gateway/ui/src/react/state/store.ts
@@ -144,6 +144,8 @@ type ReactUiStore = {
   pairingLoading: boolean;
 
   surfaces: Record<string, Surface>;
+  /** This web client's stable identity (persisted in localStorage). */
+  clientId: string | null;
 
   client: GatewayClient | null;
 
@@ -351,6 +353,7 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
   pairingLoading: false,
 
   surfaces: {},
+  clientId: null,
 
   client: null,
 
@@ -413,7 +416,7 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
       url: getGatewayUrl(get().settings),
       token: get().settings.token || undefined,
       onStateChange: (state) => {
-        set({ connectionState: state });
+        set({ connectionState: state, clientId: client.clientId });
         if (state === "connected") {
           localStorage.setItem("gsv-connected-once", "true");
           set({
@@ -425,7 +428,7 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
             get().loadTools(),
             get().loadSessions(),
             get().loadChannels(),
-            get().surfaceList(),
+            get().surfaceList(client.clientId),
           ]).then(() => get().loadTabData(get().tab));
         } else {
           syncChannelsAutoRefresh(get);
diff --git a/gateway/ui/src/react/views/ChatView.tsx b/gateway/ui/src/react/views/ChatView.tsx
index 6238383..f104983 100644
--- a/gateway/ui/src/react/views/ChatView.tsx
+++ b/gateway/ui/src/react/views/ChatView.tsx
@@ -1,7 +1,6 @@
 import DOMPurify from "dompurify";
 import { marked } from "marked";
 import { FormEvent, useEffect, useMemo, useRef, useState } from "react";
-import { Button } from "@cloudflare/kumo/components/button";
 import type {
   ContentBlock,
   ImageBlock,
@@ -23,9 +22,7 @@ function formatTime(ts: number): string {
 }
 
 function countLines(text: string): number {
-  if (!text) {
-    return 0;
-  }
+  if (!text) return 0;
   return text.split("\n").length;
 }
 
@@ -38,15 +35,9 @@ function shouldCollapseJson(jsonText: string): boolean {
 
 function formatJsonIfPossible(text: string): string | null {
   const trimmed = text.trim();
-  if (!trimmed) {
-    return null;
-  }
-
+  if (!trimmed) return null;
   const first = trimmed[0];
-  if (first !== "{" && first !== "[" && first !== "\"") {
-    return null;
-  }
-
+  if (first !== "{" && first !== "[" && first !== "\"") return null;
   try {
     const parsed = JSON.parse(trimmed);
     return JSON.stringify(parsed, null, 2);
@@ -56,33 +47,24 @@ function formatJsonIfPossible(text: string): string | null {
 }
 
 function getImageSource(block: ImageBlock): string | null {
-  if (block.data) {
-    return `data:${block.mimeType || "image/png"};base64,${block.data}`;
-  }
-  if (block.url) {
-    return block.url;
-  }
+  if (block.data) return `data:${block.mimeType || "image/png"};base64,${block.data}`;
+  if (block.url) return block.url;
   if (block.r2Key) {
     const fileName = block.r2Key.split("/").pop();
-    if (fileName) {
-      return `/media/${fileName}`;
-    }
+    if (fileName) return `/media/${fileName}`;
   }
   return null;
 }
 
 function MarkdownContent({ text }: { text: string }) {
   const safeHtml = useMemo(() => {
-    const rendered = marked.parse(text, {
-      gfm: true,
-      breaks: true,
-    }) as string;
+    const rendered = marked.parse(text, { gfm: true, breaks: true }) as string;
     return DOMPurify.sanitize(rendered);
   }, [text]);
 
   return (
     <div
-      className="message-content"
+      className="chat-md"
       dangerouslySetInnerHTML={{ __html: safeHtml }}
     />
   );
@@ -90,7 +72,7 @@ function MarkdownContent({ text }: { text: string }) {
 
 function ThinkingContent({ block }: { block: ThinkingBlock }) {
   return (
-    <details className="thinking-block">
+    <details className="chat-thinking">
       <summary>Thinking</summary>
       <pre>{block.text}</pre>
     </details>
@@ -100,115 +82,78 @@ function ThinkingContent({ block }: { block: ThinkingBlock }) {
 function ImageContent({ block }: { block: ImageBlock }) {
   const src = getImageSource(block);
   if (!src) {
-    return (
-      <div className="message-content">
-        <p className="muted">[image unavailable]</p>
-      </div>
-    );
+    return <p className="muted">[image unavailable]</p>;
   }
-
   return (
-    <div className="message-image-wrap">
-      <img className="message-image" src={src} alt="message image" loading="lazy" />
+    <div className="chat-img-wrap">
+      <img className="chat-img" src={src} alt="message image" loading="lazy" />
     </div>
   );
 }
 
 function renderContentBlock(block: ContentBlock, key: string) {
-  if (block.type === "text") {
-    return <MarkdownContent key={key} text={block.text} />;
-  }
-  if (block.type === "image") {
-    return <ImageContent key={key} block={block} />;
-  }
-  if (block.type === "thinking") {
-    return <ThinkingContent key={key} block={block} />;
-  }
+  if (block.type === "text") return <MarkdownContent key={key} text={block.text} />;
+  if (block.type === "image") return <ImageContent key={key} block={block} />;
+  if (block.type === "thinking") return <ThinkingContent key={key} block={block} />;
   return null;
 }
 
 function ToolCallCard({ toolCall }: { toolCall: ToolCallBlock }) {
+  const [open, setOpen] = useState(false);
   return (
-    <div className="tool-call">
-      <div className="tool-call-header">
-        <span className="tool-call-name">
-          <span>🔧</span>
-          <span>{toolCall.name}</span>
-        </span>
-        <span className="tool-call-status">
-          <span className="pill pill-success">called</span>
-        </span>
-      </div>
-      <div className="tool-call-body">
-        <pre>
+    <div className="chat-tool">
+      <button type="button" className="chat-tool-header" onClick={() => setOpen(!open)}>
+        <span className="chat-tool-name">{toolCall.name}</span>
+        <span className="chat-tool-badge">called</span>
+        <svg className={`chat-tool-chevron ${open ? "open" : ""}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+      </button>
+      {open ? (
+        <pre className="chat-tool-body">
           <code>{JSON.stringify(toolCall.arguments, null, 2)}</code>
         </pre>
-      </div>
+      ) : null}
     </div>
   );
 }
 
-function ToolResultContent({
-  block,
-  blockKey,
-}: {
-  block: ContentBlock;
-  blockKey: string;
-}) {
-  if (block.type !== "text") {
-    return renderContentBlock(block, blockKey);
-  }
+function ToolResultContent({ block, blockKey }: { block: ContentBlock; blockKey: string }) {
+  if (block.type !== "text") return renderContentBlock(block, blockKey);
 
   const jsonText = formatJsonIfPossible(block.text);
   if (jsonText) {
     if (shouldCollapseJson(jsonText)) {
       const lineCount = countLines(jsonText);
       return (
-        <details className="tool-result-json-details">
+        <details className="chat-tool-json-details">
           <summary>
-            <span className="tool-result-json-toggle-closed">
-              Show JSON result ({lineCount} lines)
-            </span>
-            <span className="tool-result-json-toggle-open">Hide JSON result</span>
+            <span className="chat-tool-json-toggle-closed">Show result ({lineCount} lines)</span>
+            <span className="chat-tool-json-toggle-open">Hide result</span>
           </summary>
-          <pre className="tool-result-json">
-            <code>{jsonText}</code>
-          </pre>
+          <pre className="chat-tool-json"><code>{jsonText}</code></pre>
         </details>
       );
     }
-
-    return (
-      <pre className="tool-result-json">
-        <code>{jsonText}</code>
-      </pre>
-    );
+    return <pre className="chat-tool-json"><code>{jsonText}</code></pre>;
   }
 
   return <MarkdownContent text={block.text} />;
 }
 
-function MessageBubble({ message }: { message: Message }) {
-  if (message.role === "toolResult") {
-    const toolMessage = message as ToolResultMessage;
-    return (
-      <div className="message assistant">
-        <div
-          className={`message-bubble tool-result-bubble ${
-            toolMessage.isError ? "tool-result-error" : ""
-          }`}
-        >
-          <div className="tool-result-header">
-            <span className="tool-call-name">
-              <span>🔧</span>
-              <span>{toolMessage.toolName}</span>
-            </span>
-            <span className={`pill ${toolMessage.isError ? "pill-danger" : "pill-success"}`}>
-              {toolMessage.isError ? "error" : "result"}
-            </span>
-          </div>
-          <div className="tool-result-body">
-            {toolMessage.content.map((block, index) => (
+function ToolResultBubble({ message }: { message: ToolResultMessage }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="chat-msg chat-msg-assistant">
+      <div className="chat-tool">
+        <button type="button" className="chat-tool-header" onClick={() => setOpen(!open)}>
+          <span className="chat-tool-name">{message.toolName}</span>
+          <span className={`chat-tool-badge ${message.isError ? "error" : ""}`}>
+            {message.isError ? "error" : "result"}
+          </span>
+          <svg className={`chat-tool-chevron ${open ? "open" : ""}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+        </button>
+        {open ? (
+          <div className="chat-tool-result-body">
+            {message.content.map((block, index) => (
               <ToolResultContent
                 key={`tool-result-${index}`}
                 block={block}
@@ -216,14 +161,18 @@ function MessageBubble({ message }: { message: Message }) {
               />
             ))}
           </div>
-        </div>
-        {toolMessage.timestamp ? (
-          <div className="message-meta">
-            <span>{formatTime(toolMessage.timestamp)}</span>
-          </div>
         ) : null}
       </div>
-    );
+      {message.timestamp ? (
+        <span className="chat-meta">{formatTime(message.timestamp)}</span>
+      ) : null}
+    </div>
+  );
+}
+
+function MessageBubble({ message }: { message: Message }) {
+  if (message.role === "toolResult") {
+    return <ToolResultBubble message={message as ToolResultMessage} />;
   }
 
   const isUser = message.role === "user";
@@ -235,20 +184,18 @@ function MessageBubble({ message }: { message: Message }) {
   const visibleBlocks = blocks.filter((b) => b.type !== "toolCall");
 
   return (
-    <div className={`message ${isUser ? "user" : "assistant"}`}>
-      <div className="message-bubble">
-        {visibleBlocks.map((block, index) => renderContentBlock(block, `content-${index}`))}
-        {toolCalls.length > 0
-          ? toolCalls.map((toolCall) => (
-              <ToolCallCard key={`${toolCall.id}-${toolCall.name}`} toolCall={toolCall} />
-            ))
-          : null}
-      </div>
-      {message.timestamp ? (
-        <div className="message-meta">
-          <span>{formatTime(message.timestamp)}</span>
+    <div className={`chat-msg ${isUser ? "chat-msg-user" : "chat-msg-assistant"}`}>
+      {visibleBlocks.length > 0 ? (
+        <div className={`chat-bubble ${isUser ? "chat-bubble-user" : "chat-bubble-assistant"}`}>
+          {visibleBlocks.map((block, index) => renderContentBlock(block, `content-${index}`))}
         </div>
       ) : null}
+      {toolCalls.map((toolCall) => (
+        <ToolCallCard key={`${toolCall.id}-${toolCall.name}`} toolCall={toolCall} />
+      ))}
+      {message.timestamp ? (
+        <span className="chat-meta">{formatTime(message.timestamp)}</span>
+      ) : null}
     </div>
   );
 }
@@ -266,19 +213,20 @@ export function ChatView() {
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const messagesRef = useRef<HTMLDivElement | null>(null);
 
+  // Focus input on mount
   useEffect(() => {
-    if (!messagesRef.current) {
-      return;
-    }
+    inputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (!messagesRef.current) return;
     messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
   }, [chatMessages, chatStream, chatLoading, chatSending]);
 
   const submit = (event: FormEvent) => {
     event.preventDefault();
     const text = input.trim();
-    if (!text) {
-      return;
-    }
+    if (!text) return;
     void sendMessage(text);
     setInput("");
     if (inputRef.current) {
@@ -286,32 +234,26 @@ export function ChatView() {
     }
   };
 
+  const disabled = chatSending || connectionState !== "connected";
+
   return (
-    <div className="chat-container">
-      <div className="session-bar">
-        <span className="session-key">{settings.sessionKey}</span>
-        <div className="session-stats">
-          <span>{chatMessages.length} messages</span>
-        </div>
+    <div className="chat-shell">
+      {/* Session indicator — subtle, inline with the window */}
+      <div className="chat-session-hint">
+        <span className="mono">{settings.sessionKey.split(":").slice(-1)[0] || settings.sessionKey}</span>
+        <span className="chat-session-count">{chatMessages.length} msgs</span>
       </div>
 
-      <div className="chat-messages" ref={messagesRef}>
+      {/* Messages */}
+      <div className="chat-scroll" ref={messagesRef}>
         {chatLoading ? (
-          <div className="thinking-indicator">
-            <div className="thinking-dots">
-              <span className="thinking-dot"></span>
-              <span className="thinking-dot"></span>
-              <span className="thinking-dot"></span>
-            </div>
-            <span>Loading messages...</span>
+          <div className="chat-status">
+            <div className="chat-dots"><span /><span /><span /></div>
+            <span>Loading...</span>
           </div>
         ) : chatMessages.length === 0 ? (
           <div className="chat-empty">
-            <div className="chat-empty-icon">💬</div>
-            <h3 className="chat-empty-title">Start a conversation</h3>
-            <p className="chat-empty-description">
-              Send a message to begin chatting with your GSV agent.
-            </p>
+            <p>Send a message to start.</p>
           </div>
         ) : (
           <>
@@ -323,13 +265,9 @@ export function ChatView() {
             ))}
             {chatStream ? <MessageBubble message={chatStream} /> : null}
             {chatSending && !chatStream ? (
-              <div className="message assistant">
-                <div className="thinking-indicator">
-                  <div className="thinking-dots">
-                    <span className="thinking-dot"></span>
-                    <span className="thinking-dot"></span>
-                    <span className="thinking-dot"></span>
-                  </div>
+              <div className="chat-msg chat-msg-assistant">
+                <div className="chat-status">
+                  <div className="chat-dots"><span /><span /><span /></div>
                   <span>Thinking...</span>
                 </div>
               </div>
@@ -338,43 +276,39 @@ export function ChatView() {
         )}
       </div>
 
-      <form className="chat-input-area" onSubmit={submit}>
-        <div className="chat-input-wrapper">
-          <textarea
-            ref={inputRef}
-            className="chat-input"
-            placeholder="Type a message..."
-            rows={1}
-            value={input}
-            disabled={chatSending || connectionState !== "connected"}
-            onChange={(event) => {
-              setInput(event.target.value);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter" && !event.shiftKey) {
-                event.preventDefault();
-                event.currentTarget.form?.requestSubmit();
-              }
-            }}
-            onInput={(event) => {
-              const textarea = event.currentTarget;
-              textarea.style.height = "auto";
-              textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
-            }}
-          ></textarea>
-          <Button
-            type="submit"
-            variant="primary"
-            shape="circle"
-            size="base"
-            className="chat-send-btn"
-            disabled={chatSending || connectionState !== "connected"}
-            loading={chatSending}
-            aria-label="Send message"
-          >
-            →
-          </Button>
-        </div>
+      {/* Input */}
+      <form className="chat-compose" onSubmit={submit}>
+        <textarea
+          ref={inputRef}
+          className="chat-compose-input"
+          placeholder="Message..."
+          rows={1}
+          value={input}
+          disabled={disabled}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              e.currentTarget.form?.requestSubmit();
+            }
+          }}
+          onInput={(e) => {
+            const ta = e.currentTarget;
+            ta.style.height = "auto";
+            ta.style.height = `${Math.min(ta.scrollHeight, 160)}px`;
+          }}
+        />
+        <button
+          type="submit"
+          className="chat-compose-send"
+          disabled={disabled}
+          aria-label="Send"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="22" y1="2" x2="11" y2="13" />
+            <polygon points="22 2 15 22 11 13 2 9 22 2" />
+          </svg>
+        </button>
       </form>
     </div>
   );
diff --git a/gateway/ui/src/react/views/SettingsView.tsx b/gateway/ui/src/react/views/SettingsView.tsx
index 6b38ee6..a663cd9 100644
--- a/gateway/ui/src/react/views/SettingsView.tsx
+++ b/gateway/ui/src/react/views/SettingsView.tsx
@@ -17,7 +17,7 @@ const SETTINGS_TABS: { id: SettingsTab; label: string }[] = [
 function DisplaySettings() {
   const settings = useReactUiStore((s) => s.settings);
   const updateSettings = useReactUiStore((s) => s.updateSettings);
-  const currentWallpaper = settings.wallpaper ?? "starfield";
+  const currentWallpaper = settings.wallpaper ?? "mesh";
 
   return (
     <div className="settings-display">
diff --git a/gateway/ui/src/styles/chat.css b/gateway/ui/src/styles/chat.css
index f9fb1d6..0b107ae 100644
--- a/gateway/ui/src/styles/chat.css
+++ b/gateway/ui/src/styles/chat.css
@@ -1,301 +1,394 @@
-/* ── Chat Container ── */
-.chat-container {
+/* ═══════════════════════════════════════════
+   Chat — OS Window App
+   Designed to render inside .os-window-content.
+   No own chrome; the window titlebar is the header.
+   ═══════════════════════════════════════════ */
+
+/* ── Layout ── */
+.chat-shell {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 0;
 }
 
-.session-bar {
+/* ── Session hint ── */
+.chat-session-hint {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-2) var(--space-4);
-  border-bottom: 1px solid var(--glass-border);
-  font-size: var(--font-size-xs);
-  background: rgba(255,255,255,0.02);
+  padding: 4px 16px;
+  font-size: 10px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+.chat-session-count {
+  color: var(--text-dim);
 }
-.session-key { font-family: var(--font-mono); color: var(--text-muted); }
-.session-stats { display: flex; align-items: center; gap: var(--space-4); color: var(--text-muted); }
 
-/* ── Messages ── */
-.chat-messages {
+/* ── Messages scroll area ── */
+.chat-scroll {
   flex: 1;
   overflow-y: auto;
-  padding: var(--space-4);
+  padding: 8px 16px 16px;
   display: flex;
   flex-direction: column;
-  gap: var(--space-4);
+  gap: 6px;
 }
 
-.message {
+/* ── Messages ── */
+.chat-msg {
   display: flex;
   flex-direction: column;
-  max-width: min(88%, 720px);
+  max-width: min(85%, 640px);
   min-width: 0;
+  gap: 2px;
 }
-.message.user { align-self: flex-end; }
-.message.assistant { align-self: flex-start; }
+.chat-msg-user { align-self: flex-end; align-items: flex-end; }
+.chat-msg-assistant { align-self: flex-start; align-items: flex-start; }
 
-.message-bubble {
-  padding: var(--space-3) var(--space-4);
-  border-radius: var(--radius-lg);
-  line-height: 1.6;
+/* ── Bubbles ── */
+.chat-bubble {
+  padding: 10px 14px;
+  border-radius: 18px;
+  line-height: 1.55;
   overflow-wrap: anywhere;
+  font-size: var(--font-size-sm);
 }
-.message.user .message-bubble {
+
+.chat-bubble-user {
   background: var(--accent);
   color: #fff;
-  border-bottom-right-radius: var(--radius-sm);
+  border-bottom-right-radius: 6px;
 }
-.message.assistant .message-bubble {
-  background: rgba(255,255,255,0.05);
-  border: 1px solid var(--glass-border);
-  border-bottom-left-radius: var(--radius-sm);
+
+.chat-bubble-assistant {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom-left-radius: 6px;
 }
 
-.message-meta {
-  font-size: var(--font-size-xs);
-  color: var(--text-muted);
-  margin-top: 4px;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
+/* ── Message metadata ── */
+.chat-meta {
+  font-size: 10px;
+  color: var(--text-dim);
+  padding: 0 4px;
 }
-.message.user .message-meta { justify-content: flex-end; }
 
-/* ── Message Content ── */
-.message-content {
-  font-size: var(--font-size-sm);
+/* ── Markdown content ── */
+.chat-md {
   overflow-wrap: anywhere;
   word-break: break-word;
 }
-.message-content:last-child { margin-bottom: 0; }
-.message-content > *:first-child { margin-top: 0; }
-.message-content > *:last-child { margin-bottom: 0; }
-.message-content p { margin-bottom: var(--space-2); }
-.message-content p:last-child { margin-bottom: 0; }
-.message-content ul, .message-content ol { margin: var(--space-2) 0; padding-left: var(--space-5); }
-.message-content li { margin-bottom: var(--space-1); }
-.message-content pre {
-  margin: var(--space-3) 0;
-  border-radius: var(--radius-md);
+.chat-md:last-child { margin-bottom: 0; }
+.chat-md > *:first-child { margin-top: 0; }
+.chat-md > *:last-child { margin-bottom: 0; }
+.chat-md p { margin-bottom: 6px; }
+.chat-md p:last-child { margin-bottom: 0; }
+.chat-md ul, .chat-md ol { margin: 6px 0; padding-left: 20px; }
+.chat-md li { margin-bottom: 2px; }
+.chat-md pre {
+  margin: 8px 0;
+  border-radius: var(--radius-sm);
   overflow-x: auto;
-  padding: var(--space-3);
-  font-size: 0.85em;
+  padding: 10px;
+  font-size: 0.82em;
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.04);
+}
+.chat-md code {
+  font-size: 0.9em;
 }
-.message.user .message-content a { color: #fff; text-decoration: underline; }
-.message.user .message-content code { background: rgba(255,255,255,0.2); color: #fff; }
-.message.user .message-content pre { background: rgba(255,255,255,0.14); }
 
-.message-image-wrap { margin: var(--space-2) 0; }
-.message-image {
-  max-width: min(420px, 100%);
+/* User bubble markdown overrides */
+.chat-bubble-user .chat-md a { color: #fff; text-decoration: underline; }
+.chat-bubble-user .chat-md code { background: rgba(255, 255, 255, 0.2); color: #fff; }
+.chat-bubble-user .chat-md pre { background: rgba(255, 255, 255, 0.12); border-color: transparent; }
+
+/* ── Images ── */
+.chat-img-wrap { margin: 4px 0; }
+.chat-img {
+  max-width: min(360px, 100%);
   border-radius: var(--radius-md);
-  border: 1px solid var(--glass-border);
+  border: 1px solid rgba(255, 255, 255, 0.06);
   display: block;
 }
 
 /* ── Thinking ── */
-.thinking-block {
-  margin: var(--space-2) 0;
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-md);
-  background: rgba(255,255,255,0.03);
+.chat-thinking {
+  margin: 4px 0;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-sm);
 }
-.thinking-block summary {
+.chat-thinking summary {
   cursor: pointer;
-  padding: var(--space-2) var(--space-3);
-  font-size: var(--font-size-xs);
-  color: var(--text-muted);
+  padding: 6px 10px;
+  font-size: 10px;
+  color: var(--text-dim);
+  font-weight: 500;
+  letter-spacing: 0.3px;
 }
-.thinking-block pre {
+.chat-thinking pre {
   margin: 0;
-  padding: var(--space-3);
-  border-top: 1px solid var(--glass-border);
+  padding: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
   font-size: var(--font-size-xs);
   white-space: pre-wrap;
   word-break: break-word;
 }
-.thinking-dots { display: flex; gap: 4px; }
-.thinking-dot {
-  width: 6px; height: 6px;
-  background: var(--text-muted);
-  border-radius: 50%;
-  animation: thinking 1.4s infinite;
-}
-.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
-.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
-@keyframes thinking {
-  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
-  40% { transform: scale(1); opacity: 1; }
-}
 
-/* ── Tool Calls ── */
-.tool-call {
-  margin: var(--space-2) 0;
-  background: rgba(255,255,255,0.03);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-md);
+/* ── Tool calls / results (collapsed by default) ── */
+.chat-tool {
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
-.tool-call-header {
+
+.chat-tool-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: var(--space-2) var(--space-3);
-  background: rgba(255,255,255,0.02);
-  border-bottom: 1px solid var(--glass-border);
-  font-size: var(--font-size-xs);
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  background: transparent;
+  color: var(--text-main);
   cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  text-align: left;
+  transition: background 0.1s;
 }
-.tool-call-name {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
+.chat-tool-header:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.chat-tool-name {
   font-family: var(--font-mono);
   color: var(--accent);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.chat-tool-badge {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  background: rgba(34, 197, 94, 0.15);
+  color: var(--accent-success);
+}
+.chat-tool-badge.error {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--accent-danger);
 }
-.tool-call-status { display: flex; align-items: center; gap: var(--space-1); }
-.tool-call-body {
-  padding: var(--space-2) var(--space-3);
+
+.chat-tool-chevron {
+  width: 14px;
+  height: 14px;
+  margin-left: auto;
+  color: var(--text-dim);
+  transition: transform 0.15s;
+  flex-shrink: 0;
+}
+.chat-tool-chevron.open {
+  transform: rotate(180deg);
+}
+
+.chat-tool-body {
+  padding: 6px 10px;
   font-size: var(--font-size-xs);
   font-family: var(--font-mono);
   max-height: 200px;
   overflow: auto;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
 }
-.tool-call-body.collapsed { display: none; }
 
-/* ── Tool Results ── */
-.tool-result-bubble { border-left: 3px solid var(--accent-success); }
-.tool-result-bubble.tool-result-error { border-left-color: var(--accent-danger); }
-.tool-result-header {
+.chat-tool-result-body {
+  padding: 6px 10px;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  margin-bottom: var(--space-2);
+  flex-direction: column;
+  gap: 6px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
 }
-.tool-result-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
-.tool-result-json {
+
+.chat-tool-json {
   margin: 0;
-  padding: var(--space-3);
-  background: rgba(0,0,0,0.3);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--glass-border);
+  padding: 8px 10px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: var(--radius-sm);
   font-size: var(--font-size-xs);
   line-height: 1.45;
   overflow-x: auto;
   white-space: pre;
 }
-.tool-result-json code { background: none; padding: 0; font-size: inherit; }
-.tool-result-json-details {
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-md);
+.chat-tool-json code { background: none; padding: 0; font-size: inherit; }
+
+.chat-tool-json-details {
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
-.tool-result-json-details summary {
+.chat-tool-json-details summary {
   cursor: pointer;
-  padding: var(--space-2) var(--space-3);
-  font-size: var(--font-size-xs);
-  color: var(--text-muted);
+  padding: 6px 10px;
+  font-size: 10px;
+  color: var(--text-dim);
   user-select: none;
   list-style: none;
 }
-.tool-result-json-details summary::-webkit-details-marker { display: none; }
-.tool-result-json-details .tool-result-json { border: none; border-top: 1px solid var(--glass-border); border-radius: 0; }
-.tool-result-json-toggle-open { display: none; }
-.tool-result-json-details[open] .tool-result-json-toggle-open { display: inline; }
-.tool-result-json-details[open] .tool-result-json-toggle-closed { display: none; }
+.chat-tool-json-details summary::-webkit-details-marker { display: none; }
+.chat-tool-json-details .chat-tool-json {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 0;
+}
+.chat-tool-json-toggle-open { display: none; }
+.chat-tool-json-details[open] .chat-tool-json-toggle-open { display: inline; }
+.chat-tool-json-details[open] .chat-tool-json-toggle-closed { display: none; }
 
-/* ── Chat Input ── */
-.chat-input-area {
-  padding: var(--space-3) var(--space-4);
-  border-top: 1px solid var(--glass-border);
-  background: rgba(0,0,0,0.15);
-}
-.chat-input-wrapper { display: flex; gap: var(--space-2); align-items: flex-end; }
-.chat-input {
+/* ── Thinking/loading dots ── */
+.chat-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--font-size-xs);
+  color: var(--text-dim);
+  padding: 4px 0;
+}
+.chat-dots { display: flex; gap: 3px; }
+.chat-dots span {
+  width: 5px; height: 5px;
+  background: var(--text-muted);
+  border-radius: 50%;
+  animation: chat-dot-pulse 1.4s infinite;
+}
+.chat-dots span:nth-child(2) { animation-delay: 0.2s; }
+.chat-dots span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes chat-dot-pulse {
+  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* ── Empty state ── */
+.chat-empty {
   flex: 1;
-  padding: var(--space-3) var(--space-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dim);
+  font-size: var(--font-size-sm);
+}
+
+/* ── Compose bar ── */
+.chat-compose {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 10px 14px 14px;
+  flex-shrink: 0;
+}
+
+.chat-compose-input {
+  flex: 1;
+  padding: 10px 14px;
   font-family: inherit;
   font-size: var(--font-size-sm);
   color: var(--text-main);
-  background: rgba(255,255,255,0.05);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 22px;
   resize: none;
-  min-height: 44px;
-  max-height: 200px;
-  transition: all 0.2s;
+  min-height: 42px;
+  max-height: 160px;
+  transition: border-color 0.15s, background 0.15s;
 }
-.chat-input:focus {
+.chat-compose-input:focus {
   outline: none;
   border-color: var(--accent);
-  background: rgba(255,255,255,0.08);
-  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
-}
-.chat-input::placeholder { color: var(--text-muted); }
-.chat-send-btn {
-  padding: var(--space-3);
-  width: 44px; height: 44px;
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
 }
+.chat-compose-input::placeholder { color: var(--text-dim); }
 
-/* ── Chat Empty ── */
-.chat-empty {
-  flex: 1;
+.chat-compose-send {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  border: none;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  text-align: center;
-  padding: var(--space-8);
+  flex-shrink: 0;
+  transition: opacity 0.15s, transform 0.1s;
+  padding: 0;
 }
-.chat-empty-icon { font-size: 3rem; margin-bottom: var(--space-4); opacity: 0.4; }
-.chat-empty-title { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: var(--space-2); }
-.chat-empty-description { color: var(--text-muted); max-width: 400px; }
-
-/* ── Light Theme Overrides ── */
-[data-theme="light"] .session-bar {
-  background: rgba(0, 0, 0, 0.02);
+.chat-compose-send svg {
+  width: 16px;
+  height: 16px;
+}
+.chat-compose-send:hover { opacity: 0.9; }
+.chat-compose-send:active { transform: scale(0.92); }
+.chat-compose-send:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
 }
-[data-theme="light"] .message.assistant .message-bubble {
+
+/* ── Light Theme ── */
+[data-theme="light"] .chat-bubble-assistant {
   background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.06);
 }
-[data-theme="light"] .message.user .message-content code {
+[data-theme="light"] .chat-bubble-user .chat-md code {
   background: rgba(255, 255, 255, 0.25);
 }
-[data-theme="light"] .message.user .message-content pre {
+[data-theme="light"] .chat-bubble-user .chat-md pre {
   background: rgba(255, 255, 255, 0.18);
+  border-color: transparent;
+}
+[data-theme="light"] .chat-md pre {
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.06);
 }
-[data-theme="light"] .thinking-block {
-  background: rgba(0, 0, 0, 0.02);
+[data-theme="light"] .chat-thinking {
+  border-color: rgba(0, 0, 0, 0.06);
 }
-[data-theme="light"] .tool-call {
-  background: rgba(0, 0, 0, 0.02);
+[data-theme="light"] .chat-thinking pre {
+  border-color: rgba(0, 0, 0, 0.06);
 }
-[data-theme="light"] .tool-call-header {
-  background: rgba(0, 0, 0, 0.02);
+[data-theme="light"] .chat-tool {
+  border-color: rgba(0, 0, 0, 0.08);
 }
-[data-theme="light"] .tool-result-json {
+[data-theme="light"] .chat-tool-header:hover {
   background: rgba(0, 0, 0, 0.03);
 }
-[data-theme="light"] .chat-input-area {
+[data-theme="light"] .chat-tool-body {
+  border-color: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .chat-tool-result-body {
+  border-color: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .chat-tool-json {
   background: rgba(0, 0, 0, 0.03);
 }
-[data-theme="light"] .chat-input {
+[data-theme="light"] .chat-tool-json-details {
+  border-color: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .chat-tool-json-details .chat-tool-json {
+  border-color: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .chat-compose-input {
   background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.1);
 }
-[data-theme="light"] .chat-input:focus {
+[data-theme="light"] .chat-compose-input:focus {
   background: rgba(0, 0, 0, 0.06);
 }
-
-/* ── Responsive ── */
-@media (max-width: 720px) {
-  .chat-messages { padding: var(--space-3); gap: var(--space-3); }
-  .message { max-width: 96%; }
-  .chat-input-area { padding: var(--space-2) var(--space-3); }
-  .chat-input { font-size: 16px; }
+[data-theme="light"] .chat-img {
+  border-color: rgba(0, 0, 0, 0.08);
 }
diff --git a/gateway/ui/src/styles/os-shell.css b/gateway/ui/src/styles/os-shell.css
index 53426e5..78e1d07 100644
--- a/gateway/ui/src/styles/os-shell.css
+++ b/gateway/ui/src/styles/os-shell.css
@@ -22,11 +22,6 @@
   overflow: hidden;
 }
 
-/* Starfield: deep dark space, stars rendered via canvas */
-.os-wp-starfield {
-  background: radial-gradient(ellipse at 50% 40%, #0c0c18 0%, #050508 60%, #000 100%);
-}
-
 /* Mesh gradient: smooth multi-color gradient, slow shift */
 .os-wp-mesh {
   background: #0a0a10;
@@ -416,9 +411,75 @@
   padding: var(--space-4);
 }
 .os-window-content .view-container { max-width: none; }
-.os-window-content .chat-container { min-height: 100%; height: 100%; padding: 0; }
+.os-window-content .chat-shell { min-height: 100%; height: 100%; }
+/* Chat lives edge-to-edge inside the window — remove content padding */
+.os-window-content:has(.chat-shell) { padding: 0; overflow: hidden; }
 .os-window-content .workspace-layout { min-height: 100%; }
 
+/* ── Global view chrome overrides ──
+   Strip redundant card/section chrome inside windows.
+   The window itself provides the glass surface — nested glass is visual noise. */
+
+/* Section headers: shrink titles so they don't compete with the window titlebar.
+   First section-header (top of view) is a toolbar row; subsequent ones are sub-dividers. */
+.os-window-content .section-header {
+  margin-bottom: var(--space-3);
+}
+.os-window-content .section-header h2,
+.os-window-content .section-header .section-title,
+.os-window-content .section-header > span:first-child {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Cards: strip glass bg / border / backdrop-filter so content sits directly on the window surface */
+.os-window-content .card {
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  border-radius: var(--radius-lg);
+}
+.os-window-content .card-header {
+  background: transparent;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  padding: var(--space-2) var(--space-4);
+}
+.os-window-content .card-footer {
+  background: transparent;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* Cards grid: tighter gap */
+.os-window-content .cards-grid {
+  gap: var(--space-3);
+}
+
+/* Logs output: let it blend */
+.os-window-content .logs-output {
+  background: rgba(0, 0, 0, 0.15);
+  border-color: rgba(255, 255, 255, 0.06);
+}
+
+/* Workspace editor: subtler bg */
+.os-window-content .workspace-editor {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+/* Tabs inside windows: subtler border */
+.os-window-content .tabs {
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+/* Tables inside windows: subtler row borders */
+.os-window-content .table th,
+.os-window-content .table td {
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
 /* Iframe windows (webview / media surfaces) */
 .os-window-iframe-wrap {
   position: relative;
@@ -881,6 +942,31 @@ body.os-dragging * {
   background: rgba(255, 255, 255, 0.25);
 }
 
+/* ── Global view chrome overrides (light) ── */
+[data-theme="light"] .os-window-content .card {
+  border-color: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .os-window-content .card-header {
+  border-bottom-color: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .os-window-content .card-footer {
+  border-top-color: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .os-window-content .logs-output {
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .os-window-content .workspace-editor {
+  background: rgba(0, 0, 0, 0.03);
+}
+[data-theme="light"] .os-window-content .tabs {
+  border-bottom-color: rgba(0, 0, 0, 0.08);
+}
+[data-theme="light"] .os-window-content .table th,
+[data-theme="light"] .os-window-content .table td {
+  border-bottom-color: rgba(0, 0, 0, 0.06);
+}
+
 /* ── Iframe fallback ── */
 [data-theme="light"] .os-window-iframe-fallback {
   background: rgba(245, 245, 248, 0.95);
@@ -992,9 +1078,6 @@ body.os-dragging * {
 }
 
 /* ── Light-theme Wallpaper overrides ── */
-[data-theme="light"] .os-wp-starfield {
-  background: radial-gradient(ellipse at 50% 40%, #dde0ea 0%, #c8cdd8 60%, #b8bece 100%);
-}
 [data-theme="light"] .os-wp-mesh {
   background: #dce0ea;
 }
diff --git a/gateway/ui/src/ui/gateway-client.ts b/gateway/ui/src/ui/gateway-client.ts
index 8ef5924..95b7991 100644
--- a/gateway/ui/src/ui/gateway-client.ts
+++ b/gateway/ui/src/ui/gateway-client.ts
@@ -23,6 +23,16 @@ type PendingRequest = {
   timeout: ReturnType<typeof setTimeout>;
 };
 
+const CLIENT_ID_KEY = "gsv-client-id";
+
+function getOrCreateClientId(): string {
+  const existing = localStorage.getItem(CLIENT_ID_KEY);
+  if (existing) return existing;
+  const id = `web-${crypto.randomUUID().slice(0, 8)}`;
+  localStorage.setItem(CLIENT_ID_KEY, id);
+  return id;
+}
+
 export class GatewayClient {
   private ws: WebSocket | null = null;
   private pending = new Map<string, PendingRequest>();
@@ -33,8 +43,12 @@ export class GatewayClient {
   private _state: ConnectionState = "disconnected";
   private options: GatewayClientOptions;
 
+  /** Stable client identity — persisted in localStorage across reloads. */
+  readonly clientId: string;
+
   constructor(options: GatewayClientOptions) {
     this.options = options;
+    this.clientId = getOrCreateClientId();
   }
 
   get state(): ConnectionState {
@@ -135,7 +149,7 @@ export class GatewayClient {
         minProtocol: 1,
         maxProtocol: 1,
         client: {
-          id: `web-${crypto.randomUUID().slice(0, 8)}`,
+          id: this.clientId,
           version: "0.1.0",
           platform: "web",
           mode: "client",
diff --git a/gateway/ui/src/ui/storage.ts b/gateway/ui/src/ui/storage.ts
index df2270f..5bc497b 100644
--- a/gateway/ui/src/ui/storage.ts
+++ b/gateway/ui/src/ui/storage.ts
@@ -2,10 +2,9 @@
  * Local Storage for UI Settings
  */
 
-export type Wallpaper = "starfield" | "mesh" | "aurora" | "dark-grain" | "grid";
+export type Wallpaper = "mesh" | "aurora" | "dark-grain" | "grid";
 
 export const WALLPAPER_OPTIONS: { id: Wallpaper; label: string; description: string }[] = [
-  { id: "starfield", label: "Starfield", description: "Drifting stars on deep space" },
   { id: "mesh", label: "Mesh Gradient", description: "Smooth shifting color gradient" },
   { id: "aurora", label: "Aurora", description: "Flowing bands of polar light" },
   { id: "dark-grain", label: "Dark Grain", description: "Near-black with subtle noise" },
@@ -38,7 +37,7 @@ const DEFAULT_SETTINGS: UiSettings = {
   token: "",
   sessionKey: "agent:main:web:dm:local",
   theme: "dark",
-  wallpaper: "starfield",
+  wallpaper: "mesh",
 };
 
 /**

From c60c4785733d50c71a8c824e34d1abfd9e5d0fed Mon Sep 17 00:00:00 2001
From: Steve James <sjames@cloudflare.com>
Date: Sat, 28 Feb 2026 22:30:29 +0100
Subject: [PATCH 6/6] ok spot

---
 gateway/package-lock.json                    |    8 +-
 gateway/package.json                         |    2 +-
 gateway/ui/src/react/App.tsx                 |    2 +
 gateway/ui/src/react/components/OsShell.tsx  |   57 +-
 gateway/ui/src/react/state/store.ts          |   67 +-
 gateway/ui/src/react/views/ChannelsView.tsx  |  284 ++--
 gateway/ui/src/react/views/ChatView.tsx      |   30 +-
 gateway/ui/src/react/views/ConfigView.tsx    |   69 +-
 gateway/ui/src/react/views/CronView.tsx      |  570 ++++---
 gateway/ui/src/react/views/DebugView.tsx     |  207 +--
 gateway/ui/src/react/views/LogsView.tsx      |  197 ++-
 gateway/ui/src/react/views/NodesView.tsx     |  200 ++-
 gateway/ui/src/react/views/OverviewView.tsx  |  186 +--
 gateway/ui/src/react/views/PairingView.tsx   |  214 ++-
 gateway/ui/src/react/views/SessionsView.tsx  |  219 +--
 gateway/ui/src/react/views/SettingsView.tsx  |  196 ++-
 gateway/ui/src/react/views/WorkspaceView.tsx |  287 ++--
 gateway/ui/src/styles.css                    |    1 +
 gateway/ui/src/styles/apps.css               |  427 +++++
 gateway/ui/src/styles/base.css               |   55 +-
 gateway/ui/src/styles/chat.css               |  501 ++++--
 gateway/ui/src/styles/components.css         |   21 +-
 gateway/ui/src/styles/os-shell.css           | 1458 ++++++++----------
 gateway/ui/src/ui/app.ts                     |   78 +-
 gateway/ui/src/ui/storage.ts                 |   30 +-
 gateway/ui/src/ui/types.ts                   |    2 +
 gateway/ui/src/ui/views/chat.ts              |    3 +-
 27 files changed, 3149 insertions(+), 2222 deletions(-)
 create mode 100644 gateway/ui/src/styles/apps.css

diff --git a/gateway/package-lock.json b/gateway/package-lock.json
index 4bf8d00..85562b5 100644
--- a/gateway/package-lock.json
+++ b/gateway/package-lock.json
@@ -9,7 +9,7 @@
 			"version": "0.0.0",
 			"dependencies": {
 				"@clack/prompts": "^1.0.0",
-				"@mariozechner/pi-ai": "^0.54.0",
+				"@mariozechner/pi-ai": "^0.55.1",
 				"agents": "^0.5.1",
 				"picocolors": "^1.1.1",
 				"ws": "^8.19.0"
@@ -3558,9 +3558,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@mariozechner/pi-ai": {
-			"version": "0.54.0",
-			"resolved": "https://registry.npmjs.org/@mariozechner/pi-ai/-/pi-ai-0.54.0.tgz",
-			"integrity": "sha512-XHhMIbFFHCa4mbiYdttfhVg6r3VmFD5tAiW4tjnmf33FhLUCRd76bGMQRc4kLWXPKCi/U4nqAErvaGiZUY4B8A==",
+			"version": "0.55.1",
+			"resolved": "https://registry.npmjs.org/@mariozechner/pi-ai/-/pi-ai-0.55.1.tgz",
+			"integrity": "sha512-JJX1LrVWPUPMExu0f89XR4nMNP37+FNLjEE4cIHq9Hi6xQtOiiEi7OjDFMx58hWsq81xH1CwmQXqGTWBjbXKTw==",
 			"license": "MIT",
 			"dependencies": {
 				"@anthropic-ai/sdk": "^0.73.0",
diff --git a/gateway/package.json b/gateway/package.json
index 437e7fd..1963fc9 100644
--- a/gateway/package.json
+++ b/gateway/package.json
@@ -25,7 +25,7 @@
 	},
 	"dependencies": {
 		"@clack/prompts": "^1.0.0",
-		"@mariozechner/pi-ai": "^0.54.0",
+		"@mariozechner/pi-ai": "^0.55.1",
 		"agents": "^0.5.1",
 		"picocolors": "^1.1.1",
 		"ws": "^8.19.0"
diff --git a/gateway/ui/src/react/App.tsx b/gateway/ui/src/react/App.tsx
index fdbcf14..f785a8b 100644
--- a/gateway/ui/src/react/App.tsx
+++ b/gateway/ui/src/react/App.tsx
@@ -51,12 +51,14 @@ export function App() {
       connectionState={connectionState}
       theme={settings.theme}
       wallpaper={settings.wallpaper ?? "mesh"}
+      shellStyle={settings.shellStyle}
       onToggleTheme={() =>
         updateSettings({
           theme: settings.theme === "dark" ? "light" : "dark",
         })
       }
       onChangeWallpaper={(wp) => updateSettings({ wallpaper: wp })}
+      onChangeShellStyle={(shellStyle) => updateSettings({ shellStyle })}
       onDisconnect={disconnect}
     />
   );
diff --git a/gateway/ui/src/react/components/OsShell.tsx b/gateway/ui/src/react/components/OsShell.tsx
index 71a7eb0..b661ff3 100644
--- a/gateway/ui/src/react/components/OsShell.tsx
+++ b/gateway/ui/src/react/components/OsShell.tsx
@@ -9,7 +9,7 @@ import {
   type PointerEvent as ReactPointerEvent,
 } from "react";
 import { TAB_ICONS, TAB_LABELS, OS_DOCK_TABS, TAB_GROUPS, type Tab, type Surface } from "../../ui/types";
-import type { Wallpaper } from "../../ui/storage";
+import type { ShellStyle, Wallpaper } from "../../ui/storage";
 import { preloadTabView, TabView } from "../tabViews";
 import { WallpaperBg } from "./Wallpaper";
 import { useReactUiStore } from "../state/store";
@@ -82,21 +82,6 @@ function toEmbedUrl(raw: string): string {
   }
 }
 
-const TAB_ACCENTS: Record<Tab, string> = {
-  chat: "hsl(191 95% 58%)",
-  overview: "hsl(36 96% 60%)",
-  sessions: "hsl(164 80% 52%)",
-  channels: "hsl(9 88% 63%)",
-  nodes: "hsl(214 90% 62%)",
-  workspace: "hsl(152 70% 48%)",
-  cron: "hsl(48 98% 59%)",
-  logs: "hsl(2 88% 63%)",
-  pairing: "hsl(24 92% 64%)",
-  config: "hsl(205 68% 68%)",
-  debug: "hsl(337 84% 62%)",
-  settings: "hsl(220 60% 65%)",
-};
-
 const CLOCK_FORMATTER = new Intl.DateTimeFormat(undefined, {
   hour: "numeric",
   minute: "2-digit",
@@ -168,8 +153,10 @@ type OsShellProps = {
   connectionState: "connected" | "connecting" | "disconnected";
   theme: "dark" | "light" | "system";
   wallpaper: Wallpaper;
+  shellStyle: ShellStyle;
   onToggleTheme: () => void;
   onChangeWallpaper: (wallpaper: Wallpaper) => void;
+  onChangeShellStyle: (shellStyle: ShellStyle) => void;
   onDisconnect: () => void;
 };
 
@@ -411,8 +398,10 @@ export function OsShell({
   connectionState,
   theme,
   wallpaper,
+  shellStyle: shellVariant,
   onToggleTheme,
   onChangeWallpaper,
+  onChangeShellStyle,
   onDisconnect,
 }: OsShellProps) {
   // ── Surface protocol integration ──
@@ -493,15 +482,12 @@ export function OsShell({
       : "No focus";
   const totalWindowCount = windows.length;
   const visibleWindowCount = visibleWindows.length;
-  const shellFocusAccent = focusedTab
-    ? TAB_ACCENTS[focusedTab]
-    : "var(--accent-primary)";
-  const shellStyle = useMemo(
+  const shellInlineStyle = useMemo(
     () =>
       ({
-        "--os-focus-accent": shellFocusAccent,
+        "--os-focus-accent": "var(--text-primary)",
       }) as CSSProperties,
-    [shellFocusAccent],
+    [],
   );
   const connectionStateLabel = useMemo(() => {
     if (connectionState === "connected") {
@@ -1353,6 +1339,20 @@ export function OsShell({
       keywords: ["theme", "dark", "light"],
       run: () => onToggleTheme(),
     });
+    actions.push({
+      id: "shell-brutalist",
+      label: "Switch shell to hard brutalist",
+      hint: "square + flat",
+      keywords: ["shell", "style", "brutalist", "flat", "square"],
+      run: () => onChangeShellStyle("brutalist"),
+    });
+    actions.push({
+      id: "shell-futurist",
+      label: "Switch shell to neo futurist",
+      hint: "sleek + restrained glow",
+      keywords: ["shell", "style", "futurist", "sleek", "modern"],
+      run: () => onChangeShellStyle("futurist"),
+    });
     actions.push({
       id: "disconnect",
       label: "Disconnect gateway",
@@ -1368,6 +1368,7 @@ export function OsShell({
     launchTabs,
     minimizeWindow,
     onDisconnect,
+    onChangeShellStyle,
     onToggleTheme,
     openWindow,
     restoreWindow,
@@ -1527,7 +1528,11 @@ export function OsShell({
   );
 
   return (
-    <div className="os-shell" style={shellStyle}>
+    <div
+      className={`os-shell os-shell-${shellVariant}`}
+      data-shell-style={shellVariant}
+      style={shellInlineStyle}
+    >
       {/* ── Wallpaper Background ── */}
       <WallpaperBg wallpaper={wallpaper} onChangeWallpaper={onChangeWallpaper} />
 
@@ -1569,9 +1574,6 @@ export function OsShell({
           const windowTitle = isUrlWindow
             ? (windowState.surfaceLabel ?? "Webview")
             : TAB_LABELS[windowState.tab];
-          const accentColor = isUrlWindow
-            ? "hsl(260 70% 62%)"
-            : TAB_ACCENTS[windowState.tab];
 
           return (
             <section
@@ -1581,7 +1583,6 @@ export function OsShell({
               } ${windowState.maximized ? "maximized" : ""}`}
               style={
                 {
-                  "--os-tab-accent": accentColor,
                   transform: `translate(${windowState.x}px, ${windowState.y}px)`,
                   width: `${windowState.width}px`,
                   height: `${windowState.height}px`,
@@ -1623,7 +1624,7 @@ export function OsShell({
                 </div>
               </div>
 
-              <div className="os-window-content">
+              <div className={`os-window-content ${isUrlWindow ? "iframe" : "app"}`}>
                 {isUrlWindow ? (
                   <div className="os-window-iframe-wrap">
                     <iframe
diff --git a/gateway/ui/src/react/state/store.ts b/gateway/ui/src/react/state/store.ts
index 911b143..5b509be 100644
--- a/gateway/ui/src/react/state/store.ts
+++ b/gateway/ui/src/react/state/store.ts
@@ -2,6 +2,7 @@ import { create } from "zustand";
 import { GatewayClient, type ConnectionState } from "../../ui/gateway-client";
 import { getCurrentTab, navigateTo } from "../../ui/navigation";
 import {
+  applyShellStyle,
   applyTheme,
   getGatewayUrl,
   loadSettings,
@@ -261,6 +262,46 @@ function normalizeWorkspacePath(path: string): string {
   return noTrailingSlash || "/";
 }
 
+function getThinkingText(block: { text?: unknown; thinking?: unknown }): string {
+  if (typeof block.text === "string") {
+    return block.text;
+  }
+  if (typeof block.thinking === "string") {
+    return block.thinking;
+  }
+  return "";
+}
+
+function normalizeContentBlocks(content: unknown[]): ContentBlock[] {
+  return content.map((block) => {
+    if (!block || typeof block !== "object") {
+      return block as ContentBlock;
+    }
+
+    const candidate = block as Record<string, unknown>;
+    if (candidate.type === "thinking") {
+      return {
+        ...candidate,
+        type: "thinking",
+        text: getThinkingText(candidate),
+      } as ContentBlock;
+    }
+
+    return candidate as ContentBlock;
+  });
+}
+
+function normalizeMessageContent(message: Message): Message {
+  if (!Array.isArray(message.content)) {
+    return message;
+  }
+
+  return {
+    ...message,
+    content: normalizeContentBlocks(message.content),
+  } as Message;
+}
+
 function normalizeAssistantMessage(message: unknown): AssistantMessage | null {
   if (!message || typeof message !== "object") {
     return null;
@@ -273,7 +314,7 @@ function normalizeAssistantMessage(message: unknown): AssistantMessage | null {
 
   return {
     role: "assistant",
-    content: candidate.content as ContentBlock[],
+    content: normalizeContentBlocks(candidate.content),
     timestamp:
       typeof candidate.timestamp === "number"
         ? candidate.timestamp
@@ -363,6 +404,7 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
     }
 
     applyTheme(get().settings.theme);
+    applyShellStyle(get().settings.shellStyle);
     const shouldAutoConnect = Boolean(
       get().settings.token || localStorage.getItem("gsv-connected-once"),
     );
@@ -588,7 +630,10 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
       const res = await client.sessionPreview(get().settings.sessionKey, 100);
       if (res.ok && res.payload) {
         const data = res.payload as { messages: Message[] };
-        set({ chatMessages: data.messages || [] });
+        const normalizedMessages = (data.messages || []).map((message) =>
+          normalizeMessageContent(message),
+        );
+        set({ chatMessages: normalizedMessages });
       }
     } finally {
       set({ chatLoading: false });
@@ -1146,6 +1191,9 @@ export const useReactUiStore = create<ReactUiStore>((set, get) => ({
     if (updates.theme) {
       applyTheme(updates.theme);
     }
+    if (updates.shellStyle) {
+      applyShellStyle(updates.shellStyle);
+    }
 
     if (updates.gatewayUrl || updates.token !== undefined) {
       get().startConnection();
@@ -1297,7 +1345,7 @@ function blockContains(
   }
 
   if (maybeSuperset.type === "thinking" && maybeSubset.type === "thinking") {
-    return maybeSuperset.text.startsWith(maybeSubset.text);
+    return getThinkingText(maybeSuperset).startsWith(getThinkingText(maybeSubset));
   }
 
   if (maybeSuperset.type === "toolCall" && maybeSubset.type === "toolCall") {
@@ -1345,12 +1393,17 @@ function mergeContentBlocks(
     }
 
     if (last?.type === "thinking" && block.type === "thinking") {
-      if (block.text.startsWith(last.text)) {
-        merged[merged.length - 1] = block;
-      } else if (!last.text.endsWith(block.text)) {
+      const lastText = getThinkingText(last);
+      const blockText = getThinkingText(block);
+      if (blockText.startsWith(lastText)) {
+        merged[merged.length - 1] = {
+          ...block,
+          text: blockText,
+        } as ContentBlock;
+      } else if (!lastText.endsWith(blockText)) {
         merged[merged.length - 1] = {
           ...last,
-          text: `${last.text}${block.text}`,
+          text: `${lastText}${blockText}`,
         };
       }
       continue;
diff --git a/gateway/ui/src/react/views/ChannelsView.tsx b/gateway/ui/src/react/views/ChannelsView.tsx
index 8fb6da4..f80e11c 100644
--- a/gateway/ui/src/react/views/ChannelsView.tsx
+++ b/gateway/ui/src/react/views/ChannelsView.tsx
@@ -68,7 +68,7 @@ function ChannelControls({
   const busy = Boolean(action) || connectionState !== "connected";
 
   return (
-    <div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap", marginTop: "var(--space-3)" }}>
+    <div className="app-actions" style={{ marginTop: "var(--space-3)" }}>
       <Button
         size="sm"
         variant="secondary"
@@ -133,7 +133,7 @@ function ChannelFeedback({
       {message ? (
         <p
           className={hasError ? "text-danger" : "text-secondary"}
-          style={{ marginTop: "var(--space-3)" }}
+          style={{ marginTop: "var(--space-3)", fontSize: "var(--font-size-sm)" }}
         >
           {message}
         </p>
@@ -166,57 +166,48 @@ function ConnectedChannelCard({ channel }: { channel: ChannelRegistryEntry }) {
   const icon = getChannelIcon(channel.channel);
 
   return (
-    <div className="card">
-      <div className="card-header">
-        <h3 className="card-title">
-          <span style={{ marginRight: "var(--space-2)" }}>{icon}</span>
-          {channel.channel}
-        </h3>
+    <article className="app-list-item">
+      <div className="app-list-head">
+        <div>
+          <div className="app-list-title">
+            <span style={{ marginRight: "var(--space-2)" }}>{icon}</span>
+            {channel.channel}
+          </div>
+          <div className="app-list-subtitle">account: {channel.accountId}</div>
+        </div>
         {renderStatusPill(status)}
       </div>
-      <div className="card-body">
-        <div className="kv-list">
-          <div className="kv-row">
-            <span className="kv-key">Account</span>
-            <span className="kv-value">{channel.accountId}</span>
-          </div>
-          <div className="kv-row">
-            <span className="kv-key">Connected At</span>
-            <span className="kv-value">{formatTime(channel.connectedAt)}</span>
+
+      <div className="app-list-meta">
+        <div className="app-meta-row">
+          <div className="app-meta-label">Connected At</div>
+          <div className="app-meta-value">{formatTime(channel.connectedAt)}</div>
+        </div>
+        <div className="app-meta-row">
+          <div className="app-meta-label">Last Message</div>
+          <div className="app-meta-value">
+            {channel.lastMessageAt ? formatTime(channel.lastMessageAt) : "—"}
           </div>
-          {channel.lastMessageAt ? (
-            <div className="kv-row">
-              <span className="kv-key">Last Message</span>
-              <span className="kv-value">{formatTime(channel.lastMessageAt)}</span>
-            </div>
-          ) : null}
-          {status?.mode ? (
-            <div className="kv-row">
-              <span className="kv-key">Mode</span>
-              <span className="kv-value">{status.mode}</span>
-            </div>
-          ) : null}
-          {status?.lastActivity ? (
-            <div className="kv-row">
-              <span className="kv-key">Last Activity</span>
-              <span className="kv-value">{formatTime(status.lastActivity)}</span>
-            </div>
-          ) : null}
         </div>
-        {status?.error ? (
-          <p className="text-danger" style={{ marginTop: "var(--space-3)" }}>
-            {status.error}
-          </p>
-        ) : null}
-
-        <ChannelControls
-          channel={channel.channel}
-          accountId={channel.accountId}
-          status={status}
-        />
-        <ChannelFeedback channel={channel.channel} accountId={channel.accountId} />
+        <div className="app-meta-row">
+          <div className="app-meta-label">Mode</div>
+          <div className="app-meta-value">{status?.mode || "default"}</div>
+        </div>
       </div>
-    </div>
+
+      {status?.error ? (
+        <p className="text-danger" style={{ marginTop: "var(--space-3)" }}>
+          {status.error}
+        </p>
+      ) : null}
+
+      <ChannelControls
+        channel={channel.channel}
+        accountId={channel.accountId}
+        status={status}
+      />
+      <ChannelFeedback channel={channel.channel} accountId={channel.accountId} />
+    </article>
   );
 }
 
@@ -228,41 +219,42 @@ function AvailableChannelCard({
   const status = useReactUiStore((s) => s.channelStatus(channel.id, DEFAULT_ACCOUNT_ID));
 
   return (
-    <div className="card">
-      <div className="card-header">
-        <h3 className="card-title">
-          <span style={{ marginRight: "var(--space-2)" }}>{channel.icon}</span>
-          {channel.name}
-        </h3>
+    <article className="app-list-item">
+      <div className="app-list-head">
+        <div>
+          <div className="app-list-title">
+            <span style={{ marginRight: "var(--space-2)" }}>{channel.icon}</span>
+            {channel.name}
+          </div>
+          <div className="app-list-subtitle">{channel.description}</div>
+        </div>
         {renderStatusPill(status)}
       </div>
-      <div className="card-body">
-        <p className="text-secondary" style={{ fontSize: "var(--font-size-sm)", marginBottom: "var(--space-3)" }}>
-          {channel.description}
-        </p>
-        <div className="kv-list" style={{ marginBottom: "var(--space-3)" }}>
-          <div className="kv-row">
-            <span className="kv-key">Account</span>
-            <span className="kv-value">{DEFAULT_ACCOUNT_ID}</span>
-          </div>
-          <div className="kv-row">
-            <span className="kv-key">Connected</span>
-            <span className="kv-value">{status?.connected ? "yes" : "no"}</span>
-          </div>
-          <div className="kv-row">
-            <span className="kv-key">Authenticated</span>
-            <span className="kv-value">{status?.authenticated ? "yes" : "no"}</span>
-          </div>
+
+      <div className="app-list-meta">
+        <div className="app-meta-row">
+          <div className="app-meta-label">Account</div>
+          <div className="app-meta-value">{DEFAULT_ACCOUNT_ID}</div>
+        </div>
+        <div className="app-meta-row">
+          <div className="app-meta-label">Connected</div>
+          <div className="app-meta-value">{status?.connected ? "yes" : "no"}</div>
+        </div>
+        <div className="app-meta-row">
+          <div className="app-meta-label">Authenticated</div>
+          <div className="app-meta-value">{status?.authenticated ? "yes" : "no"}</div>
         </div>
-        {status?.error ? (
-          <p className="text-danger" style={{ marginBottom: "var(--space-3)" }}>
-            {status.error}
-          </p>
-        ) : null}
-        <ChannelControls channel={channel.id} accountId={DEFAULT_ACCOUNT_ID} status={status} />
-        <ChannelFeedback channel={channel.id} accountId={DEFAULT_ACCOUNT_ID} />
       </div>
-    </div>
+
+      {status?.error ? (
+        <p className="text-danger" style={{ marginTop: "var(--space-3)" }}>
+          {status.error}
+        </p>
+      ) : null}
+
+      <ChannelControls channel={channel.id} accountId={DEFAULT_ACCOUNT_ID} status={status} />
+      <ChannelFeedback channel={channel.id} accountId={DEFAULT_ACCOUNT_ID} />
+    </article>
   );
 }
 
@@ -272,64 +264,94 @@ export function ChannelsView() {
   const channelsError = useReactUiStore((s) => s.channelsError);
   const refreshChannels = useReactUiStore((s) => s.refreshChannels);
 
+  const connectedCount = channels.length;
+
   return (
     <div className="view-container">
-      <div className="section-header">
-        <h2 className="section-title">Connected Channels</h2>
-        <Button
-          size="sm"
-          variant="secondary"
-          loading={channelsLoading}
-          onClick={() => {
-            void refreshChannels();
-          }}
-        >
-          Refresh
-        </Button>
-      </div>
-
-      {channelsError ? (
-        <div className="card" style={{ marginBottom: "var(--space-4)" }}>
-          <div className="card-body text-danger">{channelsError}</div>
-        </div>
-      ) : null}
-
-      {channelsLoading && channels.length === 0 ? (
-        <div className="card">
-          <div className="card-body">
-            <div className="thinking-indicator">
-              <span className="spinner"></span>
-              <span>Loading channels...</span>
+      <div className="app-shell" data-app="channels">
+        <section className="app-hero">
+          <div className="app-hero-content">
+            <div>
+              <h2 className="app-hero-title">Channel Hub</h2>
+              <p className="app-hero-subtitle">
+                Operate inbound/outbound integrations, monitor auth state, and trigger
+                channel login flows directly from the desktop.
+              </p>
+              <div className="app-hero-meta">
+                <span className="app-badge-dot" />
+                <span>{connectedCount} connected account(s)</span>
+              </div>
             </div>
+            <Button
+              size="sm"
+              variant="secondary"
+              loading={channelsLoading}
+              onClick={() => {
+                void refreshChannels();
+              }}
+            >
+              Refresh
+            </Button>
           </div>
-        </div>
-      ) : channels.length === 0 ? (
-        <div className="empty-state">
-          <div className="empty-state-icon">📱</div>
-          <h3 className="empty-state-title">No channels connected</h3>
-          <p className="empty-state-description">
-            Start and authenticate a channel below.
-          </p>
-        </div>
-      ) : (
-        <div className="cards-grid">
-          {channels.map((channel) => (
-            <ConnectedChannelCard
-              key={`${channel.channel}:${channel.accountId}`}
-              channel={channel}
-            />
-          ))}
-        </div>
-      )}
+        </section>
 
-      <div className="section-header" style={{ marginTop: "var(--space-8)" }}>
-        <h2 className="section-title">Available Channels</h2>
-      </div>
+        {channelsError ? (
+          <div className="app-list-item">
+            <p className="text-danger">{channelsError}</p>
+          </div>
+        ) : null}
 
-      <div className="cards-grid">
-        {AVAILABLE_CHANNELS.map((channel) => (
-          <AvailableChannelCard key={channel.id} channel={channel} />
-        ))}
+        <section className="app-grid">
+          <article className="app-panel app-col-7">
+            <header className="app-panel-head">
+              <h3 className="app-panel-title">Connected Accounts</h3>
+              <span className="app-panel-meta">{channels.length} active</span>
+            </header>
+            <div className="app-panel-body">
+              {channelsLoading && channels.length === 0 ? (
+                <div className="app-empty">
+                  <div>
+                    <span className="spinner" />
+                    <div style={{ marginTop: "var(--space-2)" }}>Loading channels...</div>
+                  </div>
+                </div>
+              ) : channels.length === 0 ? (
+                <div className="app-empty">
+                  <div>
+                    <div className="app-empty-icon">📡</div>
+                    <div>No channels connected</div>
+                    <div className="text-secondary" style={{ marginTop: "var(--space-1)" }}>
+                      Start and authenticate a channel from the catalog.
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="app-list">
+                  {channels.map((channel) => (
+                    <ConnectedChannelCard
+                      key={`${channel.channel}:${channel.accountId}`}
+                      channel={channel}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          </article>
+
+          <article className="app-panel app-col-5">
+            <header className="app-panel-head">
+              <h3 className="app-panel-title">Channel Catalog</h3>
+              <span className="app-panel-meta">{AVAILABLE_CHANNELS.length} available</span>
+            </header>
+            <div className="app-panel-body">
+              <div className="app-list">
+                {AVAILABLE_CHANNELS.map((channel) => (
+                  <AvailableChannelCard key={channel.id} channel={channel} />
+                ))}
+              </div>
+            </div>
+          </article>
+        </section>
       </div>
     </div>
   );
diff --git a/gateway/ui/src/react/views/ChatView.tsx b/gateway/ui/src/react/views/ChatView.tsx
index f104983..a6e90fd 100644
--- a/gateway/ui/src/react/views/ChatView.tsx
+++ b/gateway/ui/src/react/views/ChatView.tsx
@@ -71,10 +71,11 @@ function MarkdownContent({ text }: { text: string }) {
 }
 
 function ThinkingContent({ block }: { block: ThinkingBlock }) {
+  const text = block.text || (block as ThinkingBlock & { thinking?: string }).thinking || "";
   return (
     <details className="chat-thinking">
       <summary>Thinking</summary>
-      <pre>{block.text}</pre>
+      <pre>{text}</pre>
     </details>
   );
 }
@@ -143,7 +144,8 @@ function ToolResultBubble({ message }: { message: ToolResultMessage }) {
   const [open, setOpen] = useState(false);
   return (
     <div className="chat-msg chat-msg-assistant">
-      <div className="chat-tool">
+      <span className="chat-msg-label">tool</span>
+      <div className="chat-tool chat-tool-result">
         <button type="button" className="chat-tool-header" onClick={() => setOpen(!open)}>
           <span className="chat-tool-name">{message.toolName}</span>
           <span className={`chat-tool-badge ${message.isError ? "error" : ""}`}>
@@ -185,6 +187,7 @@ function MessageBubble({ message }: { message: Message }) {
 
   return (
     <div className={`chat-msg ${isUser ? "chat-msg-user" : "chat-msg-assistant"}`}>
+      <span className="chat-msg-label">{isUser ? "you" : "assistant"}</span>
       {visibleBlocks.length > 0 ? (
         <div className={`chat-bubble ${isUser ? "chat-bubble-user" : "chat-bubble-assistant"}`}>
           {visibleBlocks.map((block, index) => renderContentBlock(block, `content-${index}`))}
@@ -223,6 +226,13 @@ export function ChatView() {
     messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
   }, [chatMessages, chatStream, chatLoading, chatSending]);
 
+  const sessionLabel = settings.sessionKey.split(":").slice(-1)[0] || settings.sessionKey;
+  const connectionLabel =
+    connectionState === "connected"
+      ? "online"
+      : connectionState === "connecting"
+        ? "linking"
+        : "offline";
   const submit = (event: FormEvent) => {
     event.preventDefault();
     const text = input.trim();
@@ -238,13 +248,17 @@ export function ChatView() {
 
   return (
     <div className="chat-shell">
-      {/* Session indicator — subtle, inline with the window */}
-      <div className="chat-session-hint">
-        <span className="mono">{settings.sessionKey.split(":").slice(-1)[0] || settings.sessionKey}</span>
-        <span className="chat-session-count">{chatMessages.length} msgs</span>
-      </div>
+      <header className="chat-topbar">
+        <div className="chat-topbar-main">
+          <span className="chat-topbar-title">Conversation</span>
+          <span className="chat-topbar-session mono">{sessionLabel}</span>
+        </div>
+        <div className="chat-topbar-meta">
+          <span className="chat-session-count">{chatMessages.length} msgs</span>
+          <span className={`chat-conn ${connectionState}`}>{connectionLabel}</span>
+        </div>
+      </header>
 
-      {/* Messages */}
       <div className="chat-scroll" ref={messagesRef}>
         {chatLoading ? (
           <div className="chat-status">
diff --git a/gateway/ui/src/react/views/ConfigView.tsx b/gateway/ui/src/react/views/ConfigView.tsx
index 597dd8a..d3f780d 100644
--- a/gateway/ui/src/react/views/ConfigView.tsx
+++ b/gateway/ui/src/react/views/ConfigView.tsx
@@ -49,6 +49,10 @@ const MODEL_OPTIONS = [
 // update, causing ConfigView to re-render on every unrelated event.
 const EMPTY_CONFIG: GsvConfig = {};
 
+type ConfigViewProps = {
+  embedded?: boolean;
+};
+
 function parseAllowFrom(text: string): string[] {
   return text
     .split("\n")
@@ -56,7 +60,7 @@ function parseAllowFrom(text: string): string[] {
     .filter(Boolean);
 }
 
-export function ConfigView() {
+export function ConfigView({ embedded = false }: ConfigViewProps = {}) {
   const config = useReactUiStore((s) => (s.config as GsvConfig) ?? EMPTY_CONFIG);
   const configLoading = useReactUiStore((s) => s.configLoading);
   const connectionState = useReactUiStore((s) => s.connectionState);
@@ -158,22 +162,54 @@ export function ConfigView() {
   const monoSensitiveInputClassName = "mono ui-sensitive-fix";
 
   return (
-    <div className="view-container">
-      <div className="section-header">
-        <h2 className="section-title">Configuration</h2>
-        <Button
-          size="sm"
-          variant="secondary"
-          loading={configLoading}
-          onClick={() => {
-            void loadConfig();
-          }}
-        >
-          Refresh
-        </Button>
-      </div>
+    <div className={embedded ? undefined : "view-container"}>
+      <div className={embedded ? "app-list" : "app-shell"} data-app={embedded ? undefined : "settings"}>
+        {!embedded ? (
+          <section className="app-hero">
+            <div className="app-hero-content">
+              <div>
+                <h2 className="app-hero-title">Gateway Configuration</h2>
+                <p className="app-hero-subtitle">
+                  Edit runtime model, provider keys, channel policies, identity links,
+                  and heartbeat defaults.
+                </p>
+                <div className="app-hero-meta">
+                  <span className="app-badge-dot" />
+                  <span>{connectionState}</span>
+                  <span className="app-mono-pill mono">{getGatewayUrl(settings)}</span>
+                </div>
+              </div>
+              <Button
+                size="sm"
+                variant="secondary"
+                loading={configLoading}
+                onClick={() => {
+                  void loadConfig();
+                }}
+              >
+                Refresh
+              </Button>
+            </div>
+          </section>
+        ) : null}
+
+        {embedded ? (
+          <div className="app-actions" style={{ justifyContent: "space-between" }}>
+            <span className="app-mono-pill mono">{getGatewayUrl(settings)}</span>
+            <Button
+              size="sm"
+              variant="secondary"
+              loading={configLoading}
+              onClick={() => {
+                void loadConfig();
+              }}
+            >
+              Refresh
+            </Button>
+          </div>
+        ) : null}
 
-      <Surface className="card" style={{ marginBottom: "var(--space-4)" }}>
+        <Surface className="card" style={{ marginBottom: "var(--space-4)" }}>
         <div className="card-header">
           <h3 className="card-title">Gateway Connection</h3>
           <Badge variant={connectionBadgeVariant}>{connectionState}</Badge>
@@ -619,6 +655,7 @@ export function ConfigView() {
           </details>
         </div>
       </Surface>
+      </div>
     </div>
   );
 }
diff --git a/gateway/ui/src/react/views/CronView.tsx b/gateway/ui/src/react/views/CronView.tsx
index 5fe7daf..773368a 100644
--- a/gateway/ui/src/react/views/CronView.tsx
+++ b/gateway/ui/src/react/views/CronView.tsx
@@ -4,7 +4,6 @@ import { Button } from "@cloudflare/kumo/components/button";
 import { Checkbox } from "@cloudflare/kumo/components/checkbox";
 import { Input, Textarea } from "@cloudflare/kumo/components/input";
 import { Select } from "@cloudflare/kumo/components/select";
-import { Tabs } from "@cloudflare/kumo/components/tabs";
 import { useReactUiStore } from "../state/store";
 
 type CronSchedule =
@@ -127,36 +126,33 @@ function CreateCronForm() {
   const [deleteAfterRun, setDeleteAfterRun] = useState(false);
 
   return (
-    <div className="card" style={{ maxWidth: 600 }}>
-      <div className="card-header">
-        <span className="card-title">Create Cron Job</span>
+    <div className="app-list" style={{ gap: "var(--space-4)", maxWidth: 760 }}>
+      <div className="form-group">
+        <Input
+          label="Name"
+          type="text"
+          className="ui-input-fix"
+          size="lg"
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+          placeholder="daily-report"
+        />
       </div>
-      <div className="card-body">
-        <div className="form-group">
-          <Input
-            label="Name"
-            type="text"
-            className="ui-input-fix"
-            size="lg"
-            value={name}
-            onChange={(event) => setName(event.target.value)}
-            placeholder="daily-report"
-          />
-        </div>
 
-        <div className="form-group">
-          <Input
-            label="Description"
-            type="text"
-            className="ui-input-fix"
-            size="lg"
-            value={description}
-            onChange={(event) => setDescription(event.target.value)}
-            placeholder="Optional description"
-          />
-        </div>
+      <div className="form-group">
+        <Input
+          label="Description"
+          type="text"
+          className="ui-input-fix"
+          size="lg"
+          value={description}
+          onChange={(event) => setDescription(event.target.value)}
+          placeholder="Optional description"
+        />
+      </div>
 
-        <div className="form-group">
+      <div className="app-grid" style={{ gap: "var(--space-3)" }}>
+        <div className="app-col-6 form-group">
           <Select<string>
             label="Schedule Type"
             hideLabel={false}
@@ -171,23 +167,7 @@ function CreateCronForm() {
           </Select>
         </div>
 
-        <div className="form-group">
-          <Input
-            label="Schedule Value"
-            type="text"
-            className="mono ui-input-fix"
-            size="lg"
-            value={scheduleValue}
-            onChange={(event) => setScheduleValue(event.target.value)}
-            placeholder="30 (minutes) or */5 * * * * (cron) or ISO date"
-          />
-          <p className="form-hint">
-            For "every": interval in minutes. For "cron": cron expression. For
-            "at": ISO date.
-          </p>
-        </div>
-
-        <div className="form-group">
+        <div className="app-col-6 form-group">
           <Select<string>
             label="Mode"
             hideLabel={false}
@@ -197,32 +177,47 @@ function CreateCronForm() {
             }
           >
             <Select.Option value="task">Task (isolated session)</Select.Option>
-            <Select.Option value="systemEvent">
-              System Event (inject into main session)
-            </Select.Option>
+            <Select.Option value="systemEvent">System Event (main session)</Select.Option>
           </Select>
         </div>
+      </div>
 
-        <div className="form-group">
-          <Textarea
-            label="Message / Text"
-            className="ui-input-fix"
-            size="lg"
-            rows={3}
-            value={message}
-            onValueChange={setMessage}
-            placeholder="The prompt or message for the agent"
-          />
-        </div>
+      <div className="form-group">
+        <Input
+          label="Schedule Value"
+          type="text"
+          className="mono ui-input-fix"
+          size="lg"
+          value={scheduleValue}
+          onChange={(event) => setScheduleValue(event.target.value)}
+          placeholder="30 (minutes) | */5 * * * * | 2026-03-01T10:00:00Z"
+        />
+        <p className="form-hint" style={{ marginTop: "var(--space-1)" }}>
+          Interval expects minutes. Cron expects expression. One-time expects ISO timestamp.
+        </p>
+      </div>
 
-        <div className="form-group">
-          <Checkbox
-            label="Delete after run (one-shot)"
-            checked={deleteAfterRun}
-            onCheckedChange={setDeleteAfterRun}
-          />
-        </div>
+      <div className="form-group">
+        <Textarea
+          label="Message / Text"
+          className="ui-input-fix"
+          size="lg"
+          rows={3}
+          value={message}
+          onValueChange={setMessage}
+          placeholder="The prompt or event text to run"
+        />
+      </div>
+
+      <div className="form-group">
+        <Checkbox
+          label="Delete after run (one-shot)"
+          checked={deleteAfterRun}
+          onCheckedChange={setDeleteAfterRun}
+        />
+      </div>
 
+      <div className="app-actions">
         <Button
           variant="primary"
           onClick={async () => {
@@ -296,260 +291,251 @@ export function CronView() {
 
   const stats = useMemo(
     () => [
-      { label: "Total Jobs", value: cronStatus?.count ?? 0 },
-      { label: "Due Now", value: cronStatus?.dueCount ?? 0 },
+      { label: "Jobs", value: cronStatus?.count ?? 0 },
+      { label: "Due", value: cronStatus?.dueCount ?? 0 },
       { label: "Running", value: cronStatus?.runningCount ?? 0 },
+      { label: "Engine", value: cronStatus?.enabled ? "On" : "Off" },
+      {
+        label: "Next Tick",
+        value: cronStatus?.nextRunAtMs ? relativeTime(cronStatus.nextRunAtMs) : "—",
+      },
     ],
     [cronStatus],
   );
 
   return (
     <div className="view-container">
-      {cronStatus ? (
-        <div className="cards-grid" style={{ marginBottom: "var(--space-6)" }}>
-          {stats.map((item) => (
-            <div className="card" key={item.label}>
-              <div className="card-body stat">
-                <div className="stat-value">{item.value}</div>
-                <div className="stat-label">{item.label}</div>
-              </div>
+      <div className="app-shell" data-app="cron">
+        <section className="app-hero">
+          <div className="app-hero-content">
+            <div>
+              <h2 className="app-hero-title">Scheduler</h2>
+              <p className="app-hero-subtitle">
+                Manage recurring and one-shot agent jobs, inspect execution history,
+                and trigger immediate runs.
+              </p>
             </div>
-          ))}
-          <div className="card">
-            <div className="card-body stat">
-              <div className="stat-value">
-                {cronStatus.enabled ? (
-                  <span style={{ color: "var(--accent-success)" }}>On</span>
-                ) : (
-                  <span style={{ color: "var(--accent-danger)" }}>Off</span>
-                )}
-              </div>
-              <div className="stat-label">Cron Engine</div>
+            <div className="app-actions">
+              <Button
+                size="sm"
+                variant="secondary"
+                onClick={() => {
+                  void loadCron();
+                }}
+              >
+                Refresh
+              </Button>
+              <Button
+                size="sm"
+                variant="primary"
+                onClick={() => {
+                  if (confirm("Run all due cron jobs now?")) {
+                    void cronRun({ mode: "due" });
+                  }
+                }}
+              >
+                Run Due
+              </Button>
             </div>
           </div>
-        </div>
-      ) : null}
-
-      <Tabs
-        value={cronTab}
-        onValueChange={(value) => {
-          const nextTab = value as "jobs" | "runs" | "create";
-          setCronTab(nextTab);
-          if (nextTab === "runs") {
-            void loadCronRuns();
-          }
-        }}
-        tabs={[
-          { value: "jobs", label: "Jobs" },
-          { value: "runs", label: "Run History" },
-          { value: "create", label: "+ New Job" },
-        ]}
-        className="tabs"
-      />
-
-      {cronLoading ? (
-        <div className="empty-state">
-          <span className="spinner"></span> Loading...
-        </div>
-      ) : cronTab === "jobs" ? (
-        cronJobs.length ? (
-          <>
-            <div className="section-header">
-              <span className="section-title">Jobs ({cronJobs.length})</span>
-              <div style={{ display: "flex", gap: "var(--space-2)" }}>
-                <Button
-                  size="sm"
-                  variant="secondary"
-                  onClick={() => {
-                    void loadCron();
-                  }}
-                >
-                  Refresh
-                </Button>
-                <Button
-                  size="sm"
-                  variant="primary"
+        </section>
+
+        {cronStatus ? (
+          <section className="app-kpis">
+            {stats.map((item) => (
+              <article className="app-kpi" key={item.label}>
+                <span className="app-kpi-label">{item.label}</span>
+                <span className="app-kpi-value">{item.value}</span>
+              </article>
+            ))}
+          </section>
+        ) : null}
+
+        <section className="app-panel" style={{ flex: 1, minHeight: 0 }}>
+          <header className="app-panel-head">
+            <div className="app-tabs" role="tablist" aria-label="Cron sections">
+              {[
+                { value: "jobs", label: "Jobs" },
+                { value: "runs", label: "Run History" },
+                { value: "create", label: "New Job" },
+              ].map((tab) => (
+                <button
+                  key={tab.value}
+                  type="button"
+                  className={`app-tab ${cronTab === tab.value ? "active" : ""}`}
                   onClick={() => {
-                    if (confirm("Run all due cron jobs now?")) {
-                      void cronRun({ mode: "due" });
+                    const nextTab = tab.value as "jobs" | "runs" | "create";
+                    setCronTab(nextTab);
+                    if (nextTab === "runs") {
+                      void loadCronRuns();
                     }
                   }}
                 >
-                  Run Due
-                </Button>
-              </div>
+                  {tab.label}
+                </button>
+              ))}
             </div>
+            <span className="app-panel-meta">{cronLoading ? "loading" : "ready"}</span>
+          </header>
 
-            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
-              {cronJobs.map((job) => (
-                <div className="card" key={job.id}>
-                  <div className="card-header">
-                    <div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)" }}>
-                      <span className="card-title">{job.name}</span>
-                      <Badge variant={job.enabled ? "primary" : "outline"}>
-                        {job.enabled ? "Enabled" : "Disabled"}
-                      </Badge>
-                      <StatusPill status={job.state.lastStatus} />
-                      {job.deleteAfterRun ? (
-                        <Badge variant="outline">One-shot</Badge>
-                      ) : null}
-                    </div>
-                    <div style={{ display: "flex", gap: "var(--space-2)" }}>
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => {
-                          void cronUpdate(job.id, { enabled: !job.enabled });
-                        }}
-                      >
-                        {job.enabled ? "Disable" : "Enable"}
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => {
-                          void cronRun({ id: job.id, mode: "force" });
-                        }}
-                      >
-                        Run Now
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="destructive"
-                        onClick={() => {
-                          if (confirm(`Delete job "${job.name}"?`)) {
-                            void cronRemove(job.id);
-                          }
-                        }}
-                      >
-                        Delete
-                      </Button>
-                    </div>
-                  </div>
-                  <div className="card-body">
-                    <div className="kv-list">
-                      {job.description ? (
-                        <div className="kv-row">
-                          <span className="kv-key">Description</span>
-                          <span className="kv-value">{job.description}</span>
+          <div className="app-panel-body app-scroll">
+            {cronLoading ? (
+              <div className="app-empty" style={{ minHeight: 220 }}>
+                <div>
+                  <span className="spinner" />
+                  <div style={{ marginTop: "var(--space-2)" }}>Loading scheduler data...</div>
+                </div>
+              </div>
+            ) : cronTab === "jobs" ? (
+              cronJobs.length ? (
+                <div className="app-list">
+                  {cronJobs.map((job) => (
+                    <article className="app-list-item" key={job.id}>
+                      <div className="app-list-head">
+                        <div>
+                          <div className="app-list-title">{job.name}</div>
+                          <div className="app-list-subtitle">
+                            {job.description || "No description"}
+                          </div>
+                        </div>
+                        <div className="app-actions">
+                          <Badge variant={job.enabled ? "primary" : "outline"}>
+                            {job.enabled ? "enabled" : "disabled"}
+                          </Badge>
+                          <StatusPill status={job.state.lastStatus} />
+                          {job.deleteAfterRun ? <Badge variant="outline">one-shot</Badge> : null}
                         </div>
-                      ) : null}
-                      <div className="kv-row">
-                        <span className="kv-key">Agent</span>
-                        <span className="kv-value mono">{job.agentId}</span>
-                      </div>
-                      <div className="kv-row">
-                        <span className="kv-key">Schedule</span>
-                        <span className="kv-value mono">{formatSchedule(job.schedule)}</span>
                       </div>
-                      <div className="kv-row">
-                        <span className="kv-key">Mode</span>
-                        <span className="kv-value">{job.spec.mode}</span>
+
+                      <div className="app-list-meta">
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Agent</div>
+                          <div className="app-meta-value mono">{job.agentId}</div>
+                        </div>
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Schedule</div>
+                          <div className="app-meta-value mono">{formatSchedule(job.schedule)}</div>
+                        </div>
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Mode</div>
+                          <div className="app-meta-value">{job.spec.mode}</div>
+                        </div>
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Next Run</div>
+                          <div className="app-meta-value">
+                            {job.state.nextRunAtMs ? relativeTime(job.state.nextRunAtMs) : "—"}
+                          </div>
+                        </div>
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Last Run</div>
+                          <div className="app-meta-value">
+                            {job.state.lastRunAtMs ? relativeTime(job.state.lastRunAtMs) : "—"}
+                          </div>
+                        </div>
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Message</div>
+                          <div className="app-meta-value">
+                            {job.spec.mode === "task" ? job.spec.message : job.spec.text}
+                          </div>
+                        </div>
                       </div>
-                      <div className="kv-row">
-                        <span className="kv-key">Message</span>
-                        <span
-                          className="kv-value"
-                          style={{
-                            maxWidth: 400,
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
+
+                      {job.state.lastError ? (
+                        <p className="text-danger" style={{ marginTop: "var(--space-3)" }}>
+                          Last error: {job.state.lastError}
+                        </p>
+                      ) : null}
+
+                      <div className="app-actions" style={{ marginTop: "var(--space-3)" }}>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            void cronUpdate(job.id, { enabled: !job.enabled });
                           }}
                         >
-                          {job.spec.mode === "task" ? job.spec.message : job.spec.text}
-                        </span>
+                          {job.enabled ? "Disable" : "Enable"}
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            void cronRun({ id: job.id, mode: "force" });
+                          }}
+                        >
+                          Run Now
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="destructive"
+                          onClick={() => {
+                            if (confirm(`Delete job "${job.name}"?`)) {
+                              void cronRemove(job.id);
+                            }
+                          }}
+                        >
+                          Delete
+                        </Button>
                       </div>
-                      {job.state.nextRunAtMs ? (
-                        <div className="kv-row">
-                          <span className="kv-key">Next Run</span>
-                          <span className="kv-value">{relativeTime(job.state.nextRunAtMs)}</span>
+                    </article>
+                  ))}
+                </div>
+              ) : (
+                <div className="app-empty" style={{ minHeight: 220 }}>
+                  <div>
+                    <div className="app-empty-icon">⏰</div>
+                    <div>No cron jobs</div>
+                  </div>
+                </div>
+              )
+            ) : cronTab === "runs" ? (
+              cronRuns.length ? (
+                <div className="app-list">
+                  {cronRuns.map((run) => (
+                    <article className="app-list-item" key={`${run.id}-${run.ts}`}>
+                      <div className="app-list-head">
+                        <div>
+                          <div className="app-list-title mono">{run.jobId}</div>
+                          <div className="app-list-subtitle">{relativeTime(run.ts)}</div>
                         </div>
-                      ) : null}
-                      {job.state.lastRunAtMs ? (
-                        <div className="kv-row">
-                          <span className="kv-key">Last Run</span>
-                          <span className="kv-value">{relativeTime(job.state.lastRunAtMs)}</span>
+                        <div className="app-actions">
+                          <StatusPill status={run.status} />
                         </div>
-                      ) : null}
-                      {job.state.lastError ? (
-                        <div className="kv-row">
-                          <span className="kv-key">Last Error</span>
-                          <span className="kv-value" style={{ color: "var(--accent-danger)" }}>
-                            {job.state.lastError}
-                          </span>
+                      </div>
+
+                      <div className="app-list-meta">
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Duration</div>
+                          <div className="app-meta-value">
+                            {run.durationMs != null ? `${(run.durationMs / 1000).toFixed(1)}s` : "—"}
+                          </div>
                         </div>
-                      ) : null}
-                    </div>
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Summary</div>
+                          <div className="app-meta-value">{run.summary || "—"}</div>
+                        </div>
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Error</div>
+                          <div className="app-meta-value">{run.error || "—"}</div>
+                        </div>
+                      </div>
+                    </article>
+                  ))}
+                </div>
+              ) : (
+                <div className="app-empty" style={{ minHeight: 220 }}>
+                  <div>
+                    <div className="app-empty-icon">📄</div>
+                    <div>No run history yet</div>
                   </div>
                 </div>
-              ))}
-            </div>
-          </>
-        ) : (
-          <div className="empty-state">
-            <div className="empty-state-icon">⏰</div>
-            <div className="empty-state-title">No Cron Jobs</div>
-            <div className="empty-state-description">
-              Create a scheduled job to run agent tasks on a timer.
-            </div>
+              )
+            ) : (
+              <CreateCronForm />
+            )}
           </div>
-        )
-      ) : cronTab === "runs" ? (
-        cronRuns.length ? (
-          <table className="table">
-            <thead>
-              <tr>
-                <th>Job ID</th>
-                <th>Status</th>
-                <th>Time</th>
-                <th>Duration</th>
-                <th>Summary</th>
-              </tr>
-            </thead>
-            <tbody>
-              {cronRuns.map((run) => (
-                <tr key={`${run.id}-${run.ts}`}>
-                  <td className="mono" style={{ fontSize: "var(--font-size-xs)" }}>
-                    {run.jobId.slice(0, 12)}
-                  </td>
-                  <td>
-                    <StatusPill status={run.status} />
-                  </td>
-                  <td>{relativeTime(run.ts)}</td>
-                  <td>
-                    {run.durationMs != null ? `${(run.durationMs / 1000).toFixed(1)}s` : "-"}
-                  </td>
-                  <td
-                    style={{
-                      maxWidth: 300,
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
-                    }}
-                  >
-                    {run.error ? (
-                      <span style={{ color: "var(--accent-danger)" }}>{run.error}</span>
-                    ) : (
-                      run.summary || "-"
-                    )}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        ) : (
-          <div className="empty-state">
-            <div className="empty-state-icon">📄</div>
-            <div className="empty-state-title">No Run History</div>
-            <div className="empty-state-description">
-              Cron job runs will appear here after execution.
-            </div>
-          </div>
-        )
-      ) : (
-        <CreateCronForm />
-      )}
+        </section>
+      </div>
     </div>
   );
 }
diff --git a/gateway/ui/src/react/views/DebugView.tsx b/gateway/ui/src/react/views/DebugView.tsx
index 56f0438..85954ad 100644
--- a/gateway/ui/src/react/views/DebugView.tsx
+++ b/gateway/ui/src/react/views/DebugView.tsx
@@ -3,7 +3,11 @@ import { Button } from "@cloudflare/kumo/components/button";
 import { Input, Textarea } from "@cloudflare/kumo/components/input";
 import { useReactUiStore } from "../state/store";
 
-export function DebugView() {
+type DebugViewProps = {
+  embedded?: boolean;
+};
+
+export function DebugView({ embedded = false }: DebugViewProps = {}) {
   const debugLog = useReactUiStore((s) => s.debugLog);
   const clearDebugLog = useReactUiStore((s) => s.clearDebugLog);
   const rpcRequest = useReactUiStore((s) => s.rpcRequest);
@@ -24,105 +28,124 @@ export function DebugView() {
   };
 
   return (
-    <div className="view-container">
-      <div className="section-header">
-        <h2 className="section-title">Debug</h2>
-        <Button size="sm" variant="secondary" onClick={() => clearDebugLog()}>
-          Clear Log
-        </Button>
-      </div>
-
-      <div className="card" style={{ marginBottom: "var(--space-4)" }}>
-        <div className="card-header">
-          <h3 className="card-title">RPC Tester</h3>
-        </div>
-        <div className="card-body">
-          <form onSubmit={onRpcSubmit}>
-            <div className="form-group">
-              <Input
-                label="Method"
-                type="text"
-                className="mono ui-input-fix"
-                size="lg"
-                placeholder="e.g., tools.list"
-                value={rpcMethod}
-                onChange={(event) => setRpcMethod(event.target.value)}
-              />
+    <div className={embedded ? undefined : "view-container"}>
+      <div className={embedded ? "app-list" : "app-shell"} data-app={embedded ? undefined : "debug"}>
+        {!embedded ? (
+          <section className="app-hero">
+            <div className="app-hero-content">
+              <div>
+                <h2 className="app-hero-title">Debug Console</h2>
+                <p className="app-hero-subtitle">
+                  Send raw RPC calls and inspect live gateway events flowing through
+                  this client connection.
+                </p>
+                <div className="app-hero-meta">
+                  <span className="app-badge-dot" />
+                  <span>{debugLog.length} event(s) captured</span>
+                </div>
+              </div>
+              <Button size="sm" variant="secondary" onClick={() => clearDebugLog()}>
+                Clear Log
+              </Button>
             </div>
+          </section>
+        ) : (
+          <div className="app-actions" style={{ justifyContent: "flex-end" }}>
+            <Button size="sm" variant="secondary" onClick={() => clearDebugLog()}>
+              Clear Log
+            </Button>
+          </div>
+        )}
 
-            <div className="form-group">
-              <Textarea
-                label="Params (JSON)"
-                className="mono ui-input-fix"
-                size="lg"
-                placeholder='{"sessionKey":"..."}'
-                rows={3}
-                value={rpcParams}
-                onValueChange={setRpcParams}
-              />
-            </div>
+        <section className="app-grid" style={{ flex: 1, minHeight: 0 }}>
+          <article className="app-panel app-col-5">
+            <header className="app-panel-head">
+              <h3 className="app-panel-title">RPC Tester</h3>
+              <span className="app-panel-meta">manual requests</span>
+            </header>
+            <div className="app-panel-body app-scroll">
+              <form onSubmit={onRpcSubmit} className="app-list" style={{ gap: "var(--space-4)" }}>
+                <div className="form-group">
+                  <Input
+                    label="Method"
+                    type="text"
+                    className="mono ui-input-fix"
+                    size="lg"
+                    placeholder="e.g., tools.list"
+                    value={rpcMethod}
+                    onChange={(event) => setRpcMethod(event.target.value)}
+                  />
+                </div>
 
-            <Button type="submit" variant="primary">
-              Send Request
-            </Button>
+                <div className="form-group">
+                  <Textarea
+                    label="Params (JSON)"
+                    className="mono ui-input-fix"
+                    size="lg"
+                    placeholder='{"sessionKey":"..."}'
+                    rows={4}
+                    value={rpcParams}
+                    onValueChange={setRpcParams}
+                  />
+                </div>
 
-            <div className="form-group" style={{ marginTop: "var(--space-4)" }}>
-              <label className="form-label">Result</label>
-              <pre
-                style={{
-                  margin: 0,
-                  padding: "var(--space-3)",
-                  background: "var(--bg-tertiary)",
-                  borderRadius: "var(--radius-md)",
-                  fontSize: "var(--font-size-xs)",
-                  maxHeight: 300,
-                  overflow: "auto",
-                }}
-              >
-                <code>{rpcResult}</code>
-              </pre>
+                <div className="app-actions">
+                  <Button type="submit" variant="primary">
+                    Send Request
+                  </Button>
+                </div>
+
+                <div>
+                  <label className="form-label">Result</label>
+                  <pre className="app-code-block" style={{ maxHeight: 320 }}>
+                    <code>{rpcResult}</code>
+                  </pre>
+                </div>
+              </form>
             </div>
-          </form>
-        </div>
-      </div>
+          </article>
 
-      <div className="card">
-        <div className="card-header">
-          <h3 className="card-title">Event Log</h3>
-          <span className="pill">{debugLog.length} events</span>
-        </div>
-        <div className="card-body" style={{ maxHeight: 400, overflowY: "auto" }}>
-          {debugLog.length === 0 ? (
-            <p className="muted">No events yet</p>
-          ) : (
-            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
-              {debugLog
-                .slice()
-                .reverse()
-                .map((entry, index) => (
-                  <div
-                    key={`${entry.time.getTime()}-${index}`}
-                    style={{
-                      padding: "var(--space-2)",
-                      background: "var(--bg-tertiary)",
-                      borderRadius: "var(--radius-md)",
-                      fontSize: "var(--font-size-xs)",
-                    }}
-                  >
-                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "var(--space-1)" }}>
-                      <span className="mono" style={{ color: "var(--accent-primary)" }}>
-                        {entry.type}
-                      </span>
-                      <span className="muted">{entry.time.toLocaleTimeString()}</span>
-                    </div>
-                    <pre style={{ margin: 0, overflowX: "auto" }}>
-                      <code>{JSON.stringify(entry.data, null, 2)}</code>
-                    </pre>
+          <article className="app-panel app-col-7">
+            <header className="app-panel-head">
+              <h3 className="app-panel-title">Event Stream</h3>
+              <span className="app-panel-meta">newest first</span>
+            </header>
+            <div className="app-panel-body app-scroll">
+              {debugLog.length === 0 ? (
+                <div className="app-empty" style={{ minHeight: 220 }}>
+                  <div>
+                    <div className="app-empty-icon">🧪</div>
+                    <div>No events yet</div>
                   </div>
-                ))}
+                </div>
+              ) : (
+                <div className="app-list">
+                  {debugLog
+                    .slice()
+                    .reverse()
+                    .map((entry, index) => (
+                      <div
+                        className="app-list-item"
+                        key={`${entry.time.getTime()}-${index}`}
+                      >
+                        <div className="app-list-head">
+                          <div>
+                            <div className="app-list-title mono">{entry.type}</div>
+                            <div className="app-list-subtitle">
+                              {entry.time.toLocaleTimeString()}
+                            </div>
+                          </div>
+                        </div>
+                        <pre className="app-code-block" style={{ marginTop: "var(--space-3)" }}>
+                          <code>{JSON.stringify(entry.data, null, 2)}</code>
+                        </pre>
+                      </div>
+                    ))}
+                </div>
+              )}
             </div>
-          )}
-        </div>
+          </article>
+        </section>
       </div>
     </div>
   );
diff --git a/gateway/ui/src/react/views/LogsView.tsx b/gateway/ui/src/react/views/LogsView.tsx
index c9d15a9..57f3d79 100644
--- a/gateway/ui/src/react/views/LogsView.tsx
+++ b/gateway/ui/src/react/views/LogsView.tsx
@@ -26,101 +26,130 @@ export function LogsView() {
         }
       }
     }
-    return Array.from(ids);
+    return Array.from(ids).sort();
   }, [tools]);
 
   return (
     <div className="view-container">
-      <div className="section-header">
-        <span className="section-title">Node Logs</span>
-      </div>
-
-      <div className="card" style={{ marginBottom: "var(--space-4)" }}>
-        <div
-          className="card-body"
-          style={{
-            display: "flex",
-            gap: "var(--space-4)",
-            alignItems: "flex-end",
-            flexWrap: "wrap",
-          }}
-        >
-          <div className="form-group" style={{ margin: 0, minWidth: 200 }}>
-            <Select<string>
-              label="Node"
-              hideLabel={false}
-              value={logsNodeId}
-              onValueChange={(value) => setLogsNodeId(String(value || ""))}
-            >
-              <Select.Option value="">All nodes</Select.Option>
-              {nodeIds.map((id) => (
-                <Select.Option value={id} key={id}>
-                  {id}
-                </Select.Option>
-              ))}
-            </Select>
+      <div className="app-shell" data-app="logs">
+        <section className="app-hero">
+          <div className="app-hero-content">
+            <div>
+              <h2 className="app-hero-title">Log Monitor</h2>
+              <p className="app-hero-subtitle">
+                Pull buffered node logs on demand for debugging execution issues and
+                runtime behavior.
+              </p>
+              <div className="app-hero-meta">
+                <span className="app-badge-dot" />
+                <span>{logsData ? `${logsData.count} line(s) loaded` : "No logs loaded"}</span>
+              </div>
+            </div>
           </div>
+        </section>
 
-          <div className="form-group" style={{ margin: 0, minWidth: 120 }}>
-            <Input
-              label="Lines"
-              type="number"
-              className="ui-input-fix"
-              size="lg"
-              value={logsLines}
-              min={1}
-              max={5000}
-              onChange={(event) => setLogsLines(parseInt(event.target.value || "200", 10))}
-              onBlur={(event) =>
-                setLogsLines(Math.max(1, Math.min(5000, parseInt(event.target.value || "200", 10))))
-              }
-            />
-          </div>
+        <section className="app-panel">
+          <header className="app-panel-head">
+            <h3 className="app-panel-title">Filters</h3>
+            <span className="app-panel-meta">query controls</span>
+          </header>
+          <div className="app-panel-body">
+            <div className="app-toolbar">
+              <div className="form-group" style={{ minWidth: 220 }}>
+                <Select<string>
+                  label="Node"
+                  hideLabel={false}
+                  value={logsNodeId}
+                  onValueChange={(value) => setLogsNodeId(String(value || ""))}
+                >
+                  <Select.Option value="">All nodes</Select.Option>
+                  {nodeIds.map((id) => (
+                    <Select.Option value={id} key={id}>
+                      {id}
+                    </Select.Option>
+                  ))}
+                </Select>
+              </div>
 
-          <Button
-            variant="primary"
-            loading={logsLoading}
-            onClick={() => {
-              void loadLogs();
-            }}
-          >
-            Fetch Logs
-          </Button>
-        </div>
-      </div>
+              <div className="form-group" style={{ minWidth: 140 }}>
+                <Input
+                  label="Lines"
+                  type="number"
+                  className="ui-input-fix"
+                  size="lg"
+                  value={logsLines}
+                  min={1}
+                  max={5000}
+                  onChange={(event) =>
+                    setLogsLines(parseInt(event.target.value || "200", 10))
+                  }
+                  onBlur={(event) =>
+                    setLogsLines(
+                      Math.max(1, Math.min(5000, parseInt(event.target.value || "200", 10))),
+                    )
+                  }
+                />
+              </div>
 
-      {logsError ? (
-        <div className="connect-error" style={{ marginBottom: "var(--space-4)" }}>
-          {logsError}
-        </div>
-      ) : null}
+              <Button
+                variant="primary"
+                loading={logsLoading}
+                onClick={() => {
+                  void loadLogs();
+                }}
+              >
+                Fetch Logs
+              </Button>
+            </div>
 
-      {logsData ? (
-        <div className="card">
-          <div className="card-header">
-            <span className="card-title">
-              {logsData.nodeId || "All Nodes"} - {logsData.count} line
-              {logsData.count !== 1 ? "s" : ""}
-              {logsData.truncated ? (
-                <span className="pill pill-warning" style={{ marginLeft: "var(--space-2)" }}>
-                  Truncated
-                </span>
-              ) : null}
-            </span>
+            {logsError ? (
+              <div className="app-list-item" style={{ marginTop: "var(--space-4)" }}>
+                <p className="text-danger">{logsError}</p>
+              </div>
+            ) : null}
           </div>
-          <div className="card-body" style={{ padding: 0 }}>
-            <pre className="logs-output">{logsData.lines.join("\n")}</pre>
-          </div>
-        </div>
-      ) : !logsLoading ? (
-        <div className="empty-state">
-          <div className="empty-state-icon">📜</div>
-          <div className="empty-state-title">No Logs Loaded</div>
-          <div className="empty-state-description">
-            Select a node and click "Fetch Logs" to view output.
+        </section>
+
+        <section className="app-panel" style={{ flex: 1, minHeight: 0 }}>
+          <header className="app-panel-head">
+            <h3 className="app-panel-title">
+              {logsData ? logsData.nodeId || "All Nodes" : "Log Output"}
+            </h3>
+            {logsData ? (
+              <div className="app-actions">
+                <span className="pill">
+                  {logsData.count} line{logsData.count !== 1 ? "s" : ""}
+                </span>
+                {logsData.truncated ? <span className="pill pill-warning">truncated</span> : null}
+              </div>
+            ) : null}
+          </header>
+          <div className="app-panel-body" style={{ padding: "var(--space-3)" }}>
+            {logsData ? (
+              <pre className="app-code-block" style={{ height: "100%" }}>
+                {logsData.lines.join("\n")}
+              </pre>
+            ) : !logsLoading ? (
+              <div className="app-empty" style={{ minHeight: 260 }}>
+                <div>
+                  <div className="app-empty-icon">📜</div>
+                  <div>No logs loaded</div>
+                  <div className="text-secondary" style={{ marginTop: "var(--space-1)" }}>
+                    Select filters and fetch a new log snapshot.
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="app-empty" style={{ minHeight: 260 }}>
+                <div>
+                  <span className="spinner" />
+                  <div style={{ marginTop: "var(--space-2)" }}>Fetching logs...</div>
+                </div>
+              </div>
+            )}
           </div>
-        </div>
-      ) : null}
+        </section>
+      </div>
     </div>
   );
 }
diff --git a/gateway/ui/src/react/views/NodesView.tsx b/gateway/ui/src/react/views/NodesView.tsx
index 3f4aa3b..f780c27 100644
--- a/gateway/ui/src/react/views/NodesView.tsx
+++ b/gateway/ui/src/react/views/NodesView.tsx
@@ -22,55 +22,13 @@ function groupToolsByNode(tools: ToolDefinition[]): NodeInfo[] {
     nodeMap.get(nodeId)!.push(tool);
   }
 
-  return Array.from(nodeMap.entries()).map(([id, toolsForNode]) => ({
-    id,
-    tools: toolsForNode,
-  }));
+  return Array.from(nodeMap.entries())
+    .map(([id, toolsForNode]) => ({ id, tools: toolsForNode }))
+    .sort((a, b) => a.id.localeCompare(b.id));
 }
 
-function ToolList({
-  tools,
-  showShortName,
-}: {
-  tools: ToolDefinition[];
-  showShortName: boolean;
-}) {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
-      {tools.map((tool) => {
-        const displayName = showShortName
-          ? tool.name.split("__")[1] || tool.name
-          : tool.name;
-        return (
-          <div
-            key={tool.name}
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              padding: "var(--space-2)",
-              background: "var(--bg-tertiary)",
-              borderRadius: "var(--radius-md)",
-            }}
-          >
-            <div style={{ display: "flex", alignItems: "center", gap: "var(--space-2)" }}>
-              <code style={{ fontSize: "var(--font-size-sm)", color: "var(--accent-primary)" }}>
-                {displayName}
-              </code>
-            </div>
-            <p
-              style={{
-                fontSize: "var(--font-size-xs)",
-                color: "var(--text-muted)",
-                marginTop: "var(--space-1)",
-              }}
-            >
-              {tool.description}
-            </p>
-          </div>
-        );
-      })}
-    </div>
-  );
+function toolShortName(toolName: string): string {
+  return toolName.split("__")[1] || toolName;
 }
 
 export function NodesView() {
@@ -79,74 +37,104 @@ export function NodesView() {
   const loadTools = useReactUiStore((s) => s.loadTools);
 
   const nodes = groupToolsByNode(tools);
-  const nativeTools = tools.filter((t) => t.name.startsWith("gsv__"));
+  const nativeTools = tools.filter((tool) => tool.name.startsWith("gsv__"));
 
   return (
     <div className="view-container">
-      <div className="section-header">
-        <h2 className="section-title">Connected Nodes</h2>
-        <Button
-          size="sm"
-          variant="secondary"
-          loading={toolsLoading}
-          onClick={() => {
-            void loadTools();
-          }}
-        >
-          Refresh
-        </Button>
-      </div>
-
-      {toolsLoading && tools.length === 0 ? (
-        <div className="card">
-          <div className="card-body">
-            <div className="thinking-indicator">
-              <span className="spinner"></span>
-              <span>Loading nodes...</span>
-            </div>
-          </div>
-        </div>
-      ) : nodes.length === 0 && nativeTools.length === 0 ? (
-        <div className="empty-state">
-          <div className="empty-state-icon">🖥️</div>
-          <h3 className="empty-state-title">No nodes connected</h3>
-          <p className="empty-state-description">
-            Connect a node using: <code>gsv node</code>
-          </p>
-        </div>
-      ) : (
-        <>
-          {nativeTools.length > 0 ? (
-            <div className="card" style={{ marginBottom: "var(--space-4)" }}>
-              <div className="card-header">
-                <h3 className="card-title">
-                  <span style={{ marginRight: "var(--space-2)" }}>🚀</span>
-                  Native Tools (Gateway)
-                </h3>
-                <span className="pill">{nativeTools.length} tools</span>
-              </div>
-              <div className="card-body">
-                <ToolList tools={nativeTools} showShortName={false} />
+      <div className="app-shell" data-app="nodes">
+        <section className="app-hero">
+          <div className="app-hero-content">
+            <div>
+              <h2 className="app-hero-title">Node Inventory</h2>
+              <p className="app-hero-subtitle">
+                Inspect active execution hosts and the tools each host currently
+                exposes to the gateway runtime.
+              </p>
+              <div className="app-hero-meta">
+                <span className="app-badge-dot" />
+                <span>{nodes.length} node(s) online</span>
+                <span className="app-mono-pill mono">{tools.length} total tools</span>
               </div>
             </div>
-          ) : null}
+            <Button
+              size="sm"
+              variant="secondary"
+              loading={toolsLoading}
+              onClick={() => {
+                void loadTools();
+              }}
+            >
+              Refresh
+            </Button>
+          </div>
+        </section>
 
-          {nodes.map((node) => (
-            <div className="card" style={{ marginBottom: "var(--space-4)" }} key={node.id}>
-              <div className="card-header">
-                <h3 className="card-title">
-                  <span style={{ marginRight: "var(--space-2)" }}>🖥️</span>
-                  {node.id}
-                </h3>
-                <span className="pill pill-success">{node.tools.length} tools</span>
+        {toolsLoading && tools.length === 0 ? (
+          <section className="app-panel">
+            <div className="app-panel-body app-empty">
+              <div>
+                <span className="spinner" />
+                <div style={{ marginTop: "var(--space-2)" }}>Loading node inventory...</div>
               </div>
-              <div className="card-body">
-                <ToolList tools={node.tools} showShortName={true} />
+            </div>
+          </section>
+        ) : nodes.length === 0 && nativeTools.length === 0 ? (
+          <section className="app-panel">
+            <div className="app-panel-body app-empty">
+              <div>
+                <div className="app-empty-icon">🖥️</div>
+                <div>No nodes connected</div>
+                <div className="text-secondary" style={{ marginTop: "var(--space-1)" }}>
+                  Connect one with <code>gsv node --foreground</code>.
+                </div>
               </div>
             </div>
-          ))}
-        </>
-      )}
+          </section>
+        ) : (
+          <section className="app-grid">
+            {nativeTools.length > 0 ? (
+              <article className="app-panel app-col-12">
+                <header className="app-panel-head">
+                  <h3 className="app-panel-title">Gateway Native Tools</h3>
+                  <span className="app-panel-meta">{nativeTools.length}</span>
+                </header>
+                <div className="app-panel-body">
+                  <div className="app-list">
+                    {nativeTools.map((tool) => (
+                      <div className="app-list-item" key={tool.name}>
+                        <div className="app-list-title mono">{tool.name}</div>
+                        <div className="app-list-subtitle">{tool.description}</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </article>
+            ) : null}
+
+            {nodes.map((node) => (
+              <article className="app-panel app-col-6" key={node.id}>
+                <header className="app-panel-head">
+                  <h3 className="app-panel-title">
+                    <span style={{ marginRight: "var(--space-2)" }}>🖥️</span>
+                    {node.id}
+                  </h3>
+                  <span className="pill pill-success">{node.tools.length} tools</span>
+                </header>
+                <div className="app-panel-body">
+                  <div className="app-list">
+                    {node.tools.map((tool) => (
+                      <div className="app-list-item" key={tool.name}>
+                        <div className="app-list-title mono">{toolShortName(tool.name)}</div>
+                        <div className="app-list-subtitle">{tool.description}</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </article>
+            ))}
+          </section>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/gateway/ui/src/react/views/OverviewView.tsx b/gateway/ui/src/react/views/OverviewView.tsx
index 6909686..ebb5030 100644
--- a/gateway/ui/src/react/views/OverviewView.tsx
+++ b/gateway/ui/src/react/views/OverviewView.tsx
@@ -9,7 +9,7 @@ function getUniqueNodes(tools: { name: string }[]): string[] {
       nodes.add(parts[0]);
     }
   }
-  return Array.from(nodes);
+  return Array.from(nodes).sort();
 }
 
 export function OverviewView() {
@@ -20,104 +20,118 @@ export function OverviewView() {
   const channels = useReactUiStore((s) => s.channels);
   const chatMessages = useReactUiStore((s) => s.chatMessages);
 
-  const nodeCount = getUniqueNodes(tools).length;
-  const toolCount = tools.length;
   const gatewayUrl = getGatewayUrl(settings);
+  const nodes = getUniqueNodes(tools);
+  const kpis = [
+    { label: "Nodes", value: nodes.length },
+    { label: "Tools", value: tools.length },
+    { label: "Sessions", value: sessions.length },
+    { label: "Channels", value: channels.length },
+    { label: "Messages", value: chatMessages.length },
+  ];
 
   return (
     <div className="view-container">
-      <div className="cards-grid">
-        <div className="card">
-          <div className="card-header">
-            <h3 className="card-title">Connection</h3>
-          </div>
-          <div className="card-body">
-            <div className="kv-list">
-              <div className="kv-row">
-                <span className="kv-key">Status</span>
-                <span
-                  className={`pill ${
-                    connectionState === "connected" ? "pill-success" : "pill-warning"
-                  }`}
-                >
-                  {connectionState}
-                </span>
-              </div>
-              <div className="kv-row">
-                <span className="kv-key">Gateway URL</span>
-                <span className="kv-value mono">{gatewayUrl}</span>
+      <div className="app-shell" data-app="overview">
+        <section className="app-hero">
+          <div className="app-hero-content">
+            <div>
+              <h2 className="app-hero-title">System Overview</h2>
+              <p className="app-hero-subtitle">
+                Real-time control snapshot for your gateway, connected nodes, channels,
+                and the currently selected session.
+              </p>
+              <div className="app-hero-meta">
+                <span className="app-badge-dot" />
+                <span>{connectionState}</span>
+                <span className="app-mono-pill mono">{gatewayUrl}</span>
               </div>
             </div>
+            <div className="app-mono-pill mono">{settings.sessionKey}</div>
           </div>
-        </div>
-
-        <div className="card">
-          <div className="card-header">
-            <h3 className="card-title">Nodes</h3>
-          </div>
-          <div className="card-body">
-            <div className="stat">
-              <div className="stat-value">{nodeCount}</div>
-              <div className="stat-label">Connected Nodes</div>
-            </div>
-          </div>
-        </div>
-
-        <div className="card">
-          <div className="card-header">
-            <h3 className="card-title">Tools</h3>
-          </div>
-          <div className="card-body">
-            <div className="stat">
-              <div className="stat-value">{toolCount}</div>
-              <div className="stat-label">Available Tools</div>
-            </div>
-          </div>
-        </div>
+        </section>
 
-        <div className="card">
-          <div className="card-header">
-            <h3 className="card-title">Sessions</h3>
-          </div>
-          <div className="card-body">
-            <div className="stat">
-              <div className="stat-value">{sessions.length}</div>
-              <div className="stat-label">Active Sessions</div>
-            </div>
-          </div>
-        </div>
+        <section className="app-kpis">
+          {kpis.map((kpi) => (
+            <article className="app-kpi" key={kpi.label}>
+              <span className="app-kpi-label">{kpi.label}</span>
+              <span className="app-kpi-value">{kpi.value}</span>
+            </article>
+          ))}
+        </section>
 
-        <div className="card">
-          <div className="card-header">
-            <h3 className="card-title">Channels</h3>
-          </div>
-          <div className="card-body">
-            <div className="stat">
-              <div className="stat-value">{channels.length}</div>
-              <div className="stat-label">Connected Channels</div>
+        <section className="app-grid">
+          <article className="app-panel app-col-7">
+            <header className="app-panel-head">
+              <h3 className="app-panel-title">Connected Execution Nodes</h3>
+              <span className="app-panel-meta">{nodes.length} active</span>
+            </header>
+            <div className="app-panel-body">
+              {nodes.length ? (
+                <div className="app-list">
+                  {nodes.map((nodeId) => {
+                    const nodeToolCount = tools.filter((tool) =>
+                      tool.name.startsWith(`${nodeId}__`),
+                    ).length;
+                    return (
+                      <div className="app-list-item" key={nodeId}>
+                        <div className="app-list-head">
+                          <div>
+                            <div className="app-list-title mono">{nodeId}</div>
+                            <div className="app-list-subtitle">
+                              Execution host currently serving tool requests.
+                            </div>
+                          </div>
+                          <span className="pill pill-success">{nodeToolCount} tools</span>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="app-empty">
+                  <div>
+                    <div className="app-empty-icon">🖥️</div>
+                    <div>No nodes connected yet.</div>
+                  </div>
+                </div>
+              )}
             </div>
-          </div>
-        </div>
+          </article>
 
-        <div className="card">
-          <div className="card-header">
-            <h3 className="card-title">Current Session</h3>
-          </div>
-          <div className="card-body">
-            <div className="kv-list">
-              <div className="kv-row">
-                <span className="kv-key">Session Key</span>
-                <span className="kv-value mono truncate" style={{ maxWidth: 200 }}>
-                  {settings.sessionKey}
-                </span>
-              </div>
-              <div className="kv-row">
-                <span className="kv-key">Messages</span>
-                <span className="kv-value">{chatMessages.length}</span>
+          <article className="app-panel app-col-5">
+            <header className="app-panel-head">
+              <h3 className="app-panel-title">Current Session</h3>
+              <span className="app-panel-meta">live context</span>
+            </header>
+            <div className="app-panel-body">
+              <div className="app-list">
+                <div className="app-list-item">
+                  <div className="app-meta-row">
+                    <div className="app-meta-label">Session Key</div>
+                    <div className="app-meta-value mono">{settings.sessionKey}</div>
+                  </div>
+                </div>
+                <div className="app-list-item">
+                  <div className="app-list-meta">
+                    <div className="app-meta-row">
+                      <div className="app-meta-label">Message Count</div>
+                      <div className="app-meta-value">{chatMessages.length}</div>
+                    </div>
+                    <div className="app-meta-row">
+                      <div className="app-meta-label">Connection</div>
+                      <div className="app-meta-value">{connectionState}</div>
+                    </div>
+                    <div className="app-meta-row">
+                      <div className="app-meta-label">Channel Accounts</div>
+                      <div className="app-meta-value">{channels.length}</div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
+          </article>
+        </section>
       </div>
     </div>
   );
diff --git a/gateway/ui/src/react/views/PairingView.tsx b/gateway/ui/src/react/views/PairingView.tsx
index 64ea392..a3b7056 100644
--- a/gateway/ui/src/react/views/PairingView.tsx
+++ b/gateway/ui/src/react/views/PairingView.tsx
@@ -15,7 +15,11 @@ function channelIcon(channel: string): string {
   return "🔗";
 }
 
-export function PairingView() {
+type PairingViewProps = {
+  embedded?: boolean;
+};
+
+export function PairingView({ embedded = false }: PairingViewProps = {}) {
   const pairingRequests = useReactUiStore((s) => s.pairingRequests);
   const pairingLoading = useReactUiStore((s) => s.pairingLoading);
   const loadPairing = useReactUiStore((s) => s.loadPairing);
@@ -23,95 +27,137 @@ export function PairingView() {
   const pairReject = useReactUiStore((s) => s.pairReject);
 
   return (
-    <div className="view-container">
-      <div className="section-header">
-        <span className="section-title">Pairing Requests</span>
-        <Button
-          size="sm"
-          variant="secondary"
-          loading={pairingLoading}
-          onClick={() => {
-            void loadPairing();
-          }}
-        >
-          Refresh
-        </Button>
-      </div>
-
-      {pairingLoading && !pairingRequests.length ? (
-        <div className="empty-state">
-          <span className="spinner"></span> Loading...
-        </div>
-      ) : !pairingRequests.length ? (
-        <div className="empty-state">
-          <div className="empty-state-icon">🤝</div>
-          <div className="empty-state-title">No Pending Requests</div>
-          <div className="empty-state-description">
-            When someone messages your agent via a channel with pairing enabled,
-            their request will appear here for approval.
-          </div>
-        </div>
-      ) : (
-        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
-          {pairingRequests.map((pair) => (
-            <div className="card" key={`${pair.channel}:${pair.senderId}`}>
-              <div className="card-header">
-                <div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)" }}>
-                  <span style={{ fontSize: "1.5rem" }}>{channelIcon(pair.channel)}</span>
-                  <div>
-                    <div className="card-title">{pair.senderName || pair.senderId}</div>
-                    <div style={{ fontSize: "var(--font-size-xs)", color: "var(--text-muted)" }}>
-                      {pair.channel} - {pair.senderId}
-                    </div>
-                  </div>
+    <div className={embedded ? undefined : "view-container"}>
+      <div className={embedded ? "app-list" : "app-shell"} data-app={embedded ? undefined : "pairing"}>
+        {!embedded ? (
+          <section className="app-hero">
+            <div className="app-hero-content">
+              <div>
+                <h2 className="app-hero-title">Pairing Queue</h2>
+                <p className="app-hero-subtitle">
+                  Review identity and origin before approving new channel senders.
+                  Pending requests are only allowed after explicit approval.
+                </p>
+                <div className="app-hero-meta">
+                  <span className="app-badge-dot" />
+                  <span>{pairingRequests.length} pending request(s)</span>
                 </div>
-                <div style={{ display: "flex", gap: "var(--space-2)" }}>
-                  <Button
-                    size="sm"
-                    variant="primary"
-                    onClick={() => {
-                      void pairApprove(pair.channel, pair.senderId);
-                    }}
-                  >
-                    Approve
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="destructive"
-                    onClick={() => {
-                      if (
-                        confirm(
-                          `Reject pairing request from ${
-                            pair.senderName || pair.senderId
-                          }?`,
-                        )
-                      ) {
-                        void pairReject(pair.channel, pair.senderId);
-                      }
-                    }}
-                  >
-                    Reject
-                  </Button>
+              </div>
+              <Button
+                size="sm"
+                variant="secondary"
+                loading={pairingLoading}
+                onClick={() => {
+                  void loadPairing();
+                }}
+              >
+                Refresh
+              </Button>
+            </div>
+          </section>
+        ) : (
+          <div className="app-actions" style={{ justifyContent: "flex-end" }}>
+            <Button
+              size="sm"
+              variant="secondary"
+              loading={pairingLoading}
+              onClick={() => {
+                void loadPairing();
+              }}
+            >
+              Refresh
+            </Button>
+          </div>
+        )}
+
+        <section className="app-panel">
+          <header className="app-panel-head">
+            <h3 className="app-panel-title">Requests</h3>
+            <span className="app-panel-meta">access control</span>
+          </header>
+          <div className="app-panel-body">
+            {pairingLoading && !pairingRequests.length ? (
+              <div className="app-empty" style={{ minHeight: 180 }}>
+                <div>
+                  <span className="spinner" />
+                  <div style={{ marginTop: "var(--space-2)" }}>Loading pairing requests...</div>
                 </div>
               </div>
-              <div className="card-body">
-                <div className="kv-list">
-                  <div className="kv-row">
-                    <span className="kv-key">Requested</span>
-                    <span className="kv-value">{relativeTime(pair.requestedAt)}</span>
+            ) : !pairingRequests.length ? (
+              <div className="app-empty" style={{ minHeight: 220 }}>
+                <div>
+                  <div className="app-empty-icon">🤝</div>
+                  <div>No pending requests</div>
+                  <div className="text-secondary" style={{ marginTop: "var(--space-1)" }}>
+                    New pairing attempts will show up here.
                   </div>
-                  {pair.message ? (
-                    <div className="kv-row">
-                      <span className="kv-key">Message</span>
-                      <span className="kv-value">{pair.message}</span>
-                    </div>
-                  ) : null}
                 </div>
               </div>
-            </div>
-          ))}
-        </div>
-      )}
+            ) : (
+              <div className="app-list">
+                {pairingRequests.map((pair) => (
+                  <article className="app-list-item" key={`${pair.channel}:${pair.senderId}`}>
+                    <div className="app-list-head">
+                      <div>
+                        <div className="app-list-title">
+                          <span style={{ marginRight: "var(--space-2)" }}>
+                            {channelIcon(pair.channel)}
+                          </span>
+                          {pair.senderName || pair.senderId}
+                        </div>
+                        <div className="app-list-subtitle mono">
+                          {pair.channel} · {pair.senderId}
+                        </div>
+                      </div>
+                      <div className="app-actions">
+                        <Button
+                          size="sm"
+                          variant="primary"
+                          onClick={() => {
+                            void pairApprove(pair.channel, pair.senderId);
+                          }}
+                        >
+                          Approve
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="destructive"
+                          onClick={() => {
+                            if (
+                              confirm(
+                                `Reject pairing request from ${pair.senderName || pair.senderId}?`,
+                              )
+                            ) {
+                              void pairReject(pair.channel, pair.senderId);
+                            }
+                          }}
+                        >
+                          Reject
+                        </Button>
+                      </div>
+                    </div>
+
+                    <div className="app-list-meta">
+                      <div className="app-meta-row">
+                        <div className="app-meta-label">Requested</div>
+                        <div className="app-meta-value">{relativeTime(pair.requestedAt)}</div>
+                      </div>
+                      <div className="app-meta-row">
+                        <div className="app-meta-label">Channel</div>
+                        <div className="app-meta-value">{pair.channel}</div>
+                      </div>
+                      <div className="app-meta-row">
+                        <div className="app-meta-label">Message</div>
+                        <div className="app-meta-value">{pair.message || "—"}</div>
+                      </div>
+                    </div>
+                  </article>
+                ))}
+              </div>
+            )}
+          </div>
+        </section>
+      </div>
     </div>
   );
 }
diff --git a/gateway/ui/src/react/views/SessionsView.tsx b/gateway/ui/src/react/views/SessionsView.tsx
index ef51aa2..6cc1b80 100644
--- a/gateway/ui/src/react/views/SessionsView.tsx
+++ b/gateway/ui/src/react/views/SessionsView.tsx
@@ -11,6 +11,10 @@ function formatRelativeTime(ts: number): string {
   return `${Math.floor(diff / 86_400_000)}d ago`;
 }
 
+function formatAbsoluteTime(ts: number): string {
+  return new Date(ts).toLocaleString();
+}
+
 export function SessionsView() {
   const sessions = useReactUiStore((s) => s.sessions);
   const sessionsLoading = useReactUiStore((s) => s.sessionsLoading);
@@ -21,106 +25,127 @@ export function SessionsView() {
 
   return (
     <div className="view-container">
-      <div className="section-header">
-        <h2 className="section-title">Active Sessions</h2>
-        <Button
-          size="sm"
-          variant="secondary"
-          loading={sessionsLoading}
-          onClick={() => {
-            void loadSessions();
-          }}
-        >
-          Refresh
-        </Button>
-      </div>
-
-      {sessionsLoading && sessions.length === 0 ? (
-        <div className="card">
-          <div className="card-body">
-            <div className="thinking-indicator">
-              <span className="spinner"></span>
-              <span>Loading sessions...</span>
+      <div className="app-shell" data-app="sessions">
+        <section className="app-hero">
+          <div className="app-hero-content">
+            <div>
+              <h2 className="app-hero-title">Session Console</h2>
+              <p className="app-hero-subtitle">
+                Browse active histories, switch the focused conversation, or reset a
+                thread to archive and restart context.
+              </p>
+              <div className="app-hero-meta">
+                <span className="app-badge-dot" />
+                <span>{sessions.length} tracked sessions</span>
+              </div>
+            </div>
+            <div className="app-actions">
+              <Button
+                size="sm"
+                variant="secondary"
+                loading={sessionsLoading}
+                onClick={() => {
+                  void loadSessions();
+                }}
+              >
+                Refresh
+              </Button>
             </div>
           </div>
-        </div>
-      ) : sessions.length === 0 ? (
-        <div className="empty-state">
-          <div className="empty-state-icon">📋</div>
-          <h3 className="empty-state-title">No sessions</h3>
-          <p className="empty-state-description">
-            Sessions are created when you or others start conversations.
-          </p>
-        </div>
-      ) : (
-        <div className="card">
-          <table className="table">
-            <thead>
-              <tr>
-                <th>Session Key</th>
-                <th>Label</th>
-                <th>Last Active</th>
-                <th>Created</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {sessions.map((session) => {
-                const isCurrentSession = session.sessionKey === settings.sessionKey;
-                return (
-                  <tr key={session.sessionKey}>
-                    <td>
-                      <code className="mono" style={{ fontSize: "var(--font-size-xs)" }}>
-                        {session.sessionKey}
-                      </code>
-                      {isCurrentSession ? (
-                        <span
-                          className="pill pill-success"
-                          style={{ marginLeft: "var(--space-2)" }}
-                        >
-                          current
-                        </span>
-                      ) : null}
-                    </td>
-                    <td>{session.label || <span className="muted">—</span>}</td>
-                    <td>{formatRelativeTime(session.lastActiveAt)}</td>
-                    <td>{formatRelativeTime(session.createdAt)}</td>
-                    <td>
-                      <div style={{ display: "flex", gap: "var(--space-2)" }}>
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => {
-                            void selectSession(session.sessionKey);
-                          }}
-                          disabled={isCurrentSession}
-                        >
-                          Open
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => {
-                            if (
-                              confirm(
-                                `Reset session ${session.sessionKey}? This will archive all messages.`,
-                              )
-                            ) {
-                              void resetSession(session.sessionKey);
-                            }
-                          }}
-                        >
-                          Reset
-                        </Button>
+        </section>
+
+        <section className="app-panel app-col-12">
+          <header className="app-panel-head">
+            <h3 className="app-panel-title">Active Sessions</h3>
+            <span className="app-panel-meta">{sessions.length} entries</span>
+          </header>
+          <div className="app-panel-body">
+            {sessionsLoading && sessions.length === 0 ? (
+              <div className="app-empty">
+                <div>
+                  <span className="spinner" />
+                  <div style={{ marginTop: "var(--space-2)" }}>Loading sessions...</div>
+                </div>
+              </div>
+            ) : sessions.length === 0 ? (
+              <div className="app-empty">
+                <div>
+                  <div className="app-empty-icon">📋</div>
+                  <div>No sessions yet</div>
+                  <div className="text-secondary" style={{ marginTop: "var(--space-1)" }}>
+                    Sessions appear after a chat run starts.
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="app-list">
+                {sessions.map((session) => {
+                  const isCurrent = session.sessionKey === settings.sessionKey;
+                  return (
+                    <article className="app-list-item" key={session.sessionKey}>
+                      <div className="app-list-head">
+                        <div>
+                          <div className="app-list-title mono">{session.sessionKey}</div>
+                          <div className="app-list-subtitle">
+                            {session.label ? session.label : "Unlabeled session"}
+                          </div>
+                        </div>
+                        <div className="app-actions">
+                          {isCurrent ? <span className="pill pill-success">current</span> : null}
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => {
+                              void selectSession(session.sessionKey);
+                            }}
+                            disabled={isCurrent}
+                          >
+                            Open
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => {
+                              if (
+                                confirm(
+                                  `Reset session ${session.sessionKey}? This will archive all messages.`,
+                                )
+                              ) {
+                                void resetSession(session.sessionKey);
+                              }
+                            }}
+                          >
+                            Reset
+                          </Button>
+                        </div>
+                      </div>
+
+                      <div className="app-list-meta">
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Last Active</div>
+                          <div className="app-meta-value" title={formatAbsoluteTime(session.lastActiveAt)}>
+                            {formatRelativeTime(session.lastActiveAt)}
+                          </div>
+                        </div>
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Created</div>
+                          <div className="app-meta-value" title={formatAbsoluteTime(session.createdAt)}>
+                            {formatRelativeTime(session.createdAt)}
+                          </div>
+                        </div>
+                        <div className="app-meta-row">
+                          <div className="app-meta-label">Status</div>
+                          <div className="app-meta-value">{isCurrent ? "In focus" : "Idle"}</div>
+                        </div>
                       </div>
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-      )}
+                    </article>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </section>
+      </div>
     </div>
   );
 }
diff --git a/gateway/ui/src/react/views/SettingsView.tsx b/gateway/ui/src/react/views/SettingsView.tsx
index a663cd9..a268680 100644
--- a/gateway/ui/src/react/views/SettingsView.tsx
+++ b/gateway/ui/src/react/views/SettingsView.tsx
@@ -1,17 +1,17 @@
 import { useState } from "react";
-import { WALLPAPER_OPTIONS, type Wallpaper } from "../../ui/storage";
+import { SHELL_STYLE_OPTIONS, WALLPAPER_OPTIONS } from "../../ui/storage";
 import { useReactUiStore } from "../state/store";
 import { PairingView } from "./PairingView";
 import { ConfigView } from "./ConfigView";
 import { DebugView } from "./DebugView";
 
-type SettingsTab = "display" | "pairing" | "config" | "debug";
+type SettingsTab = "display" | "gateway" | "pairing" | "debug";
 
-const SETTINGS_TABS: { id: SettingsTab; label: string }[] = [
-  { id: "display", label: "Display" },
-  { id: "pairing", label: "Pairing" },
-  { id: "config", label: "Config" },
-  { id: "debug", label: "Debug" },
+const SETTINGS_TABS: { id: SettingsTab; label: string; hint: string }[] = [
+  { id: "display", label: "Display", hint: "Theme and wallpaper" },
+  { id: "gateway", label: "Gateway", hint: "Model, providers, policies" },
+  { id: "pairing", label: "Pairing", hint: "Sender approvals" },
+  { id: "debug", label: "Debug", hint: "Protocol diagnostics" },
 ];
 
 function DisplaySettings() {
@@ -20,66 +20,154 @@ function DisplaySettings() {
   const currentWallpaper = settings.wallpaper ?? "mesh";
 
   return (
-    <div className="settings-display">
-      <h3 className="settings-section-title">Wallpaper</h3>
-      <p className="settings-section-desc">
-        Choose a desktop background. You can also right-click the desktop to change wallpaper.
-      </p>
-      <div className="settings-wallpaper-grid">
-        {WALLPAPER_OPTIONS.map((opt) => (
-          <button
-            key={opt.id}
-            type="button"
-            className={`settings-wallpaper-card ${opt.id === currentWallpaper ? "active" : ""}`}
-            onClick={() => updateSettings({ wallpaper: opt.id })}
+    <div className="app-list" style={{ gap: "var(--space-4)" }}>
+      <section className="app-panel">
+        <header className="app-panel-head">
+          <h3 className="app-panel-title">Wallpaper</h3>
+          <span className="app-panel-meta">desktop backdrop</span>
+        </header>
+        <div className="app-panel-body">
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+              gap: "var(--space-3)",
+            }}
           >
-            <div className={`settings-wallpaper-preview os-wp-${opt.id}`} />
-            <div className="settings-wallpaper-info">
-              <span className="settings-wallpaper-name">{opt.label}</span>
-              <span className="settings-wallpaper-desc">{opt.description}</span>
-            </div>
-          </button>
-        ))}
-      </div>
+            {WALLPAPER_OPTIONS.map((opt) => (
+              <button
+                key={opt.id}
+                type="button"
+                className="app-list-item"
+                onClick={() => updateSettings({ wallpaper: opt.id })}
+                style={{
+                  textAlign: "left",
+                  cursor: "pointer",
+                  borderColor:
+                    opt.id === currentWallpaper
+                      ? "var(--glass-border-active)"
+                      : undefined,
+                }}
+              >
+                <div
+                  className={`settings-wallpaper-swatch os-wp-${opt.id}`}
+                  style={{
+                    height: 84,
+                    borderRadius: "var(--radius-md)",
+                    border: "1px solid var(--glass-border)",
+                    marginBottom: "var(--space-3)",
+                    overflow: "hidden",
+                  }}
+                />
+                <div className="app-list-title">{opt.label}</div>
+                <div className="app-list-subtitle">{opt.description}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
 
-      <h3 className="settings-section-title" style={{ marginTop: "1.5rem" }}>Theme</h3>
-      <div className="settings-theme-row">
-        {(["dark", "light", "system"] as const).map((theme) => (
-          <button
-            key={theme}
-            type="button"
-            className={`settings-theme-btn ${settings.theme === theme ? "active" : ""}`}
-            onClick={() => updateSettings({ theme })}
+      <section className="app-panel">
+        <header className="app-panel-head">
+          <h3 className="app-panel-title">Theme</h3>
+          <span className="app-panel-meta">UI mode</span>
+        </header>
+        <div className="app-panel-body">
+          <div className="app-actions">
+            {(["dark", "light", "system"] as const).map((theme) => (
+              <button
+                key={theme}
+                type="button"
+                className={`app-tab ${settings.theme === theme ? "active" : ""}`}
+                onClick={() => updateSettings({ theme })}
+              >
+                {theme.charAt(0).toUpperCase() + theme.slice(1)}
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="app-panel">
+        <header className="app-panel-head">
+          <h3 className="app-panel-title">Shell Style</h3>
+          <span className="app-panel-meta">window chrome + taskbar</span>
+        </header>
+        <div className="app-panel-body">
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+              gap: "var(--space-3)",
+            }}
           >
-            {theme.charAt(0).toUpperCase() + theme.slice(1)}
-          </button>
-        ))}
-      </div>
+            {SHELL_STYLE_OPTIONS.map((styleOption) => (
+              <button
+                key={styleOption.id}
+                type="button"
+                className="app-list-item"
+                onClick={() => updateSettings({ shellStyle: styleOption.id })}
+                style={{
+                  textAlign: "left",
+                  cursor: "pointer",
+                  borderColor:
+                    settings.shellStyle === styleOption.id
+                      ? "color-mix(in srgb, var(--text-primary) 42%, var(--glass-border))"
+                      : undefined,
+                }}
+              >
+                <div className="app-list-title">{styleOption.label}</div>
+                <div className="app-list-subtitle">{styleOption.description}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
     </div>
   );
 }
 
 export function SettingsView() {
   const [activeTab, setActiveTab] = useState<SettingsTab>("display");
+  const activeTabMeta = SETTINGS_TABS.find((tab) => tab.id === activeTab);
 
   return (
     <div className="view-container">
-      <div className="tabs">
-        {SETTINGS_TABS.map((tab) => (
-          <button
-            key={tab.id}
-            type="button"
-            className={`tab ${activeTab === tab.id ? "active" : ""}`}
-            onClick={() => setActiveTab(tab.id)}
-          >
-            {tab.label}
-          </button>
-        ))}
+      <div className="app-shell" data-app="settings">
+        <section className="app-hero">
+          <div className="app-hero-content">
+            <div>
+              <h2 className="app-hero-title">Settings Center</h2>
+              <p className="app-hero-subtitle">
+                Configuration grouped by resource with dedicated tabs for display,
+                gateway runtime, pairing controls, and debug tools.
+              </p>
+              <div className="app-hero-meta">
+                <span className="app-badge-dot" />
+                <span>{activeTabMeta?.hint}</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <div className="app-tabs" role="tablist" aria-label="Settings sections">
+          {SETTINGS_TABS.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              className={`app-tab ${activeTab === tab.id ? "active" : ""}`}
+              onClick={() => setActiveTab(tab.id)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {activeTab === "display" ? <DisplaySettings /> : null}
+        {activeTab === "gateway" ? <ConfigView embedded /> : null}
+        {activeTab === "pairing" ? <PairingView embedded /> : null}
+        {activeTab === "debug" ? <DebugView embedded /> : null}
       </div>
-      {activeTab === "display" && <DisplaySettings />}
-      {activeTab === "pairing" && <PairingView />}
-      {activeTab === "config" && <ConfigView />}
-      {activeTab === "debug" && <DebugView />}
     </div>
   );
 }
diff --git a/gateway/ui/src/react/views/WorkspaceView.tsx b/gateway/ui/src/react/views/WorkspaceView.tsx
index 42c0fdd..060bd9c 100644
--- a/gateway/ui/src/react/views/WorkspaceView.tsx
+++ b/gateway/ui/src/react/views/WorkspaceView.tsx
@@ -56,163 +56,152 @@ export function WorkspaceView() {
 
   return (
     <div className="view-container">
-      <div className="section-header">
-        <h2 className="section-title">Agent Workspace</h2>
-        <Button
-          size="sm"
-          variant="secondary"
-          loading={workspaceLoading}
-          onClick={() => {
-            void loadWorkspace(workspaceCurrentPath);
-          }}
-        >
-          Refresh
-        </Button>
-      </div>
-
-      <div className="workspace-layout">
-        <div className="card workspace-panel">
-          <div className="card-header">
-            <h3 className="card-title">Files</h3>
-          </div>
-          <div className="card-body workspace-panel-body">
-            {workspaceLoading && !workspaceFiles ? (
-              <div className="thinking-indicator">
-                <span className="spinner"></span>
-                <span>Loading...</span>
+      <div className="app-shell" data-app="workspace">
+        <section className="app-hero">
+          <div className="app-hero-content">
+            <div>
+              <h2 className="app-hero-title">Workspace Editor</h2>
+              <p className="app-hero-subtitle">
+                Browse and edit files in the active agent workspace directly from the
+                OS shell. Changes write back through gateway RPC.
+              </p>
+              <div className="app-hero-meta">
+                <span className="app-badge-dot" />
+                <span className="app-mono-pill mono">{normalizedPath}</span>
               </div>
-            ) : !workspaceFiles ? (
-              <p className="muted">Failed to load workspace</p>
-            ) : (
-              <>
-                <div
-                  style={{
-                    marginBottom: "var(--space-3)",
-                    paddingBottom: "var(--space-2)",
-                    borderBottom: "1px solid var(--border-muted)",
-                  }}
-                >
-                  <code
-                    className="mono"
-                    style={{
-                      fontSize: "var(--font-size-xs)",
-                      color: "var(--text-muted)",
-                    }}
-                  >
-                    {normalizedPath}
-                  </code>
-                </div>
-
-                {normalizedPath !== "/" ? (
-                  <Button
-                    variant="ghost"
-                    className="nav-item"
-                    onClick={() => {
-                      void loadWorkspace(getParentPath(normalizedPath));
-                    }}
-                    style={{
-                      padding: "var(--space-2)",
-                      margin: "0 calc(var(--space-4) * -1)",
-                      justifyContent: "flex-start",
-                      width: "calc(100% + var(--space-8))",
-                    }}
-                  >
-                    <span>📁</span>
-                    <span>..</span>
-                  </Button>
-                ) : null}
-
-                {workspaceFiles.directories.map((dir) => (
-                  <Button
-                    variant="ghost"
-                    key={`dir:${dir}`}
-                    className="nav-item"
-                    onClick={() => {
-                      void loadWorkspace(normalizeWorkspacePath(dir));
-                    }}
-                    style={{
-                      padding: "var(--space-2)",
-                      margin: "0 calc(var(--space-4) * -1)",
-                      justifyContent: "flex-start",
-                      width: "calc(100% + var(--space-8))",
-                    }}
-                  >
-                    <span>📁</span>
-                    <span>{getEntryLabel(dir)}</span>
-                  </Button>
-                ))}
+            </div>
+            <Button
+              size="sm"
+              variant="secondary"
+              loading={workspaceLoading}
+              onClick={() => {
+                void loadWorkspace(workspaceCurrentPath);
+              }}
+            >
+              Refresh
+            </Button>
+          </div>
+        </section>
 
-                {workspaceFiles.files.map((file) => {
-                  const isSelected = workspaceFileContent?.path === file;
-                  const icon = file.endsWith(".md") ? "📝" : "📄";
-                  return (
-                    <Button
-                      variant="ghost"
-                      key={`file:${file}`}
-                      className={`nav-item ${isSelected ? "active" : ""}`}
+        <section className="app-split">
+          <article className="app-panel">
+            <header className="app-panel-head">
+              <h3 className="app-panel-title">Explorer</h3>
+              <span className="app-panel-meta mono">{normalizedPath}</span>
+            </header>
+            <div className="app-panel-body app-scroll">
+              {workspaceLoading && !workspaceFiles ? (
+                <div className="app-empty" style={{ minHeight: 140 }}>
+                  <div>
+                    <span className="spinner" />
+                    <div style={{ marginTop: "var(--space-2)" }}>Loading workspace...</div>
+                  </div>
+                </div>
+              ) : !workspaceFiles ? (
+                <div className="app-empty" style={{ minHeight: 140 }}>
+                  <div>
+                    <div className="app-empty-icon">📂</div>
+                    <div>Workspace unavailable</div>
+                  </div>
+                </div>
+              ) : (
+                <div className="app-compact-list">
+                  {normalizedPath !== "/" ? (
+                    <button
+                      type="button"
+                      className="app-compact-item"
                       onClick={() => {
-                        void readWorkspaceFile(file);
+                        void loadWorkspace(getParentPath(normalizedPath));
                       }}
-                      style={{
-                        padding: "var(--space-2)",
-                        margin: "0 calc(var(--space-4) * -1)",
-                        justifyContent: "flex-start",
-                        width: "calc(100% + var(--space-8))",
+                    >
+                      <span>↩</span>
+                      <span>..</span>
+                    </button>
+                  ) : null}
+
+                  {workspaceFiles.directories.map((dir) => (
+                    <button
+                      type="button"
+                      className="app-compact-item"
+                      key={`dir:${dir}`}
+                      onClick={() => {
+                        void loadWorkspace(normalizeWorkspacePath(dir));
                       }}
                     >
-                      <span>{icon}</span>
-                      <span>{getEntryLabel(file)}</span>
-                    </Button>
-                  );
-                })}
+                      <span>📁</span>
+                      <span>{getEntryLabel(dir)}</span>
+                    </button>
+                  ))}
 
-                {workspaceFiles.files.length === 0 &&
-                workspaceFiles.directories.length === 0 ? (
-                  <p className="muted" style={{ fontSize: "var(--font-size-sm)" }}>
-                    Empty directory
-                  </p>
-                ) : null}
-              </>
-            )}
-          </div>
-        </div>
+                  {workspaceFiles.files.map((file) => {
+                    const isSelected = workspaceFileContent?.path === file;
+                    return (
+                      <button
+                        type="button"
+                        className={`app-compact-item ${isSelected ? "active" : ""}`}
+                        key={`file:${file}`}
+                        onClick={() => {
+                          void readWorkspaceFile(file);
+                        }}
+                      >
+                        <span>{file.endsWith(".md") ? "📝" : "📄"}</span>
+                        <span>{getEntryLabel(file)}</span>
+                      </button>
+                    );
+                  })}
 
-        <div className="card workspace-panel">
-          <div className="card-header">
-            <h3 className="card-title">
-              {workspaceFileContent ? workspaceFileContent.path : "No file selected"}
-            </h3>
-            {workspaceFileContent ? (
-              <Button
-                size="sm"
-                variant="primary"
-                onClick={() => {
-                  void writeWorkspaceFile(workspaceFileContent.path, editorContent);
-                }}
-              >
-                Save
-              </Button>
-            ) : null}
-          </div>
-          <div className="card-body workspace-panel-body" style={{ padding: 0 }}>
-            {workspaceFileContent ? (
-              <textarea
-                id="workspace-editor"
-                className="workspace-editor"
-                value={editorContent}
-                onChange={(event) => setEditorContent(event.target.value)}
-              />
-            ) : (
-              <div className="empty-state">
-                <div className="empty-state-icon">📝</div>
-                <h3 className="empty-state-title">Select a file</h3>
-                <p className="empty-state-description">
-                  Choose a file from the browser to view and edit.
-                </p>
-              </div>
-            )}
-          </div>
-        </div>
+                  {workspaceFiles.files.length === 0 && workspaceFiles.directories.length === 0 ? (
+                    <div className="app-empty" style={{ minHeight: 140 }}>
+                      <div>
+                        <div className="app-empty-icon">🫥</div>
+                        <div>Empty directory</div>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              )}
+            </div>
+          </article>
+
+          <article className="app-panel">
+            <header className="app-panel-head">
+              <h3 className="app-panel-title">
+                {workspaceFileContent ? getEntryLabel(workspaceFileContent.path) : "Editor"}
+              </h3>
+              {workspaceFileContent ? (
+                <Button
+                  size="sm"
+                  variant="primary"
+                  onClick={() => {
+                    void writeWorkspaceFile(workspaceFileContent.path, editorContent);
+                  }}
+                >
+                  Save
+                </Button>
+              ) : null}
+            </header>
+            <div className="app-panel-body" style={{ padding: 0 }}>
+              {workspaceFileContent ? (
+                <textarea
+                  id="workspace-editor"
+                  className="app-editor"
+                  value={editorContent}
+                  onChange={(event) => setEditorContent(event.target.value)}
+                />
+              ) : (
+                <div className="app-empty" style={{ minHeight: 320 }}>
+                  <div>
+                    <div className="app-empty-icon">📝</div>
+                    <div>Select a file to begin editing</div>
+                    <div className="text-secondary" style={{ marginTop: "var(--space-1)" }}>
+                      Changes are written through the workspace RPC interface.
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </article>
+        </section>
       </div>
     </div>
   );
diff --git a/gateway/ui/src/styles.css b/gateway/ui/src/styles.css
index dda6a30..f4303d5 100644
--- a/gateway/ui/src/styles.css
+++ b/gateway/ui/src/styles.css
@@ -3,4 +3,5 @@
 @import "./styles/layout.css";
 @import "./styles/components.css";
 @import "./styles/chat.css";
+@import "./styles/apps.css";
 @import "./styles/os-shell.css";
diff --git a/gateway/ui/src/styles/apps.css b/gateway/ui/src/styles/apps.css
new file mode 100644
index 0000000..52c456b
--- /dev/null
+++ b/gateway/ui/src/styles/apps.css
@@ -0,0 +1,427 @@
+/* ═══════════════════════════════════════════
+   OS Apps — Per-View Design Language
+   Shared app chrome + per-app accents.
+   ═══════════════════════════════════════════ */
+
+.view-container {
+  height: 100%;
+}
+
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.app-hero {
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--glass-border);
+  background: color-mix(in srgb, var(--glass-bg) 94%, transparent);
+}
+
+.app-hero-content {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-4);
+}
+
+.app-hero-title {
+  font-family: var(--font-family);
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.app-hero-subtitle {
+  margin-top: 4px;
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
+  max-width: 70ch;
+}
+
+.app-hero-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+}
+
+.app-kpis {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+.app-kpi {
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--glass-border);
+  background: rgba(255, 255, 255, 0.02);
+  padding: var(--space-3) var(--space-4);
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.app-kpi-label {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.app-kpi-value {
+  margin-top: var(--space-1);
+  font-size: 1.5rem;
+  line-height: 1.1;
+  font-weight: 700;
+}
+
+.app-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--space-4);
+  min-height: 0;
+}
+
+.app-col-12 { grid-column: span 12; }
+.app-col-8 { grid-column: span 8; }
+.app-col-7 { grid-column: span 7; }
+.app-col-6 { grid-column: span 6; }
+.app-col-5 { grid-column: span 5; }
+.app-col-4 { grid-column: span 4; }
+
+.app-panel {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: color-mix(in srgb, var(--glass-bg) 88%, transparent);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.app-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--glass-border);
+  background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
+}
+
+.app-panel-title {
+  font-family: var(--font-family);
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.app-panel-meta {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+}
+
+.app-panel-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--space-4);
+}
+
+.app-empty {
+  display: grid;
+  place-items: center;
+  text-align: center;
+  min-height: 220px;
+  padding: var(--space-6);
+  color: var(--text-secondary);
+}
+
+.app-empty-icon {
+  font-size: 2rem;
+  margin-bottom: var(--space-2);
+}
+
+.app-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.app-list-item {
+  border: 1px solid var(--glass-border);
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3) var(--space-4);
+}
+
+.app-list-item.active {
+  border-color: var(--glass-border-active);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.app-list-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.app-list-title {
+  font-weight: 600;
+  font-size: var(--font-size-base);
+  overflow-wrap: anywhere;
+}
+
+.app-list-subtitle {
+  margin-top: 2px;
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  overflow-wrap: anywhere;
+}
+
+.app-list-meta {
+  margin-top: var(--space-3);
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-2) var(--space-3);
+}
+
+.app-meta-row {
+  min-width: 0;
+}
+
+.app-meta-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+
+.app-meta-value {
+  margin-top: 2px;
+  font-size: var(--font-size-sm);
+  color: var(--text-main);
+  overflow-wrap: anywhere;
+}
+
+.app-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.app-toolbar {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.app-mono-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 4px 9px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--glass-border);
+  background: transparent;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  line-height: 1;
+}
+
+.app-badge-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 1px;
+  background: var(--text-secondary);
+}
+
+.app-code-block {
+  margin: 0;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--glass-border);
+  background: rgba(0, 0, 0, 0.28);
+  padding: var(--space-4);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  line-height: 1.55;
+  overflow: auto;
+  white-space: pre;
+}
+
+.app-split {
+  display: grid;
+  grid-template-columns: 300px minmax(0, 1fr);
+  gap: var(--space-4);
+  min-height: min(72dvh, 760px);
+}
+
+.app-compact-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.app-compact-item {
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+}
+
+.app-compact-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-main);
+}
+
+.app-compact-item.active {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-main);
+}
+
+.app-editor {
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0.22);
+  color: var(--text-main);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  line-height: 1.65;
+  padding: var(--space-4);
+}
+
+/* Settings wallpaper previews reuse os-wp-* classes.
+   Scope pseudo-elements to each tile so they cannot escape and intercept clicks. */
+.settings-wallpaper-swatch {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.settings-wallpaper-swatch::before,
+.settings-wallpaper-swatch::after {
+  pointer-events: none;
+}
+
+.app-scroll {
+  overflow: auto;
+}
+
+.app-tabs {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.app-tab {
+  border: 1px solid var(--glass-border);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  padding: 6px 12px;
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.app-tab:hover {
+  color: var(--text-main);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.app-tab.active {
+  color: var(--text-main);
+  border-color: var(--glass-border-active);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Keep Kumo select/input controls readable when embedded in richer shells. */
+.app-shell .form-group {
+  margin-bottom: 0;
+}
+
+[data-theme="light"] .app-hero {
+  background: color-mix(in srgb, var(--glass-bg) 92%, rgba(255, 255, 255, 0.8));
+}
+
+[data-theme="light"] .app-code-block,
+[data-theme="light"] .app-editor {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+[data-theme="light"] .app-list-item,
+[data-theme="light"] .app-kpi {
+  background: rgba(255, 255, 255, 0.88);
+}
+
+[data-theme="light"] .app-compact-item:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+@media (max-width: 1320px) {
+  .app-kpis {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .app-col-8,
+  .app-col-7,
+  .app-col-6,
+  .app-col-5,
+  .app-col-4 {
+    grid-column: span 12;
+  }
+
+  .app-split {
+    grid-template-columns: 1fr;
+    min-height: auto;
+  }
+}
+
+@media (max-width: 780px) {
+  .app-shell {
+    padding: 0;
+  }
+
+  .app-hero-content {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-3);
+    padding: var(--space-4);
+  }
+
+  .app-kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .app-panel-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .app-list-meta {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/gateway/ui/src/styles/base.css b/gateway/ui/src/styles/base.css
index d841302..eeeaf4a 100644
--- a/gateway/ui/src/styles/base.css
+++ b/gateway/ui/src/styles/base.css
@@ -1,4 +1,42 @@
 /* ── Design Tokens ── */
+/* TODO(sjames): Remove bundled Berkeley Mono (@font-face + /public/fonts files) once final font strategy is decided. */
+@font-face {
+  font-family: "GSV Berkeley Mono";
+  src:
+    url("/fonts/BerkeleyMono-Regular.otf") format("opentype"),
+    local("Berkeley Mono Regular"),
+    local("Berkeley Mono"),
+    local("BerkeleyMono-Regular"),
+    local("BerkeleyMono");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "GSV Berkeley Mono";
+  src:
+    url("/fonts/BerkeleyMono-Bold.otf") format("opentype"),
+    local("Berkeley Mono Bold"),
+    local("BerkeleyMono-Bold");
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "GSV Berkeley Mono";
+  src:
+    url("/fonts/BerkeleyMono-Oblique.otf") format("opentype"),
+    local("Berkeley Mono Oblique"),
+    local("BerkeleyMono-Oblique"),
+    local("Berkeley Mono Bold Oblique"),
+    local("BerkeleyMono-BoldOblique");
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+}
+
 :root {
   --bg-base: #0a0a0c;
   --glass-bg: rgba(255, 255, 255, 0.03);
@@ -16,8 +54,11 @@
   --accent-warning: #eab308;
   --accent-danger: #ef4444;
 
-  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-family: "GSV Berkeley Mono";
+  --font-mono: "GSV Berkeley Mono";
+  --font-sans: "GSV Berkeley Mono";
+  --default-font-family: "GSV Berkeley Mono";
+  --default-mono-font-family: "GSV Berkeley Mono";
 
   --font-size-xs: 0.6875rem;
   --font-size-sm: 0.8125rem;
@@ -33,10 +74,10 @@
   --space-6: 24px;
   --space-8: 32px;
 
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 16px;
-  --radius-xl: 20px;
+  --radius-sm: 0px;
+  --radius-md: 1px;
+  --radius-lg: 1px;
+  --radius-xl: 2px;
   --radius-full: 9999px;
 
   /* Aliases consumed by view templates */
@@ -89,7 +130,7 @@ html, body {
 }
 
 body {
-  font-family: var(--font-family);
+  font-family: var(--font-family) !important;
   font-size: var(--font-size-base);
   line-height: 1.5;
   color: var(--text-main);
diff --git a/gateway/ui/src/styles/chat.css b/gateway/ui/src/styles/chat.css
index 0b107ae..e5860c0 100644
--- a/gateway/ui/src/styles/chat.css
+++ b/gateway/ui/src/styles/chat.css
@@ -1,147 +1,263 @@
 /* ═══════════════════════════════════════════
    Chat — OS Window App
-   Designed to render inside .os-window-content.
-   No own chrome; the window titlebar is the header.
+   Structured, high-signal conversation surface.
    ═══════════════════════════════════════════ */
 
-/* ── Layout ── */
 .chat-shell {
-  display: flex;
-  flex-direction: column;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   height: 100%;
   min-height: 0;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 42%, transparent), transparent 28%),
+    color-mix(in srgb, var(--bg-primary) 96%, transparent);
+}
+
+.chat-shell::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
+  background-size: 24px 24px;
+  opacity: 0.26;
+}
+
+.chat-topbar,
+.chat-scroll,
+.chat-compose {
+  position: relative;
+  z-index: 1;
 }
 
-/* ── Session hint ── */
-.chat-session-hint {
+.chat-topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 4px 16px;
-  font-size: 10px;
-  color: var(--text-dim);
-  flex-shrink: 0;
+  gap: var(--space-3);
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--glass-border);
+  background: color-mix(in srgb, var(--bg-primary) 90%, transparent);
+}
+
+.chat-topbar-main,
+.chat-topbar-meta {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.chat-topbar-title {
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.chat-topbar-session {
+  font-size: var(--font-size-xs);
+  color: var(--text-main);
+  max-width: 32ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: 1px solid var(--glass-border);
+  background: rgba(255, 255, 255, 0.02);
+  padding: 2px 7px;
+  border-radius: var(--radius-sm);
 }
+
 .chat-session-count {
-  color: var(--text-dim);
+  font-size: 10px;
+  color: var(--text-muted);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
-/* ── Messages scroll area ── */
+.chat-conn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+}
+
+.chat-conn::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 1px;
+  background: currentColor;
+  opacity: 0.8;
+}
+
+.chat-conn.connected { color: var(--accent-success); }
+.chat-conn.connecting { color: var(--accent-warning); }
+.chat-conn.disconnected { color: var(--accent-danger); }
+
 .chat-scroll {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 16px 16px;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 10px;
 }
 
-/* ── Messages ── */
 .chat-msg {
   display: flex;
   flex-direction: column;
-  max-width: min(85%, 640px);
   min-width: 0;
-  gap: 2px;
+  max-width: min(88%, 760px);
+  gap: 4px;
+}
+
+.chat-msg-user {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.chat-msg-assistant {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.chat-msg-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+  line-height: 1;
 }
-.chat-msg-user { align-self: flex-end; align-items: flex-end; }
-.chat-msg-assistant { align-self: flex-start; align-items: flex-start; }
 
-/* ── Bubbles ── */
 .chat-bubble {
-  padding: 10px 14px;
-  border-radius: 18px;
-  line-height: 1.55;
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  line-height: 1.58;
   overflow-wrap: anywhere;
   font-size: var(--font-size-sm);
 }
 
-.chat-bubble-user {
-  background: var(--accent);
-  color: #fff;
-  border-bottom-right-radius: 6px;
+.chat-bubble-assistant {
+  background: color-mix(in srgb, var(--bg-secondary) 84%, transparent);
 }
 
-.chat-bubble-assistant {
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-bottom-left-radius: 6px;
+.chat-bubble-user {
+  background: color-mix(in srgb, var(--bg-secondary) 62%, rgba(255, 255, 255, 0.05));
+  border-color: var(--glass-border-active);
 }
 
-/* ── Message metadata ── */
 .chat-meta {
   font-size: 10px;
   color: var(--text-dim);
-  padding: 0 4px;
+  padding: 0 2px;
 }
 
-/* ── Markdown content ── */
 .chat-md {
   overflow-wrap: anywhere;
   word-break: break-word;
 }
+
 .chat-md:last-child { margin-bottom: 0; }
 .chat-md > *:first-child { margin-top: 0; }
 .chat-md > *:last-child { margin-bottom: 0; }
-.chat-md p { margin-bottom: 6px; }
+.chat-md p { margin-bottom: 7px; }
 .chat-md p:last-child { margin-bottom: 0; }
-.chat-md ul, .chat-md ol { margin: 6px 0; padding-left: 20px; }
+.chat-md ul,
+.chat-md ol {
+  margin: 7px 0;
+  padding-left: 19px;
+}
 .chat-md li { margin-bottom: 2px; }
+
 .chat-md pre {
   margin: 8px 0;
   border-radius: var(--radius-sm);
   overflow-x: auto;
-  padding: 10px;
-  font-size: 0.82em;
-  background: rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.04);
+  padding: 9px 10px;
+  font-size: 0.84em;
+  line-height: 1.5;
+  background: rgba(0, 0, 0, 0.24);
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
+
 .chat-md code {
   font-size: 0.9em;
 }
 
-/* User bubble markdown overrides */
-.chat-bubble-user .chat-md a { color: #fff; text-decoration: underline; }
-.chat-bubble-user .chat-md code { background: rgba(255, 255, 255, 0.2); color: #fff; }
-.chat-bubble-user .chat-md pre { background: rgba(255, 255, 255, 0.12); border-color: transparent; }
+.chat-bubble-user .chat-md a {
+  color: var(--text-main);
+  text-decoration: underline;
+}
+
+.chat-bubble-user .chat-md code {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.chat-bubble-user .chat-md pre {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+.chat-img-wrap {
+  margin: 4px 0;
+}
 
-/* ── Images ── */
-.chat-img-wrap { margin: 4px 0; }
 .chat-img {
-  max-width: min(360px, 100%);
-  border-radius: var(--radius-md);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  max-width: min(400px, 100%);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--glass-border);
   display: block;
 }
 
-/* ── Thinking ── */
 .chat-thinking {
-  margin: 4px 0;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  margin: 2px 0;
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
+  overflow: hidden;
 }
+
 .chat-thinking summary {
   cursor: pointer;
-  padding: 6px 10px;
+  padding: 6px 9px;
   font-size: 10px;
-  color: var(--text-dim);
+  color: var(--text-muted);
   font-weight: 500;
-  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  user-select: none;
 }
+
 .chat-thinking pre {
   margin: 0;
   padding: 10px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: 1px solid var(--glass-border);
   font-size: var(--font-size-xs);
   white-space: pre-wrap;
   word-break: break-word;
 }
 
-/* ── Tool calls / results (collapsed by default) ── */
 .chat-tool {
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  width: 100%;
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   overflow: hidden;
+  background: color-mix(in srgb, var(--bg-secondary) 76%, transparent);
+}
+
+.chat-tool-result {
+  border-color: var(--glass-border-active);
 }
 
 .chat-tool-header {
@@ -149,7 +265,7 @@
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 6px 10px;
+  padding: 7px 9px;
   border: none;
   background: transparent;
   color: var(--text-main);
@@ -157,31 +273,35 @@
   font-family: inherit;
   font-size: 11px;
   text-align: left;
-  transition: background 0.1s;
+  transition: background 0.14s ease;
 }
+
 .chat-tool-header:hover {
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(255, 255, 255, 0.05);
 }
 
 .chat-tool-name {
   font-family: var(--font-mono);
-  color: var(--accent);
+  color: var(--text-main);
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .chat-tool-badge {
   font-size: 9px;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  padding: 1px 6px;
-  border-radius: 9999px;
-  background: rgba(34, 197, 94, 0.15);
+  letter-spacing: 0.08em;
+  padding: 1px 5px;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(34, 197, 94, 0.3);
+  background: rgba(34, 197, 94, 0.12);
   color: var(--accent-success);
 }
+
 .chat-tool-badge.error {
-  background: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.34);
+  background: rgba(239, 68, 68, 0.12);
   color: var(--accent-danger);
 }
 
@@ -190,205 +310,252 @@
   height: 14px;
   margin-left: auto;
   color: var(--text-dim);
-  transition: transform 0.15s;
+  transition: transform 0.15s ease;
   flex-shrink: 0;
 }
+
 .chat-tool-chevron.open {
   transform: rotate(180deg);
 }
 
 .chat-tool-body {
-  padding: 6px 10px;
+  margin: 0;
+  padding: 8px 10px;
   font-size: var(--font-size-xs);
   font-family: var(--font-mono);
-  max-height: 200px;
+  max-height: 240px;
   overflow: auto;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: 1px solid var(--glass-border);
 }
 
 .chat-tool-result-body {
-  padding: 6px 10px;
+  padding: 8px 10px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  gap: 7px;
+  border-top: 1px solid var(--glass-border);
 }
 
 .chat-tool-json {
   margin: 0;
-  padding: 8px 10px;
+  padding: 9px 10px;
   background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: var(--radius-sm);
   font-size: var(--font-size-xs);
   line-height: 1.45;
   overflow-x: auto;
   white-space: pre;
 }
-.chat-tool-json code { background: none; padding: 0; font-size: inherit; }
+
+.chat-tool-json code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
 
 .chat-tool-json-details {
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   overflow: hidden;
 }
+
 .chat-tool-json-details summary {
   cursor: pointer;
-  padding: 6px 10px;
+  padding: 6px 9px;
   font-size: 10px;
-  color: var(--text-dim);
+  color: var(--text-muted);
   user-select: none;
   list-style: none;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
-.chat-tool-json-details summary::-webkit-details-marker { display: none; }
+
+.chat-tool-json-details summary::-webkit-details-marker {
+  display: none;
+}
+
 .chat-tool-json-details .chat-tool-json {
-  border: none;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 0;
+  border: none;
+  border-top: 1px solid var(--glass-border);
+}
+
+.chat-tool-json-toggle-open {
+  display: none;
+}
+
+.chat-tool-json-details[open] .chat-tool-json-toggle-open {
+  display: inline;
+}
+
+.chat-tool-json-details[open] .chat-tool-json-toggle-closed {
+  display: none;
 }
-.chat-tool-json-toggle-open { display: none; }
-.chat-tool-json-details[open] .chat-tool-json-toggle-open { display: inline; }
-.chat-tool-json-details[open] .chat-tool-json-toggle-closed { display: none; }
 
-/* ── Thinking/loading dots ── */
 .chat-status {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: var(--font-size-xs);
-  color: var(--text-dim);
-  padding: 4px 0;
+  color: var(--text-muted);
+  border: 1px solid var(--glass-border);
+  background: color-mix(in srgb, var(--bg-secondary) 74%, transparent);
+  border-radius: var(--radius-sm);
+  padding: 7px 10px;
+}
+
+.chat-dots {
+  display: flex;
+  gap: 3px;
 }
-.chat-dots { display: flex; gap: 3px; }
+
 .chat-dots span {
-  width: 5px; height: 5px;
+  width: 5px;
+  height: 5px;
   background: var(--text-muted);
-  border-radius: 50%;
+  border-radius: 1px;
   animation: chat-dot-pulse 1.4s infinite;
 }
+
 .chat-dots span:nth-child(2) { animation-delay: 0.2s; }
 .chat-dots span:nth-child(3) { animation-delay: 0.4s; }
+
 @keyframes chat-dot-pulse {
-  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
+  0%, 80%, 100% { transform: scale(0.74); opacity: 0.4; }
   40% { transform: scale(1); opacity: 1; }
 }
 
-/* ── Empty state ── */
 .chat-empty {
   flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: grid;
+  place-items: center;
+  text-align: center;
   color: var(--text-dim);
   font-size: var(--font-size-sm);
+  border: 1px dashed var(--glass-border);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.015);
 }
 
-/* ── Compose bar ── */
 .chat-compose {
-  display: flex;
-  align-items: flex-end;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 8px;
+  align-items: end;
   padding: 10px 14px 14px;
-  flex-shrink: 0;
+  border-top: 1px solid var(--glass-border);
+  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
 }
 
 .chat-compose-input {
-  flex: 1;
-  padding: 10px 14px;
+  width: 100%;
+  padding: 10px 11px;
   font-family: inherit;
   font-size: var(--font-size-sm);
   color: var(--text-main);
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 22px;
+  background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
   resize: none;
   min-height: 42px;
   max-height: 160px;
-  transition: border-color 0.15s, background 0.15s;
+  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
 }
+
 .chat-compose-input:focus {
   outline: none;
-  border-color: var(--accent);
-  background: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
+  border-color: var(--glass-border-active);
+  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 18%, transparent);
+}
+
+.chat-compose-input::placeholder {
+  color: var(--text-dim);
 }
-.chat-compose-input::placeholder { color: var(--text-dim); }
 
 .chat-compose-send {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  border: none;
-  background: var(--accent);
-  color: #fff;
+  width: 42px;
+  height: 42px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--glass-border-active);
+  background: color-mix(in srgb, var(--text-main) 92%, transparent);
+  color: var(--bg-primary);
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  transition: opacity 0.15s, transform 0.1s;
+  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
   padding: 0;
 }
+
 .chat-compose-send svg {
-  width: 16px;
-  height: 16px;
-}
-.chat-compose-send:hover { opacity: 0.9; }
-.chat-compose-send:active { transform: scale(0.92); }
-.chat-compose-send:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
+  width: 15px;
+  height: 15px;
 }
 
-/* ── Light Theme ── */
-[data-theme="light"] .chat-bubble-assistant {
-  background: rgba(0, 0, 0, 0.04);
-  border-color: rgba(0, 0, 0, 0.06);
+.chat-compose-send:hover {
+  transform: translateY(-1px);
+  filter: brightness(0.96);
 }
-[data-theme="light"] .chat-bubble-user .chat-md code {
-  background: rgba(255, 255, 255, 0.25);
-}
-[data-theme="light"] .chat-bubble-user .chat-md pre {
-  background: rgba(255, 255, 255, 0.18);
-  border-color: transparent;
-}
-[data-theme="light"] .chat-md pre {
-  background: rgba(0, 0, 0, 0.04);
-  border-color: rgba(0, 0, 0, 0.06);
-}
-[data-theme="light"] .chat-thinking {
-  border-color: rgba(0, 0, 0, 0.06);
+
+.chat-compose-send:active {
+  transform: translateY(0);
 }
-[data-theme="light"] .chat-thinking pre {
-  border-color: rgba(0, 0, 0, 0.06);
+
+.chat-compose-send:disabled {
+  opacity: 0.36;
+  cursor: not-allowed;
+  transform: none;
 }
-[data-theme="light"] .chat-tool {
-  border-color: rgba(0, 0, 0, 0.08);
+
+[data-theme="light"] .chat-shell::before {
+  background-image:
+    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.028) 1px, transparent 1px);
 }
-[data-theme="light"] .chat-tool-header:hover {
+
+[data-theme="light"] .chat-bubble-assistant {
   background: rgba(0, 0, 0, 0.03);
+  border-color: rgba(0, 0, 0, 0.08);
 }
-[data-theme="light"] .chat-tool-body {
-  border-color: rgba(0, 0, 0, 0.06);
-}
-[data-theme="light"] .chat-tool-result-body {
-  border-color: rgba(0, 0, 0, 0.06);
+
+[data-theme="light"] .chat-bubble-user {
+  background: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.15);
 }
+
+[data-theme="light"] .chat-md pre,
 [data-theme="light"] .chat-tool-json {
-  background: rgba(0, 0, 0, 0.03);
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.08);
 }
+
+[data-theme="light"] .chat-status,
+[data-theme="light"] .chat-tool,
+[data-theme="light"] .chat-thinking,
 [data-theme="light"] .chat-tool-json-details {
-  border-color: rgba(0, 0, 0, 0.06);
+  border-color: rgba(0, 0, 0, 0.1);
 }
-[data-theme="light"] .chat-tool-json-details .chat-tool-json {
-  border-color: rgba(0, 0, 0, 0.06);
+
+[data-theme="light"] .chat-tool-header:hover {
+  background: rgba(0, 0, 0, 0.04);
 }
+
 [data-theme="light"] .chat-compose-input {
-  background: rgba(0, 0, 0, 0.04);
-  border-color: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.03);
+  border-color: rgba(0, 0, 0, 0.12);
 }
+
 [data-theme="light"] .chat-compose-input:focus {
-  background: rgba(0, 0, 0, 0.06);
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.22);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
 }
-[data-theme="light"] .chat-img {
-  border-color: rgba(0, 0, 0, 0.08);
+
+[data-theme="light"] .chat-compose-send {
+  background: #111827;
+  color: #f9fafb;
+  border-color: rgba(0, 0, 0, 0.22);
 }
diff --git a/gateway/ui/src/styles/components.css b/gateway/ui/src/styles/components.css
index 4e7ed39..977ac3f 100644
--- a/gateway/ui/src/styles/components.css
+++ b/gateway/ui/src/styles/components.css
@@ -128,11 +128,20 @@
 .form-hint { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-1); }
 
 /* Kumo overrides */
-.ui-button-fix { border-radius: var(--radius-md) !important; }
-.ui-badge-fix { border-radius: var(--radius-full) !important; }
-.ui-input-fix { border-radius: var(--radius-md) !important; }
-textarea.ui-input-fix { border-radius: var(--radius-md) !important; }
-.ui-sensitive-fix { border-radius: var(--radius-md) !important; }
+.ui-button-fix { border-radius: var(--radius-sm) !important; }
+.ui-badge-fix { border-radius: var(--radius-sm) !important; }
+.ui-input-fix { border-radius: var(--radius-sm) !important; }
+textarea.ui-input-fix { border-radius: var(--radius-sm) !important; }
+.ui-sensitive-fix { border-radius: var(--radius-sm) !important; }
+
+/* Flatten Kumo defaults inside app windows (many components ship rounded-lg/full). */
+.os-window-content :where(button, input, textarea, select, [role="button"], [role="tab"], [role="menuitem"]) {
+  border-radius: var(--radius-sm);
+}
+
+.os-window-content :where([class*="rounded-"], [class~="rounded"]) {
+  border-radius: var(--radius-sm) !important;
+}
 
 /* ── Pills / Badges ── */
 .pill {
@@ -209,7 +218,7 @@ textarea.ui-input-fix { border-radius: var(--radius-md) !important; }
   border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 }
 .tab:hover { color: var(--text-main); background: rgba(255,255,255,0.04); }
-.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.tab.active { color: var(--text-main); border-bottom-color: var(--glass-border-active); }
 
 /* ── Logs ── */
 .logs-output {
diff --git a/gateway/ui/src/styles/os-shell.css b/gateway/ui/src/styles/os-shell.css
index 78e1d07..0100bf8 100644
--- a/gateway/ui/src/styles/os-shell.css
+++ b/gateway/ui/src/styles/os-shell.css
@@ -1,1146 +1,1018 @@
 /* ═══════════════════════════════════════════
-   GSV OS — Desktop Shell
-   macOS-style floating window desktop.
+   GSV OS Shell — Multi-Style System
+   Variants: hard brutalist, neo futurist.
    ═══════════════════════════════════════════ */
 
-/* ── Root Shell ── */
 .os-shell {
-  --os-focus-accent: var(--accent-primary);
+  --os-focus-accent: var(--text-primary);
+  --os-shell-border: var(--glass-border);
+  --os-shell-glass: color-mix(in srgb, var(--bg-primary) 94%, transparent);
+  --os-titlebar-h: 34px;
+  --os-radius-sm: 2px;
+  --os-radius-md: 4px;
+  --os-radius-lg: 6px;
+  --os-blur: 0px;
+
   position: fixed;
   inset: 0;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
+  color: var(--text-primary);
   font-family: var(--font-family);
-  color: var(--text-main);
-  -webkit-font-smoothing: antialiased;
+  background: var(--bg-primary);
 }
 
-/* ── Wallpaper Background ── */
+/* ── Wallpaper ── */
 .os-wallpaper {
   position: absolute;
   inset: 0;
   z-index: 0;
   overflow: hidden;
+  pointer-events: auto;
 }
 
-/* Mesh gradient: smooth multi-color gradient, slow shift */
 .os-wp-mesh {
-  background: #0a0a10;
+  background:
+    linear-gradient(140deg, #070b10 0%, #0b121a 34%, #101723 62%, #0b1118 100%);
 }
-.os-wp-mesh::before,
-.os-wp-mesh::after {
+
+.os-wp-mesh::before {
   content: "";
   position: absolute;
-  border-radius: 50%;
-  filter: blur(90px);
-  opacity: 0.75;
-  animation: os-mesh-drift 30s infinite ease-in-out alternate;
-}
-.os-wp-mesh::before {
-  width: 55vw; height: 55vw;
-  background: radial-gradient(circle, hsl(240 70% 38%) 0%, transparent 70%);
-  top: -15vw; left: -5vw;
+  inset: -10%;
+  background:
+    radial-gradient(40% 45% at 12% 14%, rgba(25, 140, 255, 0.24), transparent 72%),
+    radial-gradient(45% 38% at 88% 78%, rgba(38, 229, 174, 0.2), transparent 72%),
+    radial-gradient(38% 30% at 52% 44%, rgba(108, 94, 255, 0.16), transparent 74%);
+  filter: blur(28px);
+  animation: os-bg-shift 24s ease-in-out infinite alternate;
+  pointer-events: none;
 }
+
 .os-wp-mesh::after {
-  width: 50vw; height: 50vw;
-  background: radial-gradient(circle, hsl(280 60% 32%) 0%, transparent 70%);
-  bottom: -10vw; right: -5vw;
-  animation-delay: -12s;
-}
-@keyframes os-mesh-drift {
-  0%   { transform: translate(0, 0) scale(1); }
-  50%  { transform: translate(3vw, 4vh) scale(1.05); }
-  100% { transform: translate(-2vw, -3vh) scale(0.97); }
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 30px 30px;
+  opacity: 0.18;
+  pointer-events: none;
 }
 
-/* Aurora: horizontal flowing color bands */
 .os-wp-aurora {
-  background: #050510;
+  background:
+    linear-gradient(160deg, #05070a 0%, #08111a 38%, #0a1016 100%);
 }
+
 .os-wp-aurora::before {
   content: "";
   position: absolute;
-  top: 10%; left: -20%;
-  width: 140%; height: 50%;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(34, 197, 94, 0.35) 20%,
-    rgba(6, 182, 212, 0.4) 40%,
-    rgba(79, 70, 229, 0.35) 60%,
-    rgba(34, 197, 94, 0.3) 80%,
-    transparent 100%
-  );
-  filter: blur(50px);
-  animation: os-aurora-wave 20s infinite ease-in-out alternate;
-}
-.os-wp-aurora::after {
-  content: "";
-  position: absolute;
-  top: 30%; left: -10%;
-  width: 120%; height: 30%;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(6, 182, 212, 0.25) 30%,
-    rgba(168, 85, 247, 0.2) 60%,
-    transparent 100%
-  );
-  filter: blur(60px);
-  animation: os-aurora-wave 25s infinite ease-in-out alternate-reverse;
-}
-@keyframes os-aurora-wave {
-  0%   { transform: translateX(-5vw) scaleY(1); }
-  50%  { transform: translateX(5vw) scaleY(1.3); }
-  100% { transform: translateX(-3vw) scaleY(0.9); }
-}
-
-/* Dark grain: near-black with subtle noise texture */
+  inset: -14% -18%;
+  background:
+    conic-gradient(from 210deg at 20% 30%, rgba(34, 197, 94, 0.2), transparent 35%),
+    conic-gradient(from 50deg at 78% 58%, rgba(14, 165, 233, 0.24), transparent 36%),
+    conic-gradient(from 330deg at 54% 62%, rgba(99, 102, 241, 0.18), transparent 34%);
+  filter: blur(36px);
+  animation: os-bg-orbit 30s linear infinite;
+  pointer-events: none;
+}
+
 .os-wp-dark-grain {
-  background: #0a0a0c;
+  background: #070709;
 }
+
 .os-wp-dark-grain::before {
   content: "";
   position: absolute;
   inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
-  background-repeat: repeat;
-  background-size: 256px 256px;
-  opacity: 1;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
+  background-size: 220px 220px;
+  opacity: 0.56;
+  pointer-events: none;
 }
+
 .os-wp-dark-grain::after {
   content: "";
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 70%);
+  background: radial-gradient(72% 58% at 50% 42%, rgba(255, 255, 255, 0.05), transparent 72%);
+  pointer-events: none;
 }
 
-/* Grid: faint dot matrix */
 .os-wp-grid {
-  background: #08080c;
+  background: linear-gradient(180deg, #06090f 0%, #06080d 100%);
 }
+
 .os-wp-grid::before {
   content: "";
   position: absolute;
   inset: 0;
-  background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
-  background-size: 32px 32px;
-  mask-image: radial-gradient(ellipse at 50% 50%, black 40%, transparent 80%);
-  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 40%, transparent 80%);
+  background-image:
+    linear-gradient(rgba(85, 130, 180, 0.14) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(85, 130, 180, 0.14) 1px, transparent 1px);
+  background-size: 36px 36px;
+  opacity: 0.38;
+  pointer-events: none;
 }
+
 .os-wp-grid::after {
   content: "";
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse at 50% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 60%);
+  background:
+    radial-gradient(35% 35% at 18% 28%, rgba(22, 163, 74, 0.14), transparent 80%),
+    radial-gradient(38% 36% at 82% 70%, rgba(37, 99, 235, 0.2), transparent 78%);
+  pointer-events: none;
+}
+
+@keyframes os-bg-shift {
+  0% { transform: translate3d(-2%, -1%, 0) scale(1.02); }
+  100% { transform: translate3d(2%, 1.5%, 0) scale(1); }
+}
+
+@keyframes os-bg-orbit {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
-/* ── Right-click Context Menu ── */
+/* ── Context Menu ── */
 .os-ctx-menu {
   position: fixed;
-  z-index: 300;
-  min-width: 200px;
-  background: rgba(20, 20, 26, 0.88);
-  backdrop-filter: blur(30px);
-  -webkit-backdrop-filter: blur(30px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: var(--radius-md);
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
+  z-index: 320;
+  min-width: 220px;
   padding: 6px;
-  animation: os-ctx-in 0.15s ease-out;
-}
-@keyframes os-ctx-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to   { opacity: 1; transform: scale(1); }
+  border-radius: var(--os-radius-md);
+  border: 1px solid var(--os-shell-border);
+  background: var(--os-shell-glass);
+  backdrop-filter: blur(var(--os-blur));
+  -webkit-backdrop-filter: blur(var(--os-blur));
+  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
 }
 
 .os-ctx-menu-label {
+  padding: 6px 10px;
   font-size: 10px;
-  font-weight: 600;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  letter-spacing: 0.8px;
-  color: var(--text-dim);
-  padding: 6px 10px 4px;
+  color: var(--text-muted);
 }
 
 .os-ctx-menu-item {
+  width: 100%;
   display: flex;
   align-items: center;
   gap: 10px;
-  width: 100%;
   padding: 7px 10px;
-  border-radius: var(--radius-sm);
   border: none;
+  border-radius: var(--os-radius-sm);
   background: transparent;
   color: var(--text-main);
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 13px;
-  font-weight: 500;
   text-align: left;
-  transition: background 0.1s;
-}
-.os-ctx-menu-item:hover {
-  background: rgba(255, 255, 255, 0.06);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  cursor: pointer;
 }
+
+.os-ctx-menu-item:hover,
 .os-ctx-menu-item.active {
-  color: var(--accent);
-}
-.os-ctx-menu-item.active::after {
-  content: "";
-  margin-left: auto;
-  width: 6px; height: 6px;
-  border-radius: 50%;
-  background: var(--accent);
+  background: color-mix(in srgb, var(--text-secondary) 14%, transparent);
 }
 
-/* Tiny preview swatch in the context menu */
 .os-ctx-menu-preview {
-  width: 24px; height: 24px;
-  border-radius: 6px;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--os-radius-sm);
+  border: 1px solid var(--glass-border);
   flex-shrink: 0;
-  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* ── Status Bar (top, 32px, minimal) ── */
+/* ── Status Bar ── */
 .os-statusbar {
   position: relative;
-  z-index: 50;
-  height: 32px;
+  z-index: 40;
+  height: 34px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 16px;
-  background: rgba(0, 0, 0, 0.25);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  font-size: 13px;
-  font-weight: 500;
-  color: #fff;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--os-shell-border);
+  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
+  backdrop-filter: blur(var(--os-blur));
+  -webkit-backdrop-filter: blur(var(--os-blur));
 }
 
 .os-statusbar-left,
 .os-statusbar-right {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
 }
 
 .os-statusbar-brand {
+  font-family: var(--font-family);
+  font-size: 12px;
   font-weight: 700;
-  font-size: 13px;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
 .os-statusbar-dot {
-  width: 7px; height: 7px;
-  border-radius: 50%;
+  width: 7px;
+  height: 7px;
+  border-radius: 1px;
   flex-shrink: 0;
 }
-.os-statusbar-dot.connected    { background: var(--accent-success); box-shadow: 0 0 6px var(--accent-success); }
-.os-statusbar-dot.connecting   { background: var(--accent-warning); animation: os-pulse-dot 1s infinite; }
-.os-statusbar-dot.disconnected { background: var(--accent-danger); }
 
-@keyframes os-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+.os-statusbar-dot.connected {
+  background: var(--accent-success);
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
+}
+
+.os-statusbar-dot.connecting {
+  background: var(--accent-warning);
+  animation: os-status-pulse 1s ease-in-out infinite;
+}
+
+.os-statusbar-dot.disconnected {
+  background: var(--accent-danger);
+}
 
 .os-statusbar-label {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-weight: 400;
+  font-size: 10px;
+  color: var(--text-secondary);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .os-statusbar-btn {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  padding: 2px 8px;
-  border-radius: 4px;
-  display: flex;
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
   align-items: center;
-  gap: 4px;
-  transition: all 0.15s;
+  justify-content: center;
+  border: 1px solid var(--os-shell-border);
+  border-radius: var(--os-radius-sm);
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
 }
+
 .os-statusbar-btn:hover {
-  color: #fff;
-  background: rgba(255, 255, 255, 0.08);
-}
-.os-statusbar-btn svg {
-  width: 14px; height: 14px;
+  color: var(--text-main);
+  background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
 }
 
 .os-statusbar-clock {
-  font-size: 12px;
-  font-weight: 500;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.05em;
   color: var(--text-secondary);
-  font-variant-numeric: tabular-nums;
 }
 
-/* ── Desktop (full-screen canvas for windows) ── */
+@keyframes os-status-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+
+/* ── Desktop ── */
 .os-desktop {
-  position: absolute;
-  top: 32px; left: 0; right: 0; bottom: 80px;
-  z-index: 1;
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  z-index: 2;
   overflow: hidden;
 }
 
-/* ── Snap Preview ── */
+.os-desktop::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(110% 100% at 50% -12%, rgba(255, 255, 255, 0.06), transparent 62%),
+    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.18));
+}
+
 .os-snap-preview {
   position: absolute;
-  z-index: 3;
-  background: rgba(255, 255, 255, 0.04);
-  border: 2px dashed rgba(255, 255, 255, 0.12);
-  border-radius: var(--radius-xl);
   pointer-events: none;
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  border: 1px dashed color-mix(in srgb, var(--text-secondary) 70%, transparent);
+  background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
+  z-index: 200;
 }
 
-/* ── Windows ── */
+/* ── Window ── */
 .os-window {
   position: absolute;
-  top: 0; left: 0;
-  will-change: transform;
   display: flex;
   flex-direction: column;
-  background: rgba(18, 18, 24, 0.78);
-  backdrop-filter: blur(30px) saturate(150%);
-  -webkit-backdrop-filter: blur(30px) saturate(150%);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 20px;
-  box-shadow:
-    0 25px 60px rgba(0, 0, 0, 0.5),
-    0 8px 20px rgba(0, 0, 0, 0.35),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  min-width: 240px;
+  min-height: 160px;
+  border: 1px solid var(--os-shell-border);
+  border-radius: var(--os-radius-lg);
+  background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
+  backdrop-filter: blur(var(--os-blur));
+  -webkit-backdrop-filter: blur(var(--os-blur));
+  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
   overflow: hidden;
-  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.os-window::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  background: transparent;
 }
 
 .os-window.focused {
-  border-color: rgba(255, 255, 255, 0.12);
-  box-shadow:
-    0 30px 70px rgba(0, 0, 0, 0.55),
-    0 10px 24px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 0 0 1px rgba(255, 255, 255, 0.04);
+  border-color: color-mix(in srgb, var(--text-primary) 24%, var(--os-shell-border));
+  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.44);
+}
+
+.os-window.focused::before {
+  background: color-mix(in srgb, var(--text-primary) 30%, transparent);
 }
 
 .os-window.maximized {
-  border-radius: 0;
-  border: none;
-  inset: 0;
-  width: 100% !important;
-  height: 100% !important;
-  transform: none !important;
+  border-radius: 1px;
 }
 
-/* ── Window Title Bar ── */
 .os-window-titlebar {
-  height: 48px;
-  flex-shrink: 0;
+  position: relative;
+  height: var(--os-titlebar-h);
   display: flex;
   align-items: center;
-  padding: 0 16px;
-  background: rgba(255, 255, 255, 0.02);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  gap: 10px;
+  padding: 0 10px;
+  border-bottom: 1px solid var(--os-shell-border);
+  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
   cursor: grab;
-  position: relative;
   user-select: none;
 }
-.os-window-titlebar:active { cursor: grabbing; }
 
-/* macOS traffic-light window controls */
+.os-window-titlebar:active {
+  cursor: grabbing;
+}
+
 .os-window-actions {
-  display: flex;
-  gap: 8px;
-  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-direction: row-reverse;
   flex-shrink: 0;
+  order: 2;
 }
 
 .os-window-action {
-  width: 14px; height: 14px;
-  border-radius: 50%;
-  border: none;
+  position: relative;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--os-radius-sm);
+  border: 1px solid var(--os-shell-border);
+  background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
+  color: color-mix(in srgb, var(--text-secondary) 90%, transparent);
   cursor: pointer;
   padding: 0;
-  transition: filter 0.15s, transform 0.1s;
+  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
 }
-.os-window-action:hover { filter: brightness(1.2); transform: scale(1.15); }
-.os-window-action:active { transform: scale(0.9); }
-.os-window-action.close    { background: #ff5f56; }
-.os-window-action.minimize { background: #ffbd2e; }
-.os-window-action.maximize { background: #27c93f; }
 
-/* Dim traffic lights on unfocused windows */
-.os-window:not(.focused) .os-window-action {
-  background: rgba(255, 255, 255, 0.12) !important;
+.os-window-action:hover {
+  border-color: color-mix(in srgb, var(--text-primary) 34%, transparent);
+  background: color-mix(in srgb, var(--text-secondary) 20%, transparent);
+  color: var(--text-main);
 }
-.os-window:not(.focused):hover .os-window-action.close    { background: #ff5f56 !important; }
-.os-window:not(.focused):hover .os-window-action.minimize { background: #ffbd2e !important; }
-.os-window:not(.focused):hover .os-window-action.maximize { background: #27c93f !important; }
 
-/* Centered title */
-.os-window-title {
+.os-window-action:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--text-primary) 55%, transparent);
+  outline-offset: 1px;
+}
+
+.os-window-action.close::before,
+.os-window-action.close::after,
+.os-window-action.minimize::before,
+.os-window-action.maximize::before {
+  content: "";
   position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+  left: 4px;
+  right: 4px;
   pointer-events: none;
-  max-width: 50%;
-}
-.os-window-title-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-muted);
-  letter-spacing: 0.3px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.os-window.focused .os-window-title-label {
-  color: var(--text-secondary);
 }
 
-/* ── Window Content ── */
-.os-window-content {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  background: rgba(0, 0, 0, 0.2);
-  padding: var(--space-4);
-}
-.os-window-content .view-container { max-width: none; }
-.os-window-content .chat-shell { min-height: 100%; height: 100%; }
-/* Chat lives edge-to-edge inside the window — remove content padding */
-.os-window-content:has(.chat-shell) { padding: 0; overflow: hidden; }
-.os-window-content .workspace-layout { min-height: 100%; }
-
-/* ── Global view chrome overrides ──
-   Strip redundant card/section chrome inside windows.
-   The window itself provides the glass surface — nested glass is visual noise. */
-
-/* Section headers: shrink titles so they don't compete with the window titlebar.
-   First section-header (top of view) is a toolbar row; subsequent ones are sub-dividers. */
-.os-window-content .section-header {
-  margin-bottom: var(--space-3);
-}
-.os-window-content .section-header h2,
-.os-window-content .section-header .section-title,
-.os-window-content .section-header > span:first-child {
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.os-window-action.close::before,
+.os-window-action.close::after {
+  top: 8px;
+  height: 1.5px;
+  background: currentColor;
 }
 
-/* Cards: strip glass bg / border / backdrop-filter so content sits directly on the window surface */
-.os-window-content .card {
-  background: transparent;
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-  border: 1px solid rgba(255, 255, 255, 0.04);
-  border-radius: var(--radius-lg);
+.os-window-action.close::before {
+  transform: rotate(45deg);
 }
-.os-window-content .card-header {
-  background: transparent;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  padding: var(--space-2) var(--space-4);
+
+.os-window-action.close::after {
+  transform: rotate(-45deg);
 }
-.os-window-content .card-footer {
-  background: transparent;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+
+.os-window-action.minimize::before {
+  top: 8px;
+  height: 1.5px;
+  background: currentColor;
 }
 
-/* Cards grid: tighter gap */
-.os-window-content .cards-grid {
-  gap: var(--space-3);
+.os-window-action.maximize::before {
+  top: 4px;
+  bottom: 4px;
+  border: 1.5px solid currentColor;
+  border-radius: 1px;
 }
 
-/* Logs output: let it blend */
-.os-window-content .logs-output {
-  background: rgba(0, 0, 0, 0.15);
-  border-color: rgba(255, 255, 255, 0.06);
+.os-window-title {
+  min-width: 0;
+  flex: 1;
+  order: 1;
 }
 
-/* Workspace editor: subtler bg */
-.os-window-content .workspace-editor {
-  background: rgba(0, 0, 0, 0.15);
+.os-window-title-label {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--text-secondary) 90%, transparent);
 }
 
-/* Tabs inside windows: subtler border */
-.os-window-content .tabs {
-  border-bottom-color: rgba(255, 255, 255, 0.06);
+.os-window-content {
+  --radius-sm: 0px;
+  --radius-md: 1px;
+  --radius-lg: 1px;
+  --radius-xl: 2px;
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
 }
 
-/* Tables inside windows: subtler row borders */
-.os-window-content .table th,
-.os-window-content .table td {
-  border-bottom-color: rgba(255, 255, 255, 0.06);
+.os-window-content.iframe {
+  overflow: hidden;
 }
 
-/* Iframe windows (webview / media surfaces) */
 .os-window-iframe-wrap {
-  position: relative;
   width: 100%;
   height: 100%;
+  position: relative;
+  background: #0a0d12;
 }
+
 .os-window-iframe {
-  position: relative;
-  z-index: 1;
-  display: block;
   width: 100%;
   height: 100%;
   border: none;
-  background: transparent;
+  background: #fff;
 }
+
 .os-window-iframe-fallback {
   position: absolute;
   inset: 0;
-  z-index: 0;
-  display: flex;
-  flex-direction: column;
+  display: none;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  background: rgba(15, 15, 20, 0.95);
-  color: rgba(255, 255, 255, 0.5);
-  font-size: 13px;
-}
-.os-window-iframe-fallback span {
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.7);
+  flex-direction: column;
+  gap: 10px;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
 }
+
 .os-window-iframe-fallback a {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 6px 14px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 12px;
-  text-decoration: none;
-  transition: background 0.2s, color 0.2s;
+  color: var(--text-main);
 }
-.os-window-iframe-fallback a:hover {
-  background: rgba(255, 255, 255, 0.14);
-  color: #fff;
+
+/* ── Resize Handles ── */
+.os-resize-handle {
+  position: absolute;
+  z-index: 10;
 }
-.os-window-content:has(.os-window-iframe-wrap) {
-  padding: 0;
-  overflow: hidden;
+
+.os-resize-handle.n,
+.os-resize-handle.s {
+  left: 8px;
+  right: 8px;
+  height: 8px;
 }
-/* Disable iframe pointer events during drag/resize to prevent capture */
-body.os-dragging .os-window-iframe {
-  pointer-events: none;
+
+.os-resize-handle.n { top: -4px; cursor: ns-resize; }
+.os-resize-handle.s { bottom: -4px; cursor: ns-resize; }
+
+.os-resize-handle.e,
+.os-resize-handle.w {
+  top: 8px;
+  bottom: 8px;
+  width: 8px;
 }
 
-/* ── Resize Handles ── */
-.os-resize-handle { position: absolute; z-index: 5; }
-.os-resize-handle.n  { top: 0; left: 8px; right: 8px; height: 6px; cursor: n-resize; }
-.os-resize-handle.s  { bottom: 0; left: 8px; right: 8px; height: 6px; cursor: s-resize; }
-.os-resize-handle.e  { top: 8px; right: 0; bottom: 8px; width: 6px; cursor: e-resize; }
-.os-resize-handle.w  { top: 8px; left: 0; bottom: 8px; width: 6px; cursor: w-resize; }
-.os-resize-handle.ne { top: 0; right: 0; width: 12px; height: 12px; cursor: ne-resize; }
-.os-resize-handle.nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nw-resize; }
-.os-resize-handle.se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: se-resize; }
-.os-resize-handle.sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: sw-resize; }
-
-/* ── Desktop Empty State ── */
+.os-resize-handle.e { right: -4px; cursor: ew-resize; }
+.os-resize-handle.w { left: -4px; cursor: ew-resize; }
+
+.os-resize-handle.ne,
+.os-resize-handle.nw,
+.os-resize-handle.se,
+.os-resize-handle.sw {
+  width: 14px;
+  height: 14px;
+}
+
+.os-resize-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
+.os-resize-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
+.os-resize-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
+.os-resize-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
+
+/* ── Empty Desktop ── */
 .os-desktop-empty {
   position: absolute;
   inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  text-align: center;
   pointer-events: none;
-  z-index: 0;
+  color: color-mix(in srgb, var(--text-secondary) 88%, transparent);
 }
+
 .os-desktop-empty p {
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--text-secondary);
+  font-family: var(--font-family);
+  font-size: 1rem;
+  font-weight: 600;
 }
+
 .os-desktop-empty span {
-  font-size: 13px;
-  color: var(--text-muted);
+  margin-top: 6px;
+  display: block;
+  font-size: var(--font-size-sm);
 }
+
 .os-desktop-empty kbd {
-  display: inline-block;
   font-family: var(--font-mono);
-  font-size: 12px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 5px;
+  border: 1px solid var(--os-shell-border);
+  border-radius: var(--os-radius-sm);
   padding: 1px 6px;
-  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.05);
 }
 
-/* ── Dock (centered floating pill, icon-only) ── */
+/* ── Dock / Taskbar ── */
 .os-dock-container {
   position: absolute;
+  left: 12px;
+  right: 12px;
   bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 50;
+  display: flex;
+  justify-content: center;
+  z-index: 120;
+  pointer-events: none;
 }
 
 .os-dock {
-  background: rgba(20, 20, 25, 0.6);
-  backdrop-filter: blur(40px) saturate(200%);
-  -webkit-backdrop-filter: blur(40px) saturate(200%);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 22px;
-  box-shadow:
-    0 20px 40px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  pointer-events: auto;
   display: flex;
   align-items: center;
-  padding: 6px 10px;
-  gap: 4px;
+  justify-content: flex-start;
+  width: min(1100px, 100%);
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--os-shell-border);
+  border-radius: var(--os-radius-md);
+  background: var(--os-shell-glass);
+  backdrop-filter: blur(var(--os-blur));
+  -webkit-backdrop-filter: blur(var(--os-blur));
+  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
+  overflow-x: auto;
+  scrollbar-width: thin;
 }
 
 .os-dock-item {
-  width: 48px; height: 48px;
-  border-radius: 14px;
-  display: flex;
+  width: 38px;
+  height: 38px;
+  border: 1px solid var(--os-shell-border);
+  border-radius: var(--os-radius-sm);
+  background: color-mix(in srgb, var(--bg-secondary) 62%, transparent);
+  color: var(--text-secondary);
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   position: relative;
-  color: rgba(255, 255, 255, 0.7);
-  background: transparent;
-  border: none;
-  padding: 0;
+  flex-shrink: 0;
+  transition: transform 120ms ease, border-color 120ms ease, color 120ms ease, background 120ms ease;
 }
+
 .os-dock-item:hover {
-  color: #fff;
-  background: rgba(255, 255, 255, 0.1);
-  transform: translateY(-6px) scale(1.08);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
-}
-.os-dock-item:active {
-  transform: translateY(0) scale(0.95);
+  transform: translateY(-2px);
+  color: var(--text-main);
+  border-color: color-mix(in srgb, var(--text-primary) 40%, transparent);
+  background: color-mix(in srgb, var(--text-secondary) 16%, transparent);
 }
-.os-dock-item.open {
-  color: #fff;
+
+.os-dock-item.open::after {
+  content: "";
+  position: absolute;
+  left: 7px;
+  right: 7px;
+  bottom: 2px;
+  height: 2px;
+  border-radius: 1px;
+  background: color-mix(in srgb, var(--text-primary) 70%, transparent);
 }
+
 .os-dock-item.focused {
-  color: #fff;
+  color: var(--text-main);
+  border-color: color-mix(in srgb, var(--text-primary) 58%, transparent);
+  background: color-mix(in srgb, var(--text-secondary) 25%, transparent);
 }
 
 .os-dock-item-icon {
-  width: 28px; height: 28px;
-  display: flex;
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-.os-dock-item-icon svg {
-  width: 24px; height: 24px;
-}
 
-/* Running indicator dot */
-.os-dock-item::after {
-  content: '';
-  position: absolute;
-  bottom: 2px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 4px; height: 4px;
-  border-radius: 50%;
-  background: transparent;
-  transition: background 0.3s, box-shadow 0.3s;
-}
-.os-dock-item.open::after {
-  background: rgba(255, 255, 255, 0.4);
-}
-.os-dock-item.focused::after {
-  background: #fff;
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
+.os-dock-item-icon svg {
+  width: 100%;
+  height: 100%;
 }
 
-/* ── Dock separator (divides static app icons from dynamic surface windows) ── */
 .os-dock-separator {
   width: 1px;
-  height: 32px;
-  background: rgba(255, 255, 255, 0.15);
-  margin: 0 4px;
-  flex-shrink: 0;
+  height: 24px;
+  background: var(--os-shell-border);
+  margin: 0 2px;
 }
 
-/* ── Launcher / Command Palette Overlay ── */
+/* ── Launcher ── */
 .os-launcher-overlay {
   position: fixed;
   inset: 0;
-  z-index: 200;
-  background: rgba(0, 0, 0, 0.45);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 18vh;
+  z-index: 300;
+  display: grid;
+  place-items: start center;
+  padding-top: min(12vh, 96px);
+  background: rgba(2, 3, 7, 0.6);
+  backdrop-filter: blur(calc(var(--os-blur) * 0.5));
+  -webkit-backdrop-filter: blur(calc(var(--os-blur) * 0.5));
 }
 
 .os-launcher {
-  width: 560px;
-  max-width: 90vw;
-  max-height: 60vh;
-  display: flex;
-  flex-direction: column;
-  background: rgba(20, 20, 26, 0.8);
-  backdrop-filter: blur(30px);
-  -webkit-backdrop-filter: blur(30px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 20px;
-  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  width: min(840px, calc(100vw - 24px));
+  border: 1px solid var(--os-shell-border);
+  border-radius: var(--os-radius-md);
   overflow: hidden;
-  animation: os-launcher-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@keyframes os-launcher-in {
-  from { opacity: 0; transform: scale(0.96) translateY(-10px); }
-  to   { opacity: 1; transform: scale(1) translateY(0); }
+  background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
+  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.44);
 }
 
 .os-launcher-search {
-  position: relative;
-  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 14px;
+  border-bottom: 1px solid var(--os-shell-border);
 }
+
 .os-launcher-search svg {
-  position: absolute;
-  left: 18px; top: 50%;
-  transform: translateY(-50%);
-  width: 18px; height: 18px;
-  color: var(--text-muted);
-  pointer-events: none;
+  width: 15px;
+  height: 15px;
+  color: var(--text-secondary);
+  flex-shrink: 0;
 }
+
 .os-launcher-search input {
   width: 100%;
-  background: transparent;
   border: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  padding: 16px 20px 16px 48px;
-  color: #fff;
-  font-size: 15px;
-  font-family: inherit;
   outline: none;
+  background: transparent;
+  color: var(--text-main);
+  font: inherit;
+  font-size: var(--font-size-base);
 }
+
 .os-launcher-search input::placeholder {
-  color: var(--text-dim);
+  color: var(--text-muted);
 }
 
 .os-launcher-results {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 6px;
+  max-height: min(60vh, 480px);
+  overflow: auto;
+  padding: 4px;
 }
 
 .os-launcher-item {
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  padding: 10px 14px;
-  border-radius: var(--radius-sm);
+  gap: 10px;
+  padding: 10px 11px;
   border: none;
+  border-radius: var(--os-radius-sm);
   background: transparent;
-  cursor: pointer;
-  font-family: inherit;
-  text-align: left;
-  transition: background 0.1s;
   color: var(--text-main);
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
 }
+
 .os-launcher-item:hover,
 .os-launcher-item.active {
-  background: rgba(255, 255, 255, 0.06);
-}
-.os-launcher-item.active {
-  outline: 1px solid rgba(255, 255, 255, 0.08);
+  background: color-mix(in srgb, var(--text-secondary) 15%, transparent);
 }
 
 .os-launcher-item-label {
-  font-size: 13px;
+  font-size: var(--font-size-sm);
   font-weight: 500;
 }
+
 .os-launcher-item-hint {
-  font-size: 11px;
-  color: var(--text-dim);
-  white-space: nowrap;
+  font-size: 10px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
+
 .os-launcher-empty {
-  padding: 24px 16px;
-  font-size: 13px;
-  color: var(--text-dim);
-  text-align: center;
+  padding: 16px 12px;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
 }
 
-/* ── Drag helper ── */
+/* ── Dragging ── */
 body.os-dragging,
 body.os-dragging * {
   user-select: none !important;
-  cursor: grabbing !important;
 }
 
-/* ── Settings Display Tab ── */
-.settings-display {
-  padding: 8px 0;
-}
-.settings-section-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-main);
-  margin: 0 0 4px;
-}
-.settings-section-desc {
-  font-size: 12px;
-  color: var(--text-dim);
-  margin: 0 0 12px;
-}
-.settings-wallpaper-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: 10px;
-}
-.settings-wallpaper-card {
-  all: unset;
-  cursor: pointer;
-  border-radius: 10px;
-  border: 2px solid transparent;
-  overflow: hidden;
-  background: var(--glass-bg, rgba(255, 255, 255, 0.04));
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-.settings-wallpaper-card:hover {
-  border-color: rgba(255, 255, 255, 0.15);
-}
-.settings-wallpaper-card.active {
-  border-color: var(--accent-primary, hsl(191 95% 58%));
-  box-shadow: 0 0 0 1px var(--accent-primary, hsl(191 95% 58%));
-}
-.settings-wallpaper-preview {
-  width: 100%;
-  height: 80px;
-  position: relative;
-  overflow: hidden;
-}
-.settings-wallpaper-info {
-  padding: 8px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.settings-wallpaper-name {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-main);
+/* ── Hard Brutalist Variant ── */
+.os-shell[data-shell-style="brutalist"],
+[data-shell-style="brutalist"] .os-shell {
+  --os-radius-sm: 1px;
+  --os-radius-md: 2px;
+  --os-radius-lg: 2px;
+  --os-blur: 0px;
 }
-.settings-wallpaper-desc {
-  font-size: 11px;
-  color: var(--text-dim);
-}
-.settings-theme-row {
-  display: flex;
-  gap: 8px;
-}
-.settings-theme-btn {
-  all: unset;
-  cursor: pointer;
-  padding: 6px 16px;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  background: var(--glass-bg, rgba(255, 255, 255, 0.04));
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  transition: background 0.15s, border-color 0.15s, color 0.15s;
-}
-.settings-theme-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--text-main);
-}
-.settings-theme-btn.active {
-  background: var(--accent-primary, hsl(191 95% 58%));
-  color: #000;
-  border-color: var(--accent-primary, hsl(191 95% 58%));
-}
-
-/* ═══════════════════════════════════════════
-   Light Theme Overrides
-   Glassmorphism with darker overlays on light backgrounds.
-   Applied when <html data-theme="light">.
-   ═══════════════════════════════════════════ */
 
-/* ── Status Bar ── */
-[data-theme="light"] .os-statusbar {
-  background: rgba(255, 255, 255, 0.55);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  color: #1a1a1e;
-}
-[data-theme="light"] .os-statusbar-label {
-  color: #52525b;
-}
-[data-theme="light"] .os-statusbar-btn {
-  color: #52525b;
-}
-[data-theme="light"] .os-statusbar-btn:hover {
-  color: #1a1a1e;
-  background: rgba(0, 0, 0, 0.06);
-}
-[data-theme="light"] .os-statusbar-clock {
-  color: #3f3f46;
+.os-shell[data-shell-style="brutalist"] .os-statusbar,
+[data-shell-style="brutalist"] .os-shell .os-statusbar,
+.os-shell[data-shell-style="brutalist"] .os-window-titlebar,
+[data-shell-style="brutalist"] .os-shell .os-window-titlebar,
+.os-shell[data-shell-style="brutalist"] .os-dock,
+[data-shell-style="brutalist"] .os-shell .os-dock,
+.os-shell[data-shell-style="brutalist"] .os-launcher,
+[data-shell-style="brutalist"] .os-shell .os-launcher,
+.os-shell[data-shell-style="brutalist"] .os-ctx-menu,
+[data-shell-style="brutalist"] .os-shell .os-ctx-menu {
+  box-shadow: none;
 }
 
-/* ── Windows ── */
-[data-theme="light"] .os-window {
-  background: rgba(255, 255, 255, 0.62);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow:
-    0 25px 60px rgba(0, 0, 0, 0.12),
-    0 8px 20px rgba(0, 0, 0, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.7);
-}
-[data-theme="light"] .os-window.focused {
-  border-color: rgba(0, 0, 0, 0.15);
-  box-shadow:
-    0 30px 70px rgba(0, 0, 0, 0.15),
-    0 10px 24px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.8),
-    0 0 0 1px rgba(0, 0, 0, 0.05);
+.os-shell[data-shell-style="brutalist"] .os-window,
+[data-shell-style="brutalist"] .os-shell .os-window {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 8px 8px 0 rgba(0, 0, 0, 0.25);
 }
 
-/* ── Window Title Bar ── */
-[data-theme="light"] .os-window-titlebar {
-  background: rgba(0, 0, 0, 0.02);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-}
-[data-theme="light"] .os-window-title-label {
-  color: #6b6b76;
-}
-[data-theme="light"] .os-window.focused .os-window-title-label {
-  color: #3f3f46;
+.os-shell[data-shell-style="brutalist"] .os-window.focused,
+[data-shell-style="brutalist"] .os-shell .os-window.focused {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 10px 10px 0 rgba(0, 0, 0, 0.35);
 }
 
-/* Unfocused traffic lights: use dark-tinted dots */
-[data-theme="light"] .os-window:not(.focused) .os-window-action {
-  background: rgba(0, 0, 0, 0.1) !important;
+.os-shell[data-shell-style="brutalist"] .os-window-action,
+[data-shell-style="brutalist"] .os-shell .os-window-action,
+.os-shell[data-shell-style="brutalist"] .os-dock-item,
+[data-shell-style="brutalist"] .os-shell .os-dock-item {
+  border-width: 1.5px;
 }
-[data-theme="light"] .os-window:not(.focused):hover .os-window-action.close    { background: #ff5f56 !important; }
-[data-theme="light"] .os-window:not(.focused):hover .os-window-action.minimize { background: #ffbd2e !important; }
-[data-theme="light"] .os-window:not(.focused):hover .os-window-action.maximize { background: #27c93f !important; }
 
-/* ── Window Content ── */
-[data-theme="light"] .os-window-content {
-  background: rgba(255, 255, 255, 0.25);
+.os-shell[data-shell-style="brutalist"] .os-window-title-label,
+[data-shell-style="brutalist"] .os-shell .os-window-title-label,
+.os-shell[data-shell-style="brutalist"] .os-statusbar-brand,
+[data-shell-style="brutalist"] .os-shell .os-statusbar-brand {
+  letter-spacing: 0.12em;
 }
 
-/* ── Global view chrome overrides (light) ── */
-[data-theme="light"] .os-window-content .card {
-  border-color: rgba(0, 0, 0, 0.06);
-}
-[data-theme="light"] .os-window-content .card-header {
-  border-bottom-color: rgba(0, 0, 0, 0.06);
-}
-[data-theme="light"] .os-window-content .card-footer {
-  border-top-color: rgba(0, 0, 0, 0.06);
-}
-[data-theme="light"] .os-window-content .logs-output {
-  background: rgba(0, 0, 0, 0.04);
-  border-color: rgba(0, 0, 0, 0.06);
-}
-[data-theme="light"] .os-window-content .workspace-editor {
-  background: rgba(0, 0, 0, 0.03);
-}
-[data-theme="light"] .os-window-content .tabs {
-  border-bottom-color: rgba(0, 0, 0, 0.08);
-}
-[data-theme="light"] .os-window-content .table th,
-[data-theme="light"] .os-window-content .table td {
-  border-bottom-color: rgba(0, 0, 0, 0.06);
+/* ── Neo Futurist Variant ── */
+.os-shell[data-shell-style="futurist"],
+[data-shell-style="futurist"] .os-shell {
+  --os-radius-sm: 4px;
+  --os-radius-md: 8px;
+  --os-radius-lg: 10px;
+  --os-blur: 10px;
 }
 
-/* ── Iframe fallback ── */
-[data-theme="light"] .os-window-iframe-fallback {
-  background: rgba(245, 245, 248, 0.95);
-  color: rgba(0, 0, 0, 0.5);
-}
-[data-theme="light"] .os-window-iframe-fallback span {
-  color: rgba(0, 0, 0, 0.7);
-}
-[data-theme="light"] .os-window-iframe-fallback a {
-  background: rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(0, 0, 0, 0.7);
-}
-[data-theme="light"] .os-window-iframe-fallback a:hover {
-  background: rgba(0, 0, 0, 0.1);
-  color: #1a1a1e;
+.os-shell[data-shell-style="futurist"] .os-statusbar,
+[data-shell-style="futurist"] .os-shell .os-statusbar {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%),
+    color-mix(in srgb, var(--bg-primary) 90%, transparent);
 }
 
-/* ── Snap Preview ── */
-[data-theme="light"] .os-snap-preview {
-  background: rgba(0, 0, 0, 0.04);
-  border: 2px dashed rgba(0, 0, 0, 0.15);
+.os-shell[data-shell-style="futurist"] .os-window,
+[data-shell-style="futurist"] .os-shell .os-window {
+  border-color: color-mix(in srgb, var(--text-primary) 18%, var(--os-shell-border));
+  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4);
 }
 
-/* ── Dock ── */
-[data-theme="light"] .os-dock {
-  background: rgba(255, 255, 255, 0.55);
-  border: 1px solid rgba(0, 0, 0, 0.1);
+.os-shell[data-shell-style="futurist"] .os-window.focused,
+[data-shell-style="futurist"] .os-shell .os-window.focused {
+  border-color: color-mix(in srgb, var(--text-primary) 28%, var(--os-shell-border));
   box-shadow:
-    0 20px 40px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.7);
-}
-[data-theme="light"] .os-dock-item {
-  color: rgba(0, 0, 0, 0.5);
-}
-[data-theme="light"] .os-dock-item:hover {
-  color: #1a1a1e;
-  background: rgba(0, 0, 0, 0.06);
-}
-[data-theme="light"] .os-dock-item.open {
-  color: #1a1a1e;
-}
-[data-theme="light"] .os-dock-item.focused {
-  color: #1a1a1e;
-}
-[data-theme="light"] .os-dock-item.open::after {
-  background: rgba(0, 0, 0, 0.3);
-}
-[data-theme="light"] .os-dock-item.focused::after {
-  background: #1a1a1e;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
-}
-[data-theme="light"] .os-dock-separator {
-  background: rgba(0, 0, 0, 0.12);
+    0 26px 56px rgba(0, 0, 0, 0.46),
+    0 0 0 1px color-mix(in srgb, var(--text-primary) 16%, transparent);
 }
 
-/* ── Desktop Empty State ── */
-[data-theme="light"] .os-desktop-empty kbd {
-  background: rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.1);
+.os-shell[data-shell-style="futurist"] .os-window.focused::before,
+[data-shell-style="futurist"] .os-shell .os-window.focused::before {
+  background: color-mix(in srgb, var(--text-primary) 40%, transparent);
 }
 
-/* ── Context Menu ── */
-[data-theme="light"] .os-ctx-menu {
-  background: rgba(255, 255, 255, 0.82);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
-}
-[data-theme="light"] .os-ctx-menu-item:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-[data-theme="light"] .os-ctx-menu-preview {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+.os-shell[data-shell-style="futurist"] .os-dock,
+[data-shell-style="futurist"] .os-shell .os-dock,
+.os-shell[data-shell-style="futurist"] .os-launcher,
+[data-shell-style="futurist"] .os-shell .os-launcher,
+.os-shell[data-shell-style="futurist"] .os-ctx-menu,
+[data-shell-style="futurist"] .os-shell .os-ctx-menu {
+  border-color: color-mix(in srgb, var(--text-primary) 14%, var(--os-shell-border));
 }
 
-/* ── Launcher / Command Palette ── */
-[data-theme="light"] .os-launcher-overlay {
-  background: rgba(255, 255, 255, 0.3);
-}
-[data-theme="light"] .os-launcher {
-  background: rgba(255, 255, 255, 0.78);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-[data-theme="light"] .os-launcher-search input {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  color: #1a1a1e;
-}
-[data-theme="light"] .os-launcher-item:hover,
-[data-theme="light"] .os-launcher-item.active {
-  background: rgba(0, 0, 0, 0.05);
-}
-[data-theme="light"] .os-launcher-item.active {
-  outline: 1px solid rgba(0, 0, 0, 0.08);
+.os-shell[data-shell-style="futurist"] .os-dock-item.focused,
+[data-shell-style="futurist"] .os-shell .os-dock-item.focused {
+  border-color: color-mix(in srgb, var(--text-primary) 34%, transparent);
+  background: color-mix(in srgb, var(--text-primary) 16%, transparent);
 }
 
-/* ── Settings Theme Buttons ── */
-[data-theme="light"] .settings-theme-btn {
-  background: rgba(0, 0, 0, 0.04);
-  border: 1px solid rgba(0, 0, 0, 0.1);
+.os-shell[data-shell-style="futurist"] .os-dock-item.open::after,
+[data-shell-style="futurist"] .os-shell .os-dock-item.open::after {
+  background: color-mix(in srgb, var(--text-primary) 64%, transparent);
 }
-[data-theme="light"] .settings-theme-btn:hover {
-  background: rgba(0, 0, 0, 0.07);
-}
-[data-theme="light"] .settings-theme-btn.active {
-  background: var(--accent-primary, hsl(191 95% 58%));
-  color: #fff;
-  border-color: var(--accent-primary, hsl(191 95% 58%));
+
+/* ── Light Mode ── */
+[data-theme="light"] .os-shell {
+  --os-shell-glass: color-mix(in srgb, #ffffff 95%, transparent);
 }
 
-/* ── Light-theme Wallpaper overrides ── */
 [data-theme="light"] .os-wp-mesh {
-  background: #dce0ea;
+  background: linear-gradient(145deg, #f3f6fa 0%, #edf3f8 40%, #e6eef6 100%);
 }
+
 [data-theme="light"] .os-wp-mesh::before {
-  background: radial-gradient(circle, hsl(240 60% 68%) 0%, transparent 70%);
+  background:
+    radial-gradient(42% 46% at 14% 18%, rgba(40, 120, 230, 0.18), transparent 74%),
+    radial-gradient(46% 40% at 84% 76%, rgba(34, 197, 94, 0.14), transparent 74%),
+    radial-gradient(36% 30% at 54% 44%, rgba(99, 102, 241, 0.12), transparent 76%);
 }
+
 [data-theme="light"] .os-wp-mesh::after {
-  background: radial-gradient(circle, hsl(280 50% 70%) 0%, transparent 70%);
+  background-image:
+    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
+  opacity: 0.24;
 }
+
 [data-theme="light"] .os-wp-aurora {
-  background: #dce2ee;
+  background: linear-gradient(160deg, #f2f6fb 0%, #e9f1f9 42%, #e5edf5 100%);
 }
+
 [data-theme="light"] .os-wp-aurora::before {
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(34, 197, 94, 0.35) 20%,
-    rgba(6, 182, 212, 0.4) 40%,
-    rgba(79, 70, 229, 0.35) 60%,
-    rgba(34, 197, 94, 0.3) 80%,
-    transparent 100%
-  );
-}
-[data-theme="light"] .os-wp-aurora::after {
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(6, 182, 212, 0.25) 30%,
-    rgba(168, 85, 247, 0.2) 60%,
-    transparent 100%
-  );
+  background:
+    conic-gradient(from 210deg at 20% 30%, rgba(14, 165, 233, 0.16), transparent 35%),
+    conic-gradient(from 50deg at 78% 58%, rgba(59, 130, 246, 0.16), transparent 36%),
+    conic-gradient(from 330deg at 54% 62%, rgba(34, 197, 94, 0.14), transparent 34%);
 }
+
 [data-theme="light"] .os-wp-dark-grain {
-  background: #e2e2e6;
+  background: #eceff4;
+}
+
+[data-theme="light"] .os-wp-dark-grain::before {
+  opacity: 0.2;
 }
+
 [data-theme="light"] .os-wp-dark-grain::after {
-  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.06) 0%, transparent 70%);
+  background: radial-gradient(72% 58% at 50% 42%, rgba(255, 255, 255, 0.36), transparent 72%);
 }
+
 [data-theme="light"] .os-wp-grid {
-  background: #dce0ea;
+  background: linear-gradient(180deg, #f0f5fb 0%, #eaf1f8 100%);
 }
+
 [data-theme="light"] .os-wp-grid::before {
-  background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px);
+  background-image:
+    linear-gradient(rgba(70, 100, 130, 0.14) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(70, 100, 130, 0.14) 1px, transparent 1px);
+  opacity: 0.35;
 }
+
 [data-theme="light"] .os-wp-grid::after {
-  background: radial-gradient(ellipse at 50% 40%, rgba(59, 130, 246, 0.12) 0%, transparent 60%);
+  background:
+    radial-gradient(35% 35% at 18% 28%, rgba(34, 197, 94, 0.1), transparent 80%),
+    radial-gradient(38% 36% at 82% 70%, rgba(59, 130, 246, 0.14), transparent 78%);
 }
 
-/* ── Settings Wallpaper Cards ── */
-[data-theme="light"] .settings-wallpaper-card {
-  background: rgba(0, 0, 0, 0.03);
+[data-theme="light"] .os-window {
+  background: color-mix(in srgb, #ffffff 96%, transparent);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
+}
+
+[data-theme="light"] .os-window-content {
+  background: rgba(255, 255, 255, 0.92);
+}
+
+[data-theme="light"] .os-window-titlebar {
+  background: rgba(0, 0, 0, 0.02);
 }
-[data-theme="light"] .settings-wallpaper-card:hover {
+
+[data-theme="light"] .os-window-action {
   border-color: rgba(0, 0, 0, 0.2);
+  background: rgba(255, 255, 255, 0.88);
+}
+
+[data-theme="light"] .os-desktop::after {
+  background:
+    radial-gradient(110% 100% at 50% -12%, rgba(255, 255, 255, 0.35), transparent 62%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(240, 244, 250, 0.2));
 }
 
-/* ── Reduced motion ── */
-@media (prefers-reduced-motion: reduce) {
-  .os-orb,
-  .os-window,
-  .os-launcher,
+[data-theme="light"] .os-dock-item {
+  background: rgba(255, 255, 255, 0.78);
+}
+
+[data-theme="light"] .os-dock-item:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+/* ── Responsive ── */
+@media (max-width: 900px) {
+  .os-statusbar {
+    height: 34px;
+    padding: 0 10px;
+  }
+
+  .os-statusbar-label {
+    display: none;
+  }
+
+  .os-statusbar-clock {
+    font-size: 10px;
+  }
+
+  .os-dock-container {
+    left: 8px;
+    right: 8px;
+    bottom: 8px;
+  }
+
+  .os-dock {
+    width: 100%;
+    justify-content: flex-start;
+    border-radius: var(--os-radius-md);
+  }
+
+  .os-launcher-overlay {
+    padding-top: 52px;
+  }
+
+  .os-launcher {
+    width: calc(100vw - 14px);
+  }
+}
+
+@media (max-width: 640px) {
   .os-dock-item {
-    animation: none !important;
-    transition-duration: 0s !important;
+    width: 34px;
+    height: 34px;
+  }
+
+  .os-dock-item-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .os-window {
+    border-radius: var(--os-radius-md);
+  }
+
+  .os-window-titlebar {
+    height: 34px;
+  }
+
+  .os-window-title-label {
+    font-size: 11px;
   }
 }
diff --git a/gateway/ui/src/ui/app.ts b/gateway/ui/src/ui/app.ts
index 59fcc05..9e6d3d6 100644
--- a/gateway/ui/src/ui/app.ts
+++ b/gateway/ui/src/ui/app.ts
@@ -6,7 +6,14 @@ import { LitElement, html, nothing, type PropertyValues } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { GatewayClient, type ConnectionState } from "./gateway-client";
-import { loadSettings, saveSettings, applyTheme, getGatewayUrl, type UiSettings } from "./storage";
+import {
+  loadSettings,
+  saveSettings,
+  applyTheme,
+  applyShellStyle,
+  getGatewayUrl,
+  type UiSettings,
+} from "./storage";
 import { navigateTo, getCurrentTab } from "./navigation";
 import type {
   Tab,
@@ -41,6 +48,40 @@ const DEFAULT_CHANNEL_ACCOUNT_ID = "default";
 const CHANNEL_AUTO_REFRESH_MS = 10_000;
 const DEFAULT_CHANNELS = ["whatsapp", "discord"];
 
+function normalizeContentBlocks(content: unknown[]): ContentBlock[] {
+  return content.map((block) => {
+    if (!block || typeof block !== "object") {
+      return block as ContentBlock;
+    }
+
+    const candidate = block as Record<string, unknown>;
+    if (candidate.type === "thinking") {
+      return {
+        ...candidate,
+        type: "thinking",
+        text: typeof candidate.text === "string"
+          ? candidate.text
+          : typeof candidate.thinking === "string"
+            ? candidate.thinking
+            : "",
+      } as ContentBlock;
+    }
+
+    return candidate as ContentBlock;
+  });
+}
+
+function normalizeMessageContent(message: Message): Message {
+  if (!Array.isArray(message.content)) {
+    return message;
+  }
+
+  return {
+    ...message,
+    content: normalizeContentBlocks(message.content),
+  } as Message;
+}
+
 @customElement("gsv-app")
 export class GsvApp extends LitElement {
   // Disable shadow DOM to use global styles
@@ -132,6 +173,7 @@ export class GsvApp extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     applyTheme(this.settings.theme);
+    applyShellStyle(this.settings.shellStyle);
 
     // Clock for status bar
     this.updateClock();
@@ -487,7 +529,9 @@ export class GsvApp extends LitElement {
       const res = await this.client.sessionPreview(this.settings.sessionKey, 100);
       if (res.ok && res.payload) {
         const data = res.payload as { messages: Message[] };
-        this.chatMessages = data.messages || [];
+        this.chatMessages = (data.messages || []).map((message) =>
+          normalizeMessageContent(message),
+        );
       }
     } catch (e) {
       console.error("Failed to load chat:", e);
@@ -531,7 +575,7 @@ export class GsvApp extends LitElement {
 
     return {
       role: "assistant",
-      content: candidate.content as ContentBlock[],
+      content: normalizeContentBlocks(candidate.content),
       timestamp:
         typeof candidate.timestamp === "number"
           ? candidate.timestamp
@@ -1134,6 +1178,9 @@ export class GsvApp extends LitElement {
     if (updates.theme) {
       applyTheme(updates.theme);
     }
+    if (updates.shellStyle) {
+      applyShellStyle(updates.shellStyle);
+    }
     
     if (updates.gatewayUrl || updates.token !== undefined) {
       this.startConnection();
@@ -1417,6 +1464,16 @@ function mergeAssistantMessages(
   };
 }
 
+function getThinkingText(block: { text?: unknown; thinking?: unknown }): string {
+  if (typeof block.text === "string") {
+    return block.text;
+  }
+  if (typeof block.thinking === "string") {
+    return block.thinking;
+  }
+  return "";
+}
+
 function isContentSuperset(
   maybeSuperset: ContentBlock[],
   maybeSubset: ContentBlock[],
@@ -1447,7 +1504,7 @@ function blockContains(
   }
 
   if (maybeSuperset.type === "thinking" && maybeSubset.type === "thinking") {
-    return maybeSuperset.text.startsWith(maybeSubset.text);
+    return getThinkingText(maybeSuperset).startsWith(getThinkingText(maybeSubset));
   }
 
   if (maybeSuperset.type === "toolCall" && maybeSubset.type === "toolCall") {
@@ -1495,12 +1552,17 @@ function mergeContentBlocks(
     }
 
     if (last?.type === "thinking" && block.type === "thinking") {
-      if (block.text.startsWith(last.text)) {
-        merged[merged.length - 1] = block;
-      } else if (!last.text.endsWith(block.text)) {
+      const lastText = getThinkingText(last);
+      const blockText = getThinkingText(block);
+      if (blockText.startsWith(lastText)) {
+        merged[merged.length - 1] = {
+          ...block,
+          text: blockText,
+        } as ContentBlock;
+      } else if (!lastText.endsWith(blockText)) {
         merged[merged.length - 1] = {
           ...last,
-          text: `${last.text}${block.text}`,
+          text: `${lastText}${blockText}`,
         };
       }
       continue;
diff --git a/gateway/ui/src/ui/storage.ts b/gateway/ui/src/ui/storage.ts
index 5bc497b..15e2f51 100644
--- a/gateway/ui/src/ui/storage.ts
+++ b/gateway/ui/src/ui/storage.ts
@@ -3,6 +3,7 @@
  */
 
 export type Wallpaper = "mesh" | "aurora" | "dark-grain" | "grid";
+export type ShellStyle = "brutalist" | "futurist";
 
 export const WALLPAPER_OPTIONS: { id: Wallpaper; label: string; description: string }[] = [
   { id: "mesh", label: "Mesh Gradient", description: "Smooth shifting color gradient" },
@@ -11,12 +12,26 @@ export const WALLPAPER_OPTIONS: { id: Wallpaper; label: string; description: str
   { id: "grid", label: "Grid", description: "Faint geometric dot matrix" },
 ];
 
+export const SHELL_STYLE_OPTIONS: { id: ShellStyle; label: string; description: string }[] = [
+  {
+    id: "brutalist",
+    label: "Hard Brutalist",
+    description: "Near-zero radius, hard edges, monochrome chrome",
+  },
+  {
+    id: "futurist",
+    label: "Neo Futurist",
+    description: "Sharper geometry with restrained glow and depth",
+  },
+];
+
 export type UiSettings = {
   gatewayUrl: string;
   token: string;
   sessionKey: string;
   theme: "dark" | "light" | "system";
   wallpaper: Wallpaper;
+  shellStyle: ShellStyle;
 };
 
 const STORAGE_KEY = "gsv-ui-settings";
@@ -38,6 +53,7 @@ const DEFAULT_SETTINGS: UiSettings = {
   sessionKey: "agent:main:web:dm:local",
   theme: "dark",
   wallpaper: "mesh",
+  shellStyle: "brutalist",
 };
 
 /**
@@ -51,7 +67,15 @@ export function loadSettings(): UiSettings {
   try {
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored) {
-      return { ...DEFAULT_SETTINGS, ...JSON.parse(stored) };
+      const parsed = JSON.parse(stored) as Partial<UiSettings>;
+      const merged = { ...DEFAULT_SETTINGS, ...parsed };
+      if (!WALLPAPER_OPTIONS.some((option) => option.id === merged.wallpaper)) {
+        merged.wallpaper = DEFAULT_SETTINGS.wallpaper;
+      }
+      if (!SHELL_STYLE_OPTIONS.some((option) => option.id === merged.shellStyle)) {
+        merged.shellStyle = DEFAULT_SETTINGS.shellStyle;
+      }
+      return merged;
     }
   } catch {
     // Ignore
@@ -75,3 +99,7 @@ export function applyTheme(theme: UiSettings["theme"]): void {
   document.documentElement.setAttribute("data-theme", effectiveTheme);
   document.documentElement.setAttribute("data-mode", effectiveTheme);
 }
+
+export function applyShellStyle(shellStyle: ShellStyle): void {
+  document.documentElement.setAttribute("data-shell-style", shellStyle);
+}
diff --git a/gateway/ui/src/ui/types.ts b/gateway/ui/src/ui/types.ts
index f9c4c4c..9c342e2 100644
--- a/gateway/ui/src/ui/types.ts
+++ b/gateway/ui/src/ui/types.ts
@@ -173,6 +173,8 @@ export type ImageBlock = {
 export type ThinkingBlock = {
   type: "thinking";
   text: string;
+  thinking?: string;
+  thinkingSignature?: string;
 };
 
 // Chat event payload
diff --git a/gateway/ui/src/ui/views/chat.ts b/gateway/ui/src/ui/views/chat.ts
index e6a59dc..457a9ac 100644
--- a/gateway/ui/src/ui/views/chat.ts
+++ b/gateway/ui/src/ui/views/chat.ts
@@ -207,10 +207,11 @@ function renderImageBlock(block: ImageBlock) {
 }
 
 function renderThinkingBlock(block: ThinkingBlock) {
+  const text = block.text || (block as ThinkingBlock & { thinking?: string }).thinking || "";
   return html`
     <details class="thinking-block">
       <summary>Thinking</summary>
-      <pre>${block.text}</pre>
+      <pre>${text}</pre>
     </details>
   `;
 }