fix(app): scroll jacking

fix(app): permission indicator
fix(app): permission notifications
2026-02-27 03:04:37 +00:00 · 2026-02-26 20:41:35 -06:00 · 2026-02-26 20:40:39 -06:00 · 2026-02-26 20:36:10 -06:00 · 2026-02-27 00:29:02 +00:00 · 2026-02-26 18:23:04 -06:00
188 changed files with 12514 additions and 3517 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -418,6 +418,27 @@
        "typescript": "catalog:",
      },
    },
+    "packages/storybook": {
+      "name": "@opencode-ai/storybook",
+      "devDependencies": {
+        "@opencode-ai/ui": "workspace:*",
+        "@solidjs/meta": "catalog:",
+        "@storybook/addon-a11y": "^10.2.10",
+        "@storybook/addon-docs": "^10.2.10",
+        "@storybook/addon-links": "^10.2.10",
+        "@storybook/addon-onboarding": "^10.2.10",
+        "@storybook/addon-vitest": "^10.2.10",
+        "@tsconfig/node22": "catalog:",
+        "@types/node": "catalog:",
+        "@types/react": "18.0.25",
+        "react": "18.2.0",
+        "solid-js": "catalog:",
+        "storybook": "^10.2.10",
+        "storybook-solidjs-vite": "^10.0.9",
+        "typescript": "catalog:",
+        "vite": "catalog:",
+      },
+    },
    "packages/ui": {
      "name": "@opencode-ai/ui",
      "version": "1.2.15",
@@ -1136,6 +1157,8 @@

    "@jimp/utils": ["@jimp/utils@1.6.0", "", { "dependencies": { "@jimp/types": "1.6.0", "tinycolor2": "^1.6.0" } }, "sha512-gqFTGEosKbOkYF/WFj26jMHOI5OH2jeP1MmC/zbK6BF6VJBf8rIC5898dPfSzZEbSA0wbbV5slbntWVc5PKLFA=="],

+    "@joshwooding/vite-plugin-react-docgen-typescript": ["@joshwooding/vite-plugin-react-docgen-typescript@0.6.4", "", { "dependencies": { "glob": "^13.0.1", "react-docgen-typescript": "^2.2.2" }, "peerDependencies": { "typescript": ">= 4.3.x", "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" }, "optionalPeers": ["typescript"] }, "sha512-6PyZBYKnnVNqOSB0YFly+62R7dmov8segT27A+RVTBVd4iAE6kbW9QBJGlyR2yG4D4ohzhZSTIu7BK1UTtmFFA=="],
+
    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],

    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -1208,6 +1231,8 @@

    "@mdx-js/mdx": ["@mdx-js/mdx@3.1.1", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdx": "^2.0.0", "acorn": "^8.0.0", "collapse-white-space": "^2.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "estree-util-scope": "^1.0.0", "estree-walker": "^3.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "markdown-extensions": "^2.0.0", "recma-build-jsx": "^1.0.0", "recma-jsx": "^1.0.0", "recma-stringify": "^1.0.0", "rehype-recma": "^1.0.0", "remark-mdx": "^3.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "source-map": "^0.7.0", "unified": "^11.0.0", "unist-util-position-from-estree": "^2.0.0", "unist-util-stringify-position": "^4.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ=="],

+    "@mdx-js/react": ["@mdx-js/react@3.1.1", "", { "dependencies": { "@types/mdx": "^2.0.0" }, "peerDependencies": { "@types/react": ">=16", "react": ">=16" } }, "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw=="],
+
    "@mixmark-io/domino": ["@mixmark-io/domino@2.2.0", "", {}, "sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw=="],

    "@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.25.2", "", { "dependencies": { "@hono/node-server": "^1.19.7", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "content-type": "^1.0.5", "cors": "^2.8.5", "cross-spawn": "^7.0.5", "eventsource": "^3.0.2", "eventsource-parser": "^3.0.0", "express": "^5.0.1", "express-rate-limit": "^7.5.0", "jose": "^6.1.1", "json-schema-typed": "^8.0.2", "pkce-challenge": "^5.0.0", "raw-body": "^3.0.0", "zod": "^3.25 || ^4.0", "zod-to-json-schema": "^3.25.0" }, "peerDependencies": { "@cfworker/json-schema": "^4.1.1" }, "optionalPeers": ["@cfworker/json-schema"] }, "sha512-LZFeo4F9M5qOhC/Uc1aQSrBHxMrvxett+9KLHt7OhcExtoiRN9DKgbZffMP/nxjutWDQpfMDfP3nkHI4X9ijww=="],
@@ -1302,6 +1327,8 @@

    "@opencode-ai/slack": ["@opencode-ai/slack@workspace:packages/slack"],

+    "@opencode-ai/storybook": ["@opencode-ai/storybook@workspace:packages/storybook"],
+
    "@opencode-ai/ui": ["@opencode-ai/ui@workspace:packages/ui"],

    "@opencode-ai/util": ["@opencode-ai/util@workspace:packages/util"],
@@ -1774,6 +1801,26 @@

    "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],

+    "@storybook/addon-a11y": ["@storybook/addon-a11y@10.2.10", "", { "dependencies": { "@storybook/global": "^5.0.0", "axe-core": "^4.2.0" }, "peerDependencies": { "storybook": "^10.2.10" } }, "sha512-1S9pDXgvbHhBStGarCvfJ3/rfcaiAcQHRhuM3Nk4WGSIYtC1LCSRuzYdDYU0aNRpdCbCrUA7kUCbqvIE3tH+3Q=="],
+
+    "@storybook/addon-docs": ["@storybook/addon-docs@10.2.10", "", { "dependencies": { "@mdx-js/react": "^3.0.0", "@storybook/csf-plugin": "10.2.10", "@storybook/icons": "^2.0.1", "@storybook/react-dom-shim": "10.2.10", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "ts-dedent": "^2.0.0" }, "peerDependencies": { "storybook": "^10.2.10" } }, "sha512-2wIYtdvZIzPbQ5194M5Igpy8faNbQ135nuO5ZaZ2VuttqGr+IJcGnDP42zYwbAsGs28G8ohpkbSgIzVyJWUhPQ=="],
+
+    "@storybook/addon-links": ["@storybook/addon-links@10.2.10", "", { "dependencies": { "@storybook/global": "^5.0.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "storybook": "^10.2.10" }, "optionalPeers": ["react"] }, "sha512-oo9Xx4/2OVJtptXKpqH4ySri7ZuBdiSOXlZVGejEfLa0Jeajlh/KIlREpGvzPPOqUVT7dSddWzBjJmJUyQC3ew=="],
+
+    "@storybook/addon-onboarding": ["@storybook/addon-onboarding@10.2.10", "", { "peerDependencies": { "storybook": "^10.2.10" } }, "sha512-DkzZQTXHp99SpHMIQ5plbbHcs4EWVzWhLXlW+icA8sBlKo5Bwj540YcOApKbqB0m/OzWprsznwN7Kv4vfvHu4w=="],
+
+    "@storybook/addon-vitest": ["@storybook/addon-vitest@10.2.10", "", { "dependencies": { "@storybook/global": "^5.0.0", "@storybook/icons": "^2.0.1" }, "peerDependencies": { "@vitest/browser": "^3.0.0 || ^4.0.0", "@vitest/browser-playwright": "^4.0.0", "@vitest/runner": "^3.0.0 || ^4.0.0", "storybook": "^10.2.10", "vitest": "^3.0.0 || ^4.0.0" }, "optionalPeers": ["@vitest/browser", "@vitest/browser-playwright", "@vitest/runner", "vitest"] }, "sha512-U2oHw+Ar+Xd06wDTB74VlujhIIW89OHThpJjwgqgM6NWrOC/XLllJ53ILFDyREBkMwpBD7gJQIoQpLEcKBIEhw=="],
+
+    "@storybook/builder-vite": ["@storybook/builder-vite@10.2.10", "", { "dependencies": { "@storybook/csf-plugin": "10.2.10", "ts-dedent": "^2.0.0" }, "peerDependencies": { "storybook": "^10.2.10", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-Wd6CYL7LvRRNiXMz977x9u/qMm7nmMw/7Dow2BybQo+Xbfy1KhVjIoZ/gOiG515zpojSozctNrJUbM0+jH1jwg=="],
+
+    "@storybook/csf-plugin": ["@storybook/csf-plugin@10.2.10", "", { "dependencies": { "unplugin": "^2.3.5" }, "peerDependencies": { "esbuild": "*", "rollup": "*", "storybook": "^10.2.10", "vite": "*", "webpack": "*" }, "optionalPeers": ["esbuild", "rollup", "vite", "webpack"] }, "sha512-aFvgaNDAnKMjuyhPK5ialT22pPqMN0XfPBNPeeNVPYztngkdKBa8WFqF/umDd47HxAjebq+vn6uId1xHyOHH3g=="],
+
+    "@storybook/global": ["@storybook/global@5.0.0", "", {}, "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ=="],
+
+    "@storybook/icons": ["@storybook/icons@2.0.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-/smVjw88yK3CKsiuR71vNgWQ9+NuY2L+e8X7IMrFjexjm6ZR8ULrV2DRkTA61aV6ryefslzHEGDInGpnNeIocg=="],
+
+    "@storybook/react-dom-shim": ["@storybook/react-dom-shim@10.2.10", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "storybook": "^10.2.10" } }, "sha512-TmBrhyLHn8B8rvDHKk5uW5BqzO1M1T+fqFNWg88NIAJOoyX4Uc90FIJjDuN1OJmWKGwB5vLmPwaKBYsTe1yS+w=="],
+
    "@stripe/stripe-js": ["@stripe/stripe-js@8.6.1", "", {}, "sha512-UJ05U2062XDgydbUcETH1AoRQLNhigQ2KmDn1BG8sC3xfzu6JKg95Qt6YozdzFpxl1Npii/02m2LEWFt1RYjVA=="],

    "@swc/helpers": ["@swc/helpers@0.5.18", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ=="],
@@ -1866,6 +1913,12 @@

    "@tediousjs/connection-string": ["@tediousjs/connection-string@0.5.0", "", {}, "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ=="],

+    "@testing-library/dom": ["@testing-library/dom@10.4.1", "", { "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", "@types/aria-query": "^5.0.1", "aria-query": "5.3.0", "dom-accessibility-api": "^0.5.9", "lz-string": "^1.5.0", "picocolors": "1.1.1", "pretty-format": "^27.0.2" } }, "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg=="],
+
+    "@testing-library/jest-dom": ["@testing-library/jest-dom@6.9.1", "", { "dependencies": { "@adobe/css-tools": "^4.4.0", "aria-query": "^5.0.0", "css.escape": "^1.5.1", "dom-accessibility-api": "^0.6.3", "picocolors": "^1.1.1", "redent": "^3.0.0" } }, "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA=="],
+
+    "@testing-library/user-event": ["@testing-library/user-event@14.6.1", "", { "peerDependencies": { "@testing-library/dom": ">=7.21.4" } }, "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw=="],
+
    "@thisbeyond/solid-dnd": ["@thisbeyond/solid-dnd@0.7.5", "", { "peerDependencies": { "solid-js": "^1.5" } }, "sha512-DfI5ff+yYGpK9M21LhYwIPlbP2msKxN2ARwuu6GF8tT1GgNVDTI8VCQvH4TJFoVApP9d44izmAcTh/iTCH2UUw=="],

    "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],
@@ -1876,6 +1929,8 @@

    "@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],

+    "@types/aria-query": ["@types/aria-query@5.0.4", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="],
+
    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],

    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
@@ -2010,7 +2065,7 @@

    "@vitejs/plugin-react": ["@vitejs/plugin-react@4.7.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA=="],

-    "@vitest/expect": ["@vitest/expect@4.0.18", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@types/chai": "^5.2.2", "@vitest/spy": "4.0.18", "@vitest/utils": "4.0.18", "chai": "^6.2.1", "tinyrainbow": "^3.0.3" } }, "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ=="],
+    "@vitest/expect": ["@vitest/expect@3.2.4", "", { "dependencies": { "@types/chai": "^5.2.2", "@vitest/spy": "3.2.4", "@vitest/utils": "3.2.4", "chai": "^5.2.0", "tinyrainbow": "^2.0.0" } }, "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig=="],

    "@vitest/mocker": ["@vitest/mocker@4.0.18", "", { "dependencies": { "@vitest/spy": "4.0.18", "estree-walker": "^3.0.3", "magic-string": "^0.30.21" }, "peerDependencies": { "msw": "^2.4.9", "vite": "^6.0.0 || ^7.0.0-0" }, "optionalPeers": ["msw", "vite"] }, "sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ=="],

@@ -2020,7 +2075,7 @@

    "@vitest/snapshot": ["@vitest/snapshot@4.0.18", "", { "dependencies": { "@vitest/pretty-format": "4.0.18", "magic-string": "^0.30.21", "pathe": "^2.0.3" } }, "sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA=="],

-    "@vitest/spy": ["@vitest/spy@4.0.18", "", {}, "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw=="],
+    "@vitest/spy": ["@vitest/spy@3.2.4", "", { "dependencies": { "tinyspy": "^4.0.3" } }, "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw=="],

    "@vitest/utils": ["@vitest/utils@4.0.18", "", { "dependencies": { "@vitest/pretty-format": "4.0.18", "tinyrainbow": "^3.0.3" } }, "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA=="],

@@ -2116,6 +2171,8 @@

    "assertion-error": ["assertion-error@2.0.1", "", {}, "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="],

+    "ast-types": ["ast-types@0.16.1", "", { "dependencies": { "tslib": "^2.0.1" } }, "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg=="],
+
    "astring": ["astring@1.9.0", "", { "bin": { "astring": "bin/astring" } }, "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg=="],

    "astro": ["astro@5.7.13", "", { "dependencies": { "@astrojs/compiler": "^2.11.0", "@astrojs/internal-helpers": "0.6.1", "@astrojs/markdown-remark": "6.3.1", "@astrojs/telemetry": "3.2.1", "@capsizecss/unpack": "^2.4.0", "@oslojs/encoding": "^1.1.0", "@rollup/pluginutils": "^5.1.4", "acorn": "^8.14.1", "aria-query": "^5.3.2", "axobject-query": "^4.1.0", "boxen": "8.0.1", "ci-info": "^4.2.0", "clsx": "^2.1.1", "common-ancestor-path": "^1.0.1", "cookie": "^1.0.2", "cssesc": "^3.0.0", "debug": "^4.4.0", "deterministic-object-hash": "^2.0.2", "devalue": "^5.1.1", "diff": "^5.2.0", "dlv": "^1.1.3", "dset": "^3.1.4", "es-module-lexer": "^1.6.0", "esbuild": "^0.25.0", "estree-walker": "^3.0.3", "flattie": "^1.1.1", "fontace": "~0.3.0", "github-slugger": "^2.0.0", "html-escaper": "3.0.3", "http-cache-semantics": "^4.1.1", "js-yaml": "^4.1.0", "kleur": "^4.1.5", "magic-string": "^0.30.17", "magicast": "^0.3.5", "mrmime": "^2.0.1", "neotraverse": "^0.6.18", "p-limit": "^6.2.0", "p-queue": "^8.1.0", "package-manager-detector": "^1.1.0", "picomatch": "^4.0.2", "prompts": "^2.4.2", "rehype": "^13.0.2", "semver": "^7.7.1", "shiki": "^3.2.1", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.12", "tsconfck": "^3.1.5", "ultrahtml": "^1.6.0", "unifont": "~0.5.0", "unist-util-visit": "^5.0.0", "unstorage": "^1.15.0", "vfile": "^6.0.3", "vite": "^6.3.4", "vitefu": "^1.0.6", "xxhash-wasm": "^1.1.0", "yargs-parser": "^21.1.1", "yocto-spinner": "^0.2.1", "zod": "^3.24.2", "zod-to-json-schema": "^3.24.5", "zod-to-ts": "^1.2.0" }, "optionalDependencies": { "sharp": "^0.33.3" }, "bin": { "astro": "astro.js" } }, "sha512-cRGq2llKOhV3XMcYwQpfBIUcssN6HEK5CRbcMxAfd9OcFhvWE7KUy50zLioAZVVl3AqgUTJoNTlmZfD2eG0G1w=="],
@@ -2144,6 +2201,8 @@

    "aws4fetch": ["aws4fetch@1.0.20", "", {}, "sha512-/djoAN709iY65ETD6LKCtyyEI04XIBP5xVvfmNxsEP0uJB5tyaGBztSryRr4HqMStr9R06PisQE7m9zDTXKu6g=="],

+    "axe-core": ["axe-core@4.11.1", "", {}, "sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A=="],
+
    "axios": ["axios@1.13.5", "", { "dependencies": { "follow-redirects": "^1.15.11", "form-data": "^4.0.5", "proxy-from-env": "^1.1.0" } }, "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q=="],

    "axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
@@ -2258,7 +2317,7 @@

    "ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="],

-    "chai": ["chai@6.2.2", "", {}, "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg=="],
+    "chai": ["chai@5.3.3", "", { "dependencies": { "assertion-error": "^2.0.1", "check-error": "^2.1.1", "deep-eql": "^5.0.1", "loupe": "^3.1.0", "pathval": "^2.0.0" } }, "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw=="],

    "chainsaw": ["chainsaw@0.1.0", "", { "dependencies": { "traverse": ">=0.3.0 <0.4" } }, "sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ=="],

@@ -2274,6 +2333,8 @@

    "chart.js": ["chart.js@4.5.1", "", { "dependencies": { "@kurkle/color": "^0.3.0" } }, "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw=="],

+    "check-error": ["check-error@2.1.3", "", {}, "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA=="],
+
    "cheerio": ["cheerio@1.0.0-rc.12", "", { "dependencies": { "cheerio-select": "^2.1.0", "dom-serializer": "^2.0.0", "domhandler": "^5.0.3", "domutils": "^3.0.1", "htmlparser2": "^8.0.1", "parse5": "^7.0.0", "parse5-htmlparser2-tree-adapter": "^7.0.0" } }, "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q=="],

    "cheerio-select": ["cheerio-select@2.1.0", "", { "dependencies": { "boolbase": "^1.0.0", "css-select": "^5.1.0", "css-what": "^6.1.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.0.1" } }, "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g=="],
@@ -2368,6 +2429,8 @@

    "css-what": ["css-what@6.2.2", "", {}, "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="],

+    "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
+
    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],

    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
@@ -2388,6 +2451,8 @@

    "decode-named-character-reference": ["decode-named-character-reference@1.3.0", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q=="],

+    "deep-eql": ["deep-eql@5.0.2", "", {}, "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q=="],
+
    "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],

    "default-browser": ["default-browser@5.5.0", "", { "dependencies": { "bundle-name": "^4.1.0", "default-browser-id": "^5.0.0" } }, "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw=="],
@@ -2440,6 +2505,8 @@

    "dns-packet": ["dns-packet@5.6.1", "", { "dependencies": { "@leichtgewicht/ip-codec": "^2.0.1" } }, "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw=="],

+    "dom-accessibility-api": ["dom-accessibility-api@0.6.3", "", {}, "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w=="],
+
    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],

    "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
@@ -2834,6 +2901,8 @@

    "import-meta-resolve": ["import-meta-resolve@4.2.0", "", {}, "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg=="],

+    "indent-string": ["indent-string@4.0.0", "", {}, "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="],
+
    "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],

    "ini": ["ini@1.3.8", "", {}, "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="],
@@ -3074,6 +3143,8 @@

    "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],

+    "loupe": ["loupe@3.2.1", "", {}, "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ=="],
+
    "lower-case": ["lower-case@2.0.2", "", { "dependencies": { "tslib": "^2.0.3" } }, "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg=="],

    "lru-cache": ["lru-cache@11.2.6", "", {}, "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ=="],
@@ -3084,6 +3155,8 @@

    "luxon": ["luxon@3.6.1", "", {}, "sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ=="],

+    "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
+
    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],

    "magicast": ["magicast@0.3.5", "", { "dependencies": { "@babel/parser": "^7.25.4", "@babel/types": "^7.25.4", "source-map-js": "^1.2.0" } }, "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ=="],
@@ -3234,6 +3307,8 @@

    "mimic-fn": ["mimic-fn@4.0.0", "", {}, "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw=="],

+    "min-indent": ["min-indent@1.0.1", "", {}, "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="],
+
    "miniflare": ["miniflare@4.20251118.1", "", { "dependencies": { "@cspotcode/source-map-support": "0.8.1", "acorn": "8.14.0", "acorn-walk": "8.3.2", "exit-hook": "2.2.1", "glob-to-regexp": "0.4.1", "sharp": "^0.33.5", "stoppable": "1.1.0", "undici": "7.14.0", "workerd": "1.20251118.0", "ws": "8.18.0", "youch": "4.1.0-beta.10", "zod": "3.22.3" }, "bin": { "miniflare": "bootstrap.js" } }, "sha512-uLSAE/DvOm392fiaig4LOaatxLjM7xzIniFRG5Y3yF9IduOYLLK/pkCPQNCgKQH3ou0YJRHnTN+09LPfqYNTQQ=="],

    "minimatch": ["minimatch@10.0.3", "", { "dependencies": { "@isaacs/brace-expansion": "^5.0.0" } }, "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw=="],
@@ -3426,6 +3501,8 @@

    "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],

+    "pathval": ["pathval@2.0.1", "", {}, "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ=="],
+
    "peberminta": ["peberminta@0.9.0", "", {}, "sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ=="],

    "peek-readable": ["peek-readable@4.1.0", "", {}, "sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg=="],
@@ -3492,6 +3569,8 @@

    "pretty": ["pretty@2.0.0", "", { "dependencies": { "condense-newlines": "^0.2.1", "extend-shallow": "^2.0.1", "js-beautify": "^1.6.12" } }, "sha512-G9xUchgTEiNpormdYBl+Pha50gOUovT18IvAe7EYMZ1/f9W/WWMPRn+xI68yXNMUk3QXHDwo/1wV/4NejVNe1w=="],

+    "pretty-format": ["pretty-format@27.5.1", "", { "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", "react-is": "^17.0.1" } }, "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ=="],
+
    "prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],

    "process": ["process@0.11.10", "", {}, "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="],
@@ -3534,8 +3613,12 @@

    "react": ["react@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="],

+    "react-docgen-typescript": ["react-docgen-typescript@2.4.0", "", { "peerDependencies": { "typescript": ">= 4.3.x" } }, "sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg=="],
+
    "react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],

+    "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
+
    "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],

    "react-remove-scroll": ["react-remove-scroll@2.5.5", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.3", "react-style-singleton": "^2.2.1", "tslib": "^2.1.0", "use-callback-ref": "^1.3.0", "use-sidecar": "^1.1.2" }, "peerDependencies": { "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw=="],
@@ -3560,6 +3643,8 @@

    "real-require": ["real-require@0.2.0", "", {}, "sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg=="],

+    "recast": ["recast@0.23.11", "", { "dependencies": { "ast-types": "^0.16.1", "esprima": "~4.0.0", "source-map": "~0.6.1", "tiny-invariant": "^1.3.3", "tslib": "^2.0.1" } }, "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA=="],
+
    "recma-build-jsx": ["recma-build-jsx@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="],

    "recma-jsx": ["recma-jsx@1.0.1", "", { "dependencies": { "acorn-jsx": "^5.0.0", "estree-util-to-js": "^2.0.0", "recma-parse": "^1.0.0", "recma-stringify": "^1.0.0", "unified": "^11.0.0" }, "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w=="],
@@ -3568,6 +3653,8 @@

    "recma-stringify": ["recma-stringify@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-to-js": "^2.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g=="],

+    "redent": ["redent@3.0.0", "", { "dependencies": { "indent-string": "^4.0.0", "strip-indent": "^3.0.0" } }, "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg=="],
+
    "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],

    "regex": ["regex@6.1.0", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg=="],
@@ -3760,7 +3847,7 @@

    "sonic-boom": ["sonic-boom@4.2.1", "", { "dependencies": { "atomic-sleep": "^1.0.0" } }, "sha512-w6AxtubXa2wTXAUsZMMWERrsIRAdrK0Sc+FUytWvYAhBJLyuI4llrMIC1DtlNSdI99EI86KZum2MMq3EAZlF9Q=="],

-    "source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
+    "source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],

    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],

@@ -3808,6 +3895,10 @@

    "stoppable": ["stoppable@1.1.0", "", {}, "sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw=="],

+    "storybook": ["storybook@10.2.10", "", { "dependencies": { "@storybook/global": "^5.0.0", "@storybook/icons": "^2.0.1", "@testing-library/jest-dom": "^6.6.3", "@testing-library/user-event": "^14.6.1", "@vitest/expect": "3.2.4", "@vitest/spy": "3.2.4", "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0", "open": "^10.2.0", "recast": "^0.23.5", "semver": "^7.7.3", "use-sync-external-store": "^1.5.0", "ws": "^8.18.0" }, "peerDependencies": { "prettier": "^2 || ^3" }, "optionalPeers": ["prettier"], "bin": "./dist/bin/dispatcher.js" }, "sha512-N4U42qKgzMHS7DjqLz5bY4P7rnvJtYkWFCyKspZr3FhPUuy6CWOae3aYC2BjXkHrdug0Jyta6VxFTuB1tYUKhg=="],
+
+    "storybook-solidjs-vite": ["storybook-solidjs-vite@10.0.9", "", { "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "^0.6.1", "@storybook/builder-vite": "^10.0.0", "@storybook/global": "^5.0.0", "vite-plugin-solid": "^2.11.8" }, "peerDependencies": { "solid-js": "^1.9.0", "storybook": "^0.0.0-0 || ^10.0.0", "typescript": ">= 4.9.x", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" }, "optionalPeers": ["typescript"] }, "sha512-n6MwWCL9mK/qIaUutE9vhGB0X1I1hVnKin2NL+iVC5oXfAiuaABVZlr/1oEeEypsgCdyDOcbEbhJmDWmaqGpPw=="],
+
    "stream-replace-string": ["stream-replace-string@2.0.0", "", {}, "sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w=="],

    "streamx": ["streamx@2.23.0", "", { "dependencies": { "events-universal": "^1.0.0", "fast-fifo": "^1.3.2", "text-decoder": "^1.1.0" } }, "sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg=="],
@@ -3834,6 +3925,8 @@

    "strip-final-newline": ["strip-final-newline@3.0.0", "", {}, "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw=="],

+    "strip-indent": ["strip-indent@3.0.0", "", { "dependencies": { "min-indent": "^1.0.0" } }, "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ=="],
+
    "stripe": ["stripe@18.0.0", "", { "dependencies": { "@types/node": ">=8.1.0", "qs": "^6.11.0" } }, "sha512-3Fs33IzKUby//9kCkCa1uRpinAoTvj6rJgQ2jrBEysoxEvfsclvXdna1amyEYbA2EKkjynuB4+L/kleCCaWTpA=="],

    "strnum": ["strnum@1.1.2", "", {}, "sha512-vrN+B7DBIoTTZjnPNewwhx6cBA/H+IS7rfW68n7XxC1y7uoiGQBxaKzqucGUgavX15dJgiGztLJ8vxuEzwqBdA=="],
@@ -3896,6 +3989,8 @@

    "tinyrainbow": ["tinyrainbow@3.0.3", "", {}, "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q=="],

+    "tinyspy": ["tinyspy@4.0.4", "", {}, "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q=="],
+
    "titleize": ["titleize@4.0.0", "", {}, "sha512-ZgUJ1K83rhdu7uh7EHAC2BgY5DzoX8V5rTvoWI4vFysggi6YjLe5gUXABPWAU7VkvGP7P/0YiWq+dcPeYDsf1g=="],

    "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
@@ -3920,6 +4015,8 @@

    "ts-algebra": ["ts-algebra@2.0.0", "", {}, "sha512-FPAhNPFMrkwz76P7cdjdmiShwMynZYN6SgOujD1urY4oNm80Ou9oMdmbR45LotcKOXoy7wSmHkRFE6Mxbrhefw=="],

+    "ts-dedent": ["ts-dedent@2.2.0", "", {}, "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ=="],
+
    "ts-interface-checker": ["ts-interface-checker@0.1.13", "", {}, "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="],

    "tsconfck": ["tsconfck@3.1.6", "", { "peerDependencies": { "typescript": "^5.0.0" }, "optionalPeers": ["typescript"], "bin": { "tsconfck": "bin/tsconfck.js" } }, "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w=="],
@@ -4020,6 +4117,8 @@

    "unpipe": ["unpipe@1.0.0", "", {}, "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="],

+    "unplugin": ["unplugin@2.3.11", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "acorn": "^8.15.0", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww=="],
+
    "unstorage": ["unstorage@2.0.0-alpha.5", "", { "peerDependencies": { "@azure/app-configuration": "^1.9.0", "@azure/cosmos": "^4.7.0", "@azure/data-tables": "^13.3.1", "@azure/identity": "^4.13.0", "@azure/keyvault-secrets": "^4.10.0", "@azure/storage-blob": "^12.29.1", "@capacitor/preferences": "^6.0.3 || ^7.0.0", "@deno/kv": ">=0.12.0", "@netlify/blobs": "^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0", "@planetscale/database": "^1.19.0", "@upstash/redis": "^1.35.6", "@vercel/blob": ">=0.27.3", "@vercel/functions": "^2.2.12 || ^3.0.0", "@vercel/kv": "^1.0.1", "aws4fetch": "^1.0.20", "chokidar": "^4 || ^5", "db0": ">=0.3.4", "idb-keyval": "^6.2.2", "ioredis": "^5.8.2", "lru-cache": "^11.2.2", "mongodb": "^6 || ^7", "ofetch": "*", "uploadthing": "^7.7.4" }, "optionalPeers": ["@azure/app-configuration", "@azure/cosmos", "@azure/data-tables", "@azure/identity", "@azure/keyvault-secrets", "@azure/storage-blob", "@capacitor/preferences", "@deno/kv", "@netlify/blobs", "@planetscale/database", "@upstash/redis", "@vercel/blob", "@vercel/functions", "@vercel/kv", "aws4fetch", "chokidar", "db0", "idb-keyval", "ioredis", "lru-cache", "mongodb", "ofetch", "uploadthing"] }, "sha512-Sj8btci21Twnd6M+N+MHhjg3fVn6lAPElPmvFTe0Y/wR0WImErUdA1PzlAaUavHylJ7uDiFwlZDQKm0elG4b7g=="],

    "unzip-stream": ["unzip-stream@0.3.4", "", { "dependencies": { "binary": "^0.3.0", "mkdirp": "^0.5.1" } }, "sha512-PyofABPVv+d7fL7GOpusx7eRT9YETY2X04PhwbSipdj6bMxVCFJrr+nm0Mxqbf9hUiTin/UsnuFWBXlDZFy0Cw=="],
@@ -4032,6 +4131,8 @@

    "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],

+    "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
+
    "utif2": ["utif2@4.1.0", "", { "dependencies": { "pako": "^1.0.11" } }, "sha512-+oknB9FHrJ7oW7A2WZYajOcv4FcDR4CfoGB0dPNfxbi4GO05RRnFmt5oa23+9w32EanrYcSJWspUiJkLMs+37w=="],

    "util": ["util@0.12.5", "", { "dependencies": { "inherits": "^2.0.3", "is-arguments": "^1.0.4", "is-generator-function": "^1.0.7", "is-typed-array": "^1.1.3", "which-typed-array": "^1.1.2" } }, "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA=="],
@@ -4106,6 +4207,8 @@

    "webidl-conversions": ["webidl-conversions@3.0.1", "", {}, "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="],

+    "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
+
    "whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],

    "whatwg-url": ["whatwg-url@5.0.0", "", { "dependencies": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" } }, "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw=="],
@@ -4260,6 +4363,8 @@

    "@astrojs/mdx/@astrojs/markdown-remark": ["@astrojs/markdown-remark@6.3.10", "", { "dependencies": { "@astrojs/internal-helpers": "0.7.5", "@astrojs/prism": "3.3.0", "github-slugger": "^2.0.0", "hast-util-from-html": "^2.0.3", "hast-util-to-text": "^4.0.2", "import-meta-resolve": "^4.2.0", "js-yaml": "^4.1.1", "mdast-util-definitions": "^6.0.0", "rehype-raw": "^7.0.0", "rehype-stringify": "^10.0.1", "remark-gfm": "^4.0.1", "remark-parse": "^11.0.0", "remark-rehype": "^11.1.2", "remark-smartypants": "^3.0.2", "shiki": "^3.19.0", "smol-toml": "^1.5.2", "unified": "^11.0.5", "unist-util-remove-position": "^5.0.0", "unist-util-visit": "^5.0.0", "unist-util-visit-parents": "^6.0.2", "vfile": "^6.0.3" } }, "sha512-kk4HeYR6AcnzC4QV8iSlOfh+N8TZ3MEStxPyenyCtemqn8IpEATBFMTJcfrNW32dgpt6MY3oCkMM/Tv3/I4G3A=="],

+    "@astrojs/mdx/source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
+
    "@astrojs/sitemap/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],

    "@astrojs/solid-js/vite": ["vite@6.4.1", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g=="],
@@ -4488,6 +4593,8 @@

    "@jsx-email/doiuse-email/htmlparser2": ["htmlparser2@9.1.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.1.0", "entities": "^4.5.0" } }, "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ=="],

+    "@mdx-js/mdx/source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
+
    "@modelcontextprotocol/sdk/express": ["express@5.2.1", "", { "dependencies": { "accepts": "^2.0.0", "body-parser": "^2.2.1", "content-disposition": "^1.0.0", "content-type": "^1.0.5", "cookie": "^0.7.1", "cookie-signature": "^1.2.1", "debug": "^4.4.0", "depd": "^2.0.0", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "etag": "^1.8.1", "finalhandler": "^2.1.0", "fresh": "^2.0.0", "http-errors": "^2.0.0", "merge-descriptors": "^2.0.0", "mime-types": "^3.0.0", "on-finished": "^2.4.1", "once": "^1.4.0", "parseurl": "^1.3.3", "proxy-addr": "^2.0.7", "qs": "^6.14.0", "range-parser": "^1.2.1", "router": "^2.2.0", "send": "^1.1.0", "serve-static": "^2.2.0", "statuses": "^2.0.1", "type-is": "^2.0.1", "vary": "^1.1.2" } }, "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw=="],

    "@modelcontextprotocol/sdk/jose": ["jose@6.1.3", "", {}, "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ=="],
@@ -4632,8 +4739,18 @@

    "@tanstack/server-functions-plugin/@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="],

+    "@testing-library/dom/aria-query": ["aria-query@5.3.0", "", { "dependencies": { "dequal": "^2.0.3" } }, "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A=="],
+
+    "@testing-library/dom/dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
+
    "@types/serve-static/@types/send": ["@types/send@0.17.6", "", { "dependencies": { "@types/mime": "^1", "@types/node": "*" } }, "sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og=="],

+    "@vitest/expect/@vitest/utils": ["@vitest/utils@3.2.4", "", { "dependencies": { "@vitest/pretty-format": "3.2.4", "loupe": "^3.1.4", "tinyrainbow": "^2.0.0" } }, "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA=="],
+
+    "@vitest/expect/tinyrainbow": ["tinyrainbow@2.0.0", "", {}, "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw=="],
+
+    "@vitest/mocker/@vitest/spy": ["@vitest/spy@4.0.18", "", {}, "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw=="],
+
    "@vscode/emmet-helper/jsonc-parser": ["jsonc-parser@2.3.1", "", {}, "sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg=="],

    "accepts/mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
@@ -4692,8 +4809,6 @@

    "c12/chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],

-    "clean-css/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
-
    "compress-commons/is-stream": ["is-stream@2.0.1", "", {}, "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="],

    "condense-newlines/kind-of": ["kind-of@3.2.2", "", { "dependencies": { "is-buffer": "^1.1.5" } }, "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ=="],
@@ -4714,6 +4829,8 @@

    "esbuild-plugin-copy/chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],

+    "estree-util-to-js/source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
+
    "execa/is-stream": ["is-stream@3.0.0", "", {}, "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA=="],

    "express/cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
@@ -4814,6 +4931,10 @@

    "postcss-load-config/lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],

+    "pretty-format/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
+
    "prompts/kleur": ["kleur@3.0.3", "", {}, "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="],

    "raw-body/iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="],
@@ -4842,12 +4963,16 @@

    "sitemap/sax": ["sax@1.4.4", "", {}, "sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw=="],

-    "source-map-support/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
-
    "sst/aws4fetch": ["aws4fetch@1.0.18", "", {}, "sha512-3Cf+YaUl07p24MoQ46rFwulAmiyCwH2+1zw1ZyPAX5OtJ34Hh185DwB8y/qRLb6cYYYtSFJ9pthyLc0MD4e8sQ=="],

    "sst/jose": ["jose@5.2.3", "", {}, "sha512-KUXdbctm1uHVL8BYhnyHkgp3zDX5KW8ZhAKVFEfUbU2P8Alpzjb+48hHvjOdQIyPshoblhzsuqOwEEAbtHVirA=="],

+    "storybook/esbuild": ["esbuild@0.27.3", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.3", "@esbuild/android-arm": "0.27.3", "@esbuild/android-arm64": "0.27.3", "@esbuild/android-x64": "0.27.3", "@esbuild/darwin-arm64": "0.27.3", "@esbuild/darwin-x64": "0.27.3", "@esbuild/freebsd-arm64": "0.27.3", "@esbuild/freebsd-x64": "0.27.3", "@esbuild/linux-arm": "0.27.3", "@esbuild/linux-arm64": "0.27.3", "@esbuild/linux-ia32": "0.27.3", "@esbuild/linux-loong64": "0.27.3", "@esbuild/linux-mips64el": "0.27.3", "@esbuild/linux-ppc64": "0.27.3", "@esbuild/linux-riscv64": "0.27.3", "@esbuild/linux-s390x": "0.27.3", "@esbuild/linux-x64": "0.27.3", "@esbuild/netbsd-arm64": "0.27.3", "@esbuild/netbsd-x64": "0.27.3", "@esbuild/openbsd-arm64": "0.27.3", "@esbuild/openbsd-x64": "0.27.3", "@esbuild/openharmony-arm64": "0.27.3", "@esbuild/sunos-x64": "0.27.3", "@esbuild/win32-arm64": "0.27.3", "@esbuild/win32-ia32": "0.27.3", "@esbuild/win32-x64": "0.27.3" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg=="],
+
+    "storybook/open": ["open@10.2.0", "", { "dependencies": { "default-browser": "^5.2.1", "define-lazy-prop": "^3.0.0", "is-inside-container": "^1.0.0", "wsl-utils": "^0.1.0" } }, "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA=="],
+
+    "storybook/ws": ["ws@8.19.0", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg=="],
+
    "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],

    "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
@@ -4880,6 +5005,10 @@

    "vite-plugin-icons-spritesheet/glob": ["glob@11.1.0", "", { "dependencies": { "foreground-child": "^3.3.1", "jackspeak": "^4.1.1", "minimatch": "^10.1.1", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^2.0.0" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw=="],

+    "vitest/@vitest/expect": ["@vitest/expect@4.0.18", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@types/chai": "^5.2.2", "@vitest/spy": "4.0.18", "@vitest/utils": "4.0.18", "chai": "^6.2.1", "tinyrainbow": "^3.0.3" } }, "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ=="],
+
+    "vitest/@vitest/spy": ["@vitest/spy@4.0.18", "", {}, "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw=="],
+
    "vitest/tinyexec": ["tinyexec@1.0.2", "", {}, "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg=="],

    "vitest/vite": ["vite@7.1.10", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-CmuvUBzVJ/e3HGxhg6cYk88NGgTnBoOo7ogtfJJ0fefUWAxN/WDSUa50o+oVBxuIhO8FoEZW0j2eW7sfjs5EtA=="],
@@ -5210,6 +5339,8 @@

    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime/@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],

+    "@vitest/expect/@vitest/utils/@vitest/pretty-format": ["@vitest/pretty-format@3.2.4", "", { "dependencies": { "tinyrainbow": "^2.0.0" } }, "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA=="],
+
    "accepts/mime-types/mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],

    "ai-gateway-provider/@ai-sdk/amazon-bedrock/@ai-sdk/anthropic": ["@ai-sdk/anthropic@2.0.62", "", { "dependencies": { "@ai-sdk/provider": "2.0.1", "@ai-sdk/provider-utils": "3.0.21" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-I3RhaOEMnWlWnrvjNBOYvUb19Dwf2nw01IruZrVJRDi688886e11wnd5DxrBZLd2V29Gizo3vpOPnnExsA+wTA=="],
@@ -5304,6 +5435,60 @@

    "send/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],

+    "storybook/esbuild/@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.3", "", { "os": "aix", "cpu": "ppc64" }, "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg=="],
+
+    "storybook/esbuild/@esbuild/android-arm": ["@esbuild/android-arm@0.27.3", "", { "os": "android", "cpu": "arm" }, "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA=="],
+
+    "storybook/esbuild/@esbuild/android-arm64": ["@esbuild/android-arm64@0.27.3", "", { "os": "android", "cpu": "arm64" }, "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg=="],
+
+    "storybook/esbuild/@esbuild/android-x64": ["@esbuild/android-x64@0.27.3", "", { "os": "android", "cpu": "x64" }, "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ=="],
+
+    "storybook/esbuild/@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.27.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg=="],
+
+    "storybook/esbuild/@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.27.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg=="],
+
+    "storybook/esbuild/@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.27.3", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w=="],
+
+    "storybook/esbuild/@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.27.3", "", { "os": "freebsd", "cpu": "x64" }, "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA=="],
+
+    "storybook/esbuild/@esbuild/linux-arm": ["@esbuild/linux-arm@0.27.3", "", { "os": "linux", "cpu": "arm" }, "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw=="],
+
+    "storybook/esbuild/@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.27.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg=="],
+
+    "storybook/esbuild/@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.27.3", "", { "os": "linux", "cpu": "ia32" }, "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg=="],
+
+    "storybook/esbuild/@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.27.3", "", { "os": "linux", "cpu": "none" }, "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA=="],
+
+    "storybook/esbuild/@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.27.3", "", { "os": "linux", "cpu": "none" }, "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw=="],
+
+    "storybook/esbuild/@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.27.3", "", { "os": "linux", "cpu": "ppc64" }, "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA=="],
+
+    "storybook/esbuild/@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.27.3", "", { "os": "linux", "cpu": "none" }, "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ=="],
+
+    "storybook/esbuild/@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.27.3", "", { "os": "linux", "cpu": "s390x" }, "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw=="],
+
+    "storybook/esbuild/@esbuild/linux-x64": ["@esbuild/linux-x64@0.27.3", "", { "os": "linux", "cpu": "x64" }, "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA=="],
+
+    "storybook/esbuild/@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.27.3", "", { "os": "none", "cpu": "arm64" }, "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA=="],
+
+    "storybook/esbuild/@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.27.3", "", { "os": "none", "cpu": "x64" }, "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA=="],
+
+    "storybook/esbuild/@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.27.3", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw=="],
+
+    "storybook/esbuild/@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.27.3", "", { "os": "openbsd", "cpu": "x64" }, "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ=="],
+
+    "storybook/esbuild/@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.27.3", "", { "os": "none", "cpu": "arm64" }, "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g=="],
+
+    "storybook/esbuild/@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.27.3", "", { "os": "sunos", "cpu": "x64" }, "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA=="],
+
+    "storybook/esbuild/@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.27.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA=="],
+
+    "storybook/esbuild/@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.27.3", "", { "os": "win32", "cpu": "ia32" }, "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q=="],
+
+    "storybook/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.3", "", { "os": "win32", "cpu": "x64" }, "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA=="],
+
+    "storybook/open/wsl-utils": ["wsl-utils@0.1.0", "", { "dependencies": { "is-wsl": "^3.1.0" } }, "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw=="],
+
    "string-width-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],

    "tsx/esbuild/@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.3", "", { "os": "aix", "cpu": "ppc64" }, "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg=="],
@@ -5372,6 +5557,8 @@

    "vite-plugin-icons-spritesheet/glob/minimatch": ["minimatch@10.2.1", "", { "dependencies": { "brace-expansion": "^5.0.2" } }, "sha512-MClCe8IL5nRRmawL6ib/eT4oLyeKMGCghibcDWK+J0hh0Q8kqSdia6BvbRMVk6mPa6WqUa5uR2oxt6C5jd533A=="],

+    "vitest/@vitest/expect/chai": ["chai@6.2.2", "", {}, "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg=="],
+
    "wrangler/esbuild/@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.4", "", { "os": "aix", "cpu": "ppc64" }, "sha512-1VCICWypeQKhVbE9oW/sJaAmjLxhVqacdkvPLEjwlttjfwENRSClS8EjBz0KzRyFSCPDIkuXW34Je/vk7zdB7Q=="],

    "wrangler/esbuild/@esbuild/android-arm": ["@esbuild/android-arm@0.25.4", "", { "os": "android", "cpu": "arm" }, "sha512-QNdQEps7DfFwE3hXiU4BZeOV68HHzYwGd0Nthhd3uCkkEKK7/R6MTgM0P7H7FAs5pU/DIWsviMmEGxEoxIZ+ZQ=="],
--- a/nix/hashes.json
+++ b/nix/hashes.json
@@ -1,8 +1,8 @@
 {
  "nodeModules": {
-    "x86_64-linux": "sha256-3hfy6nfEnGq4J6inH0pXANw05oas+81iuayn7J0pj9c=",
-    "aarch64-linux": "sha256-dxWaLtzSeI5NfHwB6u0K10yxoA0ESz/r+zTEQ3FdKFY=",
-    "aarch64-darwin": "sha256-kkK4rj4g0j2jJFXVmVH7CJcXlI8Dj/KmL/VC3iE4Z+8=",
-    "x86_64-darwin": "sha256-jt51irxZd48kb0BItd8InP7lfsELUh0unVYO2es+a98="
+    "x86_64-linux": "sha256-dZoLhWe4smBsOF7WczMySLXSAB1YRO1vfhiOCL1rBf0=",
+    "aarch64-linux": "sha256-J7nIz1xuVZEHun5WRZkYRySz29B0A8g5g0RRxnIWTYU=",
+    "aarch64-darwin": "sha256-R2PuhX+EjUBuLE8MF0G0fcUwNaU+5n6V6uVeK89ulzw=",
+    "x86_64-darwin": "sha256-Bvzfz9TsTpYriZNLSLgpNcNb+BgtkgpjoWqdOtF2IBg="
  }
 }
--- a/packages/app/e2e/files/file-tree.spec.ts
+++ b/packages/app/e2e/files/file-tree.spec.ts
@@ -43,7 +43,7 @@ test("file tree can expand folders and open a file", async ({ page, gotoSession
  await tab.click()
  await expect(tab).toHaveAttribute("aria-selected", "true")

-  const code = page.locator('[data-component="code"]').first()
-  await expect(code).toBeVisible()
-  await expect(code).toContainText("export default function FileTree")
+  const viewer = page.locator('[data-component="file"][data-mode="text"]').first()
+  await expect(viewer).toBeVisible()
+  await expect(viewer).toContainText("export default function FileTree")
 })
--- a/packages/app/e2e/files/file-viewer.spec.ts
+++ b/packages/app/e2e/files/file-viewer.spec.ts
@@ -1,5 +1,6 @@
 import { test, expect } from "../fixtures"
 import { promptSelector } from "../selectors"
+import { modKey } from "../utils"

 test("smoke file viewer renders real file content", async ({ page, gotoSession }) => {
  await gotoSession()
@@ -43,7 +44,60 @@ test("smoke file viewer renders real file content", async ({ page, gotoSession }
  await expect(tab).toBeVisible()
  await tab.click()

-  const code = page.locator('[data-component="code"]').first()
-  await expect(code).toBeVisible()
-  await expect(code.getByText(/"name"\s*:\s*"@opencode-ai\/app"/)).toBeVisible()
+  const viewer = page.locator('[data-component="file"][data-mode="text"]').first()
+  await expect(viewer).toBeVisible()
+  await expect(viewer.getByText(/"name"\s*:\s*"@opencode-ai\/app"/)).toBeVisible()
+})
+
+test("cmd+f opens text viewer search while prompt is focused", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  await page.locator(promptSelector).click()
+  await page.keyboard.type("/open")
+
+  const command = page.locator('[data-slash-id="file.open"]').first()
+  await expect(command).toBeVisible()
+  await page.keyboard.press("Enter")
+
+  const dialog = page
+    .getByRole("dialog")
+    .filter({ has: page.getByPlaceholder(/search files/i) })
+    .first()
+  await expect(dialog).toBeVisible()
+
+  const input = dialog.getByRole("textbox").first()
+  await input.fill("package.json")
+
+  const items = dialog.locator('[data-slot="list-item"][data-key^="file:"]')
+  let index = -1
+  await expect
+    .poll(
+      async () => {
+        const keys = await items.evaluateAll((nodes) => nodes.map((node) => node.getAttribute("data-key") ?? ""))
+        index = keys.findIndex((key) => /packages[\\/]+app[\\/]+package\.json$/i.test(key.replace(/^file:/, "")))
+        return index >= 0
+      },
+      { timeout: 30_000 },
+    )
+    .toBe(true)
+
+  const item = items.nth(index)
+  await expect(item).toBeVisible()
+  await item.click()
+
+  await expect(dialog).toHaveCount(0)
+
+  const tab = page.getByRole("tab", { name: "package.json" })
+  await expect(tab).toBeVisible()
+  await tab.click()
+
+  const viewer = page.locator('[data-component="file"][data-mode="text"]').first()
+  await expect(viewer).toBeVisible()
+
+  await page.locator(promptSelector).click()
+  await page.keyboard.press(`${modKey}+f`)
+
+  const findInput = page.getByPlaceholder("Find")
+  await expect(findInput).toBeVisible()
+  await expect(findInput).toBeFocused()
 })
--- a/packages/app/src/app.tsx
+++ b/packages/app/src/app.tsx
@@ -1,11 +1,9 @@
 import "@/index.css"
-import { Code } from "@opencode-ai/ui/code"
+import { File } from "@opencode-ai/ui/file"
 import { I18nProvider } from "@opencode-ai/ui/context"
-import { CodeComponentProvider } from "@opencode-ai/ui/context/code"
 import { DialogProvider } from "@opencode-ai/ui/context/dialog"
-import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
+import { FileComponentProvider } from "@opencode-ai/ui/context/file"
 import { MarkedProvider } from "@opencode-ai/ui/context/marked"
-import { Diff } from "@opencode-ai/ui/diff"
 import { Font } from "@opencode-ai/ui/font"
 import { ThemeProvider } from "@opencode-ai/ui/theme"
 import { MetaProvider } from "@solidjs/meta"
@@ -122,9 +120,7 @@ export function AppBaseProviders(props: ParentProps) {
            <ErrorBoundary fallback={(error) => <ErrorPage error={error} />}>
              <DialogProvider>
                <MarkedProviderWithNativeParser>
-                  <DiffComponentProvider component={Diff}>
-                    <CodeComponentProvider component={Code}>{props.children}</CodeComponentProvider>
-                  </DiffComponentProvider>
+                  <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
                </MarkedProviderWithNativeParser>
              </DialogProvider>
            </ErrorBoundary>
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -3,7 +3,7 @@ import { createEffect, on, Component, Show, onCleanup, Switch, Match, createMemo
 import { createStore } from "solid-js/store"
 import { createFocusSignal } from "@solid-primitives/active-element"
 import { useLocal } from "@/context/local"
-import { useFile } from "@/context/file"
+import { selectionFromLines, type SelectedLineRange, useFile } from "@/context/file"
 import {
  ContentPart,
  DEFAULT_PROMPT,
@@ -43,6 +43,9 @@ import {
  canNavigateHistoryAtCursor,
  navigatePromptHistory,
  prependHistoryEntry,
+  type PromptHistoryComment,
+  type PromptHistoryEntry,
+  type PromptHistoryStoredEntry,
  promptLength,
 } from "./prompt-input/history"
 import { createPromptSubmit } from "./prompt-input/submit"
@@ -170,12 +173,29 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    const focus = { file: item.path, id: item.commentID }
    comments.setActive(focus)

+    const queueCommentFocus = (attempts = 6) => {
+      const schedule = (left: number) => {
+        requestAnimationFrame(() => {
+          comments.setFocus({ ...focus })
+          if (left <= 0) return
+          requestAnimationFrame(() => {
+            const current = comments.focus()
+            if (!current) return
+            if (current.file !== focus.file || current.id !== focus.id) return
+            schedule(left - 1)
+          })
+        })
+      }
+
+      schedule(attempts)
+    }
+
    const wantsReview = item.commentOrigin === "review" || (item.commentOrigin !== "file" && commentInReview(item.path))
    if (wantsReview) {
      if (!view().reviewPanel.opened()) view().reviewPanel.open()
      layout.fileTree.setTab("changes")
      tabs().setActive("review")
-      requestAnimationFrame(() => comments.setFocus(focus))
+      queueCommentFocus()
      return
    }

@@ -183,8 +203,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    layout.fileTree.setTab("all")
    const tab = files.tab(item.path)
    tabs().open(tab)
-    files.load(item.path)
-    requestAnimationFrame(() => comments.setFocus(focus))
+    tabs().setActive(tab)
+    Promise.resolve(files.load(item.path)).finally(() => queueCommentFocus())
  }

  const recent = createMemo(() => {
@@ -219,7 +239,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  const [store, setStore] = createStore<{
    popover: "at" | "slash" | null
    historyIndex: number
-    savedPrompt: Prompt | null
+    savedPrompt: PromptHistoryEntry | null
    placeholder: number
    draggingType: "image" | "@mention" | null
    mode: "normal" | "shell"
@@ -227,7 +247,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  }>({
    popover: null,
    historyIndex: -1,
-    savedPrompt: null,
+    savedPrompt: null as PromptHistoryEntry | null,
    placeholder: Math.floor(Math.random() * EXAMPLES.length),
    draggingType: null,
    mode: "normal",
@@ -256,7 +276,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  const [history, setHistory] = persisted(
    Persist.global("prompt-history", ["prompt-history.v1"]),
    createStore<{
-      entries: Prompt[]
+      entries: PromptHistoryStoredEntry[]
    }>({
      entries: [],
    }),
@@ -264,7 +284,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  const [shellHistory, setShellHistory] = persisted(
    Persist.global("prompt-history-shell", ["prompt-history-shell.v1"]),
    createStore<{
-      entries: Prompt[]
+      entries: PromptHistoryStoredEntry[]
    }>({
      entries: [],
    }),
@@ -282,9 +302,66 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    }),
  )

-  const applyHistoryPrompt = (p: Prompt, position: "start" | "end") => {
+  const historyComments = () => {
+    const byID = new Map(comments.all().map((item) => [`${item.file}\n${item.id}`, item] as const))
+    return prompt.context.items().flatMap((item) => {
+      if (item.type !== "file") return []
+      const comment = item.comment?.trim()
+      if (!comment) return []
+
+      const selection = item.commentID ? byID.get(`${item.path}\n${item.commentID}`)?.selection : undefined
+      const nextSelection =
+        selection ??
+        (item.selection
+          ? ({
+              start: item.selection.startLine,
+              end: item.selection.endLine,
+            } satisfies SelectedLineRange)
+          : undefined)
+      if (!nextSelection) return []
+
+      return [
+        {
+          id: item.commentID ?? item.key,
+          path: item.path,
+          selection: { ...nextSelection },
+          comment,
+          time: item.commentID ? (byID.get(`${item.path}\n${item.commentID}`)?.time ?? Date.now()) : Date.now(),
+          origin: item.commentOrigin,
+          preview: item.preview,
+        } satisfies PromptHistoryComment,
+      ]
+    })
+  }
+
+  const applyHistoryComments = (items: PromptHistoryComment[]) => {
+    comments.replace(
+      items.map((item) => ({
+        id: item.id,
+        file: item.path,
+        selection: { ...item.selection },
+        comment: item.comment,
+        time: item.time,
+      })),
+    )
+    prompt.context.replaceComments(
+      items.map((item) => ({
+        type: "file" as const,
+        path: item.path,
+        selection: selectionFromLines(item.selection),
+        comment: item.comment,
+        commentID: item.id,
+        commentOrigin: item.origin,
+        preview: item.preview,
+      })),
+    )
+  }
+
+  const applyHistoryPrompt = (entry: PromptHistoryEntry, position: "start" | "end") => {
+    const p = entry.prompt
    const length = position === "start" ? 0 : promptLength(p)
    setStore("applyingHistory", true)
+    applyHistoryComments(entry.comments)
    prompt.set(p, length)
    requestAnimationFrame(() => {
      editorRef.focus()
@@ -846,7 +923,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  const addToHistory = (prompt: Prompt, mode: "normal" | "shell") => {
    const currentHistory = mode === "shell" ? shellHistory : history
    const setCurrentHistory = mode === "shell" ? setShellHistory : setHistory
-    const next = prependHistoryEntry(currentHistory.entries, prompt)
+    const next = prependHistoryEntry(currentHistory.entries, prompt, mode === "shell" ? [] : historyComments())
    if (next === currentHistory.entries) return
    setCurrentHistory("entries", next)
  }
@@ -857,12 +934,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
      entries: store.mode === "shell" ? shellHistory.entries : history.entries,
      historyIndex: store.historyIndex,
      currentPrompt: prompt.current(),
+      currentComments: historyComments(),
      savedPrompt: store.savedPrompt,
    })
    if (!result.handled) return false
    setStore("historyIndex", result.historyIndex)
    setStore("savedPrompt", result.savedPrompt)
-    applyHistoryPrompt(result.prompt, result.cursor)
+    applyHistoryPrompt(result.entry, result.cursor)
    return true
  }

@@ -1048,6 +1126,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  }

  const variants = createMemo(() => ["default", ...local.model.variant.list()])
+  const accepting = createMemo(() => {
+    const id = params.id
+    if (!id) return false
+    return permission.isAutoAccepting(id, sdk.directory)
+  })

  return (
    <div class="relative size-full _max-h-[320px] flex flex-col gap-0">
@@ -1233,7 +1316,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                <TooltipKeybind
                  placement="top"
                  gutter={8}
-                  title={language.t("command.permissions.autoaccept.enable")}
+                  title={language.t(
+                    accepting() ? "command.permissions.autoaccept.disable" : "command.permissions.autoaccept.enable",
+                  )}
                  keybind={command.keybind("permissions.autoaccept")}
                >
                  <Button
@@ -1242,20 +1327,20 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                    onClick={() => permission.toggleAutoAccept(params.id!, sdk.directory)}
                    classList={{
                      "_hidden group-hover/prompt-input:flex size-6 items-center justify-center": true,
-                      "text-text-base": !permission.isAutoAccepting(params.id!, sdk.directory),
-                      "hover:bg-surface-success-base": permission.isAutoAccepting(params.id!, sdk.directory),
+                      "text-text-base": !accepting(),
+                      "hover:bg-surface-success-base": accepting(),
                    }}
                    aria-label={
-                      permission.isAutoAccepting(params.id!, sdk.directory)
+                      accepting()
                        ? language.t("command.permissions.autoaccept.disable")
                        : language.t("command.permissions.autoaccept.enable")
                    }
-                    aria-pressed={permission.isAutoAccepting(params.id!, sdk.directory)}
+                    aria-pressed={accepting()}
                  >
                    <Icon
                      name="chevron-double-right"
                      size="small"
-                      classList={{ "text-icon-success-base": permission.isAutoAccepting(params.id!, sdk.directory) }}
+                      classList={{ "text-icon-success-base": accepting() }}
                    />
                  </Button>
                </TooltipKeybind>
--- a/packages/app/src/components/prompt-input/build-request-parts.test.ts
+++ b/packages/app/src/components/prompt-input/build-request-parts.test.ts
@@ -35,6 +35,15 @@ describe("buildRequestParts", () => {
      result.requestParts.some((part) => part.type === "file" && part.url.startsWith("file:///repo/src/foo.ts")),
    ).toBe(true)
    expect(result.requestParts.some((part) => part.type === "text" && part.synthetic)).toBe(true)
+    expect(
+      result.requestParts.some(
+        (part) =>
+          part.type === "text" &&
+          part.synthetic &&
+          part.metadata?.opencodeComment &&
+          (part.metadata.opencodeComment as { comment?: string }).comment === "check this",
+      ),
+    ).toBe(true)

    expect(result.optimisticParts).toHaveLength(result.requestParts.length)
    expect(result.optimisticParts.every((part) => part.sessionID === "ses_1" && part.messageID === "msg_1")).toBe(true)
--- a/packages/app/src/components/prompt-input/build-request-parts.ts
+++ b/packages/app/src/components/prompt-input/build-request-parts.ts
@@ -4,6 +4,7 @@ import type { FileSelection } from "@/context/file"
 import { encodeFilePath } from "@/context/file/path"
 import type { AgentPart, FileAttachmentPart, ImageAttachmentPart, Prompt } from "@/context/prompt"
 import { Identifier } from "@/utils/id"
+import { createCommentMetadata, formatCommentNote } from "@/utils/comment-note"

 type PromptRequestPart = (TextPartInput | FilePartInput | AgentPartInput) & { id: string }

@@ -41,18 +42,6 @@ const fileQuery = (selection: FileSelection | undefined) =>
 const isFileAttachment = (part: Prompt[number]): part is FileAttachmentPart => part.type === "file"
 const isAgentAttachment = (part: Prompt[number]): part is AgentPart => part.type === "agent"

-const commentNote = (path: string, selection: FileSelection | undefined, comment: string) => {
-  const start = selection ? Math.min(selection.startLine, selection.endLine) : undefined
-  const end = selection ? Math.max(selection.startLine, selection.endLine) : undefined
-  const range =
-    start === undefined || end === undefined
-      ? "this file"
-      : start === end
-        ? `line ${start}`
-        : `lines ${start} through ${end}`
-  return `The user made the following comment regarding ${range} of ${path}: ${comment}`
-}
-
 const toOptimisticPart = (part: PromptRequestPart, sessionID: string, messageID: string): Part => {
  if (part.type === "text") {
    return {
@@ -153,8 +142,15 @@ export function buildRequestParts(input: BuildRequestPartsInput) {
      {
        id: Identifier.ascending("part"),
        type: "text",
-        text: commentNote(item.path, item.selection, comment),
+        text: formatCommentNote({ path: item.path, selection: item.selection, comment }),
        synthetic: true,
+        metadata: createCommentMetadata({
+          path: item.path,
+          selection: item.selection,
+          comment,
+          preview: item.preview,
+          origin: item.commentOrigin,
+        }),
      } satisfies PromptRequestPart,
      filePart,
    ]
--- a/packages/app/src/components/prompt-input/history.test.ts
+++ b/packages/app/src/components/prompt-input/history.test.ts
@@ -3,25 +3,42 @@ import type { Prompt } from "@/context/prompt"
 import {
  canNavigateHistoryAtCursor,
  clonePromptParts,
+  normalizePromptHistoryEntry,
  navigatePromptHistory,
  prependHistoryEntry,
  promptLength,
+  type PromptHistoryComment,
 } from "./history"

 const DEFAULT_PROMPT: Prompt = [{ type: "text", content: "", start: 0, end: 0 }]

 const text = (value: string): Prompt => [{ type: "text", content: value, start: 0, end: value.length }]
+const comment = (id: string, value = "note"): PromptHistoryComment => ({
+  id,
+  path: "src/a.ts",
+  selection: { start: 2, end: 4 },
+  comment: value,
+  time: 1,
+  origin: "review",
+  preview: "const a = 1",
+})

 describe("prompt-input history", () => {
  test("prependHistoryEntry skips empty prompt and deduplicates consecutive entries", () => {
    const first = prependHistoryEntry([], DEFAULT_PROMPT)
    expect(first).toEqual([])

+    const commentsOnly = prependHistoryEntry([], DEFAULT_PROMPT, [comment("c1")])
+    expect(commentsOnly).toHaveLength(1)
+
    const withOne = prependHistoryEntry([], text("hello"))
    expect(withOne).toHaveLength(1)

    const deduped = prependHistoryEntry(withOne, text("hello"))
    expect(deduped).toBe(withOne)
+
+    const dedupedComments = prependHistoryEntry(commentsOnly, DEFAULT_PROMPT, [comment("c1")])
+    expect(dedupedComments).toBe(commentsOnly)
  })

  test("navigatePromptHistory restores saved prompt when moving down from newest", () => {
@@ -31,24 +48,57 @@ describe("prompt-input history", () => {
      entries,
      historyIndex: -1,
      currentPrompt: text("draft"),
+      currentComments: [comment("draft")],
      savedPrompt: null,
    })
    expect(up.handled).toBe(true)
    if (!up.handled) throw new Error("expected handled")
    expect(up.historyIndex).toBe(0)
    expect(up.cursor).toBe("start")
+    expect(up.entry.comments).toEqual([])

    const down = navigatePromptHistory({
      direction: "down",
      entries,
      historyIndex: up.historyIndex,
      currentPrompt: text("ignored"),
+      currentComments: [],
      savedPrompt: up.savedPrompt,
    })
    expect(down.handled).toBe(true)
    if (!down.handled) throw new Error("expected handled")
    expect(down.historyIndex).toBe(-1)
-    expect(down.prompt[0]?.type === "text" ? down.prompt[0].content : "").toBe("draft")
+    expect(down.entry.prompt[0]?.type === "text" ? down.entry.prompt[0].content : "").toBe("draft")
+    expect(down.entry.comments).toEqual([comment("draft")])
+  })
+
+  test("navigatePromptHistory keeps entry comments when moving through history", () => {
+    const entries = [
+      {
+        prompt: text("with comment"),
+        comments: [comment("c1")],
+      },
+    ]
+
+    const up = navigatePromptHistory({
+      direction: "up",
+      entries,
+      historyIndex: -1,
+      currentPrompt: text("draft"),
+      currentComments: [],
+      savedPrompt: null,
+    })
+
+    expect(up.handled).toBe(true)
+    if (!up.handled) throw new Error("expected handled")
+    expect(up.entry.prompt[0]?.type === "text" ? up.entry.prompt[0].content : "").toBe("with comment")
+    expect(up.entry.comments).toEqual([comment("c1")])
+  })
+
+  test("normalizePromptHistoryEntry supports legacy prompt arrays", () => {
+    const entry = normalizePromptHistoryEntry(text("legacy"))
+    expect(entry.prompt[0]?.type === "text" ? entry.prompt[0].content : "").toBe("legacy")
+    expect(entry.comments).toEqual([])
  })

  test("helpers clone prompt and count text content length", () => {
--- a/packages/app/src/components/prompt-input/history.ts
+++ b/packages/app/src/components/prompt-input/history.ts
@@ -1,9 +1,27 @@
 import type { Prompt } from "@/context/prompt"
+import type { SelectedLineRange } from "@/context/file"

 const DEFAULT_PROMPT: Prompt = [{ type: "text", content: "", start: 0, end: 0 }]

 export const MAX_HISTORY = 100

+export type PromptHistoryComment = {
+  id: string
+  path: string
+  selection: SelectedLineRange
+  comment: string
+  time: number
+  origin?: "review" | "file"
+  preview?: string
+}
+
+export type PromptHistoryEntry = {
+  prompt: Prompt
+  comments: PromptHistoryComment[]
+}
+
+export type PromptHistoryStoredEntry = Prompt | PromptHistoryEntry
+
 export function canNavigateHistoryAtCursor(direction: "up" | "down", text: string, cursor: number, inHistory = false) {
  const position = Math.max(0, Math.min(cursor, text.length))
  const atStart = position === 0
@@ -25,29 +43,82 @@ export function clonePromptParts(prompt: Prompt): Prompt {
  })
 }

+function cloneSelection(selection: SelectedLineRange): SelectedLineRange {
+  return {
+    start: selection.start,
+    end: selection.end,
+    ...(selection.side ? { side: selection.side } : {}),
+    ...(selection.endSide ? { endSide: selection.endSide } : {}),
+  }
+}
+
+export function clonePromptHistoryComments(comments: PromptHistoryComment[]) {
+  return comments.map((comment) => ({
+    ...comment,
+    selection: cloneSelection(comment.selection),
+  }))
+}
+
+export function normalizePromptHistoryEntry(entry: PromptHistoryStoredEntry): PromptHistoryEntry {
+  if (Array.isArray(entry)) {
+    return {
+      prompt: clonePromptParts(entry),
+      comments: [],
+    }
+  }
+  return {
+    prompt: clonePromptParts(entry.prompt),
+    comments: clonePromptHistoryComments(entry.comments),
+  }
+}
+
 export function promptLength(prompt: Prompt) {
  return prompt.reduce((len, part) => len + ("content" in part ? part.content.length : 0), 0)
 }

-export function prependHistoryEntry(entries: Prompt[], prompt: Prompt, max = MAX_HISTORY) {
+export function prependHistoryEntry(
+  entries: PromptHistoryStoredEntry[],
+  prompt: Prompt,
+  comments: PromptHistoryComment[] = [],
+  max = MAX_HISTORY,
+) {
  const text = prompt
    .map((part) => ("content" in part ? part.content : ""))
    .join("")
    .trim()
  const hasImages = prompt.some((part) => part.type === "image")
-  if (!text && !hasImages) return entries
+  const hasComments = comments.some((comment) => !!comment.comment.trim())
+  if (!text && !hasImages && !hasComments) return entries

-  const entry = clonePromptParts(prompt)
+  const entry = {
+    prompt: clonePromptParts(prompt),
+    comments: clonePromptHistoryComments(comments),
+  } satisfies PromptHistoryEntry
  const last = entries[0]
  if (last && isPromptEqual(last, entry)) return entries
  return [entry, ...entries].slice(0, max)
 }

-function isPromptEqual(promptA: Prompt, promptB: Prompt) {
-  if (promptA.length !== promptB.length) return false
-  for (let i = 0; i < promptA.length; i++) {
-    const partA = promptA[i]
-    const partB = promptB[i]
+function isCommentEqual(commentA: PromptHistoryComment, commentB: PromptHistoryComment) {
+  return (
+    commentA.path === commentB.path &&
+    commentA.comment === commentB.comment &&
+    commentA.origin === commentB.origin &&
+    commentA.preview === commentB.preview &&
+    commentA.selection.start === commentB.selection.start &&
+    commentA.selection.end === commentB.selection.end &&
+    commentA.selection.side === commentB.selection.side &&
+    commentA.selection.endSide === commentB.selection.endSide
+  )
+}
+
+function isPromptEqual(promptA: PromptHistoryStoredEntry, promptB: PromptHistoryStoredEntry) {
+  const entryA = normalizePromptHistoryEntry(promptA)
+  const entryB = normalizePromptHistoryEntry(promptB)
+  if (entryA.prompt.length !== entryB.prompt.length) return false
+  for (let i = 0; i < entryA.prompt.length; i++) {
+    const partA = entryA.prompt[i]
+    const partB = entryB.prompt[i]
    if (partA.type !== partB.type) return false
    if (partA.type === "text" && partA.content !== (partB.type === "text" ? partB.content : "")) return false
    if (partA.type === "file") {
@@ -67,28 +138,35 @@ function isPromptEqual(promptA: Prompt, promptB: Prompt) {
    if (partA.type === "agent" && partA.name !== (partB.type === "agent" ? partB.name : "")) return false
    if (partA.type === "image" && partA.id !== (partB.type === "image" ? partB.id : "")) return false
  }
+  if (entryA.comments.length !== entryB.comments.length) return false
+  for (let i = 0; i < entryA.comments.length; i++) {
+    const commentA = entryA.comments[i]
+    const commentB = entryB.comments[i]
+    if (!commentA || !commentB || !isCommentEqual(commentA, commentB)) return false
+  }
  return true
 }

 type HistoryNavInput = {
  direction: "up" | "down"
-  entries: Prompt[]
+  entries: PromptHistoryStoredEntry[]
  historyIndex: number
  currentPrompt: Prompt
-  savedPrompt: Prompt | null
+  currentComments: PromptHistoryComment[]
+  savedPrompt: PromptHistoryEntry | null
 }

 type HistoryNavResult =
  | {
      handled: false
      historyIndex: number
-      savedPrompt: Prompt | null
+      savedPrompt: PromptHistoryEntry | null
    }
  | {
      handled: true
      historyIndex: number
-      savedPrompt: Prompt | null
-      prompt: Prompt
+      savedPrompt: PromptHistoryEntry | null
+      entry: PromptHistoryEntry
      cursor: "start" | "end"
    }

@@ -103,22 +181,27 @@ export function navigatePromptHistory(input: HistoryNavInput): HistoryNavResult
    }

    if (input.historyIndex === -1) {
+      const entry = normalizePromptHistoryEntry(input.entries[0])
      return {
        handled: true,
        historyIndex: 0,
-        savedPrompt: clonePromptParts(input.currentPrompt),
-        prompt: input.entries[0],
+        savedPrompt: {
+          prompt: clonePromptParts(input.currentPrompt),
+          comments: clonePromptHistoryComments(input.currentComments),
+        },
+        entry,
        cursor: "start",
      }
    }

    if (input.historyIndex < input.entries.length - 1) {
      const next = input.historyIndex + 1
+      const entry = normalizePromptHistoryEntry(input.entries[next])
      return {
        handled: true,
        historyIndex: next,
        savedPrompt: input.savedPrompt,
-        prompt: input.entries[next],
+        entry,
        cursor: "start",
      }
    }
@@ -132,11 +215,12 @@ export function navigatePromptHistory(input: HistoryNavInput): HistoryNavResult

  if (input.historyIndex > 0) {
    const next = input.historyIndex - 1
+    const entry = normalizePromptHistoryEntry(input.entries[next])
    return {
      handled: true,
      historyIndex: next,
      savedPrompt: input.savedPrompt,
-      prompt: input.entries[next],
+      entry,
      cursor: "end",
    }
  }
@@ -147,7 +231,7 @@ export function navigatePromptHistory(input: HistoryNavInput): HistoryNavResult
        handled: true,
        historyIndex: -1,
        savedPrompt: null,
-        prompt: input.savedPrompt,
+        entry: input.savedPrompt,
        cursor: "end",
      }
    }
@@ -156,7 +240,10 @@ export function navigatePromptHistory(input: HistoryNavInput): HistoryNavResult
      handled: true,
      historyIndex: -1,
      savedPrompt: null,
-      prompt: DEFAULT_PROMPT,
+      entry: {
+        prompt: DEFAULT_PROMPT,
+        comments: [],
+      },
      cursor: "end",
    }
  }
--- a/packages/app/src/components/session/session-context-tab.tsx
+++ b/packages/app/src/components/session/session-context-tab.tsx
@@ -9,7 +9,7 @@ import { same } from "@/utils/same"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Accordion } from "@opencode-ai/ui/accordion"
 import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
-import { Code } from "@opencode-ai/ui/code"
+import { File } from "@opencode-ai/ui/file"
 import { Markdown } from "@opencode-ai/ui/markdown"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import type { Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
@@ -47,7 +47,8 @@ function RawMessageContent(props: { message: Message; getParts: (id: string) =>
  })

  return (
-    <Code
+    <File
+      mode="text"
      file={file()}
      overflow="wrap"
      class="select-text"
--- a/packages/app/src/components/session/session-sortable-tab.tsx
+++ b/packages/app/src/components/session/session-sortable-tab.tsx
@@ -13,13 +13,15 @@ import { useCommand } from "@/context/command"
 export function FileVisual(props: { path: string; active?: boolean }): JSX.Element {
  return (
    <div class="flex items-center gap-x-1.5 min-w-0">
-      <FileIcon
-        node={{ path: props.path, type: "file" }}
-        classList={{
-          "grayscale-100 group-data-[selected]/tab:grayscale-0": !props.active,
-          "grayscale-0": props.active,
-        }}
-      />
+      <Show
+        when={!props.active}
+        fallback={<FileIcon node={{ path: props.path, type: "file" }} class="size-4 shrink-0" />}
+      >
+        <span class="relative inline-flex size-4 shrink-0">
+          <FileIcon node={{ path: props.path, type: "file" }} class="absolute inset-0 size-4 tab-fileicon-color" />
+          <FileIcon node={{ path: props.path, type: "file" }} mono class="absolute inset-0 size-4 tab-fileicon-mono" />
+        </span>
+      </Show>
      <span class="text-14-medium truncate">{getFilename(props.path)}</span>
    </div>
  )
@@ -37,8 +39,8 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
    return <FileVisual path={value} />
  })
  return (
-    <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
-      <div class="relative h-full">
+    <div use:sortable class="h-full flex items-center" classList={{ "opacity-0": sortable.isActiveDraggable }}>
+      <div class="relative">
        <Tabs.Trigger
          value={props.tab}
          closeButton={
@@ -46,6 +48,7 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
              title={language.t("common.closeTab")}
              keybind={command.keybind("tab.close")}
              placement="bottom"
+              gutter={10}
            >
              <IconButton
                icon="close-small"
--- a/packages/app/src/context/comments.test.ts
+++ b/packages/app/src/context/comments.test.ts
@@ -150,4 +150,37 @@ describe("comments session indexing", () => {
      dispose()
    })
  })
+
+  test("update changes only the targeted comment body", () => {
+    createRoot((dispose) => {
+      const comments = createCommentSessionForTest({
+        "a.ts": [line("a.ts", "a1", 10), line("a.ts", "a2", 20)],
+      })
+
+      comments.update("a.ts", "a2", "edited")
+
+      expect(comments.list("a.ts").map((item) => item.comment)).toEqual(["a1", "edited"])
+
+      dispose()
+    })
+  })
+
+  test("replace swaps comment state and clears focus state", () => {
+    createRoot((dispose) => {
+      const comments = createCommentSessionForTest({
+        "a.ts": [line("a.ts", "a1", 10)],
+      })
+
+      comments.setFocus({ file: "a.ts", id: "a1" })
+      comments.setActive({ file: "a.ts", id: "a1" })
+      comments.replace([line("b.ts", "b1", 30)])
+
+      expect(comments.list("a.ts")).toEqual([])
+      expect(comments.list("b.ts").map((item) => item.id)).toEqual(["b1"])
+      expect(comments.focus()).toBeNull()
+      expect(comments.active()).toBeNull()
+
+      dispose()
+    })
+  })
 })
--- a/packages/app/src/context/comments.tsx
+++ b/packages/app/src/context/comments.tsx
@@ -44,6 +44,37 @@ function aggregate(comments: Record<string, LineComment[]>) {
    .sort((a, b) => a.time - b.time)
 }

+function cloneSelection(selection: SelectedLineRange): SelectedLineRange {
+  const next: SelectedLineRange = {
+    start: selection.start,
+    end: selection.end,
+  }
+
+  if (selection.side) next.side = selection.side
+  if (selection.endSide) next.endSide = selection.endSide
+  return next
+}
+
+function cloneComment(comment: LineComment): LineComment {
+  return {
+    ...comment,
+    selection: cloneSelection(comment.selection),
+  }
+}
+
+function group(comments: LineComment[]) {
+  return comments.reduce<Record<string, LineComment[]>>((acc, comment) => {
+    const list = acc[comment.file]
+    const next = cloneComment(comment)
+    if (list) {
+      list.push(next)
+      return acc
+    }
+    acc[comment.file] = [next]
+    return acc
+  }, {})
+}
+
 function createCommentSessionState(store: Store<CommentStore>, setStore: SetStoreFunction<CommentStore>) {
  const [state, setState] = createStore({
    focus: null as CommentFocus | null,
@@ -70,6 +101,7 @@ function createCommentSessionState(store: Store<CommentStore>, setStore: SetStor
      id: uuid(),
      time: Date.now(),
      ...input,
+      selection: cloneSelection(input.selection),
    }

    batch(() => {
@@ -87,6 +119,23 @@ function createCommentSessionState(store: Store<CommentStore>, setStore: SetStor
    })
  }

+  const update = (file: string, id: string, comment: string) => {
+    setStore("comments", file, (items) =>
+      (items ?? []).map((item) => {
+        if (item.id !== id) return item
+        return { ...item, comment }
+      }),
+    )
+  }
+
+  const replace = (comments: LineComment[]) => {
+    batch(() => {
+      setStore("comments", reconcile(group(comments)))
+      setFocus(null)
+      setActive(null)
+    })
+  }
+
  const clear = () => {
    batch(() => {
      setStore("comments", reconcile({}))
@@ -100,6 +149,8 @@ function createCommentSessionState(store: Store<CommentStore>, setStore: SetStor
    all,
    add,
    remove,
+    update,
+    replace,
    clear,
    focus: () => state.focus,
    setFocus,
@@ -132,6 +183,8 @@ function createCommentSession(dir: string, id: string | undefined) {
    all: session.all,
    add: session.add,
    remove: session.remove,
+    update: session.update,
+    replace: session.replace,
    clear: session.clear,
    focus: session.focus,
    setFocus: session.setFocus,
@@ -176,6 +229,8 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont
      all: () => session().all(),
      add: (input: Omit<LineComment, "id" | "time">) => session().add(input),
      remove: (file: string, id: string) => session().remove(file, id),
+      update: (file: string, id: string, comment: string) => session().update(file, id, comment),
+      replace: (comments: LineComment[]) => session().replace(comments),
      clear: () => session().clear(),
      focus: () => session().focus(),
      setFocus: (focus: CommentFocus | null) => session().setFocus(focus),
--- a/packages/app/src/context/file/view-cache.ts
+++ b/packages/app/src/context/file/view-cache.ts
@@ -9,7 +9,7 @@ const MAX_FILE_VIEW_SESSIONS = 20
 const MAX_VIEW_FILES = 500

 function normalizeSelectedLines(range: SelectedLineRange): SelectedLineRange {
-  if (range.start <= range.end) return range
+  if (range.start <= range.end) return { ...range }

  const startSide = range.side
  const endSide = range.endSide ?? startSide
--- a/packages/app/src/context/layout-scroll.test.ts
+++ b/packages/app/src/context/layout-scroll.test.ts
@@ -41,4 +41,24 @@ describe("createScrollPersistence", () => {
      vi.useRealTimers()
    }
  })
+
+  test("reseeds empty cache after persisted snapshot loads", () => {
+    const snapshot = {
+      session: {},
+    } as Record<string, Record<string, { x: number; y: number }>>
+
+    const scroll = createScrollPersistence({
+      getSnapshot: (sessionKey) => snapshot[sessionKey],
+      onFlush: () => {},
+    })
+
+    expect(scroll.scroll("session", "review")).toBeUndefined()
+
+    snapshot.session = {
+      review: { x: 12, y: 34 },
+    }
+
+    expect(scroll.scroll("session", "review")).toEqual({ x: 12, y: 34 })
+    scroll.dispose()
+  })
 })
--- a/packages/app/src/context/layout-scroll.ts
+++ b/packages/app/src/context/layout-scroll.ts
@@ -33,8 +33,16 @@ export function createScrollPersistence(opts: Options) {
  }

  function seed(sessionKey: string) {
-    if (cache[sessionKey]) return
-    setCache(sessionKey, clone(opts.getSnapshot(sessionKey)))
+    const next = clone(opts.getSnapshot(sessionKey))
+    const current = cache[sessionKey]
+    if (!current) {
+      setCache(sessionKey, next)
+      return
+    }
+
+    if (Object.keys(current).length > 0) return
+    if (Object.keys(next).length === 0) return
+    setCache(sessionKey, next)
  }

  function scroll(sessionKey: string, tab: string) {
--- a/packages/app/src/context/permission-auto-respond.test.ts
+++ b/packages/app/src/context/permission-auto-respond.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, test } from "bun:test"
+import type { PermissionRequest, Session } from "@opencode-ai/sdk/v2/client"
+import { base64Encode } from "@opencode-ai/util/encode"
+import { autoRespondsPermission } from "./permission-auto-respond"
+
+const session = (input: { id: string; parentID?: string }) =>
+  ({
+    id: input.id,
+    parentID: input.parentID,
+  }) as Session
+
+const permission = (sessionID: string) =>
+  ({
+    sessionID,
+  }) as Pick<PermissionRequest, "sessionID">
+
+describe("autoRespondsPermission", () => {
+  test("uses a parent session's directory-scoped auto-accept", () => {
+    const directory = "/tmp/project"
+    const sessions = [session({ id: "root" }), session({ id: "child", parentID: "root" })]
+    const autoAccept = {
+      [`${base64Encode(directory)}/root`]: true,
+    }
+
+    expect(autoRespondsPermission(autoAccept, sessions, permission("child"), directory)).toBe(true)
+  })
+
+  test("uses a parent session's legacy auto-accept key", () => {
+    const sessions = [session({ id: "root" }), session({ id: "child", parentID: "root" })]
+
+    expect(autoRespondsPermission({ root: true }, sessions, permission("child"), "/tmp/project")).toBe(true)
+  })
+
+  test("ignores auto-accept from unrelated sessions", () => {
+    const sessions = [session({ id: "root" }), session({ id: "child", parentID: "root" }), session({ id: "other" })]
+    const autoAccept = {
+      other: true,
+    }
+
+    expect(autoRespondsPermission(autoAccept, sessions, permission("child"), "/tmp/project")).toBe(false)
+  })
+})
--- a/packages/app/src/context/permission-auto-respond.ts
+++ b/packages/app/src/context/permission-auto-respond.ts
@@ -0,0 +1,36 @@
+import { base64Encode } from "@opencode-ai/util/encode"
+
+export function acceptKey(sessionID: string, directory?: string) {
+  if (!directory) return sessionID
+  return `${base64Encode(directory)}/${sessionID}`
+}
+
+function sessionLineage(session: { id: string; parentID?: string }[], sessionID: string) {
+  const parent = session.reduce((acc, item) => {
+    if (item.parentID) acc.set(item.id, item.parentID)
+    return acc
+  }, new Map<string, string>())
+  const seen = new Set([sessionID])
+  const ids = [sessionID]
+
+  for (const id of ids) {
+    const parentID = parent.get(id)
+    if (!parentID || seen.has(parentID)) continue
+    seen.add(parentID)
+    ids.push(parentID)
+  }
+
+  return ids
+}
+
+export function autoRespondsPermission(
+  autoAccept: Record<string, boolean>,
+  session: { id: string; parentID?: string }[],
+  permission: { sessionID: string },
+  directory?: string,
+) {
+  return sessionLineage(session, permission.sessionID).some((id) => {
+    const key = acceptKey(id, directory)
+    return autoAccept[key] ?? autoAccept[id] ?? false
+  })
+}
--- a/packages/app/src/context/permission.tsx
+++ b/packages/app/src/context/permission.tsx
@@ -6,8 +6,8 @@ import { Persist, persisted } from "@/utils/persist"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useGlobalSync } from "./global-sync"
 import { useParams } from "@solidjs/router"
-import { base64Encode } from "@opencode-ai/util/encode"
 import { decode64 } from "@/utils/base64"
+import { acceptKey, autoRespondsPermission } from "./permission-auto-respond"

 type PermissionRespondFn = (input: {
  sessionID: string
@@ -16,10 +16,6 @@ type PermissionRespondFn = (input: {
  directory?: string
 }) => void

-function shouldAutoAccept(perm: PermissionRequest) {
-  return perm.permission === "edit"
-}
-
 function isNonAllowRule(rule: unknown) {
  if (!rule) return false
  if (typeof rule === "string") return rule !== "allow"
@@ -40,10 +36,7 @@ function hasPermissionPromptRules(permission: unknown) {
  if (Array.isArray(permission)) return false

  const config = permission as Record<string, unknown>
-  if (isNonAllowRule(config.edit)) return true
-  if (isNonAllowRule(config.write)) return true
-
-  return false
+  return Object.values(config).some(isNonAllowRule)
 }

 export const { use: usePermission, provider: PermissionProvider } = createSimpleContext({
@@ -61,9 +54,25 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
    })

    const [store, setStore, _, ready] = persisted(
-      Persist.global("permission", ["permission.v3"]),
+      {
+        ...Persist.global("permission", ["permission.v3"]),
+        migrate(value) {
+          if (!value || typeof value !== "object" || Array.isArray(value)) return value
+
+          const data = value as Record<string, unknown>
+          if (data.autoAccept) return value
+
+          return {
+            ...data,
+            autoAccept:
+              typeof data.autoAcceptEdits === "object" && data.autoAcceptEdits && !Array.isArray(data.autoAcceptEdits)
+                ? data.autoAcceptEdits
+                : {},
+          }
+        },
+      },
      createStore({
-        autoAcceptEdits: {} as Record<string, boolean>,
+        autoAccept: {} as Record<string, boolean>,
      }),
    )

@@ -105,14 +114,14 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
      })
    }

-    function acceptKey(sessionID: string, directory?: string) {
-      if (!directory) return sessionID
-      return `${base64Encode(directory)}/${sessionID}`
-    }
-
    function isAutoAccepting(sessionID: string, directory?: string) {
      const key = acceptKey(sessionID, directory)
-      return store.autoAcceptEdits[key] ?? store.autoAcceptEdits[sessionID] ?? false
+      return store.autoAccept[key] ?? store.autoAccept[sessionID] ?? false
+    }
+
+    function shouldAutoRespond(permission: PermissionRequest, directory?: string) {
+      const session = directory ? globalSync.child(directory, { bootstrap: false })[0].session : []
+      return autoRespondsPermission(store.autoAccept, session, permission, directory)
    }

    function bumpEnableVersion(sessionID: string, directory?: string) {
@@ -127,8 +136,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
      if (event?.type !== "permission.asked") return

      const perm = event.properties
-      if (!isAutoAccepting(perm.sessionID, e.name)) return
-      if (!shouldAutoAccept(perm)) return
+      if (!shouldAutoRespond(perm, e.name)) return

      respondOnce(perm, e.name)
    })
@@ -139,8 +147,8 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
      const version = bumpEnableVersion(sessionID, directory)
      setStore(
        produce((draft) => {
-          draft.autoAcceptEdits[key] = true
-          delete draft.autoAcceptEdits[sessionID]
+          draft.autoAccept[key] = true
+          delete draft.autoAccept[sessionID]
        }),
      )

@@ -151,8 +159,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
          if (!isAutoAccepting(sessionID, directory)) return
          for (const perm of x.data ?? []) {
            if (!perm?.id) continue
-            if (perm.sessionID !== sessionID) continue
-            if (!shouldAutoAccept(perm)) continue
+            if (!shouldAutoRespond(perm, directory)) continue
            respondOnce(perm, directory)
          }
        })
@@ -164,8 +171,8 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
      const key = directory ? acceptKey(sessionID, directory) : undefined
      setStore(
        produce((draft) => {
-          if (key) delete draft.autoAcceptEdits[key]
-          delete draft.autoAcceptEdits[sessionID]
+          if (key) delete draft.autoAccept[key]
+          delete draft.autoAccept[sessionID]
        }),
      )
    }
@@ -174,7 +181,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
      ready,
      respond,
      autoResponds(permission: PermissionRequest, directory?: string) {
-        return isAutoAccepting(permission.sessionID, directory) && shouldAutoAccept(permission)
+        return shouldAutoRespond(permission, directory)
      },
      isAutoAccepting,
      toggleAutoAccept(sessionID: string, directory: string) {
--- a/packages/app/src/context/prompt.tsx
+++ b/packages/app/src/context/prompt.tsx
@@ -116,6 +116,10 @@ function contextItemKey(item: ContextItem) {
  return `${key}:c=${digest.slice(0, 8)}`
 }

+function isCommentItem(item: ContextItem | (ContextItem & { key: string })) {
+  return item.type === "file" && !!item.comment?.trim()
+}
+
 function createPromptActions(
  setStore: SetStoreFunction<{
    prompt: Prompt
@@ -189,6 +193,26 @@ function createPromptSession(dir: string, id: string | undefined) {
      remove(key: string) {
        setStore("context", "items", (items) => items.filter((x) => x.key !== key))
      },
+      removeComment(path: string, commentID: string) {
+        setStore("context", "items", (items) =>
+          items.filter((item) => !(item.type === "file" && item.path === path && item.commentID === commentID)),
+        )
+      },
+      updateComment(path: string, commentID: string, next: Partial<FileContextItem> & { comment?: string }) {
+        setStore("context", "items", (items) =>
+          items.map((item) => {
+            if (item.type !== "file" || item.path !== path || item.commentID !== commentID) return item
+            const value = { ...item, ...next }
+            return { ...value, key: contextItemKey(value) }
+          }),
+        )
+      },
+      replaceComments(items: FileContextItem[]) {
+        setStore("context", "items", (current) => [
+          ...current.filter((item) => !isCommentItem(item)),
+          ...items.map((item) => ({ ...item, key: contextItemKey(item) })),
+        ])
+      },
    },
    set: actions.set,
    reset: actions.reset,
@@ -251,6 +275,10 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
        items: () => session().context.items(),
        add: (item: ContextItem) => session().context.add(item),
        remove: (key: string) => session().context.remove(key),
+        removeComment: (path: string, commentID: string) => session().context.removeComment(path, commentID),
+        updateComment: (path: string, commentID: string, next: Partial<FileContextItem> & { comment?: string }) =>
+          session().context.updateComment(path, commentID, next),
+        replaceComments: (items: FileContextItem[]) => session().context.replaceComments(items),
      },
      set: (prompt: Prompt, cursorPosition?: number) => session().set(prompt, cursorPosition),
      reset: () => session().reset(),
--- a/packages/app/src/i18n/ar.ts
+++ b/packages/app/src/i18n/ar.ts
@@ -65,8 +65,8 @@ export const dict = {
  "command.model.variant.cycle.description": "التبديل إلى مستوى الجهد التالي",
  "command.prompt.mode.shell": "Shell",
  "command.prompt.mode.normal": "Prompt",
-  "command.permissions.autoaccept.enable": "قبول التعديلات تلقائيًا",
-  "command.permissions.autoaccept.disable": "إيقاف قبول التعديلات تلقائيًا",
+  "command.permissions.autoaccept.enable": "قبول الأذونات تلقائيًا",
+  "command.permissions.autoaccept.disable": "إيقاف قبول الأذونات تلقائيًا",
  "command.workspace.toggle": "تبديل مساحات العمل",
  "command.workspace.toggle.description": "تمكين أو تعطيل مساحات العمل المتعددة في الشريط الجانبي",
  "command.session.undo": "تراجع",
@@ -366,10 +366,10 @@ export const dict = {
  "toast.workspace.enabled.description": "الآن يتم عرض عدة worktrees في الشريط الجانبي",
  "toast.workspace.disabled.title": "تم تعطيل مساحات العمل",
  "toast.workspace.disabled.description": "يتم عرض worktree الرئيسي فقط في الشريط الجانبي",
-  "toast.permissions.autoaccept.on.title": "قبول التعديلات تلقائيًا",
-  "toast.permissions.autoaccept.on.description": "سيتم الموافقة تلقائيًا على أذونات التحرير والكتابة",
-  "toast.permissions.autoaccept.off.title": "توقف قبول التعديلات تلقائيًا",
-  "toast.permissions.autoaccept.off.description": "ستتطلب أذونات التحرير والكتابة موافقة",
+  "toast.permissions.autoaccept.on.title": "يتم قبول الأذونات تلقائيًا",
+  "toast.permissions.autoaccept.on.description": "ستتم الموافقة على طلبات الأذونات تلقائيًا",
+  "toast.permissions.autoaccept.off.title": "تم إيقاف قبول الأذونات تلقائيًا",
+  "toast.permissions.autoaccept.off.description": "ستتطلب طلبات الأذونات موافقة",
  "toast.model.none.title": "لم يتم تحديد نموذج",
  "toast.model.none.description": "قم بتوصيل موفر لتلخيص هذه الجلسة",
  "toast.file.loadFailed.title": "فشل تحميل الملف",
--- a/packages/app/src/i18n/br.ts
+++ b/packages/app/src/i18n/br.ts
@@ -65,8 +65,8 @@ export const dict = {
  "command.model.variant.cycle.description": "Mudar para o próximo nível de esforço",
  "command.prompt.mode.shell": "Shell",
  "command.prompt.mode.normal": "Prompt",
-  "command.permissions.autoaccept.enable": "Aceitar edições automaticamente",
-  "command.permissions.autoaccept.disable": "Parar de aceitar edições automaticamente",
+  "command.permissions.autoaccept.enable": "Aceitar permissões automaticamente",
+  "command.permissions.autoaccept.disable": "Parar de aceitar permissões automaticamente",
  "command.workspace.toggle": "Alternar espaços de trabalho",
  "command.workspace.toggle.description": "Habilitar ou desabilitar múltiplos espaços de trabalho na barra lateral",
  "command.session.undo": "Desfazer",
@@ -367,10 +367,10 @@ export const dict = {
  "toast.workspace.enabled.description": "Várias worktrees agora são exibidas na barra lateral",
  "toast.workspace.disabled.title": "Espaços de trabalho desativados",
  "toast.workspace.disabled.description": "Apenas a worktree principal é exibida na barra lateral",
-  "toast.permissions.autoaccept.on.title": "Aceitando edições automaticamente",
-  "toast.permissions.autoaccept.on.description": "Permissões de edição e escrita serão aprovadas automaticamente",
-  "toast.permissions.autoaccept.off.title": "Parou de aceitar edições automaticamente",
-  "toast.permissions.autoaccept.off.description": "Permissões de edição e escrita exigirão aprovação",
+  "toast.permissions.autoaccept.on.title": "Aceitando permissões automaticamente",
+  "toast.permissions.autoaccept.on.description": "Solicitações de permissão serão aprovadas automaticamente",
+  "toast.permissions.autoaccept.off.title": "Parou de aceitar permissões automaticamente",
+  "toast.permissions.autoaccept.off.description": "Solicitações de permissão exigirão aprovação",
  "toast.model.none.title": "Nenhum modelo selecionado",
  "toast.model.none.description": "Conecte um provedor para resumir esta sessão",
  "toast.file.loadFailed.title": "Falha ao carregar arquivo",
--- a/packages/app/src/i18n/bs.ts
+++ b/packages/app/src/i18n/bs.ts
@@ -71,8 +71,8 @@ export const dict = {
  "command.model.variant.cycle.description": "Prebaci na sljedeći nivo",
  "command.prompt.mode.shell": "Shell",
  "command.prompt.mode.normal": "Prompt",
-  "command.permissions.autoaccept.enable": "Automatski prihvataj izmjene",
-  "command.permissions.autoaccept.disable": "Zaustavi automatsko prihvatanje izmjena",
+  "command.permissions.autoaccept.enable": "Automatski prihvati dozvole",
+  "command.permissions.autoaccept.disable": "Zaustavi automatsko prihvatanje dozvola",
  "command.workspace.toggle": "Prikaži/sakrij radne prostore",
  "command.workspace.toggle.description": "Omogući ili onemogući više radnih prostora u bočnoj traci",
  "command.session.undo": "Poništi",
@@ -405,10 +405,10 @@ export const dict = {
  "toast.workspace.disabled.title": "Radni prostori onemogućeni",
  "toast.workspace.disabled.description": "Samo glavni worktree se prikazuje u bočnoj traci",

-  "toast.permissions.autoaccept.on.title": "Automatsko prihvatanje izmjena",
-  "toast.permissions.autoaccept.on.description": "Dozvole za izmjene i pisanje biće automatski odobrene",
-  "toast.permissions.autoaccept.off.title": "Zaustavljeno automatsko prihvatanje izmjena",
-  "toast.permissions.autoaccept.off.description": "Dozvole za izmjene i pisanje zahtijevaće odobrenje",
+  "toast.permissions.autoaccept.on.title": "Automatsko prihvatanje dozvola",
+  "toast.permissions.autoaccept.on.description": "Zahtjevi za dozvole će biti automatski odobreni",
+  "toast.permissions.autoaccept.off.title": "Zaustavljeno automatsko prihvatanje dozvola",
+  "toast.permissions.autoaccept.off.description": "Zahtjevi za dozvole će zahtijevati odobrenje",

  "toast.model.none.title": "Nije odabran model",
  "toast.model.none.description": "Poveži provajdera da sažmeš ovu sesiju",
--- a/packages/app/src/i18n/da.ts
+++ b/packages/app/src/i18n/da.ts
@@ -71,8 +71,8 @@ export const dict = {
  "command.model.variant.cycle.description": "Skift til næste indsatsniveau",
  "command.prompt.mode.shell": "Shell",
  "command.prompt.mode.normal": "Prompt",
-  "command.permissions.autoaccept.enable": "Accepter ændringer automatisk",
-  "command.permissions.autoaccept.disable": "Stop automatisk accept af ændringer",
+  "command.permissions.autoaccept.enable": "Accepter tilladelser automatisk",
+  "command.permissions.autoaccept.disable": "Stop med at acceptere tilladelser automatisk",
  "command.workspace.toggle": "Skift arbejdsområder",
  "command.workspace.toggle.description": "Aktiver eller deaktiver flere arbejdsområder i sidebjælken",
  "command.session.undo": "Fortryd",
@@ -398,10 +398,10 @@ export const dict = {
  "toast.theme.title": "Tema skiftet",
  "toast.scheme.title": "Farveskema",

-  "toast.permissions.autoaccept.on.title": "Accepterer ændringer automatisk",
-  "toast.permissions.autoaccept.on.description": "Redigerings- og skrivetilladelser vil automatisk blive godkendt",
-  "toast.permissions.autoaccept.off.title": "Stoppede automatisk accept af ændringer",
-  "toast.permissions.autoaccept.off.description": "Redigerings- og skrivetilladelser vil kræve godkendelse",
+  "toast.permissions.autoaccept.on.title": "Accepterer tilladelser automatisk",
+  "toast.permissions.autoaccept.on.description": "Anmodninger om tilladelse godkendes automatisk",
+  "toast.permissions.autoaccept.off.title": "Stoppet med at acceptere tilladelser automatisk",
+  "toast.permissions.autoaccept.off.description": "Anmodninger om tilladelse vil kræve godkendelse",

  "toast.workspace.enabled.title": "Arbejdsområder aktiveret",
  "toast.workspace.enabled.description": "Flere worktrees vises nu i sidepanelet",
--- a/packages/app/src/i18n/de.ts
+++ b/packages/app/src/i18n/de.ts
@@ -69,8 +69,8 @@ export const dict = {
  "command.model.variant.cycle.description": "Zum nächsten Aufwandslevel wechseln",
  "command.prompt.mode.shell": "Shell",
  "command.prompt.mode.normal": "Prompt",
-  "command.permissions.autoaccept.enable": "Änderungen automatisch akzeptieren",
-  "command.permissions.autoaccept.disable": "Automatische Annahme von Änderungen stoppen",
+  "command.permissions.autoaccept.enable": "Berechtigungen automatisch akzeptieren",
+  "command.permissions.autoaccept.disable": "Automatische Akzeptanz von Berechtigungen stoppen",
  "command.workspace.toggle": "Arbeitsbereiche umschalten",
  "command.workspace.toggle.description": "Mehrere Arbeitsbereiche in der Seitenleiste aktivieren oder deaktivieren",
  "command.session.undo": "Rückgängig",
@@ -374,10 +374,10 @@ export const dict = {
  "toast.workspace.enabled.description": "Mehrere Worktrees werden jetzt in der Seitenleiste angezeigt",
  "toast.workspace.disabled.title": "Arbeitsbereiche deaktiviert",
  "toast.workspace.disabled.description": "Nur der Haupt-Worktree wird in der Seitenleiste angezeigt",
-  "toast.permissions.autoaccept.on.title": "Änderungen werden automatisch akzeptiert",
-  "toast.permissions.autoaccept.on.description": "Bearbeitungs- und Schreibrechte werden automatisch genehmigt",
-  "toast.permissions.autoaccept.off.title": "Automatische Annahme von Änderungen gestoppt",
-  "toast.permissions.autoaccept.off.description": "Bearbeitungs- und Schreibrechte erfordern Genehmigung",
+  "toast.permissions.autoaccept.on.title": "Berechtigungen werden automatisch akzeptiert",
+  "toast.permissions.autoaccept.on.description": "Berechtigungsanfragen werden automatisch genehmigt",
+  "toast.permissions.autoaccept.off.title": "Automatische Akzeptanz von Berechtigungen gestoppt",
+  "toast.permissions.autoaccept.off.description": "Berechtigungsanfragen erfordern eine Genehmigung",
  "toast.model.none.title": "Kein Modell ausgewählt",
  "toast.model.none.description": "Verbinden Sie einen Anbieter, um diese Sitzung zusammenzufassen",
  "toast.file.loadFailed.title": "Datei konnte nicht geladen werden",
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@@ -71,8 +71,8 @@ export const dict = {
  "command.model.variant.cycle.description": "Switch to the next effort level",
  "command.prompt.mode.shell": "Shell",
  "command.prompt.mode.normal": "Prompt",
-  "command.permissions.autoaccept.enable": "Auto-accept edits",
-  "command.permissions.autoaccept.disable": "Stop auto-accepting edits",
+  "command.permissions.autoaccept.enable": "Auto-accept permissions",
+  "command.permissions.autoaccept.disable": "Stop auto-accepting permissions",
  "command.workspace.toggle": "Toggle workspaces",
  "command.workspace.toggle.description": "Enable or disable multiple workspaces in the sidebar",
  "command.session.undo": "Undo",
@@ -404,10 +404,10 @@ export const dict = {
  "toast.workspace.disabled.title": "Workspaces disabled",
  "toast.workspace.disabled.description": "Only the main worktree is shown in the sidebar",

-  "toast.permissions.autoaccept.on.title": "Auto-accepting edits",
-  "toast.permissions.autoaccept.on.description": "Edit and write permissions will be automatically approved",
-  "toast.permissions.autoaccept.off.title": "Stopped auto-accepting edits",
-  "toast.permissions.autoaccept.off.description": "Edit and write permissions will require approval",
+  "toast.permissions.autoaccept.on.title": "Auto-accepting permissions",
+  "toast.permissions.autoaccept.on.description": "Permission requests will be automatically approved",
+  "toast.permissions.autoaccept.off.title": "Stopped auto-accepting permissions",
+  "toast.permissions.autoaccept.off.description": "Permission requests will require approval",

  "toast.model.none.title": "No model selected",
  "toast.model.none.description": "Connect a provider to summarize this session",
--- a/packages/app/src/i18n/es.ts
+++ b/packages/app/src/i18n/es.ts
@@ -71,8 +71,8 @@ export const dict = {
  "command.model.variant.cycle.description": "Cambiar al siguiente nivel de esfuerzo",
  "command.prompt.mode.shell": "Shell",
  "command.prompt.mode.normal": "Prompt",
-  "command.permissions.autoaccept.enable": "Aceptar ediciones automáticamente",
-  "command.permissions.autoaccept.disable": "Dejar de aceptar ediciones automáticamente",
+  "command.permissions.autoaccept.enable": "Aceptar permisos automáticamente",
+  "command.permissions.autoaccept.disable": "Dejar de aceptar permisos automáticamente",
  "command.workspace.toggle": "Alternar espacios de trabajo",
  "command.workspace.toggle.description": "Habilitar o deshabilitar múltiples espacios de trabajo en la barra lateral",
  "command.session.undo": "Deshacer",
@@ -405,10 +405,10 @@ export const dict = {
  "toast.workspace.disabled.title": "Espacios de trabajo deshabilitados",
  "toast.workspace.disabled.description": "Solo se muestra el worktree principal en la barra lateral",

-  "toast.permissions.autoaccept.on.title": "Aceptando ediciones automáticamente",
-  "toast.permissions.autoaccept.on.description": "Los permisos de edición y escritura serán aprobados automáticamente",
-  "toast.permissions.autoaccept.off.title": "Se dejó de aceptar ediciones automáticamente",
-  "toast.permissions.autoaccept.off.description": "Los permisos de edición y escritura requerirán aprobación",
+  "toast.permissions.autoaccept.on.title": "Aceptando permisos automáticamente",
+  "toast.permissions.autoaccept.on.description": "Las solicitudes de permisos se aprobarán automáticamente",
+  "toast.permissions.autoaccept.off.title": "Se dejó de aceptar permisos automáticamente",
+  "toast.permissions.autoaccept.off.description": "Las solicitudes de permisos requerirán aprobación",

  "toast.model.none.title": "Ningún modelo seleccionado",
  "toast.model.none.description": "Conecta un proveedor para resumir esta sesión",
--- a/packages/app/src/i18n/fr.ts
+++ b/packages/app/src/i18n/fr.ts
@@ -65,8 +65,8 @@ export const dict = {
  "command.model.variant.cycle.description": "Passer au niveau d'effort suivant",
  "command.prompt.mode.shell": "Shell",
  "command.prompt.mode.normal": "Prompt",
-  "command.permissions.autoaccept.enable": "Accepter automatiquement les modifications",
-  "command.permissions.autoaccept.disable": "Arrêter l'acceptation automatique des modifications",
+  "command.permissions.autoaccept.enable": "Accepter automatiquement les permissions",
+  "command.permissions.autoaccept.disable": "Arrêter d'accepter automatiquement les permissions",
  "command.workspace.toggle": "Basculer les espaces de travail",
  "command.workspace.toggle.description": "Activer ou désactiver plusieurs espaces de travail dans la barre latérale",
  "command.session.undo": "Annuler",
@@ -368,12 +368,10 @@ export const dict = {
  "toast.workspace.enabled.description": "Plusieurs worktrees sont désormais affichés dans la barre latérale",
  "toast.workspace.disabled.title": "Espaces de travail désactivés",
  "toast.workspace.disabled.description": "Seul le worktree principal est affiché dans la barre latérale",
-  "toast.permissions.autoaccept.on.title": "Acceptation auto des modifications",
-  "toast.permissions.autoaccept.on.description":
-    "Les permissions de modification et d'écriture seront automatiquement approuvées",
-  "toast.permissions.autoaccept.off.title": "Arrêt acceptation auto des modifications",
-  "toast.permissions.autoaccept.off.description":
-    "Les permissions de modification et d'écriture nécessiteront une approbation",
+  "toast.permissions.autoaccept.on.title": "Acceptation automatique des permissions",
+  "toast.permissions.autoaccept.on.description": "Les demandes de permission seront approuvées automatiquement",
+  "toast.permissions.autoaccept.off.title": "Acceptation automatique des permissions arrêtée",
+  "toast.permissions.autoaccept.off.description": "Les demandes de permission nécessiteront une approbation",
  "toast.model.none.title": "Aucun modèle sélectionné",
  "toast.model.none.description": "Connectez un fournisseur pour résumer cette session",
  "toast.file.loadFailed.title": "Échec du chargement du fichier",
--- a/packages/app/src/i18n/ja.ts
+++ b/packages/app/src/i18n/ja.ts
@@ -65,8 +65,8 @@ export const dict = {
  "command.model.variant.cycle.description": "次の思考レベルに切り替え",
  "command.prompt.mode.shell": "シェル",
  "command.prompt.mode.normal": "プロンプト",
-  "command.permissions.autoaccept.enable": "編集を自動承認",
-  "command.permissions.autoaccept.disable": "編集の自動承認を停止",
+  "command.permissions.autoaccept.enable": "権限を自動承認する",
+  "command.permissions.autoaccept.disable": "権限の自動承認を停止する",
  "command.workspace.toggle": "ワークスペースを切り替え",
  "command.workspace.toggle.description": "サイドバーでの複数のワークスペースの有効化・無効化",
  "command.session.undo": "元に戻す",
@@ -366,10 +366,10 @@ export const dict = {
  "toast.workspace.enabled.description": "サイドバーに複数のワークツリーが表示されます",
  "toast.workspace.disabled.title": "ワークスペースが無効になりました",
  "toast.workspace.disabled.description": "サイドバーにはメインのワークツリーのみが表示されます",
-  "toast.permissions.autoaccept.on.title": "編集を自動承認中",
-  "toast.permissions.autoaccept.on.description": "編集と書き込みの権限は自動的に承認されます",
-  "toast.permissions.autoaccept.off.title": "編集の自動承認を停止しました",
-  "toast.permissions.autoaccept.off.description": "編集と書き込みの権限には承認が必要です",
+  "toast.permissions.autoaccept.on.title": "権限を自動承認しています",
+  "toast.permissions.autoaccept.on.description": "権限の要求は自動的に承認されます",
+  "toast.permissions.autoaccept.off.title": "権限の自動承認を停止しました",
+  "toast.permissions.autoaccept.off.description": "権限の要求には承認が必要になります",
  "toast.model.none.title": "モデルが選択されていません",
  "toast.model.none.description": "このセッションを要約するにはプロバイダーを接続してください",
  "toast.file.loadFailed.title": "ファイルの読み込みに失敗しました",
--- a/packages/app/src/i18n/ko.ts
+++ b/packages/app/src/i18n/ko.ts
@@ -69,8 +69,8 @@ export const dict = {
  "command.model.variant.cycle.description": "다음 생각 수준으로 전환",
  "command.prompt.mode.shell": "셸",
  "command.prompt.mode.normal": "프롬프트",
-  "command.permissions.autoaccept.enable": "편집 자동 수락",
-  "command.permissions.autoaccept.disable": "편집 자동 수락 중지",
+  "command.permissions.autoaccept.enable": "권한 자동 수락",
+  "command.permissions.autoaccept.disable": "권한 자동 수락 중지",
  "command.workspace.toggle": "작업 공간 전환",
  "command.workspace.toggle.description": "사이드바에서 다중 작업 공간 활성화 또는 비활성화",
  "command.session.undo": "실행 취소",
@@ -369,10 +369,10 @@ export const dict = {
  "toast.workspace.enabled.description": "이제 사이드바에 여러 작업 트리가 표시됩니다",
  "toast.workspace.disabled.title": "작업 공간 비활성화됨",
  "toast.workspace.disabled.description": "사이드바에 메인 작업 트리만 표시됩니다",
-  "toast.permissions.autoaccept.on.title": "편집 자동 수락 중",
-  "toast.permissions.autoaccept.on.description": "편집 및 쓰기 권한이 자동으로 승인됩니다",
-  "toast.permissions.autoaccept.off.title": "편집 자동 수락 중지됨",
-  "toast.permissions.autoaccept.off.description": "편집 및 쓰기 권한 승인이 필요합니다",
+  "toast.permissions.autoaccept.on.title": "권한 자동 수락 중",
+  "toast.permissions.autoaccept.on.description": "권한 요청이 자동으로 승인됩니다",
+  "toast.permissions.autoaccept.off.title": "권한 자동 수락 중지됨",
+  "toast.permissions.autoaccept.off.description": "권한 요청에 승인이 필요합니다",
  "toast.model.none.title": "선택된 모델 없음",
  "toast.model.none.description": "이 세션을 요약하려면 공급자를 연결하세요",
  "toast.file.loadFailed.title": "파일 로드 실패",
--- a/packages/app/src/i18n/no.ts
+++ b/packages/app/src/i18n/no.ts
@@ -74,8 +74,8 @@ export const dict = {
  "command.model.variant.cycle.description": "Bytt til neste innsatsnivå",
  "command.prompt.mode.shell": "Shell",
  "command.prompt.mode.normal": "Prompt",
-  "command.permissions.autoaccept.enable": "Godta endringer automatisk",
-  "command.permissions.autoaccept.disable": "Slutt å godta endringer automatisk",
+  "command.permissions.autoaccept.enable": "Aksepter tillatelser automatisk",
+  "command.permissions.autoaccept.disable": "Stopp automatisk akseptering av tillatelser",
  "command.workspace.toggle": "Veksle arbeidsområder",
  "command.workspace.toggle.description": "Enable or disable multiple workspaces in the sidebar",
  "command.session.undo": "Angre",
@@ -406,10 +406,10 @@ export const dict = {
  "toast.workspace.disabled.title": "Arbeidsområder deaktivert",
  "toast.workspace.disabled.description": "Kun hoved-worktree vises i sidefeltet",

-  "toast.permissions.autoaccept.on.title": "Godtar endringer automatisk",
-  "toast.permissions.autoaccept.on.description": "Redigerings- og skrivetillatelser vil bli godkjent automatisk",
-  "toast.permissions.autoaccept.off.title": "Sluttet å godta endringer automatisk",
-  "toast.permissions.autoaccept.off.description": "Redigerings- og skrivetillatelser vil kreve godkjenning",
+  "toast.permissions.autoaccept.on.title": "Aksepterer tillatelser automatisk",
+  "toast.permissions.autoaccept.on.description": "Forespørsler om tillatelse vil bli godkjent automatisk",
+  "toast.permissions.autoaccept.off.title": "Stoppet automatisk akseptering av tillatelser",
+  "toast.permissions.autoaccept.off.description": "Forespørsler om tillatelse vil kreve godkjenning",

  "toast.model.none.title": "Ingen modell valgt",
  "toast.model.none.description": "Koble til en leverandør for å oppsummere denne sesjonen",
--- a/packages/app/src/i18n/pl.ts
+++ b/packages/app/src/i18n/pl.ts
@@ -65,8 +65,8 @@ export const dict = {
  "command.model.variant.cycle.description": "Przełącz na następny poziom wysiłku",
  "command.prompt.mode.shell": "Terminal",
  "command.prompt.mode.normal": "Prompt",
-  "command.permissions.autoaccept.enable": "Automatyczne akceptowanie edycji",
-  "command.permissions.autoaccept.disable": "Zatrzymaj automatyczne akceptowanie edycji",
+  "command.permissions.autoaccept.enable": "Automatycznie akceptuj uprawnienia",
+  "command.permissions.autoaccept.disable": "Zatrzymaj automatyczne akceptowanie uprawnień",
  "command.workspace.toggle": "Przełącz przestrzenie robocze",
  "command.workspace.toggle.description": "Włącz lub wyłącz wiele przestrzeni roboczych na pasku bocznym",
  "command.session.undo": "Cofnij",
@@ -367,10 +367,10 @@ export const dict = {
  "toast.workspace.enabled.description": "Kilka worktree jest teraz wyświetlanych na pasku bocznym",
  "toast.workspace.disabled.title": "Przestrzenie robocze wyłączone",
  "toast.workspace.disabled.description": "Tylko główny worktree jest wyświetlany na pasku bocznym",
-  "toast.permissions.autoaccept.on.title": "Automatyczne akceptowanie edycji",
-  "toast.permissions.autoaccept.on.description": "Uprawnienia do edycji i zapisu będą automatycznie zatwierdzane",
-  "toast.permissions.autoaccept.off.title": "Zatrzymano automatyczne akceptowanie edycji",
-  "toast.permissions.autoaccept.off.description": "Uprawnienia do edycji i zapisu będą wymagały zatwierdzenia",
+  "toast.permissions.autoaccept.on.title": "Automatyczne akceptowanie uprawnień",
+  "toast.permissions.autoaccept.on.description": "Żądania uprawnień będą automatycznie zatwierdzane",
+  "toast.permissions.autoaccept.off.title": "Zatrzymano automatyczne akceptowanie uprawnień",
+  "toast.permissions.autoaccept.off.description": "Żądania uprawnień będą wymagały zatwierdzenia",
  "toast.model.none.title": "Nie wybrano modelu",
  "toast.model.none.description": "Połącz dostawcę, aby podsumować tę sesję",
  "toast.file.loadFailed.title": "Nie udało się załadować pliku",
--- a/packages/app/src/i18n/ru.ts
+++ b/packages/app/src/i18n/ru.ts
@@ -71,8 +71,8 @@ export const dict = {
  "command.model.variant.cycle.description": "Переключиться к следующему уровню усилий",
  "command.prompt.mode.shell": "Оболочка",
  "command.prompt.mode.normal": "Промпт",
-  "command.permissions.autoaccept.enable": "Авто-принятие изменений",
-  "command.permissions.autoaccept.disable": "Прекратить авто-принятие изменений",
+  "command.permissions.autoaccept.enable": "Автоматически принимать разрешения",
+  "command.permissions.autoaccept.disable": "Остановить автоматическое принятие разрешений",
  "command.workspace.toggle": "Переключить рабочие пространства",
  "command.workspace.toggle.description": "Включить или отключить несколько рабочих пространств в боковой панели",
  "command.session.undo": "Отменить",
@@ -400,10 +400,10 @@ export const dict = {
  "toast.theme.title": "Тема переключена",
  "toast.scheme.title": "Цветовая схема",

-  "toast.permissions.autoaccept.on.title": "Авто-принятие изменений",
-  "toast.permissions.autoaccept.on.description": "Разрешения на редактирование и запись будут автоматически одобрены",
-  "toast.permissions.autoaccept.off.title": "Авто-принятие остановлено",
-  "toast.permissions.autoaccept.off.description": "Редактирование и запись потребуют подтверждения",
+  "toast.permissions.autoaccept.on.title": "Разрешения принимаются автоматически",
+  "toast.permissions.autoaccept.on.description": "Запросы на разрешения будут одобряться автоматически",
+  "toast.permissions.autoaccept.off.title": "Автоматическое принятие разрешений остановлено",
+  "toast.permissions.autoaccept.off.description": "Запросы на разрешения будут требовать одобрения",

  "toast.workspace.enabled.title": "Рабочие пространства включены",
  "toast.workspace.enabled.description": "В боковой панели теперь отображаются несколько рабочих деревьев",
--- a/packages/app/src/i18n/th.ts
+++ b/packages/app/src/i18n/th.ts
@@ -71,8 +71,8 @@ export const dict = {
  "command.model.variant.cycle.description": "สลับไปยังระดับความพยายามถัดไป",
  "command.prompt.mode.shell": "เชลล์",
  "command.prompt.mode.normal": "พรอมต์",
-  "command.permissions.autoaccept.enable": "ยอมรับการแก้ไขโดยอัตโนมัติ",
-  "command.permissions.autoaccept.disable": "หยุดยอมรับการแก้ไขโดยอัตโนมัติ",
+  "command.permissions.autoaccept.enable": "ยอมรับสิทธิ์โดยอัตโนมัติ",
+  "command.permissions.autoaccept.disable": "หยุดยอมรับสิทธิ์โดยอัตโนมัติ",
  "command.workspace.toggle": "สลับพื้นที่ทำงาน",
  "command.workspace.toggle.description": "เปิดหรือปิดใช้งานพื้นที่ทำงานหลายรายการในแถบด้านข้าง",
  "command.session.undo": "ยกเลิก",
@@ -403,10 +403,10 @@ export const dict = {
  "toast.workspace.disabled.title": "ปิดใช้งานพื้นที่ทำงานแล้ว",
  "toast.workspace.disabled.description": "จะแสดงเฉพาะ worktree หลักในแถบด้านข้าง",

-  "toast.permissions.autoaccept.on.title": "กำลังยอมรับการแก้ไขโดยอัตโนมัติ",
-  "toast.permissions.autoaccept.on.description": "สิทธิ์การแก้ไขและจะได้รับเขียนการอนุมัติโดยอัตโนมัติ",
-  "toast.permissions.autoaccept.off.title": "หยุดยอมรับการแก้ไขโดยอัตโนมัติ",
-  "toast.permissions.autoaccept.off.description": "สิทธิ์การแก้ไขและเขียนจะต้องได้รับการอนุมัติ",
+  "toast.permissions.autoaccept.on.title": "กำลังยอมรับสิทธิ์โดยอัตโนมัติ",
+  "toast.permissions.autoaccept.on.description": "คำขอสิทธิ์จะได้รับการอนุมัติโดยอัตโนมัติ",
+  "toast.permissions.autoaccept.off.title": "หยุดยอมรับสิทธิ์โดยอัตโนมัติแล้ว",
+  "toast.permissions.autoaccept.off.description": "คำขอสิทธิ์จะต้องได้รับการอนุมัติ",

  "toast.model.none.title": "ไม่ได้เลือกโมเดล",
  "toast.model.none.description": "เชื่อมต่อผู้ให้บริการเพื่อสรุปเซสชันนี้",
--- a/packages/app/src/i18n/zh.ts
+++ b/packages/app/src/i18n/zh.ts
@@ -96,8 +96,8 @@ export const dict = {
  "command.prompt.mode.shell": "Shell",
  "command.prompt.mode.normal": "Prompt",

-  "command.permissions.autoaccept.enable": "自动接受编辑",
-  "command.permissions.autoaccept.disable": "停止自动接受编辑",
+  "command.permissions.autoaccept.enable": "自动接受权限",
+  "command.permissions.autoaccept.disable": "停止自动接受权限",

  "command.workspace.toggle": "切换工作区",
  "command.workspace.toggle.description": "在侧边栏启用或禁用多个工作区",
@@ -415,10 +415,10 @@ export const dict = {
  "toast.workspace.enabled.description": "侧边栏现在显示多个工作树",
  "toast.workspace.disabled.title": "工作区已禁用",
  "toast.workspace.disabled.description": "侧边栏只显示主工作树",
-  "toast.permissions.autoaccept.on.title": "自动接受编辑",
-  "toast.permissions.autoaccept.on.description": "编辑和写入权限将自动获批",
-  "toast.permissions.autoaccept.off.title": "已停止自动接受编辑",
-  "toast.permissions.autoaccept.off.description": "编辑和写入权限将需要手动批准",
+  "toast.permissions.autoaccept.on.title": "正在自动接受权限",
+  "toast.permissions.autoaccept.on.description": "权限请求将被自动批准",
+  "toast.permissions.autoaccept.off.title": "已停止自动接受权限",
+  "toast.permissions.autoaccept.off.description": "权限请求将需要批准",
  "toast.model.none.title": "未选择模型",
  "toast.model.none.description": "请先连接提供商以总结此会话",
  "toast.file.loadFailed.title": "加载文件失败",
--- a/packages/app/src/i18n/zht.ts
+++ b/packages/app/src/i18n/zht.ts
@@ -75,8 +75,8 @@ export const dict = {
  "command.model.variant.cycle.description": "切換到下一個強度等級",
  "command.prompt.mode.shell": "Shell",
  "command.prompt.mode.normal": "Prompt",
-  "command.permissions.autoaccept.enable": "自動接受編輯",
-  "command.permissions.autoaccept.disable": "停止自動接受編輯",
+  "command.permissions.autoaccept.enable": "自動接受權限",
+  "command.permissions.autoaccept.disable": "停止自動接受權限",
  "command.workspace.toggle": "切換工作區",
  "command.workspace.toggle.description": "在側邊欄啟用或停用多個工作區",
  "command.session.undo": "復原",
@@ -402,10 +402,10 @@ export const dict = {
  "toast.workspace.disabled.title": "工作區已停用",
  "toast.workspace.disabled.description": "側邊欄只顯示主工作樹",

-  "toast.permissions.autoaccept.on.title": "自動接受編輯",
-  "toast.permissions.autoaccept.on.description": "編輯和寫入權限將自動獲准",
-  "toast.permissions.autoaccept.off.title": "已停止自動接受編輯",
-  "toast.permissions.autoaccept.off.description": "編輯和寫入權限將需要手動批准",
+  "toast.permissions.autoaccept.on.title": "正在自動接受權限",
+  "toast.permissions.autoaccept.on.description": "權限請求將被自動批准",
+  "toast.permissions.autoaccept.off.title": "已停止自動接受權限",
+  "toast.permissions.autoaccept.off.description": "權限請求將需要批准",

  "toast.model.none.title": "未選擇模型",
  "toast.model.none.description": "請先連線提供者以總結此工作階段",
--- a/packages/app/src/pages/layout/helpers.test.ts
+++ b/packages/app/src/pages/layout/helpers.test.ts
@@ -5,6 +5,7 @@ import {
  displayName,
  errorMessage,
  getDraggableId,
+  hasProjectPermissions,
  latestRootSession,
  syncWorkspaceOrder,
  workspaceKey,
@@ -116,6 +117,29 @@ describe("layout workspace helpers", () => {
    expect(result?.id).toBe("workspace")
  })

+  test("detects project permissions with a filter", () => {
+    const result = hasProjectPermissions(
+      {
+        root: [{ id: "perm-root" }, { id: "perm-hidden" }],
+        child: [{ id: "perm-child" }],
+      },
+      (item) => item.id === "perm-child",
+    )
+
+    expect(result).toBe(true)
+  })
+
+  test("ignores project permissions filtered out", () => {
+    const result = hasProjectPermissions(
+      {
+        root: [{ id: "perm-root" }],
+      },
+      () => false,
+    )
+
+    expect(result).toBe(false)
+  })
+
  test("ignores archived and child sessions when finding latest root session", () => {
    const result = latestRootSession(
      [
--- a/packages/app/src/pages/layout/helpers.ts
+++ b/packages/app/src/pages/layout/helpers.ts
@@ -33,6 +33,13 @@ export const latestRootSession = (stores: { session: Session[]; path: { director
    .flatMap((store) => store.session.filter((session) => isRootVisibleSession(session, store.path.directory)))
    .sort(sortSessions(now))[0]

+export function hasProjectPermissions<T>(
+  request: Record<string, T[] | undefined>,
+  include: (item: T) => boolean = () => true,
+) {
+  return Object.values(request).some((list) => list?.some(include))
+}
+
 export const childMapByParent = (sessions: Session[]) => {
  const map = new Map<string, string[]>()
  for (const session of sessions) {
--- a/packages/app/src/pages/layout/sidebar-items.tsx
+++ b/packages/app/src/pages/layout/sidebar-items.tsx
@@ -3,6 +3,7 @@ import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
 import { useLayout, type LocalProject, getAvatarColors } from "@/context/layout"
 import { useNotification } from "@/context/notification"
+import { usePermission } from "@/context/permission"
 import { base64Encode } from "@opencode-ai/util/encode"
 import { Avatar } from "@opencode-ai/ui/avatar"
 import { DiffChanges } from "@opencode-ai/ui/diff-changes"
@@ -16,16 +17,27 @@ import { getFilename } from "@opencode-ai/util/path"
 import { type Message, type Session, type TextPart, type UserMessage } from "@opencode-ai/sdk/v2/client"
 import { For, Match, Show, Switch, createMemo, onCleanup, type Accessor, type JSX } from "solid-js"
 import { agentColor } from "@/utils/agent"
+import { hasProjectPermissions } from "./helpers"
+import { sessionPermissionRequest } from "../session/composer/session-request-tree"

 const OPENCODE_PROJECT_ID = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"

 export const ProjectIcon = (props: { project: LocalProject; class?: string; notify?: boolean }): JSX.Element => {
+  const globalSync = useGlobalSync()
  const notification = useNotification()
+  const permission = usePermission()
  const dirs = createMemo(() => [props.project.worktree, ...(props.project.sandboxes ?? [])])
  const unseenCount = createMemo(() =>
    dirs().reduce((total, directory) => total + notification.project.unseenCount(directory), 0),
  )
  const hasError = createMemo(() => dirs().some((directory) => notification.project.unseenHasError(directory)))
+  const hasPermissions = createMemo(() =>
+    dirs().some((directory) => {
+      const [store] = globalSync.child(directory, { bootstrap: false })
+      return hasProjectPermissions(store.permission, (item) => !permission.autoResponds(item, directory))
+    }),
+  )
+  const notify = createMemo(() => props.notify && (hasPermissions() || unseenCount() > 0))
  const name = createMemo(() => props.project.name || getFilename(props.project.worktree))
  return (
    <div class={`relative size-8 shrink-0 rounded ${props.class ?? ""}`}>
@@ -37,15 +49,16 @@ export const ProjectIcon = (props: { project: LocalProject; class?: string; noti
          }
          {...getAvatarColors(props.project.icon?.color)}
          class="size-full rounded"
-          classList={{ "badge-mask": unseenCount() > 0 && props.notify }}
+          classList={{ "badge-mask": notify() }}
        />
      </div>
-      <Show when={unseenCount() > 0 && props.notify}>
+      <Show when={notify()}>
        <div
          classList={{
            "absolute top-px right-px size-1.5 rounded-full z-10": true,
-            "bg-icon-critical-base": hasError(),
-            "bg-text-interactive-base": !hasError(),
+            "bg-surface-warning-strong": hasPermissions(),
+            "bg-icon-critical-base": !hasPermissions() && hasError(),
+            "bg-text-interactive-base": !hasPermissions() && !hasError(),
          }}
        />
      </Show>
@@ -186,19 +199,15 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
  const layout = useLayout()
  const language = useLanguage()
  const notification = useNotification()
+  const permission = usePermission()
  const globalSync = useGlobalSync()
  const unseenCount = createMemo(() => notification.session.unseenCount(props.session.id))
  const hasError = createMemo(() => notification.session.unseenHasError(props.session.id))
  const [sessionStore] = globalSync.child(props.session.directory)
  const hasPermissions = createMemo(() => {
-    const permissions = sessionStore.permission?.[props.session.id] ?? []
-    if (permissions.length > 0) return true
-
-    for (const id of props.children.get(props.session.id) ?? []) {
-      const childPermissions = sessionStore.permission?.[id] ?? []
-      if (childPermissions.length > 0) return true
-    }
-    return false
+    return !!sessionPermissionRequest(sessionStore.session, sessionStore.permission, props.session.id, (item) => {
+      return !permission.autoResponds(item, props.session.directory)
+    })
  })
  const isWorking = createMemo(() => {
    if (hasPermissions()) return false
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -107,7 +107,7 @@ export default function Page() {
    if (desktopReviewOpen()) return `${layout.session.width()}px`
    return `calc(100% - ${layout.fileTree.width()}px)`
  })
-  const centered = createMemo(() => isDesktop() && !desktopSidePanelOpen())
+  const centered = createMemo(() => isDesktop() && !desktopReviewOpen())

  function normalizeTab(tab: string) {
    if (!tab.startsWith("file://")) return tab
@@ -379,11 +379,58 @@ export default function Page() {
    })
  }

+  const updateCommentInContext = (input: {
+    id: string
+    file: string
+    selection: SelectedLineRange
+    comment: string
+    preview?: string
+  }) => {
+    comments.update(input.file, input.id, input.comment)
+    prompt.context.updateComment(input.file, input.id, {
+      comment: input.comment,
+      ...(input.preview ? { preview: input.preview } : {}),
+    })
+  }
+
+  const removeCommentFromContext = (input: { id: string; file: string }) => {
+    comments.remove(input.file, input.id)
+    prompt.context.removeComment(input.file, input.id)
+  }
+
+  const reviewCommentActions = createMemo(() => ({
+    moreLabel: language.t("common.moreOptions"),
+    editLabel: language.t("common.edit"),
+    deleteLabel: language.t("common.delete"),
+    saveLabel: language.t("common.save"),
+  }))
+
+  const isEditableTarget = (target: EventTarget | null | undefined) => {
+    if (!(target instanceof HTMLElement)) return false
+    return /^(INPUT|TEXTAREA|SELECT|BUTTON)$/.test(target.tagName) || target.isContentEditable
+  }
+
+  const deepActiveElement = () => {
+    let current: Element | null = document.activeElement
+    while (current instanceof HTMLElement && current.shadowRoot?.activeElement) {
+      current = current.shadowRoot.activeElement
+    }
+    return current instanceof HTMLElement ? current : undefined
+  }
+
  const handleKeyDown = (event: KeyboardEvent) => {
-    const activeElement = document.activeElement as HTMLElement | undefined
+    const path = event.composedPath()
+    const target = path.find((item): item is HTMLElement => item instanceof HTMLElement)
+    const activeElement = deepActiveElement()
+
+    const protectedTarget = path.some(
+      (item) => item instanceof HTMLElement && item.closest("[data-prevent-autofocus]") !== null,
+    )
+    if (protectedTarget || isEditableTarget(target)) return
+
    if (activeElement) {
      const isProtected = activeElement.closest("[data-prevent-autofocus]")
-      const isInput = /^(INPUT|TEXTAREA|SELECT|BUTTON)$/.test(activeElement.tagName) || activeElement.isContentEditable
+      const isInput = isEditableTarget(activeElement)
      if (isProtected || isInput) return
    }
    if (dialog.active) return
@@ -469,7 +516,8 @@ export default function Page() {
      }
      onSelect={(option) => option && setStore("changes", option)}
      variant="ghost"
-      size="large"
+      size="small"
+      valueClass="text-14-medium"
    />
  )

@@ -499,6 +547,9 @@ export default function Page() {
          onScrollRef={(el) => setTree("reviewScroll", el)}
          focusedFile={tree.activeDiff}
          onLineComment={(comment) => addCommentToContext({ ...comment, origin: "review" })}
+          onLineCommentUpdate={updateCommentInContext}
+          onLineCommentDelete={removeCommentFromContext}
+          lineCommentActions={reviewCommentActions()}
          comments={comments.all()}
          focusedComment={comments.focus()}
          onFocusedCommentChange={comments.setFocus}
@@ -520,6 +571,9 @@ export default function Page() {
            onScrollRef={(el) => setTree("reviewScroll", el)}
            focusedFile={tree.activeDiff}
            onLineComment={(comment) => addCommentToContext({ ...comment, origin: "review" })}
+            onLineCommentUpdate={updateCommentInContext}
+            onLineCommentDelete={removeCommentFromContext}
+            lineCommentActions={reviewCommentActions()}
            comments={comments.all()}
            focusedComment={comments.focus()}
            onFocusedCommentChange={comments.setFocus}
@@ -548,6 +602,9 @@ export default function Page() {
          onScrollRef={(el) => setTree("reviewScroll", el)}
          focusedFile={tree.activeDiff}
          onLineComment={(comment) => addCommentToContext({ ...comment, origin: "review" })}
+          onLineCommentUpdate={updateCommentInContext}
+          onLineCommentDelete={removeCommentFromContext}
+          lineCommentActions={reviewCommentActions()}
          comments={comments.all()}
          focusedComment={comments.focus()}
          onFocusedCommentChange={comments.setFocus}
--- a/packages/app/src/pages/session/composer/session-composer-state.test.ts
+++ b/packages/app/src/pages/session/composer/session-composer-state.test.ts
@@ -55,6 +55,28 @@ describe("sessionPermissionRequest", () => {

    expect(sessionPermissionRequest(sessions, permissions, "root")).toBeUndefined()
  })
+
+  test("skips filtered permissions in the current tree", () => {
+    const sessions = [session({ id: "root" }), session({ id: "child", parentID: "root" })]
+    const permissions = {
+      root: [permission("perm-root", "root")],
+      child: [permission("perm-child", "child")],
+    }
+
+    expect(sessionPermissionRequest(sessions, permissions, "root", (item) => item.id !== "perm-root"))?.toMatchObject({
+      id: "perm-child",
+    })
+  })
+
+  test("returns undefined when all tree permissions are filtered out", () => {
+    const sessions = [session({ id: "root" }), session({ id: "child", parentID: "root" })]
+    const permissions = {
+      root: [permission("perm-root", "root")],
+      child: [permission("perm-child", "child")],
+    }
+
+    expect(sessionPermissionRequest(sessions, permissions, "root", () => false)).toBeUndefined()
+  })
 })

 describe("sessionQuestionRequest", () => {
--- a/packages/app/src/pages/session/composer/session-composer-state.ts
+++ b/packages/app/src/pages/session/composer/session-composer-state.ts
@@ -5,15 +5,20 @@ import { useParams } from "@solidjs/router"
 import { showToast } from "@opencode-ai/ui/toast"
 import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
+import { usePermission } from "@/context/permission"
 import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
 import { sessionPermissionRequest, sessionQuestionRequest } from "./session-request-tree"

 export function createSessionComposerBlocked() {
  const params = useParams()
+  const permission = usePermission()
+  const sdk = useSDK()
  const sync = useSync()
  const permissionRequest = createMemo(() =>
-    sessionPermissionRequest(sync.data.session, sync.data.permission, params.id),
+    sessionPermissionRequest(sync.data.session, sync.data.permission, params.id, (item) => {
+      return !permission.autoResponds(item, sdk.directory)
+    }),
  )
  const questionRequest = createMemo(() => sessionQuestionRequest(sync.data.session, sync.data.question, params.id))

@@ -30,13 +35,16 @@ export function createSessionComposerState() {
  const sync = useSync()
  const globalSync = useGlobalSync()
  const language = useLanguage()
+  const permission = usePermission()

  const questionRequest = createMemo((): QuestionRequest | undefined => {
    return sessionQuestionRequest(sync.data.session, sync.data.question, params.id)
  })

  const permissionRequest = createMemo((): PermissionRequest | undefined => {
-    return sessionPermissionRequest(sync.data.session, sync.data.permission, params.id)
+    return sessionPermissionRequest(sync.data.session, sync.data.permission, params.id, (item) => {
+      return !permission.autoResponds(item, sdk.directory)
+    })
  })

  const blocked = createMemo(() => {
--- a/packages/app/src/pages/session/composer/session-request-tree.ts
+++ b/packages/app/src/pages/session/composer/session-request-tree.ts
@@ -1,6 +1,11 @@
 import type { PermissionRequest, QuestionRequest, Session } from "@opencode-ai/sdk/v2/client"

-function sessionTreeRequest<T>(session: Session[], request: Record<string, T[] | undefined>, sessionID?: string) {
+function sessionTreeRequest<T>(
+  session: Session[],
+  request: Record<string, T[] | undefined>,
+  sessionID?: string,
+  include: (item: T) => boolean = () => true,
+) {
  if (!sessionID) return

  const map = session.reduce((acc, item) => {
@@ -23,23 +28,25 @@ function sessionTreeRequest<T>(session: Session[], request: Record<string, T[] |
    }
  }

-  const id = ids.find((id) => !!request[id]?.[0])
+  const id = ids.find((id) => request[id]?.some(include))
  if (!id) return
-  return request[id]?.[0]
+  return request[id]?.find(include)
 }

 export function sessionPermissionRequest(
  session: Session[],
  request: Record<string, PermissionRequest[] | undefined>,
  sessionID?: string,
+  include?: (item: PermissionRequest) => boolean,
 ) {
-  return sessionTreeRequest(session, request, sessionID)
+  return sessionTreeRequest(session, request, sessionID, include)
 }

 export function sessionQuestionRequest(
  session: Session[],
  request: Record<string, QuestionRequest[] | undefined>,
  sessionID?: string,
+  include?: (item: QuestionRequest) => boolean,
 ) {
-  return sessionTreeRequest(session, request, sessionID)
+  return sessionTreeRequest(session, request, sessionID, include)
 }
--- a/packages/app/src/pages/session/file-tabs.tsx
+++ b/packages/app/src/pages/session/file-tabs.tsx
@@ -1,15 +1,17 @@
-import { createEffect, createMemo, For, Match, on, onCleanup, Show, Switch } from "solid-js"
-import { createStore, produce } from "solid-js/store"
+import { createEffect, createMemo, Match, on, onCleanup, Switch } from "solid-js"
+import { createStore } from "solid-js/store"
 import { Dynamic } from "solid-js/web"
 import { useParams } from "@solidjs/router"
-import { useCodeComponent } from "@opencode-ai/ui/context/code"
+import type { FileSearchHandle } from "@opencode-ai/ui/file"
+import { useFileComponent } from "@opencode-ai/ui/context/file"
+import { cloneSelectedLineRange, previewSelectedLines } from "@opencode-ai/ui/pierre/selection-bridge"
+import { createLineCommentController } from "@opencode-ai/ui/line-comment-annotations"
 import { sampledChecksum } from "@opencode-ai/util/encode"
-import { decode64 } from "@/utils/base64"
-import { showToast } from "@opencode-ai/ui/toast"
-import { LineComment as LineCommentView, LineCommentEditor } from "@opencode-ai/ui/line-comment"
-import { Mark } from "@opencode-ai/ui/logo"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
+import { showToast } from "@opencode-ai/ui/toast"
 import { useLayout } from "@/context/layout"
 import { selectionFromLines, useFile, type FileSelection, type SelectedLineRange } from "@/context/file"
 import { useComments } from "@/context/comments"
@@ -17,11 +19,37 @@ import { useLanguage } from "@/context/language"
 import { usePrompt } from "@/context/prompt"
 import { getSessionHandoff } from "@/pages/session/handoff"

-const formatCommentLabel = (range: SelectedLineRange) => {
-  const start = Math.min(range.start, range.end)
-  const end = Math.max(range.start, range.end)
-  if (start === end) return `line ${start}`
-  return `lines ${start}-${end}`
+function FileCommentMenu(props: {
+  moreLabel: string
+  editLabel: string
+  deleteLabel: string
+  onEdit: VoidFunction
+  onDelete: VoidFunction
+}) {
+  return (
+    <div onMouseDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}>
+      <DropdownMenu gutter={4} placement="bottom-end">
+        <DropdownMenu.Trigger
+          as={IconButton}
+          icon="dot-grid"
+          variant="ghost"
+          size="small"
+          class="size-6 rounded-md"
+          aria-label={props.moreLabel}
+        />
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content>
+            <DropdownMenu.Item onSelect={props.onEdit}>
+              <DropdownMenu.ItemLabel>{props.editLabel}</DropdownMenu.ItemLabel>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item onSelect={props.onDelete}>
+              <DropdownMenu.ItemLabel>{props.deleteLabel}</DropdownMenu.ItemLabel>
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu>
+    </div>
+  )
 }

 export function FileTabContent(props: { tab: string }) {
@@ -31,7 +59,7 @@ export function FileTabContent(props: { tab: string }) {
  const comments = useComments()
  const language = useLanguage()
  const prompt = usePrompt()
-  const codeComponent = useCodeComponent()
+  const fileComponent = useFileComponent()

  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
  const tabs = createMemo(() => layout.tabs(sessionKey))
@@ -41,6 +69,13 @@ export function FileTabContent(props: { tab: string }) {
  let scrollFrame: number | undefined
  let pending: { x: number; y: number } | undefined
  let codeScroll: HTMLElement[] = []
+  let find: FileSearchHandle | null = null
+
+  const search = {
+    register: (handle: FileSearchHandle | null) => {
+      find = handle
+    },
+  }

  const path = createMemo(() => file.pathFromTab(props.tab))
  const state = createMemo(() => {
@@ -50,66 +85,18 @@ export function FileTabContent(props: { tab: string }) {
  })
  const contents = createMemo(() => state()?.content?.content ?? "")
  const cacheKey = createMemo(() => sampledChecksum(contents()))
-  const isImage = createMemo(() => {
-    const c = state()?.content
-    return c?.encoding === "base64" && c?.mimeType?.startsWith("image/") && c?.mimeType !== "image/svg+xml"
-  })
-  const isSvg = createMemo(() => {
-    const c = state()?.content
-    return c?.mimeType === "image/svg+xml"
-  })
-  const isBinary = createMemo(() => state()?.content?.type === "binary")
-  const svgContent = createMemo(() => {
-    if (!isSvg()) return
-    const c = state()?.content
-    if (!c) return
-    if (c.encoding !== "base64") return c.content
-    return decode64(c.content)
-  })
-
-  const svgDecodeFailed = createMemo(() => {
-    if (!isSvg()) return false
-    const c = state()?.content
-    if (!c) return false
-    if (c.encoding !== "base64") return false
-    return svgContent() === undefined
-  })
-
-  const svgToast = { shown: false }
-  createEffect(() => {
-    if (!svgDecodeFailed()) return
-    if (svgToast.shown) return
-    svgToast.shown = true
-    showToast({
-      variant: "error",
-      title: language.t("toast.file.loadFailed.title"),
-    })
-  })
-  const svgPreviewUrl = createMemo(() => {
-    if (!isSvg()) return
-    const c = state()?.content
-    if (!c) return
-    if (c.encoding === "base64") return `data:image/svg+xml;base64,${c.content}`
-    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(c.content)}`
-  })
-  const imageDataUrl = createMemo(() => {
-    if (!isImage()) return
-    const c = state()?.content
-    return `data:${c?.mimeType};base64,${c?.content}`
-  })
-  const selectedLines = createMemo(() => {
+  const selectedLines = createMemo<SelectedLineRange | null>(() => {
    const p = path()
    if (!p) return null
-    if (file.ready()) return file.selectedLines(p) ?? null
-    return getSessionHandoff(sessionKey())?.files[p] ?? null
+    if (file.ready()) return (file.selectedLines(p) as SelectedLineRange | undefined) ?? null
+    return (getSessionHandoff(sessionKey())?.files[p] as SelectedLineRange | undefined) ?? null
  })

  const selectionPreview = (source: string, selection: FileSelection) => {
-    const start = Math.max(1, Math.min(selection.startLine, selection.endLine))
-    const end = Math.max(selection.startLine, selection.endLine)
-    const lines = source.split("\n").slice(start - 1, end)
-    if (lines.length === 0) return undefined
-    return lines.slice(0, 2).join("\n")
+    return previewSelectedLines(source, {
+      start: selection.startLine,
+      end: selection.endLine,
+    })
  }

  const addCommentToContext = (input: {
@@ -145,7 +132,25 @@ export function FileTabContent(props: { tab: string }) {
    })
  }

-  let wrap: HTMLDivElement | undefined
+  const updateCommentInContext = (input: {
+    id: string
+    file: string
+    selection: SelectedLineRange
+    comment: string
+  }) => {
+    comments.update(input.file, input.id, input.comment)
+    const preview =
+      input.file === path() ? selectionPreview(contents(), selectionFromLines(input.selection)) : undefined
+    prompt.context.updateComment(input.file, input.id, {
+      comment: input.comment,
+      ...(preview ? { preview } : {}),
+    })
+  }
+
+  const removeCommentFromContext = (input: { id: string; file: string }) => {
+    comments.remove(input.file, input.id)
+    prompt.context.removeComment(input.file, input.id)
+  }

  const fileComments = createMemo(() => {
    const p = path()
@@ -153,121 +158,105 @@ export function FileTabContent(props: { tab: string }) {
    return comments.list(p)
  })

-  const commentLayout = createMemo(() => {
-    return fileComments()
-      .map((comment) => `${comment.id}:${comment.selection.start}:${comment.selection.end}`)
-      .join("|")
-  })
-
  const commentedLines = createMemo(() => fileComments().map((comment) => comment.selection))

  const [note, setNote] = createStore({
    openedComment: null as string | null,
    commenting: null as SelectedLineRange | null,
-    draft: "",
-    positions: {} as Record<string, number>,
-    draftTop: undefined as number | undefined,
+    selected: null as SelectedLineRange | null,
  })

-  const setCommenting = (range: SelectedLineRange | null) => {
-    setNote("commenting", range)
-    scheduleComments()
-    if (!range) return
-    setNote("draft", "")
+  const syncSelected = (range: SelectedLineRange | null) => {
+    const p = path()
+    if (!p) return
+    file.setSelectedLines(p, range ? cloneSelectedLineRange(range) : null)
  }

-  const getRoot = () => {
-    const el = wrap
-    if (!el) return
+  const activeSelection = () => note.selected ?? selectedLines()

-    const host = el.querySelector("diffs-container")
-    if (!(host instanceof HTMLElement)) return
+  const commentsUi = createLineCommentController({
+    comments: fileComments,
+    label: language.t("ui.lineComment.submit"),
+    draftKey: () => path() ?? props.tab,
+    state: {
+      opened: () => note.openedComment,
+      setOpened: (id) => setNote("openedComment", id),
+      selected: () => note.selected,
+      setSelected: (range) => setNote("selected", range),
+      commenting: () => note.commenting,
+      setCommenting: (range) => setNote("commenting", range),
+      syncSelected,
+      hoverSelected: syncSelected,
+    },
+    getHoverSelectedRange: activeSelection,
+    cancelDraftOnCommentToggle: true,
+    clearSelectionOnSelectionEndNull: true,
+    onSubmit: ({ comment, selection }) => {
+      const p = path()
+      if (!p) return
+      addCommentToContext({ file: p, selection, comment, origin: "file" })
+    },
+    onUpdate: ({ id, comment, selection }) => {
+      const p = path()
+      if (!p) return
+      updateCommentInContext({ id, file: p, selection, comment })
+    },
+    onDelete: (comment) => {
+      const p = path()
+      if (!p) return
+      removeCommentFromContext({ id: comment.id, file: p })
+    },
+    editSubmitLabel: language.t("common.save"),
+    renderCommentActions: (_, controls) => (
+      <FileCommentMenu
+        moreLabel={language.t("common.moreOptions")}
+        editLabel={language.t("common.edit")}
+        deleteLabel={language.t("common.delete")}
+        onEdit={controls.edit}
+        onDelete={controls.remove}
+      />
+    ),
+    onDraftPopoverFocusOut: (e: FocusEvent) => {
+      const current = e.currentTarget as HTMLDivElement
+      const target = e.relatedTarget
+      if (target instanceof Node && current.contains(target)) return

-    const root = host.shadowRoot
-    if (!root) return
-
-    return root
-  }
-
-  const findMarker = (root: ShadowRoot, range: SelectedLineRange) => {
-    const line = Math.max(range.start, range.end)
-    const node = root.querySelector(`[data-line="${line}"]`)
-    if (!(node instanceof HTMLElement)) return
-    return node
-  }
-
-  const markerTop = (wrapper: HTMLElement, marker: HTMLElement) => {
-    const wrapperRect = wrapper.getBoundingClientRect()
-    const rect = marker.getBoundingClientRect()
-    return rect.top - wrapperRect.top + Math.max(0, (rect.height - 20) / 2)
-  }
-
-  const updateComments = () => {
-    const el = wrap
-    const root = getRoot()
-    if (!el || !root) {
-      setNote("positions", {})
-      setNote("draftTop", undefined)
-      return
-    }
-
-    const estimateTop = (range: SelectedLineRange) => {
-      const line = Math.max(range.start, range.end)
-      const height = 24
-      const offset = 2
-      return Math.max(0, (line - 1) * height + offset)
-    }
-
-    const large = contents().length > 500_000
-
-    const next: Record<string, number> = {}
-    for (const comment of fileComments()) {
-      const marker = findMarker(root, comment.selection)
-      if (marker) next[comment.id] = markerTop(el, marker)
-      else if (large) next[comment.id] = estimateTop(comment.selection)
-    }
-
-    const removed = Object.keys(note.positions).filter((id) => next[id] === undefined)
-    const changed = Object.entries(next).filter(([id, top]) => note.positions[id] !== top)
-    if (removed.length > 0 || changed.length > 0) {
-      setNote(
-        "positions",
-        produce((draft) => {
-          for (const id of removed) {
-            delete draft[id]
-          }
-
-          for (const [id, top] of changed) {
-            draft[id] = top
-          }
-        }),
-      )
-    }
-
-    const range = note.commenting
-    if (!range) {
-      setNote("draftTop", undefined)
-      return
-    }
-
-    const marker = findMarker(root, range)
-    if (marker) {
-      setNote("draftTop", markerTop(el, marker))
-      return
-    }
-
-    setNote("draftTop", large ? estimateTop(range) : undefined)
-  }
-
-  const scheduleComments = () => {
-    requestAnimationFrame(updateComments)
-  }
+      setTimeout(() => {
+        if (!document.activeElement || !current.contains(document.activeElement)) {
+          setNote("commenting", null)
+        }
+      }, 0)
+    },
+  })

  createEffect(() => {
-    commentLayout()
-    scheduleComments()
+    if (typeof window === "undefined") return
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return
+      if (tabs().active() !== props.tab) return
+      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return
+      if (event.key.toLowerCase() !== "f") return
+
+      event.preventDefault()
+      event.stopPropagation()
+      find?.focus()
+    }
+
+    window.addEventListener("keydown", onKeyDown, { capture: true })
+    onCleanup(() => window.removeEventListener("keydown", onKeyDown, { capture: true }))
  })

+  createEffect(
+    on(
+      path,
+      () => {
+        commentsUi.note.reset()
+      },
+      { defer: true },
+    ),
+  )
+
  createEffect(() => {
    const focus = comments.focus()
    const p = path()
@@ -278,9 +267,7 @@ export function FileTabContent(props: { tab: string }) {
    const target = fileComments().find((comment) => comment.id === focus.id)
    if (!target) return

-    setNote("openedComment", target.id)
-    setCommenting(null)
-    file.setSelectedLines(p, target.selection)
+    commentsUi.note.openComment(target.id, target.selection, { cancelDraft: true })
    requestAnimationFrame(() => comments.clearFocus())
  })

@@ -419,99 +406,50 @@ export function FileTabContent(props: { tab: string }) {
    cancelAnimationFrame(scrollFrame)
  })

-  const renderCode = (source: string, wrapperClass: string) => (
-    <div
-      ref={(el) => {
-        wrap = el
-        scheduleComments()
-      }}
-      class={`relative overflow-hidden ${wrapperClass}`}
-    >
+  const renderFile = (source: string) => (
+    <div class="relative overflow-hidden pb-40">
      <Dynamic
-        component={codeComponent}
+        component={fileComponent}
+        mode="text"
        file={{
          name: path() ?? "",
          contents: source,
          cacheKey: cacheKey(),
        }}
        enableLineSelection
-        selectedLines={selectedLines()}
+        enableHoverUtility
+        selectedLines={activeSelection()}
        commentedLines={commentedLines()}
        onRendered={() => {
          requestAnimationFrame(restoreScroll)
-          requestAnimationFrame(scheduleComments)
        }}
+        annotations={commentsUi.annotations()}
+        renderAnnotation={commentsUi.renderAnnotation}
+        renderHoverUtility={commentsUi.renderHoverUtility}
        onLineSelected={(range: SelectedLineRange | null) => {
-          const p = path()
-          if (!p) return
-          file.setSelectedLines(p, range)
-          if (!range) setCommenting(null)
+          commentsUi.onLineSelected(range)
        }}
+        onLineNumberSelectionEnd={commentsUi.onLineNumberSelectionEnd}
        onLineSelectionEnd={(range: SelectedLineRange | null) => {
-          if (!range) {
-            setCommenting(null)
-            return
-          }
-
-          setNote("openedComment", null)
-          setCommenting(range)
+          commentsUi.onLineSelectionEnd(range)
        }}
+        search={search}
        overflow="scroll"
        class="select-text"
+        media={{
+          mode: "auto",
+          path: path(),
+          current: state()?.content,
+          onLoad: () => requestAnimationFrame(restoreScroll),
+          onError: (args: { kind: "image" | "audio" | "svg" }) => {
+            if (args.kind !== "svg") return
+            showToast({
+              variant: "error",
+              title: language.t("toast.file.loadFailed.title"),
+            })
+          },
+        }}
      />
-      <For each={fileComments()}>
-        {(comment) => (
-          <LineCommentView
-            id={comment.id}
-            top={note.positions[comment.id]}
-            open={note.openedComment === comment.id}
-            comment={comment.comment}
-            selection={formatCommentLabel(comment.selection)}
-            onMouseEnter={() => {
-              const p = path()
-              if (!p) return
-              file.setSelectedLines(p, comment.selection)
-            }}
-            onClick={() => {
-              const p = path()
-              if (!p) return
-              setCommenting(null)
-              setNote("openedComment", (current) => (current === comment.id ? null : comment.id))
-              file.setSelectedLines(p, comment.selection)
-            }}
-          />
-        )}
-      </For>
-      <Show when={note.commenting}>
-        {(range) => (
-          <Show when={note.draftTop !== undefined}>
-            <LineCommentEditor
-              top={note.draftTop}
-              value={note.draft}
-              selection={formatCommentLabel(range())}
-              onInput={(value) => setNote("draft", value)}
-              onCancel={cancelCommenting}
-              onSubmit={(value) => {
-                const p = path()
-                if (!p) return
-                addCommentToContext({ file: p, selection: range(), comment: value, origin: "file" })
-                setCommenting(null)
-              }}
-              onPopoverFocusOut={(e: FocusEvent) => {
-                const current = e.currentTarget as HTMLDivElement
-                const target = e.relatedTarget
-                if (target instanceof Node && current.contains(target)) return
-
-                setTimeout(() => {
-                  if (!document.activeElement || !current.contains(document.activeElement)) {
-                    cancelCommenting()
-                  }
-                }, 0)
-              }}
-            />
-          </Show>
-        )}
-      </Show>
    </div>
  )

@@ -526,36 +464,7 @@ export function FileTabContent(props: { tab: string }) {
        onScroll={handleScroll as any}
      >
        <Switch>
-          <Match when={state()?.loaded && isImage()}>
-            <div class="px-6 py-4 pb-40">
-              <img
-                src={imageDataUrl()}
-                alt={path()}
-                class="max-w-full"
-                onLoad={() => requestAnimationFrame(restoreScroll)}
-              />
-            </div>
-          </Match>
-          <Match when={state()?.loaded && isSvg()}>
-            <div class="flex flex-col gap-4 px-6 py-4">
-              {renderCode(svgContent() ?? "", "")}
-              <Show when={svgPreviewUrl()}>
-                <div class="flex justify-center pb-40">
-                  <img src={svgPreviewUrl()} alt={path()} class="max-w-full max-h-96" />
-                </div>
-              </Show>
-            </div>
-          </Match>
-          <Match when={state()?.loaded && isBinary()}>
-            <div class="h-full px-6 pb-42 flex flex-col items-center justify-center text-center gap-6">
-              <Mark class="w-14 opacity-10" />
-              <div class="flex flex-col gap-2 max-w-md">
-                <div class="text-14-semibold text-text-strong truncate">{path()?.split("/").pop()}</div>
-                <div class="text-14-regular text-text-weak">{language.t("session.files.binaryContent")}</div>
-              </div>
-            </div>
-          </Match>
-          <Match when={state()?.loaded}>{renderCode(contents(), "pb-40")}</Match>
+          <Match when={state()?.loaded}>{renderFile(contents())}</Match>
          <Match when={state()?.loading}>
            <div class="px-6 py-4 text-text-weak">{language.t("common.loading")}...</div>
          </Match>
--- a/packages/app/src/pages/session/message-timeline.tsx
+++ b/packages/app/src/pages/session/message-timeline.tsx
@@ -2,6 +2,7 @@ import { For, createEffect, createMemo, on, onCleanup, Show, type JSX } from "so
 import { createStore, produce } from "solid-js/store"
 import { useNavigate, useParams } from "@solidjs/router"
 import { Button } from "@opencode-ai/ui/button"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
@@ -9,8 +10,9 @@ import { Dialog } from "@opencode-ai/ui/dialog"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
 import { SessionTurn } from "@opencode-ai/ui/session-turn"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import type { UserMessage } from "@opencode-ai/sdk/v2"
+import type { Part, TextPart, UserMessage } from "@opencode-ai/sdk/v2"
 import { showToast } from "@opencode-ai/ui/toast"
+import { getFilename } from "@opencode-ai/util/path"
 import { shouldMarkBoundaryGesture, normalizeWheelDelta } from "@/pages/session/message-gesture"
 import { SessionContextUsage } from "@/components/session-context-usage"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -18,6 +20,35 @@ import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
+import { parseCommentNote, readCommentMetadata } from "@/utils/comment-note"
+
+type MessageComment = {
+  path: string
+  comment: string
+  selection?: {
+    startLine: number
+    endLine: number
+  }
+}
+
+const messageComments = (parts: Part[]): MessageComment[] =>
+  parts.flatMap((part) => {
+    if (part.type !== "text" || !(part as TextPart).synthetic) return []
+    const next = readCommentMetadata(part.metadata) ?? parseCommentNote(part.text)
+    if (!next) return []
+    return [
+      {
+        path: next.path,
+        comment: next.comment,
+        selection: next.selection
+          ? {
+              startLine: next.selection.startLine,
+              endLine: next.selection.endLine,
+            }
+          : undefined,
+      },
+    ]
+  })

 const boundaryTarget = (root: HTMLElement, target: EventTarget | null) => {
  const current = target instanceof Element ? target : undefined
@@ -522,34 +553,67 @@ export function MessageTimeline(props: {
              </div>
            </Show>
            <For each={props.renderedUserMessages}>
-              {(message) => (
-                <div
-                  id={props.anchor(message.id)}
-                  data-message-id={message.id}
-                  ref={(el) => {
-                    props.onRegisterMessage(el, message.id)
-                    onCleanup(() => props.onUnregisterMessage(message.id))
-                  }}
-                  classList={{
-                    "min-w-0 w-full max-w-full": true,
-                    "md:max-w-200 2xl:max-w-[1000px]": props.centered,
-                  }}
-                >
-                  <SessionTurn
-                    sessionID={sessionID() ?? ""}
-                    messageID={message.id}
-                    lastUserMessageID={props.lastUserMessageID}
-                    showReasoningSummaries={settings.general.showReasoningSummaries()}
-                    shellToolDefaultOpen={settings.general.shellToolPartsExpanded()}
-                    editToolDefaultOpen={settings.general.editToolPartsExpanded()}
-                    classes={{
-                      root: "min-w-0 w-full relative",
-                      content: "flex flex-col justify-between !overflow-visible",
-                      container: "w-full px-4 md:px-5",
+              {(message) => {
+                const comments = createMemo(() => messageComments(sync.data.part[message.id] ?? []))
+                return (
+                  <div
+                    id={props.anchor(message.id)}
+                    data-message-id={message.id}
+                    ref={(el) => {
+                      props.onRegisterMessage(el, message.id)
+                      onCleanup(() => props.onUnregisterMessage(message.id))
                    }}
-                  />
-                </div>
-              )}
+                    classList={{
+                      "min-w-0 w-full max-w-full": true,
+                      "md:max-w-200 2xl:max-w-[1000px]": props.centered,
+                    }}
+                  >
+                    <Show when={comments().length > 0}>
+                      <div class="w-full px-4 md:px-5 pb-2">
+                        <div class="ml-auto max-w-[82%] overflow-x-auto no-scrollbar">
+                          <div class="flex w-max min-w-full justify-end gap-2">
+                            <For each={comments()}>
+                              {(comment) => (
+                                <div class="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2">
+                                  <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
+                                    <FileIcon node={{ path: comment.path, type: "file" }} class="size-3.5 shrink-0" />
+                                    <span class="truncate">{getFilename(comment.path)}</span>
+                                    <Show when={comment.selection}>
+                                      {(selection) => (
+                                        <span class="shrink-0 text-text-weak">
+                                          {selection().startLine === selection().endLine
+                                            ? `:${selection().startLine}`
+                                            : `:${selection().startLine}-${selection().endLine}`}
+                                        </span>
+                                      )}
+                                    </Show>
+                                  </div>
+                                  <div class="pt-1 text-12-regular text-text-strong whitespace-pre-wrap break-words">
+                                    {comment.comment}
+                                  </div>
+                                </div>
+                              )}
+                            </For>
+                          </div>
+                        </div>
+                      </div>
+                    </Show>
+                    <SessionTurn
+                      sessionID={sessionID() ?? ""}
+                      messageID={message.id}
+                      lastUserMessageID={props.lastUserMessageID}
+                      showReasoningSummaries={settings.general.showReasoningSummaries()}
+                      shellToolDefaultOpen={settings.general.shellToolPartsExpanded()}
+                      editToolDefaultOpen={settings.general.editToolPartsExpanded()}
+                      classes={{
+                        root: "min-w-0 w-full relative",
+                        content: "flex flex-col justify-between !overflow-visible",
+                        container: "w-full px-4 md:px-5",
+                      }}
+                    />
+                  </div>
+                )
+              }}
            </For>
          </div>
        </ScrollView>
--- a/packages/app/src/pages/session/review-tab.tsx
+++ b/packages/app/src/pages/session/review-tab.tsx
@@ -1,7 +1,11 @@
 import { createEffect, on, onCleanup, type JSX } from "solid-js"
-import { createStore } from "solid-js/store"
 import type { FileDiff } from "@opencode-ai/sdk/v2"
 import { SessionReview } from "@opencode-ai/ui/session-review"
+import type {
+  SessionReviewCommentActions,
+  SessionReviewCommentDelete,
+  SessionReviewCommentUpdate,
+} from "@opencode-ai/ui/session-review"
 import type { SelectedLineRange } from "@/context/file"
 import { useSDK } from "@/context/sdk"
 import { useLayout } from "@/context/layout"
@@ -18,6 +22,9 @@ export interface SessionReviewTabProps {
  onDiffStyleChange?: (style: DiffStyle) => void
  onViewFile?: (file: string) => void
  onLineComment?: (comment: { file: string; selection: SelectedLineRange; comment: string; preview?: string }) => void
+  onLineCommentUpdate?: (comment: SessionReviewCommentUpdate) => void
+  onLineCommentDelete?: (comment: SessionReviewCommentDelete) => void
+  lineCommentActions?: SessionReviewCommentActions
  comments?: LineComment[]
  focusedComment?: { file: string; id: string } | null
  onFocusedCommentChange?: (focus: { file: string; id: string } | null) => void
@@ -31,38 +38,8 @@ export interface SessionReviewTabProps {
 }

 export function StickyAddButton(props: { children: JSX.Element }) {
-  const [state, setState] = createStore({ stuck: false })
-  let button: HTMLDivElement | undefined
-
-  createEffect(() => {
-    const node = button
-    if (!node) return
-
-    const scroll = node.parentElement
-    if (!scroll) return
-
-    const handler = () => {
-      const rect = node.getBoundingClientRect()
-      const scrollRect = scroll.getBoundingClientRect()
-      setState("stuck", rect.right >= scrollRect.right && scroll.scrollWidth > scroll.clientWidth)
-    }
-
-    scroll.addEventListener("scroll", handler, { passive: true })
-    const observer = new ResizeObserver(handler)
-    observer.observe(scroll)
-    handler()
-    onCleanup(() => {
-      scroll.removeEventListener("scroll", handler)
-      observer.disconnect()
-    })
-  })
-
  return (
-    <div
-      ref={button}
-      class="bg-background-base h-full shrink-0 sticky right-0 z-10 flex items-center justify-center border-b border-border-weak-base px-3"
-      classList={{ "border-l": state.stuck }}
-    >
+    <div class="bg-background-stronger h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pr-3">
      {props.children}
    </div>
  )
@@ -70,10 +47,11 @@ export function StickyAddButton(props: { children: JSX.Element }) {

 export function SessionReviewTab(props: SessionReviewTabProps) {
  let scroll: HTMLDivElement | undefined
-  let frame: number | undefined
-  let pending: { x: number; y: number } | undefined
+  let restoreFrame: number | undefined
+  let userInteracted = false

  const sdk = useSDK()
+  const layout = useLayout()

  const readFile = async (path: string) => {
    return sdk.client.file
@@ -85,48 +63,81 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
      })
  }

-  const restoreScroll = () => {
+  const handleInteraction = () => {
+    userInteracted = true
+  }
+
+  const doRestore = () => {
+    restoreFrame = undefined
    const el = scroll
-    if (!el) return
+    if (!el || !layout.ready() || userInteracted) return
+    if (el.clientHeight === 0 || el.clientWidth === 0) return

    const s = props.view().scroll("review")
-    if (!s) return
+    if (!s || (s.x === 0 && s.y === 0)) return

-    if (el.scrollTop !== s.y) el.scrollTop = s.y
-    if (el.scrollLeft !== s.x) el.scrollLeft = s.x
+    const maxY = Math.max(0, el.scrollHeight - el.clientHeight)
+    const maxX = Math.max(0, el.scrollWidth - el.clientWidth)
+
+    const targetY = Math.min(s.y, maxY)
+    const targetX = Math.min(s.x, maxX)
+
+    if (el.scrollTop !== targetY) el.scrollTop = targetY
+    if (el.scrollLeft !== targetX) el.scrollLeft = targetX
+  }
+
+  const queueRestore = () => {
+    if (userInteracted || restoreFrame !== undefined) return
+    restoreFrame = requestAnimationFrame(doRestore)
  }

  const handleScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
-    pending = {
-      x: event.currentTarget.scrollLeft,
-      y: event.currentTarget.scrollTop,
-    }
-    if (frame !== undefined) return
+    if (!layout.ready() || !userInteracted) return

-    frame = requestAnimationFrame(() => {
-      frame = undefined
+    const el = event.currentTarget
+    if (el.clientHeight === 0 || el.clientWidth === 0) return

-      const next = pending
-      pending = undefined
-      if (!next) return
-
-      props.view().setScroll("review", next)
+    props.view().setScroll("review", {
+      x: el.scrollLeft,
+      y: el.scrollTop,
    })
  }

  createEffect(
    on(
      () => props.diffs().length,
-      () => {
-        requestAnimationFrame(restoreScroll)
+      () => queueRestore(),
+      { defer: true },
+    ),
+  )
+
+  createEffect(
+    on(
+      () => props.diffStyle,
+      () => queueRestore(),
+      { defer: true },
+    ),
+  )
+
+  createEffect(
+    on(
+      () => layout.ready(),
+      (ready) => {
+        if (!ready) return
+        queueRestore()
      },
      { defer: true },
    ),
  )

  onCleanup(() => {
-    if (frame === undefined) return
-    cancelAnimationFrame(frame)
+    if (restoreFrame !== undefined) cancelAnimationFrame(restoreFrame)
+    if (scroll) {
+      scroll.removeEventListener("wheel", handleInteraction)
+      scroll.removeEventListener("pointerdown", handleInteraction)
+      scroll.removeEventListener("touchstart", handleInteraction)
+      scroll.removeEventListener("keydown", handleInteraction)
+    }
  })

  return (
@@ -135,11 +146,15 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
      empty={props.empty}
      scrollRef={(el) => {
        scroll = el
+        el.addEventListener("wheel", handleInteraction, { passive: true, capture: true })
+        el.addEventListener("pointerdown", handleInteraction, { passive: true, capture: true })
+        el.addEventListener("touchstart", handleInteraction, { passive: true, capture: true })
+        el.addEventListener("keydown", handleInteraction, { passive: true, capture: true })
        props.onScrollRef?.(el)
-        restoreScroll()
+        queueRestore()
      }}
      onScroll={handleScroll}
-      onDiffRendered={() => requestAnimationFrame(restoreScroll)}
+      onDiffRendered={queueRestore}
      open={props.view().review.open()}
      onOpenChange={props.view().review.setOpen}
      classes={{
@@ -154,6 +169,9 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
      focusedFile={props.focusedFile}
      readFile={readFile}
      onLineComment={props.onLineComment}
+      onLineCommentUpdate={props.onLineCommentUpdate}
+      onLineCommentDelete={props.onLineCommentDelete}
+      lineCommentActions={props.lineCommentActions}
      comments={props.comments}
      focusedComment={props.focusedComment}
      onFocusedCommentChange={props.onFocusedCommentChange}
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -4,7 +4,7 @@ import { createMediaQuery } from "@solid-primitives/media"
 import { useParams } from "@solidjs/router"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
+import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Mark } from "@opencode-ai/ui/logo"
 import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
@@ -145,8 +145,17 @@ export function SessionSidePanel(props: {

  const [store, setStore] = createStore({
    activeDraggable: undefined as string | undefined,
+    fileTreeScrolled: false,
  })

+  let changesEl: HTMLDivElement | undefined
+  let allEl: HTMLDivElement | undefined
+
+  const syncFileTreeScrolled = (el?: HTMLDivElement) => {
+    const next = (el?.scrollTop ?? 0) > 0
+    setStore("fileTreeScrolled", (current) => (current === next ? current : next))
+  }
+
  const handleDragStart = (event: unknown) => {
    const id = getDraggableId(event)
    if (!id) return
@@ -167,6 +176,11 @@ export function SessionSidePanel(props: {
    setStore("activeDraggable", undefined)
  }

+  createEffect(() => {
+    if (!layout.fileTree.opened()) return
+    syncFileTreeScrolled(fileTreeTab() === "changes" ? changesEl : allEl)
+  })
+
  createEffect(() => {
    if (!file.ready()) return

@@ -219,13 +233,11 @@ export function SessionSidePanel(props: {
                    }}
                  >
                    <Show when={reviewTab()}>
-                      <Tabs.Trigger value="review" classes={{ button: "!pl-6" }}>
+                      <Tabs.Trigger value="review">
                        <div class="flex items-center gap-1.5">
                          <div>{language.t("session.tab.review")}</div>
                          <Show when={hasReview()}>
-                            <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
-                              {reviewCount()}
-                            </div>
+                            <div>{reviewCount()}</div>
                          </Show>
                        </div>
                      </Tabs.Trigger>
@@ -234,7 +246,12 @@ export function SessionSidePanel(props: {
                      <Tabs.Trigger
                        value="context"
                        closeButton={
-                          <Tooltip value={language.t("common.closeTab")} placement="bottom">
+                          <TooltipKeybind
+                            title={language.t("common.closeTab")}
+                            keybind={command.keybind("tab.close")}
+                            placement="bottom"
+                            gutter={10}
+                          >
                            <IconButton
                              icon="close-small"
                              variant="ghost"
@@ -242,7 +259,7 @@ export function SessionSidePanel(props: {
                              onClick={() => tabs().close("context")}
                              aria-label={language.t("common.closeTab")}
                            />
-                          </Tooltip>
+                          </TooltipKeybind>
                        }
                        hideCloseButton
                        onMiddleClick={() => tabs().close("context")}
@@ -266,6 +283,7 @@ export function SessionSidePanel(props: {
                          icon="plus-small"
                          variant="ghost"
                          iconSize="large"
+                          class="!rounded-md"
                          onClick={() => dialog.show(() => <DialogSelectFile mode="files" onOpenFile={showAllFiles} />)}
                          aria-label={language.t("command.file.open")}
                        />
@@ -312,7 +330,7 @@ export function SessionSidePanel(props: {
                  {(tab) => {
                    const path = createMemo(() => file.pathFromTab(tab))
                    return (
-                      <div class="relative px-6 h-12 flex items-center bg-background-stronger border-x border-border-weak-base border-b border-b-transparent">
+                      <div data-component="tabs-drag-preview">
                        <Show when={path()}>{(p) => <FileVisual active path={p()} />}</Show>
                      </div>
                    )
@@ -336,7 +354,7 @@ export function SessionSidePanel(props: {
                class="h-full"
                data-scope="filetree"
              >
-                <Tabs.List>
+                <Tabs.List data-scrolled={store.fileTreeScrolled ? "" : undefined}>
                  <Tabs.Trigger value="changes" class="flex-1" classes={{ button: "w-full" }}>
                    {reviewCount()}{" "}
                    {language.t(reviewCount() === 1 ? "session.review.change.one" : "session.review.change.other")}
@@ -345,7 +363,12 @@ export function SessionSidePanel(props: {
                    {language.t("session.files.all")}
                  </Tabs.Trigger>
                </Tabs.List>
-                <Tabs.Content value="changes" class="bg-background-stronger px-3 py-0">
+                <Tabs.Content
+                  value="changes"
+                  ref={(el: HTMLDivElement) => (changesEl = el)}
+                  onScroll={(e: UIEvent & { currentTarget: HTMLDivElement }) => syncFileTreeScrolled(e.currentTarget)}
+                  class="bg-background-stronger px-3 py-0"
+                >
                  <Switch>
                    <Match when={hasReview()}>
                      <Show
@@ -374,7 +397,12 @@ export function SessionSidePanel(props: {
                    </Match>
                  </Switch>
                </Tabs.Content>
-                <Tabs.Content value="all" class="bg-background-stronger px-3 py-0">
+                <Tabs.Content
+                  value="all"
+                  ref={(el: HTMLDivElement) => (allEl = el)}
+                  onScroll={(e: UIEvent & { currentTarget: HTMLDivElement }) => syncFileTreeScrolled(e.currentTarget)}
+                  class="bg-background-stronger px-3 py-0"
+                >
                  <FileTree
                    path=""
                    modified={diffFiles()}
--- a/packages/app/src/utils/comment-note.ts
+++ b/packages/app/src/utils/comment-note.ts
@@ -0,0 +1,88 @@
+import type { FileSelection } from "@/context/file"
+
+export type PromptComment = {
+  path: string
+  selection?: FileSelection
+  comment: string
+  preview?: string
+  origin?: "review" | "file"
+}
+
+function selection(selection: unknown) {
+  if (!selection || typeof selection !== "object") return undefined
+  const startLine = Number((selection as FileSelection).startLine)
+  const startChar = Number((selection as FileSelection).startChar)
+  const endLine = Number((selection as FileSelection).endLine)
+  const endChar = Number((selection as FileSelection).endChar)
+  if (![startLine, startChar, endLine, endChar].every(Number.isFinite)) return undefined
+  return {
+    startLine,
+    startChar,
+    endLine,
+    endChar,
+  } satisfies FileSelection
+}
+
+export function createCommentMetadata(input: PromptComment) {
+  return {
+    opencodeComment: {
+      path: input.path,
+      selection: input.selection,
+      comment: input.comment,
+      preview: input.preview,
+      origin: input.origin,
+    },
+  }
+}
+
+export function readCommentMetadata(value: unknown) {
+  if (!value || typeof value !== "object") return
+  const meta = (value as { opencodeComment?: unknown }).opencodeComment
+  if (!meta || typeof meta !== "object") return
+  const path = (meta as { path?: unknown }).path
+  const comment = (meta as { comment?: unknown }).comment
+  if (typeof path !== "string" || typeof comment !== "string") return
+  const preview = (meta as { preview?: unknown }).preview
+  const origin = (meta as { origin?: unknown }).origin
+  return {
+    path,
+    selection: selection((meta as { selection?: unknown }).selection),
+    comment,
+    preview: typeof preview === "string" ? preview : undefined,
+    origin: origin === "review" || origin === "file" ? origin : undefined,
+  } satisfies PromptComment
+}
+
+export function formatCommentNote(input: { path: string; selection?: FileSelection; comment: string }) {
+  const start = input.selection ? Math.min(input.selection.startLine, input.selection.endLine) : undefined
+  const end = input.selection ? Math.max(input.selection.startLine, input.selection.endLine) : undefined
+  const range =
+    start === undefined || end === undefined
+      ? "this file"
+      : start === end
+        ? `line ${start}`
+        : `lines ${start} through ${end}`
+  return `The user made the following comment regarding ${range} of ${input.path}: ${input.comment}`
+}
+
+export function parseCommentNote(text: string) {
+  const match = text.match(
+    /^The user made the following comment regarding (this file|line (\d+)|lines (\d+) through (\d+)) of (.+?): ([\s\S]+)$/,
+  )
+  if (!match) return
+  const start = match[2] ? Number(match[2]) : match[3] ? Number(match[3]) : undefined
+  const end = match[2] ? Number(match[2]) : match[4] ? Number(match[4]) : undefined
+  return {
+    path: match[5],
+    selection:
+      start !== undefined && end !== undefined
+        ? {
+            startLine: start,
+            startChar: 0,
+            endLine: end,
+            endChar: 0,
+          }
+        : undefined,
+    comment: match[6],
+  } satisfies PromptComment
+}
--- a/packages/enterprise/src/routes/share/[shareID].tsx
+++ b/packages/enterprise/src/routes/share/[shareID].tsx
@@ -2,8 +2,7 @@ import { FileDiff, Message, Model, Part, Session, SessionStatus, UserMessage } f
 import { SessionTurn } from "@opencode-ai/ui/session-turn"
 import { SessionReview } from "@opencode-ai/ui/session-review"
 import { DataProvider } from "@opencode-ai/ui/context"
-import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
-import { CodeComponentProvider } from "@opencode-ai/ui/context/code"
+import { FileComponentProvider } from "@opencode-ai/ui/context/file"
 import { WorkerPoolProvider } from "@opencode-ai/ui/context/worker-pool"
 import { createAsync, query, useParams } from "@solidjs/router"
 import { createEffect, createMemo, ErrorBoundary, For, Match, Show, Switch } from "solid-js"
@@ -22,14 +21,12 @@ import NotFound from "../[...404]"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { MessageNav } from "@opencode-ai/ui/message-nav"
 import { preloadMultiFileDiff, PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
-import { Diff as SSRDiff } from "@opencode-ai/ui/diff-ssr"
+import { FileSSR } from "@opencode-ai/ui/file-ssr"
 import { clientOnly } from "@solidjs/start"
 import { type IconName } from "@opencode-ai/ui/icons/provider"
 import { Meta, Title } from "@solidjs/meta"
 import { Base64 } from "js-base64"

-const ClientOnlyDiff = clientOnly(() => import("@opencode-ai/ui/diff").then((m) => ({ default: m.Diff })))
-const ClientOnlyCode = clientOnly(() => import("@opencode-ai/ui/code").then((m) => ({ default: m.Code })))
 const ClientOnlyWorkerPoolProvider = clientOnly(() =>
  import("@opencode-ai/ui/pierre/worker").then((m) => ({
    default: (props: { children: any }) => (
@@ -218,252 +215,244 @@ export default function () {
              <Meta property="og:image" content={ogImage()} />
              <Meta name="twitter:image" content={ogImage()} />
              <ClientOnlyWorkerPoolProvider>
-                <DiffComponentProvider component={ClientOnlyDiff}>
-                  <CodeComponentProvider component={ClientOnlyCode}>
-                    <DataProvider data={data()} directory={info().directory}>
-                      {iife(() => {
-                        const [store, setStore] = createStore({
-                          messageId: undefined as string | undefined,
-                        })
-                        const messages = createMemo(() =>
-                          data().sessionID
-                            ? (data().message[data().sessionID]?.filter((m) => m.role === "user") ?? []).sort(
-                                (a, b) => a.time.created - b.time.created,
-                              )
-                            : [],
-                        )
-                        const firstUserMessage = createMemo(() => messages().at(0))
-                        const activeMessage = createMemo(
-                          () => messages().find((m) => m.id === store.messageId) ?? firstUserMessage(),
-                        )
-                        function setActiveMessage(message: UserMessage | undefined) {
-                          if (message) {
-                            setStore("messageId", message.id)
-                          } else {
-                            setStore("messageId", undefined)
-                          }
+                <FileComponentProvider component={FileSSR}>
+                  <DataProvider data={data()} directory={info().directory}>
+                    {iife(() => {
+                      const [store, setStore] = createStore({
+                        messageId: undefined as string | undefined,
+                      })
+                      const messages = createMemo(() =>
+                        data().sessionID
+                          ? (data().message[data().sessionID]?.filter((m) => m.role === "user") ?? []).sort(
+                              (a, b) => a.time.created - b.time.created,
+                            )
+                          : [],
+                      )
+                      const firstUserMessage = createMemo(() => messages().at(0))
+                      const activeMessage = createMemo(
+                        () => messages().find((m) => m.id === store.messageId) ?? firstUserMessage(),
+                      )
+                      function setActiveMessage(message: UserMessage | undefined) {
+                        if (message) {
+                          setStore("messageId", message.id)
+                        } else {
+                          setStore("messageId", undefined)
                        }
-                        const provider = createMemo(() => activeMessage()?.model?.providerID)
-                        const modelID = createMemo(() => activeMessage()?.model?.modelID)
-                        const model = createMemo(() => data().model[data().sessionID]?.find((m) => m.id === modelID()))
-                        const diffs = createMemo(() => {
-                          const diffs = data().session_diff[data().sessionID] ?? []
-                          const preloaded = data().session_diff_preload[data().sessionID] ?? []
-                          return diffs.map((diff) => ({
-                            ...diff,
-                            preloaded: preloaded.find((d) => d.newFile.name === diff.file),
-                          }))
-                        })
-                        const splitDiffs = createMemo(() => {
-                          const diffs = data().session_diff[data().sessionID] ?? []
-                          const preloaded = data().session_diff_preload_split[data().sessionID] ?? []
-                          return diffs.map((diff) => ({
-                            ...diff,
-                            preloaded: preloaded.find((d) => d.newFile.name === diff.file),
-                          }))
-                        })
+                      }
+                      const provider = createMemo(() => activeMessage()?.model?.providerID)
+                      const modelID = createMemo(() => activeMessage()?.model?.modelID)
+                      const model = createMemo(() => data().model[data().sessionID]?.find((m) => m.id === modelID()))
+                      const diffs = createMemo(() => {
+                        const diffs = data().session_diff[data().sessionID] ?? []
+                        const preloaded = data().session_diff_preload[data().sessionID] ?? []
+                        return diffs.map((diff) => ({
+                          ...diff,
+                          preloaded: preloaded.find((d) => d.newFile.name === diff.file),
+                        }))
+                      })
+                      const splitDiffs = createMemo(() => {
+                        const diffs = data().session_diff[data().sessionID] ?? []
+                        const preloaded = data().session_diff_preload_split[data().sessionID] ?? []
+                        return diffs.map((diff) => ({
+                          ...diff,
+                          preloaded: preloaded.find((d) => d.newFile.name === diff.file),
+                        }))
+                      })

-                        const title = () => (
-                          <div class="flex flex-col gap-4">
-                            <div class="flex flex-col gap-2 sm:flex-row sm:gap-4 sm:items-center sm:h-8 justify-start self-stretch">
-                              <div class="pl-[2.5px] pr-2 flex items-center gap-1.75 bg-surface-strong shadow-xs-border-base w-fit">
-                                <Mark class="shrink-0 w-3 my-0.5" />
-                                <div class="text-12-mono text-text-base">v{info().version}</div>
-                              </div>
-                              <div class="flex gap-4 items-center">
-                                <div class="flex gap-2 items-center">
-                                  <ProviderIcon
-                                    id={provider() as IconName}
-                                    class="size-3.5 shrink-0 text-icon-strong-base"
-                                  />
-                                  <div class="text-12-regular text-text-base">{model()?.name ?? modelID()}</div>
-                                </div>
-                                <div class="text-12-regular text-text-weaker">
-                                  {DateTime.fromMillis(info().time.created).toFormat("dd MMM yyyy, HH:mm")}
-                                </div>
-                              </div>
+                      const title = () => (
+                        <div class="flex flex-col gap-4">
+                          <div class="flex flex-col gap-2 sm:flex-row sm:gap-4 sm:items-center sm:h-8 justify-start self-stretch">
+                            <div class="pl-[2.5px] pr-2 flex items-center gap-1.75 bg-surface-strong shadow-xs-border-base w-fit">
+                              <Mark class="shrink-0 w-3 my-0.5" />
+                              <div class="text-12-mono text-text-base">v{info().version}</div>
                            </div>
-                            <div class="text-left text-16-medium text-text-strong">{info().title}</div>
-                          </div>
-                        )
-
-                        const turns = () => (
-                          <div class="relative mt-2 pb-8 min-w-0 w-full h-full overflow-y-auto no-scrollbar">
-                            <div class="px-4 py-6">{title()}</div>
-                            <div class="flex flex-col gap-15 items-start justify-start mt-4">
-                              <For each={messages()}>
-                                {(message) => (
-                                  <SessionTurn
-                                    sessionID={data().sessionID}
-                                    messageID={message.id}
-                                    classes={{
-                                      root: "min-w-0 w-full relative",
-                                      content: "flex flex-col justify-between !overflow-visible",
-                                      container: "px-4",
-                                    }}
-                                  />
-                                )}
-                              </For>
-                            </div>
-                            <div class="px-4 flex items-center justify-center pt-20 pb-8 shrink-0">
-                              <Logo class="w-58.5 opacity-12" />
+                            <div class="flex gap-4 items-center">
+                              <div class="flex gap-2 items-center">
+                                <ProviderIcon
+                                  id={provider() as IconName}
+                                  class="size-3.5 shrink-0 text-icon-strong-base"
+                                />
+                                <div class="text-12-regular text-text-base">{model()?.name ?? modelID()}</div>
+                              </div>
+                              <div class="text-12-regular text-text-weaker">
+                                {DateTime.fromMillis(info().time.created).toFormat("dd MMM yyyy, HH:mm")}
+                              </div>
                            </div>
                          </div>
-                        )
+                          <div class="text-left text-16-medium text-text-strong">{info().title}</div>
+                        </div>
+                      )

-                        const wide = createMemo(() => diffs().length === 0)
+                      const turns = () => (
+                        <div class="relative mt-2 pb-8 min-w-0 w-full h-full overflow-y-auto no-scrollbar">
+                          <div class="px-4 py-6">{title()}</div>
+                          <div class="flex flex-col gap-15 items-start justify-start mt-4">
+                            <For each={messages()}>
+                              {(message) => (
+                                <SessionTurn
+                                  sessionID={data().sessionID}
+                                  messageID={message.id}
+                                  classes={{
+                                    root: "min-w-0 w-full relative",
+                                    content: "flex flex-col justify-between !overflow-visible",
+                                    container: "px-4",
+                                  }}
+                                />
+                              )}
+                            </For>
+                          </div>
+                          <div class="px-4 flex items-center justify-center pt-20 pb-8 shrink-0">
+                            <Logo class="w-58.5 opacity-12" />
+                          </div>
+                        </div>
+                      )

-                        return (
-                          <div class="relative bg-background-stronger w-screen h-screen overflow-hidden flex flex-col">
-                            <header class="h-12 px-6 py-2 flex items-center justify-between self-stretch bg-background-base border-b border-border-weak-base">
-                              <div class="">
-                                <a href="https://opencode.ai">
-                                  <Mark />
-                                </a>
-                              </div>
-                              <div class="flex gap-3 items-center">
-                                <IconButton
-                                  as={"a"}
-                                  href="https://github.com/anomalyco/opencode"
-                                  target="_blank"
-                                  icon="github"
-                                  variant="ghost"
-                                />
-                                <IconButton
-                                  as={"a"}
-                                  href="https://opencode.ai/discord"
-                                  target="_blank"
-                                  icon="discord"
-                                  variant="ghost"
-                                />
-                              </div>
-                            </header>
-                            <div class="select-text flex flex-col flex-1 min-h-0">
+                      const wide = createMemo(() => diffs().length === 0)
+
+                      return (
+                        <div class="relative bg-background-stronger w-screen h-screen overflow-hidden flex flex-col">
+                          <header class="h-12 px-6 py-2 flex items-center justify-between self-stretch bg-background-base border-b border-border-weak-base">
+                            <div class="">
+                              <a href="https://opencode.ai">
+                                <Mark />
+                              </a>
+                            </div>
+                            <div class="flex gap-3 items-center">
+                              <IconButton
+                                as={"a"}
+                                href="https://github.com/anomalyco/opencode"
+                                target="_blank"
+                                icon="github"
+                                variant="ghost"
+                              />
+                              <IconButton
+                                as={"a"}
+                                href="https://opencode.ai/discord"
+                                target="_blank"
+                                icon="discord"
+                                variant="ghost"
+                              />
+                            </div>
+                          </header>
+                          <div class="select-text flex flex-col flex-1 min-h-0">
+                            <div
+                              classList={{
+                                "hidden w-full flex-1 min-h-0": true,
+                                "md:flex": wide(),
+                                "lg:flex": !wide(),
+                              }}
+                            >
                              <div
                                classList={{
-                                  "hidden w-full flex-1 min-h-0": true,
-                                  "md:flex": wide(),
-                                  "lg:flex": !wide(),
+                                  "@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full": true,
                                }}
                              >
                                <div
                                  classList={{
-                                    "@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full": true,
+                                    "w-full flex justify-start items-start min-w-0 px-6": true,
                                  }}
                                >
-                                  <div
-                                    classList={{
-                                      "w-full flex justify-start items-start min-w-0 px-6": true,
+                                  {title()}
+                                </div>
+                                <div class="flex items-start justify-start h-full min-h-0">
+                                  <Show when={messages().length > 1}>
+                                    <MessageNav
+                                      class="sticky top-0 shrink-0 py-2 pl-4"
+                                      messages={messages()}
+                                      current={activeMessage()}
+                                      size="compact"
+                                      onMessageSelect={setActiveMessage}
+                                    />
+                                  </Show>
+                                  <SessionTurn
+                                    sessionID={data().sessionID}
+                                    messageID={store.messageId ?? firstUserMessage()!.id!}
+                                    classes={{
+                                      root: "grow",
+                                      content: "flex flex-col justify-between",
+                                      container: "w-full pb-20 px-6",
                                    }}
                                  >
-                                    {title()}
-                                  </div>
-                                  <div class="flex items-start justify-start h-full min-h-0">
-                                    <Show when={messages().length > 1}>
-                                      <MessageNav
-                                        class="sticky top-0 shrink-0 py-2 pl-4"
-                                        messages={messages()}
-                                        current={activeMessage()}
-                                        size="compact"
-                                        onMessageSelect={setActiveMessage}
-                                      />
-                                    </Show>
-                                    <SessionTurn
-                                      sessionID={data().sessionID}
-                                      messageID={store.messageId ?? firstUserMessage()!.id!}
-                                      classes={{
-                                        root: "grow",
-                                        content: "flex flex-col justify-between",
-                                        container: "w-full pb-20 px-6",
-                                      }}
-                                    >
-                                      <div
-                                        classList={{ "w-full flex items-center justify-center pb-8 shrink-0": true }}
-                                      >
-                                        <Logo class="w-58.5 opacity-12" />
-                                      </div>
-                                    </SessionTurn>
-                                  </div>
+                                    <div classList={{ "w-full flex items-center justify-center pb-8 shrink-0": true }}>
+                                      <Logo class="w-58.5 opacity-12" />
+                                    </div>
+                                  </SessionTurn>
                                </div>
-                                <Show when={diffs().length > 0}>
-                                  <DiffComponentProvider component={SSRDiff}>
-                                    <div class="@container relative grow pt-14 flex-1 min-h-0 border-l border-border-weak-base">
+                              </div>
+                              <Show when={diffs().length > 0}>
+                                <div class="@container relative grow pt-14 flex-1 min-h-0 border-l border-border-weak-base">
+                                  <SessionReview
+                                    class="@4xl:hidden"
+                                    diffs={diffs()}
+                                    classes={{
+                                      root: "pb-20",
+                                      header: "px-6",
+                                      container: "px-6",
+                                    }}
+                                  />
+                                  <SessionReview
+                                    split
+                                    class="hidden @4xl:flex"
+                                    diffs={splitDiffs()}
+                                    classes={{
+                                      root: "pb-20",
+                                      header: "px-6",
+                                      container: "px-6",
+                                    }}
+                                  />
+                                </div>
+                              </Show>
+                            </div>
+                            <Switch>
+                              <Match when={diffs().length > 0}>
+                                <Tabs classList={{ "md:hidden": wide(), "lg:hidden": !wide() }}>
+                                  <Tabs.List>
+                                    <Tabs.Trigger value="session" class="w-1/2" classes={{ button: "w-full" }}>
+                                      Session
+                                    </Tabs.Trigger>
+                                    <Tabs.Trigger
+                                      value="review"
+                                      class="w-1/2 !border-r-0"
+                                      classes={{ button: "w-full" }}
+                                    >
+                                      {diffs().length} Files Changed
+                                    </Tabs.Trigger>
+                                  </Tabs.List>
+                                  <Tabs.Content value="session" class="!overflow-hidden">
+                                    {turns()}
+                                  </Tabs.Content>
+                                  <Tabs.Content
+                                    forceMount
+                                    value="review"
+                                    class="!overflow-hidden hidden data-[selected]:block"
+                                  >
+                                    <div class="relative h-full pt-8 overflow-y-auto no-scrollbar">
                                      <SessionReview
-                                        class="@4xl:hidden"
                                        diffs={diffs()}
                                        classes={{
                                          root: "pb-20",
-                                          header: "px-6",
-                                          container: "px-6",
-                                        }}
-                                      />
-                                      <SessionReview
-                                        split
-                                        class="hidden @4xl:flex"
-                                        diffs={splitDiffs()}
-                                        classes={{
-                                          root: "pb-20",
-                                          header: "px-6",
-                                          container: "px-6",
+                                          header: "px-4",
+                                          container: "px-4",
                                        }}
                                      />
                                    </div>
-                                  </DiffComponentProvider>
-                                </Show>
-                              </div>
-                              <Switch>
-                                <Match when={diffs().length > 0}>
-                                  <Tabs classList={{ "md:hidden": wide(), "lg:hidden": !wide() }}>
-                                    <Tabs.List>
-                                      <Tabs.Trigger value="session" class="w-1/2" classes={{ button: "w-full" }}>
-                                        Session
-                                      </Tabs.Trigger>
-                                      <Tabs.Trigger
-                                        value="review"
-                                        class="w-1/2 !border-r-0"
-                                        classes={{ button: "w-full" }}
-                                      >
-                                        {diffs().length} Files Changed
-                                      </Tabs.Trigger>
-                                    </Tabs.List>
-                                    <Tabs.Content value="session" class="!overflow-hidden">
-                                      {turns()}
-                                    </Tabs.Content>
-                                    <Tabs.Content
-                                      forceMount
-                                      value="review"
-                                      class="!overflow-hidden hidden data-[selected]:block"
-                                    >
-                                      <div class="relative h-full pt-8 overflow-y-auto no-scrollbar">
-                                        <DiffComponentProvider component={SSRDiff}>
-                                          <SessionReview
-                                            diffs={diffs()}
-                                            classes={{
-                                              root: "pb-20",
-                                              header: "px-4",
-                                              container: "px-4",
-                                            }}
-                                          />
-                                        </DiffComponentProvider>
-                                      </div>
-                                    </Tabs.Content>
-                                  </Tabs>
-                                </Match>
-                                <Match when={true}>
-                                  <div
-                                    classList={{ "!overflow-hidden": true, "md:hidden": wide(), "lg:hidden": !wide() }}
-                                  >
-                                    {turns()}
-                                  </div>
-                                </Match>
-                              </Switch>
-                            </div>
+                                  </Tabs.Content>
+                                </Tabs>
+                              </Match>
+                              <Match when={true}>
+                                <div
+                                  classList={{ "!overflow-hidden": true, "md:hidden": wide(), "lg:hidden": !wide() }}
+                                >
+                                  {turns()}
+                                </div>
+                              </Match>
+                            </Switch>
                          </div>
-                        )
-                      })}
-                    </DataProvider>
-                  </CodeComponentProvider>
-                </DiffComponentProvider>
+                        </div>
+                      )
+                    })}
+                  </DataProvider>
+                </FileComponentProvider>
              </ClientOnlyWorkerPoolProvider>
            </>
          )
--- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
@@ -152,7 +152,7 @@ export function Session() {
  const [timestamps, setTimestamps] = kv.signal<"hide" | "show">("timestamps", "hide")
  const [showDetails, setShowDetails] = kv.signal("tool_details_visibility", true)
  const [showAssistantMetadata, setShowAssistantMetadata] = kv.signal("assistant_metadata_visibility", true)
-  const [showScrollbar, setShowScrollbar] = kv.signal("scrollbar_visible", true)
+  const [showScrollbar, setShowScrollbar] = kv.signal("scrollbar_visible", false)
  const [showHeader, setShowHeader] = kv.signal("header_visible", true)
  const [diffWrapMode] = kv.signal<"word" | "none">("diff_wrap_mode", "word")
  const [animationsEnabled, setAnimationsEnabled] = kv.signal("animations_enabled", true)
--- a/packages/opencode/src/pty/index.ts
+++ b/packages/opencode/src/pty/index.ts
@@ -23,60 +23,6 @@ export namespace Pty {
    close: (code?: number, reason?: string) => void
  }

-  type Subscriber = {
-    id: number
-    token: unknown
-  }
-
-  const sockets = new WeakMap<object, number>()
-  const owners = new WeakMap<object, string>()
-  let socketCounter = 0
-
-  const tagSocket = (ws: Socket) => {
-    if (!ws || typeof ws !== "object") return
-    const next = (socketCounter = (socketCounter + 1) % Number.MAX_SAFE_INTEGER)
-    sockets.set(ws, next)
-    return next
-  }
-
-  const token = (ws: Socket) => {
-    const data = ws.data
-    if (data === undefined) return
-    if (data === null) return
-    if (typeof data !== "object") return data
-
-    const id = (data as { connId?: unknown }).connId
-    if (typeof id === "number" || typeof id === "string") return id
-
-    const href = (data as { href?: unknown }).href
-    if (typeof href === "string") return href
-
-    const url = (data as { url?: unknown }).url
-    if (typeof url === "string") return url
-    if (url && typeof url === "object") {
-      const href = (url as { href?: unknown }).href
-      if (typeof href === "string") return href
-      return url
-    }
-
-    const events = (data as { events?: unknown }).events
-    if (typeof events === "number" || typeof events === "string") return events
-    if (events && typeof events === "object") {
-      const id = (events as { connId?: unknown }).connId
-      if (typeof id === "number" || typeof id === "string") return id
-
-      const id2 = (events as { connection?: unknown }).connection
-      if (typeof id2 === "number" || typeof id2 === "string") return id2
-
-      const id3 = (events as { id?: unknown }).id
-      if (typeof id3 === "number" || typeof id3 === "string") return id3
-
-      return events
-    }
-
-    return data
-  }
-
  // WebSocket control frame: 0x00 + UTF-8 JSON.
  const meta = (cursor: number) => {
    const json = JSON.stringify({ cursor })
@@ -141,7 +87,7 @@ export namespace Pty {
    buffer: string
    bufferCursor: number
    cursor: number
-    subscribers: Map<Socket, Subscriber>
+    subscribers: Map<unknown, Socket>
  }

  const state = Instance.state(
@@ -151,9 +97,9 @@ export namespace Pty {
        try {
          session.process.kill()
        } catch {}
-        for (const ws of session.subscribers.keys()) {
+        for (const [key, ws] of session.subscribers.entries()) {
          try {
-            ws.close()
+            if (ws.data === key) ws.close()
          } catch {
            // ignore
          }
@@ -224,26 +170,21 @@ export namespace Pty {
    ptyProcess.onData((chunk) => {
      session.cursor += chunk.length

-      for (const [ws, sub] of session.subscribers) {
+      for (const [key, ws] of session.subscribers.entries()) {
        if (ws.readyState !== 1) {
-          session.subscribers.delete(ws)
+          session.subscribers.delete(key)
          continue
        }

-        if (typeof ws === "object" && sockets.get(ws) !== sub.id) {
-          session.subscribers.delete(ws)
-          continue
-        }
-
-        if (token(ws) !== sub.token) {
-          session.subscribers.delete(ws)
+        if (ws.data !== key) {
+          session.subscribers.delete(key)
          continue
        }

        try {
          ws.send(chunk)
        } catch {
-          session.subscribers.delete(ws)
+          session.subscribers.delete(key)
        }
      }

@@ -256,9 +197,9 @@ export namespace Pty {
    ptyProcess.onExit(({ exitCode }) => {
      log.info("session exited", { id, exitCode })
      session.info.status = "exited"
-      for (const ws of session.subscribers.keys()) {
+      for (const [key, ws] of session.subscribers.entries()) {
        try {
-          ws.close()
+          if (ws.data === key) ws.close()
        } catch {
          // ignore
        }
@@ -291,9 +232,9 @@ export namespace Pty {
    try {
      session.process.kill()
    } catch {}
-    for (const ws of session.subscribers.keys()) {
+    for (const [key, ws] of session.subscribers.entries()) {
      try {
-        ws.close()
+        if (ws.data === key) ws.close()
      } catch {
        // ignore
      }
@@ -325,23 +266,16 @@ export namespace Pty {
    }
    log.info("client connected to session", { id })

-    const socketId = tagSocket(ws)
-    if (socketId === undefined) {
-      ws.close()
-      return
-    }
+    // Use ws.data as the unique key for this connection lifecycle.
+    // If ws.data is undefined, fallback to ws object.
+    const connectionKey = ws.data && typeof ws.data === "object" ? ws.data : ws

-    const previous = owners.get(ws)
-    if (previous && previous !== id) {
-      state().get(previous)?.subscribers.delete(ws)
-    }
-
-    owners.set(ws, id)
-    session.subscribers.set(ws, { id: socketId, token: token(ws) })
+    // Optionally cleanup if the key somehow exists
+    session.subscribers.delete(connectionKey)
+    session.subscribers.set(connectionKey, ws)

    const cleanup = () => {
-      session.subscribers.delete(ws)
-      if (owners.get(ws) === id) owners.delete(ws)
+      session.subscribers.delete(connectionKey)
    }

    const start = session.bufferCursor
--- a/packages/opencode/test/pty/pty-output-isolation.test.ts
+++ b/packages/opencode/test/pty/pty-output-isolation.test.ts
@@ -98,7 +98,7 @@ describe("pty", () => {
    })
  })

-  test("does not leak output when socket data mutates in-place", async () => {
+  test("treats in-place socket data mutation as the same connection", async () => {
    await using dir = await tmpdir({ git: true })

    await Instance.provide({
@@ -106,15 +106,14 @@ describe("pty", () => {
      fn: async () => {
        const a = await Pty.create({ command: "cat", title: "a" })
        try {
-          const outA: string[] = []
-          const outB: string[] = []
+          const out: string[] = []

          const ctx = { connId: 1 }
          const ws = {
            readyState: 1,
            data: ctx,
            send: (data: unknown) => {
-              outA.push(typeof data === "string" ? data : Buffer.from(data as Uint8Array).toString("utf8"))
+              out.push(typeof data === "string" ? data : Buffer.from(data as Uint8Array).toString("utf8"))
            },
            close: () => {
              // no-op
@@ -122,19 +121,16 @@ describe("pty", () => {
          }

          Pty.connect(a.id, ws as any)
-          outA.length = 0
+          out.length = 0

-          // Simulate the runtime mutating per-connection data without
-          // swapping the reference (ws.data stays the same object).
+          // Mutating fields on ws.data should not look like a new
+          // connection lifecycle when the object identity stays stable.
          ctx.connId = 2
-          ws.send = (data: unknown) => {
-            outB.push(typeof data === "string" ? data : Buffer.from(data as Uint8Array).toString("utf8"))
-          }

          Pty.write(a.id, "AAA\n")
          await Bun.sleep(100)

-          expect(outB.join("")).not.toContain("AAA")
+          expect(out.join("")).toContain("AAA")
        } finally {
          await Pty.remove(a.id)
        }
--- a/packages/storybook/.gitignore
+++ b/packages/storybook/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+storybook-static/
+.storybook-cache/
--- a/packages/storybook/.storybook/main.ts
+++ b/packages/storybook/.storybook/main.ts
@@ -0,0 +1,37 @@
+import { defineMain } from "storybook-solidjs-vite"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const here = path.dirname(fileURLToPath(import.meta.url))
+const ui = path.resolve(here, "../../ui")
+
+export default defineMain({
+  framework: {
+    name: "storybook-solidjs-vite",
+    options: {},
+  },
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-docs",
+    "@storybook/addon-links",
+    "@storybook/addon-a11y",
+    "@storybook/addon-vitest",
+  ],
+  stories: ["../../ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  async viteFinal(config) {
+    const { mergeConfig, searchForWorkspaceRoot } = await import("vite")
+    return mergeConfig(config, {
+      resolve: {
+        dedupe: ["solid-js", "solid-js/web", "@solidjs/meta"],
+      },
+      worker: {
+        format: "es",
+      },
+      server: {
+        fs: {
+          allow: [searchForWorkspaceRoot(process.cwd()), ui],
+        },
+      },
+    })
+  },
+})
--- a/packages/storybook/.storybook/manager.ts
+++ b/packages/storybook/.storybook/manager.ts
@@ -0,0 +1,11 @@
+import { addons, types } from "storybook/manager-api"
+import { ThemeTool } from "./theme-tool"
+
+addons.register("opencode/theme-toggle", () => {
+  addons.add("opencode/theme-toggle/tool", {
+    type: types.TOOL,
+    title: "Theme",
+    match: ({ viewMode }) => viewMode === "story" || viewMode === "docs",
+    render: ThemeTool,
+  })
+})
--- a/packages/storybook/.storybook/preview.tsx
+++ b/packages/storybook/.storybook/preview.tsx
@@ -0,0 +1,106 @@
+import "@opencode-ai/ui/styles"
+
+import { createEffect, onCleanup, onMount } from "solid-js"
+import addonA11y from "@storybook/addon-a11y"
+import addonDocs from "@storybook/addon-docs"
+import { MetaProvider } from "@solidjs/meta"
+import { addons } from "storybook/preview-api"
+import { GLOBALS_UPDATED } from "storybook/internal/core-events"
+import { createJSXDecorator, definePreview } from "storybook-solidjs-vite"
+import { Code } from "@opencode-ai/ui/code"
+import { CodeComponentProvider } from "@opencode-ai/ui/context/code"
+import { DialogProvider } from "@opencode-ai/ui/context/dialog"
+import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
+import { MarkedProvider } from "@opencode-ai/ui/context/marked"
+import { Diff } from "@opencode-ai/ui/diff"
+import { ThemeProvider, useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
+import { Font } from "@opencode-ai/ui/font"
+
+function resolveScheme(value: unknown): ColorScheme {
+  if (value === "light" || value === "dark" || value === "system") return value
+  return "system"
+}
+
+const channel = addons.getChannel()
+
+const Scheme = (props: { value?: unknown }) => {
+  const theme = useTheme()
+  const apply = (value?: unknown) => {
+    theme.setColorScheme(resolveScheme(value))
+  }
+  createEffect(() => {
+    apply(props.value)
+  })
+  createEffect(() => {
+    const root = document.documentElement
+    root.classList.remove("light", "dark")
+    root.classList.add(theme.mode())
+  })
+  onMount(() => {
+    const handler = (event: { globals?: Record<string, unknown> }) => {
+      apply(event.globals?.theme)
+    }
+    channel.on(GLOBALS_UPDATED, handler)
+    onCleanup(() => channel.off(GLOBALS_UPDATED, handler))
+  })
+  return null
+}
+
+const frame = createJSXDecorator((Story, context) => {
+  const override = context.parameters?.themes?.themeOverride
+  const selected = context.globals?.theme
+  const pick = override === "light" || override === "dark" ? override : selected
+  const scheme = resolveScheme(pick)
+  return (
+    <MetaProvider>
+      <Font />
+      <ThemeProvider>
+        <Scheme value={scheme} />
+        <DialogProvider>
+          <MarkedProvider>
+            <DiffComponentProvider component={Diff}>
+              <CodeComponentProvider component={Code}>
+                <div
+                  style={{
+                    "min-height": "100vh",
+                    padding: "24px",
+                    "background-color": "var(--background-base)",
+                    color: "var(--text-base)",
+                  }}
+                >
+                  <Story />
+                </div>
+              </CodeComponentProvider>
+            </DiffComponentProvider>
+          </MarkedProvider>
+        </DialogProvider>
+      </ThemeProvider>
+    </MetaProvider>
+  )
+})
+
+export default definePreview({
+  addons: [addonDocs(), addonA11y()],
+  decorators: [frame],
+  globalTypes: {
+    theme: {
+      name: "Theme",
+      description: "Global theme",
+      defaultValue: "light",
+    },
+  },
+  parameters: {
+    actions: {
+      argTypesRegex: "^on.*",
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      test: "todo",
+    },
+  },
+})
--- a/packages/storybook/.storybook/theme-tool.ts
+++ b/packages/storybook/.storybook/theme-tool.ts
@@ -0,0 +1,21 @@
+import { createElement } from "react"
+import { useGlobals } from "storybook/manager-api"
+import { ToggleButton } from "storybook/internal/components"
+
+export function ThemeTool() {
+  const [globals, updateGlobals] = useGlobals()
+  const mode = globals.theme === "dark" ? "dark" : "light"
+  const toggle = () => {
+    const next = mode === "dark" ? "light" : "dark"
+    updateGlobals({ theme: next })
+  }
+  return createElement(
+    ToggleButton,
+    {
+      title: "Toggle theme",
+      active: mode === "dark",
+      onClick: toggle,
+    },
+    mode === "dark" ? "Dark" : "Light",
+  )
+}
--- a/packages/storybook/debug-storybook.log
+++ b/packages/storybook/debug-storybook.log
@@ -0,0 +1,307 @@
+[14:25:48.462] [INFO] storybook v10.2.10
+[14:25:48.749] [DEBUG] Getting package.json info for /Users/davidhill/Documents/Local/opencode/packages/storybook/package.json...
+[14:25:48.997] [INFO] Starting...
+[14:25:49.095] [DEBUG] Starting preview..
+[14:25:49.098] [WARN] 🚨 Unable to index files:
+- ./../ui/src/components/accordion.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/accordion.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/app-icon.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/app-icon.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/avatar.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/avatar.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/basic-tool.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/basic-tool.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/checkbox.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/checkbox.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/code.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/code.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/collapsible.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/collapsible.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/context-menu.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/context-menu.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/dialog.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/dialog.stories.tsx (line 10, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/diff-changes.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/diff-changes.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/diff-ssr.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/diff-ssr.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/diff.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/diff.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/dock-prompt.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/dock-prompt.stories.tsx (line 15, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/dropdown-menu.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/dropdown-menu.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/favicon.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/favicon.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/file-icon.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/file-icon.stories.tsx (line 13, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/font.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/font.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/hover-card.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/hover-card.stories.tsx (line 13, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/icon-button.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/icon-button.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/icon.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/icon.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/image-preview.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/image-preview.stories.tsx (line 13, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/inline-input.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/inline-input.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/keybind.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/keybind.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/line-comment.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/line-comment.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/list.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/list.stories.tsx (line 15, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/logo.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/logo.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/markdown.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/markdown.stories.tsx (line 12, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/message-nav.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/message-nav.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/message-part.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/message-part.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/popover.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/popover.stories.tsx (line 16, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/progress-circle.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/progress-circle.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/progress.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/progress.stories.tsx (line 15, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/provider-icon.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/provider-icon.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/radio-group.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/radio-group.stories.tsx (line 13, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/resize-handle.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/resize-handle.stories.tsx (line 17, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/select.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/select.stories.tsx (line 16, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/session-review.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/session-review.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/session-turn.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/session-turn.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/spinner.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/spinner.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/sticky-accordion-header.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/sticky-accordion-header.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/switch.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/switch.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/tabs.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/tabs.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/tag.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/tag.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/text-field.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/text-field.stories.tsx (line 14, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/text-shimmer.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/text-shimmer.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/toast.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/toast.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/tooltip.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/tooltip.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/typewriter.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/typewriter.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+[14:25:49.109] [ERROR] Failed to build the preview
+[14:25:49.110] [ERROR] Error: [38;2;241;97;97mUnable to index files:
+- ./../ui/src/components/accordion.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/accordion.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/app-icon.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/app-icon.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/avatar.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/avatar.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/basic-tool.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/basic-tool.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/checkbox.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/checkbox.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/code.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/code.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/collapsible.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/collapsible.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/context-menu.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/context-menu.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/dialog.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/dialog.stories.tsx (line 10, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/diff-changes.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/diff-changes.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/diff-ssr.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/diff-ssr.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/diff.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/diff.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/dock-prompt.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/dock-prompt.stories.tsx (line 15, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/dropdown-menu.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/dropdown-menu.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/favicon.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/favicon.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/file-icon.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/file-icon.stories.tsx (line 13, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/font.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/font.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/hover-card.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/hover-card.stories.tsx (line 13, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/icon-button.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/icon-button.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/icon.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/icon.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/image-preview.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/image-preview.stories.tsx (line 13, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/inline-input.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/inline-input.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/keybind.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/keybind.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/line-comment.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/line-comment.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/list.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/list.stories.tsx (line 15, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/logo.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/logo.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/markdown.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/markdown.stories.tsx (line 12, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/message-nav.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/message-nav.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/message-part.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/message-part.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/popover.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/popover.stories.tsx (line 16, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/progress-circle.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/progress-circle.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/progress.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/progress.stories.tsx (line 15, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/provider-icon.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/provider-icon.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/radio-group.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/radio-group.stories.tsx (line 13, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/resize-handle.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/resize-handle.stories.tsx (line 17, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/select.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/select.stories.tsx (line 16, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/session-review.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/session-review.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/session-turn.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/session-turn.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/spinner.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/spinner.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/sticky-accordion-header.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/sticky-accordion-header.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/switch.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/switch.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/tabs.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/tabs.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/tag.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/tag.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/text-field.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/text-field.stories.tsx (line 14, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/text-shimmer.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/text-shimmer.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/toast.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/toast.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/tooltip.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/tooltip.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
+- ./../ui/src/components/typewriter.stories.tsx: CSF: default export must be an object /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/typewriter.stories.tsx (line 6, col 0)
+
+More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export[39m
+    at _StoryIndexGenerator.getIndexAndStats (file:///Users/davidhill/Documents/Local/opencode/node_modules/.bun/storybook@10.2.10+4edd68b244e756bb/node_modules/storybook/dist/core-server/index.js:6085:15)
+    at async _StoryIndexGenerator.getIndex (file:///Users/davidhill/Documents/Local/opencode/node_modules/.bun/storybook@10.2.10+4edd68b244e756bb/node_modules/storybook/dist/core-server/index.js:6074:13)
+    at async getOptimizeDeps (file:///Users/davidhill/Documents/Local/opencode/node_modules/.bun/@storybook+builder-vite@10.2.10+a2a25316dbcddd7f/node_modules/@storybook/builder-vite/dist/index.js:1862:15)
+    at async createViteServer (file:///Users/davidhill/Documents/Local/opencode/node_modules/.bun/@storybook+builder-vite@10.2.10+a2a25316dbcddd7f/node_modules/@storybook/builder-vite/dist/index.js:1888:19)
+    at async Module.start (file:///Users/davidhill/Documents/Local/opencode/node_modules/.bun/@storybook+builder-vite@10.2.10+a2a25316dbcddd7f/node_modules/@storybook/builder-vite/dist/index.js:1923:17)
+    at async storybookDevServer (file:///Users/davidhill/Documents/Local/opencode/node_modules/.bun/storybook@10.2.10+4edd68b244e756bb/node_modules/storybook/dist/core-server/index.js:7241:83)
+    at async buildOrThrow (file:///Users/davidhill/Documents/Local/opencode/node_modules/.bun/storybook@10.2.10+4edd68b244e756bb/node_modules/storybook/dist/core-server/index.js:4504:12)
+    at async buildDevStandalone (file:///Users/davidhill/Documents/Local/opencode/node_modules/.bun/storybook@10.2.10+4edd68b244e756bb/node_modules/storybook/dist/core-server/index.js:7611:66)
+    at async withTelemetry (file:///Users/davidhill/Documents/Local/opencode/node_modules/.bun/storybook@10.2.10+4edd68b244e756bb/node_modules/storybook/dist/_node-chunks/chunk-S3MWHNYJ.js:218:12)
+    at async dev (file:///Users/davidhill/Documents/Local/opencode/node_modules/.bun/storybook@10.2.10+4edd68b244e756bb/node_modules/storybook/dist/bin/core.js:2734:3)
+[14:25:49.118] [WARN] Broken build, fix the error above.
+You may need to refresh the browser.
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@opencode-ai/storybook",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build": "storybook build"
+  },
+  "devDependencies": {
+    "@opencode-ai/ui": "workspace:*",
+    "@solidjs/meta": "catalog:",
+    "@storybook/addon-a11y": "^10.2.10",
+    "@storybook/addon-docs": "^10.2.10",
+    "@storybook/addon-links": "^10.2.10",
+    "@storybook/addon-onboarding": "^10.2.10",
+    "@storybook/addon-vitest": "^10.2.10",
+    "@tsconfig/node22": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "18.0.25",
+    "react": "18.2.0",
+    "solid-js": "catalog:",
+    "storybook": "^10.2.10",
+    "storybook-solidjs-vite": "^10.0.9",
+    "typescript": "catalog:",
+    "vite": "catalog:"
+  }
+}
--- a/packages/storybook/tsconfig.json
+++ b/packages/storybook/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "target": "ESNext",
+    "lib": ["es2023", "dom", "dom.iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "strict": true,
+    "types": ["vite/client", "node"]
+  },
+  "include": [".storybook/**/*.ts", ".storybook/**/*.tsx"]
+}
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -4,6 +4,7 @@
  "type": "module",
  "license": "MIT",
  "exports": {
+    "./package.json": "./package.json",
    "./*": "./src/components/*.tsx",
    "./i18n/*": "./src/i18n/*.ts",
    "./pierre": "./src/pierre/index.ts",
--- a/packages/ui/src/assets/icons/provider/302ai.svg
+++ b/packages/ui/src/assets/icons/provider/302ai.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display: block;" viewBox="0 0 2048 2048" width="1046" height="1046" preserveAspectRatio="none">
+<path transform="translate(0,0)" fill="rgb(156,155,155)" d="M 388.193 1682.23 C 380.878 1674.23 349.014 1650.79 338.487 1642.13 C 148.161 1485.91 28.1107 1260.14 5.01063 1015 C -18.4493 771.014 55.9168 527.694 211.767 338.509 C 367.861 148.455 593.42 28.6444 838.288 5.7197 C 1092.75 -18.7181 1345.95 63.524 1537.48 232.828 C 1567.76 259.726 1596.32 288.496 1623 318.968 C 1631.78 329.058 1640.32 339.36 1648.6 349.865 C 1654.15 356.824 1662.64 368.871 1669.4 374.06 C 1866.4 518.124 1998.49 734.204 2036.88 975.222 C 2041.98 1007.66 2045.11 1039.38 2046.62 1072.12 C 2046.85 1077.09 2047.16 1082.22 2048 1087.12 L 2048 1155.79 L 2047.85 1156.71 C 2045.71 1170.93 2045.27 1196.57 2043.86 1212.22 C 2040.62 1246.59 2035.38 1280.75 2028.17 1314.51 C 1981.27 1534.16 1856.1 1729.25 1675.99 1863.43 C 1479.61 2010.02 1232.99 2072.49 990.498 2037.07 C 801.767 2009.86 626.135 1924.74 487.842 1793.46 C 455.956 1763.37 418.158 1722.72 392.022 1687.5 C 390.729 1685.76 389.452 1684 388.193 1682.23 z"/>
+<path transform="translate(0,0)" fill="rgb(117,116,116)" d="M 1669.4 374.06 C 1866.4 518.124 1998.49 734.204 2036.88 975.222 C 2041.98 1007.66 2045.11 1039.38 2046.62 1072.12 C 2046.85 1077.09 2047.16 1082.22 2048 1087.12 L 2048 1155.79 L 2047.85 1156.71 C 2045.71 1170.93 2045.27 1196.57 2043.86 1212.22 C 2040.62 1246.59 2035.38 1280.75 2028.17 1314.51 C 1981.27 1534.16 1856.1 1729.25 1675.99 1863.43 C 1479.61 2010.02 1232.99 2072.49 990.498 2037.07 C 801.767 2009.86 626.135 1924.74 487.842 1793.46 C 455.956 1763.37 418.158 1722.72 392.022 1687.5 C 390.729 1685.76 389.452 1684 388.193 1682.23 C 394.373 1684.07 421.092 1702.62 428.047 1707.15 C 439.611 1714.6 451.324 1721.83 463.177 1728.82 C 490.564 1744.99 528.003 1763.59 557.361 1776.32 C 782.899 1873.92 1037.96 1878.01 1266.51 1787.69 C 1495.36 1696.62 1678.57 1518.24 1775.72 1291.9 C 1877.79 1053.06 1875.1 782.375 1768.31 545.611 C 1753.03 511.993 1733.8 474.565 1714.15 443.177 C 1706.81 431.355 1699.2 419.704 1691.32 408.231 C 1685.67 400.055 1672.56 382.889 1669.4 374.06 z"/>
+<path transform="translate(0,0)" fill="rgb(254,254,254)" d="M 907.581 300.401 C 923.66 299.084 947.483 300.532 962.897 302.556 C 1041.39 313.102 1112.41 354.577 1160.17 417.755 C 1202.42 473.452 1228.57 555 1218.78 624.854 C 1256.03 619.819 1285.79 618.643 1323.38 625.442 C 1401.3 639.582 1470.3 684.357 1514.95 749.754 C 1560.04 815.479 1576.85 896.56 1561.6 974.792 C 1546.59 1052.29 1501.28 1120.59 1435.71 1164.55 C 1366.19 1211.67 1287.89 1223.85 1206.7 1207.99 L 1208.16 1225.92 C 1213.72 1304.44 1187.72 1381.94 1135.93 1441.23 C 1080.14 1505.71 1008.69 1536.8 924.661 1542.84 C 910.37 1543.02 898.883 1543.12 884.551 1541.84 C 806.009 1534.5 733.606 1496.24 683.294 1435.48 C 630.495 1371.76 609.152 1293.49 617.004 1211.82 C 577.182 1218.28 543.704 1219.15 503.598 1211.31 C 425.862 1195.87 357.514 1150.02 313.752 1083.94 C 269.997 1017.95 254.398 937.224 270.419 859.682 C 286.452 782.387 332.522 714.62 398.502 671.28 C 468.674 625.191 546.96 613.555 628.149 630.32 C 625.459 583.013 627.036 545.389 643.173 499.662 C 684.204 383.394 785.737 308.984 907.581 300.401 z"/>
+<path transform="translate(0,0)" fill="rgb(156,155,155)" d="M 907.659 407.406 C 928.022 404.422 959.425 408.947 978.901 414.989 C 1028.11 429.972 1069.15 464.261 1092.65 510.025 C 1116.27 555.792 1120.24 609.2 1103.65 657.957 C 1098.74 672.384 1090.33 686.336 1086.3 699.186 C 1082.14 712.53 1083.57 726.994 1090.26 739.265 C 1100.24 757.657 1118.84 768.259 1139.57 767.119 C 1155.78 766.227 1164.63 759.273 1178.02 751.678 C 1221.56 726.903 1273.23 720.668 1321.41 734.376 C 1370.6 748.209 1412.18 781.215 1436.82 825.985 C 1461.35 870.569 1467.02 923.112 1452.58 971.905 C 1438.06 1020.82 1404.54 1061.88 1359.51 1085.9 C 1280.31 1128.12 1181.39 1108.75 1124.87 1039.74 C 1113.7 1026.12 1105.83 1013.42 1087.4 1008.03 C 1041 993.798 1000.36 1044.75 1026.36 1086.49 C 1041.95 1111.53 1062.76 1127.17 1078.18 1153.03 C 1090.26 1175.57 1097.84 1197.66 1100.84 1223.2 C 1107.04 1273.73 1092.65 1324.64 1060.9 1364.44 C 1029.42 1404.28 983.238 1429.79 932.752 1435.23 C 882.189 1440.86 831.491 1425.87 792.121 1393.65 C 752.588 1361.54 727.605 1314.91 722.781 1264.21 C 718.894 1225.82 727.653 1167.83 758.478 1141.35 C 771.141 1130.47 781.921 1118.81 792.404 1105.84 C 869.373 1010.12 879.456 876.886 817.771 770.669 C 809.316 756.055 799.574 742.224 788.661 729.342 C 782.235 721.815 773.191 712.791 767.461 705.187 C 749.008 680.699 737.483 646.859 734.444 616.659 C 729.188 565.849 744.584 515.06 777.168 475.721 C 810.289 435.451 856.055 412.394 907.659 407.406 z"/>
+<path transform="translate(0,0)" fill="rgb(156,155,155)" d="M 554.228 729.711 C 659.104 725.931 747.227 807.802 751.164 912.672 C 755.1 1017.54 673.362 1105.79 568.498 1109.88 C 463.411 1113.98 374.937 1032.03 370.992 926.942 C 367.047 821.849 449.129 733.498 554.228 729.711 z"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/berget.svg
+++ b/packages/ui/src/assets/icons/provider/berget.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 463 419" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M208.739 17L255.261 17L446 403L398 403L313.5 255L261.5 176L233.163 96.1677L237.815 98.6522H226.185L230.837 96.1677L113 331L64.5 403L18 403L208.739 17Z" fill="currentColor"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/cloudferro-sherlock.svg
+++ b/packages/ui/src/assets/icons/provider/cloudferro-sherlock.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+<path d="M12,24l-8.996,-8.996l8.996,-8.997l2.996,2.997l-5.999,6l2.996,2.997l6,-5.999l2.997,2.996l-8.99,8.996Z" opacity="0.01"/>
+<path d="M9,15l6,-6l-3,-3l-9,9l-3,-3l12,-12l12,12l-3,3l-3,-3l-6,6l-3,-3Z"/>
+<path d="M0,12L12,0L24,12L12,24L0,12Z" fill="none" stroke="currentColor" stroke-width="0.2"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/firmware.svg
+++ b/packages/ui/src/assets/icons/provider/firmware.svg
@@ -0,0 +1,18 @@
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 40 40"
+   xmlns="http://www.w3.org/2000/svg"
+ >
+  <g
+   transform="matrix(1.149971,0,0,1.149971,-166.19831,2.0845471)"
+     >
+    <path
+       fill-rule="evenodd"
+       clip-rule="evenodd"
+       d="m 172.24982,31.21868 h 7.05286 l -1.46587,-2.792842 -2.50031,-0.56255 -2.45857,-4.899805 3.20956,-5.39366 -1.27352,-2.509532 h 0.94075 l 1.69977,-1.097102 v -1.003566 h 0.71098 V 9.2006456 L 174.88883,8.1743823 174.04436,7.011809 h -4.20939 l -3.18164,3.546614 -3.17106,-6.3194202 -18.92307,-4.2721087 12.5905,14.1419309 h -1.44316 l -5.16203,3.661439 -2.60981,5.055178 -1.10108,0.311349 v -4.257417 l 1.09698,-0.720257 -2.41204,-3.676132 V 24.87269 l 3.32207,-0.936862 2.7234,-5.278272 2.87418,-2.038852 -4.19705,8.442439 v 3.325965 l 1.15171,2.831572 h 4.45518 v -1.428443 l -0.53832,-1.131806 -1.25751,-0.768529 v -0.657318 l 2.58945,-4.280136 v 2.792842 l 2.26644,2.614989 0.9823,1.749313 v 1.109088 h 5.15662 v -1.420438 l -0.56666,-1.276122 -1.34817,-0.728284 -1.59828,-2.366603 1.227,-2.275513 3.72559,0.583754 -0.87541,4.810663 -0.0108,2.672543 h 5.18498 v -1.362885 l -0.2419,-0.956983 -0.7378,-0.720063 0.56233,-1.122936 1.88194,2.918767 z m 1.89753,-17.471965 h 1.21987 l 0.77242,-0.49844 v -0.288652 h -0.6333 v -1.313575 h 1.34557 V 10.16544 L 174.0805,9.298183 173.37493,8.3253836 h -1.97867 z m -4.04409,-5.0676393 -0.923,1.0293789 4.59754,9.1729964 0.81029,-1.362407 z m -2.81664,3.1414493 0.95115,-1.060904 4.74272,9.462472 -0.80185,1.347868 z m -10.78667,3.601874 -4.94523,9.945983 V 28.1305 l 0.72157,1.773328 h 2.17144 l -0.15644,-0.32736 -1.55263,-0.948762 v -1.761212 l 3.65462,-6.042799 12.81381,2.008454 4.35629,6.754921 v 0.316758 h 3.56526 l -0.17244,-0.328875 -2.51502,-0.566443 -0.14021,-0.27803 -8.12582,-16.195842 -7.43798,2.887761 z m 9.08324,-4.067925 -2.99624,-5.9715919 -3.20783,-0.7241093 4.77108,7.2521282 z m -2.68532,1.04275 -5.3652,-8.1552571 -3.82404,-0.8631672 7.71645,9.5903223 z m -2.75757,1.070727 -8.49168,-10.5541849 -3.38785,-0.7647211 10.52054,11.818147 -0.0569,0.0506 z m -2.18485,11.788137 v -2.857102 l 3.42916,0.537235 -1.38344,2.567173 2.2223,3.292645 1.23739,0.668135 0.19517,0.439654 h -2.45208 V 29.76622 l -1.21619,-2.164949 z m 11.58527,0.51668 -1.11818,-1.733951 -0.63784,-0.09996 -0.86936,4.784916 v 1.180055 h 2.52692 l -0.0816,-0.324764 -1.15994,-1.130508 z m 0.29555,-21.8290604 h -0.001 v 2.1928393 h 4.20916 V 3.9437076 h -0.003 l -1.04894,1.0503231 -1.05046,-1.0503231 h -0.005 l -1.05046,1.0503231 z"
+       fill="currentColor"
+      />
+  </g>
+ 
+</svg>
--- a/packages/ui/src/assets/icons/provider/gitlab.svg
+++ b/packages/ui/src/assets/icons/provider/gitlab.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 380 380" xmlns="http://www.w3.org/2000/svg">
+<path d="M265.26416,174.37243l-.2134-.55822-21.19899-55.30908c-.4236-1.08359-1.18542-1.99642-2.17699-2.62689-.98837-.63373-2.14749-.93253-3.32305-.87014-1.1689.06239-2.29195.48925-3.20809,1.21821-.90957.73554-1.56629,1.73047-1.87493,2.85346l-14.31327,43.80662h-57.90965l-14.31327-43.80662c-.30864-1.12299-.96536-2.11791-1.87493-2.85346-.91614-.72895-2.03911-1.15582-3.20809-1.21821-1.17548-.06239-2.33468.23641-3.32297.87014-.99166.63047-1.75348,1.5433-2.17707,2.62689l-21.19891,55.31237-.21348.55493c-6.28158,16.38521-.92929,34.90803,13.05891,45.48782.02621.01641.04922.03611.07552.05582l.18719.14119,32.29094,24.17392,15.97151,12.09024,9.71951,7.34871c2.34117,1.77316,5.57877,1.77316,7.92002,0l9.71943-7.34871,15.96822-12.09024,32.48142-24.31511c.02958-.02299.05588-.04269.08538-.06568,13.97834-10.57977,19.32735-29.09604,13.04905-45.47796Z" fill="currentColor"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/jiekou.svg
+++ b/packages/ui/src/assets/icons/provider/jiekou.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 4H4V20H16C18.2091 20 20 18.2091 20 16V8H24V16C24 20.4183 20.4183 24 16 24H4C1.79086 24 1.61064e-08 22.2091 0 20V0H16V4Z" fill="currentColor"/>
+<path d="M20 4H24V0H20V4Z" fill="currentColor"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/kilo.svg
+++ b/packages/ui/src/assets/icons/provider/kilo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M5 3v18" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
+  <path d="M17.5 4.5 9.5 12l8 7.5" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/kuae-cloud-coding-plan.svg
+++ b/packages/ui/src/assets/icons/provider/kuae-cloud-coding-plan.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1312 7.5L17.4088 11.1912H5.81625L8.5375 7.5H20.1325H20.1312ZM34.0675 28.81L31.3475 32.5H19.795L22.5125 28.81H34.0675ZM35 7.5L16.58 32.5H5L23.42 7.5H35Z" fill="currentColor"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/meganova.svg
+++ b/packages/ui/src/assets/icons/provider/meganova.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4C8.5 4 5.5 6 4 8.5C3.2 9.9 3 11 3 12C3 13 3.2 14.1 4 15.5C5.5 18 8.5 20 12 20C15.5 20 18.5 18 20 15.5C20.8 14.1 21 13 21 12C21 11 20.8 9.9 20 8.5C18.5 6 15.5 4 12 4Z" fill="currentColor" fill-opacity="0"/>
+<path d="M12 5C7.5 5 4.5 8.5 3.5 11C3.2 11.6 3 12 3 12.5C3.5 12 5 10.5 7 9.5C9 8.5 10.5 8 12 8C13.5 8 15 8.5 17 9.5C19 10.5 20.5 12 21 12.5C21 12 20.8 11.6 20.5 11C19.5 8.5 16.5 5 12 5Z" fill="currentColor"/>
+<path d="M5.5 14C6.5 15.5 8 16.5 9.5 17L8 19.5C6 18.5 4.5 16.5 3.5 14.5L5.5 14Z" fill="currentColor"/>
+<path d="M18.5 14C17.5 15.5 16 16.5 14.5 17L16 19.5C18 18.5 19.5 16.5 20.5 14.5L18.5 14Z" fill="currentColor"/>
+<path d="M12 8C10.5 8 9 8.5 7 9.5C5 10.5 3.5 12 3 12.5C3.5 13 5 14.5 7 15.5C9 16.5 10.5 17 12 17C13.5 17 15 16.5 17 15.5C19 14.5 20.5 13 21 12.5C20.5 12 19 10.5 17 9.5C15 8.5 13.5 8 12 8ZM12 14.5C10.6 14.5 9.5 13.4 9.5 12C9.5 10.6 10.6 9.5 12 9.5C13.4 9.5 14.5 10.6 14.5 12C14.5 13.4 13.4 14.5 12 14.5Z" fill="currentColor"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/minimax-cn-coding-plan.svg
+++ b/packages/ui/src/assets/icons/provider/minimax-cn-coding-plan.svg
@@ -0,0 +1,24 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    shape-rendering="geometricPrecision"
+    d="M9.8132 15.9038L9 18.75L8.1868 15.9038C7.75968 14.4089 6.59112 13.2403 5.09619 12.8132L2.25 12L5.09619 11.1868C6.59113 10.7597 7.75968 9.59112 8.1868 8.09619L9 5.25L9.8132 8.09619C10.2403 9.59113 11.4089 10.7597 12.9038 11.1868L15.75 12L12.9038 12.8132C11.4089 13.2403 10.2403 14.4089 9.8132 15.9038Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M18.2589 8.71454L18 9.75L17.7411 8.71454C17.4388 7.50533 16.4947 6.56117 15.2855 6.25887L14.25 6L15.2855 5.74113C16.4947 5.43883 17.4388 4.49467 17.7411 3.28546L18 2.25L18.2589 3.28546C18.5612 4.49467 19.5053 5.43883 20.7145 5.74113L21.75 6L20.7145 6.25887C19.5053 6.56117 18.5612 7.50533 18.2589 8.71454Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M16.8942 20.5673L16.5 21.75L16.1058 20.5673C15.8818 19.8954 15.3546 19.3682 14.6827 19.1442L13.5 18.75L14.6827 18.3558C15.3546 18.1318 15.8818 17.6046 16.1058 16.9327L16.5 15.75L16.8942 16.9327C17.1182 17.6046 17.6454 18.1318 18.3173 18.3558L19.5 18.75L18.3173 19.1442C17.6454 19.3682 17.1182 19.8954 16.8942 20.5673Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
--- a/packages/ui/src/assets/icons/provider/minimax-coding-plan.svg
+++ b/packages/ui/src/assets/icons/provider/minimax-coding-plan.svg
@@ -0,0 +1,24 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    shape-rendering="geometricPrecision"
+    d="M9.8132 15.9038L9 18.75L8.1868 15.9038C7.75968 14.4089 6.59112 13.2403 5.09619 12.8132L2.25 12L5.09619 11.1868C6.59113 10.7597 7.75968 9.59112 8.1868 8.09619L9 5.25L9.8132 8.09619C10.2403 9.59113 11.4089 10.7597 12.9038 11.1868L15.75 12L12.9038 12.8132C11.4089 13.2403 10.2403 14.4089 9.8132 15.9038Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M18.2589 8.71454L18 9.75L17.7411 8.71454C17.4388 7.50533 16.4947 6.56117 15.2855 6.25887L14.25 6L15.2855 5.74113C16.4947 5.43883 17.4388 4.49467 17.7411 3.28546L18 2.25L18.2589 3.28546C18.5612 4.49467 19.5053 5.43883 20.7145 5.74113L21.75 6L20.7145 6.25887C19.5053 6.56117 18.5612 7.50533 18.2589 8.71454Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M16.8942 20.5673L16.5 21.75L16.1058 20.5673C15.8818 19.8954 15.3546 19.3682 14.6827 19.1442L13.5 18.75L14.6827 18.3558C15.3546 18.1318 15.8818 17.6046 16.1058 16.9327L16.5 15.75L16.8942 16.9327C17.1182 17.6046 17.6454 18.1318 18.3173 18.3558L19.5 18.75L18.3173 19.1442C17.6454 19.3682 17.1182 19.8954 16.8942 20.5673Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
--- a/packages/ui/src/assets/icons/provider/moark.svg
+++ b/packages/ui/src/assets/icons/provider/moark.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.132 24.3947C25.497 25.7527 25.8984 27.1413 26.3334 28.5834C26.7302 29.8992 25.5459 30.4167 25.0752 29.1758C24.571 27.8466 24.0885 26.523 23.6347 25.1729C21.065 26.4654 18.5025 27.5424 15.5961 28.7541C16.7581 33.0256 17.8309 36.5984 19.4952 39.9935C19.4953 39.9936 19.4953 39.9937 19.4954 39.9938C19.6631 39.9979 19.8313 40 20 40C31.0457 40 40 31.0457 40 20C40 16.0335 38.8453 12.3366 36.8537 9.22729C31.6585 9.69534 27.0513 10.4562 22.8185 11.406C22.8882 12.252 22.9677 13.0739 23.0555 13.855C23.3824 16.7604 23.9112 19.5281 24.6137 22.3836C27.0581 21.2848 29.084 20.3225 30.6816 19.522C32.2154 18.7535 33.6943 18.7062 31.2018 20.6594C29.0388 22.1602 27.0644 23.3566 25.132 24.3947ZM36.1559 8.20846C33.0001 3.89184 28.1561 0.887462 22.5955 0.166882C22.4257 2.86234 22.4785 6.26344 22.681 9.50447C26.7473 8.88859 31.1721 8.46032 36.1559 8.20846ZM19.9369 9.73661e-05C19.7594 2.92694 19.8384 6.65663 20.19 9.91293C17.3748 10.4109 14.7225 11.0064 12.1592 11.7038C12.0486 10.4257 11.9927 9.25764 11.9927 8.24178C11.9927 7.5054 11.3957 6.90844 10.6593 6.90844C9.92296 6.90844 9.32601 7.5054 9.32601 8.24178C9.32601 9.47868 9.42873 10.898 9.61402 12.438C8.33567 12.8278 7.07397 13.2443 5.81918 13.688C5.12493 13.9336 4.76118 14.6954 5.0067 15.3896C5.25223 16.0839 6.01406 16.4476 6.7083 16.2021C7.7931 15.8185 8.88482 15.4388 9.98927 15.0659C10.5222 18.3344 11.3344 21.9428 12.2703 25.4156C12.4336 26.0218 12.6062 26.6262 12.7863 27.2263C9.34168 28.4135 5.82612 29.3782 2.61128 29.8879C0.949407 26.9716 0 23.5967 0 20C0 8.97534 8.92023 0.0341108 19.9369 9.73661e-05ZM4.19152 32.2527C7.45069 36.4516 12.3458 39.3173 17.9204 39.8932C16.5916 37.455 14.9338 33.717 13.5405 29.5901C10.4404 30.7762 7.25883 31.6027 4.19152 32.2527ZM22.9735 23.1135C22.1479 20.41 21.4462 17.5441 20.9225 14.277C20.746 13.5841 20.5918 12.8035 20.4593 11.9636C17.6508 12.6606 14.9992 13.4372 12.4356 14.2598C12.8479 17.4766 13.5448 21.1334 14.5118 24.7218C14.662 25.2792 14.8081 25.8248 14.9514 26.3594L14.9516 26.3603L14.9524 26.3634L14.9526 26.3639L14.973 26.4401C16.1833 25.9872 17.3746 25.5123 18.53 25.0259C20.1235 24.3552 21.6051 23.7165 22.9735 23.1135Z" fill="currentColor"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/nova.svg
+++ b/packages/ui/src/assets/icons/provider/nova.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M13.48 17.46L14.64 18.62C14.69 18.67 14.71 18.75 14.68 18.82L12.87 23.41C12.73 23.76 12.38 24 12 24C11.62 24 11.27 23.76 11.13 23.41L8.52 16.80L4.31 21.02C4.24 21.09 4.12 21.09 4.05 21.02L2.98 19.95C2.91 19.88 2.91 19.76 2.98 19.69L8.18 14.49C8.35 14.32 8.58 14.21 8.81 14.19C9.23 14.17 9.60 14.42 9.74 14.78L12.00 20.51L13.18 17.52C13.23 17.40 13.39 17.37 13.49 17.46H13.48ZM19.69 2.98L15.48 7.20L12.87 0.59C12.71 0.17 12.26 -0.08 11.79 0.02C11.48 0.09 11.23 0.33 11.12 0.63L9.32 5.18C9.29 5.25 9.31 5.33 9.36 5.38L10.52 6.54C10.61 6.63 10.77 6.60 10.82 6.47L12 3.49L14.26 9.21C14.37 9.51 14.63 9.72 14.94 9.79C15.00 9.80 15.07 9.81 15.13 9.81C15.38 9.81 15.62 9.71 15.79 9.53L21.02 4.31C21.09 4.24 21.09 4.12 21.02 4.04L19.96 2.98C19.88 2.91 19.76 2.91 19.69 2.98L19.69 2.98ZM6.47 13.17L3.49 12.00L9.21 9.74C9.58 9.59 9.83 9.23 9.81 8.81C9.79 8.57 9.68 8.35 9.51 8.18L4.31 2.98C4.24 2.91 4.12 2.91 4.05 2.98L2.98 4.05C2.91 4.12 2.91 4.24 2.98 4.31L7.20 8.52L0.59 11.13C0.24 11.27 0 11.62 0 12.00C0 12.38 0.24 12.73 0.59 12.87L5.18 14.68C5.25 14.71 5.33 14.69 5.38 14.64L6.54 13.48C6.64 13.39 6.60 13.23 6.48 13.17H6.47ZM23.41 11.13L18.82 9.32C18.75 9.29 18.67 9.31 18.62 9.36L17.46 10.52C17.36 10.61 17.40 10.77 17.52 10.82L20.51 12.00L14.78 14.26C14.42 14.40 14.17 14.77 14.19 15.19C14.21 15.42 14.32 15.65 14.49 15.82L19.69 21.02C19.76 21.09 19.88 21.09 19.95 21.02L21.02 19.95C21.09 19.88 21.09 19.76 21.02 19.69L16.80 15.48L23.41 12.87C23.76 12.73 24 12.38 24 12.00C24 11.62 23.76 11.27 23.41 11.13V11.13Z"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/novita-ai.svg
+++ b/packages/ui/src/assets/icons/provider/novita-ai.svg
@@ -0,0 +1,10 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3135_1230)">
+<path d="M15.5564 8.26172V16.5239L2.1875 29.8928H15.5564V21.6302L23.8194 29.8928H37.1875L15.5564 8.26172Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_3135_1230">
+<rect width="35" height="21.6311" fill="white" transform="translate(2.1875 8.26172)"/>
+</clipPath>
+</defs>
+</svg>
--- a/packages/ui/src/assets/icons/provider/privatemode-ai.svg
+++ b/packages/ui/src/assets/icons/provider/privatemode-ai.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="61" height="63" viewBox="0 0 61 63" fill="none">
+<path d="M13.2167 6.71884C13.2167 10.4296 10.258 13.4377 6.60833 13.4377C2.95865 13.4377 0 10.4296 0 6.71884C0 3.00813 2.95865 0 6.60833 0C10.258 0 13.2167 3.00813 13.2167 6.71884Z" fill="currentColor"/>
+<path d="M16.2667 22.7407H28.4667V62.0201H16.2667V22.7407Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.6333 33.0774C44.2482 33.0774 48.8 28.4495 48.8 22.7407C48.8 17.0319 44.2482 12.404 38.6333 12.404C33.0184 12.404 28.4667 17.0319 28.4667 22.7407C28.4667 28.4495 33.0184 33.0774 38.6333 33.0774ZM38.6333 45.4814C50.9861 45.4814 61 35.3 61 22.7407C61 10.1814 50.9861 0 38.6333 0C26.2806 0 16.2667 10.1814 16.2667 22.7407C16.2667 35.3 26.2806 45.4814 38.6333 45.4814Z" fill="currentColor"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/qihang-ai.svg
+++ b/packages/ui/src/assets/icons/provider/qihang-ai.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path 
+    d="M20 2L36.4 11V29L20 38L3.6 29V11L20 2Z M20 20V2 M20 20L36.4 11 M20 20L36.4 29 M20 20V38 M20 20L3.6 29 M20 20L3.6 11" 
+    stroke="currentColor" 
+    stroke-width="3" 
+    stroke-linecap="round" 
+    stroke-linejoin="round"
+  />
+</svg>
--- a/packages/ui/src/assets/icons/provider/qiniu-ai.svg
+++ b/packages/ui/src/assets/icons/provider/qiniu-ai.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill="currentColor" fill-rule="nonzero">
+            <path d="M23.568,4.37284513 C23.180619,4.24052218 22.8592977,4.40224993 22.6756964,4.54008596 C20.1236928,7.55961616 16.310265,9.47645197 12.0489207,9.47645197 C10.5856349,9.47645197 9.17375432,9.25040654 7.84814258,8.82954254 C7.5029753,7.57615888 7.25878488,6.68481809 7.25878488,6.68481809 C7.25878488,6.68481809 6.97237307,5.81185554 6.00112785,5.96071698 L6.28019714,8.22306831 C4.39829587,7.36296976 2.74038351,6.09854994 1.42029592,4.53641031 C1.23669698,4.39857428 0.915396329,4.23684654 0.528,4.36916956 C1.62959981,7.32069904 3.8328071,9.73559053 6.63638202,11.1121076 L7.40015707,17.309184 C7.40015707,17.309184 7.74165693,19.68 9.96508874,19.68 L14.7184659,19.68 C16.9418594,19.68 17.2833592,17.309184 17.2833592,17.309184 L17.8212733,12.8690689 C16.3782427,12.7514113 15.4693667,13.7585665 15.1829548,14.7509761 C14.7001288,16.4233728 14.7001288,16.5318144 14.6046071,16.8221952 C14.4100343,17.4194688 13.7692329,17.4912 13.7692329,17.4912 L10.9179278,17.4912 C10.9179278,17.4912 10.2772032,17.4194688 10.0825536,16.8221952 C9.95772321,16.4381184 9.32981155,14.1868033 8.69821712,11.9023719 C9.76307366,12.2037505 10.8885424,12.3654913 12.0507621,12.3654913 C17.3237162,12.3710209 21.8219851,9.04456718 23.568,4.37284513 Z"></path>
+        </g>
+    </g>
+</svg>
--- a/packages/ui/src/assets/icons/provider/stackit.svg
+++ b/packages/ui/src/assets/icons/provider/stackit.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="STACKIT" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 41.536063 41.536063">
+  <path d="M13.9510149,10.4421038h20.8374634l-1.1608887,5.4412842h-14.5545654l-1.3522339,6.3352661h-6.2828369l2.5130615-11.7765503ZM22.5114397,25.652614H7.9081072l-1.1605225,5.4413452h20.8855591l2.5210571-11.8130493h-6.2828979l-1.3598633,6.3717041Z" fill="currentColor"/>
+</svg>
--- a/packages/ui/src/assets/icons/provider/stepfun.svg
+++ b/packages/ui/src/assets/icons/provider/stepfun.svg
@@ -0,0 +1,24 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    shape-rendering="geometricPrecision"
+    d="M9.8132 15.9038L9 18.75L8.1868 15.9038C7.75968 14.4089 6.59112 13.2403 5.09619 12.8132L2.25 12L5.09619 11.1868C6.59113 10.7597 7.75968 9.59112 8.1868 8.09619L9 5.25L9.8132 8.09619C10.2403 9.59113 11.4089 10.7597 12.9038 11.1868L15.75 12L12.9038 12.8132C11.4089 13.2403 10.2403 14.4089 9.8132 15.9038Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M18.2589 8.71454L18 9.75L17.7411 8.71454C17.4388 7.50533 16.4947 6.56117 15.2855 6.25887L14.25 6L15.2855 5.74113C16.4947 5.43883 17.4388 4.49467 17.7411 3.28546L18 2.25L18.2589 3.28546C18.5612 4.49467 19.5053 5.43883 20.7145 5.74113L21.75 6L20.7145 6.25887C19.5053 6.56117 18.5612 7.50533 18.2589 8.71454Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M16.8942 20.5673L16.5 21.75L16.1058 20.5673C15.8818 19.8954 15.3546 19.3682 14.6827 19.1442L13.5 18.75L14.6827 18.3558C15.3546 18.1318 15.8818 17.6046 16.1058 16.9327L16.5 15.75L16.8942 16.9327C17.1182 17.6046 17.6454 18.1318 18.3173 18.3558L19.5 18.75L18.3173 19.1442C17.6454 19.3682 17.1182 19.8954 16.8942 20.5673Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
--- a/packages/ui/src/assets/icons/provider/vivgrid.svg
+++ b/packages/ui/src/assets/icons/provider/vivgrid.svg
@@ -0,0 +1,4 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M 10.921 1.266 C 11.477 0.952 12.161 0.952 12.717 1.266 L 14.079 2.037 C 12.108 3.127 9.934 4.437 8.274 5.788 C 7.425 6.479 6.706 7.185 6.216 7.879 C 5.727 8.574 5.458 9.268 5.53 9.935 C 5.625 10.839 6.133 11.432 6.825 11.858 C 7.512 12.283 8.388 12.55 9.232 12.809 C 9.968 13.033 10.681 13.253 11.245 13.56 C 11.808 13.868 12.214 14.257 12.353 14.819 C 12.492 15.384 12.369 16.145 11.825 17.206 C 11.286 18.255 10.342 19.586 8.861 21.293 L 2.91 17.924 C 2.356 17.608 2.013 17.028 2.013 16.398 L 2.013 7.327 C 2.013 6.697 2.356 6.116 2.91 5.802 L 10.921 1.266 Z" fill="currentColor" stroke="currentColor"/>
+<path d="M 21.122 6.009 C 21.677 6.324 22.019 6.904 22.019 7.534 L 22.019 16.606 C 22.019 17.235 21.677 17.816 21.122 18.131 L 13.11 22.667 C 12.555 22.981 11.872 22.981 11.314 22.667 L 10.388 22.142 C 10.772 21.78 11.159 21.413 11.55 21.047 C 12.722 19.945 13.901 18.834 14.928 17.765 C 15.953 16.698 16.825 15.667 17.382 14.721 C 17.936 13.778 18.187 12.902 17.93 12.154 C 17.671 11.401 16.913 10.813 15.54 10.415 C 13.986 9.966 12.92 9.457 12.272 8.908 C 11.628 8.362 11.403 7.78 11.507 7.17 C 11.617 6.55 12.069 5.883 12.824 5.18 C 13.572 4.488 14.606 3.77 15.874 3.039 L 21.122 6.009 Z" fill="currentColor" stroke="currentColor"/>
+</svg>
--- a/packages/ui/src/components/accordion.stories.tsx
+++ b/packages/ui/src/components/accordion.stories.tsx
@@ -0,0 +1,149 @@
+// @ts-nocheck
+import { createEffect, createSignal } from "solid-js"
+import * as mod from "./accordion"
+import { create } from "../storybook/scaffold"
+
+const docs = `### Overview
+Accordion for collapsible content sections with optional multi-open behavior.
+
+Use one trigger per item; keep content concise.
+
+### API
+- Root supports Kobalte Accordion props: \`value\`, \`multiple\`, \`collapsible\`, \`onChange\`.
+- Compose with \`Accordion.Item\`, \`Header\`, \`Trigger\`, \`Content\`.
+
+### Variants and states
+- Single or multiple open items.
+- Collapsible or fixed-open behavior.
+
+### Behavior
+- Controlled via \`value\`/\`onChange\` when provided.
+
+### Accessibility
+- TODO: confirm keyboard navigation from Kobalte Accordion.
+
+### Theming/tokens
+- Uses \`data-component="accordion"\` and slot data attributes.
+
+`
+
+const story = create({ title: "UI/Accordion", mod })
+export default {
+  title: "UI/Accordion",
+  id: "components-accordion",
+  component: story.meta.component,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+export const Basic = {
+  args: {
+    collapsible: true,
+    multiple: false,
+    value: "first",
+  },
+  argTypes: {
+    collapsible: { control: "boolean" },
+    multiple: { control: "boolean" },
+    value: {
+      control: "select",
+      options: ["first", "second", "none"],
+      mapping: {
+        none: undefined,
+      },
+    },
+  },
+  render: (props) => {
+    const [value, setValue] = createSignal(props.value)
+    createEffect(() => {
+      setValue(props.value)
+    })
+
+    const current = () => {
+      if (props.multiple) {
+        if (Array.isArray(value())) return value()
+        if (value()) return [value()]
+        return []
+      }
+
+      if (Array.isArray(value())) return value()[0]
+      return value()
+    }
+
+    return (
+      <div style={{ display: "grid", gap: "8px", width: "420px" }}>
+        <mod.Accordion collapsible={props.collapsible} multiple={props.multiple} value={current()} onChange={setValue}>
+          <mod.Accordion.Item value="first">
+            <mod.Accordion.Header>
+              <mod.Accordion.Trigger>First</mod.Accordion.Trigger>
+            </mod.Accordion.Header>
+            <mod.Accordion.Content>
+              <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>Accordion content.</div>
+            </mod.Accordion.Content>
+          </mod.Accordion.Item>
+          <mod.Accordion.Item value="second">
+            <mod.Accordion.Header>
+              <mod.Accordion.Trigger>Second</mod.Accordion.Trigger>
+            </mod.Accordion.Header>
+            <mod.Accordion.Content>
+              <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>More content.</div>
+            </mod.Accordion.Content>
+          </mod.Accordion.Item>
+        </mod.Accordion>
+      </div>
+    )
+  },
+}
+
+export const Multiple = {
+  args: {
+    collapsible: true,
+    multiple: true,
+    value: ["first", "second"],
+  },
+  render: (props) => (
+    <mod.Accordion collapsible={props.collapsible} multiple={props.multiple} value={props.value}>
+      <mod.Accordion.Item value="first">
+        <mod.Accordion.Header>
+          <mod.Accordion.Trigger>First</mod.Accordion.Trigger>
+        </mod.Accordion.Header>
+        <mod.Accordion.Content>
+          <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>Accordion content.</div>
+        </mod.Accordion.Content>
+      </mod.Accordion.Item>
+      <mod.Accordion.Item value="second">
+        <mod.Accordion.Header>
+          <mod.Accordion.Trigger>Second</mod.Accordion.Trigger>
+        </mod.Accordion.Header>
+        <mod.Accordion.Content>
+          <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>More content.</div>
+        </mod.Accordion.Content>
+      </mod.Accordion.Item>
+    </mod.Accordion>
+  ),
+}
+
+export const NonCollapsible = {
+  args: {
+    collapsible: false,
+    multiple: false,
+    value: "first",
+  },
+  render: (props) => (
+    <mod.Accordion collapsible={props.collapsible} multiple={props.multiple} value={props.value}>
+      <mod.Accordion.Item value="first">
+        <mod.Accordion.Header>
+          <mod.Accordion.Trigger>First</mod.Accordion.Trigger>
+        </mod.Accordion.Header>
+        <mod.Accordion.Content>
+          <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>Accordion content.</div>
+        </mod.Accordion.Content>
+      </mod.Accordion.Item>
+    </mod.Accordion>
+  ),
+}
--- a/packages/ui/src/components/app-icon.stories.tsx
+++ b/packages/ui/src/components/app-icon.stories.tsx
@@ -0,0 +1,69 @@
+// @ts-nocheck
+import { iconNames } from "./app-icons/types"
+import * as mod from "./app-icon"
+import { create } from "../storybook/scaffold"
+
+const docs = `### Overview
+Application icon renderer for known editor/terminal apps.
+
+Use in provider or app selection lists.
+
+### API
+- Required: \`id\` (app icon name).
+- Accepts standard img props except \`src\`.
+
+### Variants and states
+- Auto-switches themed icons when available.
+
+### Behavior
+- Watches color scheme changes to swap themed assets.
+
+### Accessibility
+- Provide \`alt\` text when the icon conveys meaning.
+
+### Theming/tokens
+- Uses \`data-component="app-icon"\`.
+
+`
+
+const story = create({ title: "UI/AppIcon", mod, args: { id: "vscode" } })
+export default {
+  title: "UI/AppIcon",
+  id: "components-app-icon",
+  component: story.meta.component,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+  argTypes: {
+    id: {
+      control: "select",
+      options: iconNames,
+    },
+  },
+}
+
+export const Basic = story.Basic
+
+export const AllIcons = {
+  render: () => (
+    <div
+      style={{
+        display: "grid",
+        gap: "12px",
+        "grid-template-columns": "repeat(auto-fill, minmax(72px, 1fr))",
+      }}
+    >
+      {iconNames.map((id) => (
+        <div style={{ display: "grid", gap: "6px", "justify-items": "center" }}>
+          <mod.AppIcon id={id} alt={id} />
+          <div style={{ "font-size": "10px", color: "var(--text-weak)", "text-align": "center" }}>{id}</div>
+        </div>
+      ))}
+    </div>
+  ),
+}
--- a/packages/ui/src/components/avatar.stories.tsx
+++ b/packages/ui/src/components/avatar.stories.tsx
@@ -0,0 +1,76 @@
+// @ts-nocheck
+import * as mod from "./avatar"
+import { create } from "../storybook/scaffold"
+
+const docs = `### Overview
+User avatar with image fallback to initials.
+
+Use in user lists and headers.
+
+### API
+- Required: \`fallback\` string.
+- Optional: \`src\`, \`background\`, \`foreground\`, \`size\`.
+
+### Variants and states
+- Sizes: small, normal, large.
+- Image vs fallback state.
+
+### Behavior
+- Uses grapheme-aware fallback rendering.
+
+### Accessibility
+- TODO: provide alt text when using images; currently image is decorative.
+
+### Theming/tokens
+- Uses \`data-component="avatar"\` with size and image state attributes.
+
+`
+
+const story = create({ title: "UI/Avatar", mod, args: { fallback: "A" } })
+
+export default {
+  title: "UI/Avatar",
+  id: "components-avatar",
+  component: story.meta.component,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["small", "normal", "large"],
+    },
+  },
+}
+
+export const Basic = story.Basic
+
+export const WithImage = {
+  args: {
+    src: "https://placehold.co/80x80/png",
+    fallback: "J",
+  },
+}
+
+export const Sizes = {
+  render: () => (
+    <div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
+      <mod.Avatar size="small" fallback="S" />
+      <mod.Avatar size="normal" fallback="N" />
+      <mod.Avatar size="large" fallback="L" />
+    </div>
+  ),
+}
+
+export const CustomColors = {
+  args: {
+    fallback: "C",
+    background: "#1f2a44",
+    foreground: "#f2f5ff",
+  },
+}
--- a/packages/ui/src/components/basic-tool.stories.tsx
+++ b/packages/ui/src/components/basic-tool.stories.tsx
@@ -0,0 +1,133 @@
+// @ts-nocheck
+import { createSignal } from "solid-js"
+import * as mod from "./basic-tool"
+import { create } from "../storybook/scaffold"
+
+const docs = `### Overview
+Expandable tool panel with a structured trigger and optional details.
+
+Use structured triggers for consistent layout; custom triggers allowed.
+
+### API
+- Required: \`icon\` and \`trigger\` (structured or custom JSX).
+- Optional: \`status\`, \`defaultOpen\`, \`forceOpen\`, \`defer\`, \`locked\`.
+
+### Variants and states
+- Pending/running status animates the title via TextShimmer.
+
+### Behavior
+- Uses Collapsible; can defer content rendering until open.
+- Locked state prevents closing.
+
+### Accessibility
+- TODO: confirm trigger semantics and aria labeling.
+
+### Theming/tokens
+- Uses \`data-component="tool-trigger"\` and related slots.
+
+`
+
+const story = create({
+  title: "UI/Basic Tool",
+  mod,
+  args: {
+    icon: "mcp",
+    defaultOpen: true,
+    trigger: {
+      title: "Basic Tool",
+      subtitle: "Example subtitle",
+      args: ["--flag", "value"],
+    },
+    children: "Details content",
+  },
+})
+
+export default {
+  title: "UI/Basic Tool",
+  id: "components-basic-tool",
+  component: story.meta.component,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = story.Basic
+
+export const Pending = {
+  args: {
+    status: "pending",
+    trigger: {
+      title: "Running tool",
+      subtitle: "Working...",
+    },
+    children: "Progress details",
+  },
+}
+
+export const Locked = {
+  args: {
+    locked: true,
+    trigger: {
+      title: "Locked tool",
+      subtitle: "Cannot close",
+    },
+    children: "Locked details",
+  },
+}
+
+export const Deferred = {
+  args: {
+    defer: true,
+    defaultOpen: false,
+    trigger: {
+      title: "Deferred tool",
+      subtitle: "Content mounts on open",
+    },
+    children: "Deferred content",
+  },
+}
+
+export const ForceOpen = {
+  args: {
+    forceOpen: true,
+    trigger: {
+      title: "Forced open",
+      subtitle: "Cannot close",
+    },
+    children: "Forced content",
+  },
+}
+
+export const HideDetails = {
+  args: {
+    hideDetails: true,
+    trigger: {
+      title: "Summary only",
+      subtitle: "Details hidden",
+    },
+    children: "Hidden content",
+  },
+}
+
+export const SubtitleAction = {
+  render: () => {
+    const [message, setMessage] = createSignal("Subtitle not clicked")
+    return (
+      <div style={{ display: "grid", gap: "8px" }}>
+        <div style={{ "font-size": "12px", color: "var(--text-weak)" }}>{message()}</div>
+        <mod.BasicTool
+          icon="mcp"
+          trigger={{ title: "Clickable subtitle", subtitle: "Click me" }}
+          onSubtitleClick={() => setMessage("Subtitle clicked")}
+        >
+          Subtitle action details
+        </mod.BasicTool>
+      </div>
+    )
+  },
+}
--- a/packages/ui/src/components/button.stories.tsx
+++ b/packages/ui/src/components/button.stories.tsx
@@ -0,0 +1,108 @@
+// @ts-nocheck
+import { Button } from "./button"
+
+const docs = `### Overview
+Primary action button with size, variant, and optional icon support.
+
+Use \`IconButton\` for icon-only actions.
+
+### API
+- \`variant\`: "primary" | "secondary" | "ghost".
+- \`size\`: "small" | "normal" | "large".
+- \`icon\`: Icon name for a leading icon.
+- Inherits Kobalte Button props and native button attributes.
+
+### Variants and states
+- Variants: primary, secondary, ghost.
+- States: disabled.
+
+### Behavior
+- Renders an Icon when \`icon\` is set.
+
+### Accessibility
+- Provide clear label text; use \`aria-label\` for icon-only buttons.
+
+### Theming/tokens
+- Uses \`data-component="button"\` with size/variant data attributes.
+
+`
+
+export default {
+  title: "UI/Button",
+  id: "components-button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+  args: {
+    children: "Button",
+    variant: "secondary",
+    size: "normal",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "ghost"],
+    },
+    size: {
+      control: "select",
+      options: ["small", "normal", "large"],
+    },
+    icon: {
+      control: "select",
+      options: ["none", "check", "plus", "arrow-right"],
+      mapping: {
+        none: undefined,
+      },
+    },
+  },
+}
+
+export const Primary = {
+  args: {
+    variant: "primary",
+  },
+}
+
+export const Secondary = {}
+
+export const Ghost = {
+  args: {
+    variant: "ghost",
+  },
+}
+
+export const WithIcon = {
+  args: {
+    children: "Continue",
+    icon: "arrow-right",
+  },
+}
+
+export const Disabled = {
+  args: {
+    variant: "primary",
+    disabled: true,
+  },
+}
+
+export const Sizes = {
+  render: () => (
+    <div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
+      <Button size="small" variant="secondary">
+        Small
+      </Button>
+      <Button size="normal" variant="secondary">
+        Normal
+      </Button>
+      <Button size="large" variant="secondary">
+        Large
+      </Button>
+    </div>
+  ),
+}
--- a/packages/ui/src/components/card.stories.tsx
+++ b/packages/ui/src/components/card.stories.tsx
@@ -0,0 +1,90 @@
+// @ts-nocheck
+import { Card } from "./card"
+import { Button } from "./button"
+
+const docs = `### Overview
+Surface container for grouping related content and actions.
+
+Pair with \`Button\` or \`Tag\` for quick actions.
+
+### API
+- Optional: \`variant\` (normal, error, warning, success, info).
+- Accepts standard div props.
+
+### Variants and states
+- Semantic variants for status-driven messaging.
+
+### Behavior
+- Pure presentational container.
+
+### Accessibility
+- Provide headings or aria labels when used in isolation.
+
+### Theming/tokens
+- Uses \`data-component="card"\` with variant data attributes.
+
+`
+
+export default {
+  title: "UI/Card",
+  id: "components-card",
+  component: Card,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+  args: {
+    variant: "normal",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["normal", "error", "warning", "success", "info"],
+    },
+  },
+  render: (props: { variant?: "normal" | "error" | "warning" | "success" | "info" }) => {
+    return (
+      <Card variant={props.variant}>
+        <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+          <div style={{ flex: 1 }}>
+            <div style={{ fontWeight: 500 }}>Card title</div>
+            <div style={{ color: "var(--text-weak)", fontSize: "13px" }}>Small supporting text.</div>
+          </div>
+          <Button size="small" variant="ghost">
+            Action
+          </Button>
+        </div>
+      </Card>
+    )
+  },
+}
+
+export const Normal = {}
+
+export const Error = {
+  args: {
+    variant: "error",
+  },
+}
+
+export const Warning = {
+  args: {
+    variant: "warning",
+  },
+}
+
+export const Success = {
+  args: {
+    variant: "success",
+  },
+}
+
+export const Info = {
+  args: {
+    variant: "info",
+  },
+}
--- a/packages/ui/src/components/checkbox.stories.tsx
+++ b/packages/ui/src/components/checkbox.stories.tsx
@@ -0,0 +1,71 @@
+// @ts-nocheck
+import { Icon } from "./icon"
+import * as mod from "./checkbox"
+import { create } from "../storybook/scaffold"
+
+const docs = `### Overview
+Checkbox control for multi-select or agreement inputs.
+
+Use in forms and multi-select lists.
+
+### API
+- Uses Kobalte Checkbox props (\`checked\`, \`defaultChecked\`, \`onChange\`).
+- Optional: \`hideLabel\`, \`description\`, \`icon\`.
+- Children render as the label.
+
+### Variants and states
+- Checked/unchecked, indeterminate, disabled (via Kobalte).
+
+### Behavior
+- Controlled or uncontrolled usage.
+
+### Accessibility
+- TODO: confirm aria attributes from Kobalte.
+
+### Theming/tokens
+- Uses \`data-component="checkbox"\` and related slots.
+
+`
+
+const story = create({ title: "UI/Checkbox", mod, args: { children: "Checkbox", defaultChecked: true } })
+export default {
+  title: "UI/Checkbox",
+  id: "components-checkbox",
+  component: story.meta.component,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = story.Basic
+
+export const States = {
+  render: () => (
+    <div style={{ display: "grid", gap: "12px" }}>
+      <mod.Checkbox defaultChecked>Checked</mod.Checkbox>
+      <mod.Checkbox>Unchecked</mod.Checkbox>
+      <mod.Checkbox disabled>Disabled</mod.Checkbox>
+      <mod.Checkbox description="Helper text">With description</mod.Checkbox>
+    </div>
+  ),
+}
+
+export const CustomIcon = {
+  render: () => (
+    <mod.Checkbox icon={<Icon name="check" size="small" />} defaultChecked>
+      Custom icon
+    </mod.Checkbox>
+  ),
+}
+
+export const HiddenLabel = {
+  args: {
+    children: "Hidden label",
+    hideLabel: true,
+  },
+}
--- a/packages/ui/src/components/code.css
+++ b/packages/ui/src/components/code.css
@@ -1,4 +0,0 @@
-[data-component="code"] {
-  content-visibility: auto;
-  overflow: hidden;
-}
--- a/packages/ui/src/components/code.stories.tsx
+++ b/packages/ui/src/components/code.stories.tsx
@@ -0,0 +1,70 @@
+// @ts-nocheck
+import * as mod from "./code"
+import { create } from "../storybook/scaffold"
+import { code } from "../storybook/fixtures"
+
+const docs = `### Overview
+Syntax-highlighted code viewer with selection support and large-file virtualization.
+
+Use alongside \`LineComment\` and \`Diff\` in review workflows.
+
+### API
+- Required: \`file\` with file name + contents.
+- Optional: \`language\`, \`annotations\`, \`selectedLines\`, \`commentedLines\`.
+- Optional callbacks: \`onRendered\`, \`onLineSelectionEnd\`.
+
+### Variants and states
+- Supports large-file virtualization automatically.
+
+### Behavior
+- Re-renders when \`file\` or rendering options change.
+- Optional line selection integrates with selection callbacks.
+
+### Accessibility
+- TODO: confirm keyboard find and selection behavior.
+
+### Theming/tokens
+- Uses \`data-component="code"\` and Pierre CSS variables from \`styleVariables\`.
+
+`
+
+const story = create({
+  title: "UI/Code",
+  mod,
+  args: {
+    file: code,
+    language: "ts",
+  },
+})
+
+export default {
+  title: "UI/Code",
+  id: "components-code",
+  component: story.meta.component,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = story.Basic
+
+export const SelectedLines = {
+  args: {
+    enableLineSelection: true,
+    selectedLines: { start: 2, end: 4 },
+  },
+}
+
+export const CommentedLines = {
+  args: {
+    commentedLines: [
+      { start: 1, end: 1 },
+      { start: 5, end: 6 },
+    ],
+  },
+}
--- a/packages/ui/src/components/code.tsx
+++ b/packages/ui/src/components/code.tsx
--- a/packages/ui/src/components/collapsible.stories.tsx
+++ b/packages/ui/src/components/collapsible.stories.tsx
@@ -0,0 +1,86 @@
+// @ts-nocheck
+import * as mod from "./collapsible"
+
+const docs = `### Overview
+Toggleable content region with optional arrow indicator.
+
+Compose \`Collapsible.Trigger\`, \`Collapsible.Content\`, and \`Collapsible.Arrow\`.
+
+### API
+- Root accepts Kobalte Collapsible props (\`open\`, \`defaultOpen\`, \`onOpenChange\`).
+- \`variant\` controls styling ("normal" | "ghost").
+
+### Variants and states
+- Normal and ghost variants.
+- Open/closed states.
+
+### Behavior
+- Trigger toggles the content visibility.
+
+### Accessibility
+- TODO: confirm ARIA attributes provided by Kobalte.
+
+### Theming/tokens
+- Uses \`data-component="collapsible"\` and slots for trigger/content/arrow.
+
+`
+
+export default {
+  title: "UI/Collapsible",
+  id: "components-collapsible",
+  component: mod.Collapsible,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["normal", "ghost"],
+    },
+  },
+}
+
+export const Basic = {
+  args: {
+    variant: "normal",
+    defaultOpen: true,
+  },
+  render: (props) => (
+    <mod.Collapsible {...props}>
+      <mod.Collapsible.Trigger data-slot="collapsible-trigger">
+        <div style={{ display: "flex", "align-items": "center", gap: "8px" }}>
+          <span>Details</span>
+          <mod.Collapsible.Arrow />
+        </div>
+      </mod.Collapsible.Trigger>
+      <mod.Collapsible.Content data-slot="collapsible-content">
+        <div style={{ color: "var(--text-weak)", "padding-top": "8px" }}>Optional details sit here.</div>
+      </mod.Collapsible.Content>
+    </mod.Collapsible>
+  ),
+}
+
+export const Ghost = {
+  args: {
+    variant: "ghost",
+    defaultOpen: false,
+  },
+  render: (props) => (
+    <mod.Collapsible {...props}>
+      <mod.Collapsible.Trigger data-slot="collapsible-trigger">
+        <div style={{ display: "flex", "align-items": "center", gap: "8px" }}>
+          <span>Ghost trigger</span>
+          <mod.Collapsible.Arrow />
+        </div>
+      </mod.Collapsible.Trigger>
+      <mod.Collapsible.Content data-slot="collapsible-content">
+        <div style={{ color: "var(--text-weak)", "padding-top": "8px" }}>Ghost content.</div>
+      </mod.Collapsible.Content>
+    </mod.Collapsible>
+  ),
+}
--- a/packages/ui/src/components/context-menu.stories.tsx
+++ b/packages/ui/src/components/context-menu.stories.tsx
@@ -0,0 +1,113 @@
+// @ts-nocheck
+import * as mod from "./context-menu"
+
+const docs = `### Overview
+Context menu for right-click interactions with composable items and submenus.
+
+Use \`ItemLabel\` and \`ItemDescription\` for rich items.
+
+### API
+- Root accepts Kobalte ContextMenu props (\`open\`, \`defaultOpen\`, \`onOpenChange\`).
+- Compose \`Trigger\`, \`Content\`, \`Item\`, \`Separator\`, and optional \`Sub\` sections.
+
+### Variants and states
+- Supports grouped sections and nested submenus.
+
+### Behavior
+- Opens on context menu gesture over the trigger element.
+
+### Accessibility
+- TODO: confirm keyboard and focus behavior from Kobalte.
+
+### Theming/tokens
+- Uses \`data-component="context-menu"\` and slot attributes for styling.
+
+`
+
+export default {
+  title: "UI/ContextMenu",
+  id: "components-context-menu",
+  component: mod.ContextMenu,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = {
+  render: () => (
+    <mod.ContextMenu defaultOpen>
+      <mod.ContextMenu.Trigger>
+        <div
+          style={{
+            padding: "20px",
+            border: "1px dashed var(--border-weak)",
+            "border-radius": "8px",
+            color: "var(--text-weak)",
+          }}
+        >
+          Right click (or open) here
+        </div>
+      </mod.ContextMenu.Trigger>
+      <mod.ContextMenu.Portal>
+        <mod.ContextMenu.Content>
+          <mod.ContextMenu.Group>
+            <mod.ContextMenu.GroupLabel>Actions</mod.ContextMenu.GroupLabel>
+            <mod.ContextMenu.Item>
+              <mod.ContextMenu.ItemLabel>Copy</mod.ContextMenu.ItemLabel>
+            </mod.ContextMenu.Item>
+            <mod.ContextMenu.Item>
+              <mod.ContextMenu.ItemLabel>Paste</mod.ContextMenu.ItemLabel>
+            </mod.ContextMenu.Item>
+          </mod.ContextMenu.Group>
+          <mod.ContextMenu.Separator />
+          <mod.ContextMenu.Sub>
+            <mod.ContextMenu.SubTrigger>More</mod.ContextMenu.SubTrigger>
+            <mod.ContextMenu.SubContent>
+              <mod.ContextMenu.Item>
+                <mod.ContextMenu.ItemLabel>Duplicate</mod.ContextMenu.ItemLabel>
+              </mod.ContextMenu.Item>
+              <mod.ContextMenu.Item>
+                <mod.ContextMenu.ItemLabel>Move</mod.ContextMenu.ItemLabel>
+              </mod.ContextMenu.Item>
+            </mod.ContextMenu.SubContent>
+          </mod.ContextMenu.Sub>
+        </mod.ContextMenu.Content>
+      </mod.ContextMenu.Portal>
+    </mod.ContextMenu>
+  ),
+}
+
+export const CheckboxRadio = {
+  render: () => (
+    <mod.ContextMenu defaultOpen>
+      <mod.ContextMenu.Trigger>
+        <div
+          style={{
+            padding: "20px",
+            border: "1px dashed var(--border-weak)",
+            "border-radius": "8px",
+            color: "var(--text-weak)",
+          }}
+        >
+          Right click (or open) here
+        </div>
+      </mod.ContextMenu.Trigger>
+      <mod.ContextMenu.Portal>
+        <mod.ContextMenu.Content>
+          <mod.ContextMenu.CheckboxItem checked>Show line numbers</mod.ContextMenu.CheckboxItem>
+          <mod.ContextMenu.CheckboxItem>Wrap lines</mod.ContextMenu.CheckboxItem>
+          <mod.ContextMenu.Separator />
+          <mod.ContextMenu.RadioGroup value="compact">
+            <mod.ContextMenu.RadioItem value="compact">Compact</mod.ContextMenu.RadioItem>
+            <mod.ContextMenu.RadioItem value="comfortable">Comfortable</mod.ContextMenu.RadioItem>
+          </mod.ContextMenu.RadioGroup>
+        </mod.ContextMenu.Content>
+      </mod.ContextMenu.Portal>
+    </mod.ContextMenu>
+  ),
+}
--- a/packages/ui/src/components/dialog.stories.tsx
+++ b/packages/ui/src/components/dialog.stories.tsx
@@ -0,0 +1,173 @@
+// @ts-nocheck
+import { onMount } from "solid-js"
+import * as mod from "./dialog"
+import { Button } from "./button"
+import { useDialog } from "../context/dialog"
+
+const docs = `### Overview
+Dialog content wrapper used with the DialogProvider for modal flows.
+
+Provide concise title/description and keep body focused.
+
+### API
+- Optional: \`title\`, \`description\`, \`action\`.
+- \`size\`: normal | large | x-large.
+- \`fit\` and \`transition\` control layout and animation.
+
+### Variants and states
+- Sizes and optional header/action controls.
+
+### Behavior
+- Intended to be rendered via \`useDialog().show\`.
+
+### Accessibility
+- TODO: confirm focus trapping and aria attributes from Kobalte Dialog.
+
+### Theming/tokens
+- Uses \`data-component="dialog"\` and slot attributes.
+
+`
+
+export default {
+  title: "UI/Dialog",
+  id: "components-dialog",
+  component: mod.Dialog,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = {
+  render: () => {
+    const dialog = useDialog()
+    const open = () =>
+      dialog.show(() => (
+        <mod.Dialog title="Dialog" description="Description">
+          Dialog body content.
+        </mod.Dialog>
+      ))
+
+    onMount(open)
+
+    return (
+      <Button variant="secondary" onClick={open}>
+        Open dialog
+      </Button>
+    )
+  },
+}
+
+export const Sizes = {
+  render: () => {
+    const dialog = useDialog()
+    return (
+      <div style={{ display: "flex", gap: "12px" }}>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            dialog.show(() => (
+              <mod.Dialog title="Normal" description="Normal size">
+                Normal dialog content.
+              </mod.Dialog>
+            ))
+          }
+        >
+          Normal
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            dialog.show(() => (
+              <mod.Dialog size="large" title="Large" description="Large size">
+                Large dialog content.
+              </mod.Dialog>
+            ))
+          }
+        >
+          Large
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            dialog.show(() => (
+              <mod.Dialog size="x-large" title="Extra large" description="X-large size">
+                X-large dialog content.
+              </mod.Dialog>
+            ))
+          }
+        >
+          X-Large
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const Transition = {
+  render: () => {
+    const dialog = useDialog()
+    return (
+      <Button
+        variant="secondary"
+        onClick={() =>
+          dialog.show(() => (
+            <mod.Dialog title="Transition" description="Animated" transition>
+              Transition enabled.
+            </mod.Dialog>
+          ))
+        }
+      >
+        Open transition dialog
+      </Button>
+    )
+  },
+}
+
+export const CustomAction = {
+  render: () => {
+    const dialog = useDialog()
+    return (
+      <Button
+        variant="secondary"
+        onClick={() =>
+          dialog.show(() => (
+            <mod.Dialog
+              title="Custom action"
+              description="Dialog with a custom header action"
+              action={<Button variant="ghost">Help</Button>}
+            >
+              Dialog body content.
+            </mod.Dialog>
+          ))
+        }
+      >
+        Open action dialog
+      </Button>
+    )
+  },
+}
+
+export const Fit = {
+  render: () => {
+    const dialog = useDialog()
+    return (
+      <Button
+        variant="secondary"
+        onClick={() =>
+          dialog.show(() => (
+            <mod.Dialog title="Fit content" fit>
+              Dialog fits its content.
+            </mod.Dialog>
+          ))
+        }
+      >
+        Open fit dialog
+      </Button>
+    )
+  },
+}
--- a/packages/ui/src/components/diff-changes.stories.tsx
+++ b/packages/ui/src/components/diff-changes.stories.tsx
@@ -0,0 +1,81 @@
+// @ts-nocheck
+import * as mod from "./diff-changes"
+import { create } from "../storybook/scaffold"
+import { changes } from "../storybook/fixtures"
+
+const docs = `### Overview
+Summarize additions/deletions as text or compact bars.
+
+Pair with \`Diff\`/\`DiffSSR\` to contextualize a change set.
+
+### API
+- Required: \`changes\` as { additions, deletions } or an array of those objects.
+- Optional: \`variant\` ("default" | "bars").
+
+### Variants and states
+- Default text summary or bar visualization.
+- Handles zero-change state (renders nothing in default variant).
+
+### Behavior
+- Aggregates arrays into total additions/deletions.
+
+### Accessibility
+- Ensure surrounding context conveys meaning of the counts/bars.
+
+### Theming/tokens
+- Uses \`data-component="diff-changes"\` and diff color tokens.
+
+`
+
+const story = create({
+  title: "UI/DiffChanges",
+  mod,
+  args: {
+    changes,
+    variant: "default",
+  },
+})
+
+export default {
+  title: "UI/DiffChanges",
+  id: "components-diff-changes",
+  component: story.meta.component,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "bars"],
+    },
+  },
+}
+
+export const Default = story.Basic
+
+export const Bars = {
+  args: {
+    variant: "bars",
+  },
+}
+
+export const MultipleFiles = {
+  args: {
+    changes: [
+      { additions: 4, deletions: 1 },
+      { additions: 8, deletions: 3 },
+      { additions: 2, deletions: 0 },
+    ],
+  },
+}
+
+export const Zero = {
+  args: {
+    changes: { additions: 0, deletions: 0 },
+  },
+}
--- a/packages/ui/src/components/diff-ssr.stories.tsx
+++ b/packages/ui/src/components/diff-ssr.stories.tsx
@@ -0,0 +1,97 @@
+// @ts-nocheck
+import { preloadMultiFileDiff } from "@pierre/diffs/ssr"
+import { createResource, Show } from "solid-js"
+import * as mod from "./diff-ssr"
+import { createDefaultOptions } from "../pierre"
+import { WorkerPoolProvider } from "../context/worker-pool"
+import { getWorkerPools } from "../pierre/worker"
+import { diff } from "../storybook/fixtures"
+
+const docs = `### Overview
+Server-rendered diff hydration component for preloaded Pierre diff output.
+
+Use alongside server routes that preload diffs.
+Pair with \`DiffChanges\` for summaries.
+
+### API
+- Required: \`before\`, \`after\`, and \`preloadedDiff\` from \`preloadMultiFileDiff\`.
+- Optional: \`diffStyle\`, \`annotations\`, \`selectedLines\`, \`commentedLines\`.
+
+### Variants and states
+- Unified/split styles (preloaded must match the style used during preload).
+
+### Behavior
+- Hydrates pre-rendered diff HTML into a live diff instance.
+- Requires a worker pool provider for syntax highlighting.
+
+### Accessibility
+- TODO: confirm keyboard behavior from the Pierre diff engine.
+
+### Theming/tokens
+- Uses \`data-component="diff"\` with Pierre CSS variables and theme tokens.
+
+`
+
+const load = async () => {
+  return preloadMultiFileDiff({
+    oldFile: diff.before,
+    newFile: diff.after,
+    options: createDefaultOptions("unified"),
+  })
+}
+
+const loadSplit = async () => {
+  return preloadMultiFileDiff({
+    oldFile: diff.before,
+    newFile: diff.after,
+    options: createDefaultOptions("split"),
+  })
+}
+
+export default {
+  title: "UI/DiffSSR",
+  id: "components-diff-ssr",
+  component: mod.Diff,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = {
+  render: () => {
+    const [data] = createResource(load)
+    return (
+      <WorkerPoolProvider pools={getWorkerPools()}>
+        <Show when={data()} fallback={<div>Loading pre-rendered diff...</div>}>
+          {(preloaded) => (
+            <div style={{ "max-width": "960px" }}>
+              <mod.Diff before={diff.before} after={diff.after} diffStyle="unified" preloadedDiff={preloaded()} />
+            </div>
+          )}
+        </Show>
+      </WorkerPoolProvider>
+    )
+  },
+}
+
+export const Split = {
+  render: () => {
+    const [data] = createResource(loadSplit)
+    return (
+      <WorkerPoolProvider pools={getWorkerPools()}>
+        <Show when={data()} fallback={<div>Loading pre-rendered diff...</div>}>
+          {(preloaded) => (
+            <div style={{ "max-width": "960px" }}>
+              <mod.Diff before={diff.before} after={diff.after} diffStyle="split" preloadedDiff={preloaded()} />
+            </div>
+          )}
+        </Show>
+      </WorkerPoolProvider>
+    )
+  },
+}
--- a/packages/ui/src/components/diff-ssr.tsx
+++ b/packages/ui/src/components/diff-ssr.tsx
@@ -1,317 +0,0 @@
-import { DIFFS_TAG_NAME, FileDiff, type SelectedLineRange, VirtualizedFileDiff } from "@pierre/diffs"
-import { PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
-import { createEffect, onCleanup, onMount, Show, splitProps } from "solid-js"
-import { Dynamic, isServer } from "solid-js/web"
-import { createDefaultOptions, styleVariables, type DiffProps } from "../pierre"
-import { acquireVirtualizer, virtualMetrics } from "../pierre/virtualizer"
-import { useWorkerPool } from "../context/worker-pool"
-
-export type SSRDiffProps<T = {}> = DiffProps<T> & {
-  preloadedDiff: PreloadMultiFileDiffResult<T>
-}
-
-export function Diff<T>(props: SSRDiffProps<T>) {
-  let container!: HTMLDivElement
-  let fileDiffRef!: HTMLElement
-  const [local, others] = splitProps(props, [
-    "before",
-    "after",
-    "class",
-    "classList",
-    "annotations",
-    "selectedLines",
-    "commentedLines",
-  ])
-  const workerPool = useWorkerPool(props.diffStyle)
-
-  let fileDiffInstance: FileDiff<T> | undefined
-  let sharedVirtualizer: NonNullable<ReturnType<typeof acquireVirtualizer>> | undefined
-  const cleanupFunctions: Array<() => void> = []
-
-  const getRoot = () => fileDiffRef?.shadowRoot ?? undefined
-
-  const getVirtualizer = () => {
-    if (sharedVirtualizer) return sharedVirtualizer.virtualizer
-
-    const result = acquireVirtualizer(container)
-    if (!result) return
-
-    sharedVirtualizer = result
-    return result.virtualizer
-  }
-
-  const applyScheme = () => {
-    const scheme = document.documentElement.dataset.colorScheme
-    if (scheme === "dark" || scheme === "light") {
-      fileDiffRef.dataset.colorScheme = scheme
-      return
-    }
-
-    fileDiffRef.removeAttribute("data-color-scheme")
-  }
-
-  const lineIndex = (split: boolean, element: HTMLElement) => {
-    const raw = element.dataset.lineIndex
-    if (!raw) return
-    const values = raw
-      .split(",")
-      .map((value) => parseInt(value, 10))
-      .filter((value) => !Number.isNaN(value))
-    if (values.length === 0) return
-    if (!split) return values[0]
-    if (values.length === 2) return values[1]
-    return values[0]
-  }
-
-  const rowIndex = (root: ShadowRoot, split: boolean, line: number, side: "additions" | "deletions" | undefined) => {
-    const nodes = Array.from(root.querySelectorAll(`[data-line="${line}"], [data-alt-line="${line}"]`)).filter(
-      (node): node is HTMLElement => node instanceof HTMLElement,
-    )
-    if (nodes.length === 0) return
-
-    const targetSide = side ?? "additions"
-
-    for (const node of nodes) {
-      if (findSide(node) === targetSide) return lineIndex(split, node)
-      if (parseInt(node.dataset.altLine ?? "", 10) === line) return lineIndex(split, node)
-    }
-  }
-
-  const fixSelection = (range: SelectedLineRange | null) => {
-    if (!range) return range
-    const root = getRoot()
-    if (!root) return
-
-    const diffs = root.querySelector("[data-diff]")
-    if (!(diffs instanceof HTMLElement)) return
-
-    const split = diffs.dataset.diffType === "split"
-
-    const start = rowIndex(root, split, range.start, range.side)
-    const end = rowIndex(root, split, range.end, range.endSide ?? range.side)
-
-    if (start === undefined || end === undefined) {
-      if (root.querySelector("[data-line], [data-alt-line]") == null) return
-      return null
-    }
-    if (start <= end) return range
-
-    const side = range.endSide ?? range.side
-    const swapped: SelectedLineRange = {
-      start: range.end,
-      end: range.start,
-    }
-    if (side) swapped.side = side
-    if (range.endSide && range.side) swapped.endSide = range.side
-
-    return swapped
-  }
-
-  const setSelectedLines = (range: SelectedLineRange | null, attempt = 0) => {
-    const diff = fileDiffInstance
-    if (!diff) return
-
-    const fixed = fixSelection(range)
-    if (fixed === undefined) {
-      if (attempt >= 120) return
-      requestAnimationFrame(() => setSelectedLines(range, attempt + 1))
-      return
-    }
-
-    diff.setSelectedLines(fixed)
-  }
-
-  const findSide = (element: HTMLElement): "additions" | "deletions" => {
-    const line = element.closest("[data-line], [data-alt-line]")
-    if (line instanceof HTMLElement) {
-      const type = line.dataset.lineType
-      if (type === "change-deletion") return "deletions"
-      if (type === "change-addition" || type === "change-additions") return "additions"
-    }
-
-    const code = element.closest("[data-code]")
-    if (!(code instanceof HTMLElement)) return "additions"
-    return code.hasAttribute("data-deletions") ? "deletions" : "additions"
-  }
-
-  const applyCommentedLines = (ranges: SelectedLineRange[]) => {
-    const root = getRoot()
-    if (!root) return
-
-    const existing = Array.from(root.querySelectorAll("[data-comment-selected]"))
-    for (const node of existing) {
-      if (!(node instanceof HTMLElement)) continue
-      node.removeAttribute("data-comment-selected")
-    }
-
-    const diffs = root.querySelector("[data-diff]")
-    if (!(diffs instanceof HTMLElement)) return
-
-    const split = diffs.dataset.diffType === "split"
-
-    const rows = Array.from(diffs.querySelectorAll("[data-line-index]")).filter(
-      (node): node is HTMLElement => node instanceof HTMLElement,
-    )
-    if (rows.length === 0) return
-
-    const annotations = Array.from(diffs.querySelectorAll("[data-line-annotation]")).filter(
-      (node): node is HTMLElement => node instanceof HTMLElement,
-    )
-
-    const lineIndex = (element: HTMLElement) => {
-      const raw = element.dataset.lineIndex
-      if (!raw) return
-      const values = raw
-        .split(",")
-        .map((value) => parseInt(value, 10))
-        .filter((value) => !Number.isNaN(value))
-      if (values.length === 0) return
-      if (!split) return values[0]
-      if (values.length === 2) return values[1]
-      return values[0]
-    }
-
-    const rowIndex = (line: number, side: "additions" | "deletions" | undefined) => {
-      const nodes = Array.from(root.querySelectorAll(`[data-line="${line}"], [data-alt-line="${line}"]`)).filter(
-        (node): node is HTMLElement => node instanceof HTMLElement,
-      )
-      if (nodes.length === 0) return
-
-      const targetSide = side ?? "additions"
-
-      for (const node of nodes) {
-        if (findSide(node) === targetSide) return lineIndex(node)
-        if (parseInt(node.dataset.altLine ?? "", 10) === line) return lineIndex(node)
-      }
-    }
-
-    for (const range of ranges) {
-      const start = rowIndex(range.start, range.side)
-      if (start === undefined) continue
-
-      const end = (() => {
-        const same = range.end === range.start && (range.endSide == null || range.endSide === range.side)
-        if (same) return start
-        return rowIndex(range.end, range.endSide ?? range.side)
-      })()
-      if (end === undefined) continue
-
-      const first = Math.min(start, end)
-      const last = Math.max(start, end)
-
-      for (const row of rows) {
-        const idx = lineIndex(row)
-        if (idx === undefined) continue
-        if (idx < first || idx > last) continue
-        row.setAttribute("data-comment-selected", "")
-      }
-
-      for (const annotation of annotations) {
-        const idx = parseInt(annotation.dataset.lineAnnotation?.split(",")[1] ?? "", 10)
-        if (Number.isNaN(idx)) continue
-        if (idx < first || idx > last) continue
-        annotation.setAttribute("data-comment-selected", "")
-      }
-    }
-  }
-
-  onMount(() => {
-    if (isServer || !props.preloadedDiff) return
-
-    applyScheme()
-
-    if (typeof MutationObserver !== "undefined") {
-      const root = document.documentElement
-      const monitor = new MutationObserver(() => applyScheme())
-      monitor.observe(root, { attributes: true, attributeFilter: ["data-color-scheme"] })
-      onCleanup(() => monitor.disconnect())
-    }
-
-    const virtualizer = getVirtualizer()
-
-    fileDiffInstance = virtualizer
-      ? new VirtualizedFileDiff<T>(
-          {
-            ...createDefaultOptions(props.diffStyle),
-            ...others,
-            ...props.preloadedDiff,
-          },
-          virtualizer,
-          virtualMetrics,
-          workerPool,
-        )
-      : new FileDiff<T>(
-          {
-            ...createDefaultOptions(props.diffStyle),
-            ...others,
-            ...props.preloadedDiff,
-          },
-          workerPool,
-        )
-    // @ts-expect-error - fileContainer is private but needed for SSR hydration
-    fileDiffInstance.fileContainer = fileDiffRef
-    fileDiffInstance.hydrate({
-      oldFile: local.before,
-      newFile: local.after,
-      lineAnnotations: local.annotations,
-      fileContainer: fileDiffRef,
-      containerWrapper: container,
-    })
-
-    setSelectedLines(local.selectedLines ?? null)
-
-    createEffect(() => {
-      fileDiffInstance?.setLineAnnotations(local.annotations ?? [])
-    })
-
-    createEffect(() => {
-      setSelectedLines(local.selectedLines ?? null)
-    })
-
-    createEffect(() => {
-      const ranges = local.commentedLines ?? []
-      requestAnimationFrame(() => applyCommentedLines(ranges))
-    })
-
-    // Hydrate annotation slots with interactive SolidJS components
-    // if (props.annotations.length > 0 && props.renderAnnotation != null) {
-    //   for (const annotation of props.annotations) {
-    //     const slotName = `annotation-${annotation.side}-${annotation.lineNumber}`;
-    //     const slotElement = fileDiffRef.querySelector(
-    //       `[slot="${slotName}"]`
-    //     ) as HTMLElement;
-    //
-    //     if (slotElement != null) {
-    //       // Clear the static server-rendered content from the slot
-    //       slotElement.innerHTML = '';
-    //
-    //       // Mount a fresh SolidJS component into this slot using render().
-    //       // This enables full SolidJS reactivity (signals, effects, etc.)
-    //       const dispose = render(
-    //         () => props.renderAnnotation!(annotation),
-    //         slotElement
-    //       );
-    //       cleanupFunctions.push(dispose);
-    //     }
-    //   }
-    // }
-  })
-
-  onCleanup(() => {
-    // Clean up FileDiff event handlers and dispose SolidJS components
-    fileDiffInstance?.cleanUp()
-    cleanupFunctions.forEach((dispose) => dispose())
-    sharedVirtualizer?.release()
-    sharedVirtualizer = undefined
-  })
-
-  return (
-    <div data-component="diff" style={styleVariables} ref={container}>
-      <Dynamic component={DIFFS_TAG_NAME} ref={fileDiffRef} id="ssr-diff">
-        <Show when={isServer}>
-          <template shadowrootmode="open" innerHTML={props.preloadedDiff.prerenderedHTML} />
-        </Show>
-      </Dynamic>
-    </div>
-  )
-}
--- a/packages/ui/src/components/diff.stories.tsx
+++ b/packages/ui/src/components/diff.stories.tsx
@@ -0,0 +1,96 @@
+// @ts-nocheck
+import * as mod from "./diff"
+import { create } from "../storybook/scaffold"
+import { diff } from "../storybook/fixtures"
+
+const docs = `### Overview
+Render a code diff with OpenCode styling using the Pierre diff engine.
+
+Pair with \`DiffChanges\` for summary counts.
+Use \`LineComment\` or external UI for annotation workflows.
+
+### API
+- Required: \`before\` and \`after\` file contents (name + contents).
+- Optional: \`diffStyle\` ("unified" | "split"), \`annotations\`, \`selectedLines\`, \`commentedLines\`.
+- Optional interaction: \`enableLineSelection\`, \`onLineSelectionEnd\`.
+- Passes through Pierre FileDiff options (see component source).
+
+### Variants and states
+- Unified and split diff styles.
+- Optional line selection + commented line highlighting.
+
+### Behavior
+- Re-renders when \`before\`/\`after\` or diff options change.
+- Line selection uses mouse drag/selection when enabled.
+
+### Accessibility
+- TODO: confirm keyboard behavior from the Pierre diff engine.
+- Provide surrounding labels or headings when used as a standalone view.
+
+### Theming/tokens
+- Uses \`data-component="diff"\` and Pierre CSS variables from \`styleVariables\`.
+- Colors derive from theme tokens (diff add/delete, background, text).
+
+`
+
+const story = create({
+  title: "UI/Diff",
+  mod,
+  args: {
+    before: diff.before,
+    after: diff.after,
+    diffStyle: "unified",
+  },
+})
+
+export default {
+  title: "UI/Diff",
+  id: "components-diff",
+  component: story.meta.component,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+  argTypes: {
+    diffStyle: {
+      control: "select",
+      options: ["unified", "split"],
+    },
+    enableLineSelection: {
+      control: "boolean",
+    },
+  },
+}
+
+export const Unified = story.Basic
+
+export const Split = {
+  args: {
+    diffStyle: "split",
+  },
+}
+
+export const Selectable = {
+  args: {
+    enableLineSelection: true,
+  },
+}
+
+export const SelectedLines = {
+  args: {
+    selectedLines: { start: 2, end: 4 },
+  },
+}
+
+export const CommentedLines = {
+  args: {
+    commentedLines: [
+      { start: 1, end: 1 },
+      { start: 4, end: 4 },
+    ],
+  },
+}
--- a/packages/ui/src/components/diff.tsx
+++ b/packages/ui/src/components/diff.tsx
@@ -1,652 +0,0 @@
-import { sampledChecksum } from "@opencode-ai/util/encode"
-import { FileDiff, type FileDiffOptions, type SelectedLineRange, VirtualizedFileDiff } from "@pierre/diffs"
-import { createMediaQuery } from "@solid-primitives/media"
-import { createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js"
-import { createDefaultOptions, type DiffProps, styleVariables } from "../pierre"
-import { acquireVirtualizer, virtualMetrics } from "../pierre/virtualizer"
-import { getWorkerPool } from "../pierre/worker"
-
-type SelectionSide = "additions" | "deletions"
-
-function findElement(node: Node | null): HTMLElement | undefined {
-  if (!node) return
-  if (node instanceof HTMLElement) return node
-  return node.parentElement ?? undefined
-}
-
-function findLineNumber(node: Node | null): number | undefined {
-  const element = findElement(node)
-  if (!element) return
-
-  const line = element.closest("[data-line], [data-alt-line]")
-  if (!(line instanceof HTMLElement)) return
-
-  const value = (() => {
-    const primary = parseInt(line.dataset.line ?? "", 10)
-    if (!Number.isNaN(primary)) return primary
-
-    const alt = parseInt(line.dataset.altLine ?? "", 10)
-    if (!Number.isNaN(alt)) return alt
-  })()
-
-  return value
-}
-
-function findSide(node: Node | null): SelectionSide | undefined {
-  const element = findElement(node)
-  if (!element) return
-
-  const line = element.closest("[data-line], [data-alt-line]")
-  if (line instanceof HTMLElement) {
-    const type = line.dataset.lineType
-    if (type === "change-deletion") return "deletions"
-    if (type === "change-addition" || type === "change-additions") return "additions"
-  }
-
-  const code = element.closest("[data-code]")
-  if (!(code instanceof HTMLElement)) return
-
-  if (code.hasAttribute("data-deletions")) return "deletions"
-  return "additions"
-}
-
-export function Diff<T>(props: DiffProps<T>) {
-  let container!: HTMLDivElement
-  let observer: MutationObserver | undefined
-  let sharedVirtualizer: NonNullable<ReturnType<typeof acquireVirtualizer>> | undefined
-  let renderToken = 0
-  let selectionFrame: number | undefined
-  let dragFrame: number | undefined
-  let dragStart: number | undefined
-  let dragEnd: number | undefined
-  let dragSide: SelectionSide | undefined
-  let dragEndSide: SelectionSide | undefined
-  let dragMoved = false
-  let lastSelection: SelectedLineRange | null = null
-  let pendingSelectionEnd = false
-
-  const [local, others] = splitProps(props, [
-    "before",
-    "after",
-    "class",
-    "classList",
-    "annotations",
-    "selectedLines",
-    "commentedLines",
-    "onRendered",
-  ])
-
-  const mobile = createMediaQuery("(max-width: 640px)")
-
-  const large = createMemo(() => {
-    const before = typeof local.before?.contents === "string" ? local.before.contents : ""
-    const after = typeof local.after?.contents === "string" ? local.after.contents : ""
-    return Math.max(before.length, after.length) > 500_000
-  })
-
-  const largeOptions = {
-    lineDiffType: "none",
-    maxLineDiffLength: 0,
-    tokenizeMaxLineLength: 1,
-  } satisfies Pick<FileDiffOptions<T>, "lineDiffType" | "maxLineDiffLength" | "tokenizeMaxLineLength">
-
-  const options = createMemo<FileDiffOptions<T>>(() => {
-    const base = {
-      ...createDefaultOptions(props.diffStyle),
-      ...others,
-    }
-
-    const perf = large() ? { ...base, ...largeOptions } : base
-    if (!mobile()) return perf
-
-    return {
-      ...perf,
-      disableLineNumbers: true,
-    }
-  })
-
-  let instance: FileDiff<T> | undefined
-  const [current, setCurrent] = createSignal<FileDiff<T> | undefined>(undefined)
-  const [rendered, setRendered] = createSignal(0)
-
-  const getVirtualizer = () => {
-    if (sharedVirtualizer) return sharedVirtualizer.virtualizer
-
-    const result = acquireVirtualizer(container)
-    if (!result) return
-
-    sharedVirtualizer = result
-    return result.virtualizer
-  }
-
-  const getRoot = () => {
-    const host = container.querySelector("diffs-container")
-    if (!(host instanceof HTMLElement)) return
-
-    const root = host.shadowRoot
-    if (!root) return
-
-    return root
-  }
-
-  const applyScheme = () => {
-    const host = container.querySelector("diffs-container")
-    if (!(host instanceof HTMLElement)) return
-
-    const scheme = document.documentElement.dataset.colorScheme
-    if (scheme === "dark" || scheme === "light") {
-      host.dataset.colorScheme = scheme
-      return
-    }
-
-    host.removeAttribute("data-color-scheme")
-  }
-
-  const lineIndex = (split: boolean, element: HTMLElement) => {
-    const raw = element.dataset.lineIndex
-    if (!raw) return
-    const values = raw
-      .split(",")
-      .map((value) => parseInt(value, 10))
-      .filter((value) => !Number.isNaN(value))
-    if (values.length === 0) return
-    if (!split) return values[0]
-    if (values.length === 2) return values[1]
-    return values[0]
-  }
-
-  const rowIndex = (root: ShadowRoot, split: boolean, line: number, side: SelectionSide | undefined) => {
-    const nodes = Array.from(root.querySelectorAll(`[data-line="${line}"], [data-alt-line="${line}"]`)).filter(
-      (node): node is HTMLElement => node instanceof HTMLElement,
-    )
-    if (nodes.length === 0) return
-
-    const targetSide = side ?? "additions"
-
-    for (const node of nodes) {
-      if (findSide(node) === targetSide) return lineIndex(split, node)
-      if (parseInt(node.dataset.altLine ?? "", 10) === line) return lineIndex(split, node)
-    }
-  }
-
-  const fixSelection = (range: SelectedLineRange | null) => {
-    if (!range) return range
-    const root = getRoot()
-    if (!root) return
-
-    const diffs = root.querySelector("[data-diff]")
-    if (!(diffs instanceof HTMLElement)) return
-
-    const split = diffs.dataset.diffType === "split"
-
-    const start = rowIndex(root, split, range.start, range.side)
-    const end = rowIndex(root, split, range.end, range.endSide ?? range.side)
-    if (start === undefined || end === undefined) {
-      if (root.querySelector("[data-line], [data-alt-line]") == null) return
-      return null
-    }
-    if (start <= end) return range
-
-    const side = range.endSide ?? range.side
-    const swapped: SelectedLineRange = {
-      start: range.end,
-      end: range.start,
-    }
-
-    if (side) swapped.side = side
-    if (range.endSide && range.side) swapped.endSide = range.side
-
-    return swapped
-  }
-
-  const notifyRendered = () => {
-    observer?.disconnect()
-    observer = undefined
-    renderToken++
-
-    const token = renderToken
-    let settle = 0
-
-    const isReady = (root: ShadowRoot) => root.querySelector("[data-line]") != null
-
-    const notify = () => {
-      if (token !== renderToken) return
-
-      observer?.disconnect()
-      observer = undefined
-      requestAnimationFrame(() => {
-        if (token !== renderToken) return
-        setSelectedLines(lastSelection)
-        local.onRendered?.()
-      })
-    }
-
-    const schedule = () => {
-      settle++
-      const current = settle
-
-      requestAnimationFrame(() => {
-        if (token !== renderToken) return
-        if (current !== settle) return
-
-        requestAnimationFrame(() => {
-          if (token !== renderToken) return
-          if (current !== settle) return
-
-          notify()
-        })
-      })
-    }
-
-    const observeRoot = (root: ShadowRoot) => {
-      observer?.disconnect()
-      observer = new MutationObserver(() => {
-        if (token !== renderToken) return
-        if (!isReady(root)) return
-
-        schedule()
-      })
-
-      observer.observe(root, { childList: true, subtree: true })
-
-      if (!isReady(root)) return
-      schedule()
-    }
-
-    const root = getRoot()
-    if (typeof MutationObserver === "undefined") {
-      if (!root || !isReady(root)) return
-      setSelectedLines(lastSelection)
-      local.onRendered?.()
-      return
-    }
-
-    if (root) {
-      observeRoot(root)
-      return
-    }
-
-    observer = new MutationObserver(() => {
-      if (token !== renderToken) return
-
-      const root = getRoot()
-      if (!root) return
-
-      observeRoot(root)
-    })
-
-    observer.observe(container, { childList: true, subtree: true })
-  }
-
-  const applyCommentedLines = (ranges: SelectedLineRange[]) => {
-    const root = getRoot()
-    if (!root) return
-
-    const existing = Array.from(root.querySelectorAll("[data-comment-selected]"))
-    for (const node of existing) {
-      if (!(node instanceof HTMLElement)) continue
-      node.removeAttribute("data-comment-selected")
-    }
-
-    const diffs = root.querySelector("[data-diff]")
-    if (!(diffs instanceof HTMLElement)) return
-
-    const split = diffs.dataset.diffType === "split"
-
-    const rows = Array.from(diffs.querySelectorAll("[data-line-index]")).filter(
-      (node): node is HTMLElement => node instanceof HTMLElement,
-    )
-    if (rows.length === 0) return
-
-    const annotations = Array.from(diffs.querySelectorAll("[data-line-annotation]")).filter(
-      (node): node is HTMLElement => node instanceof HTMLElement,
-    )
-
-    for (const range of ranges) {
-      const start = rowIndex(root, split, range.start, range.side)
-      if (start === undefined) continue
-
-      const end = (() => {
-        const same = range.end === range.start && (range.endSide == null || range.endSide === range.side)
-        if (same) return start
-        return rowIndex(root, split, range.end, range.endSide ?? range.side)
-      })()
-      if (end === undefined) continue
-
-      const first = Math.min(start, end)
-      const last = Math.max(start, end)
-
-      for (const row of rows) {
-        const idx = lineIndex(split, row)
-        if (idx === undefined) continue
-        if (idx < first || idx > last) continue
-        row.setAttribute("data-comment-selected", "")
-      }
-
-      for (const annotation of annotations) {
-        const idx = parseInt(annotation.dataset.lineAnnotation?.split(",")[1] ?? "", 10)
-        if (Number.isNaN(idx)) continue
-        if (idx < first || idx > last) continue
-        annotation.setAttribute("data-comment-selected", "")
-      }
-    }
-  }
-
-  const setSelectedLines = (range: SelectedLineRange | null) => {
-    const active = current()
-    if (!active) return
-
-    const fixed = fixSelection(range)
-    if (fixed === undefined) {
-      lastSelection = range
-      return
-    }
-
-    lastSelection = fixed
-    active.setSelectedLines(fixed)
-  }
-
-  const updateSelection = () => {
-    const root = getRoot()
-    if (!root) return
-
-    const selection =
-      (root as unknown as { getSelection?: () => Selection | null }).getSelection?.() ?? window.getSelection()
-    if (!selection || selection.isCollapsed) return
-
-    const domRange =
-      (
-        selection as unknown as {
-          getComposedRanges?: (options?: { shadowRoots?: ShadowRoot[] }) => Range[]
-        }
-      ).getComposedRanges?.({ shadowRoots: [root] })?.[0] ??
-      (selection.rangeCount > 0 ? selection.getRangeAt(0) : undefined)
-
-    const startNode = domRange?.startContainer ?? selection.anchorNode
-    const endNode = domRange?.endContainer ?? selection.focusNode
-    if (!startNode || !endNode) return
-
-    if (!root.contains(startNode) || !root.contains(endNode)) return
-
-    const start = findLineNumber(startNode)
-    const end = findLineNumber(endNode)
-    if (start === undefined || end === undefined) return
-
-    const startSide = findSide(startNode)
-    const endSide = findSide(endNode)
-    const side = startSide ?? endSide
-
-    const selected: SelectedLineRange = {
-      start,
-      end,
-    }
-
-    if (side) selected.side = side
-    if (endSide && side && endSide !== side) selected.endSide = endSide
-
-    setSelectedLines(selected)
-  }
-
-  const scheduleSelectionUpdate = () => {
-    if (selectionFrame !== undefined) return
-
-    selectionFrame = requestAnimationFrame(() => {
-      selectionFrame = undefined
-      updateSelection()
-
-      if (!pendingSelectionEnd) return
-      pendingSelectionEnd = false
-      props.onLineSelectionEnd?.(lastSelection)
-    })
-  }
-
-  const updateDragSelection = () => {
-    if (dragStart === undefined || dragEnd === undefined) return
-
-    const selected: SelectedLineRange = {
-      start: dragStart,
-      end: dragEnd,
-    }
-
-    if (dragSide) selected.side = dragSide
-    if (dragEndSide && dragSide && dragEndSide !== dragSide) selected.endSide = dragEndSide
-
-    setSelectedLines(selected)
-  }
-
-  const scheduleDragUpdate = () => {
-    if (dragFrame !== undefined) return
-
-    dragFrame = requestAnimationFrame(() => {
-      dragFrame = undefined
-      updateDragSelection()
-    })
-  }
-
-  const lineFromMouseEvent = (event: MouseEvent) => {
-    const path = event.composedPath()
-
-    let numberColumn = false
-    let line: number | undefined
-    let side: SelectionSide | undefined
-
-    for (const item of path) {
-      if (!(item instanceof HTMLElement)) continue
-
-      numberColumn = numberColumn || item.dataset.columnNumber != null
-
-      if (side === undefined) {
-        const type = item.dataset.lineType
-        if (type === "change-deletion") side = "deletions"
-        if (type === "change-addition" || type === "change-additions") side = "additions"
-      }
-
-      if (side === undefined && item.dataset.code != null) {
-        side = item.hasAttribute("data-deletions") ? "deletions" : "additions"
-      }
-
-      if (line === undefined) {
-        const primary = item.dataset.line ? parseInt(item.dataset.line, 10) : Number.NaN
-        if (!Number.isNaN(primary)) {
-          line = primary
-        } else {
-          const alt = item.dataset.altLine ? parseInt(item.dataset.altLine, 10) : Number.NaN
-          if (!Number.isNaN(alt)) line = alt
-        }
-      }
-
-      if (numberColumn && line !== undefined && side !== undefined) break
-    }
-
-    return { line, numberColumn, side }
-  }
-
-  const handleMouseDown = (event: MouseEvent) => {
-    if (props.enableLineSelection !== true) return
-    if (event.button !== 0) return
-
-    const { line, numberColumn, side } = lineFromMouseEvent(event)
-    if (numberColumn) return
-    if (line === undefined) return
-
-    dragStart = line
-    dragEnd = line
-    dragSide = side
-    dragEndSide = side
-    dragMoved = false
-  }
-
-  const handleMouseMove = (event: MouseEvent) => {
-    if (props.enableLineSelection !== true) return
-    if (dragStart === undefined) return
-
-    if ((event.buttons & 1) === 0) {
-      dragStart = undefined
-      dragEnd = undefined
-      dragSide = undefined
-      dragEndSide = undefined
-      dragMoved = false
-      return
-    }
-
-    const { line, side } = lineFromMouseEvent(event)
-    if (line === undefined) return
-
-    dragEnd = line
-    dragEndSide = side
-    dragMoved = true
-    scheduleDragUpdate()
-  }
-
-  const handleMouseUp = () => {
-    if (props.enableLineSelection !== true) return
-    if (dragStart === undefined) return
-
-    if (!dragMoved) {
-      pendingSelectionEnd = false
-      const line = dragStart
-      const selected: SelectedLineRange = {
-        start: line,
-        end: line,
-      }
-      if (dragSide) selected.side = dragSide
-      setSelectedLines(selected)
-      props.onLineSelectionEnd?.(lastSelection)
-      dragStart = undefined
-      dragEnd = undefined
-      dragSide = undefined
-      dragEndSide = undefined
-      dragMoved = false
-      return
-    }
-
-    pendingSelectionEnd = true
-    scheduleDragUpdate()
-    scheduleSelectionUpdate()
-
-    dragStart = undefined
-    dragEnd = undefined
-    dragSide = undefined
-    dragEndSide = undefined
-    dragMoved = false
-  }
-
-  const handleSelectionChange = () => {
-    if (props.enableLineSelection !== true) return
-    if (dragStart === undefined) return
-
-    const selection = window.getSelection()
-    if (!selection || selection.isCollapsed) return
-
-    scheduleSelectionUpdate()
-  }
-
-  createEffect(() => {
-    const opts = options()
-    const workerPool = large() ? getWorkerPool("unified") : getWorkerPool(props.diffStyle)
-    const virtualizer = getVirtualizer()
-    const annotations = local.annotations
-    const beforeContents = typeof local.before?.contents === "string" ? local.before.contents : ""
-    const afterContents = typeof local.after?.contents === "string" ? local.after.contents : ""
-
-    const cacheKey = (contents: string) => {
-      if (!large()) return sampledChecksum(contents, contents.length)
-      return sampledChecksum(contents)
-    }
-
-    instance?.cleanUp()
-    instance = virtualizer
-      ? new VirtualizedFileDiff<T>(opts, virtualizer, virtualMetrics, workerPool)
-      : new FileDiff<T>(opts, workerPool)
-    setCurrent(instance)
-
-    container.innerHTML = ""
-    instance.render({
-      oldFile: {
-        ...local.before,
-        contents: beforeContents,
-        cacheKey: cacheKey(beforeContents),
-      },
-      newFile: {
-        ...local.after,
-        contents: afterContents,
-        cacheKey: cacheKey(afterContents),
-      },
-      lineAnnotations: annotations,
-      containerWrapper: container,
-    })
-
-    applyScheme()
-
-    setRendered((value) => value + 1)
-    notifyRendered()
-  })
-
-  createEffect(() => {
-    if (typeof document === "undefined") return
-    if (typeof MutationObserver === "undefined") return
-
-    const root = document.documentElement
-    const monitor = new MutationObserver(() => applyScheme())
-    monitor.observe(root, { attributes: true, attributeFilter: ["data-color-scheme"] })
-    applyScheme()
-
-    onCleanup(() => monitor.disconnect())
-  })
-
-  createEffect(() => {
-    rendered()
-    const ranges = local.commentedLines ?? []
-    requestAnimationFrame(() => applyCommentedLines(ranges))
-  })
-
-  createEffect(() => {
-    const selected = local.selectedLines ?? null
-    setSelectedLines(selected)
-  })
-
-  createEffect(() => {
-    if (props.enableLineSelection !== true) return
-
-    container.addEventListener("mousedown", handleMouseDown)
-    container.addEventListener("mousemove", handleMouseMove)
-    window.addEventListener("mouseup", handleMouseUp)
-    document.addEventListener("selectionchange", handleSelectionChange)
-
-    onCleanup(() => {
-      container.removeEventListener("mousedown", handleMouseDown)
-      container.removeEventListener("mousemove", handleMouseMove)
-      window.removeEventListener("mouseup", handleMouseUp)
-      document.removeEventListener("selectionchange", handleSelectionChange)
-    })
-  })
-
-  onCleanup(() => {
-    observer?.disconnect()
-
-    if (selectionFrame !== undefined) {
-      cancelAnimationFrame(selectionFrame)
-      selectionFrame = undefined
-    }
-
-    if (dragFrame !== undefined) {
-      cancelAnimationFrame(dragFrame)
-      dragFrame = undefined
-    }
-
-    dragStart = undefined
-    dragEnd = undefined
-    dragSide = undefined
-    dragEndSide = undefined
-    dragMoved = false
-    lastSelection = null
-    pendingSelectionEnd = false
-
-    instance?.cleanUp()
-    setCurrent(undefined)
-    sharedVirtualizer?.release()
-    sharedVirtualizer = undefined
-  })
-
-  return <div data-component="diff" style={styleVariables} ref={container} />
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Adam	f2100dcfd8	fix(app): scroll jacking	2026-02-26 20:41:35 -06:00
Adam	b0b88f6792	fix(app): permission indicator	2026-02-26 20:40:39 -06:00
Adam	e9a7c71141	fix(app): permission notifications	2026-02-26 20:36:10 -06:00
David Hill	4205fbd2aa	tweak(app): show keybind on context tab close	2026-02-27 00:29:02 +00:00
Adam	fc52e4b2d3	feat(app): better diff/code comments (#14621 ) Co-authored-by: adamelmore <2363879+adamdottv@users.noreply.github.com> Co-authored-by: David Hill <iamdavidhill@gmail.com>	2026-02-26 18:23:04 -06:00
Kit Langton	9a6bfeb782	refactor(app): dedupe filetree scroll state	2026-02-26 19:20:56 -05:00
David Hill	fa119423ec	tweak(app): align review changes select height	2026-02-27 00:18:14 +00:00
David Hill	bf442a50c0	fix(ui): mute inactive file tab icons	2026-02-27 00:18:14 +00:00
David Hill	09e1b98bc6	tweak(ui): max-width on session when the review is closed but the file tree is open	2026-02-27 00:18:14 +00:00
Adam	37d42595cf	fix: test	2026-02-26 18:11:05 -06:00
Adam	adabad19f1	Revert "fix(ui): prevent filename and diff count overlap in session changes (#14773 )" This reverts commit `a0b3bbffd5`.	2026-02-26 18:11:05 -06:00
David Hill	7a74be3b47	tweak(ui): add border to filetree on scroll	2026-02-26 23:18:35 +00:00
David Hill	c95febb1d5	tui: fix session tab alignment in compact view to prevent vertical overflow	2026-02-26 22:54:49 +00:00
opencode-agent[bot]	9736fce8fc	chore: update nix node_modules hashes	2026-02-26 22:18:33 +00:00
Adam	05d77b7d47	chore: storybook (#15285 ) Co-authored-by: David Hill <iamdavidhill@gmail.com>	2026-02-26 16:05:04 -06:00
Adam	8c484a05b8	fix(app): terminal issues	2026-02-26 15:52:35 -06:00
Shoubhit Dash	a0b3bbffd5	fix(ui): prevent filename and diff count overlap in session changes (#14773 )	2026-02-26 15:42:24 -06:00
Shoubhit Dash	270d084cb1	fix(ui): avoid truncating workspace paths in assistant text (#14584 )	2026-02-26 15:41:58 -06:00
Adam	9312867565	feat(app): new tabs styling (#15284 ) Co-authored-by: David Hill <iamdavidhill@gmail.com>	2026-02-26 15:39:45 -06:00
Adam	7e6a007c35	feat(app): auto-accept all permissions mode	2026-02-26 15:23:26 -06:00