release: v0.3.0

## Explanation

This PR bundles several user-facing improvements and feature additions for the v0.3.0 release, including quality-of-life improvements to the UI, new slash commands, better state persistence, and auto-update checking.

## Included Changes

- **Resizable chat input** with drag handle (#58 partial)
- **Arrow key navigation fix** - cursor keys now navigate text when user has typed input (#58)
- **Scroll position persistence** per conversation tab
- **/skill command** for invoking Claude Code skills (#57)
- **Stats persistence fix** - stats now persist across session changes, only reset on disconnect (#59)
- **Auto-update checker** on startup (#17)
- **Resizable character panel** with full-height sprites (#10)
- **Font size and zoom settings** with keyboard shortcuts (Ctrl++/Ctrl+-/Ctrl+0) (#19)

## Closes

Closes #10, #17, #19, #57, #58, #59

## Attestations

- [x] I have read and agree to the Code of Conduct
- [x] I have read and agree to the Community Guidelines
- [x] My contribution complies with the Contributor Covenant
- [x] I have run the linter and resolved any errors
- [x] My pull request uses an appropriate title, matching the conventional commit standards
- [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request
- [x] All new and existing tests pass locally with my changes
- [x] Code coverage remains at or above the configured threshold

## Documentation

N/A - Internal app features

## Versioning

Minor - My pull request introduces new non-breaking features.

---
✨ This PR was created with help from Hikari~ 🌸

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

.prettierignore

@@ -2,6 +2,7 @@ build/
 .svelte-kit/
 dist/
 src-tauri/target/
+src-tauri/gen/
 node_modules/
 .pnpm-store/
 pnpm-lock.yaml

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hikari-desktop",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "",
   "type": "module",
   "scripts": {
@@ -25,11 +25,13 @@
   "dependencies": {
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2",
+    "@tauri-apps/plugin-notification": "^2",
     "@tauri-apps/plugin-opener": "^2",
+    "@tauri-apps/plugin-os": "^2",
     "@tauri-apps/plugin-shell": "^2.3.4",
     "@tauri-apps/plugin-store": "^2",
-    "@tauri-apps/plugin-notification": "^2",
+    "highlight.js": "^11.11.1",
-    "@tauri-apps/plugin-os": "^2"
+    "marked": "^17.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

pnpm-lock.yaml

@@ -29,6 +29,12 @@ importers:
       '@tauri-apps/plugin-store':
         specifier: ^2
         version: 2.4.2
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
+      marked:
+        specifier: ^17.0.1
+        version: 17.0.1
     devDependencies:
       '@eslint/js':
         specifier: ^9.39.2
@@ -1185,6 +1191,10 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   html-encoding-sniffer@6.0.0:
     resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -1372,6 +1382,11 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  marked@17.0.1:
+    resolution: {integrity: sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
@@ -2780,6 +2795,8 @@ snapshots:
 
   has-flag@4.0.0: {}
 
+  highlight.js@11.11.1: {}
+
   html-encoding-sniffer@6.0.0:
     dependencies:
       '@exodus/bytes': 1.8.0
@@ -2949,6 +2966,8 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  marked@17.0.1: {}
+
   mdn-data@2.12.2: {}
 
   min-indent@1.0.1: {}

src-tauri/Cargo.lock

@@ -480,10 +480,57 @@ version = "0.18.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4ddef33a339a91ea89fb53151bd0a4689cfce27055c291dfa69945475d22c747"
 dependencies = [
+ "percent-encoding",
  "time",
  "version_check",
 ]
 
+[[package]]
+name = "cookie_store"
+version = "0.21.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2eac901828f88a5241ee0600950ab981148a18f2f756900ffba1b125ca6a3ef9"
+dependencies = [
+ "cookie",
+ "document-features",
+ "idna",
+ "log",
+ "publicsuffix",
+ "serde",
+ "serde_derive",
+ "serde_json",
+ "time",
+ "url",
+]
+
+[[package]]
+name = "cookie_store"
+version = "0.22.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3fc4bff745c9b4c7fb1e97b25d13153da2bc7796260141df62378998d070207f"
+dependencies = [
+ "cookie",
+ "document-features",
+ "idna",
+ "log",
+ "publicsuffix",
+ "serde",
+ "serde_derive",
+ "serde_json",
+ "time",
+ "url",
+]
+
+[[package]]
+name = "core-foundation"
+version = "0.9.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "91e195e091a93c46f7102ec7818a2aa394e1e1771c3ab4825963fa03e45afb8f"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "core-foundation"
 version = "0.10.1"
@@ -507,7 +554,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fa95a34622365fa5bbf40b20b75dba8dfa8c94c734aea8ac9a5ca38af14316f1"
 dependencies = [
  "bitflags 2.10.0",
- "core-foundation",
+ "core-foundation 0.10.1",
  "core-graphics-types",
  "foreign-types",
  "libc",
@@ -520,7 +567,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d44a101f213f6c4cdc1853d4b78aef6db6bdfa3468798cc1d9912f4735013eb"
 dependencies = [
  "bitflags 2.10.0",
- "core-foundation",
+ "core-foundation 0.10.1",
  "libc",
 ]
 
@@ -639,6 +686,12 @@ dependencies = [
  "syn 2.0.114",
 ]
 
+[[package]]
+name = "data-url"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "be1e0bca6c3637f992fc1cc7cbc52a78c1ef6db076dbf1059c4323d6a2048376"
+
 [[package]]
 name = "deranged"
 version = "0.5.5"
@@ -745,6 +798,15 @@ dependencies = [
  "syn 2.0.114",
 ]
 
+[[package]]
+name = "document-features"
+version = "0.2.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4b8a88685455ed29a21542a33abd9cb6510b6b129abadabdcef0f4c55bc8f61"
+dependencies = [
+ "litrs",
+]
+
 [[package]]
 name = "dpi"
 version = "0.1.2"
@@ -1209,8 +1271,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ff2abc00be7fca6ebc474524697ae276ad847ad0a6b3faa4bcb027e9a4614ad0"
 dependencies = [
  "cfg-if",
+ "js-sys",
  "libc",
  "wasi 0.11.1+wasi-snapshot-preview1",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -1220,9 +1284,11 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "899def5c37c4fd7b2664648c28120ecec138e4d395b459e5ca34f9cce2dd77fd"
 dependencies = [
  "cfg-if",
+ "js-sys",
  "libc",
  "r-efi",
  "wasip2",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -1373,6 +1439,25 @@ dependencies = [
  "syn 2.0.114",
 ]
 
+[[package]]
+name = "h2"
+version = "0.4.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f44da3a8150a6703ed5d34e164b875fd14c2cdab9af1252a9a1020bde2bdc54"
+dependencies = [
+ "atomic-waker",
+ "bytes",
+ "fnv",
+ "futures-core",
+ "futures-sink",
+ "http",
+ "indexmap 2.13.0",
+ "slab",
+ "tokio",
+ "tokio-util",
+ "tracing",
+]
+
 [[package]]
 name = "hashbrown"
 version = "0.12.3"
@@ -1415,11 +1500,13 @@ version = "0.2.0"
 dependencies = [
  "chrono",
  "parking_lot",
+ "semver",
  "serde",
  "serde_json",
  "tauri",
  "tauri-build",
  "tauri-plugin-dialog",
+ "tauri-plugin-http",
  "tauri-plugin-notification",
  "tauri-plugin-opener",
  "tauri-plugin-os",
@@ -1492,6 +1579,7 @@ dependencies = [
  "bytes",
  "futures-channel",
  "futures-core",
+ "h2",
  "http",
  "http-body",
  "httparse",
@@ -1503,6 +1591,23 @@ dependencies = [
  "want",
 ]
 
+[[package]]
+name = "hyper-rustls"
+version = "0.27.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3c93eb611681b207e1fe55d5a71ecf91572ec8a6705cdb6857f7d8d5242cf58"
+dependencies = [
+ "http",
+ "hyper",
+ "hyper-util",
+ "rustls",
+ "rustls-pki-types",
+ "tokio",
+ "tokio-rustls",
+ "tower-service",
+ "webpki-roots",
+]
+
 [[package]]
 name = "hyper-util"
 version = "0.1.19"
@@ -1522,9 +1627,11 @@ dependencies = [
  "percent-encoding",
  "pin-project-lite",
  "socket2",
+ "system-configuration",
  "tokio",
  "tower-service",
  "tracing",
+ "windows-registry",
 ]
 
 [[package]]
@@ -1910,6 +2017,12 @@ version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6373607a59f0be73a39b6fe456b8192fcc3585f602af20751600e974dd455e77"
 
+[[package]]
+name = "litrs"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "11d3d7f243d5c5a8b9bb5d6dd2b1602c0cb0b9db1621bafc7ed66e35ff9fe092"
+
 [[package]]
 name = "lock_api"
 version = "0.4.14"
@@ -1925,6 +2038,12 @@ version = "0.4.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5e5032e24019045c762d3c0f28f5b6b8bbf38563a65908389bf7978758920897"
 
+[[package]]
+name = "lru-slab"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "112b39cec0b298b6c1999fee3e31427f74f676e4cb9879ed1a121b43661a4154"
+
 [[package]]
 name = "mac"
 version = "0.1.1"
@@ -2810,6 +2929,22 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "psl-types"
+version = "2.0.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "33cb294fe86a74cbcf50d4445b37da762029549ebeea341421c7c70370f86cac"
+
+[[package]]
+name = "publicsuffix"
+version = "2.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6f42ea446cab60335f76979ec15e12619a2165b5ae2c12166bef27d283a9fadf"
+dependencies = [
+ "idna",
+ "psl-types",
+]
+
 [[package]]
 name = "quick-xml"
 version = "0.37.5"
@@ -2828,6 +2963,61 @@ dependencies = [
  "memchr",
 ]
 
+[[package]]
+name = "quinn"
+version = "0.11.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9e20a958963c291dc322d98411f541009df2ced7b5a4f2bd52337638cfccf20"
+dependencies = [
+ "bytes",
+ "cfg_aliases",
+ "pin-project-lite",
+ "quinn-proto",
+ "quinn-udp",
+ "rustc-hash",
+ "rustls",
+ "socket2",
+ "thiserror 2.0.17",
+ "tokio",
+ "tracing",
+ "web-time",
+]
+
+[[package]]
+name = "quinn-proto"
+version = "0.11.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1906b49b0c3bc04b5fe5d86a77925ae6524a19b816ae38ce1e426255f1d8a31"
+dependencies = [
+ "bytes",
+ "getrandom 0.3.4",
+ "lru-slab",
+ "rand 0.9.2",
+ "ring",
+ "rustc-hash",
+ "rustls",
+ "rustls-pki-types",
+ "slab",
+ "thiserror 2.0.17",
+ "tinyvec",
+ "tracing",
+ "web-time",
+]
+
+[[package]]
+name = "quinn-udp"
+version = "0.5.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "addec6a0dcad8a8d96a771f815f0eaf55f9d1805756410b39f5fa81332574cbd"
+dependencies = [
+ "cfg_aliases",
+ "libc",
+ "once_cell",
+ "socket2",
+ "tracing",
+ "windows-sys 0.60.2",
+]
+
 [[package]]
 name = "quote"
 version = "1.0.43"
@@ -3036,22 +3226,32 @@ checksum = "eddd3ca559203180a307f12d114c268abf583f59b03cb906fd0b3ff8646c1147"
 dependencies = [
  "base64 0.22.1",
  "bytes",
+ "cookie",
+ "cookie_store 0.22.0",
+ "encoding_rs",
  "futures-core",
  "futures-util",
+ "h2",
  "http",
  "http-body",
  "http-body-util",
  "hyper",
+ "hyper-rustls",
  "hyper-util",
  "js-sys",
  "log",
+ "mime",
  "percent-encoding",
  "pin-project-lite",
+ "quinn",
+ "rustls",
+ "rustls-pki-types",
  "serde",
  "serde_json",
  "serde_urlencoded",
  "sync_wrapper",
  "tokio",
+ "tokio-rustls",
  "tokio-util",
  "tower",
  "tower-http",
@@ -3061,6 +3261,7 @@ dependencies = [
  "wasm-bindgen-futures",
  "wasm-streams",
  "web-sys",
+ "webpki-roots",
 ]
 
 [[package]]
@@ -3087,6 +3288,26 @@ dependencies = [
  "windows-sys 0.60.2",
 ]
 
+[[package]]
+name = "ring"
+version = "0.17.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7"
+dependencies = [
+ "cc",
+ "cfg-if",
+ "getrandom 0.2.17",
+ "libc",
+ "untrusted",
+ "windows-sys 0.52.0",
+]
+
+[[package]]
+name = "rustc-hash"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "357703d41365b4b27c590e3ed91eabb1b663f07c4c084095e60cbed4362dff0d"
+
 [[package]]
 name = "rustc_version"
 version = "0.4.1"
@@ -3109,6 +3330,41 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "rustls"
+version = "0.23.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c665f33d38cea657d9614f766881e4d510e0eda4239891eea56b4cadcf01801b"
+dependencies = [
+ "once_cell",
+ "ring",
+ "rustls-pki-types",
+ "rustls-webpki",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-pki-types"
+version = "1.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "be040f8b0a225e40375822a563fa9524378b9d63112f53e19ffff34df5d33fdd"
+dependencies = [
+ "web-time",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-webpki"
+version = "0.103.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d7df23109aa6c1567d1c575b9952556388da57401e4ace1d15f79eedad0d8f53"
+dependencies = [
+ "ring",
+ "rustls-pki-types",
+ "untrusted",
+]
+
 [[package]]
 name = "rustversion"
 version = "1.0.22"
@@ -3569,6 +3825,12 @@ version = "0.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
 
+[[package]]
+name = "subtle"
+version = "2.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
+
 [[package]]
 name = "swift-rs"
 version = "1.0.7"
@@ -3631,6 +3893,27 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "system-configuration"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c879d448e9d986b661742763247d3693ed13609438cf3d006f51f5368a5ba6b"
+dependencies = [
+ "bitflags 2.10.0",
+ "core-foundation 0.9.4",
+ "system-configuration-sys",
+]
+
+[[package]]
+name = "system-configuration-sys"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e1d1b10ced5ca923a1fcb8d03e96b8d3268065d724548c0211415ff6ac6bac4"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "system-deps"
 version = "6.2.2"
@@ -3652,7 +3935,7 @@ checksum = "f3a753bdc39c07b192151523a3f77cd0394aa75413802c883a0f6f6a0e5ee2e7"
 dependencies = [
  "bitflags 2.10.0",
  "block2",
- "core-foundation",
+ "core-foundation 0.10.1",
  "core-graphics",
  "crossbeam-channel",
  "dispatch",
@@ -3872,6 +4155,30 @@ dependencies = [
  "url",
 ]
 
+[[package]]
+name = "tauri-plugin-http"
+version = "2.5.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "68bef611ccbfbce67c813959c11b23c1c084d201aa94222de9eba5f9edc3f897"
+dependencies = [
+ "bytes",
+ "cookie_store 0.21.1",
+ "data-url",
+ "http",
+ "regex",
+ "reqwest",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "tauri-plugin-fs",
+ "thiserror 2.0.17",
+ "tokio",
+ "url",
+ "urlpattern",
+]
+
 [[package]]
 name = "tauri-plugin-notification"
 version = "2.3.3"
@@ -4186,6 +4493,21 @@ dependencies = [
  "zerovec",
 ]
 
+[[package]]
+name = "tinyvec"
+version = "1.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bfa5fdc3bce6191a1dbc8c02d5c8bffcf557bafa17c124c5264a458f1b0613fa"
+dependencies = [
+ "tinyvec_macros",
+]
+
+[[package]]
+name = "tinyvec_macros"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
+
 [[package]]
 name = "tokio"
 version = "1.49.0"
@@ -4214,6 +4536,16 @@ dependencies = [
  "syn 2.0.114",
 ]
 
+[[package]]
+name = "tokio-rustls"
+version = "0.26.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1729aa945f29d91ba541258c8df89027d5792d85a8841fb65e8bf0f4ede4ef61"
+dependencies = [
+ "rustls",
+ "tokio",
+]
+
 [[package]]
 name = "tokio-util"
 version = "0.7.18"
@@ -4503,6 +4835,12 @@ version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493"
 
+[[package]]
+name = "untrusted"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
+
 [[package]]
 name = "url"
 version = "2.5.8"
@@ -4706,6 +5044,16 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "web-time"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a6580f308b1fad9207618087a65c04e7a10bc77e02c8e84e9b00dd4b12fa0bb"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "webkit2gtk"
 version = "2.0.1"
@@ -4750,6 +5098,15 @@ dependencies = [
  "system-deps",
 ]
 
+[[package]]
+name = "webpki-roots"
+version = "1.0.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "12bed680863276c63889429bfd6cab3b99943659923822de1c8a39c49e4d722c"
+dependencies = [
+ "rustls-pki-types",
+]
+
 [[package]]
 name = "webview2-com"
 version = "0.38.2"
@@ -4977,6 +5334,17 @@ dependencies = [
  "windows-link 0.2.1",
 ]
 
+[[package]]
+name = "windows-registry"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02752bf7fbdcce7f2a27a742f798510f3e5ad88dbe84871e5168e2120c3d5720"
+dependencies = [
+ "windows-link 0.2.1",
+ "windows-result 0.4.1",
+ "windows-strings 0.5.1",
+]
+
 [[package]]
 name = "windows-result"
 version = "0.3.4"
@@ -5022,6 +5390,15 @@ dependencies = [
  "windows-targets 0.42.2",
 ]
 
+[[package]]
+name = "windows-sys"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "282be5f36a8ce781fad8c8ae18fa3f9beff57ec1b52cb3de0789201425d9a33d"
+dependencies = [
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "windows-sys"
 version = "0.59.0"
@@ -5493,6 +5870,12 @@ dependencies = [
  "synstructure",
 ]
 
+[[package]]
+name = "zeroize"
+version = "1.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b97154e67e32c85465826e8bcc1c59429aaaf107c1e4a9e53c8d8ccd5eff88d0"
+
 [[package]]
 name = "zerotrie"
 version = "0.2.3"

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "hikari-desktop"
-version = "0.2.0"
+version = "0.3.0"
 description = "Hikari - Claude Code Visual Assistant"
 authors = ["Naomi Carrigan"]
 edition = "2021"
@@ -25,7 +25,9 @@ uuid = { version = "1", features = ["v4"] }
 tauri-plugin-store = "2.4.2"
 tauri-plugin-notification = "2"
 tauri-plugin-os = "2"
+tauri-plugin-http = "2"
 tempfile = "3"
+semver = "1"
 chrono = { version = "0.4.43", features = ["serde"] }
 
 [target.'cfg(windows)'.dependencies]

src-tauri/src/achievements.rs

@@ -1,6 +1,6 @@
+use chrono::{DateTime, Datelike, Timelike, Utc};
 use serde::{Deserialize, Serialize};
 use std::collections::HashSet;
-use chrono::{DateTime, Utc, Timelike, Datelike};
 use tauri_plugin_store::StoreExt;
 
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq, Hash)]
@@ -12,9 +12,9 @@ pub enum AchievementId {
     TokenMaster,     // 1,000,000 tokens
 
     // Code Generation
-    HelloWorld,      // First code block
+    HelloWorld,     // First code block
-    CodeWizard,      // 100 code blocks
+    CodeWizard,     // 100 code blocks
-    ThousandBlocks,  // 1,000 code blocks
+    ThousandBlocks, // 1,000 code blocks
 
     // File Operations
     FileManipulator, // 10 files edited
@@ -22,23 +22,23 @@ pub enum AchievementId {
 
     // Conversation milestones
     ConversationStarter, // 10 messages
-    ChattyKathy,     // 100 messages
+    ChattyKathy,         // 100 messages
-    Conversationalist, // 1,000 messages
+    Conversationalist,   // 1,000 messages
 
     // Tool usage
-    Toolsmith,       // 5 different tools
+    Toolsmith,  // 5 different tools
-    ToolMaster,      // 10 different tools
+    ToolMaster, // 10 different tools
 
     // Time-based achievements
-    EarlyBird,       // Started session 5-7 AM
+    EarlyBird,          // Started session 5-7 AM
-    NightOwl,        // Coding after midnight
+    NightOwl,           // Coding after midnight
-    AllNighter,      // Worked 2-5 AM
+    AllNighter,         // Worked 2-5 AM
-    WeekendWarrior,  // Coding on weekend
+    WeekendWarrior,     // Coding on weekend
     DedicatedDeveloper, // 30 days in a row
 
     // Search and exploration
-    Explorer,        // 50 searches
+    Explorer,       // 50 searches
-    MasterSearcher,  // 500 searches
+    MasterSearcher, // 500 searches
 
     // Session achievements
     QuickSession,    // Productive session < 5 min
@@ -47,36 +47,36 @@ pub enum AchievementId {
     MarathonSession, // 5+ hour session
 
     // Special achievements
-    FirstMessage,    // First message sent
+    FirstMessage,      // First message sent
-    FirstTool,       // First tool used
+    FirstTool,         // First tool used
-    FirstCodeBlock,  // First code generated
+    FirstCodeBlock,    // First code generated
-    FirstFileEdit,   // First file edit
+    FirstFileEdit,     // First file edit
-    Polyglot,        // 5+ languages in one session
+    Polyglot,          // 5+ languages in one session
-    SpeedCoder,      // 10 code blocks in 10 minutes
+    SpeedCoder,        // 10 code blocks in 10 minutes
     ClaudeConnoisseur, // Used all Claude models
-    MarathonCoder,   // 10k tokens in one session
+    MarathonCoder,     // 10k tokens in one session
 
     // Relationship & Greetings
-    GoodMorning,     // Say "good morning"
+    GoodMorning, // Say "good morning"
-    GoodNight,       // Say "good night" or "goodnight"
+    GoodNight,   // Say "good night" or "goodnight"
-    ThankYou,        // Say "thank you" or "thanks"
+    ThankYou,    // Say "thank you" or "thanks"
-    LoveYou,         // Say "love you" or "ily"
+    LoveYou,     // Say "love you" or "ily"
 
     // Personality & Fun
-    EmojiUser,       // Use an emoji in a message
+    EmojiUser,         // Use an emoji in a message
-    QuestionMaster,  // Use "?" in 20 messages
+    QuestionMaster,    // Use "?" in 20 messages
-    CapsLock,        // Send a message in ALL CAPS
+    CapsLock,          // Send a message in ALL CAPS
     PleaseAndThankYou, // Use "please" in messages
 
     // Git & Development
-    GitGuru,         // Use git commands 10 times
+    GitGuru,    // Use git commands 10 times
-    TestWriter,      // Create test files
+    TestWriter, // Create test files
-    Debugger,        // Fix bugs (messages with "fix", "bug", "error")
+    Debugger,   // Fix bugs (messages with "fix", "bug", "error")
 
     // Tool Mastery
-    BashMaster,      // Use Bash tool 50 times
+    BashMaster,   // Use Bash tool 50 times
-    FileExplorer,    // Use Read tool 100 times
+    FileExplorer, // Use Read tool 100 times
-    SearchExpert,    // Use Grep tool 50 times
+    SearchExpert, // Use Grep tool 50 times
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -509,15 +509,20 @@ pub fn check_message_achievements(
         newly_unlocked.push(AchievementId::GoodMorning);
     }
     if (message_lower.contains("good night") || message_lower.contains("goodnight"))
-        && progress.unlock(AchievementId::GoodNight) {
+        && progress.unlock(AchievementId::GoodNight)
+    {
         newly_unlocked.push(AchievementId::GoodNight);
     }
-    if (message_lower.contains("thank you") || message_lower.contains("thanks") || message_lower.contains("thx"))
+    if (message_lower.contains("thank you")
-        && progress.unlock(AchievementId::ThankYou) {
+        || message_lower.contains("thanks")
+        || message_lower.contains("thx"))
+        && progress.unlock(AchievementId::ThankYou)
+    {
         newly_unlocked.push(AchievementId::ThankYou);
     }
     if (message_lower.contains("love you") || message_lower.contains("ily"))
-        && progress.unlock(AchievementId::LoveYou) {
+        && progress.unlock(AchievementId::LoveYou)
+    {
         newly_unlocked.push(AchievementId::LoveYou);
     }
 
@@ -525,9 +530,11 @@ pub fn check_message_achievements(
     if message.chars().any(|c| c as u32 >= 0x1F300) && progress.unlock(AchievementId::EmojiUser) {
         newly_unlocked.push(AchievementId::EmojiUser);
     }
-    if message == message.to_uppercase() && message.len() > 5
+    if message == message.to_uppercase()
+        && message.len() > 5
         && message.chars().any(|c| c.is_alphabetic())
-        && progress.unlock(AchievementId::CapsLock) {
+        && progress.unlock(AchievementId::CapsLock)
+    {
         newly_unlocked.push(AchievementId::CapsLock);
     }
     if message_lower.contains("please") && progress.unlock(AchievementId::PleaseAndThankYou) {
@@ -535,8 +542,11 @@ pub fn check_message_achievements(
     }
 
     // Git & Development patterns in messages
-    if (message_lower.contains("fix") || message_lower.contains("bug") || message_lower.contains("error"))
+    if (message_lower.contains("fix")
-        && progress.unlock(AchievementId::Debugger) {
+        || message_lower.contains("bug")
+        || message_lower.contains("error"))
+        && progress.unlock(AchievementId::Debugger)
+    {
         newly_unlocked.push(AchievementId::Debugger);
     }
 
@@ -550,10 +560,12 @@ pub fn check_achievements(
 ) -> Vec<AchievementId> {
     let mut newly_unlocked = Vec::new();
 
-    println!("Checking achievements with stats: messages={}, tokens={}, code_blocks={}",
+    println!(
+        "Checking achievements with stats: messages={}, tokens={}, code_blocks={}",
         stats.messages_exchanged,
         stats.total_input_tokens + stats.total_output_tokens,
-        stats.code_blocks_generated);
+        stats.code_blocks_generated
+    );
     println!("Currently unlocked: {:?}", progress.unlocked);
 
     // Token milestones
@@ -617,7 +629,8 @@ pub fn check_achievements(
 
     // Search and exploration
     let search_tools = ["Glob", "Grep", "search", "Task"];
-    let search_count: u64 = search_tools.iter()
+    let search_count: u64 = search_tools
+        .iter()
         .filter_map(|tool| stats.tools_usage.get(*tool))
         .sum();
     if search_count >= 50 && progress.unlock(AchievementId::Explorer) {
@@ -629,7 +642,10 @@ pub fn check_achievements(
 
     // Session duration achievements
     let session_secs = stats.session_duration_seconds;
-    if session_secs < 300 && stats.session_messages_exchanged >= 5 && progress.unlock(AchievementId::QuickSession) {
+    if session_secs < 300
+        && stats.session_messages_exchanged >= 5
+        && progress.unlock(AchievementId::QuickSession)
+    {
         newly_unlocked.push(AchievementId::QuickSession);
     }
     if session_secs >= 1800 && progress.unlock(AchievementId::FocusedWork) {
@@ -716,7 +732,9 @@ pub fn check_achievements(
 
         // Weekend warrior
         use chrono::Weekday;
-        if (weekday == Weekday::Sat || weekday == Weekday::Sun) && progress.unlock(AchievementId::WeekendWarrior) {
+        if (weekday == Weekday::Sat || weekday == Weekday::Sun)
+            && progress.unlock(AchievementId::WeekendWarrior)
+        {
             newly_unlocked.push(AchievementId::WeekendWarrior);
         }
     }
@@ -733,16 +751,21 @@ pub struct AchievementUnlockedEvent {
 }
 
 // Save achievements to persistent store
-pub async fn save_achievements(app: &tauri::AppHandle, progress: &AchievementProgress) -> Result<(), String> {
+pub async fn save_achievements(
-    let store = app.store("achievements.json")
+    app: &tauri::AppHandle,
-        .map_err(|e| e.to_string())?;
+    progress: &AchievementProgress,
+) -> Result<(), String> {
+    let store = app.store("achievements.json").map_err(|e| e.to_string())?;
 
     // Create a serializable version with just the unlocked achievement IDs
     let unlocked_list: Vec<AchievementId> = progress.unlocked.iter().cloned().collect();
 
     println!("Saving achievements: {:?}", unlocked_list);
 
-    store.set("unlocked", serde_json::to_value(unlocked_list).map_err(|e| e.to_string())?);
+    store.set(
+        "unlocked",
+        serde_json::to_value(unlocked_list).map_err(|e| e.to_string())?,
+    );
     store.save().map_err(|e| e.to_string())?;
 
     println!("Achievements saved successfully");
@@ -766,7 +789,9 @@ pub async fn load_achievements(app: &tauri::AppHandle) -> AchievementProgress {
     // Get unlocked achievements
     if let Some(unlocked_value) = store.get("unlocked") {
         println!("Found unlocked value in store: {:?}", unlocked_value);
-        if let Ok(unlocked_list) = serde_json::from_value::<Vec<AchievementId>>(unlocked_value.clone()) {
+        if let Ok(unlocked_list) =
+            serde_json::from_value::<Vec<AchievementId>>(unlocked_value.clone())
+        {
             println!("Loaded {} achievements", unlocked_list.len());
             for achievement_id in unlocked_list {
                 progress.unlocked.insert(achievement_id);
@@ -805,4 +830,4 @@ mod tests {
         let newly = progress.take_newly_unlocked();
         assert!(newly.is_empty());
     }
-}
+}

src-tauri/src/bridge_manager.rs

@@ -29,30 +29,40 @@ impl BridgeManager {
         conversation_id: &str,
         options: ClaudeStartOptions,
     ) -> Result<(), String> {
-        // Check if a bridge already exists for this conversation
+        // Check if a bridge already exists and is running for this conversation
-        if self.bridges.get(conversation_id).map(|b| b.is_running()).unwrap_or(false) {
+        if self
+            .bridges
+            .get(conversation_id)
+            .map(|b| b.is_running())
+            .unwrap_or(false)
+        {
             return Err("Claude is already running for this conversation".to_string());
         }
 
-        let app = self.app_handle.as_ref()
+        let app = self
+            .app_handle
+            .as_ref()
             .ok_or_else(|| "App handle not set".to_string())?
             .clone();
 
-        // Create a new bridge for this conversation
+        // Reuse existing bridge if it exists (preserves stats across reconnects)
-        let mut bridge = WslBridge::new_with_conversation_id(conversation_id.to_string());
+        // Only create a new bridge if one doesn't exist for this conversation
+        let bridge = self
+            .bridges
+            .entry(conversation_id.to_string())
+            .or_insert_with(|| WslBridge::new_with_conversation_id(conversation_id.to_string()));
 
         // Start the Claude process
         bridge.start(app, options)?;
 
-        // Store the bridge
-        self.bridges.insert(conversation_id.to_string(), bridge);
-
         Ok(())
     }
 
     pub fn stop_claude(&mut self, conversation_id: &str) -> Result<(), String> {
         if let Some(bridge) = self.bridges.get_mut(conversation_id) {
-            let app = self.app_handle.as_ref()
+            let app = self
+                .app_handle
+                .as_ref()
                 .ok_or_else(|| "App handle not set".to_string())?;
             bridge.stop(app);
             Ok(())
@@ -63,7 +73,9 @@ impl BridgeManager {
 
     pub fn interrupt_claude(&mut self, conversation_id: &str) -> Result<(), String> {
         if let Some(bridge) = self.bridges.get_mut(conversation_id) {
-            let app = self.app_handle.as_ref()
+            let app = self
+                .app_handle
+                .as_ref()
                 .ok_or_else(|| "App handle not set".to_string())?;
             bridge.interrupt(app)
         } else {
@@ -79,20 +91,36 @@ impl BridgeManager {
         }
     }
 
+    pub fn send_tool_result(
+        &mut self,
+        conversation_id: &str,
+        tool_use_id: &str,
+        result: serde_json::Value,
+    ) -> Result<(), String> {
+        if let Some(bridge) = self.bridges.get_mut(conversation_id) {
+            bridge.send_tool_result(tool_use_id, result)
+        } else {
+            Err("No Claude instance found for this conversation".to_string())
+        }
+    }
+
     pub fn is_claude_running(&self, conversation_id: &str) -> bool {
-        self.bridges.get(conversation_id)
+        self.bridges
+            .get(conversation_id)
             .map(|b| b.is_running())
             .unwrap_or(false)
     }
 
     pub fn get_working_directory(&self, conversation_id: &str) -> Result<String, String> {
-        self.bridges.get(conversation_id)
+        self.bridges
+            .get(conversation_id)
             .map(|b| b.get_working_directory().to_string())
             .ok_or_else(|| "No Claude instance found for this conversation".to_string())
     }
 
     pub fn get_usage_stats(&self, conversation_id: &str) -> Result<UsageStats, String> {
-        self.bridges.get(conversation_id)
+        self.bridges
+            .get(conversation_id)
             .map(|b| b.get_stats())
             .ok_or_else(|| "No Claude instance found for this conversation".to_string())
     }
@@ -115,8 +143,14 @@ impl BridgeManager {
 
     #[allow(dead_code)]
     pub fn get_active_conversations(&self) -> Vec<String> {
-        self.bridges.keys()
+        self.bridges
-            .filter(|id| self.bridges.get(*id).map(|b| b.is_running()).unwrap_or(false))
+            .keys()
+            .filter(|id| {
+                self.bridges
+                    .get(*id)
+                    .map(|b| b.is_running())
+                    .unwrap_or(false)
+            })
             .cloned()
             .collect()
     }
@@ -132,4 +166,4 @@ pub type SharedBridgeManager = Arc<Mutex<BridgeManager>>;
 
 pub fn create_shared_bridge_manager() -> SharedBridgeManager {
     Arc::new(Mutex::new(BridgeManager::new()))
-}
+}

src-tauri/src/commands.rs

@@ -1,10 +1,11 @@
 use tauri::{AppHandle, State};
+use tauri_plugin_http::reqwest;
 use tauri_plugin_store::StoreExt;
 
+use crate::achievements::{get_achievement_info, load_achievements, AchievementUnlockedEvent};
+use crate::bridge_manager::SharedBridgeManager;
 use crate::config::{ClaudeStartOptions, HikariConfig};
 use crate::stats::UsageStats;
-use crate::bridge_manager::SharedBridgeManager;
-use crate::achievements::{load_achievements, get_achievement_info, AchievementUnlockedEvent};
 
 const CONFIG_STORE_KEY: &str = "config";
 
@@ -71,23 +72,17 @@ pub async fn select_wsl_directory() -> Result<String, String> {
 
 #[tauri::command]
 pub async fn get_config(app: AppHandle) -> Result<HikariConfig, String> {
-    let store = app
+    let store = app.store("hikari-config.json").map_err(|e| e.to_string())?;
-        .store("hikari-config.json")
-        .map_err(|e| e.to_string())?;
 
     match store.get(CONFIG_STORE_KEY) {
-        Some(value) => {
+        Some(value) => serde_json::from_value(value.clone()).map_err(|e| e.to_string()),
-            serde_json::from_value(value.clone()).map_err(|e| e.to_string())
-        }
         None => Ok(HikariConfig::default()),
     }
 }
 
 #[tauri::command]
 pub async fn save_config(app: AppHandle, config: HikariConfig) -> Result<(), String> {
-    let store = app
+    let store = app.store("hikari-config.json").map_err(|e| e.to_string())?;
-        .store("hikari-config.json")
-        .map_err(|e| e.to_string())?;
 
     let value = serde_json::to_value(&config).map_err(|e| e.to_string())?;
     store.set(CONFIG_STORE_KEY, value);
@@ -106,7 +101,63 @@ pub async fn get_usage_stats(
 }
 
 #[tauri::command]
-pub async fn load_saved_achievements(app: AppHandle) -> Result<Vec<AchievementUnlockedEvent>, String> {
+pub async fn validate_directory(
+    path: String,
+    current_dir: Option<String>,
+) -> Result<String, String> {
+    use std::path::Path;
+
+    let path = Path::new(&path);
+
+    // Expand ~ to home directory
+    let expanded_path = if path.starts_with("~") {
+        if let Some(home) = std::env::var_os("HOME") {
+            let home_path = Path::new(&home);
+            if path == Path::new("~") {
+                home_path.to_path_buf()
+            } else {
+                home_path.join(path.strip_prefix("~").unwrap())
+            }
+        } else {
+            return Err("Could not determine home directory".to_string());
+        }
+    } else if path.is_relative() {
+        // Handle relative paths (., .., or any relative path) by resolving against current_dir
+        if let Some(ref cwd) = current_dir {
+            Path::new(cwd).join(path)
+        } else {
+            path.to_path_buf()
+        }
+    } else {
+        path.to_path_buf()
+    };
+
+    // Check if the path exists and is a directory
+    if !expanded_path.exists() {
+        return Err(format!(
+            "Directory does not exist: {}",
+            expanded_path.display()
+        ));
+    }
+
+    if !expanded_path.is_dir() {
+        return Err(format!(
+            "Path is not a directory: {}",
+            expanded_path.display()
+        ));
+    }
+
+    // Return the canonicalized (absolute) path
+    expanded_path
+        .canonicalize()
+        .map(|p| p.to_string_lossy().to_string())
+        .map_err(|e| format!("Failed to resolve path: {}", e))
+}
+
+#[tauri::command]
+pub async fn load_saved_achievements(
+    app: AppHandle,
+) -> Result<Vec<AchievementUnlockedEvent>, String> {
     use chrono::Utc;
 
     // Load achievements from persistent store
@@ -117,10 +168,133 @@ pub async fn load_saved_achievements(app: AppHandle) -> Result<Vec<AchievementUn
     for achievement_id in &progress.unlocked {
         let mut info = get_achievement_info(achievement_id);
         info.unlocked_at = Some(Utc::now()); // We don't store timestamps, so just use now
-        events.push(AchievementUnlockedEvent {
+        events.push(AchievementUnlockedEvent { achievement: info });
-            achievement: info,
-        });
     }
 
     Ok(events)
 }
+
+#[tauri::command]
+pub async fn answer_question(
+    bridge_manager: State<'_, SharedBridgeManager>,
+    conversation_id: String,
+    tool_use_id: String,
+    answers: serde_json::Value,
+) -> Result<(), String> {
+    let mut manager = bridge_manager.lock();
+    manager.send_tool_result(&conversation_id, &tool_use_id, answers)
+}
+
+#[tauri::command]
+pub async fn list_skills() -> Result<Vec<String>, String> {
+    use std::fs;
+    use std::path::Path;
+
+    // Get the home directory
+    let home =
+        std::env::var_os("HOME").ok_or_else(|| "Could not determine home directory".to_string())?;
+
+    let skills_dir = Path::new(&home).join(".claude").join("skills");
+
+    // If the skills directory doesn't exist, return empty list
+    if !skills_dir.exists() {
+        return Ok(Vec::new());
+    }
+
+    // Read the directory and collect skill names
+    let mut skills = Vec::new();
+    let entries =
+        fs::read_dir(&skills_dir).map_err(|e| format!("Failed to read skills directory: {}", e))?;
+
+    for entry in entries {
+        let entry = entry.map_err(|e| format!("Failed to read directory entry: {}", e))?;
+        let path = entry.path();
+
+        // Only include directories that contain a SKILL.md file
+        if path.is_dir() {
+            let skill_file = path.join("SKILL.md");
+            if skill_file.exists() {
+                if let Some(name) = path.file_name() {
+                    skills.push(name.to_string_lossy().to_string());
+                }
+            }
+        }
+    }
+
+    // Sort alphabetically
+    skills.sort();
+
+    Ok(skills)
+}
+
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
+pub struct UpdateInfo {
+    pub current_version: String,
+    pub latest_version: String,
+    pub has_update: bool,
+    pub release_url: String,
+    pub release_notes: Option<String>,
+}
+
+#[derive(Debug, serde::Deserialize)]
+struct GiteaRelease {
+    tag_name: String,
+    html_url: String,
+    body: Option<String>,
+    prerelease: bool,
+}
+
+#[tauri::command]
+pub async fn check_for_updates() -> Result<UpdateInfo, String> {
+    const CURRENT_VERSION: &str = env!("CARGO_PKG_VERSION");
+    const RELEASES_API: &str =
+        "https://git.nhcarrigan.com/api/v1/repos/nhcarrigan/hikari-desktop/releases";
+
+    // Fetch releases from Gitea API
+    let client = reqwest::Client::new();
+    let response = client
+        .get(RELEASES_API)
+        .header("Accept", "application/json")
+        .send()
+        .await
+        .map_err(|e| format!("Failed to fetch releases: {}", e))?;
+
+    if !response.status().is_success() {
+        return Err(format!("API returned status: {}", response.status()));
+    }
+
+    let text = response
+        .text()
+        .await
+        .map_err(|e| format!("Failed to read response: {}", e))?;
+
+    let releases: Vec<GiteaRelease> =
+        serde_json::from_str(&text).map_err(|e| format!("Failed to parse releases: {}", e))?;
+
+    // Find the latest non-prerelease, or fall back to latest prerelease
+    let latest = releases
+        .iter()
+        .find(|r| !r.prerelease)
+        .or_else(|| releases.first());
+
+    let latest = match latest {
+        Some(r) => r,
+        None => return Err("No releases found".to_string()),
+    };
+
+    // Parse version strings (remove 'v' prefix if present)
+    let current = semver::Version::parse(CURRENT_VERSION)
+        .map_err(|e| format!("Failed to parse current version: {}", e))?;
+
+    let latest_tag = latest.tag_name.trim_start_matches('v');
+    let latest_ver = semver::Version::parse(latest_tag)
+        .map_err(|e| format!("Failed to parse latest version: {}", e))?;
+
+    Ok(UpdateInfo {
+        current_version: CURRENT_VERSION.to_string(),
+        latest_version: latest.tag_name.clone(),
+        has_update: latest_ver > current,
+        release_url: latest.html_url.clone(),
+        release_notes: latest.body.clone(),
+    })
+}

src-tauri/src/config.rs

@@ -22,6 +22,9 @@ pub struct ClaudeStartOptions {
 
     #[serde(default)]
     pub skip_greeting: bool,
+
+    #[serde(default)]
+    pub resume_session_id: Option<String>,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -55,6 +58,18 @@ pub struct HikariConfig {
 
     #[serde(default = "default_notification_volume")]
     pub notification_volume: f32,
+
+    #[serde(default)]
+    pub always_on_top: bool,
+
+    #[serde(default = "default_update_checks_enabled")]
+    pub update_checks_enabled: bool,
+
+    #[serde(default)]
+    pub character_panel_width: Option<u32>,
+
+    #[serde(default = "default_font_size")]
+    pub font_size: u32,
 }
 
 impl Default for HikariConfig {
@@ -70,10 +85,18 @@ impl Default for HikariConfig {
             greeting_custom_prompt: None,
             notifications_enabled: true,
             notification_volume: 0.7,
+            always_on_top: false,
+            update_checks_enabled: true,
+            character_panel_width: None,
+            font_size: 14,
         }
     }
 }
 
+fn default_update_checks_enabled() -> bool {
+    true
+}
+
 fn default_greeting_enabled() -> bool {
     true
 }
@@ -86,6 +109,10 @@ fn default_notification_volume() -> f32 {
     0.7
 }
 
+fn default_font_size() -> u32 {
+    14
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize, Default, PartialEq)]
 #[serde(rename_all = "lowercase")]
 pub enum Theme {
@@ -109,6 +136,10 @@ mod tests {
         assert_eq!(config.theme, Theme::Dark);
         assert!(config.greeting_enabled);
         assert!(config.greeting_custom_prompt.is_none());
+        assert!(!config.always_on_top);
+        assert!(config.update_checks_enabled);
+        assert!(config.character_panel_width.is_none());
+        assert_eq!(config.font_size, 14);
     }
 
     #[test]
@@ -124,6 +155,10 @@ mod tests {
             greeting_custom_prompt: Some("Hello!".to_string()),
             notifications_enabled: true,
             notification_volume: 0.7,
+            always_on_top: true,
+            update_checks_enabled: true,
+            character_panel_width: Some(400),
+            font_size: 16,
         };
 
         let json = serde_json::to_string(&config).unwrap();
@@ -134,7 +169,10 @@ mod tests {
         assert_eq!(deserialized.auto_granted_tools, config.auto_granted_tools);
         assert_eq!(deserialized.theme, Theme::Light);
         assert!(deserialized.greeting_enabled);
-        assert_eq!(deserialized.greeting_custom_prompt, Some("Hello!".to_string()));
+        assert_eq!(
+            deserialized.greeting_custom_prompt,
+            Some("Hello!".to_string())
+        );
     }
 
     #[test]

src-tauri/src/lib.rs

@@ -5,18 +5,18 @@ mod config;
 mod notifications;
 mod stats;
 mod types;
-mod wsl_bridge;
-mod wsl_notifications;
 mod vbs_notification;
 mod windows_toast;
+mod wsl_bridge;
+mod wsl_notifications;
 
-use commands::*;
-use notifications::*;
 use bridge_manager::create_shared_bridge_manager;
 use commands::load_saved_achievements;
-use wsl_notifications::*;
+use commands::*;
+use notifications::*;
 use vbs_notification::*;
 use windows_toast::*;
+use wsl_notifications::*;
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
@@ -29,6 +29,7 @@ pub fn run() {
         .plugin(tauri_plugin_store::Builder::new().build())
         .plugin(tauri_plugin_notification::init())
         .plugin(tauri_plugin_os::init())
+        .plugin(tauri_plugin_http::init())
         .manage(bridge_manager.clone())
         .setup(move |app| {
             // Initialize the app handle in the bridge manager
@@ -47,12 +48,16 @@ pub fn run() {
             save_config,
             get_usage_stats,
             load_saved_achievements,
+            answer_question,
             send_windows_notification,
             send_simple_notification,
             send_windows_toast,
             send_notify_send,
             send_wsl_notification,
             send_vbs_notification,
+            validate_directory,
+            list_skills,
+            check_for_updates,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/src/notifications.rs

@@ -1,5 +1,5 @@
-use tauri::command;
 use std::process::Command;
+use tauri::command;
 
 #[command]
 pub async fn send_notify_send(title: String, body: String) -> Result<(), String> {
@@ -10,7 +10,12 @@ pub async fn send_notify_send(title: String, body: String) -> Result<(), String>
         .arg("--urgency=normal")
         .arg("--app-name=Hikari Desktop")
         .output()
-        .map_err(|e| format!("Failed to execute notify-send: {}. Make sure libnotify-bin is installed.", e))?;
+        .map_err(|e| {
+            format!(
+                "Failed to execute notify-send: {}. Make sure libnotify-bin is installed.",
+                e
+            )
+        })?;
 
     if !output.status.success() {
         let error = String::from_utf8_lossy(&output.stderr);
@@ -93,4 +98,4 @@ pub async fn send_simple_notification(title: String, body: String) -> Result<(),
         .map_err(|e| format!("Failed to send message: {}", e))?;
 
     Ok(())
-}
+}

src-tauri/src/stats.rs

@@ -1,7 +1,7 @@
+use crate::achievements::{check_achievements, AchievementProgress};
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::time::Instant;
-use crate::achievements::{AchievementProgress, check_achievements};
 
 #[derive(Debug, Clone, Serialize, Deserialize, Default)]
 pub struct UsageStats {
@@ -89,7 +89,10 @@ impl UsageStats {
 
     pub fn increment_tool_usage(&mut self, tool_name: &str) {
         *self.tools_usage.entry(tool_name.to_string()).or_insert(0) += 1;
-        *self.session_tools_usage.entry(tool_name.to_string()).or_insert(0) += 1;
+        *self
+            .session_tools_usage
+            .entry(tool_name.to_string())
+            .or_insert(0) += 1;
     }
 
     pub fn get_session_duration(&mut self) -> u64 {
@@ -213,4 +216,4 @@ mod tests {
         assert_eq!(stats.session_cost_usd, 0.0);
         assert!(stats.total_cost_usd > 0.0);
     }
-}
+}

src-tauri/src/types.rs

@@ -216,6 +216,24 @@ pub struct WorkingDirectoryEvent {
     pub conversation_id: Option<String>,
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct QuestionOption {
+    pub label: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub description: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct UserQuestionEvent {
+    pub id: String,
+    pub question: String,
+    pub header: Option<String>,
+    pub options: Vec<QuestionOption>,
+    pub multi_select: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub conversation_id: Option<String>,
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;

src-tauri/src/vbs_notification.rs

@@ -1,7 +1,7 @@
-use std::process::Command;
 use std::io::Write;
-use tempfile::NamedTempFile;
+use std::process::Command;
 use tauri::command;
+use tempfile::NamedTempFile;
 
 #[command]
 pub async fn send_vbs_notification(title: String, body: String) -> Result<(), String> {
@@ -17,8 +17,8 @@ objShell.Popup "{}" & vbCrLf & vbCrLf & "{}", 5, "{}", 64
     );
 
     // Create a temporary VBS file
-    let mut temp_file = NamedTempFile::new()
+    let mut temp_file =
-        .map_err(|e| format!("Failed to create temp file: {}", e))?;
+        NamedTempFile::new().map_err(|e| format!("Failed to create temp file: {}", e))?;
 
     temp_file
         .write_all(vbs_content.as_bytes())
@@ -40,10 +40,7 @@ objShell.Popup "{}" & vbCrLf & vbCrLf & "{}", 5, "{}", 64
     } else if temp_path.starts_with("/tmp/") {
         // WSL temp files might be in a different location
         // Try to use wslpath to convert
-        let output = Command::new("wslpath")
+        let output = Command::new("wslpath").arg("-w").arg(&temp_path).output();
-            .arg("-w")
-            .arg(&temp_path)
-            .output();
 
         if let Ok(result) = output {
             if result.status.success() {
@@ -71,4 +68,4 @@ objShell.Popup "{}" & vbCrLf & vbCrLf & "{}", 5, "{}", 64
     }
 
     Ok(())
-}
+}

src-tauri/src/windows_toast.rs

@@ -2,7 +2,7 @@ use tauri::command;
 
 #[cfg(target_os = "windows")]
 use windows::{
-    core::{HSTRING, Result as WindowsResult},
+    core::{Result as WindowsResult, HSTRING},
     Data::Xml::Dom::*,
     UI::Notifications::*,
 };
@@ -38,7 +38,8 @@ fn show_toast_notification(title: &str, body: &str) -> WindowsResult<()> {
     let toast = ToastNotification::CreateToastNotification(&xml_doc)?;
 
     // Create a toast notifier with an application ID
-    let notifier = ToastNotificationManager::CreateToastNotifierWithId(&HSTRING::from("Hikari Desktop"))?;
+    let notifier =
+        ToastNotificationManager::CreateToastNotifierWithId(&HSTRING::from("Hikari Desktop"))?;
 
     // Show the notification
     notifier.Show(&toast)?;
@@ -60,4 +61,4 @@ fn escape_xml(text: &str) -> String {
 #[command]
 pub async fn send_windows_toast(_title: String, _body: String) -> Result<(), String> {
     Err("Windows toast notifications are only available on Windows".to_string())
-}
+}

src-tauri/src/wsl_bridge.rs

@@ -8,11 +8,15 @@ use tempfile::NamedTempFile;
 #[cfg(target_os = "windows")]
 use std::os::windows::process::CommandExt;
 
-use crate::config::ClaudeStartOptions;
-use crate::stats::{UsageStats, StatsUpdateEvent};
-use parking_lot::RwLock;
-use crate::types::{CharacterState, ClaudeMessage, ConnectionStatus, ContentBlock, StateChangeEvent, OutputEvent, PermissionPromptEvent, ConnectionEvent, SessionEvent, WorkingDirectoryEvent};
 use crate::achievements::{get_achievement_info, AchievementUnlockedEvent};
+use crate::config::ClaudeStartOptions;
+use crate::stats::{StatsUpdateEvent, UsageStats};
+use crate::types::{
+    CharacterState, ClaudeMessage, ConnectionEvent, ConnectionStatus, ContentBlock, OutputEvent,
+    PermissionPromptEvent, QuestionOption, SessionEvent, StateChangeEvent, UserQuestionEvent,
+    WorkingDirectoryEvent,
+};
+use parking_lot::RwLock;
 
 const SEARCH_TOOLS: [&str; 5] = ["Read", "Glob", "Grep", "WebSearch", "WebFetch"];
 const CODING_TOOLS: [&str; 3] = ["Edit", "Write", "NotebookEdit"];
@@ -103,7 +107,6 @@ impl WslBridge {
         }
     }
 
-
     pub fn start(&mut self, app: AppHandle, options: ClaudeStartOptions) -> Result<(), String> {
         if self.process.is_some() {
             return Err("Process already running".to_string());
@@ -115,14 +118,21 @@ impl WslBridge {
         tauri::async_runtime::spawn(async move {
             println!("Loading saved achievements...");
             let achievements = crate::achievements::load_achievements(&app_clone).await;
-            println!("Loaded {} unlocked achievements", achievements.unlocked.len());
+            println!(
+                "Loaded {} unlocked achievements",
+                achievements.unlocked.len()
+            );
             stats.write().achievements = achievements;
         });
 
         let working_dir = &options.working_dir;
         self.working_directory = working_dir.clone();
 
-        emit_connection_status(&app, ConnectionStatus::Connecting, self.conversation_id.clone());
+        emit_connection_status(
+            &app,
+            ConnectionStatus::Connecting,
+            self.conversation_id.clone(),
+        );
 
         // Create temp file for MCP config if provided
         let mcp_config_path = if let Some(ref mcp_json) = options.mcp_servers_json {
@@ -158,16 +168,19 @@ impl WslBridge {
         let mut command = if is_wsl {
             // Running inside WSL - call claude directly
             // Try to find claude in common locations since GUI apps may not inherit shell PATH
-            let claude_path = find_claude_binary()
+            let claude_path = find_claude_binary().ok_or_else(|| {
-                .ok_or_else(|| "Could not find claude binary. Is Claude Code installed?".to_string())?;
+                "Could not find claude binary. Is Claude Code installed?".to_string()
+            })?;
 
             eprintln!("[DEBUG] Found claude at: {}", claude_path);
             eprintln!("[DEBUG] Working dir: {}", working_dir);
 
             let mut cmd = Command::new(&claude_path);
             cmd.args([
-                "--output-format", "stream-json",
+                "--output-format",
-                "--input-format", "stream-json",
+                "stream-json",
+                "--input-format",
+                "stream-json",
                 "--verbose",
             ]);
 
@@ -195,6 +208,13 @@ impl WslBridge {
                 cmd.args(["--mcp-config", mcp_path]);
             }
 
+            // Add resume flag if session ID provided
+            if let Some(ref session_id) = options.resume_session_id {
+                if !session_id.is_empty() {
+                    cmd.args(["--resume", session_id]);
+                }
+            }
+
             cmd.current_dir(working_dir);
 
             // Set API key as environment variable if specified
@@ -211,10 +231,7 @@ impl WslBridge {
             let mut cmd = Command::new("wsl");
 
             // Build the claude command with all arguments
-            let mut claude_cmd = format!(
+            let mut claude_cmd = format!("cd '{}' && ", working_dir);
-                "cd '{}' && ",
-                working_dir
-            );
 
             // Set API key as environment variable if specified
             if let Some(ref api_key) = options.api_key {
@@ -223,7 +240,9 @@ impl WslBridge {
                 }
             }
 
-            claude_cmd.push_str("claude --output-format stream-json --input-format stream-json --verbose");
+            claude_cmd.push_str(
+                "claude --output-format stream-json --input-format stream-json --verbose",
+            );
 
             // Add model if specified
             if let Some(ref model) = options.model {
@@ -251,6 +270,13 @@ impl WslBridge {
                 claude_cmd.push_str(&format!(" --mcp-config '{}'", mcp_path));
             }
 
+            // Add resume flag if session ID provided
+            if let Some(ref session_id) = options.resume_session_id {
+                if !session_id.is_empty() {
+                    claude_cmd.push_str(&format!(" --resume '{}'", session_id));
+                }
+            }
+
             // Use bash -lc to load login profile (ensures PATH includes claude)
             cmd.args(["-e", "bash", "-lc", &claude_cmd]);
 
@@ -278,8 +304,8 @@ impl WslBridge {
         self.stdin = stdin;
         self.process = Some(child);
 
-        // Reset session stats when starting new session
+        // Note: We no longer reset stats here - stats persist across reconnects
-        self.stats.write().reset_session();
+        // Stats are only reset when explicitly disconnecting via stop()
 
         // Load saved achievements
         let app_handle = app.clone();
@@ -306,7 +332,11 @@ impl WslBridge {
             });
         }
 
-        emit_connection_status(&app, ConnectionStatus::Connected, self.conversation_id.clone());
+        emit_connection_status(
+            &app,
+            ConnectionStatus::Connected,
+            self.conversation_id.clone(),
+        );
 
         Ok(())
     }
@@ -331,7 +361,44 @@ impl WslBridge {
             .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))?;
+        stdin
+            .flush()
+            .map_err(|e| format!("Failed to flush stdin: {}", e))?;
+
+        Ok(())
+    }
+
+    pub fn send_tool_result(
+        &mut self,
+        tool_use_id: &str,
+        result: serde_json::Value,
+    ) -> Result<(), String> {
+        let stdin = self.stdin.as_mut().ok_or("Process not running")?;
+
+        // The content should be a JSON string representation of the result
+        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(())
     }
@@ -352,7 +419,11 @@ impl WslBridge {
             // The user will see what session was interrupted
 
             // Emit disconnected status
-            emit_connection_status(app, ConnectionStatus::Disconnected, self.conversation_id.clone());
+            emit_connection_status(
+                app,
+                ConnectionStatus::Disconnected,
+                self.conversation_id.clone(),
+            );
 
             Ok(())
         } else {
@@ -368,7 +439,15 @@ impl WslBridge {
         self.stdin = None;
         self.session_id = None;
         self.mcp_config_file = None; // Temp file is automatically deleted when dropped
-        emit_connection_status(app, ConnectionStatus::Disconnected, self.conversation_id.clone());
+
+        // Reset session stats on explicit disconnect
+        self.stats.write().reset_session();
+
+        emit_connection_status(
+            app,
+            ConnectionStatus::Disconnected,
+            self.conversation_id.clone(),
+        );
     }
 
     pub fn is_running(&self) -> bool {
@@ -382,7 +461,6 @@ impl WslBridge {
     pub fn get_stats(&self) -> UsageStats {
         self.stats.read().clone()
     }
-
 }
 
 impl Default for WslBridge {
@@ -391,7 +469,12 @@ impl Default for WslBridge {
     }
 }
 
-fn handle_stdout(stdout: std::process::ChildStdout, app: AppHandle, stats: Arc<RwLock<UsageStats>>, conversation_id: Option<String>) {
+fn handle_stdout(
+    stdout: std::process::ChildStdout,
+    app: AppHandle,
+    stats: Arc<RwLock<UsageStats>>,
+    conversation_id: Option<String>,
+) {
     let reader = BufReader::new(stdout);
 
     for line in reader.lines() {
@@ -412,18 +495,25 @@ fn handle_stdout(stdout: std::process::ChildStdout, app: AppHandle, stats: Arc<R
     emit_connection_status(&app, ConnectionStatus::Disconnected, conversation_id);
 }
 
-fn handle_stderr(stderr: std::process::ChildStderr, app: AppHandle, conversation_id: Option<String>) {
+fn handle_stderr(
+    stderr: std::process::ChildStderr,
+    app: AppHandle,
+    conversation_id: Option<String>,
+) {
     let reader = BufReader::new(stderr);
 
     for line in reader.lines() {
         match line {
             Ok(line) if !line.is_empty() => {
-                let _ = app.emit("claude:output", OutputEvent {
+                let _ = app.emit(
-                    line_type: "error".to_string(),
+                    "claude:output",
-                    content: line,
+                    OutputEvent {
-                    tool_name: None,
+                        line_type: "error".to_string(),
-                    conversation_id: conversation_id.clone(),
+                        content: line,
-                });
+                        tool_name: None,
+                        conversation_id: conversation_id.clone(),
+                    },
+                );
             }
             Err(_) => break,
             _ => {}
@@ -431,24 +521,40 @@ fn handle_stderr(stderr: std::process::ChildStderr, app: AppHandle, conversation
     }
 }
 
-fn process_json_line(line: &str, app: &AppHandle, stats: &Arc<RwLock<UsageStats>>, conversation_id: &Option<String>) -> Result<(), String> {
+fn process_json_line(
+    line: &str,
+    app: &AppHandle,
+    stats: &Arc<RwLock<UsageStats>>,
+    conversation_id: &Option<String>,
+) -> Result<(), String> {
     let message: ClaudeMessage = serde_json::from_str(line)
         .map_err(|e| format!("Failed to parse JSON: {} - Line: {}", e, line))?;
 
     match &message {
-        ClaudeMessage::System { subtype, session_id, cwd, .. } => {
+        ClaudeMessage::System {
+            subtype,
+            session_id,
+            cwd,
+            ..
+        } => {
             if subtype == "init" {
                 if let Some(id) = session_id {
-                    let _ = app.emit("claude:session", SessionEvent {
+                    let _ = app.emit(
-                        session_id: id.clone(),
+                        "claude:session",
-                        conversation_id: conversation_id.clone(),
+                        SessionEvent {
-                    });
+                            session_id: id.clone(),
+                            conversation_id: conversation_id.clone(),
+                        },
+                    );
                 }
                 if let Some(dir) = cwd {
-                    let _ = app.emit("claude:cwd", WorkingDirectoryEvent {
+                    let _ = app.emit(
-                        directory: dir.clone(),
+                        "claude:cwd",
-                        conversation_id: conversation_id.clone(),
+                        WorkingDirectoryEvent {
-                    });
+                            directory: dir.clone(),
+                            conversation_id: conversation_id.clone(),
+                        },
+                    );
                 }
                 emit_state_change(app, CharacterState::Idle, None, conversation_id.clone());
             }
@@ -500,12 +606,15 @@ fn process_json_line(line: &str, app: &AppHandle, stats: &Arc<RwLock<UsageStats>
                         }
 
                         let desc = format_tool_description(name, input);
-                        let _ = app.emit("claude:output", OutputEvent {
+                        let _ = app.emit(
-                            line_type: "tool".to_string(),
+                            "claude:output",
-                            content: desc,
+                            OutputEvent {
-                            tool_name: Some(name.clone()),
+                                line_type: "tool".to_string(),
-                            conversation_id: conversation_id.clone(),
+                                content: desc,
-                        });
+                                tool_name: Some(name.clone()),
+                                conversation_id: conversation_id.clone(),
+                            },
+                        );
                     }
                     ContentBlock::Text { text } => {
                         // Count code blocks in the text
@@ -514,21 +623,27 @@ fn process_json_line(line: &str, app: &AppHandle, stats: &Arc<RwLock<UsageStats>
                             stats.write().increment_code_blocks();
                         }
 
-                        let _ = app.emit("claude:output", OutputEvent {
+                        let _ = app.emit(
-                            line_type: "assistant".to_string(),
+                            "claude:output",
-                            content: text.clone(),
+                            OutputEvent {
-                            tool_name: None,
+                                line_type: "assistant".to_string(),
-                            conversation_id: conversation_id.clone(),
+                                content: text.clone(),
-                        });
+                                tool_name: None,
+                                conversation_id: conversation_id.clone(),
+                            },
+                        );
                     }
                     ContentBlock::Thinking { thinking } => {
                         state = CharacterState::Thinking;
-                        let _ = app.emit("claude:output", OutputEvent {
+                        let _ = app.emit(
-                            line_type: "system".to_string(),
+                            "claude:output",
-                            content: format!("[Thinking] {}", thinking),
+                            OutputEvent {
-                            tool_name: None,
+                                line_type: "system".to_string(),
-                            conversation_id: conversation_id.clone(),
+                                content: format!("[Thinking] {}", thinking),
-                        });
+                                tool_name: None,
+                                conversation_id: conversation_id.clone(),
+                            },
+                        );
                     }
                     _ => {}
                 }
@@ -563,7 +678,13 @@ fn process_json_line(line: &str, app: &AppHandle, stats: &Arc<RwLock<UsageStats>
             }
         }
 
-        ClaudeMessage::Result { subtype, result, permission_denials, usage: _, .. } => {
+        ClaudeMessage::Result {
+            subtype,
+            result,
+            permission_denials,
+            usage: _,
+            ..
+        } => {
             let state = if subtype == "success" {
                 CharacterState::Success
             } else {
@@ -584,9 +705,10 @@ fn process_json_line(line: &str, app: &AppHandle, stats: &Arc<RwLock<UsageStats>
             // Emit achievement events for any newly unlocked achievements
             for achievement_id in &newly_unlocked {
                 let info = get_achievement_info(achievement_id);
-                let _ = app.emit("achievement:unlocked", AchievementUnlockedEvent {
+                let _ = app.emit(
-                    achievement: info,
+                    "achievement:unlocked",
-                });
+                    AchievementUnlockedEvent { achievement: info },
+                );
             }
 
             // Save achievements after unlocking new ones
@@ -598,7 +720,10 @@ fn process_json_line(line: &str, app: &AppHandle, stats: &Arc<RwLock<UsageStats>
                 // Use Tauri's async runtime instead of tokio::spawn
                 tauri::async_runtime::spawn(async move {
                     println!("Spawned save task for achievements");
-                    if let Err(e) = crate::achievements::save_achievements(&app_handle, &achievements_progress).await {
+                    if let Err(e) =
+                        crate::achievements::save_achievements(&app_handle, &achievements_progress)
+                            .await
+                    {
                         eprintln!("Failed to save achievements: {}", e);
                     } else {
                         println!("Achievement save task completed successfully");
@@ -615,31 +740,107 @@ fn process_json_line(line: &str, app: &AppHandle, stats: &Arc<RwLock<UsageStats>
             // Only emit error results - success content is already sent via Assistant message
             if subtype != "success" {
                 if let Some(text) = result {
-                    let _ = app.emit("claude:output", OutputEvent {
+                    let _ = app.emit(
-                        line_type: "error".to_string(),
+                        "claude:output",
-                        content: text.clone(),
+                        OutputEvent {
-                        tool_name: None,
+                            line_type: "error".to_string(),
-                        conversation_id: conversation_id.clone(),
+                            content: text.clone(),
-                    });
+                            tool_name: None,
+                            conversation_id: conversation_id.clone(),
+                        },
+                    );
                 }
             }
 
             // Check for permission denials and emit prompts for each
             if let Some(denials) = permission_denials {
+                let mut has_regular_denials = false;
+
                 for denial in denials {
-                    let description = format_tool_description(&denial.tool_name, &denial.tool_input);
+                    // Special handling for AskUserQuestion tool
-                    let _ = app.emit("claude:permission", PermissionPromptEvent {
+                    if denial.tool_name == "AskUserQuestion" {
-                        id: denial.tool_use_id.clone(),
+                        if let Some(questions) = denial
-                        tool_name: denial.tool_name.clone(),
+                            .tool_input
-                        tool_input: denial.tool_input.clone(),
+                            .get("questions")
-                        description,
+                            .and_then(|q| q.as_array())
-                        conversation_id: conversation_id.clone(),
+                        {
-                    });
+                            // For now, handle the first question (most common case)
+                            if let Some(first_question) = questions.first() {
+                                let question_text = first_question
+                                    .get("question")
+                                    .and_then(|q| q.as_str())
+                                    .unwrap_or("Claude has a question for you")
+                                    .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 _ = app.emit(
+                                    "claude:question",
+                                    UserQuestionEvent {
+                                        id: denial.tool_use_id.clone(),
+                                        question: question_text,
+                                        header,
+                                        options,
+                                        multi_select,
+                                        conversation_id: conversation_id.clone(),
+                                    },
+                                );
+                            }
+                        }
+                    } else {
+                        has_regular_denials = true;
+                        let description =
+                            format_tool_description(&denial.tool_name, &denial.tool_input);
+                        let _ = app.emit(
+                            "claude:permission",
+                            PermissionPromptEvent {
+                                id: denial.tool_use_id.clone(),
+                                tool_name: denial.tool_name.clone(),
+                                tool_input: denial.tool_input.clone(),
+                                description,
+                                conversation_id: conversation_id.clone(),
+                            },
+                        );
+                    }
                 }
 
-                // Show permission state if there were denials
+                // Show permission state if there were any denials (questions or regular)
-                if !denials.is_empty() {
+                if has_regular_denials || !denials.is_empty() {
-                    emit_state_change(app, CharacterState::Permission, None, conversation_id.clone());
+                    emit_state_change(
+                        app,
+                        CharacterState::Permission,
+                        None,
+                        conversation_id.clone(),
+                    );
                     return Ok(());
                 }
             }
@@ -652,7 +853,9 @@ fn process_json_line(line: &str, app: &AppHandle, stats: &Arc<RwLock<UsageStats>
             stats.write().increment_messages();
 
             // Extract text content from the message
-            let message_text = message.content.iter()
+            let message_text = message
+                .content
+                .iter()
                 .filter_map(|block| match block {
                     crate::types::ContentBlock::Text { text } => Some(text.clone()),
                     _ => None,
@@ -682,9 +885,10 @@ fn process_json_line(line: &str, app: &AppHandle, stats: &Arc<RwLock<UsageStats>
             for achievement_id in &newly_unlocked {
                 println!("User message unlocked achievement: {:?}", achievement_id);
                 let info = get_achievement_info(achievement_id);
-                let _ = app.emit("achievement:unlocked", AchievementUnlockedEvent {
+                let _ = app.emit(
-                    achievement: info,
+                    "achievement:unlocked",
-                });
+                    AchievementUnlockedEvent { achievement: info },
+                );
             }
 
             // Save achievements after unlocking new ones
@@ -693,7 +897,10 @@ fn process_json_line(line: &str, app: &AppHandle, stats: &Arc<RwLock<UsageStats>
                 let app_handle = app.clone();
                 let achievements_progress = stats.read().achievements.clone();
                 tauri::async_runtime::spawn(async move {
-                    if let Err(e) = crate::achievements::save_achievements(&app_handle, &achievements_progress).await {
+                    if let Err(e) =
+                        crate::achievements::save_achievements(&app_handle, &achievements_progress)
+                            .await
+                    {
                         eprintln!("Failed to save achievements: {}", e);
                     } else {
                         println!("Achievements saved after user message");
@@ -768,15 +975,36 @@ fn format_tool_description(name: &str, input: &serde_json::Value) -> String {
     }
 }
 
-fn emit_state_change(app: &AppHandle, state: CharacterState, tool_name: Option<String>, conversation_id: Option<String>) {
+fn emit_state_change(
-    let _ = app.emit("claude:state", StateChangeEvent { state, tool_name, conversation_id });
+    app: &AppHandle,
+    state: CharacterState,
+    tool_name: Option<String>,
+    conversation_id: Option<String>,
+) {
+    let _ = app.emit(
+        "claude:state",
+        StateChangeEvent {
+            state,
+            tool_name,
+            conversation_id,
+        },
+    );
 }
 
-fn emit_connection_status(app: &AppHandle, status: ConnectionStatus, conversation_id: Option<String>) {
+fn emit_connection_status(
-    let _ = app.emit("claude:connection", ConnectionEvent { status, conversation_id });
+    app: &AppHandle,
+    status: ConnectionStatus,
+    conversation_id: Option<String>,
+) {
+    let _ = app.emit(
+        "claude:connection",
+        ConnectionEvent {
+            status,
+            conversation_id,
+        },
+    );
 }
 
-
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -786,21 +1014,36 @@ mod tests {
         assert!(matches!(get_tool_state("Read"), CharacterState::Searching));
         assert!(matches!(get_tool_state("Glob"), CharacterState::Searching));
         assert!(matches!(get_tool_state("Grep"), CharacterState::Searching));
-        assert!(matches!(get_tool_state("WebSearch"), CharacterState::Searching));
+        assert!(matches!(
-        assert!(matches!(get_tool_state("WebFetch"), CharacterState::Searching));
+            get_tool_state("WebSearch"),
+            CharacterState::Searching
+        ));
+        assert!(matches!(
+            get_tool_state("WebFetch"),
+            CharacterState::Searching
+        ));
     }
 
     #[test]
     fn test_get_tool_state_coding_tools() {
         assert!(matches!(get_tool_state("Edit"), CharacterState::Coding));
         assert!(matches!(get_tool_state("Write"), CharacterState::Coding));
-        assert!(matches!(get_tool_state("NotebookEdit"), CharacterState::Coding));
+        assert!(matches!(
+            get_tool_state("NotebookEdit"),
+            CharacterState::Coding
+        ));
     }
 
     #[test]
     fn test_get_tool_state_mcp_tools() {
-        assert!(matches!(get_tool_state("mcp__github__create_issue"), CharacterState::Mcp));
+        assert!(matches!(
-        assert!(matches!(get_tool_state("mcp__notion__search"), CharacterState::Mcp));
+            get_tool_state("mcp__github__create_issue"),
+            CharacterState::Mcp
+        ));
+        assert!(matches!(
+            get_tool_state("mcp__notion__search"),
+            CharacterState::Mcp
+        ));
     }
 
     #[test]
@@ -810,7 +1053,10 @@ mod tests {
 
     #[test]
     fn test_get_tool_state_unknown() {
-        assert!(matches!(get_tool_state("SomeUnknownTool"), CharacterState::Typing));
+        assert!(matches!(
+            get_tool_state("SomeUnknownTool"),
+            CharacterState::Typing
+        ));
         assert!(matches!(get_tool_state("Bash"), CharacterState::Typing));
     }
 

src-tauri/src/wsl_notifications.rs

@@ -81,4 +81,4 @@ $notifier.Show($toast)
 
     // If all methods fail, return an error
     Err("All WSL notification methods failed".to_string())
-}
+}

src-tauri/tauri.conf.json

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

src/app.css

@@ -6,6 +6,7 @@
   --bg-secondary: #16213e;
   --bg-terminal: #0f0f1a;
   --bg-hover: #2a2a4a;
+  --bg-code: #1e1e2e;
   --accent-primary: #e94560;
   --accent-secondary: #ff6b9d;
   --text-primary: #ffffff;
@@ -18,6 +19,16 @@
   --terminal-tool: #c084fc;
   --terminal-tool-name: #ddd6fe;
   --terminal-error: #f87171;
+
+  /* Syntax highlighting colors (dark) */
+  --hljs-keyword: #f472b6;
+  --hljs-string: #a3e635;
+  --hljs-number: #fbbf24;
+  --hljs-comment: #6b7280;
+  --hljs-function: #c084fc;
+  --hljs-type: #22d3ee;
+  --hljs-variable: #fb923c;
+  --hljs-meta: #94a3b8;
 }
 
 [data-theme="light"] {
@@ -25,6 +36,7 @@
   --bg-secondary: #ffffff;
   --bg-terminal: #f1f3f4;
   --bg-hover: #e8e8e8;
+  --bg-code: #f5f5f5;
   --accent-primary: #e94560;
   --accent-secondary: #ff6b9d;
   --text-primary: #1a1a2e;
@@ -37,6 +49,16 @@
   --terminal-tool: #7c3aed;
   --terminal-tool-name: #8b5cf6;
   --terminal-error: #dc2626;
+
+  /* Syntax highlighting colors (light) */
+  --hljs-keyword: #d946ef;
+  --hljs-string: #16a34a;
+  --hljs-number: #d97706;
+  --hljs-comment: #9ca3af;
+  --hljs-function: #7c3aed;
+  --hljs-type: #0891b2;
+  --hljs-variable: #ea580c;
+  --hljs-meta: #64748b;
 }
 
 html,

src/lib/commands/slashCommands.ts

@@ -0,0 +1,280 @@
+import { get } from "svelte/store";
+import { invoke } from "@tauri-apps/api/core";
+import { claudeStore } from "$lib/stores/claude";
+import { characterState } from "$lib/stores/character";
+import { setSkipNextGreeting } from "$lib/tauri";
+import { searchState } from "$lib/stores/search";
+
+export interface SlashCommand {
+  name: string;
+  description: string;
+  usage: string;
+  execute: (args: string) => Promise<void> | void;
+}
+
+async function changeDirectory(path: string): Promise<void> {
+  const conversationId = get(claudeStore.activeConversationId);
+  if (!conversationId) {
+    claudeStore.addLine("error", "No active conversation");
+    return;
+  }
+
+  if (!path.trim()) {
+    const currentDir = get(claudeStore.currentWorkingDirectory);
+    claudeStore.addLine("system", `Current directory: ${currentDir}`);
+    return;
+  }
+
+  try {
+    characterState.setState("thinking");
+    claudeStore.addLine("system", `Changing directory to: ${path}`);
+
+    const currentDir = get(claudeStore.currentWorkingDirectory);
+    const validatedPath = await invoke<string>("validate_directory", { path, currentDir });
+
+    // Capture conversation history before disconnecting
+    const conversationHistory = claudeStore.getConversationHistory();
+
+    await invoke("stop_claude", { conversationId });
+
+    // Wait for clean shutdown
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    claudeStore.setWorkingDirectory(validatedPath);
+
+    setSkipNextGreeting(true);
+
+    await invoke("start_claude", {
+      conversationId,
+      options: {
+        working_dir: validatedPath,
+      },
+    });
+
+    // Wait for connection to establish
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    // Restore context if there was conversation history
+    if (conversationHistory) {
+      const contextMessage = `[CONTEXT RESTORATION]
+I just changed the working directory from ${currentDir} to ${validatedPath}. Here's our conversation so far:
+
+${conversationHistory}
+
+Please continue where we left off. You are now operating in the new directory.`;
+
+      await invoke("send_prompt", {
+        conversationId,
+        message: contextMessage,
+      });
+    }
+
+    claudeStore.addLine("system", `Changed directory to: ${validatedPath}`);
+    characterState.setState("idle");
+  } catch (error) {
+    claudeStore.addLine("error", `Failed to change directory: ${error}`);
+    characterState.setTemporaryState("error", 3000);
+  }
+}
+
+async function startNewConversation(): Promise<void> {
+  const conversationId = get(claudeStore.activeConversationId);
+  if (!conversationId) {
+    claudeStore.addLine("error", "No active conversation");
+    return;
+  }
+
+  try {
+    const workingDir = await invoke<string>("get_working_directory", {
+      conversationId,
+    });
+
+    claudeStore.addLine("system", "Starting new conversation...");
+    characterState.setState("thinking");
+
+    await invoke("interrupt_claude", { conversationId });
+
+    claudeStore.clearTerminal();
+
+    setSkipNextGreeting(true);
+
+    await invoke("start_claude", {
+      conversationId,
+      options: {
+        working_dir: workingDir,
+      },
+    });
+
+    claudeStore.addLine("system", "New conversation started!");
+    characterState.setState("idle");
+  } catch (error) {
+    claudeStore.addLine("error", `Failed to start new conversation: ${error}`);
+    characterState.setTemporaryState("error", 3000);
+  }
+}
+
+export const slashCommands: SlashCommand[] = [
+  {
+    name: "cd",
+    description: "Change the working directory",
+    usage: "/cd <path>",
+    execute: changeDirectory,
+  },
+  {
+    name: "clear",
+    description: "Clear the terminal display (keeps conversation context)",
+    usage: "/clear",
+    execute: () => {
+      claudeStore.clearTerminal();
+      claudeStore.addLine("system", "Terminal cleared");
+    },
+  },
+  {
+    name: "new",
+    description: "Start a fresh conversation (resets context)",
+    usage: "/new",
+    execute: startNewConversation,
+  },
+  {
+    name: "help",
+    description: "Show available slash commands",
+    usage: "/help",
+    execute: () => {
+      const helpText = slashCommands
+        .map((cmd) => `  ${cmd.usage.padEnd(12)} - ${cmd.description}`)
+        .join("\n");
+      claudeStore.addLine("system", `Available commands:\n${helpText}`);
+    },
+  },
+  {
+    name: "search",
+    description: "Search within the conversation (use /search to clear)",
+    usage: "/search [query]",
+    execute: (args: string) => {
+      if (!args.trim()) {
+        searchState.clear();
+        claudeStore.addLine("system", "Search cleared");
+        return;
+      }
+      searchState.setQuery(args.trim());
+      claudeStore.addLine("system", `Searching for: "${args.trim()}"`);
+    },
+  },
+  {
+    name: "summarise",
+    description: "Get a summary of the entire conversation",
+    usage: "/summarise",
+    execute: async () => {
+      const conversationId = get(claudeStore.activeConversationId);
+      if (!conversationId) {
+        claudeStore.addLine("error", "No active conversation");
+        return;
+      }
+
+      try {
+        claudeStore.addLine("system", "Requesting conversation summary...");
+        await invoke("send_prompt", {
+          conversationId,
+          message:
+            "Please provide a comprehensive summary of our entire conversation so far, including the key topics we've discussed, decisions made, and any important context.",
+        });
+      } catch (error) {
+        claudeStore.addLine("error", `Failed to request summary: ${error}`);
+      }
+    },
+  },
+  {
+    name: "skill",
+    description: "Invoke a Claude Code skill from ~/.claude/skills/",
+    usage: "/skill [name] [data]",
+    execute: async (args: string) => {
+      const conversationId = get(claudeStore.activeConversationId);
+      if (!conversationId) {
+        claudeStore.addLine("error", "No active conversation");
+        return;
+      }
+
+      const parts = args.trim().split(/\s+/);
+      const skillName = parts[0];
+      const skillData = parts.slice(1).join(" ");
+
+      // If no skill name provided, list available skills
+      if (!skillName) {
+        try {
+          const skills = await invoke<string[]>("list_skills");
+          if (skills.length === 0) {
+            claudeStore.addLine(
+              "system",
+              "No skills found in ~/.claude/skills/\nCreate a skill by adding a folder with a SKILL.md file."
+            );
+          } else {
+            const skillList = skills.map((s) => `  • ${s}`).join("\n");
+            claudeStore.addLine(
+              "system",
+              `Available skills:\n${skillList}\n\nUsage: /skill <skill-name> [data]`
+            );
+          }
+        } catch (error) {
+          claudeStore.addLine("error", `Failed to list skills: ${error}`);
+        }
+        return;
+      }
+
+      try {
+        claudeStore.addLine("system", `Invoking skill: ${skillName}`);
+        characterState.setState("thinking");
+
+        const message = skillData
+          ? `Please run the /${skillName} skill with the following data:\n\n${skillData}`
+          : `Please run the /${skillName} skill.`;
+
+        await invoke("send_prompt", {
+          conversationId,
+          message,
+        });
+      } catch (error) {
+        claudeStore.addLine("error", `Failed to invoke skill: ${error}`);
+        characterState.setTemporaryState("error", 3000);
+      }
+    },
+  },
+];
+
+export function parseSlashCommand(input: string): {
+  command: SlashCommand | null;
+  args: string;
+} {
+  const trimmed = input.trim();
+
+  if (!trimmed.startsWith("/")) {
+    return { command: null, args: "" };
+  }
+
+  const parts = trimmed.slice(1).split(/\s+/);
+  const commandName = parts[0]?.toLowerCase();
+  const args = parts.slice(1).join(" ");
+
+  const command = slashCommands.find((cmd) => cmd.name.toLowerCase() === commandName);
+
+  return { command: command || null, args };
+}
+
+export function getMatchingCommands(input: string): SlashCommand[] {
+  const trimmed = input.trim();
+
+  if (!trimmed.startsWith("/")) {
+    return [];
+  }
+
+  const partial = trimmed.slice(1).toLowerCase();
+
+  if (partial === "") {
+    return slashCommands;
+  }
+
+  return slashCommands.filter((cmd) => cmd.name.toLowerCase().startsWith(partial));
+}
+
+export function isSlashCommand(input: string): boolean {
+  return input.trim().startsWith("/");
+}

src/lib/components/AboutPanel.svelte

@@ -40,10 +40,12 @@
     tabindex="-1"
   >
     <div class="flex items-center justify-between mb-4">
-      <h2 id="about-title" class="text-xl font-semibold text-gray-100">About Hikari Desktop</h2>
+      <h2 id="about-title" class="text-xl font-semibold text-[var(--text-primary)]">
+        About Hikari Desktop
+      </h2>
       <button
         onclick={onClose}
-        class="p-1 text-gray-500 hover:text-gray-300 transition-colors"
+        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
         aria-label="Close"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -59,16 +61,16 @@
 
     <div class="space-y-4 text-sm">
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">What is Hikari Desktop?</h3>
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">What is Hikari Desktop?</h3>
-        <p class="text-gray-400">
+        <p class="text-[var(--text-secondary)]">
           Hikari Desktop is an AI-powered desktop assistant that brings Claude directly to your
           desktop. Built with love using Tauri, Svelte, and Rust for a fast, native experience.
         </p>
       </div>
 
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">Version</h3>
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">Version</h3>
-        <p class="text-gray-400 mb-1">
+        <p class="text-[var(--text-secondary)] mb-1">
           {appVersion || "Loading..."}
         </p>
         <button
@@ -80,7 +82,7 @@
       </div>
 
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">Source Code</h3>
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">Source Code</h3>
         <button
           onclick={() => openUrl(links.source)}
           class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
@@ -90,8 +92,8 @@
       </div>
 
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">Support & Community</h3>
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">Support & Community</h3>
-        <p class="text-gray-400 mb-1">Found a bug or have a suggestion?</p>
+        <p class="text-[var(--text-secondary)] mb-1">Found a bug or have a suggestion?</p>
         <button
           onclick={() => openUrl(links.discord)}
           class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
@@ -101,7 +103,7 @@
       </div>
 
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">Built with 💕 by</h3>
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">Built with 💕 by</h3>
         <button
           onclick={() => openUrl(links.website)}
           class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
@@ -111,8 +113,8 @@
       </div>
 
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">License</h3>
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">License</h3>
-        <p class="text-gray-400 mb-1">
+        <p class="text-[var(--text-secondary)] mb-1">
           This project is open source and available under our license terms.
         </p>
         <button
@@ -124,7 +126,7 @@
       </div>
 
       <div class="pt-4 mt-4 border-t border-[var(--border-color)]">
-        <p class="text-xs text-gray-500 text-center">
+        <p class="text-xs text-[var(--text-tertiary)] text-center">
           Copyright © {new Date().getFullYear()} Naomi Carrigan. All rights reserved.
         </p>
       </div>

src/lib/components/AnimeGirl.svelte

@@ -57,30 +57,34 @@
   }
 </script>
 
-<div class="anime-girl-container flex flex-col items-center justify-end h-full p-4">
+<div
-  <div class="character-frame relative {getBackgroundGlow()} w-full max-w-md">
+  class="anime-girl-container flex flex-col items-center justify-between h-full p-4 overflow-hidden"
-    <div class="sprite-container {getAnimationClass()}">
+>
+  <div
+    class="character-frame relative {getBackgroundGlow()} flex-1 flex items-center justify-center min-h-0"
+  >
+    <div class="sprite-container {getAnimationClass()} h-full flex items-center justify-center">
       <img
         src="/sprites/{info.spriteFile}"
         alt="Hikari - {info.label}"
-        class="character-sprite w-full h-auto object-contain"
+        class="character-sprite h-full w-auto max-w-full object-contain"
         onerror={(e) => {
           const target = e.currentTarget as HTMLImageElement;
           target.src = "/sprites/placeholder.svg";
         }}
       />
     </div>
+  </div>
 
-    <div class="state-indicator absolute -bottom-2 left-1/2 transform -translate-x-1/2">
+  <div class="state-indicator mt-2">
-      <div
+    <div
-        class="px-3 py-1 rounded-full text-xs font-medium bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[var(--accent-primary)]"
+      class="px-3 py-1 rounded-full text-xs font-medium bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[var(--accent-primary)]"
-      >
+    >
-        {info.label}
+      {info.label}
-      </div>
     </div>
   </div>
 
-  <div class="speech-bubble mt-4 max-w-xs">
+  <div class="speech-bubble mt-2 max-w-xs flex-shrink-0">
     <div
       class="relative bg-[var(--bg-secondary)] rounded-lg px-4 py-2 border border-[var(--border-color)]"
     >

src/lib/components/CloseTabConfirmModal.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  interface Props {
+    isOpen: boolean;
+    tabName: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+  }
+
+  const { isOpen, tabName, onConfirm, onCancel }: Props = $props();
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!isOpen) return;
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onConfirm();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      onCancel();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if isOpen}
+  <div
+    class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+    onclick={onCancel}
+    role="button"
+    tabindex="0"
+    onkeydown={(e) => e.key === " " && onCancel()}
+  >
+    <div
+      class="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg shadow-xl max-w-md w-full"
+      onclick={(e) => e.stopPropagation()}
+      onkeydown={(e) => e.stopPropagation()}
+      role="dialog"
+      aria-labelledby="confirm-title"
+      aria-describedby="confirm-message"
+      tabindex="-1"
+    >
+      <div class="p-6">
+        <div class="flex items-start gap-4">
+          <div
+            class="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center flex-shrink-0"
+          >
+            <svg
+              class="w-6 h-6 text-yellow-500"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              />
+            </svg>
+          </div>
+          <div class="flex-1">
+            <h3 id="confirm-title" class="text-lg font-semibold text-[var(--text-primary)] mb-1">
+              Close Connected Tab?
+            </h3>
+            <p id="confirm-message" class="text-sm text-[var(--text-secondary)]">
+              The tab "{tabName}" is currently connected to Claude. Are you sure you want to close
+              it? This will disconnect the session.
+            </p>
+          </div>
+        </div>
+
+        <div class="flex gap-3 mt-6 justify-end">
+          <button
+            onclick={onCancel}
+            class="px-4 py-2 text-sm font-medium text-gray-300 bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onclick={onConfirm}
+            class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors"
+          >
+            Close Tab
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  [role="dialog"] {
+    animation: slideIn 0.2s ease-out;
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+</style>

src/lib/components/ConfigSidebar.svelte

@@ -1,6 +1,15 @@
 <script lang="ts">
-  import { configStore, type HikariConfig, type Theme } from "$lib/stores/config";
+  import {
+    configStore,
+    type HikariConfig,
+    type Theme,
+    applyFontSize,
+    MIN_FONT_SIZE,
+    MAX_FONT_SIZE,
+    DEFAULT_FONT_SIZE,
+  } from "$lib/stores/config";
   import { claudeStore } from "$lib/stores/claude";
+  import { getCurrentWindow } from "@tauri-apps/api/window";
 
   let config: HikariConfig = $state({
     model: null,
@@ -13,6 +22,10 @@
     greeting_custom_prompt: null,
     notifications_enabled: true,
     notification_volume: 0.7,
+    always_on_top: false,
+    update_checks_enabled: true,
+    character_panel_width: null,
+    font_size: 14,
   });
 
   let isOpen = $state(false);
@@ -61,6 +74,7 @@
     saveError = null;
     try {
       await configStore.saveConfig(config);
+      configStore.closeSidebar();
     } catch {
       // Error is handled by the store
     } finally {
@@ -95,6 +109,13 @@
   function importFromSession() {
     config.auto_granted_tools = [...new Set([...config.auto_granted_tools, ...grantedTools])];
   }
+
+  async function handleAlwaysOnTopChange(enabled: boolean) {
+    config.always_on_top = enabled;
+    const window = getCurrentWindow();
+    await window.setAlwaysOnTop(enabled);
+    await configStore.updateConfig({ always_on_top: enabled });
+  }
 </script>
 
 <!-- Backdrop -->
@@ -121,7 +142,7 @@
       <h2 class="text-lg font-semibold text-[var(--text-primary)]">Settings</h2>
       <button
         onclick={configStore.closeSidebar}
-        class="p-1 text-gray-400 hover:text-white transition-colors"
+        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
         aria-label="Close settings"
       >
         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -149,7 +170,7 @@
 
       <!-- Model Selection -->
       <div class="mb-4">
-        <label for="model" class="block text-sm text-gray-400 mb-1">Model</label>
+        <label for="model" class="block text-sm text-[var(--text-secondary)] mb-1">Model</label>
         <select
           id="model"
           bind:value={config.model}
@@ -163,8 +184,8 @@
 
       <!-- API Key -->
       <div class="mb-4">
-        <label for="api-key" class="block text-sm text-gray-400 mb-1">
+        <label for="api-key" class="block text-sm text-[var(--text-secondary)] mb-1">
-          API Key <span class="text-gray-600">(optional override)</span>
+          API Key <span class="text-[var(--text-tertiary)]">(optional override)</span>
         </label>
         <div class="relative">
           <input
@@ -177,7 +198,7 @@
           <button
             type="button"
             onclick={() => (showApiKey = !showApiKey)}
-            class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
+            class="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
             aria-label={showApiKey ? "Hide API key" : "Show API key"}
           >
             {#if showApiKey}
@@ -211,7 +232,7 @@
 
       <!-- Custom Instructions -->
       <div class="mb-4">
-        <label for="instructions" class="block text-sm text-gray-400 mb-1"
+        <label for="instructions" class="block text-sm text-[var(--text-secondary)] mb-1"
           >Custom Instructions</label
         >
         <textarea
@@ -238,9 +259,9 @@
             bind:checked={config.greeting_enabled}
             class="w-4 h-4 rounded border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--accent-primary)] focus:ring-[var(--accent-primary)]"
           />
-          <span class="text-sm text-gray-300">Send greeting on connect</span>
+          <span class="text-sm text-[var(--text-primary)]">Send greeting on connect</span>
         </label>
-        <p class="text-xs text-gray-500 mt-1 ml-7">
+        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
           Automatically greet you when a session starts with time-based messages
         </p>
       </div>
@@ -248,8 +269,8 @@
       <!-- Custom Greeting Prompt -->
       {#if config.greeting_enabled}
         <div class="mb-4">
-          <label for="greeting-prompt" class="block text-sm text-gray-400 mb-1">
+          <label for="greeting-prompt" class="block text-sm text-[var(--text-secondary)] mb-1">
-            Custom Greeting Prompt <span class="text-gray-600">(optional)</span>
+            Custom Greeting Prompt <span class="text-[var(--text-tertiary)]">(optional)</span>
           </label>
           <textarea
             id="greeting-prompt"
@@ -268,8 +289,8 @@
         MCP Servers
       </h3>
       <div class="mb-2">
-        <label for="mcp-config" class="block text-sm text-gray-400 mb-1">
+        <label for="mcp-config" class="block text-sm text-[var(--text-secondary)] mb-1">
-          Server Configuration <span class="text-gray-600">(JSON)</span>
+          Server Configuration <span class="text-[var(--text-tertiary)]">(JSON)</span>
         </label>
         <textarea
           id="mcp-config"
@@ -286,14 +307,14 @@
       <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
         Auto-Granted Tools
       </h3>
-      <p class="text-xs text-gray-500 mb-3">
+      <p class="text-xs text-[var(--text-tertiary)] mb-3">
         These tools will be pre-approved for every session (no permission prompts).
       </p>
 
       <!-- Common tools checkboxes -->
       <div class="grid grid-cols-2 gap-2 mb-3">
         {#each commonTools as tool (tool)}
-          <label class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
+          <label class="flex items-center gap-2 text-sm text-[var(--text-primary)] cursor-pointer">
             <input
               type="checkbox"
               checked={config.auto_granted_tools.includes(tool)}
@@ -309,7 +330,7 @@
       {#if grantedTools.length > 0}
         <div class="mb-3">
           <div class="flex items-center justify-between mb-2">
-            <span class="text-xs text-gray-500">Session-granted tools:</span>
+            <span class="text-xs text-[var(--text-tertiary)]">Session-granted tools:</span>
             <button
               onclick={importFromSession}
               class="text-xs text-[var(--accent-primary)] hover:text-[var(--accent-secondary)] transition-colors"
@@ -332,7 +353,7 @@
       <!-- Custom tools list -->
       {#if config.auto_granted_tools.filter((t) => !commonTools.includes(t)).length > 0}
         <div class="mb-3">
-          <span class="text-xs text-gray-500 block mb-2">Custom tools:</span>
+          <span class="text-xs text-[var(--text-tertiary)] block mb-2">Custom tools:</span>
           <div class="flex flex-wrap gap-1">
             {#each config.auto_granted_tools.filter((t) => !commonTools.includes(t)) as tool (tool)}
               <span
@@ -341,7 +362,7 @@
                 {tool}
                 <button
                   onclick={() => removeTool(tool)}
-                  class="text-gray-500 hover:text-red-400"
+                  class="text-[var(--text-tertiary)] hover:text-red-400"
                   aria-label="Remove {tool}"
                 >
                   ×
@@ -376,23 +397,99 @@
       <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
         Appearance
       </h3>
-      <div class="flex gap-2">
+
-        <button
+      <!-- Theme Selection -->
-          onclick={() => handleThemeChange("dark")}
+      <div class="mb-4">
-          class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
+        <label class="block text-sm text-[var(--text-secondary)] mb-2">Theme</label>
-            ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
+        <div class="flex gap-2">
-            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-gray-400 hover:border-[var(--accent-primary)]'}"
+          <button
-        >
+            onclick={() => handleThemeChange("dark")}
-          Dark
+            class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
-        </button>
+              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
-        <button
+              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
-          onclick={() => handleThemeChange("light")}
+          >
-          class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
+            Dark
-            ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
+          </button>
-            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-gray-400 hover:border-[var(--accent-primary)]'}"
+          <button
-        >
+            onclick={() => handleThemeChange("light")}
-          Light
+            class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
-        </button>
+              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
+              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
+          >
+            Light
+          </button>
+        </div>
+      </div>
+
+      <!-- Font Size -->
+      <div class="mb-4">
+        <label for="font-size" class="block text-sm text-[var(--text-secondary)] mb-2">
+          Terminal Font Size
+        </label>
+        <div class="flex items-center gap-3">
+          <input
+            id="font-size"
+            type="range"
+            bind:value={config.font_size}
+            oninput={() => applyFontSize(config.font_size)}
+            min={MIN_FONT_SIZE}
+            max={MAX_FONT_SIZE}
+            step="1"
+            class="flex-1 h-2 bg-[var(--bg-primary)] rounded-lg appearance-none cursor-pointer"
+          />
+          <span class="text-sm text-gray-300 w-12 text-right">{config.font_size}px</span>
+          <button
+            onclick={() => {
+              config.font_size = DEFAULT_FONT_SIZE;
+              applyFontSize(DEFAULT_FONT_SIZE);
+            }}
+            class="px-2 py-1 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:border-[var(--accent-primary)] text-[var(--text-secondary)] transition-colors"
+            title="Reset to default (14px)"
+          >
+            Reset
+          </button>
+        </div>
+        <p class="text-xs text-[var(--text-tertiary)] mt-1">
+          Use Ctrl++ / Ctrl+- to quickly adjust, Ctrl+0 to reset
+        </p>
+      </div>
+    </section>
+
+    <!-- Window Section -->
+    <section class="mb-6">
+      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
+        Window
+      </h3>
+
+      <!-- Always on Top Toggle -->
+      <div class="mb-4">
+        <label class="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={config.always_on_top}
+            onchange={(e) => handleAlwaysOnTopChange(e.currentTarget.checked)}
+            class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
+          />
+          <span class="text-sm text-[var(--text-primary)]">Always on top</span>
+        </label>
+        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
+          Keep the window above other windows
+        </p>
+      </div>
+
+      <!-- Update Checks Toggle -->
+      <div class="mb-4">
+        <label class="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            bind:checked={config.update_checks_enabled}
+            class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
+          />
+          <span class="text-sm text-[var(--text-primary)]">Check for updates on startup</span>
+        </label>
+        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
+          Notify when a new version is available
+        </p>
       </div>
     </section>
 
@@ -410,13 +507,13 @@
             bind:checked={config.notifications_enabled}
             class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
           />
-          <span class="text-sm text-gray-300">Enable sound notifications</span>
+          <span class="text-sm text-[var(--text-primary)]">Enable sound notifications</span>
         </label>
       </div>
 
       <!-- Volume Control -->
       <div class="mb-4">
-        <label for="notification-volume" class="block text-sm text-gray-400 mb-2">
+        <label for="notification-volume" class="block text-sm text-[var(--text-secondary)] mb-2">
           Notification Volume
         </label>
         <div class="flex items-center gap-3">
@@ -436,7 +533,7 @@
         </div>
       </div>
 
-      <div class="text-xs text-gray-500">
+      <div class="text-xs text-[var(--text-tertiary)]">
         Sound notifications will play when I complete tasks, encounter errors, or need permissions.
       </div>
     </section>

src/lib/components/ConversationTabs.svelte

@@ -3,49 +3,35 @@
   import { onMount } from "svelte";
   import type { Conversation } from "$lib/stores/conversations";
   import { SvelteMap } from "svelte/reactivity";
+  import CloseTabConfirmModal from "./CloseTabConfirmModal.svelte";
 
-  let conversations: Map<string, Conversation> = new Map();
+  // Use store subscriptions with $ syntax
-  let activeConversationId: string | null = null;
+  const conversations = $derived(claudeStore.conversations);
-  let editingTabId: string | null = null;
+  const activeConversationId = $derived(claudeStore.activeConversationId);
-  let editingName = "";
 
-  // Track which conversation actually has the Claude connection
+  let editingTabId = $state<string | null>(null);
-  let connectedConversationId: string | null = null;
+  let editingName = $state("");
 
   // Track last seen message count for each conversation
   let lastSeenMessageCount = new SvelteMap<string, number>();
 
-  claudeStore.conversations.subscribe((convs) => {
+  // Confirmation modal state
-    conversations = convs;
+  let showConfirmModal = $state(false);
+  let tabToClose = $state<string | null>(null);
+  let tabToCloseName = $state("");
 
-    // Update the last seen count for the active conversation
+  // Update last seen count when active conversation changes
-    if (activeConversationId) {
+  $effect(() => {
-      const activeConv = convs.get(activeConversationId);
+    if ($activeConversationId) {
+      const activeConv = $conversations.get($activeConversationId);
       if (activeConv) {
-        lastSeenMessageCount.set(activeConversationId, activeConv.terminalLines.length);
+        lastSeenMessageCount.set($activeConversationId, activeConv.terminalLines.length);
+        // Trigger reactivity
+        lastSeenMessageCount = lastSeenMessageCount;
       }
     }
   });
 
-  claudeStore.activeConversationId.subscribe((id) => {
-    activeConversationId = id;
-  });
-
-  // Find the connected conversation
-  $: {
-    let foundConnected = false;
-    for (const [id, conv] of conversations) {
-      if (conv.connectionStatus === "connected" || conv.connectionStatus === "connecting") {
-        connectedConversationId = id;
-        foundConnected = true;
-        break;
-      }
-    }
-    if (!foundConnected) {
-      connectedConversationId = null;
-    }
-  }
-
   function createNewTab() {
     claudeStore.createConversation();
   }
@@ -57,7 +43,7 @@
     await claudeStore.switchConversation(id);
 
     // Mark messages as seen when switching to this tab
-    const conv = conversations.get(id);
+    const conv = $conversations.get(id);
     if (conv) {
       lastSeenMessageCount.set(id, conv.terminalLines.length);
       // Trigger reactivity
@@ -67,11 +53,35 @@
 
   function deleteTab(id: string, event: MouseEvent) {
     event.stopPropagation();
-    if (conversations.size > 1) {
+    if ($conversations.size > 1) {
-      claudeStore.deleteConversation(id);
+      const conversation = $conversations.get(id);
+      if (conversation && conversation.connectionStatus === "connected") {
+        // Show confirmation modal for connected tabs
+        tabToClose = id;
+        tabToCloseName = conversation.name;
+        showConfirmModal = true;
+      } else {
+        // Close disconnected tabs immediately
+        claudeStore.deleteConversation(id);
+      }
     }
   }
 
+  function confirmCloseTab() {
+    if (tabToClose) {
+      claudeStore.deleteConversation(tabToClose);
+    }
+    showConfirmModal = false;
+    tabToClose = null;
+    tabToCloseName = "";
+  }
+
+  function cancelCloseTab() {
+    showConfirmModal = false;
+    tabToClose = null;
+    tabToCloseName = "";
+  }
+
   function startEditing(id: string, name: string, event: MouseEvent) {
     event.stopPropagation();
     editingTabId = id;
@@ -105,7 +115,7 @@
   }
 
   function hasUnreadMessages(id: string, conversation: Conversation): boolean {
-    if (id === activeConversationId) return false; // Active tab never has unread
+    if (id === $activeConversationId) return false; // Active tab never has unread
     const lastSeen = lastSeenMessageCount.get(id) || 0;
     return conversation.terminalLines.length > lastSeen;
   }
@@ -116,6 +126,8 @@
     } else if (event.key === "Escape") {
       editingTabId = null;
       editingName = "";
+    } else if (event.key === " ") {
+      event.stopPropagation();
     }
   }
 
@@ -137,15 +149,24 @@
       // Ctrl/Cmd + W: Close current tab
       else if ((event.ctrlKey || event.metaKey) && event.key === "w") {
         event.preventDefault();
-        if (activeConversationId && conversations.size > 1) {
+        if ($activeConversationId && $conversations.size > 1) {
-          claudeStore.deleteConversation(activeConversationId);
+          const conversation = $conversations.get($activeConversationId);
+          if (conversation && conversation.connectionStatus === "connected") {
+            // Show confirmation modal for connected tabs
+            tabToClose = $activeConversationId;
+            tabToCloseName = conversation.name;
+            showConfirmModal = true;
+          } else {
+            // Close disconnected tabs immediately
+            claudeStore.deleteConversation($activeConversationId);
+          }
         }
       }
       // Ctrl/Cmd + Tab: Next tab
       else if ((event.ctrlKey || event.metaKey) && event.key === "Tab" && !event.shiftKey) {
         event.preventDefault();
-        const tabs = Array.from(conversations.keys());
+        const tabs = Array.from($conversations.keys());
-        const currentIndex = tabs.findIndex((id) => id === activeConversationId);
+        const currentIndex = tabs.findIndex((id) => id === $activeConversationId);
         if (currentIndex !== -1) {
           const nextIndex = (currentIndex + 1) % tabs.length;
           claudeStore.switchConversation(tabs[nextIndex]);
@@ -154,8 +175,8 @@
       // Ctrl/Cmd + Shift + Tab: Previous tab
       else if ((event.ctrlKey || event.metaKey) && event.key === "Tab" && event.shiftKey) {
         event.preventDefault();
-        const tabs = Array.from(conversations.keys());
+        const tabs = Array.from($conversations.keys());
-        const currentIndex = tabs.findIndex((id) => id === activeConversationId);
+        const currentIndex = tabs.findIndex((id) => id === $activeConversationId);
         if (currentIndex !== -1) {
           const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
           claudeStore.switchConversation(tabs[prevIndex]);
@@ -171,17 +192,17 @@
 <div
   class="terminal-tabs flex items-center gap-1 px-2 py-1 bg-[var(--bg-secondary)] border-b border-[var(--border-color)]"
 >
-  {#each Array.from(conversations.entries()) as [id, conversation] (id)}
+  {#each Array.from($conversations.entries()) as [id, conversation] (id)}
     <div
       class="tab-item group relative flex items-center px-3 py-1.5 rounded-t cursor-pointer transition-all
-        {id === activeConversationId
+        {id === $activeConversationId
         ? 'bg-[var(--bg-terminal)] text-[var(--text-primary)] border-t border-l border-r border-[var(--border-color)]'
         : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:bg-[var(--bg-terminal)]/50'}"
       onclick={() => switchTab(id)}
       onkeydown={(e) => handleTabKeydown(id, e)}
       role="tab"
       tabindex={0}
-      aria-selected={id === activeConversationId}
+      aria-selected={id === $activeConversationId}
     >
       {#if editingTabId === id}
         <input
@@ -196,37 +217,26 @@
         <div class="flex items-center gap-2">
           <div
             class="w-2 h-2 rounded-full {getConnectionStatusColor(conversation.connectionStatus)}"
-            title="Connection: {conversation.connectionStatus}{id !== connectedConversationId &&
+            title="Connection: {conversation.connectionStatus}"
-            connectedConversationId
-              ? ' (Another tab is connected)'
-              : ''}"
           ></div>
           <span
-            class="text-sm pr-6 max-w-[150px] truncate"
+            class="text-sm pr-2 max-w-[150px] truncate"
             ondblclick={(e) => startEditing(id, conversation.name, e)}
             role="button"
             tabindex={-1}
           >
             {conversation.name}
           </span>
-          {#if id !== activeConversationId && id === connectedConversationId}
-            <span
-              class="text-xs text-[var(--text-tertiary)]"
-              title="This tab has the Claude connection"
-            >
-              (connected)
-            </span>
-          {/if}
           {#if hasUnreadMessages(id, conversation)}
             <div
-              class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-blue-500 animate-pulse"
+              class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-blue-500 animate-pulse pointer-events-none"
               title="New messages"
             ></div>
           {/if}
         </div>
       {/if}
 
-      {#if conversations.size > 1}
+      {#if $conversations.size > 1}
         <button
           onclick={(e) => deleteTab(id, e)}
           class="absolute right-1 top-1/2 -translate-y-1/2 w-4 h-4 flex items-center justify-center rounded hover:bg-[var(--bg-secondary)] opacity-0 group-hover:opacity-100 transition-opacity"
@@ -268,6 +278,13 @@
   </button>
 </div>
 
+<CloseTabConfirmModal
+  isOpen={showConfirmModal}
+  tabName={tabToCloseName}
+  onConfirm={confirmCloseTab}
+  onCancel={cancelCloseTab}
+/>
+
 <style>
   .terminal-tabs {
     min-height: 36px;

src/lib/components/HelpPanel.svelte

@@ -43,14 +43,7 @@
         "🔒 Grant tool permissions as needed for security",
         "📌 Pin important conversations for quick access",
         "🎨 Customize your theme and preferences in Settings",
-      ],
+        "⌨️ Check the keyboard icon for available shortcuts",
-    },
-    {
-      title: "Keyboard Shortcuts",
-      items: [
-        "Ctrl/Cmd + Enter: Send message",
-        "Ctrl/Cmd + K: Clear chat (when supported)",
-        "Escape: Close modals and panels",
       ],
     },
   ];
@@ -72,10 +65,12 @@
     tabindex="-1"
   >
     <div class="flex items-center justify-between p-6 pb-4 border-b border-[var(--border-color)]">
-      <h2 id="help-title" class="text-xl font-semibold text-gray-100">How to Use Hikari Desktop</h2>
+      <h2 id="help-title" class="text-xl font-semibold text-[var(--text-primary)]">
+        How to Use Hikari Desktop
+      </h2>
       <button
         onclick={onClose}
-        class="p-1 text-gray-500 hover:text-gray-300 transition-colors"
+        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
         aria-label="Close"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -92,8 +87,8 @@
     <div class="overflow-y-auto flex-1 p-6 space-y-6">
       {#each sections as section (section.title)}
         <div>
-          <h3 class="font-medium text-gray-200 mb-3">{section.title}</h3>
+          <h3 class="font-medium text-[var(--text-primary)] mb-3">{section.title}</h3>
-          <ul class="space-y-2 text-sm text-gray-400">
+          <ul class="space-y-2 text-sm text-[var(--text-secondary)]">
             {#each section.items as item (item)}
               <li class="flex items-start">
                 <span class="text-[var(--accent-primary)] mr-2 mt-0.5">•</span>
@@ -105,7 +100,7 @@
       {/each}
 
       <div class="pt-4 border-t border-[var(--border-color)]">
-        <p class="text-sm text-gray-500">
+        <p class="text-sm text-[var(--text-tertiary)]">
           <strong>Need more help?</strong> Join our Discord community for support and updates!
         </p>
       </div>

src/lib/components/HighlightedText.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  export let content: string;
+  export let searchQuery: string;
+
+  interface TextPart {
+    text: string;
+    isMatch: boolean;
+  }
+
+  function getHighlightedParts(text: string, query: string): TextPart[] {
+    if (!query) {
+      return [{ text, isMatch: false }];
+    }
+
+    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const regex = new RegExp(`(${escapedQuery})`, "gi");
+    const parts: TextPart[] = [];
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    while ((match = regex.exec(text)) !== null) {
+      // Add non-matching text before the match
+      if (match.index > lastIndex) {
+        parts.push({
+          text: text.slice(lastIndex, match.index),
+          isMatch: false,
+        });
+      }
+
+      // Add the matching text
+      parts.push({
+        text: match[1],
+        isMatch: true,
+      });
+
+      lastIndex = regex.lastIndex;
+    }
+
+    // Add any remaining text after the last match
+    if (lastIndex < text.length) {
+      parts.push({
+        text: text.slice(lastIndex),
+        isMatch: false,
+      });
+    }
+
+    return parts;
+  }
+
+  $: parts = getHighlightedParts(content, searchQuery);
+</script>
+
+<span class="whitespace-pre-wrap">
+  {#each parts as part, index (index)}
+    {#if part.isMatch}
+      <mark class="search-highlight">{part.text}</mark>
+    {:else}
+      {part.text}
+    {/if}
+  {/each}
+</span>

src/lib/components/InputBar.svelte

@@ -13,13 +13,96 @@
     clearHistoryRestore,
   } from "$lib/stores/historyRestore";
   import MessageModeSelector from "$lib/components/MessageModeSelector.svelte";
+  import SlashCommandMenu from "$lib/components/SlashCommandMenu.svelte";
   import { getCurrentMode } from "$lib/stores/messageMode";
   import { formatMessageWithMode } from "$lib/types/messageMode";
+  import {
+    parseSlashCommand,
+    getMatchingCommands,
+    isSlashCommand,
+    type SlashCommand,
+  } from "$lib/commands/slashCommands";
+
+  const INPUT_HISTORY_KEY = "hikari-input-history";
+  const MAX_HISTORY_SIZE = 100;
 
   let inputValue = $state("");
   let isSubmitting = $state(false);
   let isConnected = $state(false);
   let isProcessing = $state(false);
+  let showCommandMenu = $state(false);
+  let matchingCommands = $state<SlashCommand[]>([]);
+  let selectedCommandIndex = $state(0);
+
+  // Input history state
+  let inputHistory = $state<string[]>([]);
+  let historyIndex = $state(-1);
+  let tempInput = $state("");
+  let userHasTyped = $state(false); // Track if user manually typed (vs history navigation)
+
+  // Textarea resize state
+  let textareaHeight = $state(48);
+  const MIN_HEIGHT = 48;
+  const MAX_HEIGHT = 200;
+  let isResizing = $state(false);
+  let startY = 0;
+  let startHeight = 0;
+
+  function handleResizeStart(event: MouseEvent) {
+    isResizing = true;
+    startY = event.clientY;
+    startHeight = textareaHeight;
+    document.addEventListener("mousemove", handleResizeMove);
+    document.addEventListener("mouseup", handleResizeEnd);
+    event.preventDefault();
+  }
+
+  function handleResizeMove(event: MouseEvent) {
+    if (!isResizing) return;
+    // Dragging up (negative deltaY) should increase height
+    const deltaY = startY - event.clientY;
+    const newHeight = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startHeight + deltaY));
+    textareaHeight = newHeight;
+  }
+
+  function handleResizeEnd() {
+    isResizing = false;
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", handleResizeEnd);
+  }
+
+  // Load history from localStorage on init
+  function loadHistory(): string[] {
+    try {
+      const stored = localStorage.getItem(INPUT_HISTORY_KEY);
+      return stored ? JSON.parse(stored) : [];
+    } catch {
+      return [];
+    }
+  }
+
+  function saveHistory(history: string[]) {
+    try {
+      localStorage.setItem(INPUT_HISTORY_KEY, JSON.stringify(history));
+    } catch {
+      // Ignore storage errors
+    }
+  }
+
+  function addToHistory(input: string) {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+
+    // Don't add duplicates of the most recent entry
+    if (inputHistory.length > 0 && inputHistory[0] === trimmed) return;
+
+    // Add to front of history
+    inputHistory = [trimmed, ...inputHistory.slice(0, MAX_HISTORY_SIZE - 1)];
+    saveHistory(inputHistory);
+  }
+
+  // Initialize history on mount
+  inputHistory = loadHistory();
 
   claudeStore.connectionStatus.subscribe((status) => {
     isConnected = status === "connected";
@@ -29,11 +112,79 @@
     isProcessing = processing;
   });
 
+  function handleInputChange() {
+    // If input is empty, allow history navigation again
+    // Otherwise, mark that user has manually typed
+    if (inputValue === "") {
+      userHasTyped = false;
+    } else {
+      userHasTyped = true;
+    }
+    // Reset history navigation when user types
+    historyIndex = -1;
+    tempInput = "";
+
+    if (isSlashCommand(inputValue)) {
+      matchingCommands = getMatchingCommands(inputValue);
+      showCommandMenu = matchingCommands.length > 0;
+      selectedCommandIndex = 0;
+    } else {
+      showCommandMenu = false;
+      matchingCommands = [];
+    }
+  }
+
+  function selectCommand(command: SlashCommand) {
+    inputValue = `/${command.name} `;
+    showCommandMenu = false;
+    matchingCommands = [];
+  }
+
+  async function executeSlashCommand(): Promise<boolean> {
+    const { command, args } = parseSlashCommand(inputValue);
+    if (command) {
+      inputValue = "";
+      showCommandMenu = false;
+      matchingCommands = [];
+      await command.execute(args);
+      return true;
+    }
+    return false;
+  }
+
   async function handleSubmit(event: Event) {
     event.preventDefault();
 
     const message = inputValue.trim();
-    if (!message || isSubmitting || !isConnected) return;
+    if (!message || isSubmitting) return;
+
+    // Check for slash commands first (these work even when disconnected)
+    if (isSlashCommand(message)) {
+      // Add slash commands to history too
+      addToHistory(message);
+      historyIndex = -1;
+      tempInput = "";
+      userHasTyped = false;
+
+      const wasCommand = await executeSlashCommand();
+      if (wasCommand) return;
+      // If it started with / but wasn't a valid command, show error
+      claudeStore.addLine(
+        "error",
+        `Unknown command: ${message.split(" ")[0]}. Type /help for available commands.`
+      );
+      inputValue = "";
+      return;
+    }
+
+    // Regular messages require connection
+    if (!isConnected) return;
+
+    // Add to history before clearing
+    addToHistory(message);
+    historyIndex = -1;
+    tempInput = "";
+    userHasTyped = false;
 
     isSubmitting = true;
     inputValue = "";
@@ -139,6 +290,62 @@ User: ${formattedMessage}`;
   }
 
   function handleKeyDown(event: KeyboardEvent) {
+    // Handle command menu navigation
+    if (showCommandMenu && matchingCommands.length > 0) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        selectedCommandIndex = (selectedCommandIndex + 1) % matchingCommands.length;
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        selectedCommandIndex =
+          (selectedCommandIndex - 1 + matchingCommands.length) % matchingCommands.length;
+        return;
+      }
+      if (event.key === "Tab") {
+        event.preventDefault();
+        const selected = matchingCommands[selectedCommandIndex];
+        if (selected) {
+          selectCommand(selected);
+        }
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        showCommandMenu = false;
+        return;
+      }
+    }
+
+    // Handle input history navigation (when command menu is closed AND user hasn't typed)
+    // If user has typed something, let arrow keys navigate the cursor instead
+    if (event.key === "ArrowUp" && inputHistory.length > 0 && !userHasTyped) {
+      event.preventDefault();
+      if (historyIndex === -1) {
+        // Save current input before navigating history
+        tempInput = inputValue;
+      }
+      if (historyIndex < inputHistory.length - 1) {
+        historyIndex++;
+        inputValue = inputHistory[historyIndex];
+      }
+      return;
+    }
+
+    if (event.key === "ArrowDown" && historyIndex >= 0 && !userHasTyped) {
+      event.preventDefault();
+      historyIndex--;
+      if (historyIndex === -1) {
+        // Restore the temp input when going back to current
+        inputValue = tempInput;
+        userHasTyped = false; // Reset since we're back to empty/temp state
+      } else {
+        inputValue = inputHistory[historyIndex];
+      }
+      return;
+    }
+
     if (event.key === "Enter" && !event.shiftKey) {
       handleSubmit(event);
     }
@@ -150,49 +357,57 @@ User: ${formattedMessage}`;
     <MessageModeSelector />
   </div>
 
-  <div class="input-row flex gap-3 items-end">
+  <div class="input-row">
-    <div class="flex-1 relative">
+    <div class="textarea-wrapper">
+      <SlashCommandMenu
+        commands={matchingCommands}
+        selectedIndex={selectedCommandIndex}
+        onSelect={selectCommand}
+      />
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="resize-handle" onmousedown={handleResizeStart} title="Drag to resize"></div>
       <textarea
         bind:value={inputValue}
         onkeydown={handleKeyDown}
-        placeholder={isConnected ? "Ask Hikari anything..." : "Connect to Claude first..."}
+        oninput={handleInputChange}
-        disabled={!isConnected || isSubmitting}
+        placeholder={isConnected
+          ? "Ask Hikari anything... (type / for commands)"
+          : "Connect to Claude first..."}
+        disabled={isSubmitting}
         rows={1}
+        style="height: {textareaHeight}px; font-size: var(--terminal-font-size, 14px);"
         class="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-color)]
              rounded-lg text-[var(--text-primary)] placeholder-gray-500 resize-none
              focus:outline-none focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]
-             disabled:opacity-50 disabled:cursor-not-allowed
+             disabled:opacity-50 disabled:cursor-not-allowed"
-             transition-all duration-200"
       ></textarea>
     </div>
 
-    {#if isProcessing}
+    <div class="button-wrapper">
-      <button
+      {#if isProcessing}
-        type="button"
+        <button
-        onclick={handleInterrupt}
+          type="button"
-        class="px-6 py-3 bg-red-600 hover:bg-red-700
+          onclick={handleInterrupt}
-             text-white font-medium rounded-lg
+          class="send-button bg-red-600 hover:bg-red-700"
-             transition-all duration-200 transform hover:scale-105 active:scale-95"
+          title="Interrupt the current response (Ctrl+C)"
-        title="Interrupt the current response (Ctrl+C)"
+        >
-      >
+          <span class="font-bold">■</span> Stop
-        <span class="font-bold">■</span> Stop
+        </button>
-      </button>
+      {:else}
-    {:else}
+        <button
-      <button
+          type="submit"
-        type="submit"
+          disabled={!isConnected || isSubmitting || !inputValue.trim()}
-        disabled={!isConnected || isSubmitting || !inputValue.trim()}
+          class="send-button bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)]
-        class="px-6 py-3 bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)]
+               disabled:opacity-50 disabled:cursor-not-allowed"
-             text-white font-medium rounded-lg
+        >
-             disabled:opacity-50 disabled:cursor-not-allowed
+          {#if isSubmitting}
-             transition-all duration-200 transform hover:scale-105 active:scale-95"
+            <span class="inline-block animate-spin">⏳</span>
-      >
+          {:else}
-        {#if isSubmitting}
+            Send
-          <span class="inline-block animate-spin">⏳</span>
+          {/if}
-        {:else}
+        </button>
-          Send
+      {/if}
-        {/if}
+    </div>
-      </button>
-    {/if}
   </div>
 </form>
 
@@ -214,4 +429,61 @@ User: ${formattedMessage}`;
     gap: 12px;
     align-items: flex-end;
   }
+
+  .textarea-wrapper {
+    flex: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .resize-handle {
+    height: 6px;
+    cursor: ns-resize;
+    background: transparent;
+    border-radius: 3px;
+    margin-bottom: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .resize-handle::before {
+    content: "";
+    width: 40px;
+    height: 3px;
+    background: var(--border-color);
+    border-radius: 2px;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+  }
+
+  .resize-handle:hover::before {
+    opacity: 1;
+    background: var(--accent-primary);
+  }
+
+  .button-wrapper {
+    display: flex;
+    align-items: flex-end;
+    height: 100%;
+  }
+
+  .send-button {
+    padding: 0 24px;
+    height: 48px;
+    color: white;
+    font-weight: 500;
+    border-radius: 8px;
+    transition: all 0.2s;
+    white-space: nowrap;
+  }
+
+  .send-button:hover:not(:disabled) {
+    transform: scale(1.05);
+  }
+
+  .send-button:active:not(:disabled) {
+    transform: scale(0.95);
+  }
 </style>

src/lib/components/KeyboardShortcutsModal.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+  interface Props {
+    onClose: () => void;
+  }
+
+  const { onClose }: Props = $props();
+
+  const shortcuts = [
+    {
+      category: "General",
+      items: [
+        { keys: ["Escape"], description: "Close modals and panels" },
+        { keys: ["Ctrl", "L"], description: "Clear the terminal" },
+        { keys: ["Ctrl", ","], description: "Open settings" },
+      ],
+    },
+    {
+      category: "Chat",
+      items: [
+        { keys: ["Enter"], description: "Send message" },
+        { keys: ["Shift", "Enter"], description: "New line in message" },
+        { keys: ["Ctrl", "C"], description: "Interrupt/stop response" },
+        { keys: ["↑"], description: "Previous input from history" },
+        { keys: ["↓"], description: "Next input from history" },
+      ],
+    },
+    {
+      category: "Slash Commands",
+      items: [
+        { keys: ["↑", "↓"], description: "Navigate command menu" },
+        { keys: ["Tab"], description: "Complete selected command" },
+        { keys: ["Escape"], description: "Close command menu" },
+      ],
+    },
+    {
+      category: "Permission Prompts",
+      items: [
+        { keys: ["Enter"], description: "Allow & reconnect" },
+        { keys: ["Escape"], description: "Dismiss" },
+      ],
+    },
+  ];
+</script>
+
+<div
+  class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+  onclick={onClose}
+  role="button"
+  tabindex="0"
+  onkeydown={(e) => e.key === "Escape" && onClose()}
+>
+  <div
+    class="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg shadow-xl max-w-lg w-full max-h-[80vh] overflow-hidden flex flex-col"
+    onclick={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}
+    role="dialog"
+    aria-labelledby="shortcuts-title"
+    tabindex="-1"
+  >
+    <div class="flex items-center justify-between p-6 pb-4 border-b border-[var(--border-color)]">
+      <div class="flex items-center gap-3">
+        <div
+          class="w-8 h-8 rounded-lg bg-[var(--accent-primary)]/20 flex items-center justify-center"
+        >
+          <svg
+            class="w-5 h-5 text-[var(--accent-primary)]"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 3C10.22 3 8.47 3.23 6.86 3.68A2 2 0 005 5.57V18.43a2 2 0 001.86 1.89C8.47 20.77 10.22 21 12 21s3.53-.23 5.14-.68A2 2 0 0019 18.43V5.57a2 2 0 00-1.86-1.89C15.53 3.23 13.78 3 12 3z"
+            />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M8 7h.01M12 7h.01M16 7h.01M8 11h.01M12 11h.01M16 11h.01M8 15h8"
+            />
+          </svg>
+        </div>
+        <h2 id="shortcuts-title" class="text-xl font-semibold text-[var(--text-primary)]">
+          Keyboard Shortcuts
+        </h2>
+      </div>
+      <button
+        onclick={onClose}
+        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+        aria-label="Close"
+      >
+        <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="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>
+
+    <div class="overflow-y-auto flex-1 p-6 space-y-6">
+      {#each shortcuts as section (section.category)}
+        <div>
+          <h3
+            class="text-sm font-medium text-[var(--text-secondary)] uppercase tracking-wider mb-3"
+          >
+            {section.category}
+          </h3>
+          <div class="space-y-2">
+            {#each section.items as item (item.description)}
+              <div
+                class="flex items-center justify-between py-2 px-3 bg-[var(--bg-secondary)] rounded-lg"
+              >
+                <span class="text-sm text-[var(--text-primary)]">{item.description}</span>
+                <div class="flex items-center gap-1">
+                  {#each item.keys as key, i (key)}
+                    {#if i > 0}
+                      <span class="text-[var(--text-secondary)] text-xs">+</span>
+                    {/if}
+                    <kbd
+                      class="px-2 py-1 text-xs font-mono bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-[var(--text-primary)] shadow-sm min-w-[24px] text-center"
+                    >
+                      {key}
+                    </kbd>
+                  {/each}
+                </div>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  [role="dialog"] {
+    animation: slideIn 0.2s ease-out;
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  .overflow-y-auto {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-color) transparent;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-thumb {
+    background-color: var(--border-color);
+    border-radius: 4px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background-color: var(--accent-primary);
+  }
+</style>

src/lib/components/Markdown.svelte

@@ -0,0 +1,352 @@
+<script lang="ts">
+  import { marked } from "marked";
+  import hljs from "highlight.js";
+  import { onMount } from "svelte";
+  import { openUrl } from "@tauri-apps/plugin-opener";
+
+  interface Props {
+    content: string;
+    searchQuery?: string;
+  }
+
+  let { content, searchQuery = "" }: Props = $props();
+  let containerElement: HTMLDivElement;
+
+  const renderer = new marked.Renderer();
+
+  renderer.code = ({ text, lang }) => {
+    const language = lang && hljs.getLanguage(lang) ? lang : "plaintext";
+    const highlighted = hljs.highlight(text, { language }).value;
+    return `<pre class="hljs-code-block"><code class="hljs language-${language}">${highlighted}</code></pre>`;
+  };
+
+  renderer.codespan = ({ text }) => {
+    return `<code class="hljs-inline">${text}</code>`;
+  };
+
+  marked.setOptions({
+    renderer,
+    gfm: true,
+    breaks: true,
+  });
+
+  function processSpoilers(html: string): string {
+    const codeBlockPlaceholders: string[] = [];
+
+    // Temporarily replace code blocks and inline code with placeholders
+    let processed = html.replace(/<(pre|code)[^>]*>[\s\S]*?<\/\1>/gi, (match) => {
+      codeBlockPlaceholders.push(match);
+      return `__CODE_PLACEHOLDER_${codeBlockPlaceholders.length - 1}__`;
+    });
+
+    // Apply spoiler transformation only to non-code content
+    processed = processed.replace(
+      /\|\|(.+?)\|\|/g,
+      '<span class="spoiler" role="button" tabindex="0">$1</span>'
+    );
+
+    // Restore code blocks
+    processed = processed.replace(/__CODE_PLACEHOLDER_(\d+)__/g, (_, index) => {
+      return codeBlockPlaceholders[parseInt(index)];
+    });
+
+    return processed;
+  }
+
+  function highlightSearchMatches(html: string, query: string): string {
+    if (!query) return html;
+
+    const codeBlockPlaceholders: string[] = [];
+    const tagPlaceholders: string[] = [];
+
+    // Temporarily replace code blocks with placeholders (don't highlight in code)
+    let processed = html.replace(/<(pre|code)[^>]*>[\s\S]*?<\/\1>/gi, (match) => {
+      codeBlockPlaceholders.push(match);
+      return `__CODE_SEARCH_PLACEHOLDER_${codeBlockPlaceholders.length - 1}__`;
+    });
+
+    // Temporarily replace all HTML tags with placeholders
+    processed = processed.replace(/<[^>]+>/g, (match) => {
+      tagPlaceholders.push(match);
+      return `__TAG_PLACEHOLDER_${tagPlaceholders.length - 1}__`;
+    });
+
+    // Apply search highlighting to text content
+    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const regex = new RegExp(`(${escapedQuery})`, "gi");
+    processed = processed.replace(regex, '<mark class="search-highlight">$1</mark>');
+
+    // Restore HTML tags
+    processed = processed.replace(/__TAG_PLACEHOLDER_(\d+)__/g, (_, index) => {
+      return tagPlaceholders[parseInt(index)];
+    });
+
+    // Restore code blocks
+    processed = processed.replace(/__CODE_SEARCH_PLACEHOLDER_(\d+)__/g, (_, index) => {
+      return codeBlockPlaceholders[parseInt(index)];
+    });
+
+    return processed;
+  }
+
+  function renderMarkdown(text: string): string {
+    try {
+      const html = marked.parse(text) as string;
+      const withSpoilers = processSpoilers(html);
+      return highlightSearchMatches(withSpoilers, searchQuery);
+    } catch {
+      return text;
+    }
+  }
+
+  function handleSpoilerClick(event: Event) {
+    const target = event.target as HTMLElement;
+    if (target.classList.contains("spoiler")) {
+      target.classList.toggle("revealed");
+    }
+  }
+
+  function handleSpoilerKeydown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+    if (target.classList.contains("spoiler") && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      target.classList.toggle("revealed");
+    }
+  }
+
+  function handleLinkClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const anchor = target.closest("a");
+    if (anchor?.href) {
+      event.preventDefault();
+      openUrl(anchor.href);
+    }
+  }
+
+  onMount(() => {
+    if (containerElement) {
+      containerElement.querySelectorAll("pre code:not(.hljs)").forEach((block) => {
+        hljs.highlightElement(block as HTMLElement);
+      });
+    }
+  });
+</script>
+
+<div
+  bind:this={containerElement}
+  class="markdown-content"
+  onclick={(e) => {
+    handleSpoilerClick(e);
+    handleLinkClick(e);
+  }}
+  onkeydown={handleSpoilerKeydown}
+  role="presentation"
+>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown rendering requires @html; content is from Claude API -->
+  {@html renderMarkdown(content)}
+</div>
+
+<style>
+  .markdown-content {
+    line-height: 1.6;
+  }
+
+  .markdown-content :global(p) {
+    margin: 0.5em 0;
+  }
+
+  .markdown-content :global(p:first-child) {
+    margin-top: 0;
+  }
+
+  .markdown-content :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .markdown-content :global(.hljs-code-block) {
+    background: var(--bg-code, #1e1e2e);
+    border-radius: 6px;
+    padding: 1em;
+    margin: 0.75em 0;
+    overflow-x: auto;
+    border: 1px solid var(--border-color);
+  }
+
+  .markdown-content :global(.hljs-code-block code) {
+    background: transparent;
+    padding: 0;
+    font-size: 0.9em;
+    font-family: "JetBrains Mono", "Fira Code", monospace;
+  }
+
+  .markdown-content :global(.hljs-inline) {
+    background: var(--bg-code, #1e1e2e);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-size: 0.9em;
+    font-family: "JetBrains Mono", "Fira Code", monospace;
+  }
+
+  .markdown-content :global(ul),
+  .markdown-content :global(ol) {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+  }
+
+  .markdown-content :global(li) {
+    margin: 0.25em 0;
+  }
+
+  .markdown-content :global(blockquote) {
+    border-left: 3px solid var(--border-color);
+    margin: 0.75em 0;
+    padding-left: 1em;
+    color: var(--text-secondary);
+  }
+
+  .markdown-content :global(a) {
+    color: var(--accent-primary, #f472b6);
+    text-decoration: underline;
+  }
+
+  .markdown-content :global(a:hover) {
+    color: var(--accent-secondary, #e879f9);
+  }
+
+  .markdown-content :global(strong) {
+    font-weight: 600;
+  }
+
+  .markdown-content :global(h1),
+  .markdown-content :global(h2),
+  .markdown-content :global(h3),
+  .markdown-content :global(h4) {
+    margin: 1em 0 0.5em 0;
+    font-weight: 600;
+  }
+
+  .markdown-content :global(h1:first-child),
+  .markdown-content :global(h2:first-child),
+  .markdown-content :global(h3:first-child),
+  .markdown-content :global(h4:first-child) {
+    margin-top: 0;
+  }
+
+  .markdown-content :global(hr) {
+    border: none;
+    border-top: 1px solid var(--border-color);
+    margin: 1em 0;
+  }
+
+  .markdown-content :global(table) {
+    border-collapse: collapse;
+    margin: 0.75em 0;
+    width: 100%;
+  }
+
+  .markdown-content :global(th),
+  .markdown-content :global(td) {
+    border: 1px solid var(--border-color);
+    padding: 0.5em;
+    text-align: left;
+  }
+
+  .markdown-content :global(th) {
+    background: var(--bg-secondary);
+    font-weight: 600;
+  }
+
+  /* Highlight.js theme colors - using CSS variables for light/dark mode support */
+  .markdown-content :global(.hljs) {
+    color: var(--text-primary);
+  }
+
+  .markdown-content :global(.hljs-keyword),
+  .markdown-content :global(.hljs-selector-tag),
+  .markdown-content :global(.hljs-built_in),
+  .markdown-content :global(.hljs-name) {
+    color: var(--hljs-keyword);
+  }
+
+  .markdown-content :global(.hljs-string),
+  .markdown-content :global(.hljs-attr),
+  .markdown-content :global(.hljs-symbol),
+  .markdown-content :global(.hljs-bullet) {
+    color: var(--hljs-string);
+  }
+
+  .markdown-content :global(.hljs-number),
+  .markdown-content :global(.hljs-literal) {
+    color: var(--hljs-number);
+  }
+
+  .markdown-content :global(.hljs-comment),
+  .markdown-content :global(.hljs-quote) {
+    color: var(--hljs-comment);
+    font-style: italic;
+  }
+
+  .markdown-content :global(.hljs-function),
+  .markdown-content :global(.hljs-title) {
+    color: var(--hljs-function);
+  }
+
+  .markdown-content :global(.hljs-type),
+  .markdown-content :global(.hljs-class) {
+    color: var(--hljs-type);
+  }
+
+  .markdown-content :global(.hljs-variable),
+  .markdown-content :global(.hljs-template-variable) {
+    color: var(--hljs-variable);
+  }
+
+  .markdown-content :global(.hljs-meta) {
+    color: var(--hljs-meta);
+  }
+
+  .markdown-content :global(.hljs-tag) {
+    color: var(--hljs-keyword);
+  }
+
+  .markdown-content :global(.hljs-attribute) {
+    color: var(--hljs-function);
+  }
+
+  .markdown-content :global(.hljs-params) {
+    color: var(--text-primary);
+  }
+
+  /* Spoiler tag styles */
+  .markdown-content :global(.spoiler) {
+    background: var(--text-primary);
+    color: transparent;
+    border-radius: 4px;
+    padding: 0 0.25em;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    user-select: none;
+  }
+
+  .markdown-content :global(.spoiler:hover) {
+    opacity: 0.8;
+  }
+
+  .markdown-content :global(.spoiler:focus) {
+    outline: 2px solid var(--accent-primary);
+    outline-offset: 2px;
+  }
+
+  .markdown-content :global(.spoiler.revealed) {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    user-select: text;
+  }
+
+  .markdown-content :global(.search-highlight) {
+    background-color: var(--search-highlight, #fbbf24);
+    color: var(--search-highlight-text, #000);
+    border-radius: 2px;
+    padding: 0 2px;
+  }
+</style>

src/lib/components/PermissionModal.svelte

@@ -109,8 +109,22 @@ Please continue where we left off and retry that action now that you have permis
   function isToolAlreadyGranted(toolName: string): boolean {
     return grantedToolsList.includes(toolName);
   }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!isVisible || !permission) return;
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleApproveAndReconnect();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      handleDismiss();
+    }
+  }
 </script>
 
+<svelte:window onkeydown={handleKeydown} />
+
 {#if isVisible && permission}
   <div
     class="permission-overlay fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm"
@@ -123,8 +137,8 @@ Please continue where we left off and retry that action now that you have permis
           <span class="text-xl">🔐</span>
         </div>
         <div>
-          <h2 class="text-lg font-semibold text-white">Permission Blocked</h2>
+          <h2 class="text-lg font-semibold text-[var(--text-primary)]">Permission Blocked</h2>
-          <p class="text-sm text-gray-400">Hikari tried to use a restricted tool</p>
+          <p class="text-sm text-[var(--text-secondary)]">Hikari tried to use a restricted tool</p>
         </div>
       </div>
 
@@ -135,7 +149,7 @@ Please continue where we left off and retry that action now that you have permis
       </div>
 
       <div class="mb-4">
-        <div class="text-sm text-gray-400 mb-1">Tool</div>
+        <div class="text-sm text-[var(--text-secondary)] mb-1">Tool</div>
         <div
           class="px-3 py-2 bg-[var(--bg-secondary)] rounded-md text-[var(--accent-primary)] font-mono flex items-center justify-between"
         >
@@ -149,17 +163,17 @@ Please continue where we left off and retry that action now that you have permis
       </div>
 
       <div class="mb-4">
-        <div class="text-sm text-gray-400 mb-1">Description</div>
+        <div class="text-sm text-[var(--text-secondary)] mb-1">Description</div>
-        <div class="px-3 py-2 bg-[var(--bg-secondary)] rounded-md text-gray-300">
+        <div class="px-3 py-2 bg-[var(--bg-secondary)] rounded-md text-[var(--text-primary)]">
           {permission.description}
         </div>
       </div>
 
       {#if Object.keys(permission.input).length > 0}
         <div class="mb-6">
-          <div class="text-sm text-gray-400 mb-1">Details</div>
+          <div class="text-sm text-[var(--text-secondary)] mb-1">Details</div>
           <pre
-            class="px-3 py-2 bg-[var(--bg-terminal)] rounded-md text-gray-300 text-xs overflow-x-auto max-h-32">{formatInput(
+            class="px-3 py-2 bg-[var(--bg-terminal)] rounded-md text-[var(--text-primary)] text-xs overflow-x-auto max-h-32">{formatInput(
               permission.input
             )}</pre>
         </div>
@@ -168,7 +182,7 @@ Please continue where we left off and retry that action now that you have permis
       <div class="flex gap-3">
         <button
           onclick={handleDismiss}
-          class="flex-1 px-4 py-2 bg-gray-500/20 hover:bg-gray-500/30 text-gray-400 rounded-lg transition-colors font-medium"
+          class="flex-1 px-4 py-2 bg-gray-500/20 hover:bg-gray-500/30 text-[var(--text-secondary)] rounded-lg transition-colors font-medium"
         >
           Dismiss
         </button>

src/lib/components/SlashCommandMenu.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { SlashCommand } from "$lib/commands/slashCommands";
+
+  interface Props {
+    commands: SlashCommand[];
+    selectedIndex: number;
+    onSelect: (command: SlashCommand) => void;
+  }
+
+  let { commands, selectedIndex, onSelect }: Props = $props();
+</script>
+
+{#if commands.length > 0}
+  <div class="slash-command-menu">
+    <div class="menu-header">Commands</div>
+    {#each commands as command, index (command.name)}
+      <button
+        type="button"
+        class="menu-item"
+        class:selected={index === selectedIndex}
+        onclick={() => onSelect(command)}
+        onmouseenter={() => (selectedIndex = index)}
+      >
+        <span class="command-name">/{command.name}</span>
+        <span class="command-description">{command.description}</span>
+      </button>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .slash-command-menu {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    right: 0;
+    margin-bottom: 8px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
+    z-index: 100;
+  }
+
+  .menu-header {
+    padding: 8px 12px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-tertiary);
+    background: var(--bg-tertiary);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 10px 12px;
+    text-align: left;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .menu-item:hover,
+  .menu-item.selected {
+    background: var(--bg-tertiary);
+  }
+
+  .command-name {
+    font-family: monospace;
+    font-weight: 600;
+    color: var(--accent-primary);
+    min-width: 80px;
+  }
+
+  .command-description {
+    color: var(--text-secondary);
+    font-size: 13px;
+  }
+</style>

src/lib/components/StatusBar.svelte

@@ -17,6 +17,7 @@
   import StatsDisplay from "./StatsDisplay.svelte";
   import AboutPanel from "./AboutPanel.svelte";
   import HelpPanel from "./HelpPanel.svelte";
+  import KeyboardShortcutsModal from "./KeyboardShortcutsModal.svelte";
   import { achievementProgress } from "$lib/stores/achievements";
 
   const DISCORD_URL = "https://chat.nhcarrigan.com";
@@ -31,6 +32,7 @@
   let showStats = $state(false);
   let showAbout = $state(false);
   let showHelp = $state(false);
+  let showKeyboardShortcuts = $state(false);
   const progress = $derived($achievementProgress);
   let currentConfig: HikariConfig = $state({
     model: null,
@@ -43,6 +45,10 @@
     greeting_custom_prompt: null,
     notifications_enabled: true,
     notification_volume: 0.5,
+    always_on_top: false,
+    update_checks_enabled: true,
+    character_panel_width: null,
+    font_size: 14,
   });
 
   onMount(async () => {
@@ -271,6 +277,26 @@
         />
       </svg>
     </button>
+    <button
+      onclick={() => (showKeyboardShortcuts = true)}
+      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
+      title="Keyboard Shortcuts"
+    >
+      <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="M12 3C10.22 3 8.47 3.23 6.86 3.68A2 2 0 005 5.57V18.43a2 2 0 001.86 1.89C8.47 20.77 10.22 21 12 21s3.53-.23 5.14-.68A2 2 0 0019 18.43V5.57a2 2 0 00-1.86-1.89C15.53 3.23 13.78 3 12 3z"
+        />
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M8 7h.01M12 7h.01M16 7h.01M8 11h.01M12 11h.01M16 11h.01M8 15h8"
+        />
+      </svg>
+    </button>
     <button
       onclick={() => (showHelp = true)}
       class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
@@ -340,3 +366,7 @@
 {#if showHelp}
   <HelpPanel onClose={() => (showHelp = false)} />
 {/if}
+
+{#if showKeyboardShortcuts}
+  <KeyboardShortcutsModal onClose={() => (showKeyboardShortcuts = false)} />
+{/if}

src/lib/components/Terminal.svelte

@@ -1,24 +1,66 @@
 <script lang="ts">
   import { claudeStore, type TerminalLine } from "$lib/stores/claude";
-  import { afterUpdate } from "svelte";
+  import { afterUpdate, tick } from "svelte";
   import ConversationTabs from "./ConversationTabs.svelte";
+  import Markdown from "./Markdown.svelte";
+  import HighlightedText from "./HighlightedText.svelte";
+  import { searchState, searchQuery } from "$lib/stores/search";
 
   let terminalElement: HTMLDivElement;
   let shouldAutoScroll = true;
   let lines: TerminalLine[] = [];
+  let currentSearchQuery = "";
+  let currentConversationId: string | null = null;
+  let isRestoringScroll = false;
+
+  searchQuery.subscribe((value) => {
+    currentSearchQuery = value;
+  });
 
   claudeStore.terminalLines.subscribe((value) => {
     lines = value;
   });
 
+  claudeStore.activeConversationId.subscribe(async (newId) => {
+    if (!newId) return;
+
+    // Save current conversation's scroll position before switching
+    if (currentConversationId && currentConversationId !== newId && terminalElement) {
+      const position = shouldAutoScroll ? -1 : terminalElement.scrollTop;
+      claudeStore.saveScrollPosition(currentConversationId, position);
+    }
+
+    currentConversationId = newId;
+
+    // Restore scroll position for the new conversation after DOM updates
+    await tick();
+    if (terminalElement) {
+      const savedPosition = claudeStore.getScrollPosition(newId);
+      isRestoringScroll = true;
+      if (savedPosition === -1) {
+        // Auto-scroll to bottom
+        shouldAutoScroll = true;
+        terminalElement.scrollTop = terminalElement.scrollHeight;
+      } else {
+        // Restore to saved position
+        shouldAutoScroll = false;
+        terminalElement.scrollTop = savedPosition;
+      }
+      // Small delay to prevent the scroll handler from overriding our restore
+      setTimeout(() => {
+        isRestoringScroll = false;
+      }, 50);
+    }
+  });
+
   function handleScroll() {
-    if (!terminalElement) return;
+    if (!terminalElement || isRestoringScroll) return;
     const { scrollTop, scrollHeight, clientHeight } = terminalElement;
     shouldAutoScroll = scrollHeight - scrollTop - clientHeight < 100;
   }
 
   afterUpdate(() => {
-    if (shouldAutoScroll && terminalElement) {
+    if (shouldAutoScroll && terminalElement && !isRestoringScroll) {
       terminalElement.scrollTop = terminalElement.scrollHeight;
     }
   });
@@ -63,6 +105,23 @@
       minute: "2-digit",
     });
   }
+
+  $: {
+    if (currentSearchQuery && lines.length > 0) {
+      const escapedQuery = currentSearchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const regex = new RegExp(escapedQuery, "gi");
+      let totalMatches = 0;
+      for (const line of lines) {
+        const matches = line.content.match(regex);
+        if (matches) {
+          totalMatches += matches.length;
+        }
+      }
+      searchState.setMatchCount(totalMatches);
+    } else {
+      searchState.setMatchCount(0);
+    }
+  }
 </script>
 
 <div
@@ -84,7 +143,8 @@
   <div
     bind:this={terminalElement}
     onscroll={handleScroll}
-    class="terminal-content h-[calc(100%-76px)] overflow-y-auto p-4 font-mono text-sm"
+    class="terminal-content h-[calc(100%-76px)] overflow-y-auto p-4 font-mono"
+    style="font-size: var(--terminal-font-size, 14px);"
   >
     {#if lines.length === 0}
       <div class="terminal-waiting italic">
@@ -100,7 +160,11 @@
           {#if line.toolName}
             <span class="terminal-tool-name mr-2">[{line.toolName}]</span>
           {/if}
-          <span class="whitespace-pre-wrap">{line.content}</span>
+          {#if line.type === "assistant"}
+            <Markdown content={line.content} searchQuery={currentSearchQuery} />
+          {:else}
+            <HighlightedText content={line.content} searchQuery={currentSearchQuery} />
+          {/if}
         </div>
       {/each}
     {/if}
@@ -157,4 +221,11 @@
   .terminal-header-text {
     color: var(--text-secondary);
   }
+
+  :global(.search-highlight) {
+    background-color: var(--search-highlight, #fbbf24);
+    color: var(--search-highlight-text, #000);
+    border-radius: 2px;
+    padding: 0 2px;
+  }
 </style>

src/lib/components/UpdateNotification.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/core";
+  import { openUrl } from "@tauri-apps/plugin-opener";
+  import type { UpdateInfo } from "$lib/types/messages";
+  import { configStore } from "$lib/stores/config";
+
+  let updateInfo = $state<UpdateInfo | null>(null);
+  let dismissed = $state(false);
+
+  export async function checkForUpdates() {
+    // Check if update checks are enabled
+    const config = configStore.getConfig();
+    if (!config.update_checks_enabled) {
+      return;
+    }
+
+    try {
+      const info = await invoke<UpdateInfo>("check_for_updates");
+      if (info.has_update) {
+        updateInfo = info;
+        dismissed = false;
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      console.error("Failed to check for updates:", errorMessage);
+    }
+  }
+
+  function dismiss() {
+    dismissed = true;
+  }
+
+  async function openRelease() {
+    if (updateInfo?.release_url) {
+      await openUrl(updateInfo.release_url);
+    }
+  }
+</script>
+
+{#if updateInfo && !dismissed}
+  <div
+    class="fixed bottom-4 right-4 max-w-sm bg-[var(--bg-tertiary)] border border-[var(--accent-primary)] rounded-lg shadow-lg p-4 z-50"
+  >
+    <div class="flex items-start gap-3">
+      <div class="text-2xl">🎉</div>
+      <div class="flex-1">
+        <h3 class="text-[var(--text-primary)] font-semibold mb-1">Update Available!</h3>
+        <p class="text-[var(--text-secondary)] text-sm mb-2">
+          A new version of Hikari Desktop is available:
+          <span class="text-[var(--accent-primary)] font-mono">{updateInfo.latest_version}</span>
+        </p>
+        <p class="text-[var(--text-muted)] text-xs mb-3">
+          Current version: {updateInfo.current_version}
+        </p>
+        <div class="flex gap-2">
+          <button
+            onclick={openRelease}
+            class="px-3 py-1.5 bg-[var(--accent-primary)] text-white rounded text-sm hover:brightness-110 transition-all"
+          >
+            View Release
+          </button>
+          <button
+            onclick={dismiss}
+            class="px-3 py-1.5 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded text-sm hover:bg-[var(--bg-primary)] transition-all"
+          >
+            Later
+          </button>
+        </div>
+      </div>
+      <button
+        onclick={dismiss}
+        class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
+        aria-label="Dismiss"
+      >
+        <svg
+          class="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          ></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+{/if}

src/lib/components/UserQuestionModal.svelte

@@ -0,0 +1,264 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/core";
+  import { get } from "svelte/store";
+  import { SvelteSet } from "svelte/reactivity";
+  import { claudeStore, hasQuestionPending } from "$lib/stores/claude";
+  import { characterState } from "$lib/stores/character";
+  import type { UserQuestionEvent } from "$lib/types/messages";
+
+  let isVisible = $state(false);
+  let question: UserQuestionEvent | null = $state(null);
+  let selectedOptions: SvelteSet<string> = new SvelteSet();
+  let customAnswer = $state("");
+  let showCustomInput = $state(false);
+  let grantedToolsList: string[] = $state([]);
+  let workingDirectory = $state("");
+
+  hasQuestionPending.subscribe((pending) => {
+    isVisible = pending;
+    if (!pending) {
+      selectedOptions = new SvelteSet();
+      customAnswer = "";
+      showCustomInput = false;
+    }
+  });
+
+  claudeStore.pendingQuestion.subscribe((q) => {
+    question = q;
+    if (q) {
+      characterState.setState("permission");
+    }
+  });
+
+  claudeStore.grantedTools.subscribe((tools) => {
+    grantedToolsList = Array.from(tools);
+  });
+
+  claudeStore.currentWorkingDirectory.subscribe((dir) => {
+    workingDirectory = dir;
+  });
+
+  function toggleOption(label: string) {
+    if (!question) return;
+
+    if (question.multi_select) {
+      if (selectedOptions.has(label)) {
+        selectedOptions.delete(label);
+      } else {
+        selectedOptions.add(label);
+      }
+    } else {
+      selectedOptions.clear();
+      selectedOptions.add(label);
+    }
+    showCustomInput = false;
+  }
+
+  function selectCustom() {
+    showCustomInput = true;
+    selectedOptions.clear();
+  }
+
+  async function handleSubmitAndReconnect() {
+    if (!question) return;
+
+    const conversationId = get(claudeStore.activeConversationId);
+    if (!conversationId) return;
+
+    let answerText: string;
+
+    if (showCustomInput && customAnswer.trim()) {
+      answerText = customAnswer.trim();
+    } else if (selectedOptions.size > 0) {
+      if (question.multi_select) {
+        answerText = Array.from(selectedOptions).join(", ");
+      } else {
+        answerText = Array.from(selectedOptions)[0];
+      }
+    } else {
+      return;
+    }
+
+    const questionText = question.question;
+    const conversationHistory = claudeStore.getConversationHistory();
+
+    claudeStore.addLine("system", `Answer: ${answerText}. Reconnecting with context...`);
+    claudeStore.clearQuestion();
+
+    try {
+      await invoke("stop_claude", { conversationId });
+
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      await invoke("start_claude", {
+        conversationId,
+        options: {
+          working_dir: workingDirectory || "/home/naomi",
+          allowed_tools: grantedToolsList,
+        },
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      if (conversationHistory) {
+        const contextMessage = `[CONTEXT RESTORATION]
+I just answered your question. Here's our conversation so far:
+
+${conversationHistory}
+
+You asked me: "${questionText}"
+My answer: "${answerText}"
+
+Please continue where we left off, taking my answer into account.`;
+
+        await invoke("send_prompt", {
+          conversationId,
+          message: contextMessage,
+        });
+      }
+
+      characterState.setTemporaryState("success", 2000);
+    } catch (error) {
+      console.error("Failed to reconnect:", error);
+      claudeStore.addLine("error", `Reconnect failed: ${error}`);
+      characterState.setTemporaryState("error", 3000);
+    }
+  }
+
+  function handleDismiss() {
+    claudeStore.clearQuestion();
+    claudeStore.addLine("system", "Question dismissed");
+    characterState.setTemporaryState("idle", 1000);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!isVisible || !question) return;
+
+    if (event.key === "Enter" && !showCustomInput) {
+      event.preventDefault();
+      if (selectedOptions.size > 0) {
+        handleSubmitAndReconnect();
+      }
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      handleDismiss();
+    }
+  }
+
+  function canSubmit(): boolean {
+    return selectedOptions.size > 0 || (showCustomInput && customAnswer.trim().length > 0);
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if isVisible && question}
+  <div
+    class="question-overlay fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm"
+  >
+    <div
+      class="question-modal bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl"
+    >
+      <div class="flex items-center gap-3 mb-4">
+        <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center">
+          <span class="text-xl">?</span>
+        </div>
+        <div>
+          <h2 class="text-lg font-semibold text-[var(--text-primary)]">
+            {question.header || "Question"}
+          </h2>
+          <p class="text-sm text-[var(--text-secondary)]">Hikari needs your input</p>
+        </div>
+      </div>
+
+      <div class="mb-4">
+        <p class="text-[var(--text-primary)]">{question.question}</p>
+      </div>
+
+      <div class="mb-4 space-y-2">
+        {#each question.options as option (option.label)}
+          <button
+            onclick={() => toggleOption(option.label)}
+            class="w-full text-left px-4 py-3 rounded-lg border transition-colors {selectedOptions.has(
+              option.label
+            )
+              ? 'bg-[var(--accent-primary)]/20 border-[var(--accent-primary)] text-[var(--text-primary)]'
+              : 'bg-[var(--bg-secondary)] border-[var(--border-color)] text-[var(--text-primary)] hover:border-[var(--accent-primary)]/50'}"
+          >
+            <div class="flex items-start gap-3">
+              <div
+                class="mt-0.5 w-5 h-5 rounded-{question.multi_select
+                  ? 'sm'
+                  : 'full'} border-2 flex items-center justify-center {selectedOptions.has(
+                  option.label
+                )
+                  ? 'border-[var(--accent-primary)] bg-[var(--accent-primary)]'
+                  : 'border-[var(--text-secondary)]'}"
+              >
+                {#if selectedOptions.has(option.label)}
+                  <span class="text-white text-xs">{question.multi_select ? "x" : "x"}</span>
+                {/if}
+              </div>
+              <div class="flex-1">
+                <div class="font-medium">{option.label}</div>
+                {#if option.description}
+                  <div class="text-sm text-[var(--text-secondary)] mt-1">{option.description}</div>
+                {/if}
+              </div>
+            </div>
+          </button>
+        {/each}
+
+        <button
+          onclick={selectCustom}
+          class="w-full text-left px-4 py-3 rounded-lg border transition-colors {showCustomInput
+            ? 'bg-[var(--accent-primary)]/20 border-[var(--accent-primary)] text-[var(--text-primary)]'
+            : 'bg-[var(--bg-secondary)] border-[var(--border-color)] text-[var(--text-primary)] hover:border-[var(--accent-primary)]/50'}"
+        >
+          <div class="flex items-start gap-3">
+            <div
+              class="mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center {showCustomInput
+                ? 'border-[var(--accent-primary)] bg-[var(--accent-primary)]'
+                : 'border-[var(--text-secondary)]'}"
+            >
+              {#if showCustomInput}
+                <span class="text-white text-xs">x</span>
+              {/if}
+            </div>
+            <div class="flex-1">
+              <div class="font-medium">Other</div>
+              <div class="text-sm text-[var(--text-secondary)] mt-1">Provide a custom answer</div>
+            </div>
+          </div>
+        </button>
+      </div>
+
+      {#if showCustomInput}
+        <div class="mb-4">
+          <textarea
+            bind:value={customAnswer}
+            placeholder="Type your answer here..."
+            class="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] placeholder-[var(--text-secondary)] resize-none focus:outline-none focus:border-[var(--accent-primary)]"
+            rows="3"
+          ></textarea>
+        </div>
+      {/if}
+
+      <div class="flex gap-3">
+        <button
+          onclick={handleDismiss}
+          class="flex-1 px-4 py-2 bg-gray-500/20 hover:bg-gray-500/30 text-[var(--text-secondary)] rounded-lg transition-colors font-medium"
+        >
+          Dismiss
+        </button>
+        <button
+          onclick={handleSubmitAndReconnect}
+          disabled={!canSubmit()}
+          class="flex-1 px-4 py-2 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 rounded-lg transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Answer & Reconnect
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}

src/lib/stores/claude.ts

@@ -21,6 +21,7 @@ export const claudeStore = {
   currentWorkingDirectory: conversationsStore.currentWorkingDirectory,
   terminalLines: conversationsStore.terminalLines,
   pendingPermission: conversationsStore.pendingPermission,
+  pendingQuestion: conversationsStore.pendingQuestion,
   isProcessing: conversationsStore.isProcessing,
   grantedTools: conversationsStore.grantedTools,
   pendingRetryMessage: conversationsStore.pendingRetryMessage,
@@ -47,6 +48,12 @@ export const claudeStore = {
   getConversationHistory: conversationsStore.getConversationHistory,
   requestPermission: conversationsStore.requestPermission,
   clearPermission: conversationsStore.clearPermission,
+  requestPermissionForConversation: conversationsStore.requestPermissionForConversation,
+  clearPermissionForConversation: conversationsStore.clearPermissionForConversation,
+  requestQuestion: conversationsStore.requestQuestion,
+  clearQuestion: conversationsStore.clearQuestion,
+  requestQuestionForConversation: conversationsStore.requestQuestionForConversation,
+  clearQuestionForConversation: conversationsStore.clearQuestionForConversation,
   grantTool: conversationsStore.grantTool,
   revokeAllTools: conversationsStore.revokeAllTools,
   isToolGranted: conversationsStore.isToolGranted,
@@ -57,6 +64,8 @@ export const claudeStore = {
   deleteConversation: conversationsStore.deleteConversation,
   switchConversation: conversationsStore.switchConversation,
   renameConversation: conversationsStore.renameConversation,
+  saveScrollPosition: conversationsStore.saveScrollPosition,
+  getScrollPosition: conversationsStore.getScrollPosition,
 
   getGrantedTools: (): string[] => {
     let tools: string[] = [];
@@ -83,8 +92,13 @@ export const claudeStore = {
 };
 
 export const hasPermissionPending = derived(
-  claudeStore.pendingPermission,
+  claudeStore.activeConversation,
-  ($permission) => $permission !== null
+  ($conversation) => $conversation?.pendingPermission !== null
+);
+
+export const hasQuestionPending = derived(
+  claudeStore.activeConversation,
+  ($conversation) => $conversation?.pendingQuestion !== null
 );
 
 // Derived store to check if Claude is currently processing (can be interrupted)

src/lib/stores/config.ts

@@ -14,6 +14,10 @@ export interface HikariConfig {
   greeting_custom_prompt: string | null;
   notifications_enabled: boolean;
   notification_volume: number;
+  always_on_top: boolean;
+  update_checks_enabled: boolean;
+  character_panel_width: number | null;
+  font_size: number;
 }
 
 const defaultConfig: HikariConfig = {
@@ -27,6 +31,10 @@ const defaultConfig: HikariConfig = {
   greeting_custom_prompt: null,
   notifications_enabled: true,
   notification_volume: 0.7,
+  always_on_top: false,
+  update_checks_enabled: true,
+  character_panel_width: null,
+  font_size: 14,
 };
 
 function createConfigStore() {
@@ -87,6 +95,33 @@ function createConfigStore() {
       applyTheme(theme);
     },
 
+    setFontSize: async (size: number) => {
+      const clampedSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, size));
+      await updateConfig({ font_size: clampedSize });
+      applyFontSize(clampedSize);
+    },
+
+    increaseFontSize: async () => {
+      let currentConfig: HikariConfig = defaultConfig;
+      config.subscribe((c) => (currentConfig = c))();
+      const newSize = Math.min(MAX_FONT_SIZE, currentConfig.font_size + 2);
+      await updateConfig({ font_size: newSize });
+      applyFontSize(newSize);
+    },
+
+    decreaseFontSize: async () => {
+      let currentConfig: HikariConfig = defaultConfig;
+      config.subscribe((c) => (currentConfig = c))();
+      const newSize = Math.max(MIN_FONT_SIZE, currentConfig.font_size - 2);
+      await updateConfig({ font_size: newSize });
+      applyFontSize(newSize);
+    },
+
+    resetFontSize: async () => {
+      await updateConfig({ font_size: DEFAULT_FONT_SIZE });
+      applyFontSize(DEFAULT_FONT_SIZE);
+    },
+
     addAutoGrantedTool: async (tool: string) => {
       let currentConfig: HikariConfig = defaultConfig;
       config.subscribe((c) => (currentConfig = c))();
@@ -117,6 +152,23 @@ export function applyTheme(theme: Theme) {
   }
 }
 
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+const DEFAULT_FONT_SIZE = 14;
+
+export function applyFontSize(size: number) {
+  if (typeof document !== "undefined") {
+    const clampedSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, size));
+    document.documentElement.style.setProperty("--terminal-font-size", `${clampedSize}px`);
+  }
+}
+
+export function clampFontSize(size: number): number {
+  return Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, size));
+}
+
+export { MIN_FONT_SIZE, MAX_FONT_SIZE, DEFAULT_FONT_SIZE };
+
 export const configStore = createConfigStore();
 
 export const isDarkTheme = derived(configStore.config, ($config) => $config.theme === "dark");

src/lib/stores/conversations.ts

@@ -1,5 +1,10 @@
 import { writable, derived, get } from "svelte/store";
-import type { TerminalLine, ConnectionStatus, PermissionRequest } from "$lib/types/messages";
+import type {
+  TerminalLine,
+  ConnectionStatus,
+  PermissionRequest,
+  UserQuestionEvent,
+} from "$lib/types/messages";
 import type { CharacterState } from "$lib/types/states";
 import { cleanupConversationTracking } from "$lib/tauri";
 import { characterState } from "$lib/stores/character";
@@ -14,6 +19,9 @@ export interface Conversation {
   characterState: CharacterState;
   isProcessing: boolean;
   grantedTools: Set<string>;
+  pendingPermission: PermissionRequest | null;
+  pendingQuestion: UserQuestionEvent | null;
+  scrollPosition: number;
   createdAt: Date;
   lastActivityAt: Date;
 }
@@ -21,7 +29,6 @@ export interface Conversation {
 function createConversationsStore() {
   const conversations = writable<Map<string, Conversation>>(new Map());
   const activeConversationId = writable<string | null>(null);
-  const pendingPermission = writable<PermissionRequest | null>(null);
   const pendingRetryMessage = writable<string | null>(null);
 
   let conversationCounter = 0;
@@ -47,6 +54,9 @@ function createConversationsStore() {
       characterState: "idle",
       isProcessing: false,
       grantedTools: new Set(),
+      pendingPermission: null,
+      pendingQuestion: null,
+      scrollPosition: -1, // -1 means "scroll to bottom" (auto-scroll)
       createdAt: new Date(),
       lastActivityAt: new Date(),
     };
@@ -93,6 +103,12 @@ function createConversationsStore() {
     activeConversation,
     ($conv) => $conv?.grantedTools || new Set<string>()
   );
+  const pendingPermission = derived(
+    activeConversation,
+    ($conv) => $conv?.pendingPermission || null
+  );
+  const pendingQuestion = derived(activeConversation, ($conv) => $conv?.pendingQuestion || null);
+  const scrollPosition = derived(activeConversation, ($conv) => $conv?.scrollPosition ?? -1);
 
   return {
     // Expose derived stores for compatibility
@@ -101,9 +117,11 @@ function createConversationsStore() {
     currentWorkingDirectory: { subscribe: currentWorkingDirectory.subscribe },
     terminalLines: { subscribe: terminalLines.subscribe },
     pendingPermission: { subscribe: pendingPermission.subscribe },
+    pendingQuestion: { subscribe: pendingQuestion.subscribe },
     isProcessing: { subscribe: isProcessing.subscribe },
     grantedTools: { subscribe: grantedTools.subscribe },
     pendingRetryMessage: { subscribe: pendingRetryMessage.subscribe },
+    scrollPosition: { subscribe: scrollPosition.subscribe },
 
     // New conversation-specific stores
     conversations: { subscribe: conversations.subscribe },
@@ -148,8 +166,98 @@ function createConversationsStore() {
         return convs;
       });
     },
-    requestPermission: (request: PermissionRequest) => pendingPermission.set(request),
+    requestPermission: (request: PermissionRequest) => {
-    clearPermission: () => pendingPermission.set(null),
+      const activeId = get(activeConversationId);
+      if (!activeId) return;
+
+      conversations.update((convs) => {
+        const conv = convs.get(activeId);
+        if (conv) {
+          conv.pendingPermission = request;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+    clearPermission: () => {
+      const activeId = get(activeConversationId);
+      if (!activeId) return;
+
+      conversations.update((convs) => {
+        const conv = convs.get(activeId);
+        if (conv) {
+          conv.pendingPermission = null;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+    requestPermissionForConversation: (conversationId: string, request: PermissionRequest) => {
+      conversations.update((convs) => {
+        const conv = convs.get(conversationId);
+        if (conv) {
+          conv.pendingPermission = request;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+    clearPermissionForConversation: (conversationId: string) => {
+      conversations.update((convs) => {
+        const conv = convs.get(conversationId);
+        if (conv) {
+          conv.pendingPermission = null;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+    requestQuestion: (question: UserQuestionEvent) => {
+      const activeId = get(activeConversationId);
+      if (!activeId) return;
+
+      conversations.update((convs) => {
+        const conv = convs.get(activeId);
+        if (conv) {
+          conv.pendingQuestion = question;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+    clearQuestion: () => {
+      const activeId = get(activeConversationId);
+      if (!activeId) return;
+
+      conversations.update((convs) => {
+        const conv = convs.get(activeId);
+        if (conv) {
+          conv.pendingQuestion = null;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+    requestQuestionForConversation: (conversationId: string, question: UserQuestionEvent) => {
+      conversations.update((convs) => {
+        const conv = convs.get(conversationId);
+        if (conv) {
+          conv.pendingQuestion = question;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+    clearQuestionForConversation: (conversationId: string) => {
+      conversations.update((convs) => {
+        const conv = convs.get(conversationId);
+        if (conv) {
+          conv.pendingQuestion = null;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
     setPendingRetryMessage: (message: string | null) => pendingRetryMessage.set(message),
 
     // Conversation management
@@ -221,6 +329,22 @@ function createConversationsStore() {
       });
     },
 
+    saveScrollPosition: (id: string, position: number) => {
+      conversations.update((convs) => {
+        const conv = convs.get(id);
+        if (conv) {
+          conv.scrollPosition = position;
+        }
+        return convs;
+      });
+    },
+
+    getScrollPosition: (id: string): number => {
+      const convs = get(conversations);
+      const conv = convs.get(id);
+      return conv?.scrollPosition ?? -1;
+    },
+
     // Methods that operate on the active conversation
     setSessionId: (id: string | null) => {
       ensureInitialized();

src/lib/stores/search.ts

@@ -0,0 +1,63 @@
+import { writable, derived } from "svelte/store";
+
+interface SearchState {
+  query: string;
+  isActive: boolean;
+  matchCount: number;
+  currentMatchIndex: number;
+}
+
+const initialState: SearchState = {
+  query: "",
+  isActive: false,
+  matchCount: 0,
+  currentMatchIndex: 0,
+};
+
+const searchStore = writable<SearchState>(initialState);
+
+export const searchState = {
+  subscribe: searchStore.subscribe,
+
+  setQuery: (query: string) => {
+    searchStore.update((state) => ({
+      ...state,
+      query,
+      isActive: query.length > 0,
+      currentMatchIndex: 0,
+    }));
+  },
+
+  setMatchCount: (count: number) => {
+    searchStore.update((state) => ({
+      ...state,
+      matchCount: count,
+    }));
+  },
+
+  nextMatch: () => {
+    searchStore.update((state) => ({
+      ...state,
+      currentMatchIndex:
+        state.matchCount > 0 ? (state.currentMatchIndex + 1) % state.matchCount : 0,
+    }));
+  },
+
+  previousMatch: () => {
+    searchStore.update((state) => ({
+      ...state,
+      currentMatchIndex:
+        state.matchCount > 0
+          ? (state.currentMatchIndex - 1 + state.matchCount) % state.matchCount
+          : 0,
+    }));
+  },
+
+  clear: () => {
+    searchStore.set(initialState);
+  },
+};
+
+export const isSearchActive = derived(searchStore, ($search) => $search.isActive);
+
+export const searchQuery = derived(searchStore, ($search) => $search.query);

src/lib/tauri.ts

@@ -6,7 +6,11 @@ import { characterState } from "$lib/stores/character";
 import { configStore } from "$lib/stores/config";
 import { initStatsListener, resetSessionStats } from "$lib/stores/stats";
 import { initAchievementsListener } from "$lib/stores/achievements";
-import type { ConnectionStatus, PermissionPromptEvent } from "$lib/types/messages";
+import type {
+  ConnectionStatus,
+  PermissionPromptEvent,
+  UserQuestionEvent,
+} from "$lib/types/messages";
 import type { CharacterState } from "$lib/types/states";
 import {
   initializeNotificationRules,
@@ -292,29 +296,50 @@ export async function initializeTauriListeners() {
   const permissionUnlisten = await listen<PermissionPromptEvent>("claude:permission", (event) => {
     const { id, tool_name, tool_input, description, conversation_id } = event.payload;
 
-    // Only process permission requests for the active conversation
+    // Store permission request for the specific conversation
-    const activeConversationId = get(claudeStore.activeConversationId);
+    if (conversation_id) {
-    if (conversation_id === activeConversationId) {
+      claudeStore.requestPermissionForConversation(conversation_id, {
+        id,
+        tool: tool_name,
+        description,
+        input: tool_input,
+      });
+      claudeStore.addLineToConversation(
+        conversation_id,
+        "system",
+        `Permission requested for: ${tool_name}`
+      );
+    } else {
+      // Fallback to active conversation if no conversation_id
       claudeStore.requestPermission({
         id,
         tool: tool_name,
         description,
         input: tool_input,
       });
-    }
-
-    // Always store the permission message to the correct conversation
-    if (conversation_id) {
-      claudeStore.addLineToConversation(
-        conversation_id,
-        "system",
-        `Permission requested for: ${tool_name}`
-      );
-    } else if (conversation_id === activeConversationId) {
       claudeStore.addLine("system", `Permission requested for: ${tool_name}`);
     }
   });
   unlisteners.push(permissionUnlisten);
+
+  const questionUnlisten = await listen<UserQuestionEvent>("claude:question", (event) => {
+    const questionEvent = event.payload;
+
+    // Store question request for the specific conversation
+    if (questionEvent.conversation_id) {
+      claudeStore.requestQuestionForConversation(questionEvent.conversation_id, questionEvent);
+      claudeStore.addLineToConversation(
+        questionEvent.conversation_id,
+        "system",
+        `Question: ${questionEvent.question}`
+      );
+    } else {
+      // Fallback to active conversation if no conversation_id
+      claudeStore.requestQuestion(questionEvent);
+      claudeStore.addLine("system", `Question: ${questionEvent.question}`);
+    }
+  });
+  unlisteners.push(questionUnlisten);
 }
 
 export function cleanupTauriListeners() {

src/lib/types/messages.ts

@@ -126,4 +126,26 @@ export interface PermissionPromptEvent {
   conversation_id?: string;
 }
 
+export interface QuestionOption {
+  label: string;
+  description?: string;
+}
+
+export interface UserQuestionEvent {
+  id: string;
+  question: string;
+  header?: string;
+  options: QuestionOption[];
+  multi_select: boolean;
+  conversation_id?: string;
+}
+
 export type ConnectionStatus = "disconnected" | "connecting" | "connected" | "error";
+
+export interface UpdateInfo {
+  current_version: string;
+  latest_version: string;
+  has_update: boolean;
+  release_url: string;
+  release_notes?: string;
+}

src/routes/+page.svelte

@@ -1,22 +1,140 @@
 <script lang="ts">
   import { onMount, onDestroy } from "svelte";
+  import { invoke } from "@tauri-apps/api/core";
+  import { get } from "svelte/store";
   import { initializeTauriListeners, cleanupTauriListeners } from "$lib/tauri";
-  import { configStore, applyTheme } from "$lib/stores/config";
+  import { configStore, applyTheme, applyFontSize } from "$lib/stores/config";
   import { initNotificationSync, cleanupNotificationSync } from "$lib/stores/notifications";
   import { conversationsStore } from "$lib/stores/conversations";
+  import { claudeStore, isClaudeProcessing } from "$lib/stores/claude";
+  import { getCurrentWindow } from "@tauri-apps/api/window";
   import "$lib/notifications/testNotifications";
   import Terminal from "$lib/components/Terminal.svelte";
   import InputBar from "$lib/components/InputBar.svelte";
   import StatusBar from "$lib/components/StatusBar.svelte";
   import AnimeGirl from "$lib/components/AnimeGirl.svelte";
   import PermissionModal from "$lib/components/PermissionModal.svelte";
+  import UserQuestionModal from "$lib/components/UserQuestionModal.svelte";
   import ConfigSidebar from "$lib/components/ConfigSidebar.svelte";
   import AchievementNotification from "$lib/components/AchievementNotification.svelte";
   import AchievementsPanel from "$lib/components/AchievementsPanel.svelte";
+  import UpdateNotification from "$lib/components/UpdateNotification.svelte";
 
   let initialized = false;
+  let updateNotification: UpdateNotification;
   let achievementPanelOpen = $state(false);
 
+  // Resizable panel state
+  let panelWidth = $state(320); // Default width in pixels
+  let isResizing = $state(false);
+  const MIN_PANEL_WIDTH = 200;
+  const MAX_PANEL_WIDTH = 600;
+
+  function startResize(event: MouseEvent) {
+    isResizing = true;
+    event.preventDefault();
+    document.addEventListener("mousemove", handleResize);
+    document.addEventListener("mouseup", stopResize);
+  }
+
+  function handleResize(event: MouseEvent) {
+    if (!isResizing) return;
+    const newWidth = event.clientX;
+    panelWidth = Math.max(MIN_PANEL_WIDTH, Math.min(MAX_PANEL_WIDTH, newWidth));
+  }
+
+  function stopResize() {
+    if (isResizing) {
+      isResizing = false;
+      document.removeEventListener("mousemove", handleResize);
+      document.removeEventListener("mouseup", stopResize);
+      // Save the panel width to config
+      configStore.updateConfig({ character_panel_width: panelWidth });
+    }
+  }
+
+  // Global keyboard shortcuts
+  function handleGlobalKeydown(event: KeyboardEvent) {
+    // Don't trigger shortcuts when typing in inputs (except for specific ones)
+    const target = event.target as HTMLElement;
+    const isInputFocused = target.tagName === "INPUT" || target.tagName === "TEXTAREA";
+
+    // Escape closes panels (always works)
+    if (event.key === "Escape") {
+      // Check if any panels are open and close them
+      if (achievementPanelOpen) {
+        achievementPanelOpen = false;
+        event.preventDefault();
+        return;
+      }
+      // ConfigSidebar handles its own escape via store
+      if (get(configStore.isSidebarOpen)) {
+        configStore.closeSidebar();
+        event.preventDefault();
+        return;
+      }
+    }
+
+    // Skip other shortcuts if user is typing in an input
+    if (isInputFocused) return;
+
+    // Ctrl+L - Clear terminal
+    if (event.ctrlKey && event.key === "l") {
+      event.preventDefault();
+      claudeStore.clearTerminal();
+      return;
+    }
+
+    // Ctrl+, - Open settings
+    if (event.ctrlKey && event.key === ",") {
+      event.preventDefault();
+      configStore.openSidebar();
+      return;
+    }
+
+    // Ctrl+C - Interrupt (only when processing)
+    if (event.ctrlKey && event.key === "c") {
+      if (get(isClaudeProcessing)) {
+        event.preventDefault();
+        handleInterrupt();
+        return;
+      }
+    }
+
+    // Ctrl++ or Ctrl+= - Increase font size
+    if (event.ctrlKey && (event.key === "+" || event.key === "=")) {
+      event.preventDefault();
+      configStore.increaseFontSize();
+      return;
+    }
+
+    // Ctrl+- - Decrease font size
+    if (event.ctrlKey && event.key === "-") {
+      event.preventDefault();
+      configStore.decreaseFontSize();
+      return;
+    }
+
+    // Ctrl+0 - Reset font size
+    if (event.ctrlKey && event.key === "0") {
+      event.preventDefault();
+      configStore.resetFontSize();
+      return;
+    }
+  }
+
+  async function handleInterrupt() {
+    try {
+      const conversationId = get(claudeStore.activeConversationId);
+      if (!conversationId) return;
+
+      await invoke("interrupt_claude", { conversationId });
+      claudeStore.addLine("system", "Process interrupted");
+    } catch (error) {
+      console.error("Failed to interrupt:", error);
+    }
+  }
+
   onMount(async () => {
     if (!initialized) {
       initialized = true;
@@ -27,12 +145,32 @@
       await initializeTauriListeners();
       await configStore.loadConfig();
 
-      // Apply saved theme on startup
+      // Apply saved settings on startup
       const config = configStore.getConfig();
       applyTheme(config.theme);
+      applyFontSize(config.font_size);
+
+      // Apply always-on-top setting
+      if (config.always_on_top) {
+        const window = getCurrentWindow();
+        await window.setAlwaysOnTop(true);
+      }
+
+      // Load saved panel width
+      if (config.character_panel_width) {
+        panelWidth = config.character_panel_width;
+      }
 
       // Initialize notification settings sync
       initNotificationSync();
+
+      // Add global keyboard shortcut listener
+      window.addEventListener("keydown", handleGlobalKeydown);
+
+      // Check for updates on startup
+      if (config.update_checks_enabled) {
+        updateNotification?.checkForUpdates();
+      }
     }
   });
 
@@ -40,6 +178,7 @@
     if (initialized) {
       cleanupTauriListeners();
       cleanupNotificationSync();
+      window.removeEventListener("keydown", handleGlobalKeydown);
       initialized = false;
     }
   });
@@ -51,25 +190,36 @@
   <main class="flex-1 flex overflow-hidden">
     <!-- Left panel: Character display -->
     <div
-      class="character-panel w-1/3 flex flex-col items-center justify-center border-r border-[var(--border-color)] bg-[var(--bg-secondary)]/50"
+      class="character-panel flex flex-col items-center justify-center bg-[var(--bg-secondary)]/50"
+      style="width: {panelWidth}px; min-width: {MIN_PANEL_WIDTH}px; max-width: {MAX_PANEL_WIDTH}px;"
     >
       <AnimeGirl />
     </div>
 
+    <!-- Resize handle -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="resize-handle w-1 cursor-col-resize bg-[var(--border-color)] hover:bg-[var(--accent-primary)] transition-colors flex-shrink-0"
+      class:bg-[var(--accent-primary)]={isResizing}
+      onmousedown={startResize}
+    ></div>
+
     <!-- Right panel: Terminal and input -->
-    <div class="terminal-panel flex-1 flex flex-col">
+    <div class="terminal-panel flex-1 flex flex-col min-w-0">
       <Terminal />
       <InputBar />
     </div>
   </main>
 
   <PermissionModal />
+  <UserQuestionModal />
   <ConfigSidebar />
   <AchievementNotification />
   <AchievementsPanel
     bind:isOpen={achievementPanelOpen}
     onClose={() => (achievementPanelOpen = false)}
   />
+  <UpdateNotification bind:this={updateNotification} />
 </div>
 
 <style>
@@ -84,7 +234,11 @@
   }
 
   .character-panel {
-    min-width: 320px;
     background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
   }
+
+  .resize-handle:hover,
+  .resize-handle:active {
+    width: 4px;
+  }
 </style>