diff --git a/.github/agents/cletus.md b/.github/agents/cletus.md
index e4ad353..514fe52 100644
--- a/.github/agents/cletus.md
+++ b/.github/agents/cletus.md
@@ -10,18 +10,35 @@ description: An agent that understands the cletus package.
 
 # Cletus Developer
 
-This agent updates the packages/cletus package which is a CLI AI agent focused on file and data management.
-Before creating a new function, look throughout codebase for a similar function/behavior. Try to reuse that.
-Try to parallelize operations where possible.
-Long running operations should have chatStatus updates.
-Importing files should be done with searchFiles + processFile.
-
-### Adding Tools
-How to:
-1. Add tool name to OperationKindSchema in schemas.ts
-2. Add tool definition in tools/[agent].ts, add it to tool list at the bottom
-3. Add tool operation implementation in operations/[agent].tsx
-
-### Update Tools
-1. Update tool definition in tools/[agent].ts
-2. Update tool operation implementation in operations/[agent].tsx
+This agent updates the packages/cletus package which is a CLI & browser AI agent focused on file and data management.
+
+The browser version has a TypeScript & Node backend that communicates with the frontend via websockets. The front-end is built with TypeScript & React.
+
+## aeye Coding Guidelines:
+1. Avoid using `any`, `unknown`, or `as X` casts. These methods hide type issues and make code less safe.
+2. Types should not be redefined - import them from their source. Most types are in packages/cletus/src/common/types or packages/cletus/src/common/schemas.
+3. If you need a subset or transformed version of a type - use TypeScript utility types (Pick, Omit, etc) over redefining.
+4. When you see duplicate code, consider refactoring it into a reusable function or component.
+5. A lot of utility functions are in packages/cletus/src/shared. Check there before creating new ones (`pluralize`, `formatName`, `abbreviate`, `formatSize`, `formatTime`, `formatSize`, `chunk`, `group`, `gate`, `paginateText`, etc).
+
+
+## Adding Tools & Operations
+
+Some tools have operation counterparts. Operations are an action that could require user approval before execution. An analysis is run if the user needs to give permission and informs the LLM of what will be done. Once approved, the operation is executed.
+
+The tools that don't fit into the operation model (like utility tools) can be added as regular tools in the utility tools section.
+
+### Operation Guidelines
+
+- The base operation types are in packages/cletus/src/operations/types.ts
+- The operation implementation and CLI rendering are in packages/cletus/src/operations/[toolset].tsx
+- Each operation should be defined in OperationKindSchema in packages/cletus/src/schemas.ts
+- The web renderers for operations are in packages/cletus/src/browser/operations/[toolset].tsx. A web renderer must be defined.
+- The tool definition is in packages/cletus/src/tools/[toolset].ts
+
+### Operation Execution
+
+- Try to parallelize operations in `do` where possible.
+- Long running operations should have chatStatus updates. (if it involves iterating over long running tasks, embedding, file processing, making prompt calls, etc)
+- Importing files should be done with searchFiles + processFile.
+- If something in any render function depends on certain things existing (files, types, etc) the parts that should be rendered can be placed in the operation's cache during analysis/execution and rendered conditionally based on their presence. That way when things change or are removed the rendering is consistent.
diff --git a/.gitignore b/.gitignore
index 2a68d65..bcd791e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ node_modules/
 
 # Build outputs
 dist/
+dist-browser/
 *.tsbuildinfo
 # Build artifacts in source directories
 packages/*/src/**/*.js
diff --git a/package-lock.json b/package-lock.json
index efdaa2f..29ac7f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,15 @@
         "packages/test-integration"
       ],
       "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.17",
+        "autoprefixer": "^10.4.22",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.559.0",
+        "postcss": "^8.5.6",
         "rimraf": "^6.1.0",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^4.1.17",
         "tsconfig-paths": "^4.2.0",
         "typescript": "^5.9.3"
       }
@@ -88,6 +96,19 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@anthropic-ai/sdk": {
       "version": "0.70.1",
       "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.70.1.tgz",
@@ -2748,7 +2769,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@emnapi/wasi-threads": "1.1.0",
         "tslib": "^2.4.0"
@@ -2771,7 +2791,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -4382,7 +4401,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@emnapi/core": "^1.4.3",
         "@emnapi/runtime": "^1.4.3",
@@ -5321,6 +5339,290 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
+      "integrity": "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.17"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz",
+      "integrity": "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.17",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.17",
+        "@tailwindcss/oxide-darwin-x64": "4.1.17",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.17",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.17",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.17",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.17",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.17",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.17"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.17.tgz",
+      "integrity": "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.17.tgz",
+      "integrity": "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.17.tgz",
+      "integrity": "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.17.tgz",
+      "integrity": "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.17.tgz",
+      "integrity": "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.17.tgz",
+      "integrity": "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.17.tgz",
+      "integrity": "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.17.tgz",
+      "integrity": "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.17.tgz",
+      "integrity": "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.17.tgz",
+      "integrity": "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.6.0",
+        "@emnapi/runtime": "^1.6.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.17.tgz",
+      "integrity": "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.17.tgz",
+      "integrity": "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.17.tgz",
+      "integrity": "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.17",
+        "@tailwindcss/oxide": "4.1.17",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.17"
+      }
+    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
     "node_modules/@tavily/core": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/@tavily/core/-/core-0.5.13.tgz",
@@ -5372,7 +5674,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -5422,6 +5723,15 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
     "node_modules/@types/diff": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/@types/diff/-/diff-7.0.2.tgz",
@@ -5429,6 +5739,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/file-type": {
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/@types/file-type/-/file-type-10.6.0.tgz",
@@ -5459,6 +5784,15 @@
         "@types/tinycolor2": "*"
       }
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -5497,6 +5831,21 @@
         "pretty-format": "^30.0.0"
       }
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "24.10.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
@@ -5521,12 +5870,21 @@
       "version": "19.2.6",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.6.tgz",
       "integrity": "sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
       }
     },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -5548,6 +5906,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/uuid": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
@@ -5565,6 +5929,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.35",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz",
@@ -5596,7 +5970,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/@unrs/resolver-binding-android-arm-eabi": {
@@ -6045,18 +6418,56 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/axios": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
-      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+    "node_modules/autoprefixer": {
+      "version": "10.4.22",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
+      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.4",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
+        "browserslist": "^4.27.0",
+        "caniuse-lite": "^1.0.30001754",
+        "fraction.js": "^5.3.4",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/b4a": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.7.3.tgz",
@@ -6213,6 +6624,16 @@
         "@babel/core": "^7.11.0 || ^8.0.0-beta.1"
       }
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6585,6 +7006,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/cfb": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
@@ -6680,6 +7111,46 @@
         "node": ">=10"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chownr": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -6736,6 +7207,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/cli-boxes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
@@ -6890,6 +7374,16 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6969,6 +7463,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -8093,11 +8597,23 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/data-uri-to-buffer": {
@@ -8114,7 +8630,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -8138,6 +8653,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
+      "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/dedent": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.0.tgz",
@@ -8235,6 +8763,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -8260,6 +8797,19 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "license": "MIT"
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/devtools-protocol": {
       "version": "0.0.1521046",
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1521046.tgz",
@@ -8434,6 +8984,20 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -8651,6 +9215,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -8759,6 +9333,12 @@
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/extract-zip": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
@@ -9024,6 +9604,20 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -9388,6 +9982,164 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "property-information": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.1.0.tgz",
+      "integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-raw/node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.1.tgz",
+      "integrity": "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -9414,6 +10166,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -9748,6 +10520,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
     "node_modules/ip-address": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
@@ -9771,6 +10549,30 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -9814,6 +10616,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-descriptor": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
@@ -9854,6 +10666,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-in-ci": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-in-ci/-/is-in-ci-2.0.0.tgz",
@@ -9880,6 +10702,18 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -10900,6 +11734,16 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -11120,11 +11964,272 @@
         "immediate": "~3.0.5"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "devOptional": true,
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -11134,177 +12239,1062 @@
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lop": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/lop/-/lop-0.4.2.tgz",
+      "integrity": "sha512-RefILVDQ4DKoRZsJ4Pj22TxE3omDO47yFpkIBoDKzkqPRISs5U1cnAdg/5583YPkWPaLIYHOKRMQSvjFsO26cw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "duck": "^0.1.12",
+        "option": "~0.2.1",
+        "underscore": "^1.13.1"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.2.tgz",
+      "integrity": "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.559.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.559.0.tgz",
+      "integrity": "sha512-3ymrkBPXWk3U2bwUDg6TdA6hP5iGDMgPEAMLhchEgTQmA+g0Zk24tOtKtXMx35w1PizTmsBC3RhP88QYm+7mHQ==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/makeerror": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tmpl": "1.0.5"
+      }
+    },
+    "node_modules/mammoth": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/mammoth/-/mammoth-1.11.0.tgz",
+      "integrity": "sha512-BcEqqY/BOwIcI1iR5tqyVlqc3KIaMRa4egSoK83YAVrBf6+yqdAAbtUcFDCWX8Zef8/fgNZ6rl4VUv+vVX8ddQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@xmldom/xmldom": "^0.8.6",
+        "argparse": "~1.0.3",
+        "base64-js": "^1.5.1",
+        "bluebird": "~3.4.0",
+        "dingbat-to-unicode": "^1.0.1",
+        "jszip": "^3.7.1",
+        "lop": "^0.4.2",
+        "path-is-absolute": "^1.0.0",
+        "underscore": "^1.13.1",
+        "xmlbuilder": "^10.0.0"
+      },
+      "bin": {
+        "mammoth": "bin/mammoth"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/matcher": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
+      "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/matcher/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "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==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
+      "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mic": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mic/-/mic-2.1.2.tgz",
+      "integrity": "sha512-rpl4tgdXX24sAzYwjRc5OZfGNAuhUIIjdd0cw8+Ubq7rp3iGhi40AdqcwurDWhEZADk60tPOxb3E2MpoeLeyxw==",
+      "license": "MIT"
+    },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/lodash.memoize": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/lop": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/lop/-/lop-0.4.2.tgz",
-      "integrity": "sha512-RefILVDQ4DKoRZsJ4Pj22TxE3omDO47yFpkIBoDKzkqPRISs5U1cnAdg/5583YPkWPaLIYHOKRMQSvjFsO26cw==",
-      "dev": true,
-      "license": "BSD-2-Clause",
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "duck": "^0.1.12",
-        "option": "~0.2.1",
-        "underscore": "^1.13.1"
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "11.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.2.tgz",
-      "integrity": "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "20 || >=22"
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/make-dir": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
-      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
-      "dev": true,
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "semver": "^7.5.3"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/make-error": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true,
-      "license": "ISC"
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
     },
-    "node_modules/makeerror": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
-      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "tmpl": "1.0.5"
-      }
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
     },
-    "node_modules/mammoth": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/mammoth/-/mammoth-1.11.0.tgz",
-      "integrity": "sha512-BcEqqY/BOwIcI1iR5tqyVlqc3KIaMRa4egSoK83YAVrBf6+yqdAAbtUcFDCWX8Zef8/fgNZ6rl4VUv+vVX8ddQ==",
-      "dev": true,
-      "license": "BSD-2-Clause",
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "@xmldom/xmldom": "^0.8.6",
-        "argparse": "~1.0.3",
-        "base64-js": "^1.5.1",
-        "bluebird": "~3.4.0",
-        "dingbat-to-unicode": "^1.0.1",
-        "jszip": "^3.7.1",
-        "lop": "^0.4.2",
-        "path-is-absolute": "^1.0.0",
-        "underscore": "^1.13.1",
-        "xmlbuilder": "^10.0.0"
-      },
-      "bin": {
-        "mammoth": "bin/mammoth"
-      },
-      "engines": {
-        "node": ">=12.0.0"
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/matcher": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
-      "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "escape-string-regexp": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/matcher/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "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==",
-      "dev": true,
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT"
     },
-    "node_modules/mic": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/mic/-/mic-2.1.2.tgz",
-      "integrity": "sha512-rpl4tgdXX24sAzYwjRc5OZfGNAuhUIIjdd0cw8+Ubq7rp3iGhi40AdqcwurDWhEZADk60tPOxb3E2MpoeLeyxw==",
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT"
     },
     "node_modules/micromatch": {
@@ -11442,7 +13432,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/mustache": {
@@ -11466,6 +13455,25 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/napi-postinstall": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
@@ -11590,6 +13598,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -11979,6 +13997,31 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -12160,6 +14203,56 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/pretty-format": {
       "version": "30.2.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.2.0.tgz",
@@ -12234,6 +14327,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proxy-agent": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz",
@@ -12341,15 +14444,26 @@
       "license": "MIT"
     },
     "node_modules/react": {
-      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
-      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
-      "dev": true,
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
+      "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-dom": {
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
+      "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -12357,6 +14471,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-markdown": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+      "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/react-reconciler": {
       "version": "0.33.0",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.33.0.tgz",
@@ -12447,6 +14588,87 @@
         "regjsparser": "bin/parser"
       }
     },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/replicate": {
       "version": "0.34.1",
       "resolved": "https://registry.npmjs.org/replicate/-/replicate-0.34.1.tgz",
@@ -12678,7 +14900,6 @@
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/semver": {
@@ -12921,6 +15142,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -12932,6 +15163,16 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -13117,6 +15358,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
@@ -13219,6 +15474,24 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -13260,6 +15533,38 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
+      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tar": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
@@ -13481,6 +15786,26 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-algebra": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ts-algebra/-/ts-algebra-2.0.0.tgz",
@@ -13723,6 +16048,93 @@
         "node": ">=4"
       }
     },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unrs-resolver": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
@@ -13825,6 +16237,48 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -13893,6 +16347,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/webdriver-bidi-protocol": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.3.9.tgz",
@@ -14190,7 +16654,6 @@
       "version": "8.18.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
       "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -14394,6 +16857,16 @@
         "zod": "^3.25 || ^4"
       }
     },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "packages/ai": {
       "name": "@aeye/ai",
       "version": "0.3.1",
@@ -14450,7 +16923,12 @@
         "ink-text-input": "^6.0.0",
         "mic": "^2.1.2",
         "react": "^19.2.0",
-        "sharp": "^0.34.3"
+        "react-dom": "^19.2.0",
+        "react-markdown": "^10.1.0",
+        "rehype-raw": "^7.0.0",
+        "remark-gfm": "^4.0.1",
+        "sharp": "^0.34.3",
+        "ws": "^8.18.0"
       },
       "bin": {
         "cletus": "dist/index.js"
@@ -14467,6 +16945,7 @@
         "@jest/globals": "^29.7.0",
         "@langchain/core": "^0.3.79",
         "@langchain/textsplitters": "^0.1.0",
+        "@tailwindcss/typography": "^0.5.19",
         "@tavily/core": "^0.5.13",
         "@types/diff": "^7.0.2",
         "@types/file-type": "^10.6.0",
@@ -14474,8 +16953,10 @@
         "@types/node": "^24.9.1",
         "@types/pdf-parse": "^1.1.5",
         "@types/react": "^19.2.2",
+        "@types/react-dom": "^19.2.0",
         "@types/uuid": "^10.0.0",
         "@types/wav": "^1.0.4",
+        "@types/ws": "^8.5.13",
         "babel-jest": "^29.7.0",
         "diff": "^8.0.2",
         "esbuild": "^0.26.0",
diff --git a/package.json b/package.json
index dcdec13..6bc511f 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,15 @@
     "url": "https://github.com/ClickerMonkey/aeye.git"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.17",
+    "autoprefixer": "^10.4.22",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.559.0",
+    "postcss": "^8.5.6",
     "rimraf": "^6.1.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.9.3"
   }
diff --git a/packages/ai/src/ai.ts b/packages/ai/src/ai.ts
index d5259f0..01f7d87 100644
--- a/packages/ai/src/ai.ts
+++ b/packages/ai/src/ai.ts
@@ -5,7 +5,7 @@
  * Provides type-safe, scoped access to AI capabilities with hooks and context injection.
  */
 
-import { accumulateUsage, Agent, Events, Extend, FnResolved, MessageContentType, Prompt, resolveFn, RetoolResult, Tool, ToolCompatible, Tuple } from '@aeye/core';
+import { accumulateUsage, Agent, Events, Extend, Fn, FnResolved, MessageContentType, Prompt, resolveFn, RetoolResult, Tool, ToolCompatible, Tuple } from '@aeye/core';
 import { ChatAPI } from './apis/chat';
 import { EmbedAPI } from './apis/embed';
 import { ImageAPI } from './apis/image';
@@ -48,6 +48,57 @@ import type {
   Usage
 } from './types';
 
+// Helper types for AI components
+
+type AIToolInput<
+  T extends AIBaseTypes,
+  TName extends string = string,
+  TParams extends object = {},
+  TOutput = unknown,
+  TRefs extends Tuple<ComponentFor<T>> = []
+> = Omit<ToolInput<
+  AIContext<T>,
+  AIMetadata<T>,
+  TName,
+  TParams,
+  TOutput,
+  // @ts-ignore
+  TRefs
+>, 'types'>;
+
+type AIPromptInput<
+  T extends AIBaseTypes,
+  TName extends string = string,
+  TInput extends object = {},
+  TOutput extends object | string = string,
+  TTools extends Tuple<ToolCompatible<AIContextRequired<T>, AIMetadataRequired<T>>> = []
+> = Omit<PromptInput<
+  AIContext<T>,
+  AIMetadata<T>,
+  TName,
+  TInput,
+  TOutput,
+  // @ts-ignore
+  TTools
+>, 'types' | 'retool'> & {
+  retool?: Fn<RetoolResult<AIContextRequired<T>, AIMetadataRequired<T>, TTools>, [TInput | undefined, Context<T>]>;
+};
+
+type AIAgentInput<
+  T extends AIBaseTypes,
+  TName extends string = string,
+  TInput extends object = {},
+  TOutput = unknown,
+  TRefs extends Tuple<ComponentFor<T>> = []
+> = Omit<AgentInput<
+  AIContext<T>,
+  AIMetadata<T>,
+  TName,
+  TInput,
+  TOutput,
+  // @ts-ignore
+  TRefs
+>, 'types'>;
 
 /**
  * AI Class
@@ -728,15 +779,7 @@ export class AI<T extends AIBaseTypes> {
     TOutput extends object | string = string,
     TTools extends Tuple<ToolCompatible<AIContextRequired<T>, AIMetadataRequired<T>>> = []
   >(
-    options: Omit<PromptInput<
-      AIContext<T>,
-      AIMetadata<T>,
-      TName,
-      TInput,
-      TOutput,
-      // @ts-ignore
-      TTools
-    >, 'types'>
+    options: AIPromptInput<T, TName, TInput, TOutput, TTools>
   ) {
     const { input, schema, config, reconfig, retool, validate, applicable, metadataFn, ...rest } = options;
 
@@ -829,15 +872,7 @@ export class AI<T extends AIBaseTypes> {
     TOutput = unknown,
     TRefs extends Tuple<ComponentFor<T>> = []
   >(
-    options: Omit<ToolInput<
-      AIContext<T>,
-      AIMetadata<T>,
-      TName,
-      TParams,
-      TOutput,
-      // @ts-ignore
-      TRefs
-    >, 'types'>
+    options: AIToolInput<T, TName, TParams, TOutput, TRefs>
   ) {
     const { input, schema, call, validate, applicable, ...rest } = options;
 
@@ -900,15 +935,7 @@ export class AI<T extends AIBaseTypes> {
     TOutput = unknown,
     TRefs extends Tuple<ComponentFor<T>> = []
   >(
-    options: Omit<AgentInput<
-      AIContext<T>,
-      AIMetadata<T>,
-      TName,
-      TInput,
-      TOutput,
-      // @ts-ignore
-      TRefs
-    >, 'types'>
+    options: AIAgentInput<T, TName, TInput, TOutput, TRefs>
   ) {
     const { call, applicable, metadataFn, ...rest } = options;
 
diff --git a/packages/ai/src/types.ts b/packages/ai/src/types.ts
index 0b922b9..2d5a8e7 100644
--- a/packages/ai/src/types.ts
+++ b/packages/ai/src/types.ts
@@ -28,6 +28,7 @@ import type {
   Response,
   Simplify,
   Streamer,
+  ToolCompatible,
   ToolInput,
   Usage,
 } from '@aeye/core';
@@ -549,6 +550,14 @@ export type Context<T extends AIBaseTypes> = CoreContext<
  */
 export type ContextInfer<A> = A extends AI<infer T> ? Context<T> : never;
 
+/**
+ * Infers the component context type with required fields from an AI instance
+ */
+export type ComponentInfer<A> = A extends AI<infer T> ? ComponentCompatible<
+  AIContextRequired<T>,
+  AIMetadataRequired<T>
+> : never;
+
 /**
  * Component type for AI instance
  */
@@ -557,6 +566,14 @@ export type ComponentFor<T extends AIBaseTypes> = ComponentCompatible<
   AIMetadataRequired<T>
 >;
 
+/**
+ * Tool type for AI instance
+ */
+export type ToolInfer<A> = A extends AI<infer T> ? ToolCompatible<
+  AIContextRequired<T>,
+  AIMetadataRequired<T>
+> : never;
+
 // ============================================================================
 // Request/Response Types for Capabilities
 // ============================================================================
diff --git a/packages/cletus/esbuild.browser.cjs b/packages/cletus/esbuild.browser.cjs
new file mode 100644
index 0000000..310e66b
--- /dev/null
+++ b/packages/cletus/esbuild.browser.cjs
@@ -0,0 +1,73 @@
+const esbuild = require('esbuild');
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const tailwindcss = require('@tailwindcss/postcss');
+const autoprefixer = require('autoprefixer');
+
+async function build() {
+  try {
+    const distDir = path.join(__dirname, 'dist-browser');
+    if (!fs.existsSync(distDir)) {
+      fs.mkdirSync(distDir, { recursive: true });
+    }
+
+    // Build Tailwind CSS using PostCSS
+    console.log('Building Tailwind CSS...');
+    const inputCss = fs.readFileSync(path.join(__dirname, 'src/browser/styles.css'), 'utf8');
+    const configPath = path.join(__dirname, 'tailwind.config.cjs');
+
+    const result = await postcss([
+      tailwindcss,
+      autoprefixer,
+    ]).process(inputCss, {
+      from: path.join(__dirname, 'src/browser/styles.css'),
+      to: path.join(distDir, 'styles.css'),
+    });
+
+    fs.writeFileSync(path.join(distDir, 'styles.css'), result.css);
+    console.log('✓ Tailwind CSS built successfully');
+
+    // Build the browser client
+    console.log('Building browser client...');
+    await esbuild.build({
+      entryPoints: ['src/browser/app.tsx'],
+      bundle: true,
+      platform: 'browser',
+      target: 'es2020',
+      outfile: 'dist-browser/app.js',
+      format: 'esm',
+      minify: true,
+      sourcemap: true,
+      logLevel: 'info',
+      define: {
+        'process.env.NODE_ENV': '"production"'
+      },
+      external: ['*.css'],
+    });
+
+    // Copy HTML file and update it to include the styles
+    const htmlContent = fs.readFileSync(
+      path.join(__dirname, 'src/browser/index.html'),
+      'utf-8'
+    );
+
+    // Inject the CSS link into the HTML with absolute path
+    const updatedHtml = htmlContent.replace(
+      '</head>',
+      '  <link rel="stylesheet" href="/styles.css">\n</head>'
+    );
+
+    fs.writeFileSync(
+      path.join(distDir, 'index.html'),
+      updatedHtml
+    );
+
+    console.log('✓ Browser client built successfully');
+  } catch (error) {
+    console.error('Browser build failed:', error);
+    process.exit(1);
+  }
+}
+
+build();
diff --git a/packages/cletus/migrate-chat.js b/packages/cletus/migrate-chat.js
new file mode 100644
index 0000000..ac4119d
--- /dev/null
+++ b/packages/cletus/migrate-chat.js
@@ -0,0 +1,31 @@
+// Migration script to fix old chat format where content was a string
+const fs = require('fs');
+const path = require('path');
+
+const chatFile = process.argv[2];
+if (!chatFile) {
+  console.error('Usage: node migrate-chat.js <path-to-chat-file>');
+  process.exit(1);
+}
+
+const data = JSON.parse(fs.readFileSync(chatFile, 'utf-8'));
+
+let migrated = 0;
+data.messages.forEach((msg, index) => {
+  // Check if content is a string (old format)
+  if (typeof msg.content === 'string') {
+    console.log(`Migrating message ${index}: ${msg.role}`);
+    msg.content = [{
+      type: 'text',
+      content: msg.content
+    }];
+    migrated++;
+  }
+});
+
+if (migrated > 0) {
+  fs.writeFileSync(chatFile, JSON.stringify(data, null, 2));
+  console.log(`✓ Migrated ${migrated} message(s)`);
+} else {
+  console.log('No messages need migration');
+}
diff --git a/packages/cletus/package.json b/packages/cletus/package.json
index b2c38df..31a804e 100644
--- a/packages/cletus/package.json
+++ b/packages/cletus/package.json
@@ -9,10 +9,10 @@
     "cletus": "dist/index.js"
   },
   "scripts": {
-    "build": "npm run clean && node esbuild.config.cjs",
+    "build": "npm run clean && node esbuild.config.cjs && node esbuild.browser.cjs",
     "dev": "tsx watch src/index.tsx",
     "start": "tsx --conditions=source src/index.tsx",
-    "clean": "rimraf dist tsconfig.tsbuildinfo",
+    "clean": "rimraf dist dist-browser tsconfig.tsbuildinfo",
     "typecheck": "tsc --noEmit",
     "test": "jest",
     "profile": "node --inspect dist/index.js",
@@ -49,7 +49,12 @@
     "ink-text-input": "^6.0.0",
     "mic": "^2.1.2",
     "react": "^19.2.0",
-    "sharp": "^0.34.3"
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "sharp": "^0.34.3",
+    "ws": "^8.18.0"
   },
   "optionalDependencies": {
     "puppeteer": "^24.31.0"
@@ -66,6 +71,7 @@
     "@jest/globals": "^29.7.0",
     "@langchain/core": "^0.3.79",
     "@langchain/textsplitters": "^0.1.0",
+    "@tailwindcss/typography": "^0.5.19",
     "@tavily/core": "^0.5.13",
     "@types/diff": "^7.0.2",
     "@types/file-type": "^10.6.0",
@@ -73,8 +79,10 @@
     "@types/node": "^24.9.1",
     "@types/pdf-parse": "^1.1.5",
     "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.0",
     "@types/uuid": "^10.0.0",
     "@types/wav": "^1.0.4",
+    "@types/ws": "^8.5.13",
     "babel-jest": "^29.7.0",
     "diff": "^8.0.2",
     "esbuild": "^0.26.0",
diff --git a/packages/cletus/postcss.config.cjs b/packages/cletus/postcss.config.cjs
new file mode 100644
index 0000000..12a703d
--- /dev/null
+++ b/packages/cletus/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/cletus/src/agents/chat-agent.ts b/packages/cletus/src/agents/chat-agent.ts
index 324930c..5142e1a 100644
--- a/packages/cletus/src/agents/chat-agent.ts
+++ b/packages/cletus/src/agents/chat-agent.ts
@@ -1,5 +1,5 @@
-import { AnyTool } from '@aeye/core';
-import type { CletusAI, CletusAIContext } from '../ai';
+import { AnyTool, Tuple } from '@aeye/core';
+import type { CletusAI, CletusAIContext, CletusTool } from '../ai';
 import { ADAPTIVE_TOOLING } from '../constants';
 import { Operations } from '../operations/types';
 import {
@@ -8,7 +8,6 @@ import {
   RegisteredTool,
   toolRegistry
 } from '../tool-registry';
-import { createUtilityTools } from '../tools/utility';
 import { createToolsets } from './toolsets';
 
 /**
@@ -24,12 +23,13 @@ async function initializeToolRegistry(ai: CletusAI, toolsets: ReturnType<typeof
     artistTools,
     internetTools,
     dbaTools,
+    utilityTools,
   } = toolsets;
 
   const ctx = await ai.buildContext({});
-  const instruct = (tool: AnyTool) => getToolInstructions(tool, ctx);
+  const instruct = (tool: CletusTool) => getToolInstructions(tool, ctx);
 
-    // Register static toolsets
+    // Register toolsets
   await toolRegistry.registerToolset('planner', plannerTools, instruct);
   await toolRegistry.registerToolset('librarian', librarianTools, instruct);
   await toolRegistry.registerToolset('clerk', clerkTools, instruct);
@@ -38,12 +38,25 @@ async function initializeToolRegistry(ai: CletusAI, toolsets: ReturnType<typeof
   await toolRegistry.registerToolset('artist', artistTools, instruct);
   await toolRegistry.registerToolset('internet', internetTools, instruct);
   await toolRegistry.registerToolset('dba', dbaTools, instruct);
-
-  // Register utility tools
-  const utilityTools = createUtilityTools(ai);
   await toolRegistry.registerToolset('utility', utilityTools, instruct);
 }
 
+/**
+ * Initialize tool registry
+ */
+export async function initTools(ai: CletusAI) {
+  if (toolRegistry.getAllTools().length > 0) {
+    // Already initialized
+    return;
+  }
+
+  // Create all toolsets
+  const toolsets = createToolsets(ai);
+  
+  // Initialize the tool registry
+  initializeToolRegistry(ai, toolsets);
+}
+
 /**
  * Get tools based on current toolset or adaptive selection
  */
@@ -51,8 +64,10 @@ async function getActiveTools(ctx: CletusAIContext): Promise<RegisteredTool[]> {
   const toolset = ctx.chat?.toolset;
 
   // Get all tools with alwaysVisible metadata
+  // OR were marked as persistent in the AI context
   const alwaysVisibleTools = toolRegistry.getAllTools().filter(t => 
-    t.tool.input.metadata?.alwaysVisible === true
+    t.tool.input.metadata?.alwaysVisible === true ||
+    ctx.persistentTools?.has(t.name)
   );
 
   // Create a set to track tool names and prevent duplicates
@@ -101,14 +116,8 @@ async function getActiveTools(ctx: CletusAIContext): Promise<RegisteredTool[]> {
  * Create the main chat agent with adaptive tooling
  */
 export function createChatAgent(ai: CletusAI) {
-  // Create all toolsets
-  const toolsets = createToolsets(ai);
-  
-  // Initialize the tool registry
-  initializeToolRegistry(ai, toolsets);
-
-  // Create utility tools (always available)
-  const utilityTools = createUtilityTools(ai);
+  // Ensure tools are initialized
+  initTools(ai);
 
   // Build toolset descriptions for the prompt
   const buildToolsetDescriptions = (ctx: CletusAIContext) => {
@@ -210,24 +219,15 @@ Tools:
 </rules>
 
 <importantRules>
-- Don't present the results of an operation in <input> or <output> tags - those are only for your internal processing.
-- Past tool call results will be formatted in <input>, <analysis>, and <output> tags automatically. This is not a formatting you need to do yourself - you need to make tool calls to get actual results.
+- Assistant messages with <input> & <analysis> tags are preliminary tool outputs that is awaiting user approval or rejection before producing output. Do NOT treat these as final outputs. You will be notified when the user approves or rejects them.
+- Assistant messages with <output> tags are final results from approved operations. These can be presented to the user directly.
+- Don't present anything in <input>, <analysis>, or <output> tags - those are produced by the Cletus system and not by you even though they are marked as Assistant messages.
 - Don't ask for permission to perform operations - if you need to do something, just do it. The user will be asked for approval automatically if needed.
 - Todos are exclusively for Cletus's internal management of user requests. They are only referred to as todos - anything else should be assumed to be a separate data type.
 - If you've executed ANY tools - DO NOT ask a question at the end of your response. You are either going to automatically continue your work OR the user will respond next. NEVER ask a question after executing tools. Only for clarifications.
 </importantRules>
 `,
-    tools: [
-      ...toolsets.architectTools,
-      ...toolsets.artistTools,
-      ...toolsets.clerkTools,
-      ...toolsets.dbaTools,
-      ...toolsets.internetTools,
-      ...toolsets.librarianTools,
-      ...toolsets.plannerTools,
-      ...toolsets.secretaryTools,
-      ...utilityTools,
-    ],
+    tools: toolRegistry.getAllTools().map(t => t.tool) as Tuple<CletusTool>,
     // Dynamic tools based on adaptive selection using retool
     retool: async (_, ctx) => {
       const activeTools = await getActiveTools(ctx);
@@ -254,6 +254,8 @@ Tools:
   return chatPrompt;
 }
 
+export type CletusChatAgent = ReturnType<typeof createChatAgent>;
+
 /**
  * Get a human-readable description for a toolset
  */
diff --git a/packages/cletus/src/agents/chat-orchestrator.ts b/packages/cletus/src/agents/chat-orchestrator.ts
index 8d609d9..3085d68 100644
--- a/packages/cletus/src/agents/chat-orchestrator.ts
+++ b/packages/cletus/src/agents/chat-orchestrator.ts
@@ -6,14 +6,14 @@ import { AUTONOMOUS } from '../constants';
 import { logger } from '../logger';
 import { OperationManager } from '../operations/manager';
 import type { ChatMeta, Message, Operation } from '../schemas';
-import { createChatAgent } from './chat-agent';
+import { CletusChatAgent } from './chat-agent';
 import { CletusAIContext } from '../ai';
 
 /**
  * Options for running the chat orchestrator
  */
 export interface OrchestratorOptions {
-  chatAgent: ReturnType<typeof createChatAgent>;
+  chatAgent: CletusChatAgent;
   messages: Message[];
   chatMeta: ChatMeta;
   config: ConfigFile;
@@ -96,6 +96,7 @@ export async function runChatOrchestrator(
   let messageUsage: Usage = {};
   let messageCost = 0;
   let toolTokens = 0;
+  let lastTextIndex = -1; // Track wich content entry has the accumulated text
 
   const updateUsageEvent = () => {
     const accumulated = getUsage();
@@ -147,15 +148,26 @@ export async function runChatOrchestrator(
       };
 
       // Helper to get or create the last text content entry (not tied to an operation)
-      const getLastTextContent = () => {
+      const getLastTextContent = (forceNew = false) => {
+        // If forceNew, create a new entry
+        if (forceNew) {
+          const newContent = { type: 'text' as const, content: '' };
+          pending.content.push(newContent);
+          lastTextIndex = pending.content.length - 1;
+          return newContent;
+        }
+
         // Get the last entry - if it's text and not an operation, return it
         const last = pending.content[pending.content.length - 1];
         if (last && last.type === 'text' && last.operationIndex === undefined) {
+          lastTextIndex = pending.content.length - 1;
           return last;
         }
+
         // Create a new text content entry if none exists
         const newContent = { type: 'text' as const, content: '' };
         pending.content.push(newContent);
+        lastTextIndex = pending.content.length - 1;
         return newContent;
       };
 
@@ -212,13 +224,14 @@ export async function runChatOrchestrator(
       let stackTrace: any;
 
       // Run chat agent
-      const chatContext = {
+      const chatContext: Partial<CletusAIContext> = {
         ops,
         chat: chatMeta,
         chatData,
         chatMessage: pending,
         config,
         signal,
+        persistentTools: new Set<string>(),
         messages: currentMessages,
         chatStatus: (status: string) => onEvent({ type: 'status', status }),
         chatInterrupt: () => {
@@ -273,10 +286,10 @@ export async function runChatOrchestrator(
               {
                 const lastContent = getLastTextContent();
                 lastContent.content += chunk.content;
-                
+
                 // Estimate text output tokens
                 updateEstimatedTextOutputTokens();
-                
+
                 onEvent({ type: 'pendingUpdate', pending });
                 onEvent({ type: 'status', status: '' });
                 updateUsageEvent();
@@ -285,17 +298,43 @@ export async function runChatOrchestrator(
 
             case 'text':
               {
+                // text event contains complete content for this iteration
+                // If we haven't accumulated via textPartial, use it directly
+                // Otherwise, textPartial has already accumulated it, so skip
                 const lastContent = getLastTextContent();
-                lastContent.content = chunk.content;
-                
+                if (lastContent.content === '') {
+                  // No textPartial events (non-streaming mode), use text content
+                  lastContent.content = chunk.content;
+                } else {
+                  // textPartial already accumulated, verify it matches
+                  // In streaming mode, text is redundant with textPartial accumulation
+                }
+
                 // Estimate text output tokens
                 updateEstimatedTextOutputTokens();
-                
+
                 onEvent({ type: 'pendingUpdate', pending });
                 updateUsageEvent();
               }
               break;
 
+            case 'toolOutput':
+              {
+                // After a tool completes, the next text should go into a new content entry
+                // This ensures content from different tool iterations doesn't get mixed
+                // Force creation of new text entry on next text event
+                getLastTextContent(true);
+                onEvent({ type: 'pendingUpdate', pending }); 
+              }
+              break;
+
+            case 'toolParseName': 
+              {
+                // Track recent tool usage in context so tools don't leave view
+                chatContext.persistentTools!.add(chunk.tool.name);
+              }
+              break;
+
             case 'requestUsage':
               const lastUserMessageIndex = messages.findLastIndex((msg) => msg.role === 'user');
               const lastUserMessage = messages[lastUserMessageIndex];
diff --git a/packages/cletus/src/agents/toolsets.ts b/packages/cletus/src/agents/toolsets.ts
index 2a66b89..b9ec109 100644
--- a/packages/cletus/src/agents/toolsets.ts
+++ b/packages/cletus/src/agents/toolsets.ts
@@ -10,6 +10,7 @@ import { createInternetTools } from '../tools/internet';
 import { createLibrarianTools } from '../tools/librarian';
 import { createPlannerTools } from '../tools/planner';
 import { createSecretaryTools } from '../tools/secretary';
+import { createUtilityTools } from '../tools/utility';
 
 
 /**
@@ -24,6 +25,7 @@ export function createToolsets(ai: CletusAI) {
   const artistTools = createArtistTools(ai);
   const internetTools = createInternetTools(ai);
   const dbaTools = createDBATools(ai);
+  const utilityTools = createUtilityTools(ai);
 
   return {
     plannerTools,
@@ -34,6 +36,7 @@ export function createToolsets(ai: CletusAI) {
     artistTools,
     internetTools,
     dbaTools,
+    utilityTools,
   };
 }
 
diff --git a/packages/cletus/src/ai.ts b/packages/cletus/src/ai.ts
index fcccd79..b8ce3ac 100644
--- a/packages/cletus/src/ai.ts
+++ b/packages/cletus/src/ai.ts
@@ -1,4 +1,4 @@
-import { AI, ContextInfer } from '@aeye/ai';
+import { AI, ContextInfer, ToolInfer } from '@aeye/ai';
 import { models, replicateTransformers } from '@aeye/models';
 import { OpenAIProvider } from '@aeye/openai';
 import { OpenRouterProvider } from '@aeye/openrouter';
@@ -13,7 +13,7 @@ import { ChatMeta, Message, TypeDefinition } from './schemas';
 import { RetryContext, RetryEvents } from 'packages/openai/src/retry';
 import z from 'zod';
 import { loadPromptFiles } from './prompt-loader';
-import { Usage, accumulateUsage, toJSONSchema } from '@aeye/core';
+import { ToolCompatible, Usage, accumulateUsage, toJSONSchema } from '@aeye/core';
 
 /**
  * Cletus AI Context
@@ -27,6 +27,7 @@ export interface CletusContext {
   chatMessage?: Message;
   cwd: string;
   cache: Record<string, any>;
+  persistentTools?: Set<string>;
   log: (msg: any) => void;
   chatStatus: (status: string) => void;
   chatInterrupt?: () => void;
@@ -44,11 +45,12 @@ export interface CletusContext {
  * Cletus AI Metadata
  */
 export interface CletusMetadata {
-  // Model selection metadata can go here
   /** Whether this tool should always be visible/available regardless of toolset or adaptive selection */
   alwaysVisible?: boolean;
   /** Whether this tool should be included in the default tool selection when no user messages exist yet */
   defaultVisible?: boolean;
+  /** Whether this tool should be included based on which client is running Cletus */
+  onlyClient?: 'browser' | 'cli';
 }
 
 /**
@@ -277,15 +279,9 @@ export function createCletusAI(configFile: ConfigFile) {
   return ai;
 }
 
-export function createCletusTypeAI(ai: CletusAI) {
-  return ai.extend<{ type: TypeDefinition }>();
-}
-
 export type CletusAI = ReturnType<typeof createCletusAI>;
 export type CletusAIContext = ContextInfer<CletusAI>;
-
-export type CletusTypeAI = ReturnType<typeof createCletusTypeAI>;
-export type CletusTypeAIContext = ContextInfer<CletusTypeAI>;
+export type CletusTool = ToolInfer<CletusAI>;
 
 // Global tool properties - useful for debugging
 export const globalToolProperties = {
diff --git a/packages/cletus/src/browser/WebSocketContext.tsx b/packages/cletus/src/browser/WebSocketContext.tsx
new file mode 100644
index 0000000..0002b3e
--- /dev/null
+++ b/packages/cletus/src/browser/WebSocketContext.tsx
@@ -0,0 +1,59 @@
+import React, { createContext, useContext, useEffect, useState, useRef } from 'react';
+import { createTypedWebSocket, TypedWebSocket } from './websocket-types';
+
+interface WebSocketContextType {
+  ws: TypedWebSocket | null;
+  isConnected: boolean;
+}
+
+const WebSocketContext = createContext<WebSocketContextType | undefined>(undefined);
+
+export const useWebSocket = () => {
+  const context = useContext(WebSocketContext);
+  if (context === undefined) {
+    throw new Error('useWebSocket must be used within a WebSocketProvider');
+  }
+  return context;
+};
+
+interface WebSocketProviderProps {
+  children: React.ReactNode;
+}
+
+export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ children }) => {
+  const [ws, setWs] = useState<TypedWebSocket | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+
+  useEffect(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const url = `${protocol}//${window.location.host}`;
+
+    console.log('[WebSocketContext] Connecting to:', url);
+    const websocket = createTypedWebSocket(url);
+    setWs(websocket);
+
+    // Wait for connection to open
+    const checkConnection = setInterval(() => {
+      if (websocket.isOpen()) {
+        console.log('[WebSocketContext] Connected');
+        setIsConnected(true);
+        clearInterval(checkConnection);
+      }
+    }, 100);
+
+    // Cleanup on unmount
+    return () => {
+      clearInterval(checkConnection);
+      console.log('[WebSocketContext] Closing connection');
+      websocket.close();
+      setWs(null);
+      setIsConnected(false);
+    };
+  }, []);
+
+  return (
+    <WebSocketContext.Provider value={{ ws, isConnected }}>
+      {children}
+    </WebSocketContext.Provider>
+  );
+};
diff --git a/packages/cletus/src/browser/app.tsx b/packages/cletus/src/browser/app.tsx
new file mode 100644
index 0000000..a438831
--- /dev/null
+++ b/packages/cletus/src/browser/app.tsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MainPage } from './pages/MainPage';
+import { InitPage } from './pages/InitPage';
+import { WebSocketProvider, useWebSocket } from './WebSocketContext';
+import type { Config } from '../schemas';
+
+type AppView = 'loading' | 'init' | 'main';
+
+const AppContent: React.FC = () => {
+  const [view, setView] = useState<AppView>('loading');
+  const [config, setConfig] = useState<Config | null>(null);
+  const { ws, isConnected } = useWebSocket();
+
+  // Handle browser back/forward buttons
+  useEffect(() => {
+    const handlePopState = () => {
+      // Unified layout handles routing internally
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  // Request config when WebSocket connects
+  useEffect(() => {
+    if (!isConnected || !ws) return;
+
+    console.log('[App] WebSocket connected, requesting config');
+    ws.send({ type: 'get_config' });
+
+    // Listen for config-related messages
+    const unsubscribe = ws.onMessage((message) => {
+      switch (message.type) {
+        case 'config':
+          console.log('[App] Received config');
+          setConfig(message.data);
+          setView('main');
+          break;
+
+        case 'config_not_found':
+          console.log('[App] Config not found, showing init page');
+          setView('init');
+          break;
+
+        case 'error':
+          console.error('[App] WebSocket error:', message.data.message);
+          break;
+      }
+    });
+
+    return unsubscribe;
+  }, [isConnected, ws]);
+
+  const reloadConfig = async () => {
+    if (ws && isConnected) {
+      ws.send({ type: 'get_config' });
+    }
+  };
+
+  if (view === 'loading') {
+    return (
+      <div className="flex h-screen items-center justify-center flex-col gap-4">
+        <div className="spinner"></div>
+        <p className="neon-text-cyan">Loading...</p>
+      </div>
+    );
+  }
+
+  if (view === 'init') {
+    return (
+      <InitPage
+        onComplete={() => {
+          reloadConfig();
+        }}
+      />
+    );
+  }
+
+  if (view === 'main' && config) {
+    return (
+      <MainPage
+        config={config}
+      />
+    );
+  }
+
+  return (
+    <div className="flex h-screen items-center justify-center flex-col gap-4">
+      <div className="spinner"></div>
+      <p className="neon-text-cyan">Loading...</p>
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  return (
+    <WebSocketProvider>
+      <AppContent />
+    </WebSocketProvider>
+  );
+};
+
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Root element not found');
+}
+
+const root = createRoot(container);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/packages/cletus/src/browser/broadcast-manager.ts b/packages/cletus/src/browser/broadcast-manager.ts
new file mode 100644
index 0000000..e6a4ded
--- /dev/null
+++ b/packages/cletus/src/browser/broadcast-manager.ts
@@ -0,0 +1,120 @@
+import type { WebSocket } from 'ws';
+import type { ServerMessage } from './websocket-types';
+import type { OrchestratorEvent } from '../agents/chat-orchestrator';
+import { ConnectionRegistry } from './connection-registry';
+import { ChatOperationManager } from './chat-operation-manager';
+
+/**
+ * Centralized message broadcasting with chat-scoped routing.
+ *
+ * Handles sending messages to specific clients or broadcasting to all clients
+ * watching a particular chat.
+ */
+export class BroadcastManager {
+  constructor(
+    private registry: ConnectionRegistry,
+    private operationManager: ChatOperationManager
+  ) {}
+
+  /**
+   * Broadcast a message to all clients currently subscribed to a specific chat.
+   */
+  broadcastToChat(chatId: string, message: ServerMessage): void {
+    const clients = this.registry.getClientsForChat(chatId);
+    const messageStr = JSON.stringify(message);
+
+    for (const ws of clients) {
+      if (ws.readyState === 1) { // WebSocket.OPEN = 1
+        ws.send(messageStr);
+      }
+    }
+  }
+
+  /**
+   * Send a message to a specific connection.
+   */
+  sendToConnection(connectionId: string, message: ServerMessage): void {
+    const connection = this.registry.getConnection(connectionId);
+    if (!connection) return;
+
+    if (connection.ws.readyState === 1) { // WebSocket.OPEN = 1
+      connection.ws.send(JSON.stringify(message));
+    }
+  }
+
+  /**
+   * Convert an orchestrator event to a server message and broadcast to all
+   * clients watching the chat.
+   */
+  broadcastOperationEvent(chatId: string, event: OrchestratorEvent): void {
+    switch (event.type) {
+      case 'pendingUpdate':
+        // Update operation manager state
+        this.operationManager.updatePendingMessage(chatId, event.pending);
+
+        this.broadcastToChat(chatId, {
+          type: 'pending_update',
+          data: { chatId, pending: event.pending },
+        });
+        break;
+
+      case 'update':
+        this.broadcastToChat(chatId, {
+          type: 'message_updated',
+          data: { chatId, message: event.message },
+        });
+        break;
+
+      case 'status':
+        this.broadcastToChat(chatId, {
+          type: 'status_update',
+          data: { chatId, status: event.status },
+        });
+        break;
+
+      case 'usage':
+        this.broadcastToChat(chatId, {
+          type: 'usage_update',
+          data: {
+            chatId,
+            accumulated: event.accumulated,
+            accumulatedCost: event.accumulatedCost,
+            current: event.current,
+          },
+        });
+        break;
+
+      case 'complete':
+        this.broadcastToChat(chatId, {
+          type: 'response_complete',
+          data: { chatId, message: event.message },
+        });
+        break;
+
+      case 'error':
+        this.broadcastToChat(chatId, {
+          type: 'error',
+          data: { chatId, message: event.error },
+        });
+        break;
+    }
+  }
+
+  /**
+   * Send the current operation state for a chat to a specific connection.
+   * Used when a client subscribes to a chat.
+   */
+  sendOperationState(connectionId: string, chatId: string): void {
+    const state = this.operationManager.getOperationState(chatId);
+
+    this.sendToConnection(connectionId, {
+      type: 'operation_state',
+      data: {
+        chatId,
+        status: state?.status || 'idle',
+        pendingMessage: state?.pendingMessage || null,
+        startTime: state?.startTime || null,
+      },
+    });
+  }
+}
diff --git a/packages/cletus/src/browser/chat-operation-manager.ts b/packages/cletus/src/browser/chat-operation-manager.ts
new file mode 100644
index 0000000..653b586
--- /dev/null
+++ b/packages/cletus/src/browser/chat-operation-manager.ts
@@ -0,0 +1,133 @@
+import type { Message } from '../schemas';
+
+/**
+ * Represents the state of an operation for a specific chat.
+ */
+export interface ChatOperationState {
+  chatId: string;
+  abortController: AbortController;
+  status: 'idle' | 'processing' | 'waiting_approval';
+  startTime: number;
+  lastActivity: number;
+  pendingMessage: Message | null;
+}
+
+/**
+ * Manages per-chat operation state independently of WebSocket connections.
+ *
+ * This allows operations to persist even when clients disconnect, and enables
+ * multiple clients to watch the same chat's operations in real-time.
+ */
+export class ChatOperationManager {
+  private operations: Map<string, ChatOperationState> = new Map();
+  private readonly CLEANUP_TIMEOUT_MS = 60 * 60 * 1000; // 1 hour
+
+  /**
+   * Start a new operation for a chat. Throws if an operation is already in progress.
+   */
+  startOperation(chatId: string): AbortController {
+    const existing = this.operations.get(chatId);
+    if (existing && existing.status === 'processing') {
+      throw new Error(`Chat ${chatId} already has an operation in progress`);
+    }
+
+    const abortController = new AbortController();
+    const state: ChatOperationState = {
+      chatId,
+      abortController,
+      status: 'processing',
+      startTime: Date.now(),
+      lastActivity: Date.now(),
+      pendingMessage: null,
+    };
+
+    this.operations.set(chatId, state);
+    return abortController;
+  }
+
+  /**
+   * Cancel an ongoing operation for a chat. Idempotent - safe to call multiple times.
+   */
+  cancelOperation(chatId: string): void {
+    const state = this.operations.get(chatId);
+    if (!state) return;
+
+    state.abortController.abort();
+    state.status = 'idle';
+    state.lastActivity = Date.now();
+  }
+
+  /**
+   * Mark an operation as complete. Should be called when operation finishes successfully or with error.
+   */
+  completeOperation(chatId: string): void {
+    const state = this.operations.get(chatId);
+    if (!state) return;
+
+    state.status = 'idle';
+    state.lastActivity = Date.now();
+  }
+
+  /**
+   * Update the status of an operation (e.g., to 'waiting_approval').
+   */
+  updateStatus(chatId: string, status: ChatOperationState['status']): void {
+    const state = this.operations.get(chatId);
+    if (!state) return;
+
+    state.status = status;
+    state.lastActivity = Date.now();
+  }
+
+  /**
+   * Update the pending message for an operation.
+   */
+  updatePendingMessage(chatId: string, message: Message | null): void {
+    const state = this.operations.get(chatId);
+    if (!state) return;
+
+    state.pendingMessage = message;
+    state.lastActivity = Date.now();
+  }
+
+  /**
+   * Get the current operation state for a chat. Returns null if no operation exists.
+   */
+  getOperationState(chatId: string): ChatOperationState | null {
+    return this.operations.get(chatId) || null;
+  }
+
+  /**
+   * Get all active chat IDs (any status).
+   */
+  getActiveChatIds(): string[] {
+    return Array.from(this.operations.keys());
+  }
+
+  /**
+   * Clean up old completed operations to prevent memory leaks.
+   * Removes operations that have been idle for longer than CLEANUP_TIMEOUT_MS.
+   */
+  cleanup(): void {
+    const now = Date.now();
+
+    for (const [chatId, state] of this.operations.entries()) {
+      // Only clean up idle operations that have been inactive for a while
+      if (state.status === 'idle' && now - state.lastActivity > this.CLEANUP_TIMEOUT_MS) {
+        this.operations.delete(chatId);
+      }
+    }
+  }
+
+  /**
+   * Abort all active operations. Used for graceful shutdown.
+   */
+  abortAll(): void {
+    for (const [chatId, state] of this.operations.entries()) {
+      if (state.status !== 'idle') {
+        state.abortController.abort();
+        state.status = 'idle';
+      }
+    }
+  }
+}
diff --git a/packages/cletus/src/browser/components/AgentModeSelector.tsx b/packages/cletus/src/browser/components/AgentModeSelector.tsx
new file mode 100644
index 0000000..bc7eec8
--- /dev/null
+++ b/packages/cletus/src/browser/components/AgentModeSelector.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { AgentMode } from '../../schemas';
+import { cn } from '../lib/utils';
+
+interface AgentModeSelectorProps {
+  agentMode: AgentMode;
+  onChange: (agentMode: AgentMode) => void;
+  disabled?: boolean;
+}
+
+export const AgentModeSelector: React.FC<AgentModeSelectorProps> = ({ agentMode, onChange, disabled }) => {
+  const currentMode = agentMode || 'default';
+
+  return (
+    <div className="flex items-center gap-1 rounded-md border border-border bg-muted/30 p-1">
+      <button
+        onClick={() => onChange('default')}
+        disabled={disabled}
+        className={cn(
+          'px-3 py-1 text-sm rounded transition-colors',
+          currentMode === 'default'
+            ? 'bg-neon-cyan/20 text-neon-cyan border border-neon-cyan'
+            : 'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+          disabled && 'opacity-50 cursor-not-allowed'
+        )}
+        title="Run Mode - All toolsets available"
+      >
+        Run
+      </button>
+      <button
+        onClick={() => onChange('plan')}
+        disabled={disabled}
+        className={cn(
+          'px-3 py-1 text-sm rounded transition-colors',
+          currentMode === 'plan'
+            ? 'bg-neon-cyan/20 text-neon-cyan border border-neon-cyan'
+            : 'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+          disabled && 'opacity-50 cursor-not-allowed'
+        )}
+        title="Plan Mode - Only planning related tools"
+      >
+        Plan
+      </button>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/AssistantSelector.tsx b/packages/cletus/src/browser/components/AssistantSelector.tsx
new file mode 100644
index 0000000..7412c40
--- /dev/null
+++ b/packages/cletus/src/browser/components/AssistantSelector.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Bot } from 'lucide-react';
+import { Select, SelectOption } from './ui/select';
+
+interface AssistantSelectorProps {
+  assistants: Array<{ name: string; prompt: string; created: number }>;
+  currentAssistant?: string;
+  onChange: (assistant: string) => void;
+}
+
+export const AssistantSelector: React.FC<AssistantSelectorProps> = ({
+  assistants,
+  currentAssistant,
+  onChange,
+}) => {
+  const options: SelectOption[] = [
+    { value: 'none', label: 'No assistant' },
+    ...assistants.map((assistant) => ({
+      value: assistant.name,
+      label: assistant.name,
+    })),
+  ];
+
+  return (
+    <div className="flex items-center gap-2">
+      <Bot className="w-4 h-4 text-muted-foreground" />
+      <Select
+        value={currentAssistant || 'none'}
+        options={options}
+        onChange={onChange}
+        placeholder="No assistant"
+        className="w-[180px]"
+      />
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ChatInput.tsx b/packages/cletus/src/browser/components/ChatInput.tsx
new file mode 100644
index 0000000..d043046
--- /dev/null
+++ b/packages/cletus/src/browser/components/ChatInput.tsx
@@ -0,0 +1,217 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Send, Loader2, X, CheckCircle2, XCircle, StopCircle } from 'lucide-react';
+import { Button } from './ui/button';
+import { Textarea } from './ui/textarea';
+import type { ChatMeta, MessageContent, Config } from '../../schemas';
+import type { ClientMessage, ServerMessage } from '../websocket-types';
+import { sendClientMessage } from '../websocket-types';
+
+interface ChatInputProps {
+  chatId: string;
+  chatMeta: ChatMeta;
+  config: Config;
+  messageCount: number;
+  totalCost: number;
+  status: string;
+  isProcessing: boolean;
+  onSendMessage: (content: MessageContent[]) => void;
+  onCancel: () => void;
+  onModelClick?: () => void;
+  hasMultiplePendingOperations?: boolean;
+  allOperationsDecided?: boolean;
+  hasOperationsProcessing?: boolean;
+  onApproveAll?: () => void;
+  onRejectAll?: () => void;
+  onSubmitDecisions?: () => void;
+}
+
+export const ChatInput: React.FC<ChatInputProps> = ({
+  chatId,
+  chatMeta,
+  config,
+  messageCount,
+  totalCost,
+  status,
+  isProcessing,
+  onSendMessage,
+  onCancel,
+  onModelClick,
+  hasMultiplePendingOperations = false,
+  allOperationsDecided = false,
+  hasOperationsProcessing = false,
+  onApproveAll,
+  onRejectAll,
+  onSubmitDecisions,
+}) => {
+  const [input, setInput] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize textarea as content changes
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${Math.min(textarea.scrollHeight, window.innerHeight * 0.5)}px`;
+    }
+  }, [input]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!input.trim() || isProcessing) {
+      return;
+    }
+
+    // Send message with proper MessageContent[] format
+    const content: MessageContent[] = [{
+      type: 'text',
+      content: input.trim(),
+    }];
+
+    onSendMessage(content);
+    setInput('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <div className="p-4">
+      {status && (
+        <div className="mb-3 flex items-center gap-2 text-sm text-neon-cyan animate-pulse">
+          <Loader2 className="w-4 h-4 animate-spin" />
+          <span>{status}</span>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-3">
+        <Textarea
+          ref={textareaRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            isProcessing
+              ? 'Processing...'
+              : 'Type your message... (Enter to send, Shift+Enter for new line)'
+          }
+          disabled={isProcessing}
+          className="min-h-[100px] max-h-[50vh] resize-none overflow-y-auto"
+          style={{ height: 'auto' }}
+        />
+        <div className="flex items-center justify-between">
+          <div className="text-xs flex items-center gap-2 flex-wrap flex-1">
+            <span
+              className="text-foreground cursor-pointer hover:text-neon-cyan transition-colors"
+              onClick={onModelClick}
+              title="Click to change model"
+            >
+              {chatMeta.model || config.user.models?.chat || 'no model'}
+            </span>
+            <span className="text-muted-foreground">│</span>
+            <span className="text-muted-foreground">{chatMeta.toolset ? `${chatMeta.toolset} toolset` : 'adaptive tools'}</span>
+            <span className="text-muted-foreground">│</span>
+            <span className="text-muted-foreground">{messageCount} message{messageCount !== 1 ? 's' : ''}</span>
+            <span className="text-muted-foreground">│</span>
+            <span className="text-muted-foreground">{chatMeta.todos.length ? `${chatMeta.todos.length} todo${chatMeta.todos.length !== 1 ? 's' : ''}` : 'no todos'}</span>
+            {totalCost > 0 && (
+              <>
+                <span className="text-muted-foreground">│</span>
+                <span className="text-yellow-400">${totalCost.toFixed(4)}</span>
+              </>
+            )}
+          </div>
+          <div className="flex items-center gap-2 ml-2">
+            {/* Operation Approval Buttons */}
+            {hasMultiplePendingOperations && onApproveAll && onRejectAll && onSubmitDecisions && (
+              <>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={onApproveAll}
+                  disabled={hasOperationsProcessing}
+                  className="text-green-400 border-green-400/30 hover:bg-green-400/10 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {hasOperationsProcessing ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-1 animate-spin" />
+                      Processing...
+                    </>
+                  ) : (
+                    <>
+                      <CheckCircle2 className="w-4 h-4 mr-1" />
+                      Approve All
+                    </>
+                  )}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={onRejectAll}
+                  disabled={hasOperationsProcessing}
+                  className="text-red-400 border-red-400/30 hover:bg-red-400/10 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <XCircle className="w-4 h-4 mr-1" />
+                  Reject All
+                </Button>
+                <Button
+                  type="button"
+                  variant="neon"
+                  size="sm"
+                  onClick={onSubmitDecisions}
+                  disabled={!allOperationsDecided || hasOperationsProcessing}
+                  className="disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {hasOperationsProcessing ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-1 animate-spin" />
+                      Processing...
+                    </>
+                  ) : (
+                    'Submit'
+                  )}
+                </Button>
+              </>
+            )}
+
+            {isProcessing && (
+              <Button
+                type="button"
+                variant="destructive"
+                size="icon"
+                onClick={onCancel}
+                title="Stop"
+              >
+                <StopCircle className="w-5 h-5" />
+              </Button>
+            )}
+            <Button
+              type="submit"
+              variant="neon"
+              disabled={!input.trim() || isProcessing}
+              className="gap-2"
+            >
+              {isProcessing ? (
+                <>
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  Processing
+                </>
+              ) : (
+                <>
+                  <Send className="w-4 h-4" />
+                  Send
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ChatSettingsDialog.tsx b/packages/cletus/src/browser/components/ChatSettingsDialog.tsx
new file mode 100644
index 0000000..f91e304
--- /dev/null
+++ b/packages/cletus/src/browser/components/ChatSettingsDialog.tsx
@@ -0,0 +1,164 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Save, Settings, FolderOpen } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Textarea } from './ui/textarea';
+import { ScrollArea } from './ui/scroll-area';
+
+interface ChatSettingsDialogProps {
+  title: string;
+  prompt?: string;
+  cwd?: string;
+  onSave: (updates: { title?: string; prompt?: string; cwd?: string }) => void;
+  onClose: () => void;
+}
+
+export const ChatSettingsDialog: React.FC<ChatSettingsDialogProps> = ({
+  title: initialTitle,
+  prompt: initialPrompt,
+  cwd: initialCwd,
+  onSave,
+  onClose,
+}) => {
+  const [title, setTitle] = useState(initialTitle);
+  const [prompt, setPrompt] = useState(initialPrompt || '');
+  const [cwd, setCwd] = useState(initialCwd || '');
+
+  // Handle ESC key to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  const handleSave = () => {
+    const updates: { title?: string; prompt?: string; cwd?: string } = {};
+
+    if (title !== initialTitle) {
+      updates.title = title;
+    }
+    if (prompt !== initialPrompt) {
+      updates.prompt = prompt || undefined;
+    }
+    if (cwd !== initialCwd) {
+      updates.cwd = cwd || undefined;
+    }
+
+    if (Object.keys(updates).length > 0) {
+      onSave(updates);
+    }
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-2xl max-h-[80vh] bg-card rounded-lg border border-border shadow-2xl flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <div className="flex items-center gap-3">
+            <Settings className="w-6 h-6 text-neon-cyan" />
+            <h2 className="text-2xl font-bold neon-text-cyan">Chat Settings</h2>
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="w-5 h-5" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        <ScrollArea className="flex-1 p-6">
+          <div className="space-y-6">
+            {/* Title */}
+            <div>
+              <label className="block text-sm font-medium text-foreground mb-2">
+                Chat Title
+              </label>
+              <Input
+                type="text"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Enter chat title"
+                className="w-full"
+              />
+            </div>
+
+            {/* Custom Prompt */}
+            <div>
+              <label className="block text-sm font-medium text-foreground mb-2">
+                Custom Prompt
+              </label>
+              <Textarea
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder="Enter custom prompt (optional)"
+                className="min-h-[120px] resize-none"
+              />
+              <p className="text-xs text-muted-foreground mt-2">
+                Override the default system prompt for this chat
+              </p>
+            </div>
+
+            {/* Working Directory */}
+            <div>
+              <label className="block text-sm font-medium text-foreground mb-2">
+                Working Directory
+              </label>
+              <div className="flex items-center gap-2">
+                <Input
+                  type="text"
+                  value={cwd}
+                  onChange={(e) => setCwd(e.target.value)}
+                  placeholder="Enter working directory path (optional)"
+                  className="flex-1 font-mono text-sm"
+                />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => {
+                    const input = document.createElement('input');
+                    input.type = 'file';
+                    input.webkitdirectory = true;
+                    input.onchange = (e: any) => {
+                      const files = e.target.files;
+                      if (files && files.length > 0) {
+                        const path = files[0].path || files[0].webkitRelativePath.split('/')[0];
+                        setCwd(path);
+                      }
+                    };
+                    input.click();
+                  }}
+                  title="Select folder"
+                >
+                  <FolderOpen className="w-4 h-4" />
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground mt-2">
+                Set the current working directory for file operations
+              </p>
+            </div>
+          </div>
+        </ScrollArea>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 p-6 border-t border-border">
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="neon" onClick={handleSave} className="gap-2">
+            <Save className="w-4 h-4" />
+            Save Changes
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ChatSidebar.tsx b/packages/cletus/src/browser/components/ChatSidebar.tsx
new file mode 100644
index 0000000..b546734
--- /dev/null
+++ b/packages/cletus/src/browser/components/ChatSidebar.tsx
@@ -0,0 +1,176 @@
+import { ChevronLeft, ChevronRight, Clock, MessageSquare, Plus, Sparkles, User } from 'lucide-react';
+import React from 'react';
+import type { Config } from '../../schemas';
+import { Button } from './ui/button';
+import { ScrollArea } from './ui/scroll-area';
+
+interface ChatSidebarProps {
+  config: Config;
+  currentChatId: string | null;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+  onChatSelect: (chatId: string) => void;
+  onProfileClick: () => void;
+  onCreateChat?: () => void;
+  isCreatingChat?: boolean;
+}
+
+export const ChatSidebar: React.FC<ChatSidebarProps> = ({
+  config,
+  currentChatId,
+  isCollapsed,
+  onToggleCollapse,
+  onChatSelect,
+  onProfileClick,
+  onCreateChat,
+  isCreatingChat = false,
+}) => {
+  const chats = config.chats;
+  const sortedChats = [...chats].sort((a, b) => b.updated - a.updated);
+
+  const handleCreateChat = () => {
+    if (onCreateChat) {
+      onCreateChat();
+    }
+  };
+
+  const formatDate = (timestamp: number) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);
+
+    if (diffInHours < 24) {
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } else if (diffInHours < 24 * 7) {
+      return date.toLocaleDateString([], { weekday: 'short', hour: '2-digit', minute: '2-digit' });
+    } else {
+      return date.toLocaleDateString();
+    }
+  };
+
+  if (isCollapsed) {
+    return (
+      <div className="w-16 border-r border-border bg-card/50 backdrop-blur-sm flex flex-col items-center py-4 gap-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onToggleCollapse}
+          title="Expand sidebar"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleCreateChat}
+          title="New Chat"
+          disabled={isCreatingChat}
+        >
+          <Plus className="w-5 h-5" />
+        </Button>
+        <div className="flex-1" />
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onProfileClick}
+          title="Profile"
+        >
+          <User className="w-5 h-5" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-80 border-r border-border bg-card/50 backdrop-blur-sm flex flex-col">
+      {/* Header */}
+      <div className="p-4 border-b border-border flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Sparkles className="w-6 h-6 text-neon-cyan" />
+          <h2 className="text-lg font-bold neon-text-purple">Cletus</h2>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onProfileClick}
+            title="Profile"
+          >
+            <User className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onToggleCollapse}
+            title="Collapse sidebar"
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* New Chat Button */}
+      <div className="p-4 border-b border-border">
+        <Button
+          variant="neon"
+          className="w-full gap-2"
+          onClick={handleCreateChat}
+          disabled={isCreatingChat}
+        >
+          <Plus className="w-4 h-4" />
+          {isCreatingChat ? 'Creating...' : 'New Chat'}
+        </Button>
+      </div>
+
+      {/* Chat List */}
+      <ScrollArea className="flex-1">
+        <div className="p-2 space-y-2">
+          {sortedChats.map((chat) => (
+            <button
+              key={chat.id}
+              onClick={() => onChatSelect(chat.id)}
+              className={`w-full text-left p-3 rounded-lg transition-all hover:bg-card/80 border ${
+                currentChatId === chat.id
+                  ? 'bg-card border-neon-cyan/50 shadow-lg'
+                  : 'bg-card/50 border-transparent'
+              }`}
+            >
+              <div className="flex items-start gap-2 mb-2">
+                <MessageSquare className={`w-4 h-4 mt-0.5 flex-shrink-0 ${
+                  currentChatId === chat.id ? 'text-neon-cyan' : 'text-neon-purple'
+                }`} />
+                <div className="flex-1 min-w-0">
+                  <div className={`font-medium text-sm truncate ${
+                    currentChatId === chat.id ? 'neon-text-cyan' : 'text-foreground'
+                  }`}>
+                    {chat.title}
+                  </div>
+                </div>
+                <span className="text-xs px-1.5 py-0.5 rounded bg-neon-purple/20 text-neon-purple border border-neon-purple/50 flex-shrink-0">
+                  {chat.mode}
+                </span>
+              </div>
+              <div className="flex items-center gap-1 text-xs text-muted-foreground pl-6">
+                <Clock className="w-3 h-3" />
+                <span>{formatDate(chat.updated)}</span>
+              </div>
+            </button>
+          ))}
+          {sortedChats.length === 0 && (
+            <div className="text-center text-muted-foreground p-8">
+              <MessageSquare className="w-12 h-12 mx-auto mb-2 opacity-50" />
+              <p className="text-sm">No chats yet</p>
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+
+      {/* User Info Footer */}
+      <div className="p-4 border-t border-border">
+        <div className="text-xs text-muted-foreground">
+          <span className="text-neon-cyan font-semibold">{config.user.name}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ImageViewer.tsx b/packages/cletus/src/browser/components/ImageViewer.tsx
new file mode 100644
index 0000000..8dcd7af
--- /dev/null
+++ b/packages/cletus/src/browser/components/ImageViewer.tsx
@@ -0,0 +1,204 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Download, ZoomIn, ZoomOut, Maximize2 } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface ImageViewerProps {
+  src: string;
+  alt?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ImageViewer: React.FC<ImageViewerProps> = ({ src, alt, isOpen, onClose }) => {
+  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  // Reset state when opening
+  useEffect(() => {
+    if (isOpen) {
+      setScale(1);
+      setPosition({ x: 0, y: 0 });
+      setIsDragging(false);
+    }
+  }, [isOpen]);
+
+  // Handle escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  // Handle wheel zoom
+  const handleWheel = (e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.1 : 0.1;
+    setScale((prev) => Math.max(0.5, Math.min(5, prev + delta)));
+  };
+
+  // Handle mouse drag
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (scale > 1) {
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+    }
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (isDragging) {
+      setPosition({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  // Zoom controls
+  const zoomIn = () => setScale((prev) => Math.min(5, prev + 0.25));
+  const zoomOut = () => setScale((prev) => Math.max(0.5, prev - 0.25));
+  const resetZoom = () => {
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+  };
+
+  // Download image
+  const downloadImage = async () => {
+    try {
+      const response = await fetch(src);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      // Extract filename from src or use default
+      const filename = src.split('/').pop() || 'image.png';
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Failed to download image:', error);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          onClose();
+        }
+      }}
+    >
+      {/* Controls */}
+      <div className="absolute top-4 right-4 flex gap-2 z-10">
+        <button
+          onClick={zoomOut}
+          className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+          title="Zoom Out"
+        >
+          <ZoomOut className="w-5 h-5 text-white" />
+        </button>
+        <button
+          onClick={zoomIn}
+          className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+          title="Zoom In"
+        >
+          <ZoomIn className="w-5 h-5 text-white" />
+        </button>
+        <button
+          onClick={resetZoom}
+          className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+          title="Reset Zoom"
+        >
+          <Maximize2 className="w-5 h-5 text-white" />
+        </button>
+        <button
+          onClick={downloadImage}
+          className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+          title="Download"
+        >
+          <Download className="w-5 h-5 text-white" />
+        </button>
+        <button
+          onClick={onClose}
+          className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+          title="Close (ESC)"
+        >
+          <X className="w-5 h-5 text-white" />
+        </button>
+      </div>
+
+      {/* Zoom indicator */}
+      <div className="absolute top-4 left-4 px-3 py-1 bg-white/10 rounded-lg text-white text-sm">
+        {Math.round(scale * 100)}%
+      </div>
+
+      {/* Image */}
+      <div
+        className={cn(
+          'relative max-w-[90vw] max-h-[90vh] overflow-hidden',
+          isDragging ? 'cursor-grabbing' : scale > 1 ? 'cursor-grab' : 'cursor-default'
+        )}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      >
+        <img
+          ref={imageRef}
+          src={src}
+          alt={alt}
+          className="select-none pointer-events-none"
+          style={{
+            transform: `scale(${scale}) translate(${position.x / scale}px, ${position.y / scale}px)`,
+            transition: isDragging ? 'none' : 'transform 0.2s ease-out',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            objectFit: 'contain',
+          }}
+          draggable={false}
+        />
+      </div>
+
+      {/* Instructions */}
+      <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-white/10 rounded-lg text-white text-xs text-center">
+        Scroll to zoom • Drag to pan • ESC or click outside to close
+      </div>
+    </div>
+  );
+};
+
+interface ClickableImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  alt?: string;
+  className?: string;
+}
+
+export const ClickableImage: React.FC<ClickableImageProps> = ({ src, alt, className, ...props }) => {
+  const [isViewerOpen, setIsViewerOpen] = useState(false);
+
+  return (
+    <>
+      <img
+        src={src}
+        alt={alt}
+        className={cn('cursor-pointer hover:opacity-90 transition-opacity', className)}
+        onClick={() => setIsViewerOpen(true)}
+        {...props}
+      />
+      <ImageViewer src={src} alt={alt} isOpen={isViewerOpen} onClose={() => setIsViewerOpen(false)} />
+    </>
+  );
+};
diff --git a/packages/cletus/src/browser/components/MessageItem.tsx b/packages/cletus/src/browser/components/MessageItem.tsx
new file mode 100644
index 0000000..904f73b
--- /dev/null
+++ b/packages/cletus/src/browser/components/MessageItem.tsx
@@ -0,0 +1,172 @@
+import React from 'react';
+import { User, Bot, Info } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { OperationDisplay } from '../operations';
+import { TypingIndicator } from './TypingIndicator';
+import { cn } from '../lib/utils';
+import { ClickableImage } from './ImageViewer';
+import type { Message } from '../../schemas';
+
+interface MessageItemProps {
+  message: Message;
+  operationDecisions?: Map<number, 'approve' | 'reject'>;
+  onToggleOperationDecision?: (idx: number, decision: 'approve' | 'reject') => void;
+  onApproveOperation: (message: Message, idx: number) => void;
+  onRejectOperation: (message: Message, idx: number) => void;
+  hasMultiplePendingOps?: boolean;
+}
+
+export const MessageItem: React.FC<MessageItemProps> = ({
+  message,
+  operationDecisions,
+  onToggleOperationDecision,
+  onApproveOperation,
+  onRejectOperation,
+  hasMultiplePendingOps = false,
+}) => {
+  const { role, name, content, operations = [] } = message;
+
+  const isUser = role === 'user';
+  const isAssistant = role === 'assistant';
+  const isSystem = role === 'system';
+
+  // Map content items to their operations
+  const mappedContent = content.map((c) => ({
+    ...c,
+    operation: c.operationIndex !== undefined ? operations[c.operationIndex] : undefined,
+  }));
+
+  // Filter content: show text without operationIndex, and operations
+  const visibleContent = mappedContent.filter(
+    (c) => (c.operationIndex === undefined && c.content.trim().length > 0 && c.type === 'text') || c.operation
+  );
+
+  return (
+    <div
+      className={cn(
+        'flex gap-4 mb-6 group',
+        isUser && 'flex-row-reverse'
+      )}
+    >
+      {/* Avatar */}
+      <div
+        className={cn(
+          'flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center',
+          isUser && 'bg-neon-purple/20 border-2 border-neon-purple',
+          isAssistant && 'bg-neon-cyan/20 border-2 border-neon-cyan',
+          isSystem && 'bg-muted border-2 border-border'
+        )}
+      >
+        {isUser && <User className="w-5 h-5 text-neon-purple" />}
+        {isAssistant && <Bot className="w-5 h-5 text-neon-cyan" />}
+        {isSystem && <Info className="w-5 h-5 text-muted-foreground" />}
+      </div>
+
+      {/* Content */}
+      <div className={cn('flex-1 space-y-2', isUser && 'flex flex-col items-end')}>
+        {/* Header */}
+        <div
+          className={cn(
+            'text-xs font-semibold opacity-70',
+            isUser && 'text-neon-purple',
+            isAssistant && 'text-neon-cyan',
+            isSystem && 'text-muted-foreground'
+          )}
+        >
+          {isUser ? (name || 'You') : isAssistant ? (name || 'Assistant') : 'System'}
+        </div>
+
+        {/* Content and Operations in order */}
+        <div className={cn('flex-1 space-y-2', isUser && 'flex flex-col items-end')}>
+          {visibleContent.length === 0 && isAssistant ? (
+            <div className="rounded-lg bg-card p-2">
+              <TypingIndicator />
+            </div>
+          ) : (
+            visibleContent.map((item, index) => {
+            // Render operation if this content item has an operation
+            if (item.operation && item.operationIndex !== undefined) {
+              const opIdx = item.operationIndex;
+
+              return (
+                <OperationDisplay
+                  key={index}
+                  operation={item.operation}
+                  operationIndex={opIdx}
+                  approvalDecision={operationDecisions?.get(opIdx)}
+                  onToggleDecision={onToggleOperationDecision}
+                  onApprove={() => onApproveOperation(message, opIdx)}
+                  onReject={() => onRejectOperation(message, opIdx)}
+                  hasMultipleOperations={hasMultiplePendingOps}
+                />
+              );
+            }
+
+            // Render text content
+            return (
+              <div
+                key={index}
+                className={cn(
+                  'rounded-lg p-4 max-w-3xl',
+                  'prose prose-invert prose-sm max-w-none',
+                  'prose-p:text-foreground prose-headings:text-foreground',
+                  'prose-strong:text-foreground prose-code:text-foreground',
+                  'prose-pre:bg-muted prose-pre:text-foreground',
+                  'prose-a:text-neon-cyan prose-a:no-underline hover:prose-a:underline',
+                  'prose-li:text-foreground prose-ul:text-foreground prose-ol:text-foreground',
+                  'text-foreground',
+                  isUser && 'bg-neon-purple/10 border border-neon-purple/30',
+                  isAssistant && 'bg-card',
+                  isSystem && 'bg-muted/50 border border-muted italic'
+                )}
+              >
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  components={{
+                    p: ({ children }) => <p className="text-foreground mb-2">{children}</p>,
+                    ul: ({ children }) => <ul className="text-foreground list-disc ml-6 mb-2 space-y-1">{children}</ul>,
+                    ol: ({ children }) => <ol className="text-foreground list-decimal ml-6 mb-2 space-y-1">{children}</ol>,
+                    li: ({ children }) => <li className="text-foreground ml-2">{children}</li>,
+                    code: ({ inline, children, ...props }: any) => {
+                      return inline ? (
+                        <code className="text-foreground bg-muted px-1 py-0.5 rounded" {...props}>
+                          {children}
+                        </code>
+                      ) : (
+                        <code className="text-foreground" {...props}>
+                          {children}
+                        </code>
+                      );
+                    },
+                    pre: ({ children }) => <pre className="text-foreground bg-muted p-3 rounded mb-2 overflow-x-auto">{children}</pre>,
+                    a: ({ href, children }) => (
+                      <a href={href} className="text-neon-cyan hover:underline" target="_blank" rel="noopener noreferrer">
+                        {children}
+                      </a>
+                    ),
+                    img: ({ src, alt, ...props }: any) => {
+                      // Transform local file paths to use the /file route
+                      const imageSrc = src && !src.startsWith('http://') && !src.startsWith('https://') && !src.startsWith('data:')
+                        ? `/file?path=${encodeURIComponent(src)}`
+                        : src;
+                      return <ClickableImage src={imageSrc} alt={alt} className="max-w-full rounded" {...props} />;
+                    },
+                  }}
+                >
+                  {item.content}
+                </ReactMarkdown>
+              </div>
+            );
+            })
+          )}
+        </div>
+
+        {/* Timestamp */}
+        <div className="text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity">
+          {new Date(message.created).toLocaleString()}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/MessageList.tsx b/packages/cletus/src/browser/components/MessageList.tsx
new file mode 100644
index 0000000..28eeb2a
--- /dev/null
+++ b/packages/cletus/src/browser/components/MessageList.tsx
@@ -0,0 +1,68 @@
+import React, { useEffect, useRef } from 'react';
+import { Loader2 } from 'lucide-react';
+import { MessageItem } from './MessageItem';
+import type { Message } from '../../schemas';
+
+interface MessageListProps {
+  messages: Message[];
+  loading?: boolean;
+  operationDecisions?: Map<number, 'approve' | 'reject'>;
+  onToggleOperationDecision?: (idx: number, decision: 'approve' | 'reject') => void;
+  onApproveOperation: (message: Message, idx: number) => void;
+  onRejectOperation: (message: Message, idx: number) => void;
+}
+
+export const MessageList: React.FC<MessageListProps> = ({
+  messages,
+  loading = false,
+  operationDecisions,
+  onToggleOperationDecision,
+  onApproveOperation,
+  onRejectOperation,
+}) => {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Scroll to bottom when messages change
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages.length]);
+
+  return (
+    <div className="flex-1 overflow-auto">
+      {messages.length === 0 ? (
+        <div className="text-center text-muted-foreground mt-8">
+          {loading ? (
+            <div className="flex items-center justify-center gap-2">
+              <Loader2 className="w-5 h-5 animate-spin" />
+              <p>Loading messages...</p>
+            </div>
+          ) : (
+            <p>No messages yet. Start a conversation!</p>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {messages.map((message, index) => {
+            // Check if this is the last message with pending operations
+            // const isLastMessage = index === messages.length - 1;
+            // const hasPendingOps = message.operations?.some(op => op.status === 'analyzed');
+            const pendingOpCount = message.operations?.filter(op => op.status === 'analyzed' || op.status === 'doing').length || 0;
+
+            return (
+              <MessageItem
+                key={message.created}
+                message={message}
+                operationDecisions={operationDecisions}
+                onToggleOperationDecision={onToggleOperationDecision}
+                onApproveOperation={onApproveOperation}
+                onRejectOperation={onRejectOperation}
+                hasMultiplePendingOps={pendingOpCount > 1}
+              />
+            );
+          })}
+        </div>
+      )}
+      <div ref={bottomRef} />
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ModeSelector.tsx b/packages/cletus/src/browser/components/ModeSelector.tsx
new file mode 100644
index 0000000..1a1387d
--- /dev/null
+++ b/packages/cletus/src/browser/components/ModeSelector.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Select, SelectOption } from './ui/select';
+import { ChatMode } from '../../schemas';
+
+interface ModeSelectorProps {
+  mode: ChatMode;
+  onChange: (mode: ChatMode) => void;
+  disabled?: boolean;
+}
+
+const MODE_OPTIONS: SelectOption<ChatMode>[] = [
+  {
+    value: 'none',
+    label: 'None',
+    description: 'All AI operations require approval (safest)',
+  },
+  {
+    value: 'read',
+    label: 'Read',
+    description: 'Auto-approve read operations',
+  },
+  {
+    value: 'create',
+    label: 'Create',
+    description: 'Auto-approve read & create operations',
+  },
+  {
+    value: 'update',
+    label: 'Update',
+    description: 'Auto-approve read, create & update operations',
+  },
+  {
+    value: 'delete',
+    label: 'Delete',
+    description: 'Auto-approve all operations (least safe)',
+  },
+];
+
+export const ModeSelector: React.FC<ModeSelectorProps> = ({ mode, onChange, disabled }) => {
+  return (
+    <div className="flex items-center gap-2">
+      <label className="text-sm text-muted-foreground">Mode:</label>
+      <Select
+        value={mode}
+        options={MODE_OPTIONS}
+        onChange={value => onChange(value as ChatMode)}
+        disabled={disabled}
+        className="min-w-[140px]"
+      />
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ModelSelector.tsx b/packages/cletus/src/browser/components/ModelSelector.tsx
new file mode 100644
index 0000000..72e8ae6
--- /dev/null
+++ b/packages/cletus/src/browser/components/ModelSelector.tsx
@@ -0,0 +1,431 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { X, Search } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { ScrollArea } from './ui/scroll-area';
+import { cn } from '../lib/utils';
+
+interface ModelInfo {
+  id: string;
+  name: string;
+  provider: string;
+  contextWindow?: number;
+  maxOutputTokens?: number;
+  tier?: string;
+  capabilities?: Set<string>;
+  supportedParameters?: Set<string>;
+  pricing: {
+    text?: { input?: number; output?: number; cached?: number };
+    audio?: { input?: number; output?: number; perSecond?: number };
+    image?: {
+      input?: number;
+      output?: Array<{
+        quality: string;
+        sizes: Array<{ width: number; height: number; cost: number }>;
+      }>;
+    };
+    embeddings?: { cost?: number };
+    perRequest?: number;
+    reasoning?: { input?: number; output?: number; cached?: number };
+  };
+  metrics?: {
+    tokensPerSecond?: number;
+    timeToFirstToken?: number;
+  };
+}
+
+interface ScoredModel {
+  model: ModelInfo;
+  score: number;
+}
+
+interface ModelSelectorProps {
+  currentModel: string;
+  onSelect: (modelId: string) => void;
+  onClose: () => void;
+  onFetchModels: () => Promise<ScoredModel[]>;
+}
+
+type SortMode = 'score' | 'cost-asc' | 'cost-desc' | 'speed-desc' | 'speed-asc' | 'context-desc' | 'context-asc' | 'capable-desc' | 'capable-asc';
+
+export const ModelSelector: React.FC<ModelSelectorProps> = ({
+  currentModel,
+  onSelect,
+  onClose,
+  onFetchModels,
+}) => {
+  const [models, setModels] = useState<ScoredModel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [sortMode, setSortMode] = useState<SortMode>('score');
+  const fetchIdRef = useRef(0);
+
+  useEffect(() => {
+    const fetchId = ++fetchIdRef.current;
+
+    const fetchModels = async () => {
+      try {
+        setLoading(true);
+        const fetchedModels = await onFetchModels();
+
+        // Only update if this is still the latest fetch
+        if (fetchId === fetchIdRef.current) {
+          setModels(fetchedModels);
+        }
+      } catch (error) {
+        console.error('Failed to fetch models:', error);
+        if (fetchId === fetchIdRef.current) {
+          setModels([]);
+        }
+      } finally {
+        if (fetchId === fetchIdRef.current) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchModels();
+  }, [onFetchModels]);
+
+  // Handle ESC key to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  const getModelCost = (model: ModelInfo): number | null => {
+    let totalCost = 0;
+    let costCount = 0;
+
+    if (model.pricing.text) {
+      const { input, output } = model.pricing.text;
+      if (input !== undefined) { totalCost += input; costCount++; }
+      if (output !== undefined) { totalCost += output; costCount++; }
+    }
+    if (model.pricing.audio) {
+      const { input, output, perSecond } = model.pricing.audio;
+      if (perSecond !== undefined) { totalCost += perSecond * 1000; costCount++; }
+      if (input !== undefined) { totalCost += input; costCount++; }
+      if (output !== undefined) { totalCost += output; costCount++; }
+    }
+    if (model.pricing.reasoning) {
+      const { input, output } = model.pricing.reasoning;
+      if (input !== undefined) { totalCost += input; costCount++; }
+      if (output !== undefined) { totalCost += output; costCount++; }
+    }
+
+    return costCount > 0 ? totalCost / costCount : null;
+  };
+
+  const getModelSpeed = (model: ModelInfo): number | null => {
+    return model.metrics?.tokensPerSecond ?? null;
+  };
+
+  const getModelContext = (model: ModelInfo): number | null => {
+    return model.contextWindow ?? null;
+  };
+
+  const getModelCapable = (model: ModelInfo): number => {
+    return (model.capabilities?.size ?? 0) + (model.supportedParameters?.size ?? 0);
+  };
+
+  // Memoize filtered and sorted models to prevent excessive recalculation
+  const filteredModels = useMemo(() => {
+    // First, deduplicate models by ID
+    const uniqueModels = Array.from(
+      new Map(models.map(scored => [scored.model.id, scored])).values()
+    );
+
+    // Filter by search
+    const filtered = uniqueModels.filter((scored) => {
+      if (!search) return true;
+      const model = scored.model;
+      const searchLower = search.toLowerCase();
+      return (
+        (model.id && model.id.toLowerCase().includes(searchLower)) ||
+        (model.name && model.name.toLowerCase().includes(searchLower)) ||
+        (model.provider && model.provider.toLowerCase().includes(searchLower))
+      );
+    });
+
+    // Sort
+    if (sortMode === 'score') {
+      return filtered; // Keep original order
+    }
+
+    return [...filtered].sort((a, b) => {
+      const modelA = a.model;
+      const modelB = b.model;
+      let valueA: number | null;
+      let valueB: number | null;
+      let descending = true;
+
+      switch (sortMode) {
+        case 'cost-asc':
+          valueA = getModelCost(modelA);
+          valueB = getModelCost(modelB);
+          descending = false;
+          break;
+        case 'cost-desc':
+          valueA = getModelCost(modelA);
+          valueB = getModelCost(modelB);
+          break;
+        case 'speed-desc':
+          valueA = getModelSpeed(modelA);
+          valueB = getModelSpeed(modelB);
+          break;
+        case 'speed-asc':
+          valueA = getModelSpeed(modelA);
+          valueB = getModelSpeed(modelB);
+          descending = false;
+          break;
+        case 'context-desc':
+          valueA = getModelContext(modelA);
+          valueB = getModelContext(modelB);
+          break;
+        case 'context-asc':
+          valueA = getModelContext(modelA);
+          valueB = getModelContext(modelB);
+          descending = false;
+          break;
+        case 'capable-desc':
+          valueA = getModelCapable(modelA);
+          valueB = getModelCapable(modelB);
+          break;
+        case 'capable-asc':
+          valueA = getModelCapable(modelA);
+          valueB = getModelCapable(modelB);
+          descending = false;
+          break;
+        default:
+          return 0;
+      }
+
+      if (valueA === null && valueB === null) return 0;
+      if (valueA === null) return 1;
+      if (valueB === null) return -1;
+
+      return descending ? valueB - valueA : valueA - valueB;
+    });
+  }, [models, search, sortMode]);
+
+  const formatCost = (model: ModelInfo): string => {
+    const costs: string[] = [];
+
+    if (model.pricing.text) {
+      const { input, output } = model.pricing.text;
+      if (input !== undefined && output !== undefined) {
+        costs.push(`$${input.toFixed(2)}/$${output.toFixed(2)}/M`);
+      } else if (input !== undefined) {
+        costs.push(`$${input.toFixed(2)}/M in`);
+      } else if (output !== undefined) {
+        costs.push(`$${output.toFixed(2)}/M out`);
+      }
+    }
+
+    if (model.pricing.audio) {
+      const { input, output, perSecond } = model.pricing.audio;
+      if (perSecond !== undefined) {
+        costs.push(`$${perSecond.toFixed(4)}/s 🎵`);
+      }
+      if (input !== undefined && output !== undefined) {
+        costs.push(`$${input.toFixed(2)}/$${output.toFixed(2)}/M 🎵`);
+      }
+    }
+
+    if (model.pricing.reasoning) {
+      const { input, output, cached } = model.pricing.reasoning;
+      if (input !== undefined && output !== undefined) {
+        costs.push(`$${input.toFixed(2)}/$${output.toFixed(2)}/M 🧠`);
+      }
+      if (cached !== undefined) {
+        costs.push(`$${cached.toFixed(2)}/M cached 🧠`);
+      }
+    }
+
+    if (model.pricing.perRequest) {
+      costs.push(`$${model.pricing.perRequest.toFixed(4)}/req`);
+    }
+
+    return costs.length > 0 ? costs.join(', ') : '-';
+  };
+
+  const formatMetrics = (model: ModelInfo): string => {
+    const parts: string[] = [];
+    if (model.metrics?.tokensPerSecond) {
+      parts.push(`${model.metrics.tokensPerSecond.toFixed(0)} tok/s`);
+    }
+    if (model.metrics?.timeToFirstToken) {
+      parts.push(`${model.metrics.timeToFirstToken.toFixed(0)}ms TTFT`);
+    }
+    return parts.length > 0 ? parts.join(', ') : '-';
+  };
+
+  const sortModes: Array<{ value: SortMode; label: string }> = [
+    { value: 'score', label: 'Score' },
+    { value: 'cost-asc', label: 'Cheapest' },
+    { value: 'cost-desc', label: 'Expensive' },
+    { value: 'speed-desc', label: 'Fastest' },
+    { value: 'speed-asc', label: 'Slowest' },
+    { value: 'context-desc', label: 'Largest Context' },
+    { value: 'context-asc', label: 'Smallest Context' },
+    { value: 'capable-desc', label: 'Most Capable' },
+    { value: 'capable-asc', label: 'Least Capable' },
+  ];
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-6xl max-h-[90vh] bg-card rounded-lg border border-border shadow-2xl flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <div>
+            <h2 className="text-2xl font-bold neon-text-cyan">Select Model</h2>
+            {currentModel && (
+              <p className="text-sm text-muted-foreground mt-1">
+                Current: <span className="text-neon-cyan">{currentModel}</span>
+              </p>
+            )}
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="w-5 h-5" />
+          </Button>
+        </div>
+
+        {/* Search and Sort */}
+        <div className="p-6 border-b border-border space-y-3">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder="Search models by id, name, or provider..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-10 text-foreground"
+              autoFocus
+            />
+          </div>
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-sm text-muted-foreground">Sort by:</span>
+            {sortModes.map(({ value, label }) => (
+              <button
+                key={value}
+                onClick={() => setSortMode(value)}
+                className={cn(
+                  'px-3 py-1 text-xs rounded-md transition-colors',
+                  sortMode === value
+                    ? 'bg-neon-cyan/20 text-neon-cyan border border-neon-cyan/50'
+                    : 'bg-muted text-foreground hover:bg-muted/80',
+                )}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <div className="text-sm text-muted-foreground">
+            Showing {filteredModels.length} model{filteredModels.length !== 1 ? 's' : ''}
+          </div>
+        </div>
+
+        {/* Model List */}
+        <ScrollArea className="flex-1 p-6">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="spinner"></div>
+              <span className="ml-3 text-muted-foreground">Loading models...</span>
+            </div>
+          ) : filteredModels.length === 0 ? (
+            <div className="text-center py-12 text-muted-foreground">
+              <p>No models found matching "{search}"</p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {filteredModels.map((scored, index) => {
+                const model = scored.model;
+                const isSelected = model.id === currentModel;
+                const score = `${(scored.score * 100).toFixed(0)}%`;
+                const context = model.contextWindow ? `${(model.contextWindow / 1000).toFixed(0)}k ctx` : '';
+                const maxOutput = model.maxOutputTokens ? `${(model.maxOutputTokens / 1000).toFixed(0)}k out` : '';
+                const capabilities = model.capabilities ? Array.from(model.capabilities).slice(0, 8).join(' ') : '';
+                const cost = formatCost(model);
+                const metrics = formatMetrics(model);
+
+                return (
+                  <button
+                    key={model.id}
+                    onClick={() => {
+                      onSelect(model.id);
+                      onClose();
+                    }}
+                    className={cn(
+                      'w-full text-left p-4 rounded-lg border transition-all',
+                      isSelected
+                        ? 'border-neon-cyan bg-neon-cyan/10'
+                        : 'border-border bg-card/50 hover:bg-card hover:border-neon-cyan/50',
+                    )}
+                  >
+                    <div className="space-y-2">
+                      {/* Main line: ID, score, provider, context */}
+                      <div className="flex items-start justify-between gap-4">
+                        <div className="flex-1">
+                          <span className={cn(
+                            'font-mono text-sm font-semibold',
+                            isSelected ? 'text-neon-cyan' : 'text-foreground'
+                          )}>
+                            {model.id}
+                          </span>
+                          <span className="text-xs text-muted-foreground ml-2">
+                            [{sortMode === 'score' ? score : `#${index + 1}`}]
+                          </span>
+                        </div>
+                        <div className="text-xs text-muted-foreground text-right">
+                          {model.provider} | {context} {maxOutput && `| ${maxOutput}`}
+                        </div>
+                      </div>
+
+                      {/* Cost line */}
+                      {cost !== '-' && (
+                        <div className="text-xs text-muted-foreground">
+                          <span className="text-foreground/70">Cost:</span> {cost}
+                        </div>
+                      )}
+
+                      {/* Metrics line */}
+                      {metrics !== '-' && (
+                        <div className="text-xs text-muted-foreground">
+                          <span className="text-foreground/70">Metrics:</span> {metrics}
+                        </div>
+                      )}
+
+                      {/* Tier and capabilities */}
+                      <div className="text-xs text-muted-foreground">
+                        {model.tier && <span className="text-foreground/70">{model.tier}</span>}
+                        {model.tier && capabilities && ' | '}
+                        {capabilities}
+                      </div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </ScrollArea>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-border text-xs text-muted-foreground">
+          Press ESC to close | Click outside to close
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/OperationDisplay.tsx b/packages/cletus/src/browser/components/OperationDisplay.tsx
new file mode 100644
index 0000000..f49dcf1
--- /dev/null
+++ b/packages/cletus/src/browser/components/OperationDisplay.tsx
@@ -0,0 +1,555 @@
+import React, { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { CheckCircle2, XCircle, Loader2 } from 'lucide-react';
+import { Operation } from '../../schemas';
+import { cn } from '../lib/utils';
+import { Button } from './ui/button';
+
+
+/**
+ * Get status color and label for an operation status
+ */
+export function getStatusInfo(status: Operation['status']): { color: string; label: string } {
+  switch (status) {
+    case 'done':
+      return { color: 'text-green-400', label: 'completed' };
+    case 'doing':
+      return { color: 'text-orange-400', label: 'in progress' };
+    case 'analyzed':
+      return { color: 'text-yellow-400', label: 'pending approval' };
+    case 'doneError':
+      return { color: 'text-red-400', label: 'error' };
+    case 'analyzeError':
+      return { color: 'text-red-400', label: 'analysis error' };
+    case 'analyzedBlocked':
+      return { color: 'text-red-400', label: 'blocked' };
+    case 'rejected':
+      return { color: 'text-red-400', label: 'rejected' };
+    default:
+      return { color: 'text-muted-foreground', label: status };
+  }
+}
+
+/**
+ * Calculate elapsed time for an operation
+ */
+export function getElapsedTime(op: Operation): string {
+  if (!op.start) return '';
+  const duration = op.end ? op.end - op.start : Date.now() - op.start;
+
+  if (duration < 1000) return `${Math.round(duration)}ms`;
+  if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;
+  return `${Math.floor(duration / 60000)}m ${Math.round((duration % 60000) / 1000)}s`;
+}
+
+/**
+ * Checks if an array can be rendered as a table
+ */
+const canRenderAsTable = (data: any[]): boolean => {
+  if (data.length <= 1) return false;
+
+  // All items must be objects
+  if (!data.every(item => item && typeof item === 'object' && !Array.isArray(item))) {
+    return false;
+  }
+
+  // Collect all unique keys
+  const allKeys = new Set<string>();
+  for (const item of data) {
+    Object.keys(item).forEach(key => allKeys.add(key));
+  }
+
+  // Must have <= 20 columns
+  if (allKeys.size > 20) return false;
+
+  // All values must be primitives (string, number, boolean, null, undefined)
+  for (const item of data) {
+    for (const value of Object.values(item)) {
+      if (value !== null && value !== undefined && typeof value === 'object') {
+        return false;
+      }
+    }
+  }
+
+  return true;
+};
+
+/**
+ * Renders a primitive value for table cells
+ */
+const renderPrimitiveValue = (value: any): React.ReactNode => {
+  if (value === null || value === undefined) {
+    return <span className="text-muted-foreground italic">null</span>;
+  }
+  if (typeof value === 'string') {
+    // Handle newlines in strings for table cells
+    const lines = value.split('\n');
+    return (
+      <span className="text-green-400">
+        {lines.map((line, i) => (
+          <React.Fragment key={i}>
+            {line}
+            {i < lines.length - 1 && <br />}
+          </React.Fragment>
+        ))}
+      </span>
+    );
+  }
+  if (typeof value === 'number') {
+    return <span className="text-blue-400">{value}</span>;
+  }
+  if (typeof value === 'boolean') {
+    return <span className="text-purple-400">{value.toString()}</span>;
+  }
+  return <span>{String(value)}</span>;
+};
+
+/**
+ * Renders JSON data in a friendly HTML format
+ */
+const renderJsonAsHtml = (data: any, depth: number = 0): React.ReactNode => {
+  if (data === null || data === undefined) {
+    return <span className="text-muted-foreground italic">null</span>;
+  }
+
+  if (typeof data === 'string') {
+    // Split by newlines and render each line
+    const lines = data.split('\n');
+    return (
+      <span className="text-green-400">
+        {lines.map((line, i) => (
+          <React.Fragment key={i}>
+            {line}
+            {i < lines.length - 1 && <br />}
+          </React.Fragment>
+        ))}
+      </span>
+    );
+  }
+
+  if (typeof data === 'number') {
+    return <span className="text-blue-400">{data}</span>;
+  }
+
+  if (typeof data === 'boolean') {
+    return <span className="text-purple-400">{data.toString()}</span>;
+  }
+
+  if (Array.isArray(data)) {
+    if (data.length === 0) {
+      return <span className="text-muted-foreground">[]</span>;
+    }
+
+    // Check if we can render as a table
+    if (canRenderAsTable(data)) {
+      // Collect all unique keys across all objects
+      const allKeys = new Set<string>();
+      data.forEach(item => {
+        Object.keys(item).forEach(key => allKeys.add(key));
+      });
+      const columns = Array.from(allKeys);
+
+      return (
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse text-xs">
+            <thead>
+              <tr className="border-b border-border">
+                {columns.map(col => (
+                  <th key={col} className="text-left p-2 text-cyan-400 font-semibold">
+                    {col}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {data.map((row, i) => (
+                <tr key={i} className="border-b border-border/50">
+                  {columns.map(col => (
+                    <td key={col} className="p-2">
+                      {renderPrimitiveValue(row[col])}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      );
+    }
+
+    // Default array rendering
+    return (
+      <div className="ml-4">
+        {data.map((item, i) => (
+          <div key={i} className="border-l border-border pl-2 my-1">
+            <span className="text-yellow-400">[{i}]:</span> {renderJsonAsHtml(item, depth + 1)}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (typeof data === 'object') {
+    const entries = Object.entries(data);
+    if (entries.length === 0) {
+      return <span className="text-muted-foreground">{'{}'}</span>;
+    }
+    return (
+      <div className="ml-4">
+        {entries.map(([key, value]) => (
+          <div key={key} className="border-l border-border pl-2 my-1">
+            <span className="text-cyan-400">{key}:</span> {renderJsonAsHtml(value, depth + 1)}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return <span>{String(data)}</span>;
+};
+
+/**
+ * Expandable details component with tabs
+ */
+const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) => {
+  const [activeTab, setActiveTab] = useState<'input' | 'output' | 'inputJson' | 'outputJson' | 'cacheJson' | 'analysis'>('input');
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const hasInput = operation.input !== undefined && operation.input !== null;
+  const hasOutput = operation.output !== undefined && operation.output !== null;
+  const hasCache = operation.cache !== undefined && operation.cache !== null && Object.keys(operation.cache).length > 0;
+  const hasAnalysis = operation.analysis !== undefined && operation.analysis !== null && operation.analysis.trim().length > 0;
+
+  if (!hasInput && !hasOutput && !hasCache && !hasAnalysis) {
+    return null;
+  }
+
+  // Default to first available tab
+  const effectiveTab =
+    (activeTab === 'input' && hasInput) ||
+    (activeTab === 'output' && hasOutput) ||
+    (activeTab === 'inputJson' && hasInput) ||
+    (activeTab === 'outputJson' && hasOutput) ||
+    (activeTab === 'cacheJson' && hasCache) ||
+    (activeTab === 'analysis' && hasAnalysis)
+      ? activeTab
+      : hasInput
+      ? 'input'
+      : hasOutput
+      ? 'output'
+      : hasCache
+      ? 'cacheJson'
+      : 'analysis';
+
+  return (
+    <div className="ml-6 mt-2 border border-border rounded-lg overflow-hidden bg-muted/30">
+      {/* Tabs */}
+      <div className="flex border-b border-border overflow-x-auto">
+        {hasInput && (
+          <button
+            onClick={() => setActiveTab('input')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
+              effectiveTab === 'input'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Input
+          </button>
+        )}
+        {hasOutput && (
+          <button
+            onClick={() => setActiveTab('output')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
+              effectiveTab === 'output'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Output
+          </button>
+        )}
+        {hasInput && (
+          <button
+            onClick={() => setActiveTab('inputJson')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
+              effectiveTab === 'inputJson'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Input (JSON)
+          </button>
+        )}
+        {hasOutput && (
+          <button
+            onClick={() => setActiveTab('outputJson')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
+              effectiveTab === 'outputJson'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Output (JSON)
+          </button>
+        )}
+        {hasCache && (
+          <button
+            onClick={() => setActiveTab('cacheJson')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
+              effectiveTab === 'cacheJson'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Cache (JSON)
+          </button>
+        )}
+        {hasAnalysis && (
+          <button
+            onClick={() => setActiveTab('analysis')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
+              effectiveTab === 'analysis'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Analysis
+          </button>
+        )}
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="ml-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground whitespace-nowrap"
+        >
+          {isExpanded ? 'Collapse' : 'Expand'}
+        </button>
+      </div>
+
+      {/* Content */}
+      {effectiveTab === 'input' || effectiveTab === 'output' ? (
+        <div
+          className={cn(
+            'w-full p-3 text-xs font-mono bg-black text-white overflow-auto',
+            isExpanded ? 'min-h-[12rem]' : 'max-h-[12rem] h-[12rem]'
+          )}
+        >
+          {renderJsonAsHtml(effectiveTab === 'input' ? operation.input : operation.output)}
+        </div>
+      ) : (
+        <textarea
+          readOnly
+          value={
+            effectiveTab === 'inputJson'
+              ? JSON.stringify(operation.input, null, 2)
+              : effectiveTab === 'outputJson'
+              ? JSON.stringify(operation.output, null, 2)
+              : effectiveTab === 'cacheJson'
+              ? JSON.stringify(operation.cache, null, 2)
+              : operation.analysis || ''
+          }
+          className={cn(
+            'w-full p-3 text-xs font-mono bg-black text-white border-0 resize-y overflow-auto',
+            'focus:outline-none focus:ring-2 focus:ring-neon-cyan/50',
+            isExpanded ? 'h-auto' : 'max-h-[12rem]'
+          )}
+          style={isExpanded ? { height: 'auto', minHeight: '12rem' } : { height: '12rem' }}
+        />
+      )}
+    </div>
+  );
+};
+
+export interface OperationDisplayProps {
+  operation: Operation;
+  label: string;
+  summary?: React.ReactNode | string | null;
+  borderColor?: string;
+  bgColor?: string;
+  labelColor?: string;
+  message?: { cost?: number; usage?: any };
+  operationIndex?: number;
+  onApprove?: (index: number) => void;
+  onReject?: (index: number) => void;
+  approvalDecision?: 'approve' | 'reject';
+  onToggleDecision?: (index: number, decision: 'approve' | 'reject') => void;
+  hasMultipleOperations?: boolean;
+}
+
+/**
+ * Base operation display component with consistent styling
+ */
+export const OperationDisplay: React.FC<OperationDisplayProps> = ({
+  operation,
+  label,
+  summary,
+  borderColor = 'border-border',
+  bgColor = 'bg-card/50',
+  labelColor = 'text-foreground',
+  message,
+  operationIndex,
+  onApprove,
+  onReject,
+  approvalDecision,
+  onToggleDecision,
+  hasMultipleOperations = false,
+}) => {
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+  const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
+  const elapsed = getElapsedTime(operation);
+
+  // Determine summary to display
+  const displaySummary = operation.error ? operation.error : summary;
+
+  const needsApproval = operation.status === 'analyzed';
+  const isOperationProcessing = operation.status === 'doing';
+
+  return (
+    <div className={cn('mb-3 rounded-lg p-3', needsApproval ? 'bg-yellow-500/5 border ' + borderColor : bgColor)}>
+      {/* Header - Clickable */}
+      <div
+        className="flex items-center gap-2 mb-2 cursor-pointer hover:opacity-80 transition-opacity"
+        onClick={() => setIsDetailsOpen(!isDetailsOpen)}
+      >
+        <span className={cn('text-lg', statusColor)}>●</span>
+        <span className={cn('font-mono text-sm', labelColor)}>{label}</span>
+        <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
+        {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
+      </div>
+
+      {/* Summary */}
+      {displaySummary && (
+        <div className={cn('ml-6 text-sm mb-2 whitespace-pre-wrap max-h-[8rem] overflow-y-auto', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
+          {typeof displaySummary === 'string' ? (
+            <>
+              <span className="text-foreground">→ </span>
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                components={{
+                  p: ({ children }) => <span>{children}</span>,
+                }}
+              >
+                {displaySummary}
+              </ReactMarkdown>
+            </>
+          ) : (
+            displaySummary
+          )}
+        </div>
+      )}
+
+      {/* Approval Buttons */}
+      {(needsApproval || isOperationProcessing) && operationIndex !== undefined && (
+        <div className="ml-6 mb-2">
+          {!hasMultipleOperations && onApprove && onReject ? (
+            // Single operation: immediate approve/reject
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onApprove(operationIndex)}
+                disabled={isOperationProcessing}
+                className="bg-green-500/10 text-green-400 border-green-400/30 hover:bg-green-400/20 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isOperationProcessing ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Processing...
+                  </>
+                ) : (
+                  <>
+                    <CheckCircle2 className="w-4 h-4 mr-2" />
+                    Approve
+                  </>
+                )}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onReject(operationIndex)}
+                disabled={isOperationProcessing}
+                className="bg-red-500/10 text-red-400 border-red-400/30 hover:bg-red-400/20 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <XCircle className="w-4 h-4 mr-2" />
+                Reject
+              </Button>
+            </div>
+          ) : (
+            // Multiple operations: toggle buttons
+            onToggleDecision && (
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onToggleDecision(operationIndex, 'approve')}
+                  disabled={isOperationProcessing}
+                  className={cn(
+                    'disabled:opacity-50 disabled:cursor-not-allowed',
+                    approvalDecision === 'approve'
+                      ? 'bg-green-500/20 text-green-400 border-green-400 hover:bg-green-500/30'
+                      : 'text-green-400/50 border-green-400/30 hover:bg-green-400/10'
+                  )}
+                >
+                  {isOperationProcessing && approvalDecision === 'approve' ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      Processing...
+                    </>
+                  ) : (
+                    <>
+                      <CheckCircle2 className="w-4 h-4 mr-2" />
+                      Approve
+                    </>
+                  )}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onToggleDecision(operationIndex, 'reject')}
+                  disabled={isOperationProcessing}
+                  className={cn(
+                    'disabled:opacity-50 disabled:cursor-not-allowed',
+                    approvalDecision === 'reject'
+                      ? 'bg-red-500/20 text-red-400 border-red-400 hover:bg-red-500/30'
+                      : 'text-red-400/50 border-red-400/30 hover:bg-red-400/10'
+                  )}
+                >
+                  <XCircle className="w-4 h-4 mr-2" />
+                  Reject
+                </Button>
+              </div>
+            )
+          )}
+        </div>
+      )}
+
+      {/* Details */}
+      {isDetailsOpen && (
+        <>
+          <OperationDetails operation={operation} />
+
+          {/* Cost and Usage Info */}
+          {message && (message.cost !== undefined || message.usage) && (
+            <div className="ml-6 mt-2 text-xs text-muted-foreground">
+              {message.cost !== undefined && message.cost > 0 && (
+                <span>cost: ${message.cost.toFixed(5)}</span>
+              )}
+              {message.usage?.text && (
+                <span>
+                  {message.cost !== undefined && message.cost > 0 ? ' │ ' : ''}
+                  tokens: {(message.usage.text.input || 0) + (message.usage.text.output || 0)}
+                </span>
+              )}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ProfileModal.tsx b/packages/cletus/src/browser/components/ProfileModal.tsx
new file mode 100644
index 0000000..0892a6e
--- /dev/null
+++ b/packages/cletus/src/browser/components/ProfileModal.tsx
@@ -0,0 +1,184 @@
+import React, { useState } from 'react';
+import { X } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Checkbox } from './ui/checkbox';
+import type { Config } from '../../schemas';
+
+interface ProfileModalProps {
+  user: Config['user'];
+  onSave: (updates: Partial<Config['user']>) => void;
+  onClose: () => void;
+}
+
+export const ProfileModal: React.FC<ProfileModalProps> = ({ user, onSave, onClose }) => {
+  const [formData, setFormData] = useState({
+    name: user.name || '',
+    pronouns: user.pronouns || '',
+    globalPrompt: user.globalPrompt || '',
+    adaptiveTools: user.adaptiveTools ?? 14,
+    maxQuerySchemaTypes: user.maxQuerySchemaTypes ?? 5,
+    maxIterations: user.autonomous?.maxIterations ?? 10,
+    timeout: user.autonomous?.timeout ?? 600000,
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const updates: Partial<Config['user']> = {
+      name: formData.name.trim() || user.name,
+      pronouns: formData.pronouns.trim() || undefined,
+      globalPrompt: formData.globalPrompt.trim() || undefined,
+      adaptiveTools: formData.adaptiveTools,
+      maxQuerySchemaTypes: formData.maxQuerySchemaTypes,
+      autonomous: {
+        maxIterations: formData.maxIterations,
+        timeout: formData.timeout,
+      },
+    };
+
+    onSave(updates);
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-2xl max-h-[90vh] bg-card rounded-lg border border-border shadow-2xl overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border bg-card/50">
+          <h2 className="text-2xl font-bold neon-text-purple">Profile Settings</h2>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="w-5 h-5" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        <form onSubmit={handleSubmit}>
+          <div className="p-6 space-y-6 overflow-y-auto max-h-[calc(90vh-160px)]">
+            {/* Basic Info */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold neon-text-cyan">Basic Information</h3>
+
+              <div className="space-y-2">
+                <Label htmlFor="name">Name *</Label>
+                <Input
+                  id="name"
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="pronouns">Pronouns</Label>
+                <Input
+                  id="pronouns"
+                  type="text"
+                  value={formData.pronouns}
+                  onChange={(e) => setFormData({ ...formData, pronouns: e.target.value })}
+                  placeholder="e.g., they/them, she/her, he/him"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="globalPrompt">Global Prompt</Label>
+                <textarea
+                  id="globalPrompt"
+                  value={formData.globalPrompt}
+                  onChange={(e) => setFormData({ ...formData, globalPrompt: e.target.value })}
+                  className="w-full min-h-[100px] px-3 py-2 text-sm rounded-md border border-input bg-background text-foreground resize-y"
+                  placeholder="Add a global prompt that will be included in all chats..."
+                />
+              </div>
+            </div>
+
+            {/* Advanced Settings */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold neon-text-cyan">Advanced Settings</h3>
+
+              <div className="space-y-2">
+                <Label htmlFor="adaptiveTools">Adaptive Tools Limit</Label>
+                <Input
+                  id="adaptiveTools"
+                  type="number"
+                  min="1"
+                  value={formData.adaptiveTools}
+                  onChange={(e) => setFormData({ ...formData, adaptiveTools: parseInt(e.target.value, 10) || 14 })}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Maximum number of adaptive tools to use
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="maxQuerySchemaTypes">Max Query Schema Types</Label>
+                <Input
+                  id="maxQuerySchemaTypes"
+                  type="number"
+                  min="0"
+                  value={formData.maxQuerySchemaTypes}
+                  onChange={(e) => setFormData({ ...formData, maxQuerySchemaTypes: parseInt(e.target.value, 10) || 5 })}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Maximum number of schema types for queries
+                </p>
+              </div>
+            </div>
+
+            {/* Autonomous Mode Settings */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold neon-text-cyan">Autonomous Mode</h3>
+
+              <div className="space-y-2">
+                <Label htmlFor="maxIterations">Max Iterations</Label>
+                <Input
+                  id="maxIterations"
+                  type="number"
+                  min="1"
+                  value={formData.maxIterations}
+                  onChange={(e) => setFormData({ ...formData, maxIterations: parseInt(e.target.value, 10) || 10 })}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Maximum number of autonomous iterations
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="timeout">Timeout (ms)</Label>
+                <Input
+                  id="timeout"
+                  type="number"
+                  min="1000"
+                  step="1000"
+                  value={formData.timeout}
+                  onChange={(e) => setFormData({ ...formData, timeout: parseInt(e.target.value, 10) || 600000 })}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Timeout for autonomous operations in milliseconds
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="flex justify-end gap-3 p-6 border-t border-border bg-card/50">
+            <Button type="button" variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="neon">
+              Save Changes
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/QuestionsModal.tsx b/packages/cletus/src/browser/components/QuestionsModal.tsx
new file mode 100644
index 0000000..18b6dc1
--- /dev/null
+++ b/packages/cletus/src/browser/components/QuestionsModal.tsx
@@ -0,0 +1,290 @@
+import React, { useState } from 'react';
+import { X, CheckCircle2, ChevronLeft, ChevronRight } from 'lucide-react';
+import type { Question, MessageContent } from '../../schemas';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { cn } from '../lib/utils';
+
+interface QuestionsModalProps {
+  questions: Question[];
+  onSubmit: (questionAnswers: Record<number, Set<number>>, questionCustomAnswers: Record<number, string>) => void;
+  onCancel: () => void;
+}
+
+export const QuestionsModal: React.FC<QuestionsModalProps> = ({
+  questions,
+  onSubmit,
+  onCancel,
+}) => {
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [questionAnswers, setQuestionAnswers] = useState<Record<number, Set<number>>>({});
+  const [questionCustomAnswers, setQuestionCustomAnswers] = useState<Record<number, string>>({});
+  const [customAnswerInput, setCustomAnswerInput] = useState('');
+  const [isEditingCustom, setIsEditingCustom] = useState(false);
+
+  if (questions.length === 0) return null;
+
+  const currentQuestion = questions[currentQuestionIndex];
+  const currentSelections = questionAnswers[currentQuestionIndex] || new Set<number>();
+  const isRadio = currentQuestion.min === 1 && currentQuestion.max === 1;
+  const hasCustomAnswer = questionCustomAnswers[currentQuestionIndex]?.trim();
+  const totalAnswers = currentSelections.size + (hasCustomAnswer ? 1 : 0);
+  const canProceed = totalAnswers >= currentQuestion.min;
+
+  const handleToggleOption = (optionIndex: number) => {
+    const newSelections = new Set(currentSelections);
+    if (isRadio) {
+      // Radio: clear all and select current
+      newSelections.clear();
+      newSelections.add(optionIndex);
+    } else {
+      // Checkbox: toggle current
+      if (newSelections.has(optionIndex)) {
+        newSelections.delete(optionIndex);
+      } else if (newSelections.size < currentQuestion.max) {
+        newSelections.add(optionIndex);
+      }
+    }
+    setQuestionAnswers({ ...questionAnswers, [currentQuestionIndex]: newSelections });
+  };
+
+  const handleSaveCustomAnswer = () => {
+    if (customAnswerInput.trim()) {
+      setQuestionCustomAnswers({
+        ...questionCustomAnswers,
+        [currentQuestionIndex]: customAnswerInput.trim(),
+      });
+    } else {
+      // Remove custom answer if empty
+      const newCustomAnswers = { ...questionCustomAnswers };
+      delete newCustomAnswers[currentQuestionIndex];
+      setQuestionCustomAnswers(newCustomAnswers);
+    }
+    setIsEditingCustom(false);
+    setCustomAnswerInput('');
+  };
+
+  const handleNext = () => {
+    if (!canProceed) return;
+
+    if (currentQuestionIndex < questions.length - 1) {
+      setCurrentQuestionIndex(currentQuestionIndex + 1);
+    }
+  };
+
+  const handleBack = () => {
+    if (currentQuestionIndex > 0) {
+      setCurrentQuestionIndex(currentQuestionIndex - 1);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (!canProceed) return;
+    onSubmit(questionAnswers, questionCustomAnswers);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div className="bg-card border border-border rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-border">
+          <div>
+            <h2 className="text-lg font-semibold text-neon-cyan">Questions</h2>
+            <p className="text-sm text-muted-foreground">
+              {currentQuestionIndex + 1} of {questions.length}
+            </p>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onCancel}
+            className="text-muted-foreground hover:text-foreground"
+          >
+            <X className="w-5 h-5" />
+          </Button>
+        </div>
+
+        {/* Question tabs */}
+        <div className="flex gap-2 p-3 border-b border-border overflow-x-auto">
+          {questions.map((q, idx) => (
+            <button
+              key={idx}
+              onClick={() => setCurrentQuestionIndex(idx)}
+              className={cn(
+                'px-3 py-1.5 text-sm rounded transition-colors whitespace-nowrap h-8',
+                idx === currentQuestionIndex
+                  ? 'bg-neon-cyan/20 text-neon-cyan border border-neon-cyan'
+                  : 'bg-muted text-muted-foreground hover:text-foreground hover:bg-muted/80'
+              )}
+            >
+              {q.name}
+            </button>
+          ))}
+        </div>
+
+        {/* Question content */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-4">
+          <div>
+            <h3 className="text-base font-medium text-foreground mb-1">{currentQuestion.name}</h3>
+            <p className="text-sm text-muted-foreground">
+              Select {currentQuestion.min === currentQuestion.max
+                ? currentQuestion.min
+                : `${currentQuestion.min}-${currentQuestion.max}`} option(s)
+            </p>
+          </div>
+
+          {/* Options */}
+          <div className="space-y-2">
+            {currentQuestion.options.map((option, optionIndex) => {
+              const isSelected = currentSelections.has(optionIndex);
+              return (
+                <button
+                  key={optionIndex}
+                  onClick={() => handleToggleOption(optionIndex)}
+                  className={cn(
+                    'w-full text-left p-3 rounded border transition-colors',
+                    isSelected
+                      ? 'bg-neon-cyan/10 border-neon-cyan text-neon-cyan'
+                      : 'bg-muted/50 border-border hover:border-muted-foreground'
+                  )}
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="mt-0.5">
+                      {isRadio ? (
+                        <div className={cn(
+                          'w-4 h-4 rounded-full border-2 flex items-center justify-center',
+                          isSelected ? 'border-neon-cyan' : 'border-muted-foreground'
+                        )}>
+                          {isSelected && <div className="w-2 h-2 rounded-full bg-neon-cyan" />}
+                        </div>
+                      ) : (
+                        <div className={cn(
+                          'w-4 h-4 rounded border-2 flex items-center justify-center',
+                          isSelected ? 'border-neon-cyan bg-neon-cyan' : 'border-muted-foreground'
+                        )}>
+                          {isSelected && <CheckCircle2 className="w-3 h-3 text-background" />}
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex-1">
+                      <div className={cn(
+                        'font-medium',
+                        isSelected ? 'text-neon-cyan' : 'text-foreground'
+                      )}>{option.label}</div>
+                      {option.description && (
+                        <div className="text-sm text-muted-foreground mt-1">
+                          {option.description}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Custom answer */}
+          {currentQuestion.custom && (
+            <div className="pt-2">
+              {!isEditingCustom ? (
+                <div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      setIsEditingCustom(true);
+                      setCustomAnswerInput(questionCustomAnswers[currentQuestionIndex] || '');
+                    }}
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    {hasCustomAnswer ? 'Edit custom answer' : currentQuestion.customLabel || 'Other (custom answer)'}
+                  </Button>
+                  {hasCustomAnswer && (
+                    <div className="mt-2 p-3 bg-neon-cyan/10 border border-neon-cyan rounded text-sm">
+                      <div className="font-medium text-neon-cyan mb-1">Custom answer:</div>
+                      <div className="text-foreground">{questionCustomAnswers[currentQuestionIndex]}</div>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-foreground">
+                    {currentQuestion.customLabel || 'Other (custom answer)'}
+                  </label>
+                  <Input
+                    value={customAnswerInput}
+                    onChange={(e) => setCustomAnswerInput(e.target.value)}
+                    placeholder="Enter your answer..."
+                    className="w-full mt-1"
+                    autoFocus
+                  />
+                  <div className="flex gap-2">
+                    <Button
+                      variant="neon"
+                      size="sm"
+                      onClick={handleSaveCustomAnswer}
+                    >
+                      Save
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        setIsEditingCustom(false);
+                        setCustomAnswerInput('');
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Validation message */}
+          {!canProceed && (
+            <div className="text-sm text-yellow-400">
+              Please select at least {currentQuestion.min} option(s) to continue
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between p-4 border-t border-border">
+          <Button
+            variant="outline"
+            onClick={handleBack}
+            disabled={currentQuestionIndex === 0}
+            className="gap-2"
+          >
+            <ChevronLeft className="w-4 h-4" />
+            Back
+          </Button>
+
+          {currentQuestionIndex < questions.length - 1 ? (
+            <Button
+              variant="neon"
+              onClick={handleNext}
+              disabled={!canProceed}
+              className="gap-2"
+            >
+              Next
+              <ChevronRight className="w-4 h-4" />
+            </Button>
+          ) : (
+            <Button
+              variant="neon"
+              onClick={handleSubmit}
+              disabled={!canProceed}
+              className="gap-2"
+            >
+              <CheckCircle2 className="w-4 h-4" />
+              Submit Answers
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/SettingsView.tsx b/packages/cletus/src/browser/components/SettingsView.tsx
new file mode 100644
index 0000000..d3f1f2b
--- /dev/null
+++ b/packages/cletus/src/browser/components/SettingsView.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import type { Config } from '../../schemas';
+
+interface SettingsViewProps {
+  config: Config;
+}
+
+export const SettingsView: React.FC<SettingsViewProps> = ({ config }) => {
+  const data = config;
+
+  return (
+    <div style={{ maxWidth: '800px' }}>
+      <div className="card" style={{ marginBottom: '1rem' }}>
+        <h2 style={{ marginBottom: '1rem', fontSize: '1.25rem' }}>User Information</h2>
+        <div className="flex flex-col gap-2">
+          <div>
+            <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}>
+              Name
+            </div>
+            <div style={{ fontWeight: 500 }}>{data.user.name}</div>
+          </div>
+          {data.user.pronouns && (
+            <div>
+              <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}>
+                Pronouns
+              </div>
+              <div style={{ fontWeight: 500 }}>{data.user.pronouns}</div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="card" style={{ marginBottom: '1rem' }}>
+        <h2 style={{ marginBottom: '1rem', fontSize: '1.25rem' }}>Assistants</h2>
+        {data.assistants.length === 0 ? (
+          <p style={{ color: 'var(--text-secondary)' }}>No assistants configured</p>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {data.assistants.map((assistant, index) => (
+              <div key={index} style={{ padding: '0.75rem', background: 'var(--bg)', borderRadius: '6px' }}>
+                <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>{assistant.name}</div>
+                {assistant.description && (
+                  <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+                    {assistant.description}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="card" style={{ marginBottom: '1rem' }}>
+        <h2 style={{ marginBottom: '1rem', fontSize: '1.25rem' }}>Data Types</h2>
+        {data.types.length === 0 ? (
+          <p style={{ color: 'var(--text-secondary)' }}>No data types defined</p>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {data.types.map((type, index) => (
+              <div key={index} style={{ padding: '0.75rem', background: 'var(--bg)', borderRadius: '6px' }}>
+                <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>
+                  {type.friendlyName} ({type.name})
+                </div>
+                {type.description && (
+                  <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+                    {type.description}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="card">
+        <h2 style={{ marginBottom: '1rem', fontSize: '1.25rem' }}>Note</h2>
+        <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
+          Settings can only be modified through the CLI version of Cletus. 
+          Run <code style={{ background: 'var(--surface)', padding: '0.125rem 0.5rem', borderRadius: '4px' }}>cletus</code> to access the settings menu.
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/Sidebar.tsx b/packages/cletus/src/browser/components/Sidebar.tsx
new file mode 100644
index 0000000..236fcbd
--- /dev/null
+++ b/packages/cletus/src/browser/components/Sidebar.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface SidebarProps {
+  currentView: 'chats' | 'settings';
+  onViewChange: (view: 'chats' | 'settings') => void;
+  userName: string;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({ currentView, onViewChange, userName }) => {
+  return (
+    <div className="sidebar">
+      <div style={{ padding: '1.5rem', borderBottom: '1px solid var(--border)' }}>
+        <h2 style={{ fontSize: '1.25rem', fontWeight: 600 }}>Cletus</h2>
+        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: '0.25rem' }}>
+          Browser Mode
+        </div>
+      </div>
+      
+      <nav style={{ flex: 1, padding: '1rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+        <button
+          className={`btn ${currentView === 'chats' ? 'btn-primary' : ''}`}
+          onClick={() => onViewChange('chats')}
+          style={{ width: '100%', textAlign: 'left' }}
+        >
+          💬 Chats
+        </button>
+        
+        <button
+          className={`btn ${currentView === 'settings' ? 'btn-primary' : ''}`}
+          onClick={() => onViewChange('settings')}
+          style={{ width: '100%', textAlign: 'left' }}
+        >
+          ⚙️ Settings
+        </button>
+      </nav>
+
+      <div style={{ 
+        padding: '1rem', 
+        borderTop: '1px solid var(--border)',
+        fontSize: '0.85rem',
+        color: 'var(--text-secondary)'
+      }}>
+        <div>{userName}</div>
+        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: '0.25rem' }}>
+          v0.3.1
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/TodosModal.tsx b/packages/cletus/src/browser/components/TodosModal.tsx
new file mode 100644
index 0000000..636166e
--- /dev/null
+++ b/packages/cletus/src/browser/components/TodosModal.tsx
@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from 'react';
+import { X, CheckSquare, Square, Plus, Trash2, RotateCcw } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { ScrollArea } from './ui/scroll-area';
+import type { ChatMeta } from '../../schemas';
+
+interface TodosModalProps {
+  todos: ChatMeta['todos'];
+  onAddTodo: (todo: string) => void;
+  onToggleTodo: (index: number) => void;
+  onRemoveTodo: (index: number) => void;
+  onClearTodos: () => void;
+  onClose: () => void;
+}
+
+export const TodosModal: React.FC<TodosModalProps> = ({
+  todos,
+  onAddTodo,
+  onToggleTodo,
+  onRemoveTodo,
+  onClearTodos,
+  onClose,
+}) => {
+  const [newTodo, setNewTodo] = useState('');
+
+  // Handle ESC key to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  const handleAdd = () => {
+    if (newTodo.trim()) {
+      onAddTodo(newTodo.trim());
+      setNewTodo('');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAdd();
+    }
+  };
+
+  const completedCount = todos.filter((t) => t.done).length;
+  const totalCount = todos.length;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-2xl max-h-[80vh] bg-card rounded-lg border border-border shadow-2xl flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <div>
+            <h2 className="text-2xl font-bold neon-text-cyan flex items-center gap-2">
+              <CheckSquare className="w-6 h-6" />
+              Todos
+            </h2>
+            {totalCount > 0 && (
+              <p className="text-sm text-muted-foreground mt-1">
+                {completedCount} of {totalCount} completed
+              </p>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {totalCount > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onClearTodos}
+                className="gap-2 text-destructive hover:text-destructive"
+              >
+                <RotateCcw className="w-4 h-4" />
+                Clear All
+              </Button>
+            )}
+            <Button variant="ghost" size="icon" onClick={onClose}>
+              <X className="w-5 h-5" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Add Todo */}
+        <div className="p-6 border-b border-border">
+          <div className="flex items-center gap-2">
+            <Input
+              type="text"
+              value={newTodo}
+              onChange={(e) => setNewTodo(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Add a new todo..."
+              className="flex-1"
+              autoFocus
+            />
+            <Button
+              variant="neon"
+              onClick={handleAdd}
+              disabled={!newTodo.trim()}
+              className="gap-2"
+            >
+              <Plus className="w-4 h-4" />
+              Add
+            </Button>
+          </div>
+        </div>
+
+        {/* Todos List */}
+        <ScrollArea className="flex-1 p-6">
+          {todos.length === 0 ? (
+            <div className="text-center py-12 text-muted-foreground">
+              <CheckSquare className="w-12 h-12 mx-auto mb-3 opacity-50" />
+              <p>No todos yet</p>
+              <p className="text-sm mt-1">Add one above to get started</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {todos.map((todo, index) => (
+                <div
+                  key={index}
+                  className={`flex items-start gap-3 p-3 rounded-lg border border-border bg-card/50 hover:bg-card transition-colors ${
+                    todo.done ? 'opacity-60' : ''
+                  }`}
+                >
+                  <button
+                    onClick={() => onToggleTodo(index)}
+                    className="flex-shrink-0 mt-0.5 text-muted-foreground hover:text-neon-cyan transition-colors"
+                  >
+                    {todo.done ? (
+                      <CheckSquare className="w-5 h-5 text-neon-cyan" />
+                    ) : (
+                      <Square className="w-5 h-5" />
+                    )}
+                  </button>
+                  <div className="flex-1 min-w-0">
+                    <p
+                      className={`text-sm ${
+                        todo.done
+                          ? 'line-through text-muted-foreground'
+                          : 'text-foreground'
+                      }`}
+                    >
+                      {todo.name}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => onRemoveTodo(index)}
+                    className="flex-shrink-0 text-muted-foreground hover:text-destructive transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-border text-xs text-muted-foreground">
+          Press ESC to close | Click outside to close
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ToolsetSelector.tsx b/packages/cletus/src/browser/components/ToolsetSelector.tsx
new file mode 100644
index 0000000..e029a9f
--- /dev/null
+++ b/packages/cletus/src/browser/components/ToolsetSelector.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Select, SelectOption } from './ui/select';
+
+interface ToolsetSelectorProps {
+  toolset?: string | null;
+  onChange: (toolset: string | null) => void;
+  disabled?: boolean;
+}
+
+const TOOLSET_OPTIONS: SelectOption<string>[] = [
+  {
+    value: 'adaptive',
+    label: 'Adaptive',
+    description: 'AI selects tools based on context',
+  },
+  {
+    value: 'planner',
+    label: 'Planner',
+    description: 'Todo and task management',
+  },
+  {
+    value: 'librarian',
+    label: 'Librarian',
+    description: 'File and code operations',
+  },
+  {
+    value: 'clerk',
+    label: 'Clerk',
+    description: 'Shell and system commands',
+  },
+  {
+    value: 'secretary',
+    label: 'Secretary',
+    description: 'Chat and message operations',
+  },
+  {
+    value: 'architect',
+    label: 'Architect',
+    description: 'Software design and planning',
+  },
+  {
+    value: 'artist',
+    label: 'Artist',
+    description: 'Image generation and editing',
+  },
+  {
+    value: 'internet',
+    label: 'Internet',
+    description: 'Web search and fetching',
+  },
+  {
+    value: 'dba',
+    label: 'DBA',
+    description: 'Database operations',
+  },
+];
+
+export const ToolsetSelector: React.FC<ToolsetSelectorProps> = ({ toolset, onChange, disabled }) => {
+  return (
+    <div className="flex items-center gap-2">
+      <label className="text-sm text-muted-foreground">Toolset:</label>
+      <Select
+        value={toolset || 'adaptive'}
+        options={TOOLSET_OPTIONS}
+        onChange={value => onChange(value === 'adaptive' ? null : value)}
+        disabled={disabled}
+        className="min-w-[140px]"
+      />
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/TypingIndicator.tsx b/packages/cletus/src/browser/components/TypingIndicator.tsx
new file mode 100644
index 0000000..bcd4050
--- /dev/null
+++ b/packages/cletus/src/browser/components/TypingIndicator.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const TypingIndicator: React.FC = () => {
+  return (
+    <div className="flex gap-1.5 p-4">
+      <div className="typing-dot"></div>
+      <div className="typing-dot" style={{ animationDelay: '0.2s' }}></div>
+      <div className="typing-dot" style={{ animationDelay: '0.4s' }}></div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ui/button.tsx b/packages/cletus/src/browser/components/ui/button.tsx
new file mode 100644
index 0000000..8160a27
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/button.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 neon-glow-purple',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground neon-border',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'text-foreground hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        neon: 'bg-card border-2 border-neon-cyan text-neon-cyan hover:bg-neon-cyan hover:text-background neon-glow transition-all duration-300',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/packages/cletus/src/browser/components/ui/card.tsx b/packages/cletus/src/browser/components/ui/card.tsx
new file mode 100644
index 0000000..a4df3e4
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/card.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'rounded-lg border border-border bg-card text-card-foreground shadow-sm transition-all hover:border-neon-purple/50 hover:shadow-lg',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/packages/cletus/src/browser/components/ui/checkbox.tsx b/packages/cletus/src/browser/components/ui/checkbox.tsx
new file mode 100644
index 0000000..9e8d89b
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/checkbox.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, checked, onCheckedChange, ...props }, ref) => {
+    return (
+      <div className="relative inline-flex items-center">
+        <input
+          type="checkbox"
+          ref={ref}
+          checked={checked}
+          onChange={(e) => onCheckedChange?.(e.target.checked)}
+          className="sr-only peer"
+          {...props}
+        />
+        <div
+          className={cn(
+            'h-5 w-5 shrink-0 rounded border border-input bg-background',
+            'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2',
+            'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+            'peer-checked:bg-neon-purple peer-checked:border-neon-purple',
+            'transition-colors cursor-pointer',
+            className
+          )}
+        >
+          {checked && (
+            <Check className="h-4 w-4 text-white m-auto" strokeWidth={3} />
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };
diff --git a/packages/cletus/src/browser/components/ui/input.tsx b/packages/cletus/src/browser/components/ui/input.tsx
new file mode 100644
index 0000000..daac325
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/input.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neon-cyan focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/packages/cletus/src/browser/components/ui/label.tsx b/packages/cletus/src/browser/components/ui/label.tsx
new file mode 100644
index 0000000..77dad15
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/label.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Label.displayName = 'Label';
+
+export { Label };
diff --git a/packages/cletus/src/browser/components/ui/scroll-area.tsx b/packages/cletus/src/browser/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..520f572
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/scroll-area.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('relative overflow-auto', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+ScrollArea.displayName = 'ScrollArea';
+
+export { ScrollArea };
diff --git a/packages/cletus/src/browser/components/ui/select.tsx b/packages/cletus/src/browser/components/ui/select.tsx
new file mode 100644
index 0000000..b2c79e4
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/select.tsx
@@ -0,0 +1,114 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { cn } from '../../lib/utils';
+import { ChevronDown, Check } from 'lucide-react';
+
+export interface SelectOption<V extends string = string> {
+  value: V;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  value: string;
+  options: SelectOption[];
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const Select: React.FC<SelectProps> = ({
+  value,
+  options,
+  onChange,
+  placeholder = 'Select...',
+  className,
+  disabled = false,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen]);
+
+  const handleSelect = (optionValue: string) => {
+    onChange(optionValue);
+    setIsOpen(false);
+  };
+
+  return (
+    <div ref={containerRef} className={cn('relative', className)}>
+      <button
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={cn(
+          'flex items-center justify-between w-full rounded-md border border-border',
+          'bg-card px-3 py-2 text-sm text-foreground',
+          'hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-neon-cyan/50',
+          'transition-colors',
+          disabled && 'opacity-50 cursor-not-allowed',
+        )}
+      >
+        <span className={cn(!selectedOption && 'text-muted-foreground')}>
+          {selectedOption ? selectedOption.label : placeholder}
+        </span>
+        <ChevronDown
+          className={cn(
+            'w-4 h-4 text-muted-foreground transition-transform',
+            isOpen && 'transform rotate-180',
+          )}
+        />
+      </button>
+
+      {isOpen && (
+        <div
+          className={cn(
+            'absolute z-50 w-full mt-1 rounded-md border border-border',
+            'bg-card shadow-lg max-h-60 overflow-auto',
+          )}
+        >
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => !option.disabled && handleSelect(option.value)}
+              disabled={option.disabled}
+              className={cn(
+                'flex items-start gap-2 w-full px-3 py-2 text-sm text-left',
+                'hover:bg-muted/50 focus:bg-muted/50 focus:outline-none',
+                'transition-colors',
+                option.disabled && 'opacity-50 cursor-not-allowed',
+                value === option.value && 'bg-muted/30',
+              )}
+            >
+              <div className="flex-shrink-0 w-4 h-4 mt-0.5">
+                {value === option.value && <Check className="w-4 h-4 text-neon-cyan" />}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="font-medium text-foreground">{option.label}</div>
+                {option.description && (
+                  <div className="text-xs text-muted-foreground mt-0.5">{option.description}</div>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ui/textarea.tsx b/packages/cletus/src/browser/components/ui/textarea.tsx
new file mode 100644
index 0000000..8cca0ea
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neon-cyan focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/packages/cletus/src/browser/connection-registry.ts b/packages/cletus/src/browser/connection-registry.ts
new file mode 100644
index 0000000..a38ba13
--- /dev/null
+++ b/packages/cletus/src/browser/connection-registry.ts
@@ -0,0 +1,119 @@
+import type { WebSocket } from 'ws';
+import { randomBytes } from 'crypto';
+
+/**
+ * Represents a client WebSocket connection with its associated metadata.
+ */
+export interface ClientConnection {
+  ws: WebSocket;
+  connectionId: string;
+  activeChatId: string | null;
+  connectedAt: number;
+}
+
+/**
+ * Tracks which clients are subscribed to which chats for broadcasting.
+ *
+ * This enables multi-client real-time synchronization where multiple browser
+ * windows can view the same chat and receive updates simultaneously.
+ */
+export class ConnectionRegistry {
+  private connections: Map<string, ClientConnection> = new Map();
+
+  /**
+   * Register a new WebSocket connection and return its unique ID.
+   */
+  registerConnection(ws: WebSocket): string {
+    const connectionId = this.generateConnectionId();
+    const connection: ClientConnection = {
+      ws,
+      connectionId,
+      activeChatId: null,
+      connectedAt: Date.now(),
+    };
+
+    this.connections.set(connectionId, connection);
+    return connectionId;
+  }
+
+  /**
+   * Unregister a connection when client disconnects.
+   */
+  unregisterConnection(connectionId: string): void {
+    this.connections.delete(connectionId);
+  }
+
+  /**
+   * Set the active chat for a connection (used for subscribe_chat).
+   */
+  setActiveChat(connectionId: string, chatId: string | null): void {
+    const connection = this.connections.get(connectionId);
+    if (!connection) return;
+
+    connection.activeChatId = chatId;
+  }
+
+  /**
+   * Get the active chat ID for a connection.
+   */
+  getActiveChat(connectionId: string): string | null {
+    const connection = this.connections.get(connectionId);
+    return connection?.activeChatId || null;
+  }
+
+  /**
+   * Get all WebSocket clients currently subscribed to a specific chat.
+   */
+  getClientsForChat(chatId: string): WebSocket[] {
+    const clients: WebSocket[] = [];
+
+    for (const connection of this.connections.values()) {
+      if (connection.activeChatId === chatId) {
+        clients.push(connection.ws);
+      }
+    }
+
+    return clients;
+  }
+
+  /**
+   * Get a specific connection by ID.
+   */
+  getConnection(connectionId: string): ClientConnection | null {
+    return this.connections.get(connectionId) || null;
+  }
+
+  /**
+   * Get all registered connections.
+   */
+  getAllConnections(): ClientConnection[] {
+    return Array.from(this.connections.values());
+  }
+
+  /**
+   * Get count of active connections.
+   */
+  getConnectionCount(): number {
+    return this.connections.size;
+  }
+
+  /**
+   * Get count of clients watching a specific chat.
+   */
+  getChatClientCount(chatId: string): number {
+    let count = 0;
+    for (const connection of this.connections.values()) {
+      if (connection.activeChatId === chatId) {
+        count++;
+      }
+    }
+    return count;
+  }
+
+  /**
+   * Generate a unique connection ID.
+   */
+  private generateConnectionId(): string {
+    return randomBytes(16).toString('hex');
+  }
+}
diff --git a/packages/cletus/src/browser/index.html b/packages/cletus/src/browser/index.html
new file mode 100644
index 0000000..5f74a6c
--- /dev/null
+++ b/packages/cletus/src/browser/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cletus - Browser Mode</title>
+</head>
+<body>
+  <div id="root">
+    <div class="flex h-screen items-center justify-center flex-col gap-4">
+      <div class="spinner"></div>
+      <p class="neon-text-cyan">Loading Cletus...</p>
+    </div>
+  </div>
+  <script type="module" src="/app.js"></script>
+</body>
+</html>
diff --git a/packages/cletus/src/browser/lib/utils.ts b/packages/cletus/src/browser/lib/utils.ts
new file mode 100644
index 0000000..9ad0df4
--- /dev/null
+++ b/packages/cletus/src/browser/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/cletus/src/browser/operations/architect.tsx b/packages/cletus/src/browser/operations/architect.tsx
new file mode 100644
index 0000000..427069d
--- /dev/null
+++ b/packages/cletus/src/browser/operations/architect.tsx
@@ -0,0 +1,48 @@
+import { formatName, pluralize } from '../../shared';
+import { createRenderer } from './render';
+
+const renderer = createRenderer({
+  borderColor: "border-neon-cyan/30",
+  bgColor: "bg-neon-cyan/5",
+  labelColor: "text-neon-cyan",
+});
+
+export const type_info = renderer<'type_info'>(
+  (op) => `${op.cache?.typeName || formatName(op.input.name)}Info()`,
+  (op) => op.output?.type
+    ? `Found type: ${op.output.type.friendlyName}`
+    : op.output?.type === null
+    ? 'Type not found'
+    : op.analysis,
+);
+
+export const type_list = renderer<'type_list'>(
+  () => 'TypeList()',
+  (op) => op.output?.types?.length
+    ? `Found ${op.output.types.length} type${op.output.types.length !== 1 ? 's' : ''}`
+    : op.output?.types
+    ? 'No types found'
+    : op.analysis,
+);
+
+export const type_create = renderer<'type_create'>(
+  (op) => `${op.cache?.typeName || formatName(op.input.name)}Create()`,
+  (op) => op.output?.created ? 'Created type successfully' : op.analysis,
+);
+
+export const type_update = renderer<'type_update'>(
+  (op) => `${op.cache?.typeName || formatName(op.input.name)}Update(${op.input.update ? Object.keys(op.input.update).join(', ') : ''})`,
+  (op) => op.output?.updated ? 'Updated type successfully' : op.analysis,
+);
+
+export const type_delete = renderer<'type_delete'>(
+  (op) => `${op.cache?.typeName || formatName(op.input.name)}Delete()`,
+  (op) => op.output?.deleted ? 'Deleted type successfully' : op.analysis,
+);
+
+export const type_import = renderer<'type_import'>(
+  (op) => `TypeImport("${op.input.glob}")`,
+  (op) => op.output?.discovered
+    ? `Imported ${pluralize(op.output.discovered.length, 'type')}`
+    : op.analysis,
+);
\ No newline at end of file
diff --git a/packages/cletus/src/browser/operations/artist.tsx b/packages/cletus/src/browser/operations/artist.tsx
new file mode 100644
index 0000000..2330b38
--- /dev/null
+++ b/packages/cletus/src/browser/operations/artist.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { abbreviate, pluralize } from '../../shared';
+import { createRenderer } from './render';
+import { ClickableImage } from '../components/ImageViewer';
+
+const renderer = createRenderer({
+  borderColor: "border-neon-pink/30",
+  bgColor: "bg-neon-pink/5",
+  labelColor: "text-neon-pink",
+});
+
+export const image_generate = renderer<'image_generate'>(
+  (op) => `ImageGenerate("${abbreviate(op.input.prompt, 30)}", n=${op.input.n || 1})`,
+  (op): string | React.ReactNode | null => {
+    if (op.output) {
+      const count = op.output.count;
+      // For browser, we can show the image inline if we have URLs
+      if (op.output.images && op.output.images.length > 0) {
+        return (
+          <div className="ml-6 mt-2">
+            <div className="text-sm mb-2">Generated {count} image{count !== 1 ? 's' : ''}</div>
+            <div className="flex gap-2 flex-wrap">
+              {op.output.images.map((img: string, i: number) => (
+                <ClickableImage
+                  key={i}
+                  src={`/file?path=${encodeURIComponent(img)}`}
+                  alt="Generated"
+                  className="max-w-sm rounded border border-neon-pink/30"
+                />
+              ))}
+            </div>
+          </div>
+        );
+      }
+      return `Generated ${pluralize(count, 'image')}`;
+    }
+    return null;
+  }
+);
+
+export const image_edit = renderer<'image_edit'>(
+  (op) => `ImageEdit("${op.input.path}", "${abbreviate(op.input.prompt, 20)}")`,
+  (op): string | React.ReactNode | null => {
+    if (op.output) {
+      // For browser, we can show the edited image inline if we have a URL
+      if (op.output.editedLink) {
+        return (
+          <div className="ml-6 mt-2">
+            <div className="text-sm mb-2">Edited image saved</div>
+            <ClickableImage
+              src={`/file?path=${encodeURIComponent(op.output.editedLink)}`}
+              alt="Edited"
+              className="max-w-sm rounded border border-neon-pink/30"
+            />
+          </div>
+        );
+      }
+      return 'Edited image saved';
+    }
+    return null;
+  }
+);
+
+export const image_analyze = renderer<'image_analyze'>(
+  (op) => {
+    const pathCount = op.input.paths?.length || 1;
+    const firstPath = op.input.paths?.[0] || '';
+    const label = pathCount === 1 ? firstPath : `${pathCount} images`;
+    return `ImageAnalyze(${label}, "${abbreviate(op.input.prompt, 20)}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return abbreviate(op.output.analysis, 60);
+    }
+    return null;
+  }
+);
+
+export const image_describe = renderer<'image_describe'>(
+  (op) => `ImageDescribe("${op.input.path}")`,
+  (op) => {
+    if (op.output) {
+      return abbreviate(op.output.description, 60);
+    }
+    return null;
+  }
+);
+
+export const image_find = renderer<'image_find'>(
+  (op) => `ImageFind("${abbreviate(op.input.query, 50)}", "${op.input.glob}")`,
+  (op) => {
+    if (op.output) {
+      const resultCount = op.output.results.length;
+      const searched = op.output.searched;
+      return `Found ${pluralize(resultCount, 'matching image')} (searched ${searched})`;
+    }
+    return null;
+  }
+);
+
+export const image_attach = renderer<'image_attach'>(
+  (op) => `ImageAttach("${op.input.path}")`,
+  (op) => {
+    if (op.output?.attached) {
+      return `Attached image: ${op.output.fullPath}`;
+    }
+    return null;
+  }
+);
diff --git a/packages/cletus/src/browser/operations/clerk.tsx b/packages/cletus/src/browser/operations/clerk.tsx
new file mode 100644
index 0000000..3efdc7f
--- /dev/null
+++ b/packages/cletus/src/browser/operations/clerk.tsx
@@ -0,0 +1,339 @@
+import React from 'react';
+import { CONSTS } from '../../constants';
+import { abbreviate, chunk, paginateText, pluralize } from '../../shared';
+import { createRenderer, linkFile } from './render';
+
+
+const renderer = createRenderer({
+  borderColor: "border-neon-green/30",
+  bgColor: "bg-neon-green/5",
+  labelColor: "text-neon-green",
+});
+
+export const file_search = renderer<'file_search'>(
+  (op) => `Files("${op.input.glob}", "${op.input.glob}")`,
+  (op) => {
+    if (op.output) {
+      return `Found ${pluralize(op.output.count, 'file')}`;
+    }
+    return null;
+  },
+);
+
+export const file_summary = renderer<'file_summary'>(
+  (op) => `Summarize("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      return `${linkFile(op.output.fullPath)}: ${abbreviate(op.output.summary, 60)}`;
+    }
+    return null;
+  },
+);
+
+export const file_index = renderer<'file_index'>(
+  (op) => `Index("${op.input.glob}", ${op.input.index})`,
+  (op) => {
+    // Use cache for consistent rendering even if files change
+    const fileCount = op.cache?.indexableFiles?.length ?? op.output?.files.length;
+    if (fileCount !== undefined) {
+      const knowledgeCount = op.output?.knowledge;
+      if (knowledgeCount !== undefined) {
+        return `Indexed **${pluralize(fileCount, 'file')}**, **${pluralize(knowledgeCount, 'knowledge entry', 'knowledge entries')}**`;
+      }
+      return `Will index **${pluralize(fileCount, 'file')}**`;
+    }
+    return null;
+  }
+);
+
+export const file_create = renderer<'file_create'>(
+  (op) => `Write("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      return `Created ${linkFile(op.output.fullPath)} with **${op.output.size.toLocaleString()}** characters, **${op.output.lines}** lines`;
+    }
+    return null;
+  }
+);
+
+export const file_copy = renderer<'file_copy'>(
+  (op) => `Copy("${op.input.glob}", "${op.input.target}")`,
+  (op) => {
+    // Use cache for consistent rendering
+    const count = op.cache?.sourceFiles?.length ?? op.output?.source?.length;
+    const fullTarget = op.cache?.fullTarget ?? op.output?.fullTarget;
+    if (count !== undefined) {
+      return op.output 
+        ? `Copied ${pluralize(count, 'file')} to ${fullTarget ? linkFile(fullTarget) : op.input.target}`
+        : `Will copy ${pluralize(count, 'file')} to ${fullTarget ? linkFile(fullTarget) : op.input.target}`;
+    }
+    return null;
+  }
+);
+
+export const file_move = renderer<'file_move'>(
+  (op) => `Move("${op.input.glob}" → "${op.input.target}")`,
+  (op) => {
+    // Use cache for consistent rendering
+    const files = op.cache?.files ?? op.output?.files;
+    const targetPath = op.cache?.targetPath ?? op.output?.targetPath;
+    if (files) {
+      const count = files.length;
+      return op.output
+        ? `Moved ${pluralize(count, 'file')} to ${targetPath ? linkFile(targetPath) : op.input.target}`
+        : `Will move ${pluralize(count, 'file')} to ${targetPath ? linkFile(targetPath) : op.input.target}`;
+    }
+    return null;
+  }
+);
+
+export const file_stats = renderer<'file_stats'>(
+  (op) => `FileStats("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      const sizeKB = (op.output.size / 1024).toFixed(1);
+      return `${linkFile(op.output.fullPath)}: **${op.output.type}**, **${sizeKB} KB**${op.output.lines ? `, **${op.output.lines}** lines` : ''}`;
+    }
+    return null;
+  }
+);
+
+export const file_delete = renderer<'file_delete'>(
+  (op) => `Delete("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      return `Deleted ${op.input.path}`;
+    }
+    return null;
+  }
+);
+
+export const file_read = renderer<'file_read'>(
+  (op) => `Read("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      const params: string[] = [];
+
+      // Add limit/offset info if non-default
+      const limitOffsetMode = op.input.limitOffsetMode || 'characters';
+      const defaultLimit = limitOffsetMode === 'characters' ? CONSTS.MAX_CHARACTERS : CONSTS.MAX_LINES;
+      if (op.input.limit && op.input.limit !== defaultLimit) {
+        params.push(`limit=${op.input.limit} ${limitOffsetMode}`);
+      }
+      if (op.input.offset) {
+        params.push(`offset=${op.input.offset}`);
+      }
+      if (op.input.limitOffsetMode && op.input.limitOffsetMode !== 'characters') {
+        params.push(`mode=${op.input.limitOffsetMode}`);
+      }
+
+      // Add boolean flags if enabled
+      if (op.input.showLines) params.push('lines');
+      if (op.input.describeImages) params.push('describe');
+      if (op.input.extractImages) params.push('extract');
+      if (op.input.transcribeImages) params.push('transcribe');
+
+      const paramsStr = params.length > 0 ? ` (${params.join(', ')})` : '';
+      return `Read ${linkFile(op.output.fullPath)}: **${op.output.content.length.toLocaleString()}** characters${op.output.truncated ? ' *(truncated)*' : ''}${paramsStr}`;
+    }
+    return null;
+  }
+);
+
+export const file_edit = renderer<'file_edit'>(
+  (op) => `Edit("${paginateText(op.input.path, 100, -100)}")`,
+  (op): string | React.ReactNode | null => {
+    if (op.cache?.changed === false) {
+      return 'No changes';
+    }
+    
+    // diff format:
+    // Index: [filename]
+    // ===================================================================
+    // --- [filename]     before
+    // +++ [filename]     after
+    // @@ -old_index,old_lines +new_index,new_lines @@
+    // [+- ]line
+    // \ ignore
+    const lineClasses = {
+      '+': 'bg-green-900/30 text-green-300',
+      '-': 'bg-red-900/30 text-red-300',
+      ' ': 'text-muted-foreground',
+    } as const;
+
+    // render format:
+    // [gray line number] [+- ] content
+    // ... divider
+    let additions = 0;
+    let subtractions = 0;
+    const diff = op.cache?.diff || op.output || op.analysis || '';
+    const diffLines = diff.split('\n');
+    const relevantLines = diffLines.slice(4).filter(line => !line.startsWith('\\'));
+    const changeSetLines = chunk(relevantLines, (_, line) => line.startsWith('@@'));
+    const changeSets = changeSetLines.map((setLines, setLinesIndex) => {
+      const [, lineStartText, lineCountText] = /^@@ -\d+,\d+ \+(\d+),(\d+) @@$/.exec(setLines[0]) || [];
+      const lineStart = parseInt(lineStartText, 10);
+      const lineCount = parseInt(lineCountText, 10);
+      const linePadding = (lineStart + lineCount).toString().length + 1;
+      const lines = setLines.slice(1);
+      const lineNumbers: string[] = [];
+      let currentLineNumber = lineStart;
+      let removed = 0;
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (line.startsWith('-')) {
+          removed++;
+          subtractions++;
+        } else if (line.startsWith('+')) {
+          currentLineNumber -= removed;
+          removed = 0;
+          additions++;
+        }
+        lineNumbers.push(currentLineNumber.toFixed(0).padStart(linePadding, ' '));
+        currentLineNumber++;
+      }
+      // Trim empty lines at start and end
+      while (lines.length > 0 && lines[0].trim() === '') {
+        lines.shift();
+        lineNumbers.shift();
+      }
+      while (lines.length > 0 && lines[lines.length - 1].trim() === '') {
+        lines.pop();
+        lineNumbers.pop();
+      }
+
+      return (
+        <div key={setLinesIndex}>
+          {lines.map((line, lineIndex) => (
+            <div key={lineIndex} className=''>
+              <div color="gray">{lineNumbers[lineIndex]} </div>
+              <div className={lineClasses[line[0] as '+' | '-' | ' ']}>
+                {line}
+              </div>
+            </div>
+          ))}
+        </div>
+      );
+    });
+
+    const changeSetsGrouped = changeSets.map((set, index) => (
+      <React.Fragment key={index}>
+        {index > 0 && (<div>...</div>)}
+        {set}
+      </React.Fragment>
+    ));
+
+    // React Web Version:
+    return (
+      <div>
+        <span className="text-foreground">→ </span>
+        <span>
+          {op.output ? 'Updated ' : op.analysis ? 'Edit ' : 'Analyzing '}
+          <span className="text-neon-cyan">{op.input.path}</span>
+          {diff && (additions + subtractions) > 0 && (
+            <span>
+              {' '}with {pluralize(additions, 'addition')} and {pluralize(subtractions, 'removal')}
+            </span>
+          )}
+        </span>
+        {changeSetsGrouped}
+      </div>
+    );
+  },
+  (op) => ({
+    borderColor: op.output ? 'border-border' : op.status === 'rejected' ? 'border-muted' : 'border-green-500/30',
+    bgColor: op.output ? 'bg-card/50' : op.status === 'rejected' ? 'bg-muted/20' : 'bg-green-500/5',
+  })
+);
+
+export const text_search = renderer<'text_search'>(
+  (op) => `Search("${abbreviate(op.input.regex, 20)}", "${op.input.glob}")`,
+  (op) => {
+    // Use cache for consistent rendering when results are available
+    const searchedCount = op.cache?.searchableFiles?.length ?? op.output?.searched;
+    if (op.output) {
+      const output = op.output;
+      if (output.fileCount !== undefined) {
+        return `Found ${pluralize(output.fileCount, 'file')} (searched ${searchedCount ?? output.searched})`;
+      } else if (output.matchCount !== undefined) {
+        return `Found ${pluralize(output.matchCount, 'match', 'matches')} (searched ${pluralize(searchedCount ?? output.searched ?? 0, 'file')})`;
+      } else if (output.matches) {
+        return `Found matches in ${pluralize(output.matches.length, 'file')}`;
+      } else {
+        return `Searched ${pluralize(searchedCount ?? output.searched ?? 0, 'file')}`;
+      }
+    } else if (searchedCount !== undefined) {
+      return `Will search ${pluralize(searchedCount, 'file')}`;
+    }
+    return null;
+  }
+);
+
+export const dir_create = renderer<'dir_create'>(
+  (op) => `Dir("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      return `Created directory ${linkFile(op.output.fullPath)}`;
+    }
+    return null;
+  }
+);
+
+export const dir_summary = renderer<'dir_summary'>(
+  (op) => `DirSummary("${paginateText(op.input.path || '.', 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      return `${linkFile(op.output.fullPath)}: ${pluralize(op.output.fileCount, 'file')}, ${pluralize(op.output.dirCount, 'dir')}, ${pluralize(op.output.extCount, 'extension')}`;
+    }
+    return null;
+  }
+);
+
+export const file_attach = renderer<'file_attach'>(
+  (op) => `FileAttach("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output?.attached) {
+      return `Attached file: ${linkFile(op.output.fullPath)}`;
+    }
+    return null;
+  }
+);
+
+const processShellOutput = (stdout: string, stderr: string) => {
+  const allOutput = stdout + stderr;
+  const lines = allOutput.split('\n').filter(l => l.length > 0);
+  return { allOutput, lines, lineCount: lines.length };
+};
+
+export const shell = renderer<'shell'>(
+  (op) => `Shell("${op.input.command}")`,
+  (op): string | React.ReactNode | null => {
+    if (!op.output) {
+      return 'Executing...';
+    }
+
+    const { lines, lineCount } = processShellOutput(op.output.stdout, op.output.stderr);
+    const lastLines = lines.slice(-4);
+    const exitCode = op.output.exitCode;
+    const signal = op.output.signal;
+
+    const statusText = exitCode !== null 
+      ? `Exit code: ${exitCode}`
+      : signal 
+        ? `Terminated by signal: ${signal}`
+        : 'Running...';
+
+    return (
+      <>
+        {lastLines.length > 0 && (
+          <div className="mt-1 p-2 bg-muted rounded font-mono text-sm">
+            {lastLines.map((line, index) => (
+              <div key={index}>{line}</div>
+            ))}
+          </div>
+        )}
+        {pluralize(lineCount, 'line')} - {statusText}
+      </>
+    );
+  }
+);
\ No newline at end of file
diff --git a/packages/cletus/src/browser/operations/dba.tsx b/packages/cletus/src/browser/operations/dba.tsx
new file mode 100644
index 0000000..1090f9e
--- /dev/null
+++ b/packages/cletus/src/browser/operations/dba.tsx
@@ -0,0 +1,186 @@
+import type { Query } from '../../helpers/dba';
+import { abbreviate, formatName, pluralize } from '../../shared';
+import { createRenderer } from './render';
+
+
+const renderer = createRenderer({
+  borderColor: "border-neon-blue/30",
+  bgColor: "bg-neon-blue/5",
+  labelColor: "text-neon-blue",
+});
+
+/**
+ * Get the kind of a query statement for display
+ */
+function getQueryKind(query: Query): string {
+  if ('kind' in query) {
+    if (query.kind === 'withs') {
+      return 'cte';
+    }
+    return query.kind.toLowerCase();
+  }
+  return 'query';
+}
+
+/**
+ * Get a brief description of the query for display
+ */
+function describeQuery(query: Query): string {
+  if ('kind' in query) {
+    switch (query.kind) {
+      case 'select':
+        const selectParts: string[] = [];
+        if (query.from?.kind === 'table') {
+          selectParts.push(`from ${query.from.table}`);
+        }
+        if (query.joins?.length) {
+          selectParts.push(`${query.joins.length} join(s)`);
+        }
+        if (query.where?.length) {
+          selectParts.push('filtered');
+        }
+        if (query.groupBy?.length) {
+          selectParts.push('grouped');
+        }
+        return selectParts.length > 0 ? selectParts.join(', ') : 'simple';
+
+      case 'insert':
+        return `into ${query.table}`;
+
+      case 'update':
+        return `${query.table}`;
+
+      case 'delete':
+        return `from ${query.table}`;
+
+      case 'union':
+      case 'intersect':
+      case 'except':
+        return `${query.kind}`;
+
+      case 'withs':
+        const cteNames = query.withs.map(w => w.name).join(', ');
+        return `CTEs: ${cteNames}`;
+
+      default:
+        return '';
+    }
+  }
+  return '';
+}
+
+export const data_index = renderer<'data_index'>(
+  (op) => {
+    return `${formatName(op.cache?.typeName || op.input.type)}Index()`;
+  },
+  (op) => {
+    const typeName = op.cache?.typeName || op.input.type;
+    if (op.output?.libraryKnowledgeUpdated) {
+      return `Knowledge updated for type: ${typeName}`;
+    }
+    return null;
+  }
+);
+
+export const data_import = renderer<'data_import'>(
+  (op) => {
+    const typeName = op.cache?.typeName || formatName(op.input.type);
+    return `${typeName}Import("${op.input.glob}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return `Imported ${op.output.imported} new, updated ${op.output.updated}, skipped ${op.output.updateSkippedNoChanges || 0} duplicate(s)`;
+    } else if (op.cache?.importableCount !== undefined) {
+      return `Will import from ${op.cache.importableCount} file(s)`;
+    }
+    return null;
+  }
+);
+
+export const data_search = renderer<'data_search'>(
+  (op) => {
+    const typeName = op.cache?.typeName || formatName(op.input.type);
+    const query = abbreviate(op.input.query, 20);
+    return `${typeName}Search("${query}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return `Found ${pluralize(op.output.results.length, 'result')}`;
+    }
+    return null;
+  }
+);
+
+export const data_get = renderer<'data_get'>(
+  (op) => {
+    const typeName = op.cache?.typeName || formatName(op.input.type);
+    const offset = op.input.offset ?? 0;
+    const limit = op.input.limit ?? 10;
+    return `${typeName}Get(${offset}, ${limit})`;
+  },
+  (op) => {
+    if (op.output) {
+      return `Retrieved ${op.output.records.length} of ${op.output.total} records`;
+    }
+    return null;
+  }
+);
+
+export const query = renderer<'query'>(
+  (op) => {
+    // Check if the query was originally a string
+    const isStringQuery = typeof op.input.query === 'string';
+    const queryToUse = op.cache?.builtQuery || (typeof op.input.query === 'string' ? null : op.input.query);
+
+    let kind: string;
+    let description: string;
+
+    if (isStringQuery && op.cache?.queryString) {
+      // For string queries, use abbreviated string in render
+      kind = 'query';
+      description = abbreviate(op.cache.queryString, 100);
+    } else if (queryToUse) {
+      kind = getQueryKind(queryToUse);
+      description = describeQuery(queryToUse);
+    } else {
+      kind = 'query';
+      description = '';
+    }
+
+    // Determine render name based on referenced tables
+    const referencedTables = op.cache?.payload?.result?.tables || [];
+    if (referencedTables.length === 1) {
+      // Single table - use typeName format
+      const typeName = formatName(referencedTables[0]);
+      return `${typeName}Query(${kind}${description ? `: ${description}` : ''})`;
+    } else {
+      // Multiple tables or unknown - just use Query
+      return `Query(${kind}${description ? `: ${description}` : ''})`;
+    }
+  },
+  (op) => {
+    // Build summary from output (matching CLI logic from dba.tsx lines 932-946)
+    if (op.output) {
+      const parts: string[] = [];
+      if (op.output.rows?.length > 0) {
+        parts.push(`${op.output.rows.length} row${op.output.rows.length !== 1 ? 's' : ''}`);
+      }
+      if (op.output.inserted?.length) {
+        const count = op.output.inserted.reduce((a: number, b: any) => a + b.ids.length, 0);
+        parts.push(`${count} inserted`);
+      }
+      if (op.output.updated?.length) {
+        const count = op.output.updated.reduce((a: number, b: any) => a + b.ids.length, 0);
+        parts.push(`${count} updated`);
+      }
+      if (op.output.deleted?.length) {
+        const count = op.output.deleted.reduce((a: number, b: any) => a + b.ids.length, 0);
+        parts.push(`${count} deleted`);
+      }
+      return parts.length > 0 ? parts.join(', ') : 'Query executed';
+    } else if (op.cache?.canCommit && !op.cache.canCommit.canCommit) {
+      return `Cannot execute: ${op.cache.canCommit.reason}`;
+    }
+    return null;
+  }
+);
diff --git a/packages/cletus/src/browser/operations/index.tsx b/packages/cletus/src/browser/operations/index.tsx
new file mode 100644
index 0000000..2a04044
--- /dev/null
+++ b/packages/cletus/src/browser/operations/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Operation, OperationKind } from '../../schemas';
+import { RendererDisplayProps } from './render';
+
+// Import operation-specific renderers
+import * as clerk from './clerk';
+import * as planner from './planner';
+import * as architect from './architect';
+import * as dba from './dba';
+import * as artist from './artist';
+import * as internet from './internet';
+import * as librarian from './librarian';
+import * as secretary from './secretary';
+
+/**
+ * Registry of operation renderers
+ */
+const OperationRenderers: Record<OperationKind, React.FC<{
+  operation: Operation;
+}>> = {
+  // Clerk operations
+  ...clerk,
+
+  // Planner operations
+  ...planner,
+
+  // Architect operations
+  ...architect,
+
+  // DBA operations
+  ...dba,
+
+  // Artist operations
+  ...artist,
+
+  // Internet operations
+  ...internet,
+
+  // Librarian operations
+  ...librarian,
+
+  // Secretary operations
+  ...secretary,
+};
+
+/**
+ * Main operation display component that delegates to specific renderers
+ */
+export const OperationDisplay: React.FC<RendererDisplayProps> = (props) => {
+  const Renderer = OperationRenderers[props.operation.type];
+
+  return <Renderer {...props} />;
+};
diff --git a/packages/cletus/src/browser/operations/internet.tsx b/packages/cletus/src/browser/operations/internet.tsx
new file mode 100644
index 0000000..eb87781
--- /dev/null
+++ b/packages/cletus/src/browser/operations/internet.tsx
@@ -0,0 +1,53 @@
+import { abbreviate, pluralize } from '../../shared';
+import { createRenderer } from './render';
+
+const renderer = createRenderer({
+  borderColor: "border-neon-green/30",
+  bgColor: "bg-neon-green/5",
+  labelColor: "text-neon-green",
+});
+
+export const web_search = renderer<'web_search'>(
+  (op) => `WebSearch("${abbreviate(op.input.query, 30)}")`,
+  (op) => {
+    if (op.output) {
+      return `Found ${pluralize(op.output.results.length, 'result')}`;
+    }
+    return null;
+  }
+);
+
+export const web_get_page = renderer<'web_get_page'>(
+  (op) => `WebGetPage("${abbreviate(op.input.url, 30)}", ${op.input.type})`,
+  (op) => {
+    if (op.output) {
+      const parts: string[] = [pluralize(op.output.totalLines, 'line')];
+      if (op.output.matches) {
+        parts.push(pluralize(op.output.matches.length, 'match', 'matches'));
+      }
+      return parts.join(', ');
+    }
+    return null;
+  }
+);
+
+export const web_api_call = renderer<'web_api_call'>(
+  (op) => `WebApiCall(${op.input.method} "${abbreviate(op.input.url, 60)}")`,
+  (op) => {
+    if (op.output) {
+      return `${op.output.status} ${op.output.statusText} (${op.output.body.length} bytes)`;
+    }
+    return null;
+  }
+);
+
+export const web_download = renderer<'web_download'>(
+  (op) => `WebDownload("${abbreviate(op.input.url, 30)}")`,
+  (op) => {
+    if (op.output) {
+      const sizeKB = (op.output.size / 1024).toFixed(2);
+      return `${sizeKB} KB saved to ${op.output.path}`;
+    }
+    return null;
+  }
+);
diff --git a/packages/cletus/src/browser/operations/librarian.tsx b/packages/cletus/src/browser/operations/librarian.tsx
new file mode 100644
index 0000000..0c7e9d9
--- /dev/null
+++ b/packages/cletus/src/browser/operations/librarian.tsx
@@ -0,0 +1,43 @@
+import { abbreviate, pluralize } from '../../shared';
+import { createRenderer } from './render';
+
+const renderer = createRenderer({
+  borderColor: "border-purple-400/30",
+  bgColor: "bg-purple-400/5",
+  labelColor: "text-purple-400",
+});
+
+export const knowledge_search = renderer<'knowledge_search'>(
+  (op) => `KnowledgeSearch("${abbreviate(op.input.query, 25)}")`,
+  (op) => {
+    if (op.output) {
+      return `Found ${pluralize(op.output.results.length, 'result')}`;
+    }
+    return null;
+  }
+);
+
+export const knowledge_sources = renderer<'knowledge_sources'>(
+  (op) => 'KnowledgeSources()',
+  (op) => {
+    if (op.output) {
+      return `Listed ${pluralize(op.output.sources.length, 'source')}`;
+    }
+    return null;
+  }
+);
+
+export const knowledge_add = renderer<'knowledge_add'>(
+  (op) => `KnowledgeAdd("${abbreviate(op.input.text, 30)}")`,
+  (op) => op.output?.added ? `Added: "${abbreviate(op.input.text, 50)}"` : null
+);
+
+export const knowledge_delete = renderer<'knowledge_delete'>(
+  (op) => `KnowledgeDelete("${op.input.sourcePattern}")`,
+  (op) => {
+    if (op.output) {
+      return `Deleted ${pluralize(op.output.deletedCount, 'entry', 'entries')}`;
+    }
+    return null;
+  }
+);
diff --git a/packages/cletus/src/browser/operations/planner.tsx b/packages/cletus/src/browser/operations/planner.tsx
new file mode 100644
index 0000000..5773d8d
--- /dev/null
+++ b/packages/cletus/src/browser/operations/planner.tsx
@@ -0,0 +1,96 @@
+import { Operation } from '../../schemas';
+import { abbreviate, pluralize } from '../../shared';
+import { createRenderer } from './render';
+
+const renderer = createRenderer({
+  borderColor: "border-neon-purple/30",
+  bgColor: "bg-neon-purple/5",
+  labelColor: "text-neon-purple",
+});
+
+// Helper to extract todo name from analysis
+function getTodoName(op: Operation): string | null {
+  if (!op.analysis) return null;
+  // Analysis format: 'This will mark todo "name" as done.'
+  const match = op.analysis.match(/todo "([^"]+)"/);
+  return match ? match[1] : null;
+}
+
+export const todos_list = renderer<'todos_list'>(
+  (op) => 'TodosList()',
+  (op) => {
+    if (op.output) {
+      return pluralize(op.output.todos.length, 'todo');
+    }
+    return null;
+  }
+);
+
+export const todos_add = renderer<'todos_add'>(
+  (op) => `TodosAdd("${abbreviate(op.input.name, 64)}")`,
+  (op) => {
+    if (op.output) {
+      return `Added: "${op.output.name}"`;
+    }
+    return null;
+  }
+);
+
+export const todos_done = renderer<'todos_done'>(
+  (op) => {
+    const todoName = getTodoName(op);
+    return todoName ? `TodosDone("${abbreviate(todoName, 64)}")` : `TodosDone("${abbreviate(op.input.id, 64)}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return 'Marked todo as done';
+    }
+    return null;
+  }
+);
+
+export const todos_get = renderer<'todos_get'>(
+  (op) => {
+    const todoName = getTodoName(op);
+    return todoName ? `TodosGet("${abbreviate(todoName, 64)}")` : `TodosGet("${abbreviate(op.input.id, 64)}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return op.output.todo ? `Found: "${op.output.todo.name}"` : 'Todo not found';
+    }
+    return null;
+  }
+);
+
+export const todos_remove = renderer<'todos_remove'>(
+  (op) => {
+    const todoName = getTodoName(op);
+    return todoName ? `TodosRemove("${abbreviate(todoName, 64)}")` : `TodosRemove("${abbreviate(op.input.id, 64)}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return 'Removed todo';
+    }
+    return null;
+  }
+);
+
+export const todos_replace = renderer<'todos_replace'>(
+  (op) => `TodosReplace(${op.input.todos.length} todos)`,
+  (op) => {
+    if (op.output) {
+      return `Replaced with ${op.output.count} todo${op.output.count !== 1 ? 's' : ''}`;
+    }
+    return null;
+  }
+);
+
+export const todos_clear = renderer<'todos_clear'>(
+  (op) => 'TodosClear()',
+  (op) => {
+    if (op.output) {
+      return 'All todos cleared';
+    }
+    return null;
+  }
+);
diff --git a/packages/cletus/src/browser/operations/render.tsx b/packages/cletus/src/browser/operations/render.tsx
new file mode 100644
index 0000000..ee475d5
--- /dev/null
+++ b/packages/cletus/src/browser/operations/render.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Operation, OperationKind } from '../../schemas';
+import { OperationDataFor } from '../../operations/types';
+import { OperationDisplay, OperationDisplayProps } from '../components/OperationDisplay';
+
+
+export type RendererDisplayProps = Pick<OperationDisplayProps, 
+  'operation' | 
+  'operationIndex' |
+  'onApprove' |
+  'onReject' |
+  'approvalDecision' |
+  'onToggleDecision' |
+  'hasMultipleOperations'
+>;
+
+/**
+ * Create a renderer for a specific operation kind
+ * @param common 
+ * @returns 
+ */
+export const createRenderer = (common: Partial<OperationDisplayProps> = {}) => {
+  return <K extends OperationKind>(
+    getLabel: (op: OperationDataFor<K>) => string, 
+    getSummary?: (op: OperationDataFor<K>) => string | React.ReactNode | null,
+    getProps?: (op: OperationDataFor<K>) => Partial<OperationDisplayProps>
+  ) => {
+    return (props: RendererDisplayProps) => {
+      const operation = props.operation as any as OperationDataFor<K>;
+      const label = getLabel(operation);
+      const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
+      const additionalProps = getProps ? getProps(operation) : {};
+
+      return (
+        <OperationDisplay
+          {...common}
+          {...props}
+          {...additionalProps}
+          label={label}
+          summary={summary}
+        />
+      );
+    };
+  }
+};
+
+export function linkFile(path: string) {
+  return path;
+}
\ No newline at end of file
diff --git a/packages/cletus/src/browser/operations/secretary.tsx b/packages/cletus/src/browser/operations/secretary.tsx
new file mode 100644
index 0000000..831d324
--- /dev/null
+++ b/packages/cletus/src/browser/operations/secretary.tsx
@@ -0,0 +1,38 @@
+import { abbreviate, pluralize } from '../../shared';
+import { createRenderer } from './render';
+
+const renderer = createRenderer({
+  borderColor: "border-yellow-400/30",
+  bgColor: "bg-yellow-400/5",
+  labelColor: "text-yellow-400",
+});
+
+export const assistant_switch = renderer<'assistant_switch'>(
+  (op) => `AssistantSwitch("${op.input.name}")`,
+  (op) => op.output ? `Switched to assistant: ${op.input.name}` : null
+);
+
+export const assistant_update = renderer<'assistant_update'>(
+  (op) => `AssistantUpdate("${op.input.name}")`,
+  (op) => op.output ? `Updated assistant: ${op.input.name}` : null
+);
+
+export const assistant_add = renderer<'assistant_add'>(
+  (op) => `AssistantAdd("${op.input.name}")`,
+  (op) => op.output ? `Created assistant: ${op.input.name}` : null
+);
+
+export const memory_list = renderer<'memory_list'>(
+  (op) => 'MemoryList()',
+  (op) => {
+    if (op.output) {
+      return pluralize(op.output.memories.length, 'memory', 'memories');
+    }
+    return null;
+  }
+);
+
+export const memory_update = renderer<'memory_update'>(
+  (op) => `MemoryUpdate("${abbreviate(op.input.content, 30)}")`,
+  (op) => op.output ? `Added: "${abbreviate(op.input.content, 50)}"` : null
+);
diff --git a/packages/cletus/src/browser/pages/InitPage.tsx b/packages/cletus/src/browser/pages/InitPage.tsx
new file mode 100644
index 0000000..c342953
--- /dev/null
+++ b/packages/cletus/src/browser/pages/InitPage.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface InitPageProps {
+  onComplete: () => void;
+}
+
+export const InitPage: React.FC<InitPageProps> = ({ onComplete }) => {
+  return (
+    <div className="app-container">
+      <div className="main-content" style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <div style={{ maxWidth: '600px', padding: '2rem', textAlign: 'center' }}>
+          <h1 style={{ marginBottom: '1.5rem', fontSize: '2rem' }}>Welcome to Cletus</h1>
+          <p style={{ marginBottom: '1rem', color: 'var(--text-secondary)' }}>
+            Cletus needs to be initialized before you can use the browser mode.
+          </p>
+          <p style={{ marginBottom: '1rem' }}>
+            Please run Cletus in CLI mode first to complete the setup:
+          </p>
+          <pre style={{
+            background: 'var(--surface)',
+            padding: '1rem',
+            borderRadius: '6px',
+            marginBottom: '1.5rem',
+            fontSize: '1.1rem',
+          }}>
+            <code>cletus</code>
+          </pre>
+          <p style={{ marginBottom: '1.5rem', fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
+            After completing the setup wizard, click the button below to continue.
+          </p>
+          <button className="btn btn-primary" onClick={onComplete}>
+            I've completed setup - Refresh
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/pages/MainPage.tsx b/packages/cletus/src/browser/pages/MainPage.tsx
new file mode 100644
index 0000000..56d93f4
--- /dev/null
+++ b/packages/cletus/src/browser/pages/MainPage.tsx
@@ -0,0 +1,910 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ArrowLeft, CheckSquare, Settings, Trash2, MessageSquare, Sparkles } from 'lucide-react';
+import type { ChatMeta, ChatMode, Config, Message, MessageContent } from '../../schemas';
+import { AgentModeSelector } from '../components/AgentModeSelector';
+import { AssistantSelector } from '../components/AssistantSelector';
+import { ChatInput } from '../components/ChatInput';
+import { ChatSettingsDialog } from '../components/ChatSettingsDialog';
+import { ChatSidebar } from '../components/ChatSidebar';
+import { MessageList } from '../components/MessageList';
+import { ModelSelector } from '../components/ModelSelector';
+import { ModeSelector } from '../components/ModeSelector';
+import { ProfileModal } from '../components/ProfileModal';
+import { QuestionsModal } from '../components/QuestionsModal';
+import { TodosModal } from '../components/TodosModal';
+import { ToolsetSelector } from '../components/ToolsetSelector';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { ScrollArea } from '../components/ui/scroll-area';
+import type { ServerMessage } from '../websocket-types';
+import { useWebSocket } from '../WebSocketContext';
+
+interface MainPageProps {
+  config: Config;
+}
+
+export const MainPage: React.FC<MainPageProps> = ({ config }) => {
+  const { ws, isConnected } = useWebSocket();
+  const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [pendingMessage, setPendingMessage] = useState<Message | null>(null);
+  const [temporaryUserMessage, setTemporaryUserMessage] = useState<Message | null>(null);
+  const [temporaryAssistantMessage, setTemporaryAssistantMessage] = useState<Message | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [showModelSelector, setShowModelSelector] = useState(false);
+  const [showChatSettings, setShowChatSettings] = useState(false);
+  const [showTodos, setShowTodos] = useState(false);
+  const [showProfile, setShowProfile] = useState(false);
+  const [showClearConfirm, setShowClearConfirm] = useState(false);
+  const [clearConfirmText, setClearConfirmText] = useState('');
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editedTitle, setEditedTitle] = useState('');
+  const [totalCost, setTotalCost] = useState(0);
+  const [operationDecisions, setOperationDecisions] = useState<Map<number, 'approve' | 'reject'>>(new Map());
+  const [chatMetaState, setChatMetaState] = useState<ChatMeta | null>(null);
+  const [cwd, setCwd] = useState<string | undefined>(undefined);
+  const [status, setStatus] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isCreatingChat, setIsCreatingChat] = useState(false);
+  const modelsResolverRef = useRef<{
+    resolve: (models: any[]) => void;
+    reject: (error: Error) => void;
+  } | null>(null);
+  const pendingChatSelectRef = useRef<string | null>(null);
+
+  const chatMeta = chatMetaState || config.chats.find((c) => c.id === selectedChatId);
+
+  // Auto-select last chat on mount
+  useEffect(() => {
+    if (!selectedChatId && config.chats.length > 0) {
+      const lastChat = [...config.chats].sort((a, b) => b.updated - a.updated)[0];
+      if (lastChat) {
+        setSelectedChatId(lastChat.id);
+        setLoading(true);
+        window.history.replaceState({}, '', `/chat/${lastChat.id}`);
+      }
+    }
+  }, [config.chats, selectedChatId]);
+
+  // Handle pending chat selection after config updates
+  useEffect(() => {
+    if (pendingChatSelectRef.current) {
+      const chatToSelect = pendingChatSelectRef.current;
+
+      // Check if chat exists in config
+      const chatExists = config.chats.find(c => c.id === chatToSelect);
+      if (chatExists) {
+        // Chat is in config, select it now
+        pendingChatSelectRef.current = null;
+        handleChatSelect(chatToSelect);
+        // Clear creating state when chat is selected
+        setIsCreatingChat(false);
+      }
+    }
+  }, [config.chats]);
+
+  // Subscribe to chat when selected or when reconnecting
+  useEffect(() => {
+    if (!selectedChatId || !isConnected || !ws) return;
+
+    // Subscribe to the chat (will receive operation_state and messages)
+    ws.send({ type: 'subscribe_chat', data: { chatId: selectedChatId } });
+    ws.send({ type: 'get_messages', data: { chatId: selectedChatId } });
+
+    // Cleanup: unsubscribe when effect re-runs or component unmounts
+    return () => {
+      if (ws && ws.isOpen()) {
+        ws.send({ type: 'unsubscribe_chat', data: { chatId: selectedChatId } });
+      }
+    };
+  }, [selectedChatId, isConnected, ws]);
+
+  // Listen for WebSocket messages
+  useEffect(() => {
+    if (!ws) return;
+
+    const unsubscribe = ws.onMessage((message) => {
+      handleServerMessage(message);
+    });
+
+    return unsubscribe;
+  }, [ws]);
+
+  // State that changes and the handler function needs
+  const getHandlerState = () => ({
+    selectedChatId,
+    isCreatingChat,
+  });
+  const handleState = useRef(getHandlerState())
+  useEffect(() => {
+    handleState.current = getHandlerState();
+  });
+
+  // Handle incoming server messages
+  const handleServerMessage = (message: ServerMessage) => {
+    const { isCreatingChat, selectedChatId } = handleState.current;
+
+    const isChatCreation = isCreatingChat && message.type === 'chat_created';
+    const isAnotherChat = 'chatId' in message.data && message.data.chatId !== selectedChatId;
+
+    if (!isChatCreation && isAnotherChat) {
+      console.log('[MainPage] Ignoring message for different chat:', { selectedChatId, message, isCreatingChat });
+
+      // This event is for a different chat, ignore it
+      return;
+    }
+
+    switch (message.type) {
+      case 'messages':
+        setMessages(message.data.messages || []);
+        setLoading(false);
+        break;
+
+      case 'message_added':
+        // Clear temporary user message when real user message is added
+        if (message.data.message.role === 'user') {
+          setTemporaryUserMessage(null);
+        }
+        // Add the message to the messages array
+        setMessages(prev => [...prev, message.data.message]);
+        break;
+
+      case 'pending_update':
+        // Clear temporary assistant message when real pending message arrives
+        setTemporaryAssistantMessage(null);
+        setPendingMessage(message.data.pending);
+        break;
+
+      case 'message_updated':
+        setMessages(prev => prev.map(msg =>
+          msg.created === message.data.message.created ? message.data.message : msg
+        ));
+        break;
+
+      case 'messages_updated':
+        if (message.data.messages) {
+          setMessages(message.data.messages);
+        }
+        break;
+
+      case 'response_complete':
+        setPendingMessage(null);
+        setTemporaryAssistantMessage(null);
+        setIsProcessing(false);
+        setStatus('');
+        if (message.data.message) {
+          setMessages(prev => {
+            if (!prev.find(m => m.created === message.data.message.created)) {
+              return [...prev, message.data.message];
+            }
+            return prev;
+          });
+        }
+        break;
+
+      case 'usage_update':
+        if (message.data.accumulatedCost !== undefined) {
+          setTotalCost(message.data.accumulatedCost);
+        }
+        break;
+
+      case 'chat_updated':
+        if (message.data.chat) {
+          setChatMetaState(message.data.chat);
+          send({ type: 'get_config' });
+        }
+        if (message.data.cwd !== undefined) {
+          setCwd(message.data.cwd);
+        }
+        break;
+
+      case 'status_update':
+        setStatus(message.data.status);
+        break;
+
+      case 'processing':
+        setIsProcessing(message.data.isProcessing);
+        if (!message.data.isProcessing) {
+          setStatus('');
+        }
+        break;
+
+      case 'operation_state':
+        // Sync operation state when subscribing to a chat
+        setIsProcessing(message.data.status === 'processing');
+        if (message.data.pendingMessage) {
+          setPendingMessage(message.data.pendingMessage);
+        }
+        break;
+
+      case 'chat_subscribed':
+        // Chat subscription confirmed
+        break;
+
+      case 'models':
+        if (modelsResolverRef.current) {
+          modelsResolverRef.current.resolve(message.data.models || []);
+          modelsResolverRef.current = null;
+        }
+        break;
+
+      case 'config':
+        // Config received
+        break;
+
+      case 'chat_created':
+        // Store the chat to select after config updates
+        if (message.data.chatId) {
+          pendingChatSelectRef.current = message.data.chatId;
+        }
+
+        // Refresh config - the effect will handle selection
+        send({ type: 'get_config' });
+        break;
+
+      case 'chat_deleted':
+        // Clear selection if deleted chat was selected
+        if (message.data.chatId === selectedChatId) {
+          setSelectedChatId(null);
+          setMessages([]);
+          setPendingMessage(null);
+          setTemporaryUserMessage(null);
+          setTemporaryAssistantMessage(null);
+        }
+        // Refresh config - auto-select effect will handle selecting another chat
+        send({ type: 'get_config' });
+        break;
+
+      case 'error':
+        console.error('Server error:', message.data.message);
+        setIsProcessing(false);
+        setIsCreatingChat(false); // Clear creating state on error
+        setStatus('Error: ' + message.data.message);
+        if (modelsResolverRef.current) {
+          modelsResolverRef.current.reject(new Error(message.data.message));
+          modelsResolverRef.current = null;
+        }
+        setLoading(false);
+        break;
+
+      default:
+        console.warn('Unhandled message type:', (message as any).type);
+    }
+  };
+
+  const send = (message: any) => {
+    if (ws && ws.isOpen()) {
+      ws.send(message);
+    } else {
+      console.error('WebSocket not connected');
+    }
+  };
+
+  const handleChatSelect = (chatId: string) => {
+    // Unsubscribe from previous chat
+    if (selectedChatId && ws) {
+      send({ type: 'unsubscribe_chat', data: { chatId: selectedChatId } });
+    }
+
+    setSelectedChatId(chatId);
+    setMessages([]);
+    setPendingMessage(null);
+    setTemporaryUserMessage(null);
+    setTemporaryAssistantMessage(null);
+    setStatus(''); // Clear any previous error or status messages
+    setLoading(true);
+    window.history.pushState({}, '', `/chat/${chatId}`);
+
+    // Subscribe to new chat (will receive operation_state)
+    if (ws) {
+      send({ type: 'subscribe_chat', data: { chatId } });
+    }
+  };
+
+  const handleSendMessage = (content: MessageContent[]) => {
+    if (!selectedChatId) return;
+
+    const now = Date.now();
+
+    // Create temporary user message for immediate display
+    const tempUserMsg: Message = {
+      role: 'user',
+      content,
+      created: now-2,
+    };
+    setTemporaryUserMessage(tempUserMsg);
+
+    // Create temporary assistant message placeholder
+    const tempAssistantMsg: Message = {
+      role: 'assistant',
+      content: [],
+      created: now-1,
+    };
+    setTemporaryAssistantMessage(tempAssistantMsg);
+
+    send({
+      type: 'send_message',
+      data: { chatId: selectedChatId, content },
+    });
+    // Server will send 'processing' message to update isProcessing state
+  };
+
+  const handleCancel = () => {
+    if (!selectedChatId) return;
+    send({ type: 'cancel', data: { chatId: selectedChatId } });
+    // Server will send 'processing' message to update isProcessing state
+  };
+
+  const handleQuestionsSubmit = (questionAnswers: Record<number, Set<number>>, questionCustomAnswers: Record<number, string>) => {
+    if (!selectedChatId) return;
+    const answersArray: Record<number, number[]> = {};
+    for (const [key, value] of Object.entries(questionAnswers)) {
+      answersArray[Number(key)] = Array.from(value);
+    }
+
+    send({
+      type: 'submit_question_answers',
+      data: { chatId: selectedChatId, questionAnswers: answersArray, questionCustomAnswers },
+    });
+    // Server will send 'processing' message to update isProcessing state
+  };
+
+  const handleQuestionsCancel = () => {
+    if (!selectedChatId) return;
+    send({
+      type: 'update_chat_meta',
+      data: { chatId: selectedChatId, updates: { questions: [] } },
+    });
+  };
+
+  const handleModeChange = (mode: ChatMode) => {
+    if (!selectedChatId) return;
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { mode } } });
+  };
+
+  const handleAgentModeChange = (agentMode: 'plan' | 'default' | undefined) => {
+    if (!selectedChatId) return;
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { agentMode } } });
+  };
+
+  const handleToolsetChange = (toolset: string | null) => {
+    if (!selectedChatId) return;
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { toolset: toolset } } });
+  };
+
+  const handleAssistantChange = (assistant: string) => {
+    if (!selectedChatId) return;
+    const assistantValue = assistant === 'none' ? undefined : assistant;
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { assistant: assistantValue } } });
+  };
+
+  const handleModelChange = (model: string) => {
+    if (!selectedChatId) return;
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { model } } });
+  };
+
+  const handleFetchModels = async (): Promise<any[]> => {
+    return new Promise((resolve, reject) => {
+      if (!ws || !ws.isOpen()) {
+        reject(new Error('WebSocket not connected'));
+        return;
+      }
+
+      modelsResolverRef.current = { resolve, reject };
+
+      const timeout = setTimeout(() => {
+        if (modelsResolverRef.current) {
+          modelsResolverRef.current.reject(new Error('Timeout fetching models'));
+          modelsResolverRef.current = null;
+        }
+      }, 10000);
+
+      ws.send({ type: 'get_models' });
+    });
+  };
+
+  const handleChatSettingsSave = (updates: { title?: string; prompt?: string; cwd?: string }) => {
+    if (!selectedChatId) return;
+    const { cwd: newCwd, ...metaUpdates } = updates;
+    send({
+      type: 'update_chat_meta',
+      data: { chatId: selectedChatId, updates: metaUpdates, cwd: newCwd },
+    });
+  };
+
+  const handleAddTodo = (todo: string) => {
+    if (!selectedChatId) return;
+    send({ type: 'add_todo', data: { chatId: selectedChatId, todo } });
+  };
+
+  const handleToggleTodo = (index: number) => {
+    if (!selectedChatId) return;
+    send({ type: 'toggle_todo', data: { chatId: selectedChatId, index } });
+  };
+
+  const handleRemoveTodo = (index: number) => {
+    if (!selectedChatId) return;
+    send({ type: 'remove_todo', data: { chatId: selectedChatId, index } });
+  };
+
+  const handleClearTodos = () => {
+    if (!selectedChatId) return;
+    if (confirm('Are you sure you want to clear all todos?')) {
+      send({ type: 'clear_todos', data: { chatId: selectedChatId } });
+    }
+  };
+
+  const handleClearMessages = () => {
+    setShowClearConfirm(true);
+  };
+
+  const handleConfirmClear = () => {
+    if (!selectedChatId) return;
+    if (clearConfirmText === 'CLEAR') {
+      send({ type: 'clear_messages', data: { chatId: selectedChatId } });
+      setMessages([]);
+      setShowClearConfirm(false);
+      setClearConfirmText('');
+    }
+  };
+
+  const handleStartEditTitle = () => {
+    setEditedTitle(chatMeta?.title || '');
+    setIsEditingTitle(true);
+  };
+
+  const handleSaveTitle = () => {
+    if (!selectedChatId || !editedTitle.trim() || editedTitle === chatMeta?.title) {
+      setIsEditingTitle(false);
+      return;
+    }
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { title: editedTitle.trim() } } });
+    setIsEditingTitle(false);
+  };
+
+  const handleCancelEditTitle = () => {
+    setIsEditingTitle(false);
+    setEditedTitle('');
+  };
+
+  const handleDeleteChat = () => {
+    if (!selectedChatId || !chatMeta) return;
+    if (confirm(`Are you sure you want to delete "${chatMeta.title}"? This cannot be undone.`)) {
+      send({ type: 'delete_chat', data: { chatId: selectedChatId } });
+      setSelectedChatId(null);
+      setMessages([]);
+      setTimeout(() => send({ type: 'get_config' }), 500);
+    }
+  };
+
+  const handleOperationApproval = (message: Message, approved: number[], rejected: number[]) => {
+    if (!selectedChatId) return;
+
+    // Helper function to update operations in a message
+    const updateMessageOperations = (msg: Message) => {
+      if (msg.created === message.created) {
+        const updatedOperations = (msg.operations || []).map((op, idx) => {
+          if (approved.includes(idx)) {
+            return { ...op, status: 'doing' as const };
+          } else if (rejected.includes(idx)) {
+            return { ...op, status: 'rejected' as const };
+          }
+          return op;
+        });
+        return { ...msg, operations: updatedOperations };
+      }
+      return msg;
+    };
+
+    // Update local state immediately to show visual feedback
+    setMessages(prev => prev.map(updateMessageOperations));
+
+    // Also update pending message if it matches
+    setPendingMessage(prev => prev ? updateMessageOperations(prev) : null);
+
+    send({
+      type: 'handle_operations',
+      data: {
+        chatId: selectedChatId,
+        messageCreated: message.created,
+        approved,
+        rejected,
+      },
+    });
+    setOperationDecisions(new Map());
+    // Server will send 'processing' message to update isProcessing state
+  };
+
+  const handleToggleOperationDecision = (idx: number, decision: 'approve' | 'reject') => {
+    const newDecisions = new Map(operationDecisions);
+    newDecisions.set(idx, decision);
+    setOperationDecisions(newDecisions);
+  };
+
+  const handleApproveAllOperations = () => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage || lastMessage.role !== 'assistant') return;
+
+    const approvableOps = (lastMessage.operations || [])
+      .map((op, idx) => ({ op, idx }))
+      .filter(({ op }) => op.status === 'analyzed');
+
+    const approved = approvableOps.map(({ idx }) => idx);
+    handleOperationApproval(lastMessage, approved, []);
+  };
+
+  const handleRejectAllOperations = () => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage || lastMessage.role !== 'assistant') return;
+
+    const approvableOps = (lastMessage.operations || [])
+      .map((op, idx) => ({ op, idx }))
+      .filter(({ op }) => op.status === 'analyzed');
+
+    const rejected = approvableOps.map(({ idx }) => idx);
+    handleOperationApproval(lastMessage, [], rejected);
+  };
+
+  const handleSubmitOperationDecisions = () => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage || lastMessage.role !== 'assistant') return;
+
+    const approvableOps = (lastMessage.operations || [])
+      .map((op, idx) => ({ op, idx }))
+      .filter(({ op }) => op.status === 'analyzed');
+
+    const approved: number[] = [];
+    const rejected: number[] = [];
+
+    approvableOps.forEach(({ idx }) => {
+      const decision = operationDecisions.get(idx);
+      if (decision === 'approve') {
+        approved.push(idx);
+      } else if (decision === 'reject') {
+        rejected.push(idx);
+      }
+    });
+
+    handleOperationApproval(lastMessage, approved, rejected);
+  };
+
+  const handleProfileSave = (updates: Partial<Config['user']>) => {
+    send({ type: 'update_user', data: { updates } });
+  };
+
+  const handleCreateChat = () => {
+    // Set loading state immediately
+    setIsCreatingChat(true);
+
+    // Generate timestamp-based name
+    const now = new Date();
+    const day = now.getDate();
+    const month = now.getMonth() + 1; // 0-indexed
+    const year = now.getFullYear();
+    const name = `New Chat on ${day}/${month}/${year}`;
+
+    send({
+      type: 'create_chat',
+      data: { name },
+    });
+  };
+
+  // Get the actual last message being rendered (including pending and temporary)
+  let allMessages = [...messages];
+
+  // Add temporary user message if it exists
+  if (temporaryUserMessage) {
+    allMessages.push(temporaryUserMessage);
+  }
+
+  // Add temporary assistant message if it exists (and no real pending message yet)
+  if (temporaryAssistantMessage && !pendingMessage) {
+    allMessages.push(temporaryAssistantMessage);
+  }
+
+  // Add pending message if it exists (replaces temporary assistant message)
+  if (pendingMessage) {
+    allMessages.push(pendingMessage);
+  }
+
+  const lastMessage = allMessages.length > 0 ? allMessages[allMessages.length - 1] : null;
+  const lastMessagePendingOps = lastMessage?.role === 'assistant'
+    ? (lastMessage.operations || []).filter(op => op.status === 'analyzed')
+    : [];
+  const hasMultiplePendingOps = lastMessagePendingOps.length > 1;
+  const allOperationsDecided = lastMessagePendingOps.every((_op, idx) =>
+    operationDecisions.has(idx)
+  );
+  const hasOperationsProcessing = lastMessage?.role === 'assistant'
+    ? (lastMessage.operations || []).some(op => op.status === 'doing')
+    : false;
+
+  // Empty state when no chat is selected
+  if (!selectedChatId || !chatMeta) {
+    return (
+      <div className="flex h-screen bg-background">
+        <ChatSidebar
+          config={config}
+          currentChatId={null}
+          isCollapsed={sidebarCollapsed}
+          onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+          onChatSelect={handleChatSelect}
+          onProfileClick={() => setShowProfile(true)}
+          onCreateChat={handleCreateChat}
+          isCreatingChat={isCreatingChat}
+        />
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center space-y-6">
+            <Sparkles className="w-24 h-24 mx-auto text-neon-cyan opacity-50" />
+            <div>
+              <h2 className="text-3xl font-bold neon-text-cyan mb-2">Welcome to Cletus</h2>
+              <p className="text-muted-foreground">
+                {config.chats.length === 0
+                  ? 'Create a new chat to get started'
+                  : 'Select a chat from the sidebar'}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {showProfile && (
+          <ProfileModal
+            user={config.user}
+            onSave={handleProfileSave}
+            onClose={() => setShowProfile(false)}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen bg-background">
+      <ChatSidebar
+        config={config}
+        currentChatId={selectedChatId}
+        isCollapsed={sidebarCollapsed}
+        onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+        onChatSelect={handleChatSelect}
+        onProfileClick={() => setShowProfile(true)}
+        onCreateChat={handleCreateChat}
+        isCreatingChat={isCreatingChat}
+      />
+
+      {/* Main Chat Area */}
+      <div className="flex-1 flex flex-col">
+        {/* Chat Header */}
+        <div className="relative z-10 border-b border-border bg-card/30 backdrop-blur-sm p-4">
+          <div className="flex items-center gap-4">
+            <div className="flex-1 flex items-center gap-2">
+              {isEditingTitle ? (
+                <div className="flex items-center gap-2 flex-1">
+                  <Input
+                    type="text"
+                    value={editedTitle}
+                    onChange={(e) => setEditedTitle(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        handleSaveTitle();
+                      } else if (e.key === 'Escape') {
+                        handleCancelEditTitle();
+                      }
+                    }}
+                    className="flex-1 max-w-md"
+                    autoFocus
+                  />
+                  <Button variant="ghost" size="sm" onClick={handleSaveTitle}>
+                    Save
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={handleCancelEditTitle}>
+                    Cancel
+                  </Button>
+                </div>
+              ) : (
+                <>
+                  <h2
+                    className="text-xl font-bold neon-text-cyan cursor-pointer hover:opacity-80 transition-opacity"
+                    onClick={handleStartEditTitle}
+                    title="Click to edit title"
+                  >
+                    {chatMeta.title}
+                  </h2>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={handleDeleteChat}
+                    title="Delete chat"
+                    className="text-muted-foreground hover:text-destructive"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </>
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              <AssistantSelector
+                assistants={config.assistants}
+                currentAssistant={chatMeta.assistant}
+                onChange={handleAssistantChange}
+              />
+              <ModeSelector mode={chatMeta.mode} onChange={handleModeChange} />
+              <AgentModeSelector
+                agentMode={chatMeta.agentMode || 'default'}
+                onChange={handleAgentModeChange}
+              />
+              <ToolsetSelector
+                toolset={chatMeta.toolset}
+                onChange={handleToolsetChange}
+              />
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setShowTodos(true)}
+                title="Todos"
+              >
+                <CheckSquare className="w-5 h-5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setShowChatSettings(true)}
+                title="Chat Settings"
+              >
+                <Settings className="w-5 h-5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleClearMessages}
+                title="Clear messages"
+              >
+                <Trash2 className="w-5 h-5" />
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <>
+          {/* Messages Area */}
+          <ScrollArea className="flex-1 p-6">
+            <MessageList
+              messages={allMessages}
+              loading={loading}
+              operationDecisions={operationDecisions}
+              onToggleOperationDecision={handleToggleOperationDecision}
+              onApproveOperation={(msg, idx) => handleOperationApproval(msg, [idx], [])}
+              onRejectOperation={(msg, idx) => handleOperationApproval(msg, [], [idx])}
+            />
+          </ScrollArea>
+
+          {/* Input Area */}
+          <div className="border-t border-border bg-card/30 backdrop-blur-sm">
+            <ChatInput
+              chatId={selectedChatId}
+              chatMeta={chatMeta}
+              config={config}
+              messageCount={messages.length}
+              totalCost={totalCost}
+              status={status}
+              isProcessing={isProcessing}
+              onSendMessage={handleSendMessage}
+              onCancel={handleCancel}
+              onModelClick={() => setShowModelSelector(true)}
+              hasMultiplePendingOperations={hasMultiplePendingOps}
+              allOperationsDecided={allOperationsDecided}
+              hasOperationsProcessing={hasOperationsProcessing}
+              onApproveAll={handleApproveAllOperations}
+              onRejectAll={handleRejectAllOperations}
+              onSubmitDecisions={handleSubmitOperationDecisions}
+            />
+          </div>
+        </>
+      </div>
+
+      {/* Modals */}
+      {showModelSelector && (
+        <ModelSelector
+          currentModel={chatMeta.model || config.user.models?.chat || ''}
+          onSelect={handleModelChange}
+          onClose={() => setShowModelSelector(false)}
+          onFetchModels={handleFetchModels}
+        />
+      )}
+
+      {showChatSettings && (
+        <ChatSettingsDialog
+          title={chatMeta.title}
+          prompt={chatMeta.prompt}
+          cwd={cwd}
+          onSave={handleChatSettingsSave}
+          onClose={() => setShowChatSettings(false)}
+        />
+      )}
+
+      {showTodos && (
+        <TodosModal
+          todos={chatMeta.todos}
+          onAddTodo={handleAddTodo}
+          onToggleTodo={handleToggleTodo}
+          onRemoveTodo={handleRemoveTodo}
+          onClearTodos={handleClearTodos}
+          onClose={() => setShowTodos(false)}
+        />
+      )}
+
+      {chatMeta.questions && chatMeta.questions.length > 0 && !isProcessing && (
+        <QuestionsModal
+          questions={chatMeta.questions}
+          onSubmit={handleQuestionsSubmit}
+          onCancel={handleQuestionsCancel}
+        />
+      )}
+
+      {showProfile && (
+        <ProfileModal
+          user={config.user}
+          onSave={handleProfileSave}
+          onClose={() => setShowProfile(false)}
+        />
+      )}
+
+      {showClearConfirm && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+          onClick={() => {
+            setShowClearConfirm(false);
+            setClearConfirmText('');
+          }}
+        >
+          <div
+            className="relative w-full max-w-md bg-card rounded-lg border border-border shadow-2xl p-6"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h2 className="text-xl font-bold text-destructive mb-4">Clear All Messages</h2>
+            <p className="text-foreground mb-4">
+              This will permanently delete all messages in this chat. This action cannot be undone.
+            </p>
+            <p className="text-muted-foreground mb-4">
+              Type <span className="font-mono font-bold text-foreground">CLEAR</span> to confirm:
+            </p>
+            <Input
+              type="text"
+              value={clearConfirmText}
+              onChange={(e) => setClearConfirmText(e.target.value)}
+              placeholder="Type CLEAR"
+              className="mb-4 font-mono"
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleConfirmClear();
+                } else if (e.key === 'Escape') {
+                  setShowClearConfirm(false);
+                  setClearConfirmText('');
+                }
+              }}
+            />
+            <div className="flex justify-end gap-3">
+              <Button
+                variant="ghost"
+                onClick={() => {
+                  setShowClearConfirm(false);
+                  setClearConfirmText('');
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleConfirmClear}
+                disabled={clearConfirmText !== 'CLEAR'}
+              >
+                Clear Messages
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
new file mode 100644
index 0000000..0400ef6
--- /dev/null
+++ b/packages/cletus/src/browser/server.ts
@@ -0,0 +1,1091 @@
+import http from 'http';
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { WebSocketServer, WebSocket } from 'ws';
+import { configExists } from '../file-manager';
+import { ConfigFile } from '../config';
+import { ChatFile } from '../chat';
+import type { Message, ChatMeta, MessageContent, OperationStatus } from '../schemas';
+import type { ClientMessage, ServerMessage } from './websocket-types';
+import { OperationManager } from '../operations/manager';
+import { CletusAI, createCletusAI } from '../ai';
+import { CletusChatAgent, createChatAgent, initTools } from '../agents/chat-agent';
+import { OrchestratorEvent, runChatOrchestrator } from '../agents/chat-orchestrator';
+import { ChatOperationManager } from './chat-operation-manager';
+import { ConnectionRegistry } from './connection-registry';
+import { BroadcastManager } from './broadcast-manager';
+import { send } from 'process';
+
+const __serverFilename = fileURLToPath(import.meta.url);
+const __serverDirname = path.dirname(__serverFilename);
+
+// Chat file cache with automatic cleanup
+interface ChatCacheEntry {
+  chatFile: ChatFile;
+  lastAccessed: number;
+}
+
+const chatCache = new Map<string, ChatCacheEntry>();
+const CACHE_EXPIRY_MS = 60 * 60 * 1000; // 1 hour
+
+async function getChat(chatId: string): Promise<ChatFile> {
+  const now = Date.now();
+
+  // Check cache
+  const cached = chatCache.get(chatId);
+  if (cached) {
+    cached.lastAccessed = now;
+    return cached.chatFile;
+  }
+
+  // Create and load new chat file
+  const chatFile = new ChatFile(chatId);
+  await chatFile.load();
+
+  chatCache.set(chatId, {
+    chatFile,
+    lastAccessed: now,
+  });
+
+  return chatFile;
+}
+
+function cleanupExpiredChats(): void {
+  const now = Date.now();
+  for (const [chatId, entry] of chatCache.entries()) {
+    if (now - entry.lastAccessed > CACHE_EXPIRY_MS) {
+      chatCache.delete(chatId);
+    }
+  }
+}
+
+function removeChat(chatId: string): void {
+  chatCache.delete(chatId);
+}
+
+// Run cleanup every 15 minutes
+setInterval(cleanupExpiredChats, 15 * 60 * 1000);
+
+// Server-level state (shared across all connections)
+const connectionRegistry = new ConnectionRegistry();
+const chatOperationManager = new ChatOperationManager();
+const broadcastManager = new BroadcastManager(connectionRegistry, chatOperationManager);
+
+// Periodic cleanup of old completed operations
+setInterval(() => chatOperationManager.cleanup(), 5 * 60 * 1000);
+
+export async function startBrowserServer(port: number = 3000): Promise<void> {
+  const server = http.createServer(async (req, res) => {
+    const url = req.url || '/';
+
+    try {
+      // Handle file serving route
+      if (url.startsWith('/file?')) {
+        await serveLocalFile(url, res);
+        return;
+      }
+
+      // Serve static files only
+      await serveStaticFile(url, res);
+    } catch (error) {
+      console.error('Server error:', error);
+      res.writeHead(500);
+      res.end('Internal server error');
+    }
+  });
+
+  // WebSocket server for all communication
+  const wss = new WebSocketServer({ server });
+  const clients = new Set<WebSocket>();
+
+  wss.on('connection', (ws) => {
+    clients.add(ws);
+    ws.on('close', () => {
+      clients.delete(ws);
+    });
+    handleWebSocketConnection(ws).catch(error => {
+      console.error('WebSocket connection error:', error);
+      ws.close();
+    });
+  });
+
+  server.listen(port, '127.0.0.1', () => {
+    console.log('\n╔════════════════════════════════════════╗');
+    console.log('║   Cletus Browser Mode                  ║');
+    console.log('╚════════════════════════════════════════╝\n');
+    console.log(`  🌐 Server: http://localhost:${port}`);
+    console.log('  ⌨️  Press Ctrl+C to exit\n');
+  });
+
+  // Handle & log these to avoid silent crashes
+  process.on('uncaughtException', (err => {
+    console.error('Uncaught exception:', err);
+  }));
+
+  process.on('unhandledRejection', (reason, promise) => {
+    console.error('Unhandled promise rejection:', reason);
+  });
+
+  process.on('warning', (warning) => {
+    console.warn('Process warning:', warning);
+  });
+
+  // Handle graceful shutdown
+  process.on('SIGINT', () => {
+    console.log('\n\nShutting down...');
+
+    // Abort all ongoing operations
+    chatOperationManager.abortAll();
+
+    // Broadcast shutdown message to all clients
+    for (const connection of connectionRegistry.getAllConnections()) {
+      if (connection.activeChatId && connection.ws.readyState === 1) {
+        connection.ws.send(JSON.stringify({
+          type: 'error',
+          data: {
+            chatId: connection.activeChatId,
+            message: 'Server shutting down - operation cancelled'
+          }
+        } as ServerMessage));
+      }
+    }
+
+    // Force close all WebSocket connections
+    clients.forEach((ws) => {
+      ws.close();
+    });
+
+    wss.close();
+    server.close(() => {
+      console.log('Server closed');
+      process.exit(0);
+    });
+
+    // Force exit after 1 second if server hasn't closed
+    setTimeout(() => {
+      console.log('Forcing shutdown...');
+      process.exit(0);
+    }, 1000);
+  });
+}
+
+async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
+  // Register this connection
+  const connectionId = connectionRegistry.registerConnection(ws);
+
+  let config: ConfigFile | null = null;
+  let configPromise: Promise<boolean> | null = null;
+  let ai: CletusAI | null = null;
+  let chatAgent: CletusChatAgent | null = null;
+  let configUpdateQueue: Promise<void> = Promise.resolve();
+
+  // Type-safe message sender for this connection
+  const sendMessage = (message: ServerMessage) => {
+    broadcastManager.sendToConnection(connectionId, message);
+  };
+
+  // Helper to send errors
+  const sendError = (e: any, message: string = typeof e === 'string' ? e : e.message) => {
+    sendMessage({
+      type: 'error',
+      data: { message },
+    });
+
+    console.error(e);
+  };
+
+  // Load config once at connection time
+  const ensureConfig = async () => {
+    if (!configPromise) {
+      configPromise = (async () => {
+        const exists = await configExists();
+        if (!exists) {
+          return false;
+        }
+        config = new ConfigFile();
+        await config.load();
+        return true;
+      })();
+    }
+    return await configPromise;
+  };
+
+  // Lazy-load AI and chat agent once
+  const ensureAI = async () => {
+    if (!ai || !chatAgent) {
+      await ensureConfig();
+      if (!config) {
+        throw new Error('Config not available');
+      }
+      ai = createCletusAI(config);
+      await initTools(ai);
+      chatAgent = createChatAgent(ai);
+    }
+    return { ai, chatAgent };
+  };
+
+  const withConfig = async <T>(fn: (config: ConfigFile) => T) => {
+    try {
+      if (!await ensureConfig()) {
+        sendMessage({
+          type: 'config_not_found',
+          data: {},
+        });
+        return;
+      }
+    } catch (e: any) {
+      sendError(e);
+      return;
+    }
+
+    // Ensure config is loaded
+    if (config) {
+      try {
+        return await fn(config);
+      } catch (e: any) {
+        sendError(e);
+      }
+    } else {
+      sendMessage({
+        type: 'config_not_found',
+        data: {},
+      });
+    }
+  };
+
+  // Helper to serialize config update operations
+  const withConfigUpdate = async <T>(fn: (config: ConfigFile) => Promise<T>) => {
+    // Queue this update to run after previous updates complete
+    const previousQueue = configUpdateQueue;
+
+    let resolveUpdate: () => void;
+    configUpdateQueue = new Promise<void>(resolve => {
+      resolveUpdate = resolve;
+    });
+
+    try {
+      // Wait for previous updates to complete
+      await previousQueue;
+
+      // Reload config to get latest state
+      if (config) {
+        await config.load();
+      }
+
+      // Run the update
+      return await withConfig(fn);
+    } finally {
+      // Mark this update as complete
+      resolveUpdate!();
+    }
+  };
+
+  const withChatFile = async <T>(chatId: string, fn: (chatFile: ChatFile, chat: ChatMeta, config: ConfigFile) => T) => {
+    return await withConfig(async (config) => {
+      let chatFile: ChatFile;
+      try {
+        chatFile = await getChat(chatId);
+      } catch (e: any) {
+        sendError(e, 'Failed to load chat file');
+        return;
+      }
+
+      const chat = config.getChats().find(c => c.id === chatId);
+      if (!chat) {
+        sendError('Chat not found');
+
+        return;
+      }
+
+      try {
+        return await fn(chatFile, chat, config);
+      } catch (e: any) {
+        sendError(e, 'Failed to process chat file');
+      }
+    });
+  };
+
+  /**
+   * Save or update a message in the chat file.
+   * If message exists (by created timestamp), update it. Otherwise, add it.
+   */
+  const saveOrUpdateMessage = async (chatFile: ChatFile, message: Message) => {
+    const messages = chatFile.getMessages();
+    const existingMessage = messages.find(m => m.created === message.created);
+
+    if (existingMessage) {
+      await chatFile.updateMessage(message);
+    } else {
+      await chatFile.addMessage(message);
+    }
+  };
+
+  const handleOrchestratorEvent = (chatId: string, event: OrchestratorEvent, chatFile: ChatFile) => {
+    // Handle orchestrator events
+    switch (event.type) {
+      case 'pendingUpdate':
+        // Save pending message immediately to chat file so it persists
+        // This ensures messages are never lost due to errors or cancellations
+        fireAndForget(async () => {
+          await saveOrUpdateMessage(chatFile, event.pending);
+        });
+        break;
+      case 'update':
+        fireAndForget(chatFile.updateMessage(event.message));
+        break;
+      case 'complete':
+        // Update the message if it exists (from pending), or add it if it doesn't
+        fireAndForget(async () => {
+          if (event.message.content.length > 0) {
+            await saveOrUpdateMessage(chatFile, event.message);
+          }
+        });
+        break;
+      case 'error':
+        // Try to save any pending message state before reporting error
+        // This ensures partial progress isn't lost when errors occur
+        fireAndForget(async () => {
+          const messages = chatFile.getMessages();
+          // Find the most recent assistant message that might be pending
+          const lastAssistantMsg = messages.filter(m => m.role === 'assistant').pop();
+          if (lastAssistantMsg) {
+            // Update the message to persist any partial progress
+            await chatFile.updateMessage(lastAssistantMsg);
+          }
+        });
+        break;
+    }
+
+    // Broadcast event to all clients watching this chat
+    broadcastManager.broadcastOperationEvent(chatId, event);
+  };
+
+  const runChat = async (chatFile: ChatFile, chatMeta: ChatMeta, config: ConfigFile) => {
+    const chatId = chatMeta.id;
+
+    // Ensure AI and chat agent are loaded
+    const { ai: aiInstance, chatAgent: chatAgentInstance } = await ensureAI();
+
+    // Clear usage before running orchestrator
+    const clearUsage = () => {
+      const defaultContext = aiInstance.config.defaultContext;
+      if (defaultContext && defaultContext.usage) {
+        defaultContext.usage.accumulated = {};
+        defaultContext.usage.accumulatedCost = 0;
+      }
+    };
+
+    // Get current usage
+    const getUsage = () => {
+      const defaultContext = aiInstance.config.defaultContext;
+      if (defaultContext && defaultContext.usage) {
+        return {
+          accumulated: defaultContext.usage.accumulated,
+          accumulatedCost: defaultContext.usage.accumulatedCost,
+        };
+      }
+      return { accumulated: {}, accumulatedCost: 0 };
+    };
+
+    // Start operation for this chat (get chat-scoped abort controller)
+    const abortController = chatOperationManager.startOperation(chatId);
+
+    // Broadcast processing start to all clients watching this chat
+    broadcastManager.broadcastToChat(chatId, {
+      type: 'processing',
+      data: { chatId, isProcessing: true },
+    });
+
+    try {
+      // Run orchestrator with updated chat file
+      await runChatOrchestrator({
+        chatAgent: chatAgentInstance,
+        messages: chatFile.getMessages(),
+        chatMeta: { ...chatMeta, questions: [] },
+        config,
+        chatData: chatFile,
+        signal: abortController.signal,
+        clearUsage,
+        getUsage,
+      }, (event) => {
+        handleOrchestratorEvent(chatId, event, chatFile);
+      });
+
+      // Mark operation as complete
+      chatOperationManager.completeOperation(chatId);
+    } catch (error: any) {
+      // Mark operation as complete even on error
+      chatOperationManager.completeOperation(chatId);
+
+      // Broadcast error to all clients
+      broadcastManager.broadcastToChat(chatId, {
+        type: 'error',
+        data: { chatId, message: error.message || 'Unknown error' },
+      });
+    } finally {
+      // Broadcast processing end to all clients watching this chat
+      broadcastManager.broadcastToChat(chatId, {
+        type: 'processing',
+        data: { chatId, isProcessing: false },
+      });
+    }
+  };
+
+  ws.on('message', async (data) => {
+    try {
+      const message = JSON.parse(data.toString()) as ClientMessage;
+
+      switch (message.type) {
+        case 'get_config':
+          withConfig((config) => {
+            sendMessage({
+              type: 'config',
+              data: config.getData(),
+            });
+          });
+          break;
+
+        case 'create_chat': {
+          const { name } = message.data;
+          await withConfigUpdate(async (config) => {
+
+            // Generate chat ID and create new chat
+            const now = Date.now();
+            const chatId = new Date(now).toISOString().replace(/[-:]/g, '').slice(0, 15);
+            const newChat: ChatMeta = {
+              id: chatId,
+              title: name,
+              assistant: undefined,
+              prompt: undefined,
+              mode: 'none',
+              agentMode: 'default',
+              created: now,
+              updated: now,
+              todos: [],
+              questions: [],
+              toolset: undefined,
+              model: undefined,
+            };
+
+            await config.addChat(newChat);
+
+            // Create the chat messages file
+            const chatFile = new ChatFile(chatId);
+            await chatFile.save(() => {
+              // Initialize empty chat
+            });
+
+            sendMessage({
+              type: 'chat_created',
+              data: { chatId },
+            });
+          });
+          break;
+        }
+        case 'get_messages': {
+          const { chatId } = message.data;
+          await withChatFile(chatId, async (chatFile) => {
+            const messages = chatFile.getMessages();
+
+            sendMessage({
+              type: 'messages',
+              data: { chatId, messages },
+            });
+          });
+          break;
+        }
+        case 'send_message': {
+          const { chatId, content } = message.data;
+          await withChatFile(chatId, async (chatFile, chat, config) => {
+              
+            // Validate content is an array of MessageContent
+            if (!Array.isArray(content)) {
+              sendMessage({
+                type: 'error',
+                data: { message: 'Invalid message content: must be an array' },
+              });
+              return;
+            }
+
+            // Add user message with proper typing
+            const userMessage: Message = {
+              role: 'user',
+              content: content as MessageContent[],
+              created: Date.now(),
+            };
+            await chatFile.addMessage(userMessage);
+
+            sendMessage({
+              type: 'message_added',
+              data: { chatId, message: userMessage },
+            });
+
+            // Run the chat
+            await runChat(chatFile, chat, config);
+          });
+          break;
+        }
+        case 'cancel': {
+          const { chatId } = message.data;
+          chatOperationManager.cancelOperation(chatId);
+
+          // Broadcast cancellation to all clients watching this chat
+          broadcastManager.broadcastToChat(chatId, {
+            type: 'processing',
+            data: { chatId, isProcessing: false },
+          });
+          break;
+        }
+
+        case 'subscribe_chat': {
+          const { chatId } = message.data;
+
+          // Register this connection as watching this chat
+          connectionRegistry.setActiveChat(connectionId, chatId);
+
+          // Send confirmation
+          sendMessage({
+            type: 'chat_subscribed',
+            data: { chatId },
+          });
+
+          // Send current operation state for this chat
+          broadcastManager.sendOperationState(connectionId, chatId);
+          break;
+        }
+
+        case 'unsubscribe_chat': {
+          const { chatId } = message.data;
+
+          // Unregister this connection from watching this chat
+          const currentChatId = connectionRegistry.getActiveChat(connectionId);
+          if (currentChatId === chatId) {
+            connectionRegistry.setActiveChat(connectionId, null);
+          }
+          break;
+        }
+
+        case 'get_models':
+          try {
+            const { baseMetadata } = message.data || {};
+            const { ai: aiInstance } = await ensureAI();
+            const models = aiInstance.registry.searchModels(baseMetadata || {});
+
+            sendMessage({
+              type: 'models',
+              data: { models },
+            });
+          } catch (error) {
+            sendMessage({
+              type: 'error',
+              data: { message: 'Failed to fetch models' },
+            });
+          }
+          break;
+
+        case 'update_chat_meta': {
+          const { chatId, updates, cwd } = message.data;
+          withConfigUpdate(async (config) => {
+
+            await config.updateChat(chatId, updates);
+            const updatedChat = config.getChats().find(c => c.id === chatId);
+
+            // Update AI cwd if provided
+            if (cwd !== undefined && ai) {
+              if (!ai.config.defaultContext) {
+                ai.config.defaultContext = {};
+              }
+              ai.config.defaultContext.cwd = cwd;
+            }
+
+            sendMessage({
+              type: 'chat_updated',
+              data: {
+                chatId,
+                chat: updatedChat,
+                cwd: ai?.config.defaultContext?.cwd
+              },
+            });
+          });
+          break;
+        }
+        case 'update_user': {
+          const { updates } = message.data;
+          withConfigUpdate(async (config) => {
+            await config.updateUser(updates);
+            sendMessage({
+              type: 'config',
+              data: config.getData(),
+            });
+          });
+          break;
+        }
+        case 'add_todo': {
+          const { chatId, todo } = message.data;
+          withConfigUpdate(async (config) => {
+            const chat = config.getChats().find(c => c.id === chatId);
+            if (chat) {
+              chat.todos.push({ id: Math.random().toString(36).substring(7), name: todo, done: false });
+              await config.updateChat(chatId, { todos: chat.todos });
+              const updatedChat = config.getChats().find(c => c.id === chatId);
+              sendMessage({
+                type: 'chat_updated',
+                data: { chatId, chat: updatedChat },
+              });
+            }
+          });
+          break;
+        }
+        case 'toggle_todo': {
+          const { chatId, index } = message.data;
+          withConfigUpdate(async (config) => {
+            const chat = config.getChats().find(c => c.id === chatId);
+            if (chat && chat.todos[index]) {
+              chat.todos[index].done = !chat.todos[index].done;
+              await config.updateChat(chatId, { todos: chat.todos });
+              const updatedChat = config.getChats().find(c => c.id === chatId);
+              sendMessage({
+                type: 'chat_updated',
+                data: { chatId, chat: updatedChat },
+              });
+            }
+          });
+          break;
+        }
+        case 'remove_todo': {
+          const { chatId, index } = message.data;
+          withConfigUpdate(async (config) => {
+            const chat = config.getChats().find(c => c.id === chatId);
+            if (chat && chat.todos[index] !== undefined) {
+              chat.todos.splice(index, 1);
+              await config.updateChat(chatId, { todos: chat.todos });
+              const updatedChat = config.getChats().find(c => c.id === chatId);
+              sendMessage({
+                type: 'chat_updated',
+                data: { chatId, chat: updatedChat },
+              });
+            }
+          });
+          break;
+        }
+        case 'clear_todos': {
+          const { chatId } = message.data;
+          withConfigUpdate(async (config) => {
+            await config.updateChat(chatId, { todos: [] });
+            const updatedChat = config.getChats().find(c => c.id === chatId);
+            sendMessage({
+              type: 'chat_updated',
+              data: { chatId, chat: updatedChat },
+            });
+          });
+          break;
+        }
+        case 'clear_messages': {
+          const { chatId } = message.data;
+          withChatFile(chatId, async (chatFile) => {
+            await chatFile.save((data) => {
+              data.messages = [];
+            });
+            sendMessage({
+              type: 'messages_updated',
+              data: { chatId, messages: [] },
+            });
+          });
+          break;
+        }
+        case 'delete_chat': {
+          const { chatId } = message.data;
+
+          // Abort any ongoing operation for this chat
+          chatOperationManager.cancelOperation(chatId);
+
+          withConfigUpdate(async (config) => {
+            await config.deleteChat(chatId);
+            removeChat(chatId); // Remove from cache
+
+            // Broadcast deletion to all clients (not just those watching this chat)
+            for (const connection of connectionRegistry.getAllConnections()) {
+              broadcastManager.sendToConnection(connection.connectionId, {
+                type: 'chat_deleted',
+                data: { chatId },
+              });
+            }
+          });
+          break;
+        }
+        case 'handle_operations': {
+          const { chatId, messageCreated, approved, rejected } = message.data;
+          withChatFile(chatId, async (chatFile, chatMeta, config) => {
+            const messages = chatFile.getMessages();
+            const targetMessage = messages.find(m => m.created === messageCreated);
+
+            if (!targetMessage || !targetMessage.operations) {
+              sendMessage({
+                type: 'error',
+                data: { chatId, message: 'Message or operations not found' },
+              });
+              return;
+            }
+
+            const broadcastMessageUpdate = () => {
+              broadcastManager.broadcastToChat(chatId, {
+                type: 'message_updated',
+                data: { chatId, message: targetMessage },
+              });
+            };
+
+            const operations = targetMessage.operations;
+            const manager = new OperationManager(
+              'none',
+              operations,
+              () => {},
+              (op, opIndex) => {
+                // Update the message content when operation is executed.
+                // Move to end of message content array to ensure visibility.
+                const contentIndex = targetMessage.content.findIndex((c) => c.operationIndex === opIndex);
+                if (contentIndex !== -1) {
+                  const content = targetMessage.content.splice(contentIndex, 1)[0];
+                  content.content = op.message || '';
+                  targetMessage.content.push(content);
+
+                  chatFile.updateMessage(targetMessage);
+                  broadcastMessageUpdate();
+                }
+              },
+            );
+
+            // Mark rejected operations
+            for (const idx of rejected) {
+              if (operations[idx]) {
+                operations[idx].status = 'rejected';
+                manager.updateMessage(operations[idx]);
+              }
+            }
+            
+            // Emit fake doing for now
+            const previousStatus: Record<number, OperationStatus> = {};
+            for (const idx of approved) {
+              if (operations[idx]) {
+                previousStatus[idx] = operations[idx].status;
+                operations[idx].status = 'doing';
+              }
+            }
+
+            // Save and broadcast the updated operation statuses immediately
+            chatFile.updateMessage(targetMessage);
+            broadcastMessageUpdate();
+
+            // Execute approved operations
+            let hasExecutedOperations = false;
+            if (approved.length > 0) {
+              // Ensure AI and chat agent are loaded
+              const { ai: aiInstance } = await ensureAI();
+
+              // Start operation for this chat
+              const abortController = chatOperationManager.startOperation(chatId);
+
+              // Broadcast processing start
+              broadcastManager.broadcastToChat(chatId, {
+                type: 'processing',
+                data: { chatId, isProcessing: true },
+              });
+
+              try {
+                const ctx = await aiInstance.buildContext({
+                  ops: manager,
+                  chat: chatMeta,
+                  chatData: chatFile,
+                  chatMessage: targetMessage,
+                  config,
+                  signal: abortController.signal,
+                  chatStatus: (status) => {
+                    broadcastManager.broadcastToChat(chatId, {
+                      type: 'status_update',
+                      data: { chatId, status },
+                    });
+                  },
+                });
+
+                for (const idx of approved) {
+                  if (operations[idx]) {
+                    operations[idx].status = previousStatus[idx] || 'analyzed';
+                    await manager.execute(operations[idx], true, ctx);
+                    hasExecutedOperations = true;
+                  }
+                }
+
+                chatOperationManager.completeOperation(chatId);
+              } catch (error: any) {
+                chatOperationManager.completeOperation(chatId);
+                broadcastManager.broadcastToChat(chatId, {
+                  type: 'error',
+                  data: { chatId, message: error.message || 'Operation execution failed' },
+                });
+              } finally {
+                // Broadcast processing end
+                broadcastManager.broadcastToChat(chatId, {
+                  type: 'processing',
+                  data: { chatId, isProcessing: false },
+                });
+              }
+            }
+
+            // If operations were executed, continue with the orchestrator
+            if (hasExecutedOperations) {
+              // Run the chat
+              await runChat(chatFile, chatMeta, config);
+            }
+          });
+          break;
+        }
+        case 'submit_question_answers': {
+          const { chatId, questionAnswers, questionCustomAnswers } = message.data;
+          withChatFile(chatId, async (chatFile, chatMeta, config) => {
+            if (!chatMeta.questions || chatMeta.questions.length === 0) {
+              sendMessage({
+                type: 'error',
+                data: { message: 'No questions to answer' },
+              });
+              return;
+            }
+
+            // Format answers as markdown (matching CLI behavior)
+            let questionText = '## Questions\n';
+            let answerText = '## Answers\n';
+
+            for (let i = 0; i < chatMeta.questions.length; i++) {
+              const question = chatMeta.questions[i];
+              const selections = new Set(questionAnswers[i] || []);
+              const customAnswer = questionCustomAnswers[i];
+
+              answerText += `**${question.name}:**\n`;
+              questionText += `**${question.name}:** ${question.min === question.max ? `(choose ${question.min})` : `(choose ${question.min}-${question.max})`}\n`;
+
+              for (const option of question.options) {
+                questionText += `- ${option.label}?\n`;
+              }
+
+              if (selections.size > 0) {
+                Array.from(selections).forEach((optionIndex) => {
+                  if (optionIndex < question.options.length) {
+                    answerText += `- ${question.options[optionIndex].label}\n`;
+                  }
+                });
+              }
+
+              if (customAnswer) {
+                answerText += `- ${customAnswer}\n`;
+              }
+
+              if (selections.size === 0 && !customAnswer) {
+                answerText += `- (no answer provided)\n`;
+              }
+
+              if (question.custom) {
+                questionText += `- *${question.customLabel || 'Other'}?*\n`;
+              }
+
+              answerText += '\n';
+              questionText += '\n';
+            }
+
+            // Clear questions from chat meta
+            await withConfigUpdate(async (config) => {
+              const chats = config.getChats();
+              const chatIndex = chats.findIndex(c => c.id === chatId);
+              if (chatIndex !== -1) {
+                chats[chatIndex].questions = [];
+                await config.updateChat(chatId, { questions: [] });
+              }
+            });
+
+            // Add the formatted questions as an assistant message
+            const questionMessage: Message = {
+              role: 'assistant',
+              name: chatMeta.assistant,
+              content: [{ type: 'text', content: questionText.trim() }],
+              created: Date.now(),
+              operations: [],
+            };
+
+            await chatFile.addMessage(questionMessage);
+            sendMessage({
+              type: 'message_added',
+              data: { chatId, message: questionMessage },
+            });
+
+            // Add the formatted answer as a user message
+            const answerMessage: Message = {
+              role: 'user',
+              name: config.getData().user.name,
+              content: [{ type: 'text', content: answerText.trim() }],
+              created: Date.now(),
+            };
+
+            await chatFile.addMessage(answerMessage);
+            sendMessage({
+              type: 'message_added',
+              data: { chatId, message: answerMessage },
+            });
+
+            // Send updated chat meta
+            sendMessage({
+              type: 'chat_updated',
+              data: { chatId, chat: { ...chatMeta, questions: [] } },
+            });
+
+            // Run the chat
+            await runChat(chatFile, chatMeta, config);
+          });
+          break;
+        }
+        default:
+          sendMessage({
+            type: 'error',
+            data: { message: `Unknown message type: ${(message as any).type}` },
+          });
+      }
+    } catch (error) {
+      console.error('WebSocket error:', error);
+      sendMessage({
+        type: 'error',
+        data: { message: error instanceof Error ? error.message : 'Unknown error' },
+      });
+    }
+  });
+
+  ws.on('close', () => {
+    connectionRegistry.unregisterConnection(connectionId);
+    // Note: Operations continue running even after client disconnects!
+  });
+}
+
+async function serveLocalFile(url: string, res: http.ServerResponse): Promise<void> {
+  try {
+    // Parse query string to get path parameter
+    const queryStart = url.indexOf('?');
+    if (queryStart === -1) {
+      res.writeHead(400);
+      res.end('Bad request: missing query string');
+      return;
+    }
+
+    const queryString = url.slice(queryStart + 1);
+    const params = new URLSearchParams(queryString);
+    const encodedPath = params.get('path');
+
+    if (!encodedPath) {
+      res.writeHead(400);
+      res.end('Bad request: missing path parameter');
+      return;
+    }
+
+    // Decode the path
+    const filePath = decodeURIComponent(encodedPath);
+
+    // Resolve to absolute path
+    const absolutePath = path.isAbsolute(filePath) ? filePath : path.resolve(process.cwd(), filePath);
+
+    // Read the file
+    const content = await fs.readFile(absolutePath);
+
+    // Determine content type based on file extension
+    const ext = path.extname(absolutePath).toLowerCase();
+    const contentTypes: Record<string, string> = {
+      '.html': 'text/html; charset=utf-8',
+      '.htm': 'text/html; charset=utf-8',
+      '.css': 'text/css; charset=utf-8',
+      '.js': 'application/javascript; charset=utf-8',
+      '.json': 'application/json',
+      '.xml': 'application/xml',
+      '.txt': 'text/plain; charset=utf-8',
+      '.md': 'text/markdown; charset=utf-8',
+      // Images
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.gif': 'image/gif',
+      '.webp': 'image/webp',
+      '.svg': 'image/svg+xml',
+      '.ico': 'image/x-icon',
+      '.bmp': 'image/bmp',
+      // Other
+      '.pdf': 'application/pdf',
+      '.zip': 'application/zip',
+    };
+    const contentType = contentTypes[ext] || 'application/octet-stream';
+
+    res.setHeader('Content-Type', contentType);
+    res.writeHead(200);
+    res.end(content);
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      res.writeHead(404);
+      res.end('File not found');
+    } else if ((error as NodeJS.ErrnoException).code === 'EACCES') {
+      res.writeHead(403);
+      res.end('Access denied');
+    } else {
+      console.error('Error serving file:', error);
+      res.writeHead(500);
+      res.end('Internal server error');
+    }
+  }
+}
+
+async function serveStaticFile(url: string, res: http.ServerResponse): Promise<void> {
+  // Default to index.html
+  if (url === '/' || !url.includes('.')) {
+    url = '/index.html';
+  }
+
+  // Security: prevent directory traversal
+  const distDir = path.resolve(__serverDirname, '../dist-browser');
+  const filePath = path.resolve(distDir, url.slice(1));
+
+  // Ensure file is within dist directory
+  if (!filePath.startsWith(distDir + path.sep) && filePath !== distDir) {
+    res.writeHead(403);
+    res.end('Forbidden');
+    return;
+  }
+
+  try {
+    const content = await fs.readFile(filePath);
+
+    // Set content type
+    const ext = path.extname(filePath);
+    const contentTypes: Record<string, string> = {
+      '.html': 'text/html; charset=utf-8',
+      '.js': 'application/javascript; charset=utf-8',
+      '.css': 'text/css; charset=utf-8',
+      '.json': 'application/json',
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.svg': 'image/svg+xml',
+      '.ico': 'image/x-icon',
+    };
+    const contentType = contentTypes[ext] || 'text/plain';
+
+    res.setHeader('Content-Type', contentType);
+    res.writeHead(200);
+    res.end(content);
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      res.writeHead(404);
+      res.end('Not found');
+    } else {
+      throw error;
+    }
+  }
+}
+
+function fireAndForget<T>(promise: Promise<T> | (() => Promise<T>)): void {
+  if (typeof promise === 'function') {
+    promise = promise();
+  }
+  promise.catch((error) => {
+    console.error('Uncaught error:', error);
+  });
+}
\ No newline at end of file
diff --git a/packages/cletus/src/browser/styles.css b/packages/cletus/src/browser/styles.css
new file mode 100644
index 0000000..489cfed
--- /dev/null
+++ b/packages/cletus/src/browser/styles.css
@@ -0,0 +1,130 @@
+@import "tailwindcss";
+
+@theme {
+  --color-background: oklch(0.15 0.02 264);
+  --color-foreground: oklch(0.98 0.01 264);
+
+  --color-card: oklch(0.18 0.02 264);
+  --color-card-foreground: oklch(0.98 0.01 264);
+
+  --color-popover: oklch(0.18 0.02 264);
+  --color-popover-foreground: oklch(0.98 0.01 264);
+
+  --color-primary: oklch(0.70 0.25 300);
+  --color-primary-foreground: oklch(0.15 0.02 264);
+
+  --color-secondary: oklch(0.30 0.05 264);
+  --color-secondary-foreground: oklch(0.98 0.01 264);
+
+  --color-muted: oklch(0.30 0.05 264);
+  --color-muted-foreground: oklch(0.65 0.05 264);
+
+  --color-accent: oklch(0.30 0.05 264);
+  --color-accent-foreground: oklch(0.98 0.01 264);
+
+  --color-destructive: oklch(0.45 0.20 25);
+  --color-destructive-foreground: oklch(0.98 0.01 264);
+
+  --color-border: oklch(0.30 0.05 264);
+  --color-input: oklch(0.30 0.05 264);
+  --color-ring: oklch(0.70 0.25 300);
+
+  --color-neon-cyan: oklch(0.70 0.18 200);
+  --color-neon-pink: oklch(0.70 0.18 350);
+  --color-neon-purple: oklch(0.65 0.20 300);
+  --color-neon-green: oklch(0.70 0.18 145);
+  --color-neon-blue: oklch(0.60 0.18 250);
+
+  --radius: 0.5rem;
+}
+
+/* Custom neon effects - toned down */
+.neon-border {
+  box-shadow: 0 0 3px var(--color-neon-cyan);
+}
+
+.neon-text-cyan {
+  color: var(--color-neon-cyan);
+  text-shadow: 0 0 5px var(--color-neon-cyan);
+}
+
+.neon-text-pink {
+  color: var(--color-neon-pink);
+  text-shadow: 0 0 5px var(--color-neon-pink);
+}
+
+.neon-text-purple {
+  color: var(--color-neon-purple);
+  text-shadow: 0 0 5px var(--color-neon-purple);
+}
+
+.neon-glow {
+  box-shadow: 0 0 5px var(--color-neon-cyan),
+              0 0 10px var(--color-neon-cyan);
+}
+
+.neon-glow-purple {
+  box-shadow: 0 0 5px var(--color-neon-purple),
+              0 0 10px var(--color-neon-purple);
+}
+
+.neon-glow-pink {
+  box-shadow: 0 0 5px var(--color-neon-pink),
+              0 0 10px var(--color-neon-pink);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-background);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-neon-purple);
+  box-shadow: 0 0 5px var(--color-neon-purple);
+}
+
+/* Loading spinner */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid var(--color-border);
+  border-top-color: var(--color-neon-cyan);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+/* Typing indicator animation */
+@keyframes typing-bounce {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-8px);
+    opacity: 1;
+  }
+}
+
+.typing-dot {
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-neon-cyan);
+  border-radius: 50%;
+  animation: typing-bounce 1.4s infinite ease-in-out;
+  box-shadow: 0 0 4px var(--color-neon-cyan);
+}
diff --git a/packages/cletus/src/browser/websocket-types.ts b/packages/cletus/src/browser/websocket-types.ts
new file mode 100644
index 0000000..190a903
--- /dev/null
+++ b/packages/cletus/src/browser/websocket-types.ts
@@ -0,0 +1,109 @@
+/**
+ * Type-safe WebSocket message protocol for browser-server communication
+ */
+
+import type { Message, ChatMeta, ChatMode, AgentMode, Config } from '../schemas';
+
+// Client -> Server Messages
+export type ClientMessage =
+  | { type: 'get_config'; data?: never }
+  | { type: 'create_chat'; data: { name: string } }
+  | { type: 'get_messages'; data: { chatId: string } }
+  | { type: 'send_message'; data: { chatId: string; content: Message['content'] } }
+  | { type: 'cancel'; data: { chatId: string } }
+  | { type: 'subscribe_chat'; data: { chatId: string } }
+  | { type: 'unsubscribe_chat'; data: { chatId: string } }
+  | { type: 'update_chat_meta'; data: { chatId: string; updates: Partial<ChatMeta>; cwd?: string } }
+  | { type: 'update_user'; data: { updates: Partial<Config['user']> } }
+  | { type: 'add_todo'; data: { chatId: string; todo: string } }
+  | { type: 'toggle_todo'; data: { chatId: string; index: number } }
+  | { type: 'remove_todo'; data: { chatId: string; index: number } }
+  | { type: 'clear_todos'; data: { chatId: string } }
+  | { type: 'clear_messages'; data: { chatId: string } }
+  | { type: 'delete_chat'; data: { chatId: string } }
+  | { type: 'get_models'; data?: { baseMetadata?: any } }
+  | { type: 'handle_operations'; data: { chatId: string; messageCreated: number; approved: number[]; rejected: number[] } }
+  | { type: 'submit_question_answers'; data: { chatId: string; questionAnswers: Record<number, number[]>; questionCustomAnswers: Record<number, string> } };
+
+// Server -> Client Messages
+export type ServerMessage =
+  | { type: 'config'; data: Config }
+  | { type: 'config_not_found'; data: Record<string, never> }
+  | { type: 'chat_created'; data: { chatId: string } }
+  | { type: 'chat_subscribed'; data: { chatId: string } }
+  | { type: 'messages'; data: { chatId: string; messages: Message[] } }
+  | { type: 'message_added'; data: { chatId: string; message: Message } }
+  | { type: 'message_updated'; data: { chatId: string; message: Message } }
+  | { type: 'pending_update'; data: { chatId: string; pending: Message } }
+  | { type: 'messages_updated'; data: { chatId: string; messages: Message[] } }
+  | { type: 'response_complete'; data: { chatId: string; message: Message } }
+  | { type: 'chat_updated'; data: { chatId: string; chat?: ChatMeta; cwd?: string } }
+  | { type: 'models'; data: { models: any[] } }
+  | { type: 'status_update'; data: { chatId: string; status: string } }
+  | { type: 'usage_update'; data: { chatId: string; accumulated: any; accumulatedCost: number; current: any } }
+  | { type: 'operation_state'; data: { chatId: string; status: 'idle' | 'processing' | 'waiting_approval'; pendingMessage: Message | null; startTime: number | null } }
+  | { type: 'chat_deleted'; data: { chatId: string } }
+  | { type: 'error'; data: { chatId?: string; message: string } }
+  | { type: 'processing'; data: { chatId: string; isProcessing: boolean } };
+
+/**
+ * Type-safe WebSocket client interface
+ */
+export interface TypedWebSocket {
+  send(message: ClientMessage): void;
+  onMessage(handler: (message: ServerMessage) => void): () => void;
+  close(): void;
+  isOpen(): boolean;
+}
+
+/**
+ * Helper to create a typed WebSocket wrapper
+ */
+export function createTypedWebSocket(url: string): TypedWebSocket {
+  const ws = new WebSocket(url);
+  const messageHandlers: Array<(message: ServerMessage) => void> = [];
+
+  ws.onmessage = (event) => {
+    try {
+      const message = JSON.parse(event.data) as ServerMessage;
+      messageHandlers.forEach(handler => handler(message));
+    } catch (error) {
+      console.error('Failed to parse WebSocket message:', error);
+    }
+  };
+
+  return {
+    send(message: ClientMessage) {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(message));
+      } else {
+        console.error('WebSocket is not open. ReadyState:', ws.readyState);
+      }
+    },
+    onMessage(handler: (message: ServerMessage) => void): () => void {
+      messageHandlers.push(handler);
+      // Return unsubscribe function
+      return () => {
+        const index = messageHandlers.indexOf(handler);
+        if (index > -1) {
+          messageHandlers.splice(index, 1);
+        }
+      };
+    },
+    close() {
+      ws.close();
+    },
+    isOpen() {
+      return ws.readyState === WebSocket.OPEN;
+    },
+  };
+}
+
+/**
+ * Type-safe helper to send a message via WebSocket
+ */
+export function sendClientMessage(ws: WebSocket | null, message: ClientMessage): void {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(message));
+  }
+}
diff --git a/packages/cletus/src/chat-ui.tsx b/packages/cletus/src/chat-ui.tsx
index ba1353a..7e6410d 100644
--- a/packages/cletus/src/chat-ui.tsx
+++ b/packages/cletus/src/chat-ui.tsx
@@ -1,8 +1,8 @@
+import { getTotalTokens } from '@aeye/core';
+import events from 'events';
 import { Box, Static, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
 import path from 'path';
-import fs from 'fs';
-import events from 'events'
 import React, { useEffect, useRef, useState } from 'react';
 import { createCletusAI } from './ai';
 import { ChatFile } from './chat';
@@ -11,16 +11,14 @@ import { MessageDisplay } from './components/MessageDisplay';
 import { ModelSelector } from './components/ModelSelector';
 import { CompletionResult, OperationApprovalMenu } from './components/OperationApprovalMenu';
 import { ConfigFile } from './config';
-import { getChatPath } from './file-manager';
 import type { AgentMode, ChatMeta, ChatMode, Message } from './schemas';
-import { getTotalTokens } from '@aeye/core';
 // @ts-ignore
 import mic from 'mic';
 import { Writer } from 'wav';
 import { createChatAgent } from './agents/chat-agent';
 import { runChatOrchestrator } from './agents/chat-orchestrator';
-import { COLORS } from './constants';
 import { getAltKeyLabel } from './common';
+import { COLORS } from './theme';
 import { fileIsDirectory } from './helpers/files';
 import { useAdaptiveDebounce, useSyncedState } from './hooks';
 import { logger } from './logger';
diff --git a/packages/cletus/src/chat.ts b/packages/cletus/src/chat.ts
index bae8dff..6f37537 100644
--- a/packages/cletus/src/chat.ts
+++ b/packages/cletus/src/chat.ts
@@ -29,15 +29,27 @@ export class ChatFile extends JsonFile<ChatMessages> {
   /**
    * Add a message to the chat
    */
-  async addMessage(message: Omit<Message, 'created'>): Promise<void> {
+  async addMessage(message: Omit<Message, 'created'> & { created?: number }): Promise<void> {
     await this.save((chat) => {
       chat.messages.push({
-        ...message,
         created: Date.now(),
+        ...message,
       });
     });
   }
 
+  /**
+   * Update a message in the chat
+   */
+  async updateMessage(message: Message): Promise<void> {
+    await this.save((chat) => {
+      const index = chat.messages.findIndex((m) => m.created === message.created);
+      if (index !== -1) {
+        chat.messages[index] = message;
+      }
+    });
+  }
+
   /**
    * Get all messages
    */
diff --git a/packages/cletus/src/common.ts b/packages/cletus/src/common.ts
index 733df0d..b5a87c5 100644
--- a/packages/cletus/src/common.ts
+++ b/packages/cletus/src/common.ts
@@ -5,95 +5,36 @@ import { Message, MessageContent } from "./schemas";
 import { Message as AIMessage, MessageContent as AIMessageContent } from "@aeye/core";
 import { detectMimeType } from "./helpers/files";
 
+// Re-export browser-safe functions from shared.ts
+export {
+  formatTime,
+  formatSize,
+  formatName,
+  abbreviate,
+  deleteUndefined,
+  pluralize,
+  cosineSimilarity,
+  chunkArray,
+  chunk,
+  groupMap,
+  group,
+  gate,
+  detectNewlineType,
+  normalizeNewlines,
+  convertNewlines,
+  paginateText,
+  type NewlineType,
+} from './shared';
+
 /**
  * Returns the appropriate label for the Alt/Option key based on the platform.
- * 
+ *
  * @returns "Opt" on macOS, "Alt" on other platforms
  */
 export function getAltKeyLabel(): string {
   return process.platform === 'darwin' ? 'Opt' : 'Alt';
 }
 
-/**
- * Formats time in milliseconds to a human-readable string.
- * 
- * @param ms - time in milliseconds
- * @returns 
- */
-export function formatTime(ms: number): string {
-  if (ms < 1) {
-    return `${ms.toFixed(2)}ms`;
-  } if (ms < 1000) {
-    return `${ms.toFixed(0)}ms`;
-  } else {
-    return `${(ms / 1000).toFixed(1)}s`;
-  }
-}
-
-/**
- * Formats a file size in bytes to a human-readable string.
- * 
- * @param bytes - file size in bytes
- * @returns formatted string like "1.5 KB", "2.3 MB", etc.
- */
-export function formatSize(bytes: number): string {
-  if (bytes < 1024) {
-    return `${bytes} B`;
-  } else if (bytes < 1024 * 1024) {
-    return `${(bytes / 1024).toFixed(1)} KB`;
-  } else if (bytes < 1024 * 1024 * 1024) {
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  } else {
-    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
-  }
-}
-
-/**
- * Formats name by converting camelCase, underscores, and hyphens to TitleCase.
- * 
- * @param x - input string
- * @returns 
- */
-export function formatName(x: string): string {
-  return x
-    .replace(/([a-z])([A-Z])/g, '$1$2') // camelCase to words
-    .replace(/[_-]+/g, ' ')               // underscores/hyphens to spaces
-    .replace(/\s+/g, ' ')                 // multiple spaces to single space
-    .trim()
-    .replace(/\b\w/g, (c) => c.toUpperCase()) // capitalize first letter of each word
-    .replace(/\s+/g, ''); 
-}
-
-/**
- * Abbreviate text to a maximum length, adding ellipsis if truncated.
- * 
- * @param text - input text
- * @param maxLength - maximum length
- * @returns 
- */
-export function abbreviate(text: string, maxLength: number, suffix: string = '…'): string {
-  if (text.length <= maxLength) {
-    return text;
-  } else {
-    return text.slice(0, maxLength - suffix.length) + suffix;
-  }
-}
-
-/**
- * Delete undefined properties from an object.
- * 
- * @param obj - input object
- * @returns 
- */
-export function deleteUndefined<T>(obj: T): T {
-  for (const key in obj) {
-    if (obj[key] === undefined) {
-      delete obj[key];
-    }
-  }
-  return obj;
-}
-
 /**
  * Format a value for text display (high-level representation without JSON escaping)
  * - Arrays: items on separate lines with hyphens
@@ -160,233 +101,6 @@ export function formatValueWithFormat(value: any, format: 'json' | 'yaml' = 'yam
   return formatValue(value, alreadyIndented);
 }
 
-/**
- * Pluralize a word based on count.
- * 
- * @param count - number of items
- * @param singular - singular form of the word
- * @param plural - plural form of the word
- * @param prefixCount - whether to prefix the count number
- * @returns pluralized string
- */
-export function pluralize(
-  count: number, 
-  singular: string, 
-  plural: string = singular + 's',
-  prefixCount: boolean = true,
-): string {
-  const unit = count === 1 ? singular : plural;
-  return prefixCount ? `${count} ${unit}` : unit;
-}
-
-/**
- * Calculate cosine similarity between two vectors
- */
-export function cosineSimilarity(a: number[], b: number[]): number {
-  if (a.length !== b.length) {
-    throw new Error('Vectors must have the same length');
-  }
-
-  let dotProduct = 0;
-  let magnitudeA = 0;
-  let magnitudeB = 0;
-
-  for (let i = 0; i < a.length; i++) {
-    dotProduct += a[i] * b[i];
-    magnitudeA += a[i] * a[i];
-    magnitudeB += b[i] * b[i];
-  }
-
-  magnitudeA = Math.sqrt(magnitudeA);
-  magnitudeB = Math.sqrt(magnitudeB);
-
-  if (magnitudeA === 0 || magnitudeB === 0) {
-    return 0;
-  }
-
-  return dotProduct / (magnitudeA * magnitudeB);
-}
-
-/**
- * Chunk an array into smaller arrays of a specified size.
- * 
- * @param array - input array
- * @param chunkSize - size of each chunk
- * @returns 
- */
-export function chunkArray<T>(array: T[], chunkSize: number): T[][] {
-  const chunks: T[][] = [];
-  for (let i = 0; i < array.length; i += chunkSize) {
-    chunks.push(array.slice(i, i + chunkSize));
-  }
-  return chunks;
-}
-
-/**
- * Chunk an array based on a predicate function.
- * 
- * @param array - input array
- * @param newChunk - function to determine if a new chunk should start
- * @returns 
- */
-export function chunk<T>(array: T[], newChunk: (prev: T, next: T, i: number) => boolean): T[][] {
-  const chunks: T[][] = [];
-  let currentChunk: T[] = [];
-  for (let i = 0; i < array.length; i++) {
-    if (currentChunk.length === 0) {
-      currentChunk.push(array[i]);
-    } else {
-      if (newChunk(currentChunk[currentChunk.length - 1], array[i], i)) {
-        chunks.push(currentChunk);
-        currentChunk = [array[i]];
-      } else {
-        currentChunk.push(array[i]);
-      }
-    }
-  }
-  if (currentChunk.length > 0) {
-    chunks.push(currentChunk);
-  }
-  return chunks;
-}
-
-/**
- * Paginate text by characters or lines. Never returns more than 64k characters. 
- * In line mode it doesn't return more than 1k lines.
- * 
- * @param text - input text
- * @param limit - maximum length
- * @param offset - starting offset
- * @param limitOffsetMode - 'characters' or 'lines'
- * @returns 
- */
-export function paginateText(
-  text: string, 
-  limit: number = 0,
-  offset: number = 0,
-  limitOffsetMode: 'characters' | 'lines' = 'characters',
-): string {
- if (limitOffsetMode === 'lines') {
-    const lines = text.split('\n');
-    const max = Math.min(limit || CONSTS.MAX_LINES, CONSTS.MAX_LINES);
-    if (lines.length <= max) {
-      return text;
-    }
-
-    const start = (offset + lines.length) % lines.length;
-    const end = start + max;
-    let paginated = lines.slice(start, end);
-    const characters = lines.reduce((sum, line) => sum + line.length + 1, 0); // +1 for newline
-
-    if (characters <= CONSTS.MAX_CHARACTERS) {
-      return paginated.join('\n');
-    }
-
-    return offset < 0 
-      ? text.slice(-CONSTS.MAX_CHARACTERS) 
-      : text.slice(0, CONSTS.MAX_CHARACTERS);
-  } else { 
-    const max = Math.min(limit || CONSTS.MAX_CHARACTERS, CONSTS.MAX_CHARACTERS);
-    if (text.length < max) {
-      return text;
-    }
-
-    const start = (offset + text.length) % text.length;
-    const end = start + max;
-
-    return text.slice(start, end);
-  }
-}
-
-/**
- * Groups items in an array by a key function, with optional value extraction and reduction.
- * 
- * @param array - The items to group
- * @param keyFn - Function to extract the key for grouping
- * @param valueFn - Function to extract the value for each item
- * @param reduceFn - Function to reduce the grouped values
- * @returns The grouped and reduced map
- */
-export function groupMap<T, K, V = T, R = V[]>(
-  array: T[],
-  keyFn: (item: T) => K,
-  valueFn?: (item: T) => V,
-  reduceFn?: (items: V[]) => R,
-): Map<K, R> {
-  const value = valueFn || ((item: T) => item as unknown as V);
-  const reduce = reduceFn || ((items: V[]) => items as unknown as R);
-
-  const valueMap = new Map<K, V[]>();
-  for (const item of array) {
-    const key = keyFn(item);
-    const group = valueMap.get(key) || [];
-    group.push(value(item));
-    valueMap.set(key, group);
-  }
-
-  const reducedMap = new Map<K, R>();
-  valueMap.forEach((items, key) => {
-    reducedMap.set(key, reduce(items));
-  });
-
-  return reducedMap;
-}
-
-
-/**
- * Groups items in an array by a key function, with optional value extraction and reduction.
- * 
- * @param array - The items to group
- * @param keyFn - Function to extract the key for grouping
- * @param valueFn - Function to extract the value for each item
- * @param reduceFn - Function to reduce the grouped values
- * @returns The grouped and reduced object
- */
-export function group<T, K extends PropertyKey, V = T, R = V[]>(
-  array: T[],
-  keyFn: (item: T) => K,
-  valueFn?: (item: T) => V,
-  reduceFn?: (items: V[]) => R,
-): Record<K, R> {
-  return Object.fromEntries(groupMap(array, keyFn, valueFn, reduceFn).entries()) as Record<K, R>;
-}
-
-/**
- * Creates a gate function to serialize async operations.
- * 
- * @returns A function that serializes async operations
- */
-export function gate() {
-  let keeper: Promise<void> = Promise.resolve();
-
-  return async<T>(fn: () => Promise<T>): Promise<T> => {
-    // Capture the current keeper immediately (before await)
-    const prevKeeper = keeper;
-    
-    // Create the new keeper promise immediately
-    let resolve!: () => void;
-    let reject!: (err: any) => void;
-    keeper = new Promise<void>((res, rej) => {
-      resolve = res;
-      reject = rej;
-    });
-
-    // Now wait for previous operation
-    await prevKeeper;
-
-    // Execute the function
-    try {
-      const result = await fn();
-      resolve(); // Release next waiting operation
-      return result;
-    } catch (err) {
-      reject(err); // Release next waiting operation with error
-      throw err;
-    }
-  };
-}
-
-
 /**
  * Converts a Message to a ChatMessage.
  * 
@@ -527,60 +241,3 @@ export function fileProtocol(path: string): string {
   return path;
 }
 
-/**
- * Newline types that can be detected in text content.
- */
-export type NewlineType = '\n' | '\r\n' | '\r';
-
-/**
- * Detects the predominant newline type in the given text content.
- * Returns '\n' (LF) as the default if no newlines are found.
- * 
- * @param content - The text content to analyze
- * @returns The detected newline type
- */
-export function detectNewlineType(content: string): NewlineType {
-  const crlfCount = (content.match(/\r\n/g) || []).length;
-  // Remove CRLF first, then count standalone LF and CR
-  const contentWithoutCrlf = content.replace(/\r\n/g, '');
-  const lfCount = (contentWithoutCrlf.match(/\n/g) || []).length;
-  const crCount = (contentWithoutCrlf.match(/\r/g) || []).length;
-
-  // Default to LF if no newlines found
-  if (crlfCount === 0 && lfCount === 0 && crCount === 0) {
-    return '\n';
-  }
-
-  // Return the most common newline type
-  if (crlfCount >= lfCount && crlfCount >= crCount) {
-    return '\r\n';
-  } else if (lfCount >= crCount) {
-    return '\n';
-  } else {
-    return '\r';
-  }
-}
-
-/**
- * Normalizes all newlines in text to LF (\n).
- * 
- * @param content - The text content to normalize
- * @returns Content with all newlines converted to LF
- */
-export function normalizeNewlines(content: string): string {
-  return content.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
-}
-
-/**
- * Converts LF newlines to the specified newline type.
- * 
- * @param content - The text content with LF newlines
- * @param newlineType - The target newline type
- * @returns Content with newlines converted to the specified type
- */
-export function convertNewlines(content: string, newlineType: NewlineType): string {
-  if (newlineType === '\n') {
-    return content;
-  }
-  return content.replace(/\n/g, newlineType);
-}
\ No newline at end of file
diff --git a/packages/cletus/src/components/InkMainMenu.tsx b/packages/cletus/src/components/InkMainMenu.tsx
index f9419af..11ee9f4 100644
--- a/packages/cletus/src/components/InkMainMenu.tsx
+++ b/packages/cletus/src/components/InkMainMenu.tsx
@@ -8,7 +8,7 @@ import type { ChatMeta } from '../schemas';
 import { InkSettingsTabView } from './InkSettingsTabView';
 import Gradient from 'ink-gradient';
 import BigText from 'ink-big-text';
-import { COLORS } from '../constants';
+import { COLORS } from '../theme';
 import packageJson from '../../package.json';
 
 type MainMenuView = 'menu' | 'settings' | 'create-chat-assistant' | 'create-chat-prompt' | 'create-chat-mode';
diff --git a/packages/cletus/src/components/InkSettingsTabView.tsx b/packages/cletus/src/components/InkSettingsTabView.tsx
index c64d805..410a9ed 100644
--- a/packages/cletus/src/components/InkSettingsTabView.tsx
+++ b/packages/cletus/src/components/InkSettingsTabView.tsx
@@ -230,7 +230,7 @@ export const InkSettingsTabView: React.FC<InkSettingsTabViewProps> = ({ config,
     } else if (editField === 'addApiKey') {
       if (editValue.trim() && providerKey) {
         await config.save((data) => {
-          data.providers[providerKey!] = { apiKey: editValue };
+          data.providers[providerKey!] = { apiKey: editValue } as any;
         });
         setMessage(`✓ ${providerKey} configured!`);
         setSubView(null);
diff --git a/packages/cletus/src/components/Link.tsx b/packages/cletus/src/components/Link.tsx
index 429167d..f3e9eed 100644
--- a/packages/cletus/src/components/Link.tsx
+++ b/packages/cletus/src/components/Link.tsx
@@ -1,6 +1,6 @@
 import { Text } from 'ink';
 import React from 'react';
-import { COLORS } from '../constants';
+import { COLORS } from '../theme';
 
 const openLink = `\x1b]8;;`;
 const delimiter = `\x07`;
diff --git a/packages/cletus/src/components/Markdown.tsx b/packages/cletus/src/components/Markdown.tsx
index 2c6a283..9426ff5 100644
--- a/packages/cletus/src/components/Markdown.tsx
+++ b/packages/cletus/src/components/Markdown.tsx
@@ -1,9 +1,8 @@
 import { Box, BoxProps, Text, TextProps } from "ink";
 import { highlight, supportsLanguage } from "cli-highlight";
 import React from 'react';
-import { COLORS } from "../constants";
+import { COLORS } from "../theme";
 import { Link } from "./Link";
-import { logger } from "../logger";
 
 type LineSegment = { text: string;  url?: string; styles?: { bold?: boolean; italic?: boolean; underline?: boolean; strikethrough?: boolean; backgroundColor?: string, color?: string; } };
 
diff --git a/packages/cletus/src/components/MessageDisplay.tsx b/packages/cletus/src/components/MessageDisplay.tsx
index 4b98559..62d345f 100644
--- a/packages/cletus/src/components/MessageDisplay.tsx
+++ b/packages/cletus/src/components/MessageDisplay.tsx
@@ -1,7 +1,6 @@
 import { Box, Text } from 'ink';
 import React from 'react';
-import { ConfigFile } from '../config';
-import { COLORS } from '../constants';
+import { COLORS } from '../theme';
 import { Operations } from '../operations/types';
 import type { Message } from '../schemas';
 import { Markdown } from './Markdown';
diff --git a/packages/cletus/src/components/OperationApprovalMenu.tsx b/packages/cletus/src/components/OperationApprovalMenu.tsx
index eaff32c..74dd596 100644
--- a/packages/cletus/src/components/OperationApprovalMenu.tsx
+++ b/packages/cletus/src/components/OperationApprovalMenu.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import type { CletusAI } from '../ai';
 import { ChatFile } from '../chat';
 import { formatName, formatTime, pluralize } from '../common';
-import { COLORS } from '../constants';
+import { COLORS } from '../theme';
 import { logger } from '../logger';
 import { OperationManager } from '../operations/manager';
 import type { ChatMeta, Message, Operation } from '../schemas';
diff --git a/packages/cletus/src/config.ts b/packages/cletus/src/config.ts
index 3a504d4..b10e64d 100644
--- a/packages/cletus/src/config.ts
+++ b/packages/cletus/src/config.ts
@@ -195,6 +195,15 @@ export class ConfigFile extends JsonFile<Config> {
     });
   }
 
+  /**
+   * Update user settings
+   */
+  async updateUser(updates: Partial<Config['user']>): Promise<void> {
+    await this.save((config) => {
+      Object.assign(config.user, updates);
+    });
+  }
+
   /**
    * Delete a chat
    */
diff --git a/packages/cletus/src/constants.ts b/packages/cletus/src/constants.ts
index b9fef6d..b7a3a81 100644
--- a/packages/cletus/src/constants.ts
+++ b/packages/cletus/src/constants.ts
@@ -1,99 +1,3 @@
-import { adaptiveColor, isLightTerminal, adjustHexForLightMode } from './theme';
-
-/**
- * Get color constants for the Cletus UI based on terminal theme
- */
-function getColors() {
-  const isLight = isLightTerminal();
-  
-  return {
-    // User colors
-    USER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
-    USER_INPUT_BORDER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
-    USER_INPUT_PROMPT: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
-
-    // Assistant colors
-    ASSISTANT: adaptiveColor('green', 'green'), // Green works on both
-
-    // System colors
-    SYSTEM: adaptiveColor('yellow', '#b8860b'), // Darker yellow for light mode
-
-    // Status indicator colors
-    STATUS_USER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
-    STATUS_NO_OPS: adaptiveColor('gray', '#666666'), // Darker gray for light mode
-    STATUS_DONE: adaptiveColor('green', 'green'), // Green works on both
-    STATUS_ANALYZED: adaptiveColor('yellow', '#b8860b'), // Darker yellow for light mode
-    STATUS_IN_PROGRESS: adaptiveColor('rgb(255,165,0)', 'rgb(180,120,0)'), // Darker orange for light mode
-
-    // Menu Gradient
-    MENU_GRADIENT: isLight 
-      ? [
-          adjustHexForLightMode('#9d4edd', 0.5),
-          'rgb(0,90,180)',
-          'rgb(180,120,0)',
-        ]
-      : [
-          '#9d4edd',
-          'rgb(0,128,255)',
-          'rgb(255,165,0)',
-        ],
-
-    // Operation approval menu colors
-    APPROVAL_BORDER: adaptiveColor('yellow', '#b8860b'),
-    APPROVAL_SELECTED: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
-    APPROVAL_UNSELECTED: adaptiveColor('white', 'black'),
-
-    // Processing states
-    PROCESSING_BORDER: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
-    PROCESSING_TEXT: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
-
-    // Completion states
-    SUCCESS_BORDER: adaptiveColor('green', 'green'),
-    SUCCESS_TEXT: adaptiveColor('green', 'green'),
-    ERROR_BORDER: adaptiveColor('red', 'red'),
-    ERROR_TEXT: adaptiveColor('red', 'red'),
-
-    // Input states
-    INPUT_TRANSCRIBING: adaptiveColor('blue', 'rgb(0,0,180)'), // Darker blue for light mode
-    INPUT_WAITING: adaptiveColor('gray', '#666666'),
-    INPUT_APPROVAL_MENU: adaptiveColor('gray', '#666666'),
-
-    // Markdown colors
-    MAKRDOWN_HEADINGS: isLight 
-      ? [
-          { color: 'rgb(0,139,139)', bold: true }, // Dark cyan
-          { color: 'rgb(0,120,120)', bold: true },
-          { color: 'rgb(0,100,100)', bold: true },
-          { color: 'rgb(0,80,80)', bold: true },
-          { color: 'rgb(0,60,60)', bold: true },
-          { color: 'rgb(0,40,40)', bold: false },
-        ]
-      : [
-          { color: 'rgb(0,255,255)', bold: true },
-          { color: 'rgb(0,210,210)', bold: true },
-          { color: 'rgb(0,165,165)', bold: true },
-          { color: 'rgb(0,130,130)', bold: true },
-          { color: 'rgb(0,95,95)', bold: true },
-          { color: 'rgb(0,60,60)', bold: false },
-        ],
-    MARKDOWN_CODE_BACKGROUND: adaptiveColor('rgb(25,25,25)', 'rgb(240,240,240)'), // Light gray for light mode
-    MARKDOWN_LINK: adaptiveColor('rgb(15,101,187)', 'rgb(10,70,130)'), // Darker blue for light mode
-    MARKDOWN_BLOCKQUOTE: adaptiveColor('rgb(30,30,30)', 'rgb(235,235,235)'), // Light gray for light mode
-
-    // Other UI elements
-    DIM_TEXT: adaptiveColor('gray', '#666666'),
-  };
-}
-
-/**
- * Color constants for the Cletus UI
- */
-export const COLORS = getColors();
-
-/**
- * Type for color values
- */
-export type ColorValue = typeof COLORS[keyof typeof COLORS];
 
 /**
  * General constants for Cletus operations
diff --git a/packages/cletus/src/helpers/files.ts b/packages/cletus/src/helpers/files.ts
index 0ed4e0f..f296900 100644
--- a/packages/cletus/src/helpers/files.ts
+++ b/packages/cletus/src/helpers/files.ts
@@ -1,6 +1,5 @@
 import fs from "fs";
 import path from "path";
-import sharp from "sharp";
 import pdfParse from "pdf-parse";
 import XLSX from "xlsx";
 import * as mammoth from "mammoth";
@@ -948,6 +947,9 @@ async function processZipFile(
  */
 async function validateImage(imagePath: string): Promise<{ size: number, width: number, height: number } | false> {
   try {
+    // Lazy-load sharp to avoid loading it on startup
+    const sharp = (await import("sharp")).default;
+    
     // Get image dimensions using sharp
     const metadata = await sharp(imagePath).metadata();
     
diff --git a/packages/cletus/src/helpers/render.tsx b/packages/cletus/src/helpers/render.tsx
index 46f373e..1288348 100644
--- a/packages/cletus/src/helpers/render.tsx
+++ b/packages/cletus/src/helpers/render.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { COLORS } from "../constants";
-import { abbreviate, formatTime, formatValue as formatValueText } from "../common";
+import { COLORS } from "../theme";
+import { formatTime, formatValue as formatValueText } from "../common";
 import { Operation } from "../schemas";
 import { Markdown } from "../components/Markdown";
 
diff --git a/packages/cletus/src/index.tsx b/packages/cletus/src/index.tsx
index 39d6ad5..1dd8d3d 100644
--- a/packages/cletus/src/index.tsx
+++ b/packages/cletus/src/index.tsx
@@ -11,6 +11,7 @@ import { InkMainMenu } from './components/InkMainMenu';
 import { ConfigFile } from './config';
 import { configExists, setProfile } from './file-manager';
 import { initWorker } from './embed';
+import { interceptConsoleLogs } from './logger';
 
 type AppView = 'loading' | 'init' | 'main' | 'chat';
 
@@ -87,9 +88,11 @@ const App: React.FC = () => {
 /**
  * Parse command line arguments
  */
-function parseArgs(): { profile?: string } {
+function parseArgs(): { profile?: string; browser?: boolean; port?: number } {
   const args = process.argv.slice(2);
   let profile: string | undefined;
+  let browser = false;
+  let port: number | undefined;
 
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];
@@ -103,22 +106,44 @@ function parseArgs(): { profile?: string } {
       profile = args[i + 1];
       i++; // Skip next argument
     }
+    // Handle --browser flag
+    else if (arg === '--browser') {
+      browser = true;
+    }
+    // Handle --port=number format
+    else if (arg.startsWith('--port=')) {
+      port = parseInt(arg.substring('--port='.length), 10);
+    }
+    // Handle --port number format
+    else if (arg === '--port' && i + 1 < args.length) {
+      port = parseInt(args[i + 1], 10);
+      i++; // Skip next argument
+    }
   }
 
-  return { profile };
+  return { profile, browser, port };
 }
 
 async function main() {
   // Parse command line arguments and set global profile
-  const { profile } = parseArgs();
+  const { profile, browser, port } = parseArgs();
   setProfile(profile);
 
-  // Clear screen and move cursor to top
-  process.stdout.write('\x1Bc');
-
   // Initialize embed worker (don't await - let it init in background)
   initWorker();
 
+  // If browser mode, start HTTP server instead of CLI
+  if (browser) {
+    const { startBrowserServer } = await import('./browser/server');
+    await startBrowserServer(port);
+    return;
+  }
+
+  interceptConsoleLogs();
+
+  // Clear screen and move cursor to top
+  process.stdout.write('\x1Bc');
+
   const { waitUntilExit } = render(React.createElement(App), {
     exitOnCtrlC: false,
   });
diff --git a/packages/cletus/src/logger.ts b/packages/cletus/src/logger.ts
index d98e059..a05a65f 100644
--- a/packages/cletus/src/logger.ts
+++ b/packages/cletus/src/logger.ts
@@ -83,9 +83,11 @@ export const logger = {
   },
 };
 
-// Override console methods to use the logger
-console.log = (...args: any[]) => logger.log(args);
-console.error = (...args: any[]) => logger.log(args);
-console.debug = (...args: any[]) => logger.log(args);
-console.warn = (...args: any[]) => logger.log(args);
-console.info = (...args: any[]) => logger.log(args);
+export function interceptConsoleLogs(): void {
+  // Override console methods to use the logger
+  console.log = (...args: any[]) => logger.log(args);
+  console.error = (...args: any[]) => logger.log(args);
+  console.debug = (...args: any[]) => logger.log(args);
+  console.warn = (...args: any[]) => logger.log(args);
+  console.info = (...args: any[]) => logger.log(args);
+}
diff --git a/packages/cletus/src/operations/artist.tsx b/packages/cletus/src/operations/artist.tsx
index 7de503e..41049f3 100644
--- a/packages/cletus/src/operations/artist.tsx
+++ b/packages/cletus/src/operations/artist.tsx
@@ -1,7 +1,6 @@
 import { ImageGenerationResponse } from "@aeye/ai";
 import fs from 'fs/promises';
 import path from 'path';
-import sharp from "sharp";
 import url from 'url';
 import { abbreviate, cosineSimilarity, linkFile, paginateText, pluralize } from "../common";
 import { canEmbed, embed } from "../embed";
@@ -25,6 +24,9 @@ function linkImage(imagePath: string): string {
 async function loadImageAsDataUrl(cwd: string, imagePath: string): Promise<string> {
   const fullPath = resolveImage(cwd, imagePath);
 
+  // Lazy-load sharp
+  const sharp = (await import("sharp")).default;
+  
   const metadata = await sharp(fullPath).metadata();
   const width = metadata.width || 0;
   const height = metadata.height || 0;
diff --git a/packages/cletus/src/operations/clerk.tsx b/packages/cletus/src/operations/clerk.tsx
index d42b03a..61d0b50 100644
--- a/packages/cletus/src/operations/clerk.tsx
+++ b/packages/cletus/src/operations/clerk.tsx
@@ -1765,7 +1765,7 @@ export const shell = operationOf<
             </>
           )}
           <Text color={exitCode === 0 ? 'green' : exitCode !== null ? 'red' : 'yellow'}>
-            {lineCount} {lineCount === 1 ? 'line' : 'lines'} • {statusText}
+            {pluralize(lineCount, 'line')} • {statusText}
           </Text>
         </Box>
       );
diff --git a/packages/cletus/src/operations/dba.tsx b/packages/cletus/src/operations/dba.tsx
index 4be2448..311849c 100644
--- a/packages/cletus/src/operations/dba.tsx
+++ b/packages/cletus/src/operations/dba.tsx
@@ -415,8 +415,7 @@ export const data_search = operationOf<
       `${formatName(typeName)}Search("${abbreviate(op.input.query, 20)}")`,
       (op) => {
         if (op.output) {
-          const count = op.output.results.length;
-          return `Found ${count} result${count !== 1 ? 's' : ''}`;
+          return `Found ${pluralize(op.output.results.length, 'result')}`;
         }
         return null;
       },
@@ -427,7 +426,7 @@ export const data_search = operationOf<
 
 export const data_get = operationOf<
   { type: string; offset?: number; limit?: number },
-  { records: Array<{ id: string; created: number; updated: number; fields: Record<string, any> }>; total: number },
+  { records: Array<Record<string, any>>; total: number },
   {},
   { typeName: string }
 >({
@@ -453,7 +452,7 @@ export const data_get = operationOf<
       id: record.id,
       created: record.created,
       updated: record.updated,
-      fields: record.fields,
+      ...record.fields,
     }));
 
     return { records, total };
diff --git a/packages/cletus/src/operations/internet.tsx b/packages/cletus/src/operations/internet.tsx
index d44972c..d6cd19e 100644
--- a/packages/cletus/src/operations/internet.tsx
+++ b/packages/cletus/src/operations/internet.tsx
@@ -4,7 +4,7 @@ import fs from 'fs';
 import path from 'path';
 import { Readable } from 'stream';
 import { finished } from 'stream/promises';
-import { abbreviate, linkFile } from '../common';
+import { abbreviate, linkFile, pluralize } from '../common';
 import { operationOf } from './types';
 import { renderOperation } from '../helpers/render';
 import { detectExtension, fileExists, fileIsDirectory, fileIsWritable } from '../helpers/files';
@@ -69,7 +69,7 @@ export const web_search = operationOf<
     `WebSearch("${abbreviate(op.input.query, 30)}")`,
     (op) => {
       if (op.output) {
-        return `Found ${op.output.results.length} result${op.output.results.length !== 1 ? 's' : ''}`;
+        return `Found ${pluralize(op.output.results.length, 'result')}`;
       }
       return null;
     },
@@ -245,9 +245,9 @@ export const web_get_page = operationOf<
     `WebGetPage("${abbreviate(op.input.url, 30)}", ${op.input.type})`,
     (op) => {
       if (op.output) {
-        const parts: string[] = [`${op.output.totalLines} lines`];
+        const parts: string[] = [pluralize(op.output.totalLines, 'line')];
         if (op.output.matches) {
-          parts.push(`${op.output.matches.length} matches`);
+          parts.push(pluralize(op.output.matches.length, 'match', 'matches'));
         }
         return parts.join(', ');
       }
diff --git a/packages/cletus/src/operations/librarian.tsx b/packages/cletus/src/operations/librarian.tsx
index 0dea94a..d97c2e5 100644
--- a/packages/cletus/src/operations/librarian.tsx
+++ b/packages/cletus/src/operations/librarian.tsx
@@ -1,5 +1,5 @@
 import { getModel } from "@aeye/core";
-import { abbreviate } from "../common";
+import { abbreviate, pluralize } from "../common";
 import { KnowledgeFile } from "../knowledge";
 import { operationOf } from "./types";
 import { renderOperation } from "../helpers/render";
@@ -46,8 +46,7 @@ export const knowledge_search = operationOf<
     `KnowledgeSearch("${abbreviate(op.input.query, 25)}")`,
     (op) => {
       if (op.output) {
-        const count = op.output.results.length;
-        return `Found ${count} result${count !== 1 ? 's' : ''}`;
+        return `Found ${pluralize(op.output.results.length, 'result')}`;
       }
       return null;
     },
@@ -84,8 +83,7 @@ export const knowledge_sources = operationOf<{}, { sources: string[] }>({
     'KnowledgeSources()',
     (op) => {
       if (op.output) {
-        const count = op.output.sources.length;
-        return `Listed ${count} source${count !== 1 ? 's' : ''}`;
+        return `Listed ${pluralize(op.output.sources.length, 'source')}`;
       }
       return null;
     },
@@ -221,7 +219,7 @@ export const knowledge_delete = operationOf<
     `KnowledgeDelete("${op.input.sourcePattern}")`,
     (op) => {
       if (op.output) {
-        return `Deleted ${op.output.deletedCount} entr${op.output.deletedCount !== 1 ? 'ies' : 'y'}`;
+        return `Deleted ${pluralize(op.output.deletedCount, 'entry', 'entries')}`;
       }
       return null;
     },
diff --git a/packages/cletus/src/operations/planner.tsx b/packages/cletus/src/operations/planner.tsx
index 5d7bf71..bc99ae7 100644
--- a/packages/cletus/src/operations/planner.tsx
+++ b/packages/cletus/src/operations/planner.tsx
@@ -1,4 +1,4 @@
-import { abbreviate } from "../common";
+import { abbreviate, pluralize } from "../common";
 import { renderOperation } from "../helpers/render";
 import type { TodoItem } from "../schemas";
 import { operationOf } from "./types";
@@ -60,8 +60,7 @@ export const todos_list = operationOf<{}, { todos: TodoItem[] }>({
     'TodosList()',
     (op) => {
       if (op.output) {
-        const count = op.output.todos.length;
-        return `${count} todo${count !== 1 ? 's' : ''}`;
+        return pluralize(op.output.todos.length, 'todo');
       }
       return null;
     }
@@ -106,7 +105,7 @@ export const todos_add = operationOf<{ name: string }, { id: string; name: strin
   ),
 });
 
-export const todos_done = operationOf<{ id: string }, { id: string; done: boolean }>({
+export const todos_done = operationOf<{ id: string }, { id: string; done: boolean }, {}, { todoName: string }>({
   mode: 'update',
   signature: 'todos_done(id: string)',
   status: () => 'Marking todo as done',
@@ -124,6 +123,7 @@ export const todos_done = operationOf<{ id: string }, { id: string; done: boolea
     return {
       analysis: `This will mark todo "${todo.name}" as done.`,
       doable: true,
+      cache: { todoName: todo.name },
     };
   },
   do: async ({ input }, { chat, config }) => {
@@ -145,28 +145,33 @@ export const todos_done = operationOf<{ id: string }, { id: string; done: boolea
 
     return { id: input.id, done: true };
   },
-  render: (op, ai, showInput, showOutput) => renderOperation(
-    op,
-    `TodosDone(id: ${abbreviate(op.input.id, 8)})`,
-    (op) => {
-      if (op.output) {
-        return 'Marked todo as done';
-      }
-      return null;
-    },
-    showInput, showOutput
-  ),
+  render: (op, ai, showInput, showOutput) => {
+    const todoName = op.cache?.todoName || op.input.id;
+    return renderOperation(
+      op,
+      `TodosDone("${abbreviate(todoName, 64)}")`,
+      (op) => {
+        if (op.output) {
+          return 'Marked todo as done';
+        }
+        return null;
+      },
+      showInput, showOutput
+    );
+  },
 });
 
-export const todos_get = operationOf<{ id: string }, { todo: TodoItem | null }>({
+export const todos_get = operationOf<{ id: string }, { todo: TodoItem | null }, {}, { todoName: string }>({
   mode: 'local',
   signature: 'todos_get(id: string)',
   status: () => 'Getting todo details',
   analyze: async ({ input }, { chat, config }) => {
     const chatObject = config.getChats().find((c) => c.id === chat?.id);
+    const todo = chatObject?.todos.find((t) => t.id === input.id);
     return {
       analysis: `This will get details for todo with id "${input.id}"`,
       doable: !!chatObject,
+      cache: todo ? { todoName: todo.name } : undefined,
     };
   },
   do: async ({ input }, { chat, config }) => {
@@ -174,20 +179,23 @@ export const todos_get = operationOf<{ id: string }, { todo: TodoItem | null }>(
     const todo = chatObject?.todos.find((t) => t.id === input.id);
     return { todo: todo || null };
   },
-  render: (op, ai, showInput, showOutput) => renderOperation(
-    op,
-    `TodosGet(id: ${abbreviate(op.input.id, 8)})`,
-    (op) => {
-      if (op.output) {
-        return op.output.todo ? `Found: "${op.output.todo.name}"` : 'Todo not found';
-      }
-      return null;
-    },
-    showInput, showOutput
-  ),
+  render: (op, ai, showInput, showOutput) => {
+    const todoName = op.cache?.todoName || op.input.id;
+    return renderOperation(
+      op,
+      `TodosGet("${abbreviate(todoName, 64)}")`,
+      (op) => {
+        if (op.output) {
+          return op.output.todo ? `Found: "${abbreviate(op.output.todo.name, 64)}"` : 'Todo not found';
+        }
+        return null;
+      },
+      showInput, showOutput
+    );
+  },
 });
 
-export const todos_remove = operationOf<{ id: string }, { id: string; removed: boolean }>({
+export const todos_remove = operationOf<{ id: string }, { id: string; removed: boolean }, {}, { todoName: string }>({
   mode: 'delete',
   signature: 'todos_remove(id: string)',
   status: () => 'Removing todo',
@@ -205,6 +213,7 @@ export const todos_remove = operationOf<{ id: string }, { id: string; removed: b
     return {
       analysis: `This will remove todo "${todo.name}"`,
       doable: true,
+      cache: { todoName: todo.name },
     };
   },
   do: async ({ input }, { chat, config }) => {
@@ -218,17 +227,20 @@ export const todos_remove = operationOf<{ id: string }, { id: string; removed: b
 
     return { id: input.id, removed: true };
   },
-  render: (op, ai, showInput, showOutput) => renderOperation(
-    op,
-    `TodosRemove(id: ${abbreviate(op.input.id, 8)})`,
-    (op) => {
-      if (op.output) {
-        return 'Removed todo';
-      }
-      return null;
-    },
-    showInput, showOutput
-  ),
+  render: (op, ai, showInput, showOutput) => {
+    const todoName = op.cache?.todoName || op.input.id;
+    return renderOperation(
+      op,
+      `TodosRemove("${abbreviate(todoName, 64)}")`,
+      (op) => {
+        if (op.output) {
+          return 'Removed todo';
+        }
+        return null;
+      },
+      showInput, showOutput
+    );
+  },
 });
 
 export const todos_replace = operationOf<{ todos: TodoItem[] }, { count: number }>({
diff --git a/packages/cletus/src/operations/secretary.tsx b/packages/cletus/src/operations/secretary.tsx
index 61fe84e..455bcdc 100644
--- a/packages/cletus/src/operations/secretary.tsx
+++ b/packages/cletus/src/operations/secretary.tsx
@@ -1,4 +1,4 @@
-import { abbreviate } from "../common";
+import { abbreviate, pluralize } from "../common";
 import { renderOperation } from "../helpers/render";
 import { operationOf } from "./types";
 
@@ -172,8 +172,7 @@ export const memory_list = operationOf<
     'MemoryList()',
     (op) => {
       if (op.output) {
-        const count = op.output.memories.length;
-        return `${count} memor${count !== 1 ? 'ies' : 'y'}`;
+        return pluralize(op.output.memories.length, 'memory', 'memories');
       }
       return null;
     },
diff --git a/packages/cletus/src/operations/types.ts b/packages/cletus/src/operations/types.ts
index 2ddf2f1..70d99e4 100644
--- a/packages/cletus/src/operations/types.ts
+++ b/packages/cletus/src/operations/types.ts
@@ -164,6 +164,13 @@ export const Operations = {
 // Operation type for a specific operation kind
 export type OperationFor<K extends OperationKind> = typeof Operations[K];
 
+// Full operation data (input, output, cache) for a specific operation kind
+export type OperationDataFor<K extends OperationKind> = OperationOf<
+  OperationInputFor<K>,
+  OperationOutputFor<K>,
+  OperationCacheFor<K>
+>;
+
 // Operation input and output types for a specific operation kind
 export type OperationInputFor<K extends OperationKind> = OperationFor<K> extends OperationDefinition<infer I, infer O, infer C> ? I : never;
 
diff --git a/packages/cletus/src/schemas.ts b/packages/cletus/src/schemas.ts
index 5f11feb..9de5bc4 100644
--- a/packages/cletus/src/schemas.ts
+++ b/packages/cletus/src/schemas.ts
@@ -1,6 +1,5 @@
 import { any, z } from 'zod';
 import { AUTONOMOUS } from './constants';
-import { cache } from 'sharp';
 
 // ============================================================================
 // User Schema
@@ -198,7 +197,7 @@ export const ChatMetaSchema = z.object({
   mode: ChatModeSchema.default('none'),
   agentMode: AgentModeSchema.default('default'),
   model: z.string().optional(),
-  toolset: z.string().optional(),
+  toolset: z.string().optional().nullable(),
   created: z.number(),
   updated: z.number(),
   todos: z.array(TodoItemSchema).default([]),
diff --git a/packages/cletus/src/shared.ts b/packages/cletus/src/shared.ts
new file mode 100644
index 0000000..a07f1f4
--- /dev/null
+++ b/packages/cletus/src/shared.ts
@@ -0,0 +1,370 @@
+/**
+ * Shared utility functions that work in both Node.js and browser environments.
+ * This file should NOT import any Node.js-specific modules (fs, path, etc).
+ */
+
+import { CONSTS } from "./constants";
+
+/**
+ * Formats time in milliseconds to a human-readable string.
+ *
+ * @param ms - time in milliseconds
+ * @returns
+ */
+export function formatTime(ms: number): string {
+  if (ms < 1) {
+    return `${ms.toFixed(2)}ms`;
+  } if (ms < 1000) {
+    return `${ms.toFixed(0)}ms`;
+  } else {
+    return `${(ms / 1000).toFixed(1)}s`;
+  }
+}
+
+/**
+ * Formats a file size in bytes to a human-readable string.
+ *
+ * @param bytes - file size in bytes
+ * @returns formatted string like "1.5 KB", "2.3 MB", etc.
+ */
+export function formatSize(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  } else if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  } else if (bytes < 1024 * 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  } else {
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+  }
+}
+
+/**
+ * Formats name by converting camelCase, underscores, and hyphens to TitleCase.
+ *
+ * @param x - input string
+ * @returns
+ */
+export function formatName(x: string): string {
+  return x
+    .replace(/([a-z])([A-Z])/g, '$1$2') // camelCase to words
+    .replace(/[_-]+/g, ' ')               // underscores/hyphens to spaces
+    .replace(/\s+/g, ' ')                 // multiple spaces to single space
+    .trim()
+    .replace(/\b\w/g, (c) => c.toUpperCase()) // capitalize first letter of each word
+    .replace(/\s+/g, '');
+}
+
+/**
+ * Abbreviate text to a maximum length, adding ellipsis if truncated.
+ *
+ * @param text - input text
+ * @param maxLength - maximum length
+ * @returns
+ */
+export function abbreviate(text: string, maxLength: number, suffix: string = '…'): string {
+  if (text.length <= maxLength) {
+    return text;
+  } else {
+    return text.slice(0, maxLength - suffix.length) + suffix;
+  }
+}
+
+/**
+ * Delete undefined properties from an object.
+ *
+ * @param obj - input object
+ * @returns
+ */
+export function deleteUndefined<T>(obj: T): T {
+  for (const key in obj) {
+    if (obj[key] === undefined) {
+      delete obj[key];
+    }
+  }
+  return obj;
+}
+
+/**
+ * Pluralize a word based on count.
+ *
+ * @param count - number of items
+ * @param singular - singular form of the word
+ * @param plural - plural form of the word
+ * @param prefixCount - whether to prefix the count number
+ * @returns pluralized string
+ */
+export function pluralize(
+  count: number,
+  singular: string,
+  plural: string = singular + 's',
+  prefixCount: boolean = true,
+): string {
+  const unit = count === 1 ? singular : plural;
+  return prefixCount ? `${count} ${unit}` : unit;
+}
+
+/**
+ * Calculate cosine similarity between two vectors
+ */
+export function cosineSimilarity(a: number[], b: number[]): number {
+  if (a.length !== b.length) {
+    throw new Error('Vectors must have the same length');
+  }
+
+  let dotProduct = 0;
+  let magnitudeA = 0;
+  let magnitudeB = 0;
+
+  for (let i = 0; i < a.length; i++) {
+    dotProduct += a[i] * b[i];
+    magnitudeA += a[i] * a[i];
+    magnitudeB += b[i] * b[i];
+  }
+
+  magnitudeA = Math.sqrt(magnitudeA);
+  magnitudeB = Math.sqrt(magnitudeB);
+
+  if (magnitudeA === 0 || magnitudeB === 0) {
+    return 0;
+  }
+
+  return dotProduct / (magnitudeA * magnitudeB);
+}
+
+/**
+ * Chunk an array into smaller arrays of a specified size.
+ *
+ * @param array - input array
+ * @param chunkSize - size of each chunk
+ * @returns
+ */
+export function chunkArray<T>(array: T[], chunkSize: number): T[][] {
+  const chunks: T[][] = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    chunks.push(array.slice(i, i + chunkSize));
+  }
+  return chunks;
+}
+
+/**
+ * Chunk an array based on a predicate function.
+ *
+ * @param array - input array
+ * @param newChunk - function to determine if a new chunk should start
+ * @returns
+ */
+export function chunk<T>(array: T[], newChunk: (prev: T, next: T, i: number) => boolean): T[][] {
+  const chunks: T[][] = [];
+  let currentChunk: T[] = [];
+  for (let i = 0; i < array.length; i++) {
+    if (currentChunk.length === 0) {
+      currentChunk.push(array[i]);
+    } else {
+      if (newChunk(currentChunk[currentChunk.length - 1], array[i], i)) {
+        chunks.push(currentChunk);
+        currentChunk = [array[i]];
+      } else {
+        currentChunk.push(array[i]);
+      }
+    }
+  }
+  if (currentChunk.length > 0) {
+    chunks.push(currentChunk);
+  }
+  return chunks;
+}
+
+/**
+ * Groups items in an array by a key function, with optional value extraction and reduction.
+ *
+ * @param array - The items to group
+ * @param keyFn - Function to extract the key for grouping
+ * @param valueFn - Function to extract the value for each item
+ * @param reduceFn - Function to reduce the grouped values
+ * @returns The grouped and reduced map
+ */
+export function groupMap<T, K, V = T, R = V[]>(
+  array: T[],
+  keyFn: (item: T) => K,
+  valueFn?: (item: T) => V,
+  reduceFn?: (items: V[]) => R,
+): Map<K, R> {
+  const value = valueFn || ((item: T) => item as unknown as V);
+  const reduce = reduceFn || ((items: V[]) => items as unknown as R);
+
+  const valueMap = new Map<K, V[]>();
+  for (const item of array) {
+    const key = keyFn(item);
+    const group = valueMap.get(key) || [];
+    group.push(value(item));
+    valueMap.set(key, group);
+  }
+
+  const reducedMap = new Map<K, R>();
+  valueMap.forEach((items, key) => {
+    reducedMap.set(key, reduce(items));
+  });
+
+  return reducedMap;
+}
+
+/**
+ * Groups items in an array by a key function, with optional value extraction and reduction.
+ *
+ * @param array - The items to group
+ * @param keyFn - Function to extract the key for grouping
+ * @param valueFn - Function to extract the value for each item
+ * @param reduceFn - Function to reduce the grouped values
+ * @returns The grouped and reduced object
+ */
+export function group<T, K extends PropertyKey, V = T, R = V[]>(
+  array: T[],
+  keyFn: (item: T) => K,
+  valueFn?: (item: T) => V,
+  reduceFn?: (items: V[]) => R,
+): Record<K, R> {
+  return Object.fromEntries(groupMap(array, keyFn, valueFn, reduceFn).entries()) as Record<K, R>;
+}
+
+/**
+ * Creates a gate function to serialize async operations.
+ *
+ * @returns A function that serializes async operations
+ */
+export function gate() {
+  let keeper: Promise<void> = Promise.resolve();
+
+  return async<T>(fn: () => Promise<T>): Promise<T> => {
+    // Capture the current keeper immediately (before await)
+    const prevKeeper = keeper;
+
+    // Create the new keeper promise immediately
+    let resolve!: () => void;
+    let reject!: (err: any) => void;
+    keeper = new Promise<void>((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+
+    // Now wait for previous operation
+    await prevKeeper;
+
+    // Execute the function
+    try {
+      const result = await fn();
+      resolve(); // Release next waiting operation
+      return result;
+    } catch (err) {
+      reject(err); // Release next waiting operation with error
+      throw err;
+    }
+  };
+}
+
+/**
+ * Newline types that can be detected in text content.
+ */
+export type NewlineType = '\n' | '\r\n' | '\r';
+
+/**
+ * Detects the predominant newline type in the given text content.
+ * Returns '\n' (LF) as the default if no newlines are found.
+ *
+ * @param content - The text content to analyze
+ * @returns The detected newline type
+ */
+export function detectNewlineType(content: string): NewlineType {
+  const crlfCount = (content.match(/\r\n/g) || []).length;
+  // Remove CRLF first, then count standalone LF and CR
+  const contentWithoutCrlf = content.replace(/\r\n/g, '');
+  const lfCount = (contentWithoutCrlf.match(/\n/g) || []).length;
+  const crCount = (contentWithoutCrlf.match(/\r/g) || []).length;
+
+  // Default to LF if no newlines found
+  if (crlfCount === 0 && lfCount === 0 && crCount === 0) {
+    return '\n';
+  }
+
+  // Return the most common newline type
+  if (crlfCount >= lfCount && crlfCount >= crCount) {
+    return '\r\n';
+  } else if (lfCount >= crCount) {
+    return '\n';
+  } else {
+    return '\r';
+  }
+}
+
+/**
+ * Normalizes all newlines in text to LF (\n).
+ *
+ * @param content - The text content to normalize
+ * @returns Content with all newlines converted to LF
+ */
+export function normalizeNewlines(content: string): string {
+  return content.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+}
+
+/**
+ * Converts LF newlines to the specified newline type.
+ *
+ * @param content - The text content with LF newlines
+ * @param newlineType - The target newline type
+ * @returns Content with newlines converted to the specified type
+ */
+export function convertNewlines(content: string, newlineType: NewlineType): string {
+  if (newlineType === '\n') {
+    return content;
+  }
+  return content.replace(/\n/g, newlineType);
+}
+
+
+/**
+ * Paginate text by characters or lines. Never returns more than 64k characters. 
+ * In line mode it doesn't return more than 1k lines.
+ * 
+ * @param text - input text
+ * @param limit - maximum length
+ * @param offset - starting offset
+ * @param limitOffsetMode - 'characters' or 'lines'
+ * @returns 
+ */
+export function paginateText(
+  text: string, 
+  limit: number = 0,
+  offset: number = 0,
+  limitOffsetMode: 'characters' | 'lines' = 'characters',
+): string {
+ if (limitOffsetMode === 'lines') {
+    const lines = text.split('\n');
+    const max = Math.min(limit || CONSTS.MAX_LINES, CONSTS.MAX_LINES);
+    if (lines.length <= max) {
+      return text;
+    }
+
+    const start = (offset + lines.length) % lines.length;
+    const end = start + max;
+    let paginated = lines.slice(start, end);
+    const characters = lines.reduce((sum, line) => sum + line.length + 1, 0); // +1 for newline
+
+    if (characters <= CONSTS.MAX_CHARACTERS) {
+      return paginated.join('\n');
+    }
+
+    return offset < 0 
+      ? text.slice(-CONSTS.MAX_CHARACTERS) 
+      : text.slice(0, CONSTS.MAX_CHARACTERS);
+  } else { 
+    const max = Math.min(limit || CONSTS.MAX_CHARACTERS, CONSTS.MAX_CHARACTERS);
+    if (text.length < max) {
+      return text;
+    }
+
+    const start = (offset + text.length) % text.length;
+    const end = start + max;
+
+    return text.slice(start, end);
+  }
+}
diff --git a/packages/cletus/src/theme.ts b/packages/cletus/src/theme.ts
index 1be984f..2bce959 100644
--- a/packages/cletus/src/theme.ts
+++ b/packages/cletus/src/theme.ts
@@ -118,3 +118,101 @@ export function adjustHexForLightMode(hex: string, factor: number = 0.6): string
 
   return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
 }
+
+
+
+/**
+ * Get color constants for the Cletus UI based on terminal theme
+ */
+function getColors() {
+  const isLight = isLightTerminal();
+  
+  return {
+    // User colors
+    USER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
+    USER_INPUT_BORDER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
+    USER_INPUT_PROMPT: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
+
+    // Assistant colors
+    ASSISTANT: adaptiveColor('green', 'green'), // Green works on both
+
+    // System colors
+    SYSTEM: adaptiveColor('yellow', '#b8860b'), // Darker yellow for light mode
+
+    // Status indicator colors
+    STATUS_USER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
+    STATUS_NO_OPS: adaptiveColor('gray', '#666666'), // Darker gray for light mode
+    STATUS_DONE: adaptiveColor('green', 'green'), // Green works on both
+    STATUS_ANALYZED: adaptiveColor('yellow', '#b8860b'), // Darker yellow for light mode
+    STATUS_IN_PROGRESS: adaptiveColor('rgb(255,165,0)', 'rgb(180,120,0)'), // Darker orange for light mode
+
+    // Menu Gradient
+    MENU_GRADIENT: isLight 
+      ? [
+          adjustHexForLightMode('#9d4edd', 0.5),
+          'rgb(0,90,180)',
+          'rgb(180,120,0)',
+        ]
+      : [
+          '#9d4edd',
+          'rgb(0,128,255)',
+          'rgb(255,165,0)',
+        ],
+
+    // Operation approval menu colors
+    APPROVAL_BORDER: adaptiveColor('yellow', '#b8860b'),
+    APPROVAL_SELECTED: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
+    APPROVAL_UNSELECTED: adaptiveColor('white', 'black'),
+
+    // Processing states
+    PROCESSING_BORDER: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
+    PROCESSING_TEXT: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
+
+    // Completion states
+    SUCCESS_BORDER: adaptiveColor('green', 'green'),
+    SUCCESS_TEXT: adaptiveColor('green', 'green'),
+    ERROR_BORDER: adaptiveColor('red', 'red'),
+    ERROR_TEXT: adaptiveColor('red', 'red'),
+
+    // Input states
+    INPUT_TRANSCRIBING: adaptiveColor('blue', 'rgb(0,0,180)'), // Darker blue for light mode
+    INPUT_WAITING: adaptiveColor('gray', '#666666'),
+    INPUT_APPROVAL_MENU: adaptiveColor('gray', '#666666'),
+
+    // Markdown colors
+    MAKRDOWN_HEADINGS: isLight 
+      ? [
+          { color: 'rgb(0,139,139)', bold: true }, // Dark cyan
+          { color: 'rgb(0,120,120)', bold: true },
+          { color: 'rgb(0,100,100)', bold: true },
+          { color: 'rgb(0,80,80)', bold: true },
+          { color: 'rgb(0,60,60)', bold: true },
+          { color: 'rgb(0,40,40)', bold: false },
+        ]
+      : [
+          { color: 'rgb(0,255,255)', bold: true },
+          { color: 'rgb(0,210,210)', bold: true },
+          { color: 'rgb(0,165,165)', bold: true },
+          { color: 'rgb(0,130,130)', bold: true },
+          { color: 'rgb(0,95,95)', bold: true },
+          { color: 'rgb(0,60,60)', bold: false },
+        ],
+    MARKDOWN_CODE_BACKGROUND: adaptiveColor('rgb(25,25,25)', 'rgb(240,240,240)'), // Light gray for light mode
+    MARKDOWN_LINK: adaptiveColor('rgb(15,101,187)', 'rgb(10,70,130)'), // Darker blue for light mode
+    MARKDOWN_BLOCKQUOTE: adaptiveColor('rgb(30,30,30)', 'rgb(235,235,235)'), // Light gray for light mode
+
+    // Other UI elements
+    DIM_TEXT: adaptiveColor('gray', '#666666'),
+  };
+}
+
+/**
+ * Color constants for the Cletus UI
+ */
+export const COLORS = getColors();
+
+
+/**
+ * Type for color values
+ */
+export type ColorValue = typeof COLORS[keyof typeof COLORS];
\ No newline at end of file
diff --git a/packages/cletus/src/tool-registry.ts b/packages/cletus/src/tool-registry.ts
index a27f481..4ce0a4c 100644
--- a/packages/cletus/src/tool-registry.ts
+++ b/packages/cletus/src/tool-registry.ts
@@ -1,10 +1,11 @@
-import { AnyTool, Message, resolveFn } from '@aeye/core';
+import { Message, resolveFn } from '@aeye/core';
+import { CletusAIContext, CletusTool } from './ai';
 import { cosineSimilarity, pluralize } from './common';
 import { ADAPTIVE_TOOLING } from './constants';
 import { embed } from './embed';
-import { CletusAIContext } from './ai';
 import { getCachedVector, setCachedVector } from './embedding-cache';
 
+
 /**
  * Registered tool with embedded instructions for semantic search
  */
@@ -14,7 +15,7 @@ export interface RegisteredTool {
   /** Toolset this tool belongs to */
   toolset: string;
   /** Tool reference */
-  tool: AnyTool;
+  tool: CletusTool;
   /** Embedded instruction vector (null if not yet embedded) */
   vector: number[] | null;
   /** Instructions text used for embedding */
@@ -31,7 +32,7 @@ export class ToolRegistry {
   /**
    * Register a tool with its toolset
    */
-  async register(toolset: string, tool: AnyTool, instructions: string): Promise<void> {
+  async register(toolset: string, tool: CletusTool, instructions: string): Promise<void> {
     const name = tool.name;
 
     const existing = this.tools.get(name);
@@ -55,7 +56,7 @@ export class ToolRegistry {
   /**
    * Register multiple tools from a toolset
    */
-  async registerToolset(toolset: string, tools: AnyTool[], getInstructions: (tool: AnyTool) => Promise<string>): Promise<void> {
+  async registerToolset(toolset: string, tools: CletusTool[], getInstructions: (tool: CletusTool) => Promise<string>): Promise<void> {
     for (const tool of tools) {
       await this.register(toolset, tool, await getInstructions(tool));
     }
@@ -172,7 +173,7 @@ export class ToolRegistry {
     if (ctx?.chatStatus) {
       const embedTools = this.getToolsToEmbed();
       const allTools = this.tools.size;
-      if (embedTools.length === allTools) {
+      if (embedTools.length === allTools && allTools > 0) {
         ctx.chatStatus(`Initializing adaptive tools (${allTools} tools)...`);
       } else if (embedTools.length > 0) {
         ctx.chatStatus(`Updating adaptive tools (${pluralize(embedTools.length, 'tool')})...`);
@@ -234,7 +235,7 @@ export type StaticToolsetName = typeof STATIC_TOOLSETS[number] | 'utility';
 /**
  * Extract instructions from a tool (uses instructions first, falls back to description)
  */
-export async function getToolInstructions(tool: AnyTool, ctx?: CletusAIContext): Promise<string> {
+export async function getToolInstructions(tool: CletusTool, ctx?: CletusAIContext): Promise<string> {
   const input = tool.input;
   // Use instructions first if available, then fall back to description
   const instructions = input.instructionsFn && ctx
diff --git a/packages/cletus/tailwind.config.cjs b/packages/cletus/tailwind.config.cjs
new file mode 100644
index 0000000..9fa916d
--- /dev/null
+++ b/packages/cletus/tailwind.config.cjs
@@ -0,0 +1,73 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/browser/**/*.{js,jsx,ts,tsx}',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        neon: {
+          cyan: 'hsl(var(--neon-cyan))',
+          pink: 'hsl(var(--neon-pink))',
+          purple: 'hsl(var(--neon-purple))',
+          green: 'hsl(var(--neon-green))',
+          blue: 'hsl(var(--neon-blue))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'glow-pulse': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.5' },
+        },
+        'neon-flicker': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.8' },
+        },
+      },
+      animation: {
+        'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
+        'neon-flicker': 'neon-flicker 1.5s ease-in-out infinite',
+      },
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
+};
diff --git a/packages/cletus/tsconfig.browser.json b/packages/cletus/tsconfig.browser.json
new file mode 100644
index 0000000..e9e78de
--- /dev/null
+++ b/packages/cletus/tsconfig.browser.json
@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react"
+  },
+  "include": [
+    "src/browser/**/*"
+  ],
+  "exclude": [
+    "src/browser/server.ts",
+    "src/browser/**/__tests__",
+    "src/browser/**/*.test.ts",
+    "src/browser/**/*.test.tsx"
+  ]
+}
diff --git a/packages/cletus/tsconfig.json b/packages/cletus/tsconfig.json
index 5fff080..c51175e 100644
--- a/packages/cletus/tsconfig.json
+++ b/packages/cletus/tsconfig.json
@@ -7,7 +7,12 @@
     "composite": false
   },
   "include": ["src/**/*"],
-  "exclude": ["src/**/__tests__", "src/**/*.test.ts", "src/**/*.test.tsx"],
+  "exclude": [
+    "src/**/__tests__",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx",
+    "src/browser/**/*"
+  ],
   "references": [
     { "path": "../core" },
     { "path": "../ai" },
diff --git a/packages/core/src/prompt.ts b/packages/core/src/prompt.ts
index 208ad51..d878462 100644
--- a/packages/core/src/prompt.ts
+++ b/packages/core/src/prompt.ts
@@ -194,6 +194,7 @@ export type PromptToolEvents<TTools extends Tuple<AnyTool>> =
  * The events emitted during prompt execution/streaming.
  */
 export type PromptEvent<TOutput, TTools extends Tuple<AnyTool>> =
+  { type: 'request', request: Request, iterations: number } |
   { type: 'textPartial', content: string, request: Request } |
   { type: 'text', content: string, request: Request } |
   { type: 'refusal', content: string, request: Request } |
@@ -629,6 +630,8 @@ export class Prompt<
         ...(await this.metadataFn(input, ctx) || {}),
       };
 
+      yield emit({ type: 'request', request, iterations });
+
       const stream = streamer(request, ctx, metadata, streamController.signal);
 
       for await (const chunk of stream) {