feat: add support for API chats

### Explanation

_No response_

### Issue

_No response_

### Attestations

- [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [ ] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [ ] I have pinned the dependencies to a specific patch version.

### Style

- [ ] I have run the linter and resolved any errors.
- [ ] My pull request uses an appropriate title, matching the conventional commit standards.
- [ ] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

_No response_

Reviewed-on: #80
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

README.md

@@ -1 +1,29 @@
-tem
+# hikari-desktop
+
+Desktop companion application featuring Hikari.
+
+## Live Version
+
+This page is currently deployed. [View the live website.](https://git.nhcarrigan.com/nhcarrigan/hikari-desktop/releases)
+
+## Feedback and Bugs
+
+If you have feedback or a bug report, please [log a ticket on our forum](https://support.nhcarrigan.com).
+
+## Contributing
+
+If you would like to contribute to the project, you may create a Pull Request containing your proposed changes and we will review it as soon as we are able! Please review our [contributing guidelines](CONTRIBUTING.md) first.
+
+## Code of Conduct
+
+Before interacting with our community, please read our [Code of Conduct](CODE_OF_CONDUCT.md).
+
+## License
+
+This software is licensed under our [global software license](https://docs.nhcarrigan.com/#/license).
+
+Copyright held by Naomi Carrigan.
+
+## Contact
+
+We may be contacted through our [Chat Server](http://chat.nhcarrigan.com) or via email at `contact@nhcarrigan.com`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hikari-desktop",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "",
   "type": "module",
   "scripts": {
@@ -27,6 +27,32 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@codemirror/commands": "6.8.1",
+    "@codemirror/lang-angular": "^0.1.4",
+    "@codemirror/lang-cpp": "^6.0.3",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-go": "^6.0.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-less": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-php": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/lang-sass": "^6.0.2",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-vue": "^0.1.3",
+    "@codemirror/lang-wast": "^6.0.2",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/legacy-modes": "^6.5.2",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.39.11",
+    "@lezer/highlight": "^1.2.3",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-clipboard-manager": "^2.3.2",
     "@tauri-apps/plugin-dialog": "^2",
@@ -36,6 +62,7 @@
     "@tauri-apps/plugin-os": "^2",
     "@tauri-apps/plugin-shell": "^2.3.4",
     "@tauri-apps/plugin-store": "^2",
+    "codemirror": "^6.0.2",
     "highlight.js": "^11.11.1",
     "marked": "^17.0.1"
   },

pnpm-lock.yaml

@@ -8,6 +8,84 @@ importers:
 
   .:
     dependencies:
+      '@codemirror/commands':
+        specifier: 6.8.1
+        version: 6.8.1
+      '@codemirror/lang-angular':
+        specifier: ^0.1.4
+        version: 0.1.4
+      '@codemirror/lang-cpp':
+        specifier: ^6.0.3
+        version: 6.0.3
+      '@codemirror/lang-css':
+        specifier: ^6.3.1
+        version: 6.3.1
+      '@codemirror/lang-go':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/lang-html':
+        specifier: ^6.4.11
+        version: 6.4.11
+      '@codemirror/lang-java':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.4
+        version: 6.2.4
+      '@codemirror/lang-json':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-less':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-markdown':
+        specifier: ^6.5.0
+        version: 6.5.0
+      '@codemirror/lang-php':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-python':
+        specifier: ^6.2.1
+        version: 6.2.1
+      '@codemirror/lang-rust':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-sass':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-sql':
+        specifier: ^6.10.0
+        version: 6.10.0
+      '@codemirror/lang-vue':
+        specifier: ^0.1.3
+        version: 0.1.3
+      '@codemirror/lang-wast':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-xml':
+        specifier: ^6.1.0
+        version: 6.1.0
+      '@codemirror/lang-yaml':
+        specifier: ^6.1.2
+        version: 6.1.2
+      '@codemirror/language':
+        specifier: ^6.12.1
+        version: 6.12.1
+      '@codemirror/legacy-modes':
+        specifier: ^6.5.2
+        version: 6.5.2
+      '@codemirror/state':
+        specifier: ^6.5.4
+        version: 6.5.4
+      '@codemirror/theme-one-dark':
+        specifier: ^6.1.3
+        version: 6.1.3
+      '@codemirror/view':
+        specifier: ^6.39.11
+        version: 6.39.11
+      '@lezer/highlight':
+        specifier: ^1.2.3
+        version: 1.2.3
       '@tauri-apps/api':
         specifier: ^2
         version: 2.9.1
@@ -35,6 +113,9 @@ importers:
       '@tauri-apps/plugin-store':
         specifier: ^2
         version: 2.4.2
+      codemirror:
+        specifier: ^6.0.2
+        version: 6.0.2
       highlight.js:
         specifier: ^11.11.1
         version: 11.11.1
@@ -158,6 +239,90 @@ packages:
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
+  '@codemirror/autocomplete@6.20.0':
+    resolution: {integrity: sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==}
+
+  '@codemirror/commands@6.8.1':
+    resolution: {integrity: sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==}
+
+  '@codemirror/lang-angular@0.1.4':
+    resolution: {integrity: sha512-oap+gsltb/fzdlTQWD6BFF4bSLKcDnlxDsLdePiJpCVNKWXSTAbiiQeYI3UmES+BLAdkmIC1WjyztC1pi/bX4g==}
+
+  '@codemirror/lang-cpp@6.0.3':
+    resolution: {integrity: sha512-URM26M3vunFFn9/sm6rzqrBzDgfWuDixp85uTY49wKudToc2jTHUrKIGGKs+QWND+YLofNNZpxcNGRynFJfvgA==}
+
+  '@codemirror/lang-css@6.3.1':
+    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
+
+  '@codemirror/lang-go@6.0.1':
+    resolution: {integrity: sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==}
+
+  '@codemirror/lang-html@6.4.11':
+    resolution: {integrity: sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==}
+
+  '@codemirror/lang-java@6.0.2':
+    resolution: {integrity: sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==}
+
+  '@codemirror/lang-javascript@6.2.4':
+    resolution: {integrity: sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==}
+
+  '@codemirror/lang-json@6.0.2':
+    resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
+
+  '@codemirror/lang-less@6.0.2':
+    resolution: {integrity: sha512-EYdQTG22V+KUUk8Qq582g7FMnCZeEHsyuOJisHRft/mQ+ZSZ2w51NupvDUHiqtsOy7It5cHLPGfHQLpMh9bqpQ==}
+
+  '@codemirror/lang-markdown@6.5.0':
+    resolution: {integrity: sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==}
+
+  '@codemirror/lang-php@6.0.2':
+    resolution: {integrity: sha512-ZKy2v1n8Fc8oEXj0Th0PUMXzQJ0AIR6TaZU+PbDHExFwdu+guzOA4jmCHS1Nz4vbFezwD7LyBdDnddSJeScMCA==}
+
+  '@codemirror/lang-python@6.2.1':
+    resolution: {integrity: sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==}
+
+  '@codemirror/lang-rust@6.0.2':
+    resolution: {integrity: sha512-EZaGjCUegtiU7kSMvOfEZpaCReowEf3yNidYu7+vfuGTm9ow4mthAparY5hisJqOHmJowVH3Upu+eJlUji6qqA==}
+
+  '@codemirror/lang-sass@6.0.2':
+    resolution: {integrity: sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==}
+
+  '@codemirror/lang-sql@6.10.0':
+    resolution: {integrity: sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==}
+
+  '@codemirror/lang-vue@0.1.3':
+    resolution: {integrity: sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==}
+
+  '@codemirror/lang-wast@6.0.2':
+    resolution: {integrity: sha512-Imi2KTpVGm7TKuUkqyJ5NRmeFWF7aMpNiwHnLQe0x9kmrxElndyH0K6H/gXtWwY6UshMRAhpENsgfpSwsgmC6Q==}
+
+  '@codemirror/lang-xml@6.1.0':
+    resolution: {integrity: sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==}
+
+  '@codemirror/lang-yaml@6.1.2':
+    resolution: {integrity: sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==}
+
+  '@codemirror/language@6.12.1':
+    resolution: {integrity: sha512-Fa6xkSiuGKc8XC8Cn96T+TQHYj4ZZ7RdFmXA3i9xe/3hLHfwPZdM+dqfX0Cp0zQklBKhVD8Yzc8LS45rkqcwpQ==}
+
+  '@codemirror/legacy-modes@6.5.2':
+    resolution: {integrity: sha512-/jJbwSTazlQEDOQw2FJ8LEEKVS72pU0lx6oM54kGpL8t/NJ2Jda3CZ4pcltiKTdqYSRk3ug1B3pil1gsjA6+8Q==}
+
+  '@codemirror/lint@6.9.3':
+    resolution: {integrity: sha512-y3YkYhdnhjDBAe0VIA0c4wVoFOvnp8CnAvfLqi0TqotIv92wIlAAP7HELOpLBsKwjAX6W92rSflA6an/2zBvXw==}
+
+  '@codemirror/search@6.6.0':
+    resolution: {integrity: sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==}
+
+  '@codemirror/state@6.5.4':
+    resolution: {integrity: sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==}
+
+  '@codemirror/theme-one-dark@6.1.3':
+    resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
+
+  '@codemirror/view@6.39.11':
+    resolution: {integrity: sha512-bWdeR8gWM87l4DB/kYSF9A+dVackzDb/V56Tq7QVrQ7rn86W0rgZFtlL3g3pem6AeGcb9NQNoy3ao4WpW4h5tQ==}
+
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
     engines: {node: '>=18'}
@@ -425,6 +590,60 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@lezer/common@1.5.0':
+    resolution: {integrity: sha512-PNGcolp9hr4PJdXR4ix7XtixDrClScvtSCYW3rQG106oVMOOI+jFb+0+J3mbeL/53g1Zd6s0kJzaw6Ri68GmAA==}
+
+  '@lezer/cpp@1.1.5':
+    resolution: {integrity: sha512-DIhSXmYtJKLehrjzDFN+2cPt547ySQ41nA8yqcDf/GxMc+YM736xqltFkvADL2M0VebU5I+3+4ks2Vv+Kyq3Aw==}
+
+  '@lezer/css@1.3.0':
+    resolution: {integrity: sha512-pBL7hup88KbI7hXnZV3PQsn43DHy6TWyzuyk2AO9UyoXcDltvIdqWKE1dLL/45JVZ+YZkHe1WVHqO6wugZZWcw==}
+
+  '@lezer/go@1.0.1':
+    resolution: {integrity: sha512-xToRsYxwsgJNHTgNdStpcvmbVuKxTapV0dM0wey1geMMRc9aggoVyKgzYp41D2/vVOx+Ii4hmE206kvxIXBVXQ==}
+
+  '@lezer/highlight@1.2.3':
+    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
+
+  '@lezer/html@1.3.13':
+    resolution: {integrity: sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==}
+
+  '@lezer/java@1.1.3':
+    resolution: {integrity: sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==}
+
+  '@lezer/javascript@1.5.4':
+    resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
+
+  '@lezer/json@1.0.3':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
+  '@lezer/lr@1.4.8':
+    resolution: {integrity: sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==}
+
+  '@lezer/markdown@1.6.3':
+    resolution: {integrity: sha512-jpGm5Ps+XErS+xA4urw7ogEGkeZOahVQF21Z6oECF0sj+2liwZopd2+I8uH5I/vZsRuuze3OxBREIANLf6KKUw==}
+
+  '@lezer/php@1.0.5':
+    resolution: {integrity: sha512-W7asp9DhM6q0W6DYNwIkLSKOvxlXRrif+UXBMxzsJUuqmhE7oVU+gS3THO4S/Puh7Xzgm858UNaFi6dxTP8dJA==}
+
+  '@lezer/python@1.1.18':
+    resolution: {integrity: sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==}
+
+  '@lezer/rust@1.0.2':
+    resolution: {integrity: sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==}
+
+  '@lezer/sass@1.1.0':
+    resolution: {integrity: sha512-3mMGdCTUZ/84ArHOuXWQr37pnf7f+Nw9ycPUeKX+wu19b7pSMcZGLbaXwvD2APMBDOGxPmpK/O6S1v1EvLoqgQ==}
+
+  '@lezer/xml@1.0.6':
+    resolution: {integrity: sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==}
+
+  '@lezer/yaml@1.0.3':
+    resolution: {integrity: sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==}
+
+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -1015,6 +1234,9 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  codemirror@6.0.2:
+    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1029,6 +1251,9 @@ packages:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -1663,6 +1888,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-mod@4.1.3:
+    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -1842,6 +2070,9 @@ packages:
       jsdom:
         optional: true
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -1949,6 +2180,216 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
+  '@codemirror/autocomplete@6.20.0':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
+      '@lezer/common': 1.5.0
+
+  '@codemirror/commands@6.8.1':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
+      '@lezer/common': 1.5.0
+
+  '@codemirror/lang-angular@0.1.4':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-javascript': 6.2.4
+      '@codemirror/language': 6.12.1
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-cpp@6.0.3':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@lezer/cpp': 1.1.5
+
+  '@codemirror/lang-css@6.3.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@lezer/common': 1.5.0
+      '@lezer/css': 1.3.0
+
+  '@codemirror/lang-go@6.0.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@lezer/common': 1.5.0
+      '@lezer/go': 1.0.1
+
+  '@codemirror/lang-html@6.4.11':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-javascript': 6.2.4
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
+      '@lezer/common': 1.5.0
+      '@lezer/css': 1.3.0
+      '@lezer/html': 1.3.13
+
+  '@codemirror/lang-java@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@lezer/java': 1.1.3
+
+  '@codemirror/lang-javascript@6.2.4':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/language': 6.12.1
+      '@codemirror/lint': 6.9.3
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
+      '@lezer/common': 1.5.0
+      '@lezer/javascript': 1.5.4
+
+  '@codemirror/lang-json@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@lezer/json': 1.0.3
+
+  '@codemirror/lang-less@6.0.2':
+    dependencies:
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/language': 6.12.1
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-markdown@6.5.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
+      '@lezer/common': 1.5.0
+      '@lezer/markdown': 1.6.3
+
+  '@codemirror/lang-php@6.0.2':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@lezer/common': 1.5.0
+      '@lezer/php': 1.0.5
+
+  '@codemirror/lang-python@6.2.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@lezer/common': 1.5.0
+      '@lezer/python': 1.1.18
+
+  '@codemirror/lang-rust@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@lezer/rust': 1.0.2
+
+  '@codemirror/lang-sass@6.0.2':
+    dependencies:
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@lezer/common': 1.5.0
+      '@lezer/sass': 1.1.0
+
+  '@codemirror/lang-sql@6.10.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-vue@0.1.3':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-javascript': 6.2.4
+      '@codemirror/language': 6.12.1
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-wast@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@codemirror/lang-xml@6.1.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
+      '@lezer/common': 1.5.0
+      '@lezer/xml': 1.0.6
+
+  '@codemirror/lang-yaml@6.1.2':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+      '@lezer/yaml': 1.0.3
+
+  '@codemirror/language@6.12.1':
+    dependencies:
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+      style-mod: 4.1.3
+
+  '@codemirror/legacy-modes@6.5.2':
+    dependencies:
+      '@codemirror/language': 6.12.1
+
+  '@codemirror/lint@6.9.3':
+    dependencies:
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
+      crelt: 1.0.6
+
+  '@codemirror/search@6.6.0':
+    dependencies:
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
+      crelt: 1.0.6
+
+  '@codemirror/state@6.5.4':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/theme-one-dark@6.1.3':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
+      '@lezer/highlight': 1.2.3
+
+  '@codemirror/view@6.39.11':
+    dependencies:
+      '@codemirror/state': 6.5.4
+      crelt: 1.0.6
+      style-mod: 4.1.3
+      w3c-keyname: 2.2.8
+
   '@csstools/color-helpers@5.1.0': {}
 
   '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
@@ -2127,6 +2568,101 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@lezer/common@1.5.0': {}
+
+  '@lezer/cpp@1.1.5':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/css@1.3.0':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/go@1.0.1':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/highlight@1.2.3':
+    dependencies:
+      '@lezer/common': 1.5.0
+
+  '@lezer/html@1.3.13':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/java@1.1.3':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/javascript@1.5.4':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/json@1.0.3':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/lr@1.4.8':
+    dependencies:
+      '@lezer/common': 1.5.0
+
+  '@lezer/markdown@1.6.3':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+
+  '@lezer/php@1.0.5':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/python@1.1.18':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/rust@1.0.2':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/sass@1.1.0':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/xml@1.0.6':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/yaml@1.0.3':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@marijn/find-cluster-break@1.0.2': {}
+
   '@polka/url@1.0.0-next.29': {}
 
   '@rollup/rollup-android-arm-eabi@4.55.1':
@@ -2678,6 +3214,16 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  codemirror@6.0.2:
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/commands': 6.8.1
+      '@codemirror/language': 6.12.1
+      '@codemirror/lint': 6.9.3
+      '@codemirror/search': 6.6.0
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -2688,6 +3234,8 @@ snapshots:
 
   cookie@0.6.0: {}
 
+  crelt@1.0.6: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -3304,6 +3852,8 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-mod@4.1.3: {}
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -3463,6 +4013,8 @@ snapshots:
       - tsx
       - yaml
 
+  w3c-keyname@2.2.8: {}
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0

src-tauri/Cargo.lock

@@ -592,7 +592,7 @@ dependencies = [
  "bitflags 2.10.0",
  "core-foundation 0.10.1",
  "core-graphics-types",
- "foreign-types",
+ "foreign-types 0.5.0",
  "libc",
 ]
 
@@ -1080,6 +1080,15 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d9c4f5dac5e15c24eb999c26181a6ca40b39fe946cbe4c263c7209467bc83af2"
 
+[[package]]
+name = "foreign-types"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f6f339eb8adc052cd2ca78910fda869aefa38d22d5cb648e6485e4d3fc06f3b1"
+dependencies = [
+ "foreign-types-shared 0.1.1",
+]
+
 [[package]]
 name = "foreign-types"
 version = "0.5.0"
@@ -1087,7 +1096,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d737d9aa519fb7b749cbc3b962edcf310a8dd1f4b67c91c4f83975dbdd17d965"
 dependencies = [
  "foreign-types-macros",
- "foreign-types-shared",
+ "foreign-types-shared 0.3.1",
 ]
 
 [[package]]
@@ -1101,6 +1110,12 @@ dependencies = [
  "syn 2.0.114",
 ]
 
+[[package]]
+name = "foreign-types-shared"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "00b0228411908ca8685dba7fc2cdd70ec9990a6e753e89b6ac91a84c40fbaf4b"
+
 [[package]]
 name = "foreign-types-shared"
 version = "0.3.1"
@@ -1602,10 +1617,13 @@ checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
 
 [[package]]
 name = "hikari-desktop"
-version = "0.3.0"
+version = "1.1.1"
 dependencies = [
+ "async-trait",
  "chrono",
+ "futures-util",
  "parking_lot",
+ "reqwest",
  "semver",
  "serde",
  "serde_json",
@@ -1716,6 +1734,22 @@ dependencies = [
  "webpki-roots",
 ]
 
+[[package]]
+name = "hyper-tls"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "70206fc6890eaca9fde8a0bf71caa2ddfc9fe045ac9e5c70df101a7dbde866e0"
+dependencies = [
+ "bytes",
+ "http-body-util",
+ "hyper",
+ "hyper-util",
+ "native-tls",
+ "tokio",
+ "tokio-native-tls",
+ "tower-service",
+]
+
 [[package]]
 name = "hyper-util"
 version = "0.1.19"
@@ -2288,6 +2322,23 @@ dependencies = [
  "windows-sys 0.60.2",
 ]
 
+[[package]]
+name = "native-tls"
+version = "0.2.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "87de3442987e9dbec73158d5c715e7ad9072fda936bb03d19d7fa10e00520f0e"
+dependencies = [
+ "libc",
+ "log",
+ "openssl",
+ "openssl-probe",
+ "openssl-sys",
+ "schannel",
+ "security-framework",
+ "security-framework-sys",
+ "tempfile",
+]
+
 [[package]]
 name = "ndk"
 version = "0.9.0"
@@ -2661,6 +2712,50 @@ dependencies = [
  "pathdiff",
 ]
 
+[[package]]
+name = "openssl"
+version = "0.10.75"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "08838db121398ad17ab8531ce9de97b244589089e290a384c900cb9ff7434328"
+dependencies = [
+ "bitflags 2.10.0",
+ "cfg-if",
+ "foreign-types 0.3.2",
+ "libc",
+ "once_cell",
+ "openssl-macros",
+ "openssl-sys",
+]
+
+[[package]]
+name = "openssl-macros"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
+]
+
+[[package]]
+name = "openssl-probe"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d05e27ee213611ffe7d6348b942e8f942b37114c00cc03cec254295a4a17852e"
+
+[[package]]
+name = "openssl-sys"
+version = "0.9.111"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82cab2d520aa75e3c58898289429321eb788c3106963d0dc886ec7a5f4adc321"
+dependencies = [
+ "cc",
+ "libc",
+ "pkg-config",
+ "vcpkg",
+]
+
 [[package]]
 name = "option-ext"
 version = "0.2.0"
@@ -3417,10 +3512,12 @@ dependencies = [
  "http-body-util",
  "hyper",
  "hyper-rustls",
+ "hyper-tls",
  "hyper-util",
  "js-sys",
  "log",
  "mime",
+ "native-tls",
  "percent-encoding",
  "pin-project-lite",
  "quinn",
@@ -3431,6 +3528,7 @@ dependencies = [
  "serde_urlencoded",
  "sync_wrapper",
  "tokio",
+ "tokio-native-tls",
  "tokio-rustls",
  "tokio-util",
  "tower",
@@ -3566,6 +3664,15 @@ dependencies = [
  "winapi-util",
 ]
 
+[[package]]
+name = "schannel"
+version = "0.1.28"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "891d81b926048e76efe18581bf793546b4c0eaf8448d72be8de2bbee5fd166e1"
+dependencies = [
+ "windows-sys 0.61.2",
+]
+
 [[package]]
 name = "schemars"
 version = "0.8.22"
@@ -3623,6 +3730,29 @@ version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
 
+[[package]]
+name = "security-framework"
+version = "2.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "897b2245f0b511c87893af39b033e5ca9cce68824c4d7e7630b5a1d339658d02"
+dependencies = [
+ "bitflags 2.10.0",
+ "core-foundation 0.9.4",
+ "core-foundation-sys",
+ "libc",
+ "security-framework-sys",
+]
+
+[[package]]
+name = "security-framework-sys"
+version = "2.15.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cc1f0cbffaac4852523ce30d8bd3c5cdc873501d96ff467ca09b6767bb8cd5c0"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "selectors"
 version = "0.24.0"
@@ -4746,6 +4876,16 @@ dependencies = [
  "syn 2.0.114",
 ]
 
+[[package]]
+name = "tokio-native-tls"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbae76ab933c85776efabc971569dd6119c580d8f5d448769dec1764bf796ef2"
+dependencies = [
+ "native-tls",
+ "tokio",
+]
+
 [[package]]
 name = "tokio-rustls"
 version = "0.26.4"
@@ -5111,6 +5251,12 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "vcpkg"
+version = "0.2.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "accd4ea62f7bb7a82fe23066fb0957d48ef677f6eeb8215f372f52e48bb32426"
+
 [[package]]
 name = "version-compare"
 version = "0.2.1"

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "hikari-desktop"
-version = "1.0.0"
+version = "1.1.1"
 description = "Hikari - Claude Code Visual Assistant"
 authors = ["Naomi Carrigan"]
 edition = "2021"
@@ -31,6 +31,9 @@ tauri-plugin-fs = "2"
 tempfile = "3"
 semver = "1"
 chrono = { version = "0.4.43", features = ["serde"] }
+async-trait = "0.1"
+reqwest = { version = "0.12", features = ["json", "stream"] }
+futures-util = "0.3"
 
 [target.'cfg(windows)'.dependencies]
 windows = { version = "0.62", features = [

src-tauri/src/bridge_manager.rs

@@ -4,11 +4,11 @@ use std::sync::Arc;
 use tauri::AppHandle;
 
 use crate::config::ClaudeStartOptions;
+use crate::provider_bridge::ProviderBridge;
 use crate::stats::UsageStats;
-use crate::wsl_bridge::WslBridge;
 
 pub struct BridgeManager {
-    bridges: HashMap<String, WslBridge>,
+    bridges: HashMap<String, ProviderBridge>,
     app_handle: Option<AppHandle>,
 }
 
@@ -45,12 +45,24 @@ impl BridgeManager {
             .ok_or_else(|| "App handle not set".to_string())?
             .clone();
 
+        // Check if existing bridge matches the requested provider type
+        // If provider type changed, create a new bridge
+        let should_recreate = self.bridges.get(conversation_id).map_or(false, |bridge| {
+            bridge.provider_type() != options.provider_type
+        });
+
+        if should_recreate {
+            // Remove existing bridge if provider type changed
+            self.bridges.remove(conversation_id);
+        }
+
         // Reuse existing bridge if it exists (preserves stats across reconnects)
         // Only create a new bridge if one doesn't exist for this conversation
+        let provider_type = options.provider_type;
         let bridge = self
             .bridges
             .entry(conversation_id.to_string())
-            .or_insert_with(|| WslBridge::new_with_conversation_id(conversation_id.to_string()));
+            .or_insert_with(|| ProviderBridge::new(provider_type, conversation_id.to_string()));
 
         // Start the Claude process
         bridge.start(app, options)?;

src-tauri/src/commands.rs

@@ -394,6 +394,168 @@ pub async fn get_file_size(file_path: String) -> Result<u64, String> {
     Ok(metadata.len())
 }
 
+// ==================== Editor File Operations ====================
+
+#[derive(Debug, Clone, serde::Serialize)]
+pub struct FileEntry {
+    pub name: String,
+    pub path: String,
+    #[serde(rename = "isDirectory")]
+    pub is_directory: bool,
+}
+
+#[tauri::command]
+pub async fn list_directory(path: String) -> Result<Vec<FileEntry>, String> {
+    use std::fs;
+    use std::path::Path;
+
+    let dir_path = Path::new(&path);
+
+    if !dir_path.exists() {
+        return Err(format!("Directory does not exist: {}", path));
+    }
+
+    if !dir_path.is_dir() {
+        return Err(format!("Path is not a directory: {}", path));
+    }
+
+    let entries = fs::read_dir(dir_path)
+        .map_err(|e| format!("Failed to read directory: {}", e))?;
+
+    let mut file_entries = Vec::new();
+
+    for entry in entries {
+        let entry = entry.map_err(|e| format!("Failed to read entry: {}", e))?;
+        let path = entry.path();
+        let name = entry
+            .file_name()
+            .to_string_lossy()
+            .to_string();
+
+        // Skip hidden files by default (can be made configurable later)
+        if name.starts_with('.') {
+            continue;
+        }
+
+        file_entries.push(FileEntry {
+            name,
+            path: path.to_string_lossy().to_string(),
+            is_directory: path.is_dir(),
+        });
+    }
+
+    Ok(file_entries)
+}
+
+#[tauri::command]
+pub async fn read_file_content(path: String) -> Result<String, String> {
+    use std::fs;
+
+    fs::read_to_string(&path)
+        .map_err(|e| format!("Failed to read file: {}", e))
+}
+
+#[tauri::command]
+pub async fn write_file_content(path: String, content: String) -> Result<(), String> {
+    use std::fs;
+
+    fs::write(&path, content)
+        .map_err(|e| format!("Failed to write file: {}", e))
+}
+
+#[tauri::command]
+pub async fn create_file(path: String) -> Result<(), String> {
+    use std::fs::File;
+    use std::path::Path;
+
+    let file_path = Path::new(&path);
+
+    if file_path.exists() {
+        return Err("File already exists".to_string());
+    }
+
+    File::create(file_path).map_err(|e| format!("Failed to create file: {}", e))?;
+
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn create_directory(path: String) -> Result<(), String> {
+    use std::fs;
+    use std::path::Path;
+
+    let dir_path = Path::new(&path);
+
+    if dir_path.exists() {
+        return Err("Directory already exists".to_string());
+    }
+
+    fs::create_dir_all(dir_path).map_err(|e| format!("Failed to create directory: {}", e))?;
+
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn delete_file(path: String) -> Result<(), String> {
+    use std::fs;
+    use std::path::Path;
+
+    let file_path = Path::new(&path);
+
+    if !file_path.exists() {
+        return Err("File does not exist".to_string());
+    }
+
+    if file_path.is_dir() {
+        return Err("Path is a directory, use delete_directory instead".to_string());
+    }
+
+    fs::remove_file(file_path).map_err(|e| format!("Failed to delete file: {}", e))?;
+
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn delete_directory(path: String) -> Result<(), String> {
+    use std::fs;
+    use std::path::Path;
+
+    let dir_path = Path::new(&path);
+
+    if !dir_path.exists() {
+        return Err("Directory does not exist".to_string());
+    }
+
+    if !dir_path.is_dir() {
+        return Err("Path is not a directory".to_string());
+    }
+
+    fs::remove_dir_all(dir_path).map_err(|e| format!("Failed to delete directory: {}", e))?;
+
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn rename_path(old_path: String, new_path: String) -> Result<(), String> {
+    use std::fs;
+    use std::path::Path;
+
+    let old = Path::new(&old_path);
+    let new = Path::new(&new_path);
+
+    if !old.exists() {
+        return Err("Path does not exist".to_string());
+    }
+
+    if new.exists() {
+        return Err("Destination already exists".to_string());
+    }
+
+    fs::rename(old, new).map_err(|e| format!("Failed to rename: {}", e))?;
+
+    Ok(())
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;

src-tauri/src/config.rs

@@ -1,7 +1,11 @@
+use crate::providers::ProviderType;
 use serde::{Deserialize, Serialize};
 
 #[derive(Debug, Clone, Serialize, Deserialize, Default)]
 pub struct ClaudeStartOptions {
+    #[serde(default)]
+    pub provider_type: ProviderType,
+
     #[serde(default)]
     pub working_dir: String,
 
@@ -25,10 +29,47 @@ pub struct ClaudeStartOptions {
 
     #[serde(default)]
     pub resume_session_id: Option<String>,
+
+    // Ollama-specific options
+    #[serde(default = "default_ollama_base_url")]
+    pub ollama_base_url: String,
+
+    #[serde(default)]
+    pub ollama_model: Option<String>,
+
+    // OpenAI-specific options
+    #[serde(default)]
+    pub openai_api_key: Option<String>,
+
+    #[serde(default = "default_openai_base_url")]
+    pub openai_base_url: String,
+
+    #[serde(default)]
+    pub openai_model: Option<String>,
+
+    // Anthropic-specific options
+    #[serde(default)]
+    pub anthropic_api_key: Option<String>,
+
+    #[serde(default = "default_anthropic_base_url")]
+    pub anthropic_base_url: String,
+
+    #[serde(default)]
+    pub anthropic_model: Option<String>,
+
+    // Gemini-specific options
+    #[serde(default)]
+    pub gemini_api_key: Option<String>,
+
+    #[serde(default)]
+    pub gemini_model: Option<String>,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct HikariConfig {
+    #[serde(default)]
+    pub provider_type: ProviderType,
+
     #[serde(default)]
     pub model: Option<String>,
 
@@ -44,6 +85,40 @@ pub struct HikariConfig {
     #[serde(default)]
     pub auto_granted_tools: Vec<String>,
 
+    // Ollama-specific settings
+    #[serde(default = "default_ollama_base_url")]
+    pub ollama_base_url: String,
+
+    #[serde(default)]
+    pub ollama_model: Option<String>,
+
+    // OpenAI-specific settings
+    #[serde(default)]
+    pub openai_api_key: Option<String>,
+
+    #[serde(default = "default_openai_base_url")]
+    pub openai_base_url: String,
+
+    #[serde(default)]
+    pub openai_model: Option<String>,
+
+    // Anthropic-specific settings
+    #[serde(default)]
+    pub anthropic_api_key: Option<String>,
+
+    #[serde(default = "default_anthropic_base_url")]
+    pub anthropic_base_url: String,
+
+    #[serde(default)]
+    pub anthropic_model: Option<String>,
+
+    // Gemini-specific settings
+    #[serde(default)]
+    pub gemini_api_key: Option<String>,
+
+    #[serde(default)]
+    pub gemini_model: Option<String>,
+
     #[serde(default)]
     pub theme: Theme,
 
@@ -101,11 +176,22 @@ pub struct HikariConfig {
 impl Default for HikariConfig {
     fn default() -> Self {
         Self {
+            provider_type: ProviderType::default(),
             model: None,
             api_key: None,
             custom_instructions: None,
             mcp_servers_json: None,
             auto_granted_tools: Vec::new(),
+            ollama_base_url: default_ollama_base_url(),
+            ollama_model: None,
+            openai_api_key: None,
+            openai_base_url: default_openai_base_url(),
+            openai_model: None,
+            anthropic_api_key: None,
+            anthropic_base_url: default_anthropic_base_url(),
+            anthropic_model: None,
+            gemini_api_key: None,
+            gemini_model: None,
             theme: Theme::default(),
             greeting_enabled: true,
             greeting_custom_prompt: None,
@@ -147,6 +233,18 @@ fn default_font_size() -> u32 {
     14
 }
 
+fn default_ollama_base_url() -> String {
+    "http://localhost:11434".to_string()
+}
+
+fn default_openai_base_url() -> String {
+    "https://api.openai.com/v1".to_string()
+}
+
+fn default_anthropic_base_url() -> String {
+    "https://api.anthropic.com".to_string()
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize, Default, PartialEq)]
 #[serde(rename_all = "lowercase")]
 pub enum Theme {
@@ -185,11 +283,26 @@ mod tests {
     #[test]
     fn test_default_config() {
         let config = HikariConfig::default();
+        assert_eq!(config.provider_type, ProviderType::ClaudeCli);
         assert!(config.model.is_none());
         assert!(config.api_key.is_none());
         assert!(config.custom_instructions.is_none());
         assert!(config.mcp_servers_json.is_none());
         assert!(config.auto_granted_tools.is_empty());
+        assert_eq!(config.ollama_base_url, "http://localhost:11434");
+        assert!(config.ollama_model.is_none());
+        // OpenAI defaults
+        assert!(config.openai_api_key.is_none());
+        assert_eq!(config.openai_base_url, "https://api.openai.com/v1");
+        assert!(config.openai_model.is_none());
+        // Anthropic defaults
+        assert!(config.anthropic_api_key.is_none());
+        assert_eq!(config.anthropic_base_url, "https://api.anthropic.com");
+        assert!(config.anthropic_model.is_none());
+        // Gemini defaults
+        assert!(config.gemini_api_key.is_none());
+        assert!(config.gemini_model.is_none());
+        // Other settings
         assert_eq!(config.theme, Theme::Dark);
         assert!(config.greeting_enabled);
         assert!(config.greeting_custom_prompt.is_none());
@@ -210,11 +323,22 @@ mod tests {
     #[test]
     fn test_config_serialization() {
         let config = HikariConfig {
+            provider_type: ProviderType::ClaudeCli,
             model: Some("claude-sonnet-4-20250514".to_string()),
             api_key: None,
             custom_instructions: Some("Be helpful".to_string()),
             mcp_servers_json: None,
             auto_granted_tools: vec!["Read".to_string(), "Glob".to_string()],
+            ollama_base_url: "http://localhost:11434".to_string(),
+            ollama_model: None,
+            openai_api_key: None,
+            openai_base_url: "https://api.openai.com/v1".to_string(),
+            openai_model: None,
+            anthropic_api_key: None,
+            anthropic_base_url: "https://api.anthropic.com".to_string(),
+            anthropic_model: None,
+            gemini_api_key: None,
+            gemini_model: None,
             theme: Theme::Light,
             greeting_enabled: true,
             greeting_custom_prompt: Some("Hello!".to_string()),

src-tauri/src/lib.rs

@@ -5,6 +5,8 @@ mod commands;
 mod config;
 mod git;
 mod notifications;
+mod provider_bridge;
+mod providers;
 mod quick_actions;
 mod sessions;
 mod snippets;
@@ -151,6 +153,14 @@ pub fn run() {
             search_clipboard_entries,
             get_clipboard_languages,
             update_clipboard_language,
+            list_directory,
+            read_file_content,
+            write_file_content,
+            create_file,
+            create_directory,
+            delete_file,
+            delete_directory,
+            rename_path,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/src/providers/claude_cli.rs

@@ -0,0 +1,773 @@
+// This provider wraps the Claude CLI subprocess.
+// It will be actively used once providers are fully integrated with BridgeManager.
+#![allow(dead_code)]
+
+use async_trait::async_trait;
+use std::io::{BufRead, BufReader, Write};
+use std::process::{Child, ChildStdin, Command, Stdio};
+use std::sync::atomic::{AtomicBool, Ordering};
+use std::sync::Arc;
+use std::thread;
+use tempfile::NamedTempFile;
+
+use crate::providers::traits::{
+    LlmProvider, ModelInfo, ProviderCapabilities, ProviderConfig, ProviderStreamEvent,
+    QuestionOption, StreamCallback,
+};
+
+#[cfg(target_os = "windows")]
+use std::os::windows::process::CommandExt;
+
+fn detect_wsl() -> bool {
+    if let Ok(version) = std::fs::read_to_string("/proc/version") {
+        let version_lower = version.to_lowercase();
+        if version_lower.contains("microsoft") || version_lower.contains("wsl") {
+            return true;
+        }
+    }
+
+    if std::path::Path::new("/proc/sys/fs/binfmt_misc/WSLInterop").exists() {
+        return true;
+    }
+
+    if std::env::var("WSL_DISTRO_NAME").is_ok() {
+        return true;
+    }
+
+    false
+}
+
+fn find_claude_binary() -> Option<String> {
+    let home = std::env::var("HOME").ok()?;
+    let paths_to_check = [
+        format!("{}/.local/bin/claude", home),
+        format!("{}/.claude/local/claude", home),
+        "/usr/local/bin/claude".to_string(),
+        "/usr/bin/claude".to_string(),
+    ];
+
+    for path in &paths_to_check {
+        if std::path::Path::new(path).exists() {
+            return Some(path.clone());
+        }
+    }
+
+    if let Ok(output) = Command::new("which").arg("claude").output() {
+        if output.status.success() {
+            let path = String::from_utf8_lossy(&output.stdout).trim().to_string();
+            if !path.is_empty() {
+                return Some(path);
+            }
+        }
+    }
+
+    None
+}
+
+pub struct ClaudeCliProvider {
+    config: ProviderConfig,
+    process: Option<Child>,
+    stdin: Option<ChildStdin>,
+    session_id: Option<String>,
+    mcp_config_file: Option<NamedTempFile>,
+    is_running: Arc<AtomicBool>,
+}
+
+impl ClaudeCliProvider {
+    pub fn new(config: ProviderConfig) -> Self {
+        Self {
+            config,
+            process: None,
+            stdin: None,
+            session_id: None,
+            mcp_config_file: None,
+            is_running: Arc::new(AtomicBool::new(false)),
+        }
+    }
+
+    fn build_command(&mut self) -> Result<Command, String> {
+        let mcp_config_path = if let Some(ref mcp_json) = self.config.mcp_servers_json {
+            if !mcp_json.trim().is_empty() {
+                serde_json::from_str::<serde_json::Value>(mcp_json)
+                    .map_err(|e| format!("Invalid MCP servers JSON: {}", e))?;
+
+                let mut temp_file = NamedTempFile::new()
+                    .map_err(|e| format!("Failed to create temp file for MCP config: {}", e))?;
+                temp_file
+                    .write_all(mcp_json.as_bytes())
+                    .map_err(|e| format!("Failed to write MCP config: {}", e))?;
+                temp_file
+                    .flush()
+                    .map_err(|e| format!("Failed to flush MCP config: {}", e))?;
+
+                let path = temp_file.path().to_string_lossy().to_string();
+                self.mcp_config_file = Some(temp_file);
+                Some(path)
+            } else {
+                None
+            }
+        } else {
+            None
+        };
+
+        let is_wsl = detect_wsl();
+        let working_dir = &self.config.working_directory;
+
+        let command = if is_wsl {
+            let claude_path = find_claude_binary().ok_or_else(|| {
+                "Could not find claude binary. Is Claude Code installed?".to_string()
+            })?;
+
+            let mut cmd = Command::new(&claude_path);
+            cmd.args([
+                "--output-format",
+                "stream-json",
+                "--input-format",
+                "stream-json",
+                "--verbose",
+            ]);
+
+            if let Some(ref model) = self.config.model {
+                if !model.is_empty() {
+                    cmd.args(["--model", model]);
+                }
+            }
+
+            for tool in &self.config.allowed_tools {
+                cmd.args(["--allowedTools", tool]);
+            }
+
+            if let Some(ref instructions) = self.config.custom_instructions {
+                if !instructions.is_empty() {
+                    cmd.args(["--system-prompt", instructions]);
+                }
+            }
+
+            if let Some(ref mcp_path) = mcp_config_path {
+                cmd.args(["--mcp-config", mcp_path]);
+            }
+
+            cmd.current_dir(working_dir);
+
+            if let Some(ref api_key) = self.config.api_key {
+                if !api_key.is_empty() {
+                    cmd.env("ANTHROPIC_API_KEY", api_key);
+                }
+            }
+
+            cmd
+        } else {
+            let mut cmd = Command::new("wsl");
+
+            let mut claude_cmd = format!("cd '{}' && ", working_dir);
+
+            if let Some(ref api_key) = self.config.api_key {
+                if !api_key.is_empty() {
+                    claude_cmd.push_str(&format!("ANTHROPIC_API_KEY='{}' ", api_key));
+                }
+            }
+
+            claude_cmd.push_str(
+                "claude --output-format stream-json --input-format stream-json --verbose",
+            );
+
+            if let Some(ref model) = self.config.model {
+                if !model.is_empty() {
+                    claude_cmd.push_str(&format!(" --model '{}'", model));
+                }
+            }
+
+            for tool in &self.config.allowed_tools {
+                claude_cmd.push_str(&format!(" --allowedTools '{}'", tool));
+            }
+
+            if let Some(ref instructions) = self.config.custom_instructions {
+                if !instructions.is_empty() {
+                    let escaped = instructions.replace('\'', "'\\''");
+                    claude_cmd.push_str(&format!(" --system-prompt '{}'", escaped));
+                }
+            }
+
+            if let Some(ref mcp_path) = mcp_config_path {
+                claude_cmd.push_str(&format!(" --mcp-config '{}'", mcp_path));
+            }
+
+            cmd.args(["-e", "bash", "-lc", &claude_cmd]);
+
+            #[cfg(target_os = "windows")]
+            cmd.creation_flags(0x08000000); // CREATE_NO_WINDOW
+
+            cmd
+        };
+
+        Ok(command)
+    }
+}
+
+#[async_trait]
+impl LlmProvider for ClaudeCliProvider {
+    fn name(&self) -> &'static str {
+        "Claude CLI"
+    }
+
+    fn capabilities(&self) -> ProviderCapabilities {
+        ProviderCapabilities {
+            supports_streaming: true,
+            supports_tools: true,
+            supports_vision: true,
+            supports_thinking: true,
+            supports_mcp: true,
+            supports_resume_session: true,
+            max_context_tokens: Some(200_000),
+            available_models: vec![
+                ModelInfo {
+                    id: "claude-sonnet-4-20250514".to_string(),
+                    name: "Claude Sonnet 4".to_string(),
+                    description: Some("Fast and intelligent".to_string()),
+                    context_window: Some(200_000),
+                    input_cost_per_mtok: Some(3.0),
+                    output_cost_per_mtok: Some(15.0),
+                },
+                ModelInfo {
+                    id: "claude-opus-4-20250514".to_string(),
+                    name: "Claude Opus 4".to_string(),
+                    description: Some("Most capable model".to_string()),
+                    context_window: Some(200_000),
+                    input_cost_per_mtok: Some(15.0),
+                    output_cost_per_mtok: Some(75.0),
+                },
+                ModelInfo {
+                    id: "claude-3-5-haiku-20241022".to_string(),
+                    name: "Claude 3.5 Haiku".to_string(),
+                    description: Some("Fast and efficient".to_string()),
+                    context_window: Some(200_000),
+                    input_cost_per_mtok: Some(1.0),
+                    output_cost_per_mtok: Some(5.0),
+                },
+            ],
+        }
+    }
+
+    async fn start(&mut self, callback: StreamCallback) -> Result<(), String> {
+        if self.process.is_some() {
+            return Err("Process already running".to_string());
+        }
+
+        callback(ProviderStreamEvent::Connected { session_id: None });
+
+        let mut command = self.build_command()?;
+
+        command
+            .stdin(Stdio::piped())
+            .stdout(Stdio::piped())
+            .stderr(Stdio::piped());
+
+        let mut child = command
+            .spawn()
+            .map_err(|e| format!("Failed to spawn process: {}", e))?;
+
+        let stdin = child.stdin.take();
+        let stdout = child.stdout.take();
+        let stderr = child.stderr.take();
+
+        self.stdin = stdin;
+        self.process = Some(child);
+        self.is_running.store(true, Ordering::SeqCst);
+
+        let is_running = self.is_running.clone();
+        let callback = Arc::new(callback);
+
+        if let Some(stdout) = stdout {
+            let callback_clone = callback.clone();
+            let is_running_clone = is_running.clone();
+            thread::spawn(move || {
+                handle_stdout(stdout, callback_clone, is_running_clone);
+            });
+        }
+
+        if let Some(stderr) = stderr {
+            let callback_clone = callback.clone();
+            thread::spawn(move || {
+                handle_stderr(stderr, callback_clone);
+            });
+        }
+
+        Ok(())
+    }
+
+    async fn stop(&mut self) -> Result<(), String> {
+        if let Some(mut process) = self.process.take() {
+            let _ = process.kill();
+            let _ = process.wait();
+        }
+        self.stdin = None;
+        self.session_id = None;
+        self.mcp_config_file = None;
+        self.is_running.store(false, Ordering::SeqCst);
+        Ok(())
+    }
+
+    fn is_running(&self) -> bool {
+        self.is_running.load(Ordering::SeqCst)
+    }
+
+    async fn send_message(&mut self, message: &str) -> Result<(), String> {
+        let stdin = self.stdin.as_mut().ok_or("Process not running")?;
+
+        let input = serde_json::json!({
+            "type": "user",
+            "message": {
+                "role": "user",
+                "content": [{
+                    "type": "text",
+                    "text": message
+                }]
+            }
+        });
+
+        let json_line = serde_json::to_string(&input).map_err(|e| e.to_string())?;
+
+        stdin
+            .write_all(format!("{}\n", json_line).as_bytes())
+            .map_err(|e| format!("Failed to write to stdin: {}", e))?;
+
+        stdin
+            .flush()
+            .map_err(|e| format!("Failed to flush stdin: {}", e))?;
+
+        Ok(())
+    }
+
+    async fn send_tool_result(
+        &mut self,
+        tool_use_id: &str,
+        result: serde_json::Value,
+        _is_error: bool,
+    ) -> Result<(), String> {
+        let stdin = self.stdin.as_mut().ok_or("Process not running")?;
+
+        let content_str = serde_json::to_string(&result).map_err(|e| e.to_string())?;
+
+        let input = serde_json::json!({
+            "type": "user",
+            "message": {
+                "role": "user",
+                "content": [{
+                    "type": "tool_result",
+                    "tool_use_id": tool_use_id,
+                    "content": content_str
+                }]
+            }
+        });
+
+        let json_line = serde_json::to_string(&input).map_err(|e| e.to_string())?;
+
+        stdin
+            .write_all(format!("{}\n", json_line).as_bytes())
+            .map_err(|e| format!("Failed to write to stdin: {}", e))?;
+
+        stdin
+            .flush()
+            .map_err(|e| format!("Failed to flush stdin: {}", e))?;
+
+        Ok(())
+    }
+
+    fn get_model(&self) -> Option<String> {
+        self.config.model.clone()
+    }
+
+    fn get_working_directory(&self) -> &str {
+        &self.config.working_directory
+    }
+
+    async fn interrupt(&mut self) -> Result<(), String> {
+        if let Some(mut process) = self.process.take() {
+            let _ = process.kill();
+            let _ = process.wait();
+            self.stdin = None;
+            self.is_running.store(false, Ordering::SeqCst);
+            Ok(())
+        } else {
+            Err("No active process to interrupt".to_string())
+        }
+    }
+}
+
+fn handle_stdout(
+    stdout: std::process::ChildStdout,
+    callback: Arc<StreamCallback>,
+    is_running: Arc<AtomicBool>,
+) {
+    let reader = BufReader::new(stdout);
+
+    for line in reader.lines() {
+        match line {
+            Ok(line) if !line.is_empty() => {
+                if let Err(e) = process_json_line(&line, &callback) {
+                    eprintln!("Error processing line: {}", e);
+                }
+            }
+            Err(e) => {
+                eprintln!("Error reading stdout: {}", e);
+                break;
+            }
+            _ => {}
+        }
+    }
+
+    is_running.store(false, Ordering::SeqCst);
+    callback(ProviderStreamEvent::Disconnected);
+}
+
+fn handle_stderr(stderr: std::process::ChildStderr, callback: Arc<StreamCallback>) {
+    let reader = BufReader::new(stderr);
+
+    for line in reader.lines() {
+        match line {
+            Ok(line) if !line.is_empty() => {
+                callback(ProviderStreamEvent::Error { message: line });
+            }
+            Err(_) => break,
+            _ => {}
+        }
+    }
+}
+
+fn process_json_line(line: &str, callback: &StreamCallback) -> Result<(), String> {
+    let message: serde_json::Value = serde_json::from_str(line)
+        .map_err(|e| format!("Failed to parse JSON: {} - Line: {}", e, line))?;
+
+    let msg_type = message.get("type").and_then(|t| t.as_str()).unwrap_or("");
+
+    match msg_type {
+        "system" => {
+            let subtype = message
+                .get("subtype")
+                .and_then(|s| s.as_str())
+                .unwrap_or("");
+            if subtype == "init" {
+                let session_id = message
+                    .get("session_id")
+                    .and_then(|s| s.as_str())
+                    .map(|s| s.to_string());
+                callback(ProviderStreamEvent::Connected { session_id });
+
+                if let Some(cwd) = message.get("cwd").and_then(|c| c.as_str()) {
+                    callback(ProviderStreamEvent::WorkingDirectory {
+                        path: cwd.to_string(),
+                    });
+                }
+            }
+        }
+
+        "assistant" => {
+            if let Some(msg) = message.get("message") {
+                if let Some(content) = msg.get("content").and_then(|c| c.as_array()) {
+                    for block in content {
+                        let block_type = block.get("type").and_then(|t| t.as_str()).unwrap_or("");
+                        match block_type {
+                            "text" => {
+                                if let Some(text) = block.get("text").and_then(|t| t.as_str()) {
+                                    callback(ProviderStreamEvent::TextDelta {
+                                        text: text.to_string(),
+                                    });
+                                }
+                            }
+                            "thinking" => {
+                                if let Some(thinking) =
+                                    block.get("thinking").and_then(|t| t.as_str())
+                                {
+                                    callback(ProviderStreamEvent::ThinkingDelta {
+                                        text: thinking.to_string(),
+                                    });
+                                }
+                            }
+                            "tool_use" => {
+                                let id = block
+                                    .get("id")
+                                    .and_then(|i| i.as_str())
+                                    .unwrap_or("")
+                                    .to_string();
+                                let name = block
+                                    .get("name")
+                                    .and_then(|n| n.as_str())
+                                    .unwrap_or("")
+                                    .to_string();
+                                let input = block
+                                    .get("input")
+                                    .cloned()
+                                    .unwrap_or(serde_json::Value::Null);
+
+                                callback(ProviderStreamEvent::ToolUseStart {
+                                    id: id.clone(),
+                                    name,
+                                });
+                                callback(ProviderStreamEvent::ToolUseEnd { id, input });
+                            }
+                            _ => {}
+                        }
+                    }
+                }
+
+                // Extract usage if available
+                let usage = msg.get("usage").and_then(|u| {
+                    let input_tokens = u.get("input_tokens").and_then(|t| t.as_u64())?;
+                    let output_tokens = u.get("output_tokens").and_then(|t| t.as_u64())?;
+                    let model = msg
+                        .get("model")
+                        .and_then(|m| m.as_str())
+                        .unwrap_or("unknown")
+                        .to_string();
+                    Some(crate::providers::ProviderUsage {
+                        input_tokens,
+                        output_tokens,
+                        model,
+                    })
+                });
+
+                callback(ProviderStreamEvent::MessageComplete {
+                    content: vec![],
+                    usage,
+                    stop_reason: None,
+                });
+            }
+        }
+
+        "result" => {
+            let subtype = message
+                .get("subtype")
+                .and_then(|s| s.as_str())
+                .unwrap_or("");
+
+            // Handle permission denials
+            if let Some(denials) = message
+                .get("permission_denials")
+                .and_then(|d| d.as_array())
+            {
+                for denial in denials {
+                    let tool_name = denial
+                        .get("tool_name")
+                        .and_then(|t| t.as_str())
+                        .unwrap_or("")
+                        .to_string();
+
+                    // Check if this is an AskUserQuestion
+                    if tool_name == "AskUserQuestion" {
+                        if let Some(tool_input) = denial.get("tool_input") {
+                            if let Some(questions) =
+                                tool_input.get("questions").and_then(|q| q.as_array())
+                            {
+                                if let Some(first_question) = questions.first() {
+                                    let question = first_question
+                                        .get("question")
+                                        .and_then(|q| q.as_str())
+                                        .unwrap_or("")
+                                        .to_string();
+
+                                    let header = first_question
+                                        .get("header")
+                                        .and_then(|h| h.as_str())
+                                        .map(|s| s.to_string());
+
+                                    let multi_select = first_question
+                                        .get("multiSelect")
+                                        .and_then(|m| m.as_bool())
+                                        .unwrap_or(false);
+
+                                    let options: Vec<QuestionOption> = first_question
+                                        .get("options")
+                                        .and_then(|opts| opts.as_array())
+                                        .map(|opts| {
+                                            opts.iter()
+                                                .filter_map(|opt| {
+                                                    let label = opt
+                                                        .get("label")
+                                                        .and_then(|l| l.as_str())?;
+                                                    let description = opt
+                                                        .get("description")
+                                                        .and_then(|d| d.as_str())
+                                                        .map(|s| s.to_string());
+                                                    Some(QuestionOption {
+                                                        label: label.to_string(),
+                                                        description,
+                                                    })
+                                                })
+                                                .collect()
+                                        })
+                                        .unwrap_or_default();
+
+                                    let id = denial
+                                        .get("tool_use_id")
+                                        .and_then(|i| i.as_str())
+                                        .unwrap_or("")
+                                        .to_string();
+
+                                    callback(ProviderStreamEvent::Question {
+                                        id,
+                                        question,
+                                        header,
+                                        options,
+                                        multi_select,
+                                    });
+                                }
+                            }
+                        }
+                    } else {
+                        let id = denial
+                            .get("tool_use_id")
+                            .and_then(|i| i.as_str())
+                            .unwrap_or("")
+                            .to_string();
+                        let tool_input = denial
+                            .get("tool_input")
+                            .cloned()
+                            .unwrap_or(serde_json::Value::Null);
+                        let description = format_tool_description(&tool_name, &tool_input);
+
+                        callback(ProviderStreamEvent::PermissionRequest {
+                            id,
+                            tool_name,
+                            tool_input,
+                            description,
+                        });
+                    }
+                }
+            }
+
+            if subtype != "success" {
+                if let Some(result) = message.get("result").and_then(|r| r.as_str()) {
+                    callback(ProviderStreamEvent::Error {
+                        message: result.to_string(),
+                    });
+                }
+            }
+        }
+
+        _ => {}
+    }
+
+    Ok(())
+}
+
+fn format_tool_description(name: &str, input: &serde_json::Value) -> String {
+    match name {
+        "Read" => {
+            if let Some(path) = input.get("file_path").and_then(|v| v.as_str()) {
+                format!("Reading file: {}", path)
+            } else {
+                "Reading file...".to_string()
+            }
+        }
+        "Glob" => {
+            if let Some(pattern) = input.get("pattern").and_then(|v| v.as_str()) {
+                format!("Searching for files: {}", pattern)
+            } else {
+                "Searching for files...".to_string()
+            }
+        }
+        "Grep" => {
+            if let Some(pattern) = input.get("pattern").and_then(|v| v.as_str()) {
+                format!("Searching for: {}", pattern)
+            } else {
+                "Searching in files...".to_string()
+            }
+        }
+        "Edit" | "Write" => {
+            if let Some(path) = input.get("file_path").and_then(|v| v.as_str()) {
+                format!("Editing: {}", path)
+            } else {
+                "Editing file...".to_string()
+            }
+        }
+        "Bash" => {
+            if let Some(cmd) = input.get("command").and_then(|v| v.as_str()) {
+                let truncated = if cmd.len() > 50 {
+                    format!("{}...", &cmd[..50])
+                } else {
+                    cmd.to_string()
+                };
+                format!("Running: {}", truncated)
+            } else {
+                "Running command...".to_string()
+            }
+        }
+        _ => format!("Using tool: {}", name),
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_provider_name() {
+        let config = ProviderConfig::default();
+        let provider = ClaudeCliProvider::new(config);
+        assert_eq!(provider.name(), "Claude CLI");
+    }
+
+    #[test]
+    fn test_capabilities() {
+        let config = ProviderConfig::default();
+        let provider = ClaudeCliProvider::new(config);
+        let caps = provider.capabilities();
+
+        assert!(caps.supports_streaming);
+        assert!(caps.supports_tools);
+        assert!(caps.supports_vision);
+        assert!(caps.supports_thinking);
+        assert!(caps.supports_mcp);
+        assert!(caps.supports_resume_session);
+        assert_eq!(caps.max_context_tokens, Some(200_000));
+        assert!(!caps.available_models.is_empty());
+    }
+
+    #[test]
+    fn test_is_running_initial() {
+        let config = ProviderConfig::default();
+        let provider = ClaudeCliProvider::new(config);
+        assert!(!provider.is_running());
+    }
+
+    #[test]
+    fn test_get_working_directory() {
+        let config = ProviderConfig {
+            working_directory: "/home/test".to_string(),
+            ..Default::default()
+        };
+        let provider = ClaudeCliProvider::new(config);
+        assert_eq!(provider.get_working_directory(), "/home/test");
+    }
+
+    #[test]
+    fn test_get_model() {
+        let config = ProviderConfig {
+            model: Some("claude-sonnet-4-20250514".to_string()),
+            ..Default::default()
+        };
+        let provider = ClaudeCliProvider::new(config);
+        assert_eq!(
+            provider.get_model(),
+            Some("claude-sonnet-4-20250514".to_string())
+        );
+    }
+
+    #[test]
+    fn test_format_tool_description() {
+        let input = serde_json::json!({"file_path": "/test/file.rs"});
+        assert_eq!(
+            format_tool_description("Read", &input),
+            "Reading file: /test/file.rs"
+        );
+
+        let input = serde_json::json!({"pattern": "*.rs"});
+        assert_eq!(
+            format_tool_description("Glob", &input),
+            "Searching for files: *.rs"
+        );
+
+        let input = serde_json::json!({"command": "ls -la"});
+        assert_eq!(format_tool_description("Bash", &input), "Running: ls -la");
+    }
+}

src-tauri/src/providers/mod.rs

@@ -0,0 +1,148 @@
+mod claude_cli;
+mod ollama;
+mod traits;
+
+// Re-exports for when providers are fully integrated
+#[allow(unused_imports)]
+pub use claude_cli::ClaudeCliProvider;
+#[allow(unused_imports)]
+pub use ollama::OllamaProvider;
+#[allow(unused_imports)]
+pub use traits::{
+    LlmProvider, ModelInfo, ProviderCapabilities, ProviderConfig, ProviderMessage,
+    ProviderStreamEvent, ProviderUsage, QuestionOption, StreamCallback,
+};
+
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize, Default)]
+#[serde(rename_all = "snake_case")]
+pub enum ProviderType {
+    #[default]
+    ClaudeCli,
+    Ollama,
+    OpenAi,
+    Anthropic,
+    Gemini,
+}
+
+#[allow(dead_code)]
+impl ProviderType {
+    pub fn display_name(&self) -> &'static str {
+        match self {
+            ProviderType::ClaudeCli => "Claude CLI",
+            ProviderType::Ollama => "Ollama (Local)",
+            ProviderType::OpenAi => "OpenAI API",
+            ProviderType::Anthropic => "Anthropic API",
+            ProviderType::Gemini => "Google Gemini",
+        }
+    }
+
+    pub fn description(&self) -> &'static str {
+        match self {
+            ProviderType::ClaudeCli => "Use Claude Code CLI for AI assistance",
+            ProviderType::Ollama => "Use locally running Ollama models",
+            ProviderType::OpenAi => "Direct OpenAI API access (GPT-4, etc.)",
+            ProviderType::Anthropic => "Direct Anthropic API access (Claude models)",
+            ProviderType::Gemini => "Direct Google Gemini API access",
+        }
+    }
+
+    pub fn requires_api_key(&self) -> bool {
+        matches!(
+            self,
+            ProviderType::OpenAi | ProviderType::Anthropic | ProviderType::Gemini
+        )
+    }
+}
+
+// Note: The new providers (OpenAI, Anthropic, Gemini) are implemented directly
+// in provider_bridge.rs using the Bridge pattern rather than the LlmProvider trait.
+// This simplifies the architecture while still providing full functionality.
+
+#[allow(dead_code)]
+pub fn create_provider(
+    provider_type: ProviderType,
+    config: ProviderConfig,
+) -> Box<dyn LlmProvider> {
+    match provider_type {
+        ProviderType::ClaudeCli => Box::new(ClaudeCliProvider::new(config)),
+        ProviderType::Ollama => Box::new(OllamaProvider::new(config)),
+        // The new API-based providers are handled in provider_bridge.rs
+        ProviderType::OpenAi | ProviderType::Anthropic | ProviderType::Gemini => {
+            // These providers use the Bridge pattern in provider_bridge.rs
+            // Fall back to Claude CLI for trait-based usage
+            Box::new(ClaudeCliProvider::new(config))
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_provider_type_display_name() {
+        assert_eq!(ProviderType::ClaudeCli.display_name(), "Claude CLI");
+        assert_eq!(ProviderType::Ollama.display_name(), "Ollama (Local)");
+        assert_eq!(ProviderType::OpenAi.display_name(), "OpenAI API");
+        assert_eq!(ProviderType::Anthropic.display_name(), "Anthropic API");
+        assert_eq!(ProviderType::Gemini.display_name(), "Google Gemini");
+    }
+
+    #[test]
+    fn test_provider_type_default() {
+        let default: ProviderType = Default::default();
+        assert_eq!(default, ProviderType::ClaudeCli);
+    }
+
+    #[test]
+    fn test_provider_type_serialization() {
+        let claude = ProviderType::ClaudeCli;
+        let json = serde_json::to_string(&claude).unwrap();
+        assert_eq!(json, "\"claude_cli\"");
+
+        let ollama = ProviderType::Ollama;
+        let json = serde_json::to_string(&ollama).unwrap();
+        assert_eq!(json, "\"ollama\"");
+
+        let openai = ProviderType::OpenAi;
+        let json = serde_json::to_string(&openai).unwrap();
+        assert_eq!(json, "\"open_ai\"");
+
+        let anthropic = ProviderType::Anthropic;
+        let json = serde_json::to_string(&anthropic).unwrap();
+        assert_eq!(json, "\"anthropic\"");
+
+        let gemini = ProviderType::Gemini;
+        let json = serde_json::to_string(&gemini).unwrap();
+        assert_eq!(json, "\"gemini\"");
+    }
+
+    #[test]
+    fn test_provider_type_deserialization() {
+        let claude: ProviderType = serde_json::from_str("\"claude_cli\"").unwrap();
+        assert_eq!(claude, ProviderType::ClaudeCli);
+
+        let ollama: ProviderType = serde_json::from_str("\"ollama\"").unwrap();
+        assert_eq!(ollama, ProviderType::Ollama);
+
+        let openai: ProviderType = serde_json::from_str("\"open_ai\"").unwrap();
+        assert_eq!(openai, ProviderType::OpenAi);
+
+        let anthropic: ProviderType = serde_json::from_str("\"anthropic\"").unwrap();
+        assert_eq!(anthropic, ProviderType::Anthropic);
+
+        let gemini: ProviderType = serde_json::from_str("\"gemini\"").unwrap();
+        assert_eq!(gemini, ProviderType::Gemini);
+    }
+
+    #[test]
+    fn test_provider_type_requires_api_key() {
+        assert!(!ProviderType::ClaudeCli.requires_api_key());
+        assert!(!ProviderType::Ollama.requires_api_key());
+        assert!(ProviderType::OpenAi.requires_api_key());
+        assert!(ProviderType::Anthropic.requires_api_key());
+        assert!(ProviderType::Gemini.requires_api_key());
+    }
+}

src-tauri/src/providers/ollama.rs

@@ -0,0 +1,537 @@
+// This provider connects to a local Ollama instance for LLM inference.
+// It will be actively used once providers are fully integrated with BridgeManager.
+#![allow(dead_code)]
+
+use async_trait::async_trait;
+use serde::{Deserialize, Serialize};
+use std::sync::atomic::{AtomicBool, Ordering};
+use std::sync::Arc;
+use tokio::sync::mpsc;
+
+use crate::providers::traits::{
+    LlmProvider, ModelInfo, ProviderCapabilities, ProviderConfig, ProviderMessage,
+    ProviderStreamEvent, ProviderUsage, StreamCallback,
+};
+
+const DEFAULT_OLLAMA_URL: &str = "http://localhost:11434";
+
+#[derive(Debug, Serialize)]
+struct OllamaChatRequest {
+    model: String,
+    messages: Vec<OllamaMessage>,
+    stream: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    system: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+struct OllamaMessage {
+    role: String,
+    content: String,
+}
+
+#[derive(Debug, Deserialize)]
+struct OllamaChatResponse {
+    #[serde(default)]
+    message: Option<OllamaResponseMessage>,
+    #[serde(default)]
+    done: bool,
+    #[serde(default)]
+    eval_count: Option<u64>,
+    #[serde(default)]
+    prompt_eval_count: Option<u64>,
+}
+
+#[derive(Debug, Deserialize)]
+struct OllamaResponseMessage {
+    #[serde(default)]
+    content: String,
+}
+
+#[derive(Debug, Deserialize)]
+struct OllamaTagsResponse {
+    models: Vec<OllamaModelInfo>,
+}
+
+#[derive(Debug, Deserialize)]
+struct OllamaModelInfo {
+    name: String,
+    #[serde(default)]
+    details: Option<OllamaModelDetails>,
+}
+
+#[derive(Debug, Deserialize)]
+struct OllamaModelDetails {
+    #[serde(default)]
+    parameter_size: Option<String>,
+    #[serde(default)]
+    family: Option<String>,
+}
+
+pub struct OllamaProvider {
+    config: ProviderConfig,
+    client: reqwest::Client,
+    base_url: String,
+    is_running: Arc<AtomicBool>,
+    conversation_history: Vec<OllamaMessage>,
+    cancel_tx: Option<mpsc::Sender<()>>,
+}
+
+impl OllamaProvider {
+    pub fn new(config: ProviderConfig) -> Self {
+        let base_url = config
+            .api_base_url
+            .clone()
+            .unwrap_or_else(|| DEFAULT_OLLAMA_URL.to_string());
+
+        Self {
+            config,
+            client: reqwest::Client::new(),
+            base_url,
+            is_running: Arc::new(AtomicBool::new(false)),
+            conversation_history: Vec::new(),
+            cancel_tx: None,
+        }
+    }
+
+    async fn fetch_available_models(&self) -> Vec<ModelInfo> {
+        let url = format!("{}/api/tags", self.base_url);
+
+        match self.client.get(&url).send().await {
+            Ok(response) => {
+                if let Ok(tags) = response.json::<OllamaTagsResponse>().await {
+                    tags.models
+                        .into_iter()
+                        .map(|m| {
+                            let description = m.details.as_ref().map(|d| {
+                                let mut desc_parts = Vec::new();
+                                if let Some(ref family) = d.family {
+                                    desc_parts.push(family.clone());
+                                }
+                                if let Some(ref size) = d.parameter_size {
+                                    desc_parts.push(format!("{} parameters", size));
+                                }
+                                if desc_parts.is_empty() {
+                                    "Local model".to_string()
+                                } else {
+                                    desc_parts.join(" - ")
+                                }
+                            });
+
+                            ModelInfo {
+                                id: m.name.clone(),
+                                name: m.name,
+                                description,
+                                context_window: None,
+                                input_cost_per_mtok: Some(0.0), // Local = free!
+                                output_cost_per_mtok: Some(0.0),
+                            }
+                        })
+                        .collect()
+                } else {
+                    default_ollama_models()
+                }
+            }
+            Err(_) => default_ollama_models(),
+        }
+    }
+
+    async fn stream_chat(
+        &mut self,
+        callback: Arc<StreamCallback>,
+        cancel_rx: mpsc::Receiver<()>,
+    ) -> Result<(), String> {
+        let model = self
+            .config
+            .model
+            .clone()
+            .unwrap_or_else(|| "llama3.2".to_string());
+
+        let request = OllamaChatRequest {
+            model: model.clone(),
+            messages: self.conversation_history.clone(),
+            stream: true,
+            system: self.config.custom_instructions.clone(),
+        };
+
+        let url = format!("{}/api/chat", self.base_url);
+
+        let response = self
+            .client
+            .post(&url)
+            .json(&request)
+            .send()
+            .await
+            .map_err(|e| format!("Failed to connect to Ollama: {}", e))?;
+
+        if !response.status().is_success() {
+            let status = response.status();
+            let error_text = response
+                .text()
+                .await
+                .unwrap_or_else(|_| "Unknown error".to_string());
+            return Err(format!("Ollama error ({}): {}", status, error_text));
+        }
+
+        let mut full_response = String::new();
+        let mut total_input_tokens: u64 = 0;
+        let mut total_output_tokens: u64 = 0;
+
+        let mut stream = response.bytes_stream();
+        let mut cancel_rx = cancel_rx;
+
+        use futures_util::StreamExt;
+
+        loop {
+            tokio::select! {
+                _ = cancel_rx.recv() => {
+                    callback(ProviderStreamEvent::Disconnected);
+                    return Ok(());
+                }
+                chunk = stream.next() => {
+                    match chunk {
+                        Some(Ok(bytes)) => {
+                            let text = String::from_utf8_lossy(&bytes);
+
+                            for line in text.lines() {
+                                if line.trim().is_empty() {
+                                    continue;
+                                }
+
+                                if let Ok(response) = serde_json::from_str::<OllamaChatResponse>(line) {
+                                    if let Some(msg) = &response.message {
+                                        if !msg.content.is_empty() {
+                                            full_response.push_str(&msg.content);
+                                            callback(ProviderStreamEvent::TextDelta {
+                                                text: msg.content.clone(),
+                                            });
+                                        }
+                                    }
+
+                                    if let Some(tokens) = response.prompt_eval_count {
+                                        total_input_tokens = tokens;
+                                    }
+                                    if let Some(tokens) = response.eval_count {
+                                        total_output_tokens = tokens;
+                                    }
+
+                                    if response.done {
+                                        self.conversation_history.push(OllamaMessage {
+                                            role: "assistant".to_string(),
+                                            content: full_response.clone(),
+                                        });
+
+                                        callback(ProviderStreamEvent::MessageComplete {
+                                            content: vec![ProviderMessage::Text {
+                                                content: full_response,
+                                            }],
+                                            usage: Some(ProviderUsage {
+                                                input_tokens: total_input_tokens,
+                                                output_tokens: total_output_tokens,
+                                                model,
+                                            }),
+                                            stop_reason: Some("end_turn".to_string()),
+                                        });
+
+                                        return Ok(());
+                                    }
+                                }
+                            }
+                        }
+                        Some(Err(e)) => {
+                            return Err(format!("Stream error: {}", e));
+                        }
+                        None => {
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+
+        Ok(())
+    }
+}
+
+#[async_trait]
+impl LlmProvider for OllamaProvider {
+    fn name(&self) -> &'static str {
+        "Ollama"
+    }
+
+    fn capabilities(&self) -> ProviderCapabilities {
+        ProviderCapabilities {
+            supports_streaming: true,
+            supports_tools: false, // Ollama doesn't support tools natively yet
+            supports_vision: true, // Some models support vision
+            supports_thinking: false,
+            supports_mcp: false,
+            supports_resume_session: false,
+            max_context_tokens: None, // Varies by model
+            available_models: default_ollama_models(),
+        }
+    }
+
+    async fn start(&mut self, callback: StreamCallback) -> Result<(), String> {
+        if self.is_running.load(Ordering::SeqCst) {
+            return Err("Provider already running".to_string());
+        }
+
+        // Check if Ollama is reachable
+        let url = format!("{}/api/tags", self.base_url);
+        self.client.get(&url).send().await.map_err(|e| {
+            format!(
+                "Cannot connect to Ollama at {}. Is it running? Error: {}",
+                self.base_url, e
+            )
+        })?;
+
+        self.is_running.store(true, Ordering::SeqCst);
+        self.conversation_history.clear();
+
+        // Create cancellation channel
+        let (tx, _rx) = mpsc::channel(1);
+        self.cancel_tx = Some(tx);
+
+        callback(ProviderStreamEvent::Connected { session_id: None });
+
+        // Fetch and report available models
+        let models = self.fetch_available_models().await;
+        if !models.is_empty() {
+            eprintln!(
+                "[Ollama] Available models: {:?}",
+                models.iter().map(|m| &m.id).collect::<Vec<_>>()
+            );
+        }
+
+        Ok(())
+    }
+
+    async fn stop(&mut self) -> Result<(), String> {
+        self.is_running.store(false, Ordering::SeqCst);
+        self.conversation_history.clear();
+
+        if let Some(tx) = self.cancel_tx.take() {
+            let _ = tx.send(()).await;
+        }
+
+        Ok(())
+    }
+
+    fn is_running(&self) -> bool {
+        self.is_running.load(Ordering::SeqCst)
+    }
+
+    async fn send_message(&mut self, message: &str) -> Result<(), String> {
+        if !self.is_running.load(Ordering::SeqCst) {
+            return Err("Provider not running".to_string());
+        }
+
+        // Add user message to history
+        self.conversation_history.push(OllamaMessage {
+            role: "user".to_string(),
+            content: message.to_string(),
+        });
+
+        // Create a new cancel channel for this request
+        let (tx, _rx) = mpsc::channel(1);
+        self.cancel_tx = Some(tx);
+
+        // We need a callback here, but we don't have access to it in send_message
+        // This is a limitation of the current trait design
+        // For now, we'll need to refactor to handle streaming properly
+        // The callback should be stored from the start() call
+
+        // For the MVP, we'll emit events directly
+        // In a real implementation, we'd need to restructure this
+
+        Err("send_message needs refactoring to work with stored callback".to_string())
+    }
+
+    async fn send_tool_result(
+        &mut self,
+        _tool_use_id: &str,
+        _result: serde_json::Value,
+        _is_error: bool,
+    ) -> Result<(), String> {
+        // Ollama doesn't support tool use natively
+        Err("Ollama does not support tool use".to_string())
+    }
+
+    fn get_model(&self) -> Option<String> {
+        self.config.model.clone()
+    }
+
+    fn get_working_directory(&self) -> &str {
+        &self.config.working_directory
+    }
+
+    async fn interrupt(&mut self) -> Result<(), String> {
+        if let Some(tx) = self.cancel_tx.take() {
+            let _ = tx.send(()).await;
+        }
+        self.is_running.store(false, Ordering::SeqCst);
+        Ok(())
+    }
+}
+
+fn default_ollama_models() -> Vec<ModelInfo> {
+    vec![
+        ModelInfo {
+            id: "llama3.2".to_string(),
+            name: "Llama 3.2".to_string(),
+            description: Some("Meta's latest compact model".to_string()),
+            context_window: Some(128_000),
+            input_cost_per_mtok: Some(0.0),
+            output_cost_per_mtok: Some(0.0),
+        },
+        ModelInfo {
+            id: "llama3.2:1b".to_string(),
+            name: "Llama 3.2 1B".to_string(),
+            description: Some("Smallest Llama 3.2 variant".to_string()),
+            context_window: Some(128_000),
+            input_cost_per_mtok: Some(0.0),
+            output_cost_per_mtok: Some(0.0),
+        },
+        ModelInfo {
+            id: "qwen2.5-coder".to_string(),
+            name: "Qwen 2.5 Coder".to_string(),
+            description: Some("Alibaba's coding-focused model".to_string()),
+            context_window: Some(32_000),
+            input_cost_per_mtok: Some(0.0),
+            output_cost_per_mtok: Some(0.0),
+        },
+        ModelInfo {
+            id: "deepseek-coder-v2".to_string(),
+            name: "DeepSeek Coder V2".to_string(),
+            description: Some("DeepSeek's coding model".to_string()),
+            context_window: Some(128_000),
+            input_cost_per_mtok: Some(0.0),
+            output_cost_per_mtok: Some(0.0),
+        },
+        ModelInfo {
+            id: "mistral".to_string(),
+            name: "Mistral 7B".to_string(),
+            description: Some("Fast and capable".to_string()),
+            context_window: Some(32_000),
+            input_cost_per_mtok: Some(0.0),
+            output_cost_per_mtok: Some(0.0),
+        },
+        ModelInfo {
+            id: "gemma2".to_string(),
+            name: "Gemma 2".to_string(),
+            description: Some("Google's open model".to_string()),
+            context_window: Some(8_000),
+            input_cost_per_mtok: Some(0.0),
+            output_cost_per_mtok: Some(0.0),
+        },
+    ]
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_provider_name() {
+        let config = ProviderConfig::default();
+        let provider = OllamaProvider::new(config);
+        assert_eq!(provider.name(), "Ollama");
+    }
+
+    #[test]
+    fn test_capabilities() {
+        let config = ProviderConfig::default();
+        let provider = OllamaProvider::new(config);
+        let caps = provider.capabilities();
+
+        assert!(caps.supports_streaming);
+        assert!(!caps.supports_tools);
+        assert!(!caps.supports_mcp);
+        assert!(!caps.supports_resume_session);
+        assert!(!caps.available_models.is_empty());
+    }
+
+    #[test]
+    fn test_default_url() {
+        let config = ProviderConfig::default();
+        let provider = OllamaProvider::new(config);
+        assert_eq!(provider.base_url, DEFAULT_OLLAMA_URL);
+    }
+
+    #[test]
+    fn test_custom_url() {
+        let config = ProviderConfig {
+            api_base_url: Some("http://custom:8080".to_string()),
+            ..Default::default()
+        };
+        let provider = OllamaProvider::new(config);
+        assert_eq!(provider.base_url, "http://custom:8080");
+    }
+
+    #[test]
+    fn test_is_running_initial() {
+        let config = ProviderConfig::default();
+        let provider = OllamaProvider::new(config);
+        assert!(!provider.is_running());
+    }
+
+    #[test]
+    fn test_default_ollama_models() {
+        let models = default_ollama_models();
+        assert!(!models.is_empty());
+
+        // All models should be free (local)
+        for model in &models {
+            assert_eq!(model.input_cost_per_mtok, Some(0.0));
+            assert_eq!(model.output_cost_per_mtok, Some(0.0));
+        }
+
+        // Should include llama
+        assert!(models.iter().any(|m| m.id.contains("llama")));
+    }
+
+    #[test]
+    fn test_ollama_message_serialization() {
+        let msg = OllamaMessage {
+            role: "user".to_string(),
+            content: "Hello!".to_string(),
+        };
+
+        let json = serde_json::to_string(&msg).unwrap();
+        assert!(json.contains("\"role\":\"user\""));
+        assert!(json.contains("\"content\":\"Hello!\""));
+    }
+
+    #[test]
+    fn test_chat_request_serialization() {
+        let request = OllamaChatRequest {
+            model: "llama3.2".to_string(),
+            messages: vec![OllamaMessage {
+                role: "user".to_string(),
+                content: "Test".to_string(),
+            }],
+            stream: true,
+            system: Some("You are helpful".to_string()),
+        };
+
+        let json = serde_json::to_string(&request).unwrap();
+        assert!(json.contains("\"model\":\"llama3.2\""));
+        assert!(json.contains("\"stream\":true"));
+        assert!(json.contains("\"system\":\"You are helpful\""));
+    }
+
+    #[test]
+    fn test_chat_request_without_system() {
+        let request = OllamaChatRequest {
+            model: "llama3.2".to_string(),
+            messages: vec![],
+            stream: true,
+            system: None,
+        };
+
+        let json = serde_json::to_string(&request).unwrap();
+        // system should be omitted when None
+        assert!(!json.contains("\"system\""));
+    }
+}

src-tauri/src/providers/traits.rs

@@ -0,0 +1,236 @@
+// These types are all used by the provider abstraction layer.
+// They will be actively used once providers are fully integrated with BridgeManager.
+#![allow(dead_code)]
+
+use async_trait::async_trait;
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ProviderConfig {
+    pub api_key: Option<String>,
+    pub api_base_url: Option<String>,
+    pub model: Option<String>,
+    pub custom_instructions: Option<String>,
+    pub working_directory: String,
+    pub mcp_servers_json: Option<String>,
+    pub allowed_tools: Vec<String>,
+    #[serde(default)]
+    pub extra_options: HashMap<String, serde_json::Value>,
+}
+
+impl Default for ProviderConfig {
+    fn default() -> Self {
+        Self {
+            api_key: None,
+            api_base_url: None,
+            model: None,
+            custom_instructions: None,
+            working_directory: String::new(),
+            mcp_servers_json: None,
+            allowed_tools: Vec::new(),
+            extra_options: HashMap::new(),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ProviderCapabilities {
+    pub supports_streaming: bool,
+    pub supports_tools: bool,
+    pub supports_vision: bool,
+    pub supports_thinking: bool,
+    pub supports_mcp: bool,
+    pub supports_resume_session: bool,
+    pub max_context_tokens: Option<u64>,
+    pub available_models: Vec<ModelInfo>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ModelInfo {
+    pub id: String,
+    pub name: String,
+    pub description: Option<String>,
+    pub context_window: Option<u64>,
+    pub input_cost_per_mtok: Option<f64>,
+    pub output_cost_per_mtok: Option<f64>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(tag = "type")]
+pub enum ProviderMessage {
+    #[serde(rename = "text")]
+    Text { content: String },
+    #[serde(rename = "tool_use")]
+    ToolUse {
+        id: String,
+        name: String,
+        input: serde_json::Value,
+    },
+    #[serde(rename = "tool_result")]
+    ToolResult {
+        tool_use_id: String,
+        content: String,
+        is_error: bool,
+    },
+    #[serde(rename = "thinking")]
+    Thinking { content: String },
+    #[serde(rename = "image")]
+    Image { media_type: String, data: String },
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ProviderUsage {
+    pub input_tokens: u64,
+    pub output_tokens: u64,
+    pub model: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(tag = "type")]
+pub enum ProviderStreamEvent {
+    #[serde(rename = "connected")]
+    Connected { session_id: Option<String> },
+    #[serde(rename = "text_delta")]
+    TextDelta { text: String },
+    #[serde(rename = "thinking_delta")]
+    ThinkingDelta { text: String },
+    #[serde(rename = "tool_use_start")]
+    ToolUseStart { id: String, name: String },
+    #[serde(rename = "tool_use_delta")]
+    ToolUseDelta { id: String, input_delta: String },
+    #[serde(rename = "tool_use_end")]
+    ToolUseEnd { id: String, input: serde_json::Value },
+    #[serde(rename = "message_complete")]
+    MessageComplete {
+        content: Vec<ProviderMessage>,
+        usage: Option<ProviderUsage>,
+        stop_reason: Option<String>,
+    },
+    #[serde(rename = "permission_request")]
+    PermissionRequest {
+        id: String,
+        tool_name: String,
+        tool_input: serde_json::Value,
+        description: String,
+    },
+    #[serde(rename = "question")]
+    Question {
+        id: String,
+        question: String,
+        header: Option<String>,
+        options: Vec<QuestionOption>,
+        multi_select: bool,
+    },
+    #[serde(rename = "working_directory")]
+    WorkingDirectory { path: String },
+    #[serde(rename = "error")]
+    Error { message: String },
+    #[serde(rename = "disconnected")]
+    Disconnected,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct QuestionOption {
+    pub label: String,
+    pub description: Option<String>,
+}
+
+pub type StreamCallback = Box<dyn Fn(ProviderStreamEvent) + Send + Sync>;
+
+#[async_trait]
+pub trait LlmProvider: Send + Sync {
+    fn name(&self) -> &'static str;
+
+    fn capabilities(&self) -> ProviderCapabilities;
+
+    async fn start(&mut self, callback: StreamCallback) -> Result<(), String>;
+
+    async fn stop(&mut self) -> Result<(), String>;
+
+    fn is_running(&self) -> bool;
+
+    async fn send_message(&mut self, message: &str) -> Result<(), String>;
+
+    async fn send_tool_result(
+        &mut self,
+        tool_use_id: &str,
+        result: serde_json::Value,
+        is_error: bool,
+    ) -> Result<(), String>;
+
+    fn get_model(&self) -> Option<String>;
+
+    fn get_working_directory(&self) -> &str;
+
+    async fn interrupt(&mut self) -> Result<(), String>;
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_provider_config_default() {
+        let config = ProviderConfig::default();
+        assert!(config.api_key.is_none());
+        assert!(config.api_base_url.is_none());
+        assert!(config.model.is_none());
+        assert!(config.working_directory.is_empty());
+        assert!(config.allowed_tools.is_empty());
+    }
+
+    #[test]
+    fn test_provider_message_serialization() {
+        let msg = ProviderMessage::Text {
+            content: "Hello!".to_string(),
+        };
+        let json = serde_json::to_string(&msg).unwrap();
+        assert!(json.contains("\"type\":\"text\""));
+        assert!(json.contains("\"content\":\"Hello!\""));
+    }
+
+    #[test]
+    fn test_provider_stream_event_serialization() {
+        let event = ProviderStreamEvent::TextDelta {
+            text: "chunk".to_string(),
+        };
+        let json = serde_json::to_string(&event).unwrap();
+        assert!(json.contains("\"type\":\"text_delta\""));
+
+        let event = ProviderStreamEvent::Connected {
+            session_id: Some("test-123".to_string()),
+        };
+        let json = serde_json::to_string(&event).unwrap();
+        assert!(json.contains("\"session_id\":\"test-123\""));
+    }
+
+    #[test]
+    fn test_model_info() {
+        let model = ModelInfo {
+            id: "claude-sonnet-4-20250514".to_string(),
+            name: "Claude Sonnet 4".to_string(),
+            description: Some("Fast and intelligent".to_string()),
+            context_window: Some(200000),
+            input_cost_per_mtok: Some(3.0),
+            output_cost_per_mtok: Some(15.0),
+        };
+
+        let json = serde_json::to_string(&model).unwrap();
+        assert!(json.contains("claude-sonnet-4"));
+        assert!(json.contains("200000"));
+    }
+
+    #[test]
+    fn test_provider_usage() {
+        let usage = ProviderUsage {
+            input_tokens: 100,
+            output_tokens: 50,
+            model: "claude-opus-4-20250514".to_string(),
+        };
+
+        let json = serde_json::to_string(&usage).unwrap();
+        assert!(json.contains("\"input_tokens\":100"));
+        assert!(json.contains("\"output_tokens\":50"));
+    }
+}

src-tauri/src/wsl_bridge.rs

@@ -704,7 +704,7 @@ fn process_json_line(
             subtype,
             result,
             permission_denials,
-            usage: _,
+            usage,
             ..
         } => {
             let state = if subtype == "success" {
@@ -713,6 +713,21 @@ fn process_json_line(
                 CharacterState::Error
             };
 
+            // Track token usage from Result messages if available
+            // This captures tokens from tool outputs and other operations
+            if let Some(usage_info) = usage {
+                // We need the model info to calculate cost properly
+                // For now, use the last known model from stats
+                let model = {
+                    let stats_guard = stats.read();
+                    stats_guard.model.clone().unwrap_or_else(|| "claude-opus-4-20250514".to_string())
+                };
+
+                let mut stats_guard = stats.write();
+                stats_guard.add_usage(usage_info.input_tokens, usage_info.output_tokens, &model);
+                println!("Result message tokens - input: {}, output: {}", usage_info.input_tokens, usage_info.output_tokens);
+            }
+
             // Always emit updated stats on result message (less frequent)
             // This includes the latest session duration
             let newly_unlocked = {

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "hikari-desktop",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "identifier": "com.naomi.hikari-desktop",
   "build": {
     "beforeDevCommand": "pnpm dev",

src/lib/components/ConfigSidebar.svelte

@@ -3,6 +3,7 @@
     configStore,
     type HikariConfig,
     type Theme,
+    type ProviderType,
     type CustomThemeColors,
     applyFontSize,
     applyCustomThemeColors,
@@ -14,11 +15,22 @@
   import { getCurrentWindow } from "@tauri-apps/api/window";
 
   let config: HikariConfig = $state({
+    provider_type: "claude_cli",
     model: null,
     api_key: null,
     custom_instructions: null,
     mcp_servers_json: null,
     auto_granted_tools: [],
+    ollama_base_url: "http://localhost:11434",
+    ollama_model: null,
+    openai_api_key: null,
+    openai_base_url: "https://api.openai.com/v1",
+    openai_model: null,
+    anthropic_api_key: null,
+    anthropic_base_url: "https://api.anthropic.com",
+    anthropic_model: null,
+    gemini_api_key: null,
+    gemini_model: null,
     theme: "dark",
     greeting_enabled: true,
     greeting_custom_prompt: null,
@@ -72,12 +84,53 @@
     grantedTools = Array.from(tools);
   });
 
+  const availableProviders: { value: ProviderType; label: string; description: string }[] = [
+    { value: "claude_cli", label: "Claude CLI", description: "Use Claude Code CLI for AI assistance" },
+    { value: "ollama", label: "Ollama (Local)", description: "Use locally running Ollama models" },
+    { value: "open_ai", label: "OpenAI API", description: "Direct OpenAI API access (GPT-4o, etc.)" },
+    { value: "anthropic", label: "Anthropic API", description: "Direct Anthropic API access (Claude models)" },
+    { value: "gemini", label: "Google Gemini", description: "Direct Google Gemini API access" },
+  ];
+
   const availableModels = [
     { value: "", label: "Default (from ~/.claude)" },
     { value: "claude-sonnet-4-20250514", label: "Claude Sonnet 4" },
     { value: "claude-opus-4-20250514", label: "Claude Opus 4" },
   ];
 
+  const ollamaModels = [
+    { value: "", label: "Default (llama3.2)" },
+    { value: "llama3.2", label: "Llama 3.2" },
+    { value: "llama3.2:1b", label: "Llama 3.2 1B" },
+    { value: "qwen2.5-coder", label: "Qwen 2.5 Coder" },
+    { value: "deepseek-coder-v2", label: "DeepSeek Coder V2" },
+    { value: "mistral", label: "Mistral 7B" },
+    { value: "gemma2", label: "Gemma 2" },
+  ];
+
+  const openaiModels = [
+    { value: "", label: "Default (gpt-4o)" },
+    { value: "gpt-4o", label: "GPT-4o" },
+    { value: "gpt-4o-mini", label: "GPT-4o Mini" },
+    { value: "gpt-4-turbo", label: "GPT-4 Turbo" },
+    { value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
+  ];
+
+  const anthropicModels = [
+    { value: "", label: "Default (Claude Sonnet 4.5)" },
+    { value: "claude-sonnet-4-5-20250514", label: "Claude Sonnet 4.5" },
+    { value: "claude-opus-4-20250514", label: "Claude Opus 4" },
+    { value: "claude-3-5-sonnet-20241022", label: "Claude 3.5 Sonnet" },
+    { value: "claude-3-5-haiku-20241022", label: "Claude 3.5 Haiku" },
+  ];
+
+  const geminiModels = [
+    { value: "", label: "Default (gemini-2.0-flash)" },
+    { value: "gemini-2.0-flash", label: "Gemini 2.0 Flash" },
+    { value: "gemini-1.5-pro", label: "Gemini 1.5 Pro" },
+    { value: "gemini-1.5-flash", label: "Gemini 1.5 Flash" },
+  ];
+
   const commonTools = [
     "Read",
     "Write",
@@ -207,6 +260,235 @@
       </div>
     {/if}
 
+    <!-- Provider Selection Section -->
+    <section class="mb-6">
+      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
+        AI Provider
+      </h3>
+
+      <div class="space-y-2">
+        {#each availableProviders as provider (provider.value)}
+          <label class="flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors {config.provider_type === provider.value
+            ? 'border-[var(--accent-primary)] bg-[var(--accent-primary)]/10'
+            : 'border-[var(--border-color)] bg-[var(--bg-primary)] hover:border-[var(--accent-primary)]/50'}">
+            <input
+              type="radio"
+              name="provider"
+              value={provider.value}
+              checked={config.provider_type === provider.value}
+              onchange={() => config.provider_type = provider.value}
+              class="mt-1 w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] focus:ring-[var(--accent-primary)]"
+            />
+            <div class="flex-1">
+              <div class="text-sm font-medium text-[var(--text-primary)]">{provider.label}</div>
+              <div class="text-xs text-[var(--text-tertiary)]">{provider.description}</div>
+            </div>
+          </label>
+        {/each}
+      </div>
+
+      <!-- Ollama-specific settings -->
+      {#if config.provider_type === "ollama"}
+        <div class="mt-4 p-3 bg-[var(--bg-primary)] rounded-lg border border-[var(--border-color)]">
+          <h4 class="text-sm font-medium text-[var(--text-primary)] mb-3">Ollama Settings</h4>
+
+          <!-- Ollama Base URL -->
+          <div class="mb-3">
+            <label for="ollama-url" class="block text-xs text-[var(--text-secondary)] mb-1">
+              Base URL
+            </label>
+            <input
+              id="ollama-url"
+              type="text"
+              bind:value={config.ollama_base_url}
+              placeholder="http://localhost:11434"
+              class="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
+            />
+          </div>
+
+          <!-- Ollama Model Selection -->
+          <div class="mb-3">
+            <label for="ollama-model" class="block text-xs text-[var(--text-secondary)] mb-1">
+              Model
+            </label>
+            <select
+              id="ollama-model"
+              bind:value={config.ollama_model}
+              class="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
+            >
+              {#each ollamaModels as model (model.value)}
+                <option value={model.value}>{model.label}</option>
+              {/each}
+            </select>
+            <p class="text-xs text-[var(--text-tertiary)] mt-1">
+              Make sure the model is downloaded via <code class="text-[var(--accent-secondary)]">ollama pull</code>
+            </p>
+          </div>
+
+          <div class="p-2 bg-yellow-500/10 border border-yellow-500/30 rounded text-xs text-yellow-400">
+            <strong>Note:</strong> Ollama doesn't support tools, MCP servers, or thinking blocks.
+            For full Claude Code features, use the Claude CLI provider.
+          </div>
+        </div>
+      {/if}
+
+      <!-- OpenAI-specific settings -->
+      {#if config.provider_type === "open_ai"}
+        <div class="mt-4 p-3 bg-[var(--bg-primary)] rounded-lg border border-[var(--border-color)]">
+          <h4 class="text-sm font-medium text-[var(--text-primary)] mb-3">OpenAI Settings</h4>
+
+          <!-- OpenAI API Key -->
+          <div class="mb-3">
+            <label for="openai-api-key" class="block text-xs text-[var(--text-secondary)] mb-1">
+              API Key
+            </label>
+            <input
+              id="openai-api-key"
+              type="password"
+              bind:value={config.openai_api_key}
+              placeholder="sk-..."
+              class="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
+            />
+          </div>
+
+          <!-- OpenAI Base URL -->
+          <div class="mb-3">
+            <label for="openai-url" class="block text-xs text-[var(--text-secondary)] mb-1">
+              Base URL <span class="text-[var(--text-tertiary)]">(for OpenAI-compatible APIs)</span>
+            </label>
+            <input
+              id="openai-url"
+              type="text"
+              bind:value={config.openai_base_url}
+              placeholder="https://api.openai.com/v1"
+              class="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
+            />
+          </div>
+
+          <!-- OpenAI Model Selection -->
+          <div class="mb-3">
+            <label for="openai-model" class="block text-xs text-[var(--text-secondary)] mb-1">
+              Model
+            </label>
+            <select
+              id="openai-model"
+              bind:value={config.openai_model}
+              class="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
+            >
+              {#each openaiModels as model (model.value)}
+                <option value={model.value}>{model.label}</option>
+              {/each}
+            </select>
+          </div>
+
+          <div class="p-2 bg-blue-500/10 border border-blue-500/30 rounded text-xs text-blue-400">
+            <strong>Tip:</strong> You can use this with any OpenAI-compatible API (Groq, Together AI, etc.)
+            by changing the Base URL.
+          </div>
+        </div>
+      {/if}
+
+      <!-- Anthropic-specific settings -->
+      {#if config.provider_type === "anthropic"}
+        <div class="mt-4 p-3 bg-[var(--bg-primary)] rounded-lg border border-[var(--border-color)]">
+          <h4 class="text-sm font-medium text-[var(--text-primary)] mb-3">Anthropic Settings</h4>
+
+          <!-- Anthropic API Key -->
+          <div class="mb-3">
+            <label for="anthropic-api-key" class="block text-xs text-[var(--text-secondary)] mb-1">
+              API Key
+            </label>
+            <input
+              id="anthropic-api-key"
+              type="password"
+              bind:value={config.anthropic_api_key}
+              placeholder="sk-ant-..."
+              class="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
+            />
+          </div>
+
+          <!-- Anthropic Base URL -->
+          <div class="mb-3">
+            <label for="anthropic-url" class="block text-xs text-[var(--text-secondary)] mb-1">
+              Base URL <span class="text-[var(--text-tertiary)]">(optional)</span>
+            </label>
+            <input
+              id="anthropic-url"
+              type="text"
+              bind:value={config.anthropic_base_url}
+              placeholder="https://api.anthropic.com"
+              class="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
+            />
+          </div>
+
+          <!-- Anthropic Model Selection -->
+          <div class="mb-3">
+            <label for="anthropic-model" class="block text-xs text-[var(--text-secondary)] mb-1">
+              Model
+            </label>
+            <select
+              id="anthropic-model"
+              bind:value={config.anthropic_model}
+              class="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
+            >
+              {#each anthropicModels as model (model.value)}
+                <option value={model.value}>{model.label}</option>
+              {/each}
+            </select>
+          </div>
+
+          <div class="p-2 bg-purple-500/10 border border-purple-500/30 rounded text-xs text-purple-400">
+            <strong>Note:</strong> This uses the Anthropic API directly without Claude Code CLI features
+            like tools, MCP, or thinking blocks.
+          </div>
+        </div>
+      {/if}
+
+      <!-- Gemini-specific settings -->
+      {#if config.provider_type === "gemini"}
+        <div class="mt-4 p-3 bg-[var(--bg-primary)] rounded-lg border border-[var(--border-color)]">
+          <h4 class="text-sm font-medium text-[var(--text-primary)] mb-3">Gemini Settings</h4>
+
+          <!-- Gemini API Key -->
+          <div class="mb-3">
+            <label for="gemini-api-key" class="block text-xs text-[var(--text-secondary)] mb-1">
+              API Key
+            </label>
+            <input
+              id="gemini-api-key"
+              type="password"
+              bind:value={config.gemini_api_key}
+              placeholder="AIza..."
+              class="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
+            />
+            <p class="text-xs text-[var(--text-tertiary)] mt-1">
+              Get your API key from <a href="https://aistudio.google.com/apikey" target="_blank" class="text-[var(--accent-secondary)] hover:underline">Google AI Studio</a>
+            </p>
+          </div>
+
+          <!-- Gemini Model Selection -->
+          <div class="mb-3">
+            <label for="gemini-model" class="block text-xs text-[var(--text-secondary)] mb-1">
+              Model
+            </label>
+            <select
+              id="gemini-model"
+              bind:value={config.gemini_model}
+              class="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
+            >
+              {#each geminiModels as model (model.value)}
+                <option value={model.value}>{model.label}</option>
+              {/each}
+            </select>
+          </div>
+
+          <div class="p-2 bg-green-500/10 border border-green-500/30 rounded text-xs text-green-400">
+            <strong>Note:</strong> Gemini has a generous free tier! Great for experimenting.
+          </div>
+        </div>
+      {/if}
+    </section>
+
     <!-- Agent Settings Section -->
     <section class="mb-6">
       <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">

src/lib/components/InputBar.svelte

@@ -30,6 +30,7 @@
   import SnippetLibraryPanel from "$lib/components/SnippetLibraryPanel.svelte";
   import QuickActionsPanel from "$lib/components/QuickActionsPanel.svelte";
   import ClipboardHistoryPanel from "$lib/components/ClipboardHistoryPanel.svelte";
+  import TextInputContextMenu from "$lib/components/TextInputContextMenu.svelte";
   import type { Attachment } from "$lib/types/messages";
 
   const INPUT_HISTORY_KEY = "hikari-input-history";
@@ -49,6 +50,23 @@
   let showClipboardHistory = $state(false);
   let streamerModeActive = $state(false);
 
+  // Context menu state
+  let textareaElement: HTMLTextAreaElement | undefined = $state();
+  let contextMenuShow = $state(false);
+  let contextMenuX = $state(0);
+  let contextMenuY = $state(0);
+
+  function handleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+    contextMenuShow = true;
+    contextMenuX = event.clientX;
+    contextMenuY = event.clientY;
+  }
+
+  function closeContextMenu() {
+    contextMenuShow = false;
+  }
+
   isStreamerMode.subscribe((value) => {
     streamerModeActive = value;
   });
@@ -876,10 +894,12 @@ User: ${formattedMessage}`;
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div class="resize-handle" onmousedown={handleResizeStart} title="Drag to resize"></div>
       <textarea
+        bind:this={textareaElement}
         bind:value={inputValue}
         onkeydown={handleKeyDown}
         oninput={handleInputChange}
         onpaste={handlePaste}
+        oncontextmenu={handleContextMenu}
         placeholder={isConnected
           ? "Ask Hikari anything... (type / for commands)"
           : "Connect to Claude first..."}
@@ -958,6 +978,15 @@ User: ${formattedMessage}`;
   />
 {/if}
 
+{#if contextMenuShow && textareaElement}
+  <TextInputContextMenu
+    x={contextMenuX}
+    y={contextMenuY}
+    inputElement={textareaElement}
+    onClose={closeContextMenu}
+  />
+{/if}
+
 <style>
   .input-bar {
     display: flex;

src/lib/components/KeyboardShortcutsModal.svelte

@@ -12,6 +12,7 @@
         { keys: ["Escape"], description: "Close modals and panels" },
         { keys: ["Ctrl", "L"], description: "Clear the terminal" },
         { keys: ["Ctrl", ","], description: "Open settings" },
+        { keys: ["Ctrl", "E"], description: "Toggle file editor" },
         { keys: ["Ctrl", "Shift", "M"], description: "Toggle compact mode" },
         { keys: ["Ctrl", "Shift", "S"], description: "Toggle streamer mode" },
       ],
@@ -26,6 +27,17 @@
         { keys: ["↓"], description: "Next input from history" },
       ],
     },
+    {
+      category: "File Editor",
+      items: [
+        { keys: ["Ctrl", "E"], description: "Toggle editor view" },
+        { keys: ["Ctrl", "B"], description: "Toggle file browser" },
+        { keys: ["Ctrl", "S"], description: "Save current file" },
+        { keys: ["Ctrl", "W"], description: "Close current tab" },
+        { keys: ["Ctrl", "N"], description: "New file" },
+        { keys: ["Right-click"], description: "Context menu (New/Delete)" },
+      ],
+    },
     {
       category: "Slash Commands",
       items: [

src/lib/components/StatusBar.svelte

@@ -13,6 +13,7 @@
   import { get } from "svelte/store";
   import { claudeStore } from "$lib/stores/claude";
   import { configStore, type HikariConfig, isStreamerMode } from "$lib/stores/config";
+  import { editorStore } from "$lib/stores/editor";
   import type { ConnectionStatus } from "$lib/types/messages";
   import { onMount } from "svelte";
   import StatsDisplay from "./StatsDisplay.svelte";
@@ -42,11 +43,22 @@
   let showProfile = $state(false);
   const progress = $derived($achievementProgress);
   let currentConfig: HikariConfig = $state({
+    provider_type: "claude_cli",
     model: null,
     api_key: null,
     custom_instructions: null,
     mcp_servers_json: null,
     auto_granted_tools: [],
+    ollama_base_url: "http://localhost:11434",
+    ollama_model: null,
+    openai_api_key: null,
+    openai_base_url: "https://api.openai.com/v1",
+    openai_model: null,
+    anthropic_api_key: null,
+    anthropic_base_url: "https://api.anthropic.com",
+    anthropic_model: null,
+    gemini_api_key: null,
+    gemini_model: null,
     theme: "dark",
     greeting_enabled: true,
     greeting_custom_prompt: null,
@@ -80,6 +92,15 @@
     streamerModeActive = value;
   });
 
+  let editorVisible = $state(false);
+  editorStore.isEditorVisible.subscribe((value) => {
+    editorVisible = value;
+  });
+
+  function toggleEditor() {
+    editorStore.toggleEditor();
+  }
+
   onMount(async () => {
     appVersion = await getVersion();
   });
@@ -135,12 +156,23 @@
       await invoke("start_claude", {
         conversationId,
         options: {
+          provider_type: currentConfig.provider_type || "claude_cli",
           working_dir: targetDir,
           model: currentConfig.model || null,
           api_key: currentConfig.api_key || null,
           custom_instructions: currentConfig.custom_instructions || null,
           mcp_servers_json: currentConfig.mcp_servers_json || null,
           allowed_tools: allAllowedTools,
+          ollama_base_url: currentConfig.ollama_base_url || "http://localhost:11434",
+          ollama_model: currentConfig.ollama_model || null,
+          openai_api_key: currentConfig.openai_api_key || null,
+          openai_base_url: currentConfig.openai_base_url || "https://api.openai.com/v1",
+          openai_model: currentConfig.openai_model || null,
+          anthropic_api_key: currentConfig.anthropic_api_key || null,
+          anthropic_base_url: currentConfig.anthropic_base_url || "https://api.anthropic.com",
+          anthropic_model: currentConfig.anthropic_model || null,
+          gemini_api_key: currentConfig.gemini_api_key || null,
+          gemini_model: currentConfig.gemini_model || null,
         },
       });
     } catch (error) {
@@ -307,6 +339,25 @@
         />
       </svg>
     </button>
+    <button
+      onclick={toggleEditor}
+      disabled={connectionStatus !== "connected"}
+      class="p-1 text-gray-500 icon-trans-hover {editorVisible
+        ? 'text-[var(--trans-pink)]'
+        : ''} disabled:opacity-40 disabled:cursor-not-allowed"
+      title={connectionStatus === "connected"
+        ? "File Editor (Ctrl+E)"
+        : "Connect to enable file editor"}
+    >
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+        />
+      </svg>
+    </button>
     <button
       onclick={() => (showStats = !showStats)}
       class="p-1 text-gray-500 icon-trans-hover {showStats ? 'text-[var(--trans-pink)]' : ''}"

src/lib/components/Terminal.svelte

@@ -155,6 +155,30 @@
       terminalElement.removeEventListener("copy", handleCopy);
     }
   });
+
+  // Copy message content to clipboard
+  async function copyMessage(content: string) {
+    try {
+      await navigator.clipboard.writeText(content);
+      // Optionally capture to clipboard history
+      await clipboardStore.captureClipboard(content, null, "Message from chat");
+
+      // Visual feedback could be added here if needed
+    } catch (error) {
+      console.error("Failed to copy message:", error);
+    }
+  }
+
+  // State for showing "Copied!" feedback
+  let copiedMessageId: string | null = null;
+
+  async function handleCopyMessage(messageId: string, content: string) {
+    await copyMessage(content);
+    copiedMessageId = messageId;
+    setTimeout(() => {
+      copiedMessageId = null;
+    }, 2000);
+  }
 </script>
 
 <div
@@ -185,7 +209,7 @@
       </div>
     {:else}
       {#each lines as line (line.id)}
-        <div class="terminal-line mb-2 {getLineClass(line.type)}">
+        <div class="terminal-line mb-2 {getLineClass(line.type)} relative group">
           <span class="terminal-timestamp text-xs mr-2">{formatTime(line.timestamp)}</span>
           {#if getLinePrefix(line.type)}
             <span class="terminal-prefix mr-2">{getLinePrefix(line.type)}</span>
@@ -193,11 +217,33 @@
           {#if line.toolName}
             <span class="terminal-tool-name mr-2">[{line.toolName}]</span>
           {/if}
-          {#if line.type === "assistant"}
+          {#if line.type === "assistant" || line.type === "user"}
-            <Markdown
+            <div class="message-content-wrapper">
-              content={maskPaths(line.content, hidePaths)}
+              <Markdown
-              searchQuery={currentSearchQuery}
+                content={maskPaths(line.content, hidePaths)}
-            />
+                searchQuery={currentSearchQuery}
+              />
+              <button
+                class="copy-message-btn opacity-0 group-hover:opacity-100 transition-opacity"
+                onclick={() => handleCopyMessage(line.id, line.content)}
+                title="Copy message"
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+                <span class="copy-text">{copiedMessageId === line.id ? "Copied!" : "Copy"}</span>
+              </button>
+            </div>
           {:else}
             <HighlightedText
               content={maskPaths(line.content, hidePaths)}
@@ -267,4 +313,45 @@
     border-radius: 2px;
     padding: 0 2px;
   }
+
+  /* Message content wrapper for positioning */
+  .message-content-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+
+  /* Copy button styling */
+  .copy-message-btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.4em;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    padding: 0.25em 0.5em;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 0.85em;
+    font-family: inherit;
+    transition: all 0.15s ease;
+  }
+
+  .copy-message-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    border-color: var(--border-hover, var(--border-color));
+  }
+
+  .copy-message-btn svg {
+    flex-shrink: 0;
+  }
+
+  /* Ensure relative positioning for parent */
+  .terminal-line {
+    position: relative;
+  }
 </style>

src/lib/components/TextInputContextMenu.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+  interface Props {
+    x: number;
+    y: number;
+    inputElement: HTMLTextAreaElement | HTMLInputElement;
+    onClose: () => void;
+  }
+
+  let { x, y, inputElement, onClose }: Props = $props();
+
+  // Menu element reference for measuring
+  let menuElement: HTMLDivElement | undefined = $state();
+
+  // Adjusted position to keep menu within viewport
+  let adjustedX = $derived.by(() => {
+    if (!menuElement) return x;
+    const menuWidth = menuElement.offsetWidth || 180;
+    const maxX = window.innerWidth - menuWidth - 8;
+    return Math.min(x, maxX);
+  });
+
+  let adjustedY = $derived.by(() => {
+    if (!menuElement) return y;
+    const menuHeight = menuElement.offsetHeight || 250;
+    const maxY = window.innerHeight - menuHeight - 8;
+    return Math.min(y, maxY);
+  });
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      onClose();
+    }
+  }
+
+  function execCommand(command: "cut" | "copy" | "paste" | "selectAll" | "undo" | "redo") {
+    inputElement.focus();
+
+    switch (command) {
+      case "cut":
+        document.execCommand("cut");
+        break;
+      case "copy":
+        document.execCommand("copy");
+        break;
+      case "paste":
+        document.execCommand("paste");
+        break;
+      case "selectAll":
+        inputElement.select();
+        break;
+      case "undo":
+        document.execCommand("undo");
+        break;
+      case "redo":
+        document.execCommand("redo");
+        break;
+    }
+    onClose();
+  }
+
+  // Check if there's a selection
+  let hasSelection = $derived(inputElement.selectionStart !== inputElement.selectionEnd);
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+<div
+  class="menu-overlay"
+  onclick={onClose}
+  oncontextmenu={(e) => {
+    e.preventDefault();
+    onClose();
+  }}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={menuElement}
+    class="menu-content"
+    style="left: {adjustedX}px; top: {adjustedY}px;"
+    onclick={(e) => e.stopPropagation()}
+  >
+    <button class="menu-item" onclick={() => execCommand("undo")}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M3 10h10a5 5 0 0 1 5 5v2M3 10l4-4M3 10l4 4"
+        />
+      </svg>
+      Undo
+      <span class="shortcut">Ctrl+Z</span>
+    </button>
+
+    <button class="menu-item" onclick={() => execCommand("redo")}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M21 10H11a5 5 0 0 0-5 5v2M21 10l-4-4M21 10l-4 4"
+        />
+      </svg>
+      Redo
+      <span class="shortcut">Ctrl+Y</span>
+    </button>
+
+    <div class="menu-divider"></div>
+
+    <button class="menu-item" onclick={() => execCommand("cut")} disabled={!hasSelection}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 1 0-4.243-4.243 3 3 0 0 0 4.243 4.243zm0-5.758a3 3 0 1 0-4.243-4.243 3 3 0 0 0 4.243 4.243z"
+        />
+      </svg>
+      Cut
+      <span class="shortcut">Ctrl+X</span>
+    </button>
+
+    <button class="menu-item" onclick={() => execCommand("copy")} disabled={!hasSelection}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M8 16H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2m-6 12h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2z"
+        />
+      </svg>
+      Copy
+      <span class="shortcut">Ctrl+C</span>
+    </button>
+
+    <button class="menu-item" onclick={() => execCommand("paste")}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"
+        />
+      </svg>
+      Paste
+      <span class="shortcut">Ctrl+V</span>
+    </button>
+
+    <div class="menu-divider"></div>
+
+    <button class="menu-item" onclick={() => execCommand("selectAll")}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M4 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5z"
+        />
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9h6v6H9z" />
+      </svg>
+      Select All
+      <span class="shortcut">Ctrl+A</span>
+    </button>
+  </div>
+</div>
+
+<style>
+  .menu-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+  }
+
+  .menu-content {
+    position: absolute;
+    z-index: 50;
+    min-width: 180px;
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-secondary);
+    padding: 0.25rem 0;
+    box-shadow:
+      0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .menu-item {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    text-align: left;
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .menu-item:hover:not(:disabled) {
+    background-color: var(--bg-primary);
+  }
+
+  .menu-item:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-divider {
+    margin: 0.25rem 0;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .menu-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  .shortcut {
+    margin-left: auto;
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+  }
+</style>

src/lib/components/editor/CodeEditor.svelte

@@ -0,0 +1,482 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { EditorView, basicSetup } from "codemirror";
+  import { EditorState, Compartment } from "@codemirror/state";
+  import { keymap } from "@codemirror/view";
+  import { oneDark } from "@codemirror/theme-one-dark";
+  import { javascript } from "@codemirror/lang-javascript";
+  import { python } from "@codemirror/lang-python";
+  import { rust } from "@codemirror/lang-rust";
+  import { html } from "@codemirror/lang-html";
+  import { css } from "@codemirror/lang-css";
+  import { json } from "@codemirror/lang-json";
+  import { markdown } from "@codemirror/lang-markdown";
+  import { xml } from "@codemirror/lang-xml";
+  import { sql } from "@codemirror/lang-sql";
+  import { java } from "@codemirror/lang-java";
+  import { cpp } from "@codemirror/lang-cpp";
+  import { php } from "@codemirror/lang-php";
+  import { go } from "@codemirror/lang-go";
+  import { yaml } from "@codemirror/lang-yaml";
+  import { sass } from "@codemirror/lang-sass";
+  import { less } from "@codemirror/lang-less";
+  import { vue } from "@codemirror/lang-vue";
+  import { angular } from "@codemirror/lang-angular";
+  import { wast } from "@codemirror/lang-wast";
+  import { StreamLanguage } from "@codemirror/language";
+  import { shell } from "@codemirror/legacy-modes/mode/shell";
+  import { ruby } from "@codemirror/legacy-modes/mode/ruby";
+  import { swift } from "@codemirror/legacy-modes/mode/swift";
+  import { lua } from "@codemirror/legacy-modes/mode/lua";
+  import { r } from "@codemirror/legacy-modes/mode/r";
+  import { toml } from "@codemirror/legacy-modes/mode/toml";
+  import { dockerFile } from "@codemirror/legacy-modes/mode/dockerfile";
+  import { powerShell } from "@codemirror/legacy-modes/mode/powershell";
+  import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+  import { tags } from "@lezer/highlight";
+  import { editorStore } from "$lib/stores/editor";
+  import { configStore } from "$lib/stores/config";
+  import EditorContextMenu from "./EditorContextMenu.svelte";
+  import type { EditorTab } from "$lib/types/editor";
+  import type { Extension } from "@codemirror/state";
+
+  export let tab: EditorTab;
+
+  let editorContainer: HTMLDivElement;
+  let view: EditorView | null = null;
+  let themeCompartment = new Compartment();
+
+  // Context menu state
+  let contextMenuShow = false;
+  let contextMenuX = 0;
+  let contextMenuY = 0;
+
+  function handleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+    contextMenuShow = true;
+    contextMenuX = event.clientX;
+    contextMenuY = event.clientY;
+  }
+
+  function closeContextMenu() {
+    contextMenuShow = false;
+  }
+
+  // Subscribe to theme changes
+  const config = configStore.config;
+
+  // Light theme
+  const lightTheme = EditorView.theme(
+    {
+      "&": {
+        backgroundColor: "#ffffff",
+        color: "#24292e",
+      },
+      ".cm-content": {
+        caretColor: "#24292e",
+      },
+      ".cm-cursor, .cm-dropCursor": {
+        borderLeftColor: "#24292e",
+      },
+      "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+        backgroundColor: "#c8d3f5",
+      },
+      ".cm-panels": {
+        backgroundColor: "#f6f8fa",
+        color: "#24292e",
+      },
+      ".cm-panels.cm-panels-top": {
+        borderBottom: "1px solid #e1e4e8",
+      },
+      ".cm-panels.cm-panels-bottom": {
+        borderTop: "1px solid #e1e4e8",
+      },
+      ".cm-searchMatch": {
+        backgroundColor: "#ffdf5d",
+        outline: "1px solid #c4a000",
+      },
+      ".cm-searchMatch.cm-searchMatch-selected": {
+        backgroundColor: "#c4a000",
+      },
+      ".cm-activeLine": {
+        backgroundColor: "#f6f8fa",
+      },
+      ".cm-selectionMatch": {
+        backgroundColor: "#c8d3f5",
+      },
+      ".cm-matchingBracket, .cm-nonmatchingBracket": {
+        backgroundColor: "#c8d3f5",
+        outline: "1px solid #888",
+      },
+      ".cm-gutters": {
+        backgroundColor: "#f6f8fa",
+        color: "#6a737d",
+        border: "none",
+        borderRight: "1px solid #e1e4e8",
+      },
+      ".cm-activeLineGutter": {
+        backgroundColor: "#e1e4e8",
+      },
+      ".cm-foldPlaceholder": {
+        backgroundColor: "transparent",
+        border: "none",
+        color: "#6a737d",
+      },
+      ".cm-tooltip": {
+        border: "1px solid #e1e4e8",
+        backgroundColor: "#ffffff",
+      },
+      ".cm-tooltip .cm-tooltip-arrow:before": {
+        borderTopColor: "transparent",
+        borderBottomColor: "transparent",
+      },
+      ".cm-tooltip .cm-tooltip-arrow:after": {
+        borderTopColor: "#ffffff",
+        borderBottomColor: "#ffffff",
+      },
+      ".cm-tooltip-autocomplete": {
+        "& > ul > li[aria-selected]": {
+          backgroundColor: "#e1e4e8",
+          color: "#24292e",
+        },
+      },
+    },
+    { dark: false }
+  );
+
+  const lightHighlightStyle = HighlightStyle.define([
+    { tag: tags.keyword, color: "#d73a49" },
+    {
+      tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+      color: "#6f42c1",
+    },
+    { tag: [tags.function(tags.variableName), tags.labelName], color: "#6f42c1" },
+    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: "#005cc5" },
+    { tag: [tags.definition(tags.name), tags.separator], color: "#24292e" },
+    {
+      tag: [
+        tags.typeName,
+        tags.className,
+        tags.number,
+        tags.changed,
+        tags.annotation,
+        tags.modifier,
+        tags.self,
+        tags.namespace,
+      ],
+      color: "#e36209",
+    },
+    {
+      tag: [
+        tags.operator,
+        tags.operatorKeyword,
+        tags.url,
+        tags.escape,
+        tags.regexp,
+        tags.link,
+        tags.special(tags.string),
+      ],
+      color: "#032f62",
+    },
+    { tag: [tags.meta, tags.comment], color: "#6a737d" },
+    { tag: tags.strong, fontWeight: "bold" },
+    { tag: tags.emphasis, fontStyle: "italic" },
+    { tag: tags.strikethrough, textDecoration: "line-through" },
+    { tag: tags.link, color: "#032f62", textDecoration: "underline" },
+    { tag: tags.heading, fontWeight: "bold", color: "#005cc5" },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: "#005cc5" },
+    { tag: [tags.processingInstruction, tags.string, tags.inserted], color: "#22863a" },
+    { tag: tags.invalid, color: "#cb2431" },
+  ]);
+
+  // High contrast theme
+  const highContrastTheme = EditorView.theme(
+    {
+      "&": {
+        backgroundColor: "#000000",
+        color: "#ffffff",
+      },
+      ".cm-content": {
+        caretColor: "#ffffff",
+      },
+      ".cm-cursor, .cm-dropCursor": {
+        borderLeftColor: "#ffffff",
+        borderLeftWidth: "2px",
+      },
+      "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+        backgroundColor: "#264f78",
+      },
+      ".cm-panels": {
+        backgroundColor: "#000000",
+        color: "#ffffff",
+      },
+      ".cm-panels.cm-panels-top": {
+        borderBottom: "2px solid #ffffff",
+      },
+      ".cm-panels.cm-panels-bottom": {
+        borderTop: "2px solid #ffffff",
+      },
+      ".cm-searchMatch": {
+        backgroundColor: "#515c6a",
+        outline: "2px solid #ffff00",
+      },
+      ".cm-searchMatch.cm-searchMatch-selected": {
+        backgroundColor: "#ffff00",
+        color: "#000000",
+      },
+      ".cm-activeLine": {
+        backgroundColor: "#1a1a1a",
+      },
+      ".cm-selectionMatch": {
+        backgroundColor: "#264f78",
+      },
+      ".cm-matchingBracket, .cm-nonmatchingBracket": {
+        backgroundColor: "#515c6a",
+        outline: "2px solid #ffff00",
+      },
+      ".cm-gutters": {
+        backgroundColor: "#000000",
+        color: "#858585",
+        border: "none",
+        borderRight: "2px solid #ffffff",
+      },
+      ".cm-activeLineGutter": {
+        backgroundColor: "#1a1a1a",
+        color: "#ffffff",
+      },
+      ".cm-foldPlaceholder": {
+        backgroundColor: "transparent",
+        border: "none",
+        color: "#ffff00",
+      },
+      ".cm-tooltip": {
+        border: "2px solid #ffffff",
+        backgroundColor: "#000000",
+      },
+      ".cm-tooltip .cm-tooltip-arrow:before": {
+        borderTopColor: "transparent",
+        borderBottomColor: "transparent",
+      },
+      ".cm-tooltip .cm-tooltip-arrow:after": {
+        borderTopColor: "#000000",
+        borderBottomColor: "#000000",
+      },
+      ".cm-tooltip-autocomplete": {
+        "& > ul > li[aria-selected]": {
+          backgroundColor: "#264f78",
+          color: "#ffffff",
+        },
+      },
+    },
+    { dark: true }
+  );
+
+  const highContrastHighlightStyle = HighlightStyle.define([
+    { tag: tags.keyword, color: "#569cd6", fontWeight: "bold" },
+    {
+      tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+      color: "#9cdcfe",
+    },
+    { tag: [tags.function(tags.variableName), tags.labelName], color: "#dcdcaa" },
+    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: "#4fc1ff" },
+    { tag: [tags.definition(tags.name), tags.separator], color: "#ffffff" },
+    {
+      tag: [
+        tags.typeName,
+        tags.className,
+        tags.number,
+        tags.changed,
+        tags.annotation,
+        tags.modifier,
+        tags.self,
+        tags.namespace,
+      ],
+      color: "#4ec9b0",
+    },
+    {
+      tag: [
+        tags.operator,
+        tags.operatorKeyword,
+        tags.url,
+        tags.escape,
+        tags.regexp,
+        tags.link,
+        tags.special(tags.string),
+      ],
+      color: "#d4d4d4",
+    },
+    { tag: [tags.meta, tags.comment], color: "#6a9955" },
+    { tag: tags.strong, fontWeight: "bold" },
+    { tag: tags.emphasis, fontStyle: "italic" },
+    { tag: tags.strikethrough, textDecoration: "line-through" },
+    { tag: tags.link, color: "#3794ff", textDecoration: "underline" },
+    { tag: tags.heading, fontWeight: "bold", color: "#569cd6" },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: "#569cd6" },
+    { tag: [tags.processingInstruction, tags.string, tags.inserted], color: "#ce9178" },
+    { tag: tags.invalid, color: "#f44747" },
+  ]);
+
+  function getThemeExtension(theme: string): Extension {
+    switch (theme) {
+      case "light":
+        return [lightTheme, syntaxHighlighting(lightHighlightStyle)];
+      case "high-contrast":
+        return [highContrastTheme, syntaxHighlighting(highContrastHighlightStyle)];
+      case "dark":
+      case "custom":
+      default:
+        return oneDark;
+    }
+  }
+
+  function getLanguageExtension(language: string): Extension {
+    const languageMap: Record<string, () => Extension> = {
+      javascript: () => javascript({ jsx: true, typescript: false }),
+      typescript: () => javascript({ jsx: true, typescript: true }),
+      python: () => python(),
+      rust: () => rust(),
+      html: () => html(),
+      css: () => css(),
+      json: () => json(),
+      markdown: () => markdown(),
+      xml: () => xml(),
+      sql: () => sql(),
+      java: () => java(),
+      c: () => cpp(),
+      cpp: () => cpp(),
+      csharp: () => cpp(),
+      php: () => php(),
+      go: () => go(),
+      yaml: () => yaml(),
+      scss: () => sass(),
+      sass: () => sass(),
+      less: () => less(),
+      vue: () => vue(),
+      angular: () => angular(),
+      wasm: () => wast(),
+      shell: () => StreamLanguage.define(shell),
+      ruby: () => StreamLanguage.define(ruby),
+      swift: () => StreamLanguage.define(swift),
+      lua: () => StreamLanguage.define(lua),
+      r: () => StreamLanguage.define(r),
+      toml: () => StreamLanguage.define(toml),
+      dockerfile: () => StreamLanguage.define(dockerFile),
+      powershell: () => StreamLanguage.define(powerShell),
+      svelte: () => html(),
+    };
+
+    const getExtension = languageMap[language];
+    return getExtension ? getExtension() : [];
+  }
+
+  function createEditor() {
+    if (!editorContainer) return;
+
+    const currentTheme = $config.theme;
+
+    const saveKeymap = keymap.of([
+      {
+        key: "Mod-s",
+        run: () => {
+          editorStore.saveFile(tab.id);
+          return true;
+        },
+      },
+    ]);
+
+    const updateListener = EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        const content = update.state.doc.toString();
+        editorStore.updateTabContent(tab.id, content);
+      }
+    });
+
+    const state = EditorState.create({
+      doc: tab.content,
+      extensions: [
+        basicSetup,
+        themeCompartment.of(getThemeExtension(currentTheme)),
+        getLanguageExtension(tab.language),
+        saveKeymap,
+        updateListener,
+        EditorView.theme({
+          "&": {
+            height: "100%",
+            fontSize: "14px",
+          },
+          ".cm-scroller": {
+            overflow: "auto",
+          },
+          ".cm-content": {
+            fontFamily: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace",
+          },
+        }),
+      ],
+    });
+
+    view = new EditorView({
+      state,
+      parent: editorContainer,
+    });
+  }
+
+  function destroyEditor() {
+    if (view) {
+      view.destroy();
+      view = null;
+    }
+  }
+
+  // Watch for theme changes and update the editor
+  $: if (view && $config.theme) {
+    view.dispatch({
+      effects: themeCompartment.reconfigure(getThemeExtension($config.theme)),
+    });
+  }
+
+  onMount(() => {
+    createEditor();
+  });
+
+  onDestroy(() => {
+    destroyEditor();
+  });
+
+  $: if (view && tab.content !== view.state.doc.toString()) {
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: tab.content,
+      },
+    });
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="code-editor" bind:this={editorContainer} oncontextmenu={handleContextMenu}></div>
+
+{#if contextMenuShow && view}
+  <EditorContextMenu
+    x={contextMenuX}
+    y={contextMenuY}
+    editorView={view}
+    onClose={closeContextMenu}
+  />
+{/if}
+
+<style>
+  .code-editor {
+    flex: 1;
+    overflow: hidden;
+    background-color: var(--bg-terminal);
+  }
+
+  .code-editor :global(.cm-editor) {
+    height: 100%;
+  }
+
+  .code-editor :global(.cm-focused) {
+    outline: none;
+  }
+</style>

src/lib/components/editor/ConfirmDialog.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  interface Props {
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    destructive?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+  }
+
+  let {
+    title,
+    message,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    destructive = false,
+    onConfirm,
+    onCancel,
+  }: Props = $props();
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      onCancel();
+    } else if (event.key === "Enter") {
+      onConfirm();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="dialog-overlay" onclick={onCancel}>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="dialog-content" onclick={(e) => e.stopPropagation()}>
+    <h2 class="dialog-title">{title}</h2>
+    <p class="dialog-message">{message}</p>
+
+    <div class="dialog-actions">
+      <button class="btn-cancel" onclick={onCancel}>
+        {cancelText}
+      </button>
+      <button class="btn-confirm" class:destructive onclick={onConfirm}>
+        {confirmText}
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .dialog-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .dialog-content {
+    margin: 0 1rem;
+    width: 100%;
+    max-width: 28rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-secondary);
+    padding: 1.5rem;
+    box-shadow:
+      0 20px 25px -5px rgba(0, 0, 0, 0.1),
+      0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .dialog-title {
+    margin-bottom: 0.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .dialog-message {
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+  }
+
+  .dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+  }
+
+  .btn-cancel {
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-primary);
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .btn-cancel:hover {
+    background-color: var(--bg-secondary);
+  }
+
+  .btn-confirm {
+    border-radius: 0.375rem;
+    border: none;
+    background-color: var(--accent-primary);
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .btn-confirm:hover {
+    background-color: var(--accent-secondary);
+  }
+
+  .btn-confirm.destructive {
+    background-color: #dc2626;
+  }
+
+  .btn-confirm.destructive:hover {
+    background-color: #b91c1c;
+  }
+</style>

src/lib/components/editor/EditorContextMenu.svelte

@@ -0,0 +1,238 @@
+<script lang="ts">
+  import type { EditorView } from "@codemirror/view";
+
+  interface Props {
+    x: number;
+    y: number;
+    editorView: EditorView;
+    onClose: () => void;
+  }
+
+  let { x, y, editorView, onClose }: Props = $props();
+
+  // Menu element reference for measuring
+  let menuElement: HTMLDivElement | undefined = $state();
+
+  // Adjusted position to keep menu within viewport
+  let adjustedX = $derived.by(() => {
+    if (!menuElement) return x;
+    const menuWidth = menuElement.offsetWidth || 180;
+    const maxX = window.innerWidth - menuWidth - 8;
+    return Math.min(x, maxX);
+  });
+
+  let adjustedY = $derived.by(() => {
+    if (!menuElement) return y;
+    const menuHeight = menuElement.offsetHeight || 250;
+    const maxY = window.innerHeight - menuHeight - 8;
+    return Math.min(y, maxY);
+  });
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      onClose();
+    }
+  }
+
+  function execCommand(command: "cut" | "copy" | "paste" | "selectAll" | "undo" | "redo") {
+    editorView.focus();
+
+    switch (command) {
+      case "cut":
+        document.execCommand("cut");
+        break;
+      case "copy":
+        document.execCommand("copy");
+        break;
+      case "paste":
+        document.execCommand("paste");
+        break;
+      case "selectAll":
+        editorView.dispatch({
+          selection: { anchor: 0, head: editorView.state.doc.length },
+        });
+        break;
+      case "undo":
+        import("@codemirror/commands").then(({ undo }) => {
+          undo(editorView);
+        });
+        break;
+      case "redo":
+        import("@codemirror/commands").then(({ redo }) => {
+          redo(editorView);
+        });
+        break;
+    }
+    onClose();
+  }
+
+  // Check if there's a selection
+  let hasSelection = $derived(
+    editorView.state.selection.main.from !== editorView.state.selection.main.to
+  );
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+<div
+  class="menu-overlay"
+  onclick={onClose}
+  oncontextmenu={(e) => {
+    e.preventDefault();
+    onClose();
+  }}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={menuElement}
+    class="menu-content"
+    style="left: {adjustedX}px; top: {adjustedY}px;"
+    onclick={(e) => e.stopPropagation()}
+  >
+    <button class="menu-item" onclick={() => execCommand("undo")}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M3 10h10a5 5 0 0 1 5 5v2M3 10l4-4M3 10l4 4"
+        />
+      </svg>
+      Undo
+      <span class="shortcut">Ctrl+Z</span>
+    </button>
+
+    <button class="menu-item" onclick={() => execCommand("redo")}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M21 10H11a5 5 0 0 0-5 5v2M21 10l-4-4M21 10l-4 4"
+        />
+      </svg>
+      Redo
+      <span class="shortcut">Ctrl+Y</span>
+    </button>
+
+    <div class="menu-divider"></div>
+
+    <button class="menu-item" onclick={() => execCommand("cut")} disabled={!hasSelection}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 1 0-4.243-4.243 3 3 0 0 0 4.243 4.243zm0-5.758a3 3 0 1 0-4.243-4.243 3 3 0 0 0 4.243 4.243z"
+        />
+      </svg>
+      Cut
+      <span class="shortcut">Ctrl+X</span>
+    </button>
+
+    <button class="menu-item" onclick={() => execCommand("copy")} disabled={!hasSelection}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M8 16H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2m-6 12h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2z"
+        />
+      </svg>
+      Copy
+      <span class="shortcut">Ctrl+C</span>
+    </button>
+
+    <button class="menu-item" onclick={() => execCommand("paste")}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"
+        />
+      </svg>
+      Paste
+      <span class="shortcut">Ctrl+V</span>
+    </button>
+
+    <div class="menu-divider"></div>
+
+    <button class="menu-item" onclick={() => execCommand("selectAll")}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M4 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5z"
+        />
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9h6v6H9z" />
+      </svg>
+      Select All
+      <span class="shortcut">Ctrl+A</span>
+    </button>
+  </div>
+</div>
+
+<style>
+  .menu-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+  }
+
+  .menu-content {
+    position: absolute;
+    z-index: 50;
+    min-width: 180px;
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-secondary);
+    padding: 0.25rem 0;
+    box-shadow:
+      0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .menu-item {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    text-align: left;
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .menu-item:hover:not(:disabled) {
+    background-color: var(--bg-primary);
+  }
+
+  .menu-item:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-divider {
+    margin: 0.25rem 0;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .menu-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  .shortcut {
+    margin-left: auto;
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+  }
+</style>

src/lib/components/editor/EditorPanel.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+  import { editorStore } from "$lib/stores/editor";
+  import FileBrowser from "./FileBrowser.svelte";
+  import EditorTabs from "./EditorTabs.svelte";
+  import CodeEditor from "./CodeEditor.svelte";
+
+  const isFileBrowserOpen = editorStore.isFileBrowserOpen;
+  const activeTab = editorStore.activeTab;
+  const saveError = editorStore.saveError;
+
+  function toggleFileBrowser() {
+    editorStore.toggleFileBrowser();
+  }
+
+  async function handleSave() {
+    try {
+      await editorStore.saveFile();
+    } catch {
+      // Error is already set in the store
+    }
+  }
+</script>
+
+<div class="editor-panel">
+  <div class="toolbar">
+    <button
+      class="toolbar-button"
+      class:active={$isFileBrowserOpen}
+      on:click={toggleFileBrowser}
+      title="Toggle file browser (Ctrl+B)"
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+      </svg>
+    </button>
+
+    <div class="toolbar-spacer"></div>
+
+    {#if $activeTab}
+      <button class="toolbar-button" on:click={handleSave} title="Save (Ctrl+S)">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+          <polyline points="17 21 17 13 7 13 7 21" />
+          <polyline points="7 3 7 8 15 8" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+
+  {#if $saveError}
+    <div class="error-banner">
+      <span>{$saveError}</span>
+      <button
+        class="dismiss-button"
+        on:click={() => {}}
+        title="Dismiss error"
+        aria-label="Dismiss error"
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  {/if}
+
+  <div class="editor-content">
+    {#if $isFileBrowserOpen}
+      <div class="file-browser-container">
+        <FileBrowser />
+      </div>
+    {/if}
+
+    <div class="editor-main">
+      <EditorTabs />
+
+      <div class="editor-area">
+        {#if $activeTab}
+          {#key $activeTab.id}
+            <CodeEditor tab={$activeTab} />
+          {/key}
+        {:else}
+          <div class="no-file">
+            <div class="no-file-content">
+              <svg
+                width="48"
+                height="48"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1"
+              >
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                <polyline points="14 2 14 8 20 8" />
+              </svg>
+              <p>Select a file to edit</p>
+              <p class="hint">Use the file browser on the left or press Ctrl+B to toggle it</p>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .editor-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--bg-primary);
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .toolbar-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+  }
+
+  .toolbar-button:hover {
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+  }
+
+  .toolbar-button.active {
+    background-color: var(--bg-primary);
+    color: var(--accent-primary);
+  }
+
+  .toolbar-spacer {
+    flex: 1;
+  }
+
+  .error-banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background-color: #ff000022;
+    border-bottom: 1px solid #ff0000;
+    color: #ff6b6b;
+    font-size: 13px;
+  }
+
+  .dismiss-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background: transparent;
+    border: none;
+    color: #ff6b6b;
+    cursor: pointer;
+    border-radius: 4px;
+  }
+
+  .dismiss-button:hover {
+    background-color: #ff000033;
+  }
+
+  .editor-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .file-browser-container {
+    width: 250px;
+    min-width: 150px;
+    max-width: 400px;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  .editor-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .editor-area {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+  }
+
+  .no-file {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--bg-terminal);
+  }
+
+  .no-file-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    color: var(--text-secondary);
+    text-align: center;
+  }
+
+  .no-file-content svg {
+    opacity: 0.5;
+  }
+
+  .no-file-content p {
+    margin: 0;
+  }
+
+  .no-file-content .hint {
+    font-size: 12px;
+    opacity: 0.7;
+  }
+</style>

src/lib/components/editor/EditorTabs.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import { editorStore } from "$lib/stores/editor";
+
+  const tabs = editorStore.tabs;
+  const activeTabId = editorStore.activeTabId;
+
+  function handleTabClick(tabId: string) {
+    editorStore.setActiveTab(tabId);
+  }
+
+  function handleCloseTab(event: MouseEvent, tabId: string) {
+    event.stopPropagation();
+    editorStore.closeTab(tabId);
+  }
+
+  function handleKeydown(event: KeyboardEvent, tabId: string) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      editorStore.setActiveTab(tabId);
+    }
+  }
+
+  function handleCloseKeydown(event: KeyboardEvent, tabId: string) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      editorStore.closeTab(tabId);
+    }
+  }
+</script>
+
+<div class="editor-tabs">
+  {#if $tabs.length === 0}
+    <div class="no-tabs">No files open</div>
+  {:else}
+    <div class="tabs-container" role="tablist">
+      {#each $tabs as tab (tab.id)}
+        <div
+          class="tab"
+          class:active={tab.id === $activeTabId}
+          class:dirty={tab.isDirty}
+          role="tab"
+          tabindex="0"
+          aria-selected={tab.id === $activeTabId}
+          on:click={() => handleTabClick(tab.id)}
+          on:keydown={(e) => handleKeydown(e, tab.id)}
+          title={tab.filePath}
+        >
+          <span class="tab-name">
+            {tab.fileName}
+            {#if tab.isDirty}
+              <span class="dirty-indicator">*</span>
+            {/if}
+          </span>
+          <button
+            class="close-button"
+            on:click={(e) => handleCloseTab(e, tab.id)}
+            on:keydown={(e) => handleCloseKeydown(e, tab.id)}
+            title="Close tab"
+            aria-label="Close {tab.fileName}"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .editor-tabs {
+    display: flex;
+    align-items: center;
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    min-height: 36px;
+  }
+
+  .no-tabs {
+    padding: 8px 12px;
+    color: var(--text-secondary);
+    font-size: 13px;
+  }
+
+  .tabs-container {
+    display: flex;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  .tab {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: transparent;
+    border: none;
+    border-right: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    font-size: 13px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.15s ease;
+  }
+
+  .tab:hover {
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+  }
+
+  .tab:focus {
+    outline: 1px solid var(--accent-primary);
+    outline-offset: -1px;
+  }
+
+  .tab.active {
+    background-color: var(--bg-terminal);
+    color: var(--text-primary);
+    border-bottom: 2px solid var(--accent-primary);
+    margin-bottom: -1px;
+  }
+
+  .tab-name {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .dirty-indicator {
+    color: var(--accent-primary);
+    font-weight: bold;
+  }
+
+  .close-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 4px;
+    opacity: 0;
+    transition: all 0.15s ease;
+  }
+
+  .tab:hover .close-button,
+  .tab.active .close-button {
+    opacity: 1;
+  }
+
+  .close-button:hover {
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+  }
+
+  .tab.dirty .close-button {
+    opacity: 1;
+  }
+</style>

src/lib/components/editor/FileBrowser.svelte

@@ -0,0 +1,358 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { editorStore } from "$lib/stores/editor";
+  import FileTreeItem from "./FileTreeItem.svelte";
+  import FileContextMenu from "./FileContextMenu.svelte";
+  import InputDialog from "./InputDialog.svelte";
+  import ConfirmDialog from "./ConfirmDialog.svelte";
+  import type { FileEntry } from "$lib/types/editor";
+
+  const fileTree = editorStore.fileTree;
+  const isLoadingTree = editorStore.isLoadingTree;
+  const currentDirectory = editorStore.currentDirectory;
+
+  // Listen for Ctrl+N keyboard shortcut from +page.svelte
+  function handleNewFileEvent() {
+    handleNewFile();
+  }
+
+  onMount(() => {
+    window.addEventListener("editor-new-file", handleNewFileEvent);
+  });
+
+  onDestroy(() => {
+    window.removeEventListener("editor-new-file", handleNewFileEvent);
+  });
+
+  // Context menu state
+  let contextMenu = $state<{
+    show: boolean;
+    x: number;
+    y: number;
+    targetEntry: FileEntry | null;
+  }>({
+    show: false,
+    x: 0,
+    y: 0,
+    targetEntry: null,
+  });
+
+  // Dialog state
+  let dialog = $state<{
+    type: "newFile" | "newFolder" | "delete" | "rename" | null;
+    parentPath: string;
+    targetEntry: FileEntry | null;
+  }>({
+    type: null,
+    parentPath: "",
+    targetEntry: null,
+  });
+
+  function handleRefresh() {
+    const dir = $currentDirectory;
+    if (dir) {
+      editorStore.initializeFileTree(dir);
+    }
+  }
+
+  function handleContextMenu(event: MouseEvent, entry: FileEntry | null = null) {
+    event.preventDefault();
+    contextMenu = {
+      show: true,
+      x: event.clientX,
+      y: event.clientY,
+      targetEntry: entry,
+    };
+  }
+
+  function closeContextMenu() {
+    contextMenu = { show: false, x: 0, y: 0, targetEntry: null };
+  }
+
+  function openNewFileDialog(parentPath: string) {
+    dialog = { type: "newFile", parentPath, targetEntry: null };
+  }
+
+  function openNewFolderDialog(parentPath: string) {
+    dialog = { type: "newFolder", parentPath, targetEntry: null };
+  }
+
+  function openDeleteDialog(entry: FileEntry) {
+    dialog = { type: "delete", parentPath: "", targetEntry: entry };
+  }
+
+  function openRenameDialog(entry: FileEntry) {
+    dialog = { type: "rename", parentPath: "", targetEntry: entry };
+  }
+
+  function closeDialog() {
+    dialog = { type: null, parentPath: "", targetEntry: null };
+  }
+
+  async function handleCreateFile(fileName: string) {
+    await editorStore.createFile(dialog.parentPath, fileName);
+    closeDialog();
+  }
+
+  async function handleCreateFolder(folderName: string) {
+    await editorStore.createDirectory(dialog.parentPath, folderName);
+    closeDialog();
+  }
+
+  async function handleDelete() {
+    if (!dialog.targetEntry) return;
+
+    if (dialog.targetEntry.isDirectory) {
+      await editorStore.deleteDirectory(dialog.targetEntry.path);
+    } else {
+      await editorStore.deleteFile(dialog.targetEntry.path);
+    }
+    closeDialog();
+  }
+
+  async function handleRename(newName: string) {
+    if (!dialog.targetEntry) return;
+    await editorStore.renamePath(dialog.targetEntry.path, newName);
+    closeDialog();
+  }
+
+  function handleNewFile() {
+    openNewFileDialog($currentDirectory);
+  }
+
+  function handleNewFolder() {
+    openNewFolderDialog($currentDirectory);
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="file-browser" oncontextmenu={(e) => handleContextMenu(e, null)}>
+  <div class="header">
+    <span class="title">Files</span>
+    <div class="header-buttons">
+      <button class="header-button" onclick={handleNewFile} title="New File (Ctrl+N)">
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+          <path d="M14 2v6h6" />
+          <path d="M12 18v-6" />
+          <path d="M9 15h6" />
+        </svg>
+      </button>
+      <button class="header-button" onclick={handleNewFolder} title="New Folder">
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+          <path d="M12 11v6" />
+          <path d="M9 14h6" />
+        </svg>
+      </button>
+      <button class="header-button" onclick={handleRefresh} title="Refresh file tree">
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M23 4v6h-6" />
+          <path d="M1 20v-6h6" />
+          <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <div class="tree-container">
+    {#if $isLoadingTree}
+      <div class="loading">
+        <svg
+          class="spinner"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="32">
+            <animate
+              attributeName="stroke-dashoffset"
+              dur="1s"
+              values="32;0"
+              repeatCount="indefinite"
+            />
+          </circle>
+        </svg>
+        <span>Loading...</span>
+      </div>
+    {:else if $fileTree.length === 0}
+      <div class="empty">
+        <span>No files found</span>
+      </div>
+    {:else}
+      <div class="tree">
+        {#each $fileTree as entry (entry.path)}
+          <FileTreeItem {entry} onContextMenu={handleContextMenu} />
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>
+
+{#if contextMenu.show}
+  <FileContextMenu
+    x={contextMenu.x}
+    y={contextMenu.y}
+    targetEntry={contextMenu.targetEntry}
+    currentDirectory={$currentDirectory}
+    onNewFile={openNewFileDialog}
+    onNewFolder={openNewFolderDialog}
+    onRename={openRenameDialog}
+    onDelete={openDeleteDialog}
+    onClose={closeContextMenu}
+  />
+{/if}
+
+{#if dialog.type === "newFile"}
+  <InputDialog
+    title="New File"
+    placeholder="Enter file name..."
+    confirmText="Create"
+    onConfirm={handleCreateFile}
+    onCancel={closeDialog}
+  />
+{/if}
+
+{#if dialog.type === "newFolder"}
+  <InputDialog
+    title="New Folder"
+    placeholder="Enter folder name..."
+    confirmText="Create"
+    onConfirm={handleCreateFolder}
+    onCancel={closeDialog}
+  />
+{/if}
+
+{#if dialog.type === "delete" && dialog.targetEntry}
+  <ConfirmDialog
+    title="Delete {dialog.targetEntry.isDirectory ? 'Folder' : 'File'}"
+    message="Are you sure you want to delete '{dialog.targetEntry.name}'? {dialog.targetEntry
+      .isDirectory
+      ? 'This will also delete all files and folders inside it.'
+      : 'This action cannot be undone.'}"
+    confirmText="Delete"
+    destructive={true}
+    onConfirm={handleDelete}
+    onCancel={closeDialog}
+  />
+{/if}
+
+{#if dialog.type === "rename" && dialog.targetEntry}
+  <InputDialog
+    title="Rename {dialog.targetEntry.isDirectory ? 'Folder' : 'File'}"
+    placeholder="Enter new name..."
+    confirmText="Rename"
+    initialValue={dialog.targetEntry.name}
+    onConfirm={handleRename}
+    onCancel={closeDialog}
+  />
+{/if}
+
+<style>
+  .file-browser {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--bg-primary);
+    border-right: 1px solid var(--border-color);
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border-color);
+    background-color: var(--bg-secondary);
+  }
+
+  .title {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    letter-spacing: 0.5px;
+  }
+
+  .header-buttons {
+    display: flex;
+    gap: 4px;
+  }
+
+  .header-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+  }
+
+  .header-button:hover {
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+  }
+
+  .tree-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px 0;
+  }
+
+  .tree {
+    min-width: max-content;
+  }
+
+  .loading,
+  .empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 24px;
+    color: var(--text-secondary);
+    font-size: 13px;
+  }
+
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

src/lib/components/editor/FileContextMenu.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+  import type { FileEntry } from "$lib/types/editor";
+
+  interface Props {
+    x: number;
+    y: number;
+    targetEntry: FileEntry | null;
+    currentDirectory: string;
+    onNewFile: (parentPath: string) => void;
+    onNewFolder: (parentPath: string) => void;
+    onRename: (entry: FileEntry) => void;
+    onDelete: (entry: FileEntry) => void;
+    onClose: () => void;
+  }
+
+  let {
+    x,
+    y,
+    targetEntry,
+    currentDirectory,
+    onNewFile,
+    onNewFolder,
+    onRename,
+    onDelete,
+    onClose,
+  }: Props = $props();
+
+  function handleNewFile() {
+    const parentPath = targetEntry?.isDirectory ? targetEntry.path : currentDirectory;
+    onNewFile(parentPath);
+    onClose();
+  }
+
+  function handleNewFolder() {
+    const parentPath = targetEntry?.isDirectory ? targetEntry.path : currentDirectory;
+    onNewFolder(parentPath);
+    onClose();
+  }
+
+  function handleRename() {
+    if (targetEntry) {
+      onRename(targetEntry);
+      onClose();
+    }
+  }
+
+  function handleDelete() {
+    if (targetEntry) {
+      onDelete(targetEntry);
+      onClose();
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      onClose();
+    }
+  }
+
+  // Menu element reference for measuring
+  let menuElement: HTMLDivElement | undefined = $state();
+
+  // Adjusted position to keep menu within viewport
+  let adjustedX = $derived.by(() => {
+    if (!menuElement) return x;
+    const menuWidth = menuElement.offsetWidth || 160;
+    const maxX = window.innerWidth - menuWidth - 8;
+    return Math.min(x, maxX);
+  });
+
+  let adjustedY = $derived.by(() => {
+    if (!menuElement) return y;
+    const menuHeight = menuElement.offsetHeight || 200;
+    const maxY = window.innerHeight - menuHeight - 8;
+    return Math.min(y, maxY);
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="menu-overlay"
+  onclick={onClose}
+  oncontextmenu={(e) => {
+    e.preventDefault();
+    onClose();
+  }}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={menuElement}
+    class="menu-content"
+    style="left: {adjustedX}px; top: {adjustedY}px;"
+    onclick={(e) => e.stopPropagation()}
+  >
+    <button class="menu-item" onclick={handleNewFile}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+        />
+      </svg>
+      New File
+    </button>
+
+    <button class="menu-item" onclick={handleNewFolder}>
+      <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
+        />
+      </svg>
+      New Folder
+    </button>
+
+    {#if targetEntry}
+      <div class="menu-divider"></div>
+
+      <button class="menu-item" onclick={handleRename}>
+        <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+          />
+        </svg>
+        Rename
+      </button>
+
+      <button class="menu-item destructive" onclick={handleDelete}>
+        <svg class="menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+          />
+        </svg>
+        Delete {targetEntry.isDirectory ? "Folder" : "File"}
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .menu-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+  }
+
+  .menu-content {
+    position: absolute;
+    z-index: 50;
+    min-width: 160px;
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-secondary);
+    padding: 0.25rem 0;
+    box-shadow:
+      0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .menu-item {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    text-align: left;
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .menu-item:hover {
+    background-color: var(--bg-primary);
+  }
+
+  .menu-item.destructive {
+    color: #ef4444;
+  }
+
+  .menu-divider {
+    margin: 0.25rem 0;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .menu-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+</style>

src/lib/components/editor/FileTreeItem.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import type { FileEntry } from "$lib/types/editor";
+  import { editorStore } from "$lib/stores/editor";
+  import Self from "./FileTreeItem.svelte";
+
+  interface Props {
+    entry: FileEntry;
+    depth?: number;
+    onContextMenu?: (event: MouseEvent, entry: FileEntry) => void;
+  }
+
+  let { entry, depth = 0, onContextMenu }: Props = $props();
+
+  function handleClick() {
+    if (entry.isDirectory) {
+      editorStore.toggleDirectory(entry);
+    } else {
+      editorStore.openFile(entry.path);
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleClick();
+    }
+  }
+
+  function handleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    onContextMenu?.(event, entry);
+  }
+
+  const isExpanded = $derived(entry.isExpanded ?? false);
+  const isLoading = $derived(entry.isLoading ?? false);
+  const children = $derived(entry.children ?? []);
+</script>
+
+<div class="file-tree-item">
+  <button
+    class="item-row"
+    class:directory={entry.isDirectory}
+    class:file={!entry.isDirectory}
+    style="padding-left: {depth * 16 + 8}px"
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+    oncontextmenu={handleContextMenu}
+    title={entry.path}
+  >
+    {#if entry.isDirectory}
+      <span class="icon">
+        {#if isLoading}
+          <svg
+            class="spinner"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="32">
+              <animate
+                attributeName="stroke-dashoffset"
+                dur="1s"
+                values="32;0"
+                repeatCount="indefinite"
+              />
+            </circle>
+          </svg>
+        {:else if isExpanded}
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M6 9l6 6 6-6" />
+          </svg>
+        {:else}
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M9 6l6 6-6 6" />
+          </svg>
+        {/if}
+      </span>
+      <span class="folder-icon">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
+          />
+        </svg>
+      </span>
+    {:else}
+      <span class="icon spacer"></span>
+      <span class="file-icon">
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+          <polyline points="14 2 14 8 20 8" />
+        </svg>
+      </span>
+    {/if}
+    <span class="name">{entry.name}</span>
+  </button>
+
+  {#if entry.isDirectory && isExpanded && children.length > 0}
+    <div class="children">
+      {#each children as child (child.path)}
+        <Self entry={child} depth={depth + 1} {onContextMenu} />
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .file-tree-item {
+    user-select: none;
+  }
+
+  .item-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+    padding: 4px 8px;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-size: 13px;
+    cursor: pointer;
+    text-align: left;
+    border-radius: 4px;
+    transition: background-color 0.15s ease;
+  }
+
+  .item-row:hover {
+    background-color: var(--bg-secondary);
+  }
+
+  .item-row:focus {
+    outline: 1px solid var(--accent-primary);
+    outline-offset: -1px;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+  }
+
+  .icon.spacer {
+    visibility: hidden;
+  }
+
+  .folder-icon {
+    flex-shrink: 0;
+    color: var(--accent-primary);
+  }
+
+  .file-icon {
+    flex-shrink: 0;
+    color: var(--text-secondary);
+  }
+
+  .name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .children {
+    margin-left: 0;
+  }
+
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

src/lib/components/editor/InputDialog.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  interface Props {
+    title: string;
+    placeholder?: string;
+    confirmText?: string;
+    cancelText?: string;
+    initialValue?: string;
+    onConfirm: (value: string) => void;
+    onCancel: () => void;
+  }
+
+  let {
+    title,
+    placeholder = "",
+    confirmText = "Create",
+    cancelText = "Cancel",
+    initialValue = "",
+    onConfirm,
+    onCancel,
+  }: Props = $props();
+
+  let inputValue = $state(initialValue);
+  let inputElement: HTMLInputElement | undefined = $state();
+
+  $effect(() => {
+    if (inputElement) {
+      inputElement.focus();
+      // Select all text for rename operations
+      if (initialValue) {
+        inputElement.select();
+      }
+    }
+  });
+
+  function handleSubmit() {
+    const trimmed = inputValue.trim();
+    if (trimmed) {
+      onConfirm(trimmed);
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      onCancel();
+    } else if (event.key === "Enter") {
+      handleSubmit();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="dialog-overlay" onclick={onCancel}>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="dialog-content" onclick={(e) => e.stopPropagation()}>
+    <h2 class="dialog-title">{title}</h2>
+
+    <input
+      bind:this={inputElement}
+      bind:value={inputValue}
+      type="text"
+      {placeholder}
+      class="dialog-input"
+    />
+
+    <div class="dialog-actions">
+      <button class="btn-cancel" onclick={onCancel}>
+        {cancelText}
+      </button>
+      <button class="btn-confirm" onclick={handleSubmit} disabled={!inputValue.trim()}>
+        {confirmText}
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .dialog-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .dialog-content {
+    margin: 0 1rem;
+    width: 100%;
+    max-width: 28rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-secondary);
+    padding: 1.5rem;
+    box-shadow:
+      0 20px 25px -5px rgba(0, 0, 0, 0.1),
+      0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .dialog-title {
+    margin-bottom: 1rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .dialog-input {
+    width: 100%;
+    margin-bottom: 1.5rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-primary);
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    outline: none;
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+
+  .dialog-input::placeholder {
+    color: var(--text-secondary);
+  }
+
+  .dialog-input:focus {
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 1px var(--accent-primary);
+  }
+
+  .dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+  }
+
+  .btn-cancel {
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-primary);
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .btn-cancel:hover {
+    background-color: var(--bg-secondary);
+  }
+
+  .btn-confirm {
+    border-radius: 0.375rem;
+    border: none;
+    background-color: var(--accent-primary);
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .btn-confirm:hover {
+    background-color: var(--accent-secondary);
+  }
+
+  .btn-confirm:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

src/lib/stores/config.ts

@@ -2,6 +2,7 @@ import { writable, derived } from "svelte/store";
 import { invoke } from "@tauri-apps/api/core";
 
 export type Theme = "dark" | "light" | "high-contrast" | "custom";
+export type ProviderType = "claude_cli" | "ollama" | "open_ai" | "anthropic" | "gemini";
 
 export interface CustomThemeColors {
   bg_primary: string | null;
@@ -15,11 +16,26 @@ export interface CustomThemeColors {
 }
 
 export interface HikariConfig {
+  provider_type: ProviderType;
   model: string | null;
   api_key: string | null;
   custom_instructions: string | null;
   mcp_servers_json: string | null;
   auto_granted_tools: string[];
+  // Ollama settings
+  ollama_base_url: string;
+  ollama_model: string | null;
+  // OpenAI settings
+  openai_api_key: string | null;
+  openai_base_url: string;
+  openai_model: string | null;
+  // Anthropic settings
+  anthropic_api_key: string | null;
+  anthropic_base_url: string;
+  anthropic_model: string | null;
+  // Gemini settings
+  gemini_api_key: string | null;
+  gemini_model: string | null;
   theme: Theme;
   greeting_enabled: boolean;
   greeting_custom_prompt: string | null;
@@ -40,11 +56,22 @@ export interface HikariConfig {
 }
 
 const defaultConfig: HikariConfig = {
+  provider_type: "claude_cli",
   model: null,
   api_key: null,
   custom_instructions: null,
   mcp_servers_json: null,
   auto_granted_tools: [],
+  ollama_base_url: "http://localhost:11434",
+  ollama_model: null,
+  openai_api_key: null,
+  openai_base_url: "https://api.openai.com/v1",
+  openai_model: null,
+  anthropic_api_key: null,
+  anthropic_base_url: "https://api.anthropic.com",
+  anthropic_model: null,
+  gemini_api_key: null,
+  gemini_model: null,
   theme: "dark",
   greeting_enabled: true,
   greeting_custom_prompt: null,

src/lib/stores/editor.ts

@@ -0,0 +1,426 @@
+import { writable, derived, get } from "svelte/store";
+import { invoke } from "@tauri-apps/api/core";
+import type { EditorState, EditorTab, FileEntry } from "$lib/types/editor";
+
+const defaultState: EditorState = {
+  tabs: [],
+  activeTabId: null,
+  isFileBrowserOpen: true,
+  currentDirectory: "",
+  fileTree: [],
+  isLoadingTree: false,
+};
+
+function getLanguageFromPath(filePath: string): string {
+  const ext = filePath.split(".").pop()?.toLowerCase() || "";
+  const languageMap: Record<string, string> = {
+    js: "javascript",
+    jsx: "javascript",
+    ts: "typescript",
+    tsx: "typescript",
+    py: "python",
+    rs: "rust",
+    go: "go",
+    java: "java",
+    c: "c",
+    cpp: "cpp",
+    h: "c",
+    hpp: "cpp",
+    cs: "csharp",
+    rb: "ruby",
+    php: "php",
+    swift: "swift",
+    kt: "kotlin",
+    scala: "scala",
+    html: "html",
+    htm: "html",
+    css: "css",
+    scss: "scss",
+    sass: "sass",
+    less: "less",
+    json: "json",
+    xml: "xml",
+    yaml: "yaml",
+    yml: "yaml",
+    toml: "toml",
+    md: "markdown",
+    markdown: "markdown",
+    sql: "sql",
+    sh: "shell",
+    bash: "shell",
+    zsh: "shell",
+    ps1: "powershell",
+    dockerfile: "dockerfile",
+    svelte: "svelte",
+    vue: "vue",
+    graphql: "graphql",
+    gql: "graphql",
+    lua: "lua",
+    r: "r",
+    dart: "dart",
+    elm: "elm",
+    ex: "elixir",
+    exs: "elixir",
+    erl: "erlang",
+    hs: "haskell",
+    clj: "clojure",
+    lisp: "lisp",
+    ml: "ocaml",
+    fs: "fsharp",
+    zig: "zig",
+    nim: "nim",
+    v: "v",
+    wasm: "wasm",
+    wat: "wasm",
+  };
+  return languageMap[ext] || "plaintext";
+}
+
+function generateTabId(): string {
+  return `tab-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+function createEditorStore() {
+  const state = writable<EditorState>(defaultState);
+  const isEditorVisible = writable<boolean>(false);
+  const saveError = writable<string | null>(null);
+
+  async function loadDirectory(dirPath: string): Promise<FileEntry[]> {
+    try {
+      const entries = await invoke<FileEntry[]>("list_directory", { path: dirPath });
+      return entries.sort((a, b) => {
+        if (a.isDirectory && !b.isDirectory) return -1;
+        if (!a.isDirectory && b.isDirectory) return 1;
+        return a.name.localeCompare(b.name);
+      });
+    } catch (error) {
+      console.error("Failed to load directory:", error);
+      return [];
+    }
+  }
+
+  async function initializeFileTree(rootPath: string) {
+    state.update((s) => ({ ...s, isLoadingTree: true, currentDirectory: rootPath }));
+    try {
+      const entries = await loadDirectory(rootPath);
+      state.update((s) => ({ ...s, fileTree: entries, isLoadingTree: false }));
+    } catch (error) {
+      console.error("Failed to initialize file tree:", error);
+      state.update((s) => ({ ...s, isLoadingTree: false }));
+    }
+  }
+
+  async function toggleDirectory(entry: FileEntry) {
+    if (!entry.isDirectory) return;
+
+    state.update((s) => {
+      const updateTree = (entries: FileEntry[]): FileEntry[] => {
+        return entries.map((e) => {
+          if (e.path === entry.path) {
+            return { ...e, isExpanded: !e.isExpanded, isLoading: !e.isExpanded && !e.children };
+          }
+          if (e.children) {
+            return { ...e, children: updateTree(e.children) };
+          }
+          return e;
+        });
+      };
+      return { ...s, fileTree: updateTree(s.fileTree) };
+    });
+
+    if (!entry.isExpanded && !entry.children) {
+      const children = await loadDirectory(entry.path);
+      state.update((s) => {
+        const updateTree = (entries: FileEntry[]): FileEntry[] => {
+          return entries.map((e) => {
+            if (e.path === entry.path) {
+              return { ...e, children, isLoading: false };
+            }
+            if (e.children) {
+              return { ...e, children: updateTree(e.children) };
+            }
+            return e;
+          });
+        };
+        return { ...s, fileTree: updateTree(s.fileTree) };
+      });
+    }
+  }
+
+  async function openFile(filePath: string) {
+    const currentState = get(state);
+
+    const existingTab = currentState.tabs.find((t) => t.filePath === filePath);
+    if (existingTab) {
+      state.update((s) => ({ ...s, activeTabId: existingTab.id }));
+      return;
+    }
+
+    try {
+      const content = await invoke<string>("read_file_content", { path: filePath });
+      const fileName = filePath.split(/[/\\]/).pop() || "untitled";
+      const language = getLanguageFromPath(filePath);
+      const newTab: EditorTab = {
+        id: generateTabId(),
+        filePath,
+        fileName,
+        content,
+        originalContent: content,
+        isDirty: false,
+        language,
+      };
+
+      state.update((s) => ({
+        ...s,
+        tabs: [...s.tabs, newTab],
+        activeTabId: newTab.id,
+      }));
+    } catch (error) {
+      console.error("Failed to open file:", error);
+      saveError.set(`Failed to open file: ${error}`);
+    }
+  }
+
+  async function saveFile(tabId?: string) {
+    const currentState = get(state);
+    const tab = tabId
+      ? currentState.tabs.find((t) => t.id === tabId)
+      : currentState.tabs.find((t) => t.id === currentState.activeTabId);
+
+    if (!tab) return;
+
+    saveError.set(null);
+    try {
+      await invoke("write_file_content", { path: tab.filePath, content: tab.content });
+      state.update((s) => ({
+        ...s,
+        tabs: s.tabs.map((t) =>
+          t.id === tab.id ? { ...t, originalContent: t.content, isDirty: false } : t
+        ),
+      }));
+    } catch (error) {
+      console.error("Failed to save file:", error);
+      saveError.set(`Failed to save file: ${error}`);
+      throw error;
+    }
+  }
+
+  function updateTabContent(tabId: string, content: string) {
+    state.update((s) => ({
+      ...s,
+      tabs: s.tabs.map((t) =>
+        t.id === tabId ? { ...t, content, isDirty: content !== t.originalContent } : t
+      ),
+    }));
+  }
+
+  function closeTab(tabId: string) {
+    state.update((s) => {
+      const tabIndex = s.tabs.findIndex((t) => t.id === tabId);
+      const newTabs = s.tabs.filter((t) => t.id !== tabId);
+
+      let newActiveId = s.activeTabId;
+      if (s.activeTabId === tabId) {
+        if (newTabs.length === 0) {
+          newActiveId = null;
+        } else if (tabIndex >= newTabs.length) {
+          newActiveId = newTabs[newTabs.length - 1].id;
+        } else {
+          newActiveId = newTabs[tabIndex].id;
+        }
+      }
+
+      return { ...s, tabs: newTabs, activeTabId: newActiveId };
+    });
+  }
+
+  function setActiveTab(tabId: string) {
+    state.update((s) => ({ ...s, activeTabId: tabId }));
+  }
+
+  function toggleFileBrowser() {
+    state.update((s) => ({ ...s, isFileBrowserOpen: !s.isFileBrowserOpen }));
+  }
+
+  function toggleEditor() {
+    isEditorVisible.update((v) => !v);
+  }
+
+  async function createFile(parentPath: string, fileName: string): Promise<boolean> {
+    const filePath = `${parentPath}/${fileName}`;
+    try {
+      await invoke("create_file", { path: filePath });
+      // Refresh the parent directory
+      await refreshDirectory(parentPath);
+      return true;
+    } catch (error) {
+      console.error("Failed to create file:", error);
+      saveError.set(`Failed to create file: ${error}`);
+      return false;
+    }
+  }
+
+  async function createDirectory(parentPath: string, dirName: string): Promise<boolean> {
+    const dirPath = `${parentPath}/${dirName}`;
+    try {
+      await invoke("create_directory", { path: dirPath });
+      // Refresh the parent directory
+      await refreshDirectory(parentPath);
+      return true;
+    } catch (error) {
+      console.error("Failed to create directory:", error);
+      saveError.set(`Failed to create directory: ${error}`);
+      return false;
+    }
+  }
+
+  async function deleteFile(filePath: string): Promise<boolean> {
+    try {
+      await invoke("delete_file", { path: filePath });
+      // Close the tab if it's open
+      const currentState = get(state);
+      const openTab = currentState.tabs.find((t) => t.filePath === filePath);
+      if (openTab) {
+        closeTab(openTab.id);
+      }
+      // Refresh the parent directory
+      const parentPath = filePath.substring(0, filePath.lastIndexOf("/"));
+      await refreshDirectory(parentPath);
+      return true;
+    } catch (error) {
+      console.error("Failed to delete file:", error);
+      saveError.set(`Failed to delete file: ${error}`);
+      return false;
+    }
+  }
+
+  async function deleteDirectory(dirPath: string): Promise<boolean> {
+    try {
+      await invoke("delete_directory", { path: dirPath });
+      // Close any tabs that are in this directory
+      const currentState = get(state);
+      const tabsToClose = currentState.tabs.filter((t) => t.filePath.startsWith(dirPath + "/"));
+      tabsToClose.forEach((tab) => closeTab(tab.id));
+      // Refresh the parent directory
+      const parentPath = dirPath.substring(0, dirPath.lastIndexOf("/"));
+      await refreshDirectory(parentPath);
+      return true;
+    } catch (error) {
+      console.error("Failed to delete directory:", error);
+      saveError.set(`Failed to delete directory: ${error}`);
+      return false;
+    }
+  }
+
+  async function refreshDirectory(dirPath: string) {
+    const currentState = get(state);
+
+    // If refreshing the root directory, reload the entire tree
+    if (dirPath === currentState.currentDirectory) {
+      const entries = await loadDirectory(dirPath);
+      state.update((s) => ({ ...s, fileTree: entries }));
+      return;
+    }
+
+    // Otherwise, update the specific directory in the tree
+    const children = await loadDirectory(dirPath);
+    state.update((s) => {
+      const updateTree = (entries: FileEntry[]): FileEntry[] => {
+        return entries.map((e) => {
+          if (e.path === dirPath) {
+            return { ...e, children, isExpanded: true };
+          }
+          if (e.children) {
+            return { ...e, children: updateTree(e.children) };
+          }
+          return e;
+        });
+      };
+      return { ...s, fileTree: updateTree(s.fileTree) };
+    });
+  }
+
+  async function renamePath(oldPath: string, newName: string): Promise<boolean> {
+    const parentPath = oldPath.substring(0, oldPath.lastIndexOf("/"));
+    const newPath = `${parentPath}/${newName}`;
+
+    try {
+      await invoke("rename_path", { oldPath, newPath });
+
+      // Update any open tabs that reference this path
+      state.update((s) => ({
+        ...s,
+        tabs: s.tabs.map((t) => {
+          if (t.filePath === oldPath) {
+            // Exact match - this file was renamed
+            return {
+              ...t,
+              filePath: newPath,
+              fileName: newName,
+            };
+          }
+          if (t.filePath.startsWith(oldPath + "/")) {
+            // File is inside a renamed directory
+            const relativePath = t.filePath.substring(oldPath.length);
+            return {
+              ...t,
+              filePath: newPath + relativePath,
+            };
+          }
+          return t;
+        }),
+      }));
+
+      // Refresh the parent directory
+      await refreshDirectory(parentPath);
+      return true;
+    } catch (error) {
+      console.error("Failed to rename:", error);
+      saveError.set(`Failed to rename: ${error}`);
+      return false;
+    }
+  }
+
+  function showEditor() {
+    isEditorVisible.set(true);
+  }
+
+  function hideEditor() {
+    isEditorVisible.set(false);
+  }
+
+  return {
+    state: { subscribe: state.subscribe },
+    isEditorVisible: { subscribe: isEditorVisible.subscribe },
+    saveError: { subscribe: saveError.subscribe },
+
+    initializeFileTree,
+    toggleDirectory,
+    openFile,
+    saveFile,
+    updateTabContent,
+    closeTab,
+    setActiveTab,
+    toggleFileBrowser,
+    toggleEditor,
+    showEditor,
+    hideEditor,
+    createFile,
+    createDirectory,
+    deleteFile,
+    deleteDirectory,
+    refreshDirectory,
+    renamePath,
+
+    tabs: derived(state, ($state) => $state.tabs),
+    activeTab: derived(state, ($state) => $state.tabs.find((t) => t.id === $state.activeTabId)),
+    activeTabId: derived(state, ($state) => $state.activeTabId),
+    fileTree: derived(state, ($state) => $state.fileTree),
+    isFileBrowserOpen: derived(state, ($state) => $state.isFileBrowserOpen),
+    isLoadingTree: derived(state, ($state) => $state.isLoadingTree),
+    currentDirectory: derived(state, ($state) => $state.currentDirectory),
+    hasDirtyTabs: derived(state, ($state) => $state.tabs.some((t) => t.isDirty)),
+  };
+}
+
+export const editorStore = createEditorStore();

src/lib/types/editor.ts

@@ -0,0 +1,27 @@
+export interface FileEntry {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  isExpanded?: boolean;
+  children?: FileEntry[];
+  isLoading?: boolean;
+}
+
+export interface EditorTab {
+  id: string;
+  filePath: string;
+  fileName: string;
+  content: string;
+  originalContent: string;
+  isDirty: boolean;
+  language: string;
+}
+
+export interface EditorState {
+  tabs: EditorTab[];
+  activeTabId: string | null;
+  isFileBrowserOpen: boolean;
+  currentDirectory: string;
+  fileTree: FileEntry[];
+  isLoadingTree: boolean;
+}

src/routes/+layout.svelte

@@ -1,9 +1,17 @@
-<script>
+<script lang="ts">
   import "../app.css";
 
   let { children } = $props();
+
+  // Prevent the default context menu globally
+  // Individual components can show their own context menus by calling event.stopPropagation()
+  function handleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+  }
 </script>
 
+<svelte:window oncontextmenu={handleContextMenu} />
+
 <div id="app">
   {@render children()}
 </div>

src/routes/+page.svelte

@@ -7,6 +7,7 @@
   import { initNotificationSync, cleanupNotificationSync } from "$lib/stores/notifications";
   import { conversationsStore } from "$lib/stores/conversations";
   import { claudeStore, isClaudeProcessing } from "$lib/stores/claude";
+  import { editorStore } from "$lib/stores/editor";
   import { getCurrentWindow, LogicalSize } from "@tauri-apps/api/window";
   import "$lib/notifications/testNotifications";
   import Terminal from "$lib/components/Terminal.svelte";
@@ -14,6 +15,7 @@
   import StatusBar from "$lib/components/StatusBar.svelte";
   import AnimeGirl from "$lib/components/AnimeGirl.svelte";
   import CompactMode from "$lib/components/CompactMode.svelte";
+  import EditorPanel from "$lib/components/editor/EditorPanel.svelte";
   import { characterState } from "$lib/stores/character";
   import type { CharacterState } from "$lib/types/states";
   import PermissionModal from "$lib/components/PermissionModal.svelte";
@@ -29,6 +31,32 @@
   let currentCharacterState: CharacterState = $state("idle");
   let compactModeActive = $state(false);
 
+  // Editor state
+  const isEditorVisible = editorStore.isEditorVisible;
+  let lastInitializedCwd = "";
+
+  // Track connection status and CWD for the editor
+  const connectionStatus = claudeStore.connectionStatus;
+  const currentWorkingDirectory = claudeStore.currentWorkingDirectory;
+
+  // Initialize/update editor file tree when CWD changes while editor is visible
+  $effect(() => {
+    const visible = $isEditorVisible;
+    const cwd = $currentWorkingDirectory;
+    const connected = $connectionStatus === "connected";
+
+    // Only initialize when editor is visible, connected, and CWD is set
+    if (visible && connected && cwd && cwd !== lastInitializedCwd) {
+      lastInitializedCwd = cwd;
+      editorStore.initializeFileTree(cwd);
+    }
+
+    // Hide editor if disconnected
+    if (!connected && visible) {
+      editorStore.hideEditor();
+    }
+  });
+
   // Window size constants
   const COMPACT_WIDTH = 280;
   const COMPACT_HEIGHT = 400;
@@ -176,6 +204,49 @@
       toggleCompactMode();
       return;
     }
+
+    // Ctrl+E - Toggle editor panel (only when connected)
+    if (event.ctrlKey && event.key === "e") {
+      event.preventDefault();
+      // Only allow opening the editor when connected
+      if (get(claudeStore.connectionStatus) === "connected") {
+        editorStore.toggleEditor();
+      }
+      return;
+    }
+
+    // Ctrl+B - Toggle file browser (when editor is visible)
+    if (event.ctrlKey && event.key === "b" && get(editorStore.isEditorVisible)) {
+      event.preventDefault();
+      editorStore.toggleFileBrowser();
+      return;
+    }
+
+    // Ctrl+S - Save current file (when editor is visible)
+    if (event.ctrlKey && event.key === "s" && get(editorStore.isEditorVisible)) {
+      event.preventDefault();
+      editorStore.saveFile();
+      return;
+    }
+
+    // Ctrl+W - Close current tab (when editor is visible)
+    if (event.ctrlKey && event.key === "w" && get(editorStore.isEditorVisible)) {
+      event.preventDefault();
+      const activeTabId = get(editorStore.activeTabId);
+      if (activeTabId) {
+        editorStore.closeTab(activeTabId);
+      }
+      return;
+    }
+
+    // Ctrl+N - New file (when editor is visible)
+    // Note: This just emits an event that FileBrowser listens to
+    if (event.ctrlKey && event.key === "n" && get(editorStore.isEditorVisible)) {
+      event.preventDefault();
+      // Dispatch a custom event that FileBrowser will listen to
+      window.dispatchEvent(new CustomEvent("editor-new-file"));
+      return;
+    }
   }
 
   async function handleInterrupt() {
@@ -330,10 +401,14 @@
         onmousedown={startResize}
       ></div>
 
-      <!-- Right panel: Terminal and input -->
+      <!-- Right panel: Terminal/Editor and input -->
       <div class="terminal-panel flex-1 flex flex-col min-w-0">
-        <Terminal />
+        {#if $isEditorVisible}
-        <InputBar />
+          <EditorPanel />
+        {:else}
+          <Terminal />
+          <InputBar />
+        {/if}
       </div>
     </main>