diff --git a/bun.lock b/bun.lock
index 7f82d1e..97e048f 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,9 +6,11 @@
       "name": "thuki",
       "dependencies": {
         "@fontsource/nunito": "^5.2.7",
+        "@lexical/react": "^0.45.0",
         "@tauri-apps/api": "^2.11.0",
         "framer-motion": "^12.38.0",
         "katex": "^0.16.0",
+        "lexical": "^0.45.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "rehype-katex": "^7.0.1",
@@ -134,6 +136,16 @@
 
     "@exodus/bytes": ["@exodus/bytes@1.15.0", "", { "peerDependencies": { "@noble/hashes": "^1.8.0 || ^2.0.0" }, "optionalPeers": ["@noble/hashes"] }, "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ=="],
 
+    "@floating-ui/core": ["@floating-ui/core@1.7.5", "", { "dependencies": { "@floating-ui/utils": "^0.2.11" } }, "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ=="],
+
+    "@floating-ui/dom": ["@floating-ui/dom@1.7.6", "", { "dependencies": { "@floating-ui/core": "^1.7.5", "@floating-ui/utils": "^0.2.11" } }, "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ=="],
+
+    "@floating-ui/react": ["@floating-ui/react@0.27.19", "", { "dependencies": { "@floating-ui/react-dom": "^2.1.8", "@floating-ui/utils": "^0.2.11", "tabbable": "^6.0.0" }, "peerDependencies": { "react": ">=17.0.0", "react-dom": ">=17.0.0" } }, "sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog=="],
+
+    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.8", "", { "dependencies": { "@floating-ui/dom": "^1.7.6" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A=="],
+
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.11", "", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="],
+
     "@fontsource/nunito": ["@fontsource/nunito@5.2.7", "", {}, "sha512-pmtBq0H9ex9nk+RtJYEJOD9pag393iHETnl/PVKleF4i06cd0ttngK5ZCTgYb5eOqR3Xdlrjtev8m7bmgYprew=="],
 
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
@@ -168,6 +180,50 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@lexical/clipboard": ["@lexical/clipboard@0.45.0", "", { "dependencies": { "@lexical/extension": "0.45.0", "@lexical/html": "0.45.0", "@lexical/internal": "0.45.0", "@lexical/list": "0.45.0", "@lexical/selection": "0.45.0", "@lexical/utils": "0.45.0", "@types/trusted-types": "^2.0.7", "lexical": "0.45.0" } }, "sha512-9oDu2SNj/EZGjpXJTruz74Ls3VzF2Q41v1QB7JnTq5lh24byvIOdgEpOFHtr/7WVHssfXCbMtgFb5tW8rMaZ2g=="],
+
+    "@lexical/code-core": ["@lexical/code-core@0.45.0", "", { "dependencies": { "@lexical/extension": "0.45.0", "@lexical/html": "0.45.0", "@lexical/internal": "0.45.0", "lexical": "0.45.0" } }, "sha512-zU3noYmfluSK38r0eBz3gHKzsgOksf9eHqoPIwXH6HovKCDo848HoW0i/hCRzRo9oPqydKikx0LIKUvWSaSNIw=="],
+
+    "@lexical/devtools-core": ["@lexical/devtools-core@0.45.0", "", { "dependencies": { "@lexical/html": "0.45.0", "@lexical/link": "0.45.0", "@lexical/mark": "0.45.0", "@lexical/table": "0.45.0", "@lexical/utils": "0.45.0", "lexical": "0.45.0" }, "peerDependencies": { "react": ">=17.x", "react-dom": ">=17.x" } }, "sha512-XiVedKif5nWbNj2CeNy30kokfk/iYb7Db+B1Z18bnr/uzp6IzkxpX6I4GeZu4HVbQJhGMCAdq19tFpYwXOx4sw=="],
+
+    "@lexical/dragon": ["@lexical/dragon@0.45.0", "", { "dependencies": { "@lexical/extension": "0.45.0", "lexical": "0.45.0" } }, "sha512-34k2/QuM8A9WVqVCtNGx1ySBWXxMVKejKH3VBWnXEb1NdrDa/N8jLpu0gOCLcrrDjMdUzs9uVgW0D4FRf1Lixg=="],
+
+    "@lexical/extension": ["@lexical/extension@0.45.0", "", { "dependencies": { "@lexical/internal": "0.45.0", "@lexical/utils": "0.45.0", "@preact/signals-core": "^1.14.1", "lexical": "0.45.0" } }, "sha512-oJs1Zvrsqh32zZmeCkTQi7R2WoVIvaQE265JFZ/VczWlsWRdkkWQbGZ6iOlBZ3AmtiNgHoBeB0gZSoRQtWEQyA=="],
+
+    "@lexical/hashtag": ["@lexical/hashtag@0.45.0", "", { "dependencies": { "@lexical/text": "0.45.0", "@lexical/utils": "0.45.0", "lexical": "0.45.0" } }, "sha512-gFX4n+9RjOFVkNUkEcv3JeQT0LvZ8fiHWHrIkg1m3JbyloG6mKDlsSlO1qnIPUaAB4V62Tbnmfv3I0qp1UvNuw=="],
+
+    "@lexical/history": ["@lexical/history@0.45.0", "", { "dependencies": { "@lexical/extension": "0.45.0", "@lexical/utils": "0.45.0", "lexical": "0.45.0" } }, "sha512-KihtI8485Wx7kyFCtKNKk/nO2jSibRa8iL0OiKPZsYWVAQF5vFG3J00epX8EkEpeCx8Zjmj+3eytY05HPNd2nA=="],
+
+    "@lexical/html": ["@lexical/html@0.45.0", "", { "dependencies": { "@lexical/extension": "0.45.0", "@lexical/internal": "0.45.0", "@lexical/selection": "0.45.0", "@lexical/utils": "0.45.0", "lexical": "0.45.0" } }, "sha512-eK215f25cnAcIzNB1iRltg8hbvkK5wyyXvKQUqhfG/9HaSSVBCPuCyXKZicjZllQNvbFINGHFhTIqSP56drFSw=="],
+
+    "@lexical/internal": ["@lexical/internal@0.45.0", "", {}, "sha512-IhyzCdb1/xdpTtvK0xnqUXpaVRsD2KTZ6EMZpavm6dhKaglf1zorpdbH7r6Hjps6SRb4DCn/t7lac+GMdDFbXg=="],
+
+    "@lexical/link": ["@lexical/link@0.45.0", "", { "dependencies": { "@lexical/extension": "0.45.0", "@lexical/html": "0.45.0", "@lexical/internal": "0.45.0", "@lexical/utils": "0.45.0", "lexical": "0.45.0" } }, "sha512-9xpsRQ06IA4eVnx4OtFV0+Tmp2Etvh0dh9FTFd/LJYaqo2A0ZIuNUggueDZ0i2dhi8wWW8J08O7U0HxLcDWHAg=="],
+
+    "@lexical/list": ["@lexical/list@0.45.0", "", { "dependencies": { "@lexical/extension": "0.45.0", "@lexical/html": "0.45.0", "@lexical/internal": "0.45.0", "@lexical/utils": "0.45.0", "lexical": "0.45.0" } }, "sha512-Eyff9KVLu5mV4QSid2aw9uYmKDKgDYToAaagI9Sp3VgqTMmvRUQJ0w7sr4zq8/FRKSzrsf4V2FjvLAuQE7eBUQ=="],
+
+    "@lexical/mark": ["@lexical/mark@0.45.0", "", { "dependencies": { "@lexical/utils": "0.45.0", "lexical": "0.45.0" } }, "sha512-PMyGmnF6koE5TKCDlGe1k1t1ZOefReyYaKtx6OY3Tf1AyyKII6zRGR+dANrgWzYliYO7j4mpKBK00ykOnuF3zA=="],
+
+    "@lexical/markdown": ["@lexical/markdown@0.45.0", "", { "dependencies": { "@lexical/code-core": "0.45.0", "@lexical/internal": "0.45.0", "@lexical/link": "0.45.0", "@lexical/list": "0.45.0", "@lexical/rich-text": "0.45.0", "@lexical/selection": "0.45.0", "@lexical/text": "0.45.0", "@lexical/utils": "0.45.0", "lexical": "0.45.0" } }, "sha512-fl/UUwudBXGnz44kOS07ZRN0DMfOWNnVl7GSSNyz6zDo1cMD60URt7LjF51bAG2oL8i1eRDX4/GV+7vBcuoGzw=="],
+
+    "@lexical/overflow": ["@lexical/overflow@0.45.0", "", { "dependencies": { "lexical": "0.45.0" } }, "sha512-iw6Gc85phIGEjAFRDLiGOrnxK/EjyRlEfQHI7BeU0m+qHDCc94cThbeuaPTC7nnxHytFbRdtJIhoQvvcUR+PKA=="],
+
+    "@lexical/plain-text": ["@lexical/plain-text@0.45.0", "", { "dependencies": { "@lexical/clipboard": "0.45.0", "@lexical/dragon": "0.45.0", "@lexical/extension": "0.45.0", "@lexical/selection": "0.45.0", "@lexical/utils": "0.45.0", "lexical": "0.45.0" } }, "sha512-453bsKVk3oY5/ktp3A2zO2nFdXniU/zfD87eIcN50aXrIwvNm082GkfmBaDeVujk7fLgC2hG980xdcEH4xcG3w=="],
+
+    "@lexical/react": ["@lexical/react@0.45.0", "", { "dependencies": { "@floating-ui/react": "^0.27.19", "@lexical/devtools-core": "0.45.0", "@lexical/dragon": "0.45.0", "@lexical/extension": "0.45.0", "@lexical/hashtag": "0.45.0", "@lexical/history": "0.45.0", "@lexical/internal": "0.45.0", "@lexical/link": "0.45.0", "@lexical/list": "0.45.0", "@lexical/mark": "0.45.0", "@lexical/markdown": "0.45.0", "@lexical/overflow": "0.45.0", "@lexical/plain-text": "0.45.0", "@lexical/rich-text": "0.45.0", "@lexical/table": "0.45.0", "@lexical/text": "0.45.0", "@lexical/utils": "0.45.0", "@lexical/yjs": "0.45.0", "lexical": "0.45.0", "react-error-boundary": "^6.1.1" }, "peerDependencies": { "react": ">=17.x", "react-dom": ">=17.x", "yjs": ">=13.5.22" }, "optionalPeers": ["yjs"] }, "sha512-LAaceAtcQpVMDvldhkrQC1MSawpj7aAm1CfGg6RbyQgTDDp2fKnP1gDhjQIef3lH8W2fYeXRe66EdzaFkoGHKA=="],
+
+    "@lexical/rich-text": ["@lexical/rich-text@0.45.0", "", { "dependencies": { "@lexical/clipboard": "0.45.0", "@lexical/dragon": "0.45.0", "@lexical/extension": "0.45.0", "@lexical/html": "0.45.0", "@lexical/selection": "0.45.0", "@lexical/utils": "0.45.0", "lexical": "0.45.0" } }, "sha512-jd+jIsDirqILuUQiNUJAzZWynVZHuN1ekqYcydgDFaUXMFBQgVr3mBUieQzMw2IDAEk98txntu/mZQav4BryQQ=="],
+
+    "@lexical/selection": ["@lexical/selection@0.45.0", "", { "dependencies": { "@lexical/internal": "0.45.0", "lexical": "0.45.0" } }, "sha512-V2DYMhl84F1aZ24YpWMMqy9ikO7cVfD3G+GjMwrZnMt0JVnIghjPiYIEBb/OtqqA+mCbBwNhfpdK1RtF9HTbJA=="],
+
+    "@lexical/table": ["@lexical/table@0.45.0", "", { "dependencies": { "@lexical/clipboard": "0.45.0", "@lexical/extension": "0.45.0", "@lexical/html": "0.45.0", "@lexical/internal": "0.45.0", "@lexical/utils": "0.45.0", "lexical": "0.45.0" } }, "sha512-OXbwEg0DqkTdvqnu7z+/u8bgnDz2sjHHXCG3zGRhEzDgHcWoVQ18IciwMdse7dTTNfBIJMuGJcRoWPrHf9UlhQ=="],
+
+    "@lexical/text": ["@lexical/text@0.45.0", "", { "dependencies": { "@lexical/internal": "0.45.0", "lexical": "0.45.0" } }, "sha512-ozI8fDsLTYAzEWXaBrGYZ0GnRbbIHi4IL99w5q06UfTQzBMYmF7WaccDP1krOOwwioPYQbiqZM7dh/41jsFELQ=="],
+
+    "@lexical/utils": ["@lexical/utils@0.45.0", "", { "dependencies": { "@lexical/internal": "0.45.0", "@lexical/selection": "0.45.0", "lexical": "0.45.0" } }, "sha512-Fo5MMErqoPlUyTw1qVMZ9kE33ZjJF957KU683tsCrrlaVisVxpboL7BbAnxWTwCcIpAsfc6AUndJJ70M9NDMGg=="],
+
+    "@lexical/yjs": ["@lexical/yjs@0.45.0", "", { "dependencies": { "@lexical/internal": "0.45.0", "@lexical/selection": "0.45.0", "lexical": "0.45.0" }, "peerDependencies": { "yjs": ">=13.5.22" } }, "sha512-HYbOovvOavtF1S7C13l9g21s4MFLLd/o49qdn+/uGj23j4yjG556XBSrF0c3BREXDXSUr+RTbI6uiQ+L5Ofcmw=="],
+
     "@mermaid-js/parser": ["@mermaid-js/parser@1.1.0", "", { "dependencies": { "langium": "^4.0.0" } }, "sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw=="],
 
     "@mswjs/interceptors": ["@mswjs/interceptors@0.41.3", "", { "dependencies": { "@open-draft/deferred-promise": "^2.2.0", "@open-draft/logger": "^0.3.0", "@open-draft/until": "^2.0.0", "is-node-process": "^1.2.0", "outvariant": "^1.4.3", "strict-event-emitter": "^0.5.1" } }, "sha512-cXu86tF4VQVfwz8W1SPbhoRyHJkti6mjH/XJIxp40jhO4j2k1m4KYrEykxqWPkFF3vrK4rgQppBh//AwyGSXPA=="],
@@ -182,6 +238,8 @@
 
     "@oxc-project/types": ["@oxc-project/types@0.122.0", "", {}, "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA=="],
 
+    "@preact/signals-core": ["@preact/signals-core@1.14.2", "", {}, "sha512-RZHdBj9ZF4n40Rp4jS052EHHjBWf96P9oNdXPfhQTovCuWY9iQn3Gq+gOTJSgBO9A/JBuPfMOWsSX/lIU9Pc/A=="],
+
     "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.12", "", { "os": "android", "cpu": "arm64" }, "sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA=="],
 
     "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-rc.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg=="],
@@ -744,6 +802,8 @@
 
     "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
 
+    "isomorphic.js": ["isomorphic.js@0.2.5", "", {}, "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw=="],
+
     "istanbul-lib-coverage": ["istanbul-lib-coverage@3.2.2", "", {}, "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg=="],
 
     "istanbul-lib-report": ["istanbul-lib-report@3.0.1", "", { "dependencies": { "istanbul-lib-coverage": "^3.0.0", "make-dir": "^4.0.0", "supports-color": "^7.1.0" } }, "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw=="],
@@ -774,6 +834,10 @@
 
     "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
 
+    "lexical": ["lexical@0.45.0", "", { "dependencies": { "@lexical/internal": "0.45.0" } }, "sha512-z2M9C2ILPW7SopQE1aKbOFdZJbe3HvsrgWnJKveMDrSEvVjU9Hce4UpKVsAdkwY7TgY9RDuCV3+sfrGu0WkL+w=="],
+
+    "lib0": ["lib0@0.2.117", "", { "dependencies": { "isomorphic.js": "^0.2.4" }, "bin": { "0serve": "bin/0serve.js", "0gentesthtml": "bin/gentesthtml.js", "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js" } }, "sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw=="],
+
     "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
 
     "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
@@ -984,6 +1048,8 @@
 
     "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="],
 
+    "react-error-boundary": ["react-error-boundary@6.1.2", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0" } }, "sha512-3DpCr5HVdZ0caUjYE/kIHBEJN0mNP3ZCgf16c48uJ5TbWjorKVp+YG8W3XqlJ7vJAVNw6wNIImyPXmFydwmyng=="],
+
     "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
 
     "redent": ["redent@3.0.0", "", { "dependencies": { "indent-string": "^4.0.0", "strip-indent": "^3.0.0" } }, "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg=="],
@@ -1072,6 +1138,8 @@
 
     "symbol-tree": ["symbol-tree@3.2.4", "", {}, "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="],
 
+    "tabbable": ["tabbable@6.4.0", "", {}, "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg=="],
+
     "tagged-tag": ["tagged-tag@1.0.0", "", {}, "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng=="],
 
     "tailwind-merge": ["tailwind-merge@3.5.0", "", {}, "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A=="],
@@ -1194,6 +1262,8 @@
 
     "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
 
+    "yjs": ["yjs@13.6.31", "", { "dependencies": { "lib0": "^0.2.99" } }, "sha512-Eq+5BRfbeGyqGVrTJL3bEcr8gKkxPuyuoHmAwpk52fDb8kOVMrfVSTRPd6yiGgX5Fskb96qCRjzjbRjrL4YEnw=="],
+
     "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
 
     "yoctocolors-cjs": ["yoctocolors-cjs@2.1.3", "", {}, "sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw=="],
diff --git a/package.json b/package.json
index 42e7ac3..9003e43 100644
--- a/package.json
+++ b/package.json
@@ -40,9 +40,11 @@
   },
   "dependencies": {
     "@fontsource/nunito": "^5.2.7",
+    "@lexical/react": "^0.45.0",
     "@tauri-apps/api": "^2.11.0",
     "framer-motion": "^12.38.0",
     "katex": "^0.16.0",
+    "lexical": "^0.45.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "rehype-katex": "^7.0.1",
diff --git a/src/App.css b/src/App.css
index 7622657..115f7ad 100644
--- a/src/App.css
+++ b/src/App.css
@@ -182,20 +182,36 @@ body {
   scrollbar-gutter: stable;
 }
 
-/* ─── AskBar Textarea ───
- * Hide the native scrollbar so the textarea's wrapping width matches the
- * highlight mirror div behind it. Without this, once content exceeds the
- * 144px cap and the textarea begins scrolling, the system scrollbar
- * consumes a few pixels of content width, causing wrapped lines in the
- * textarea and the mirror to diverge — the caret then floats above the
- * visible text. The hook syncs scrollTop so caret-follow still works.
- */
-.askbar-textarea {
+/* ─── AskBar input (Lexical contentEditable) ───
+ * A single editable element replaces the old transparent-textarea + highlight
+ * mirror overlay. Because the caret lives in the same element as the rendered
+ * glyphs, it can never drift off the text the way the two-layer overlay did in
+ * WebKit. Caps growth at 144px and hides the scrollbar; command tokens are
+ * colored inline by CommandNode. */
+.askbar-input {
+  caret-color: var(--color-text-primary);
+  max-height: 144px;
+  overflow-y: auto;
   scrollbar-width: none;
+  /* Re-enable selection: the global `body { user-select: none }` is inherited
+   * by this <div> (the old <textarea> was exempt as a form control). Without
+   * this you cannot drag-select text to replace it. */
+  user-select: text;
+  -webkit-user-select: text;
 }
-.askbar-textarea::-webkit-scrollbar {
+.askbar-input::-webkit-scrollbar {
   display: none;
 }
+/* Placeholder overlay shown while the editor is empty. Offset matches the
+ * input's px-1 py-2 padding so it sits exactly where typed text begins. */
+.askbar-placeholder {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.25rem;
+  pointer-events: none;
+  user-select: none;
+  color: var(--color-text-secondary);
+}
 
 /* AI prose: warm cream, looser leading. Scoped to .markdown-body so UI chrome stays separate. */
 .markdown-body {
@@ -208,7 +224,7 @@ body {
 }
 
 /* User-tunable text scale shared by the user chat bubble text and the AskBar
- * textarea + caret-tracking mirror. The CSS variables are set on <html> by an
+ * input. The CSS variables are set on <html> by an
  * effect in App.tsx; the fallbacks preserve the pre-tunable Tailwind metrics
  * (text-sm = 14px, leading-5 = 1.25, no letter-spacing, weight 500) when the
  * variables are unset (e.g. test environments without the effect mounted). */
diff --git a/src/App.tsx b/src/App.tsx
index a6a605d..bfee586 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -541,7 +541,7 @@ function App() {
    */
   const [searchActive, setSearchActive] = useState(false);
 
-  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const inputRef = useRef<HTMLDivElement>(null);
 
   /** Images attached to the current (unsent) message. Blob URLs render
    *  immediately; file paths are set asynchronously after Rust processing. */
@@ -1962,7 +1962,6 @@ function App() {
         URL.revokeObjectURL(img.blobUrl);
       }
       setAttachedImages([]);
-      inputRef.current!.style.height = 'auto';
     },
     [ask, attachedImages, setSelectedContext],
   );
@@ -2000,9 +1999,6 @@ function App() {
       );
       setQuery('');
       setSelectedContext(null);
-      /* v8 ignore start -- inputRef always set when overlay is visible */
-      if (inputRef.current) inputRef.current.style.height = 'auto';
-      /* v8 ignore stop */
 
       let screenshotPath: string;
       try {
@@ -2089,9 +2085,6 @@ function App() {
       );
       setQuery('');
       setSelectedContext(null);
-      /* v8 ignore start -- inputRef always set when overlay is visible */
-      if (inputRef.current) inputRef.current.style.height = 'auto';
-      /* v8 ignore stop */
 
       // Capture screen if /screen is present.
       let screenshotPath: string | undefined;
@@ -2229,9 +2222,6 @@ function App() {
       );
       setQuery('');
       setSelectedContext(null);
-      /* v8 ignore start -- inputRef always set when overlay is visible */
-      if (inputRef.current) inputRef.current.style.height = 'auto';
-      /* v8 ignore stop */
 
       // Capture screen if /screen is present.
       let screenshotPath: string | undefined;
@@ -2666,8 +2656,6 @@ function App() {
       const searchDisplay = hasSearch ? trimmedQuery : undefined;
       setQuery('');
       setSelectedContext(null);
-      /* v8 ignore next */
-      inputRef.current!.style.height = 'auto';
       setSearchActive(true);
       void askSearch(searchQuery, searchDisplay, searchContext).then(
         ({ final }) => {
@@ -2723,9 +2711,6 @@ function App() {
         }),
       );
       setQuery('');
-      /* v8 ignore start -- inputRef always set when overlay is visible */
-      if (inputRef.current) inputRef.current.style.height = 'auto';
-      /* v8 ignore stop */
 
       if (hasExtract) {
         pendingSubmitRef.current = {
@@ -2810,8 +2795,6 @@ function App() {
       );
       setSelectedContext(null);
       setQuery('');
-      /* v8 ignore next */
-      inputRef.current!.style.height = 'auto';
       return;
     }
 
@@ -3134,6 +3117,17 @@ function App() {
       return;
     }
 
+    // 1b. Allow text selection / editing inside the contenteditable input.
+    // The AskBar input is a <div contenteditable>, not a <textarea>, so it is
+    // not caught by INTERACTIVE_TAGS below; without this a drag inside it would
+    // move the window instead of selecting text. Match the editable region by
+    // attribute (covers the editor element and every descendant, e.g.
+    // command-token spans) and only while editable, so dragging still works
+    // when the input is disabled during generation.
+    if (el?.closest('[contenteditable="true"]')) {
+      return;
+    }
+
     // 2. Allow interaction with standard interactive elements.
     const INTERACTIVE_TAGS = new Set([
       'TEXTAREA',
diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx
index 37d9a02..6cc657c 100644
--- a/src/__tests__/App.test.tsx
+++ b/src/__tests__/App.test.tsx
@@ -26,11 +26,55 @@ import {
   __setAvailableMonitors,
 } from '../testUtils/mocks/tauri-window';
 import { useTips } from '../hooks/useTips';
+import { flushSync } from 'react-dom';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  type LexicalEditor,
+} from 'lexical';
 
 vi.mock('../hooks/useTips', () => ({
   useTips: vi.fn(() => ({ tip: '', tipKey: 0, isVisible: false })),
 }));
 
+/** The AskBar Lexical contentEditable input (role="textbox"). */
+function getAskInput(): HTMLElement {
+  return screen.getByTestId('askbar-input');
+}
+
+/**
+ * Sets the AskBar editor's text, mimicking the user typing it. jsdom does not
+ * synthesize contentEditable edits from key events, so the value is applied via
+ * the editor API; this still drives the real value-sync (onValueChange) path.
+ */
+function setAskValue(text: string): void {
+  const editor = (
+    getAskInput() as unknown as { __lexicalEditor: LexicalEditor }
+  ).__lexicalEditor;
+  // `discrete: true` commits + fires update listeners synchronously, and
+  // flushSync forces React to apply the resulting setQuery before we return, so
+  // callers can read the updated state immediately (mirrors the old synchronous
+  // fireEvent.change behavior).
+  act(() => {
+    // test-only: force the controlled value sync to apply synchronously so
+    // callers can read the updated state immediately.
+    // eslint-disable-next-line @eslint-react/dom-no-flush-sync
+    flushSync(() => {
+      editor.update(
+        () => {
+          const root = $getRoot();
+          root.clear();
+          const paragraph = $createParagraphNode();
+          if (text) paragraph.append($createTextNode(text));
+          root.append(paragraph);
+        },
+        { discrete: true },
+      );
+    });
+  });
+}
+
 async function showOverlay(selectedText: string | null = null) {
   await act(async () => {
     emitTauriEvent('thuki://visibility', {
@@ -113,9 +157,9 @@ describe('App', () => {
     await showOverlay();
 
     // Send one message + simulate Done so messages.length > 0 → chat mode.
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: 'hello' } });
+      setAskValue('hello');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -167,9 +211,9 @@ describe('App', () => {
     await act(async () => {});
     await showOverlay();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: 'hello' } });
+      setAskValue('hello');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -257,8 +301,8 @@ describe('App', () => {
       fireEvent.click(screen.getByRole('option', { name: 'qwen2.5:7b' }));
     });
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-    fireEvent.change(textarea, { target: { value: 'hello there' } });
+    const textarea = getAskInput();
+    setAskValue('hello there');
     fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
     await act(async () => {});
 
@@ -427,8 +471,8 @@ describe('App', () => {
       screen.getByRole('option', { name: 'gemma4:e2b' }),
     ).toBeInTheDocument();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-    fireEvent.change(textarea, { target: { value: 'hi' } });
+    const textarea = getAskInput();
+    setAskValue('hi');
     fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
     await act(async () => {});
 
@@ -448,8 +492,8 @@ describe('App', () => {
     await showOverlay();
 
     // Transition to chat mode by submitting a message
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-    fireEvent.change(textarea, { target: { value: 'hi' } });
+    const textarea = getAskInput();
+    setAskValue('hi');
     fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
     await act(async () => {});
 
@@ -487,8 +531,8 @@ describe('App', () => {
     await act(async () => {});
     await showOverlay();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-    fireEvent.change(textarea, { target: { value: 'hi' } });
+    const textarea = getAskInput();
+    setAskValue('hi');
     fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
     await act(async () => {});
     act(() => {
@@ -520,8 +564,8 @@ describe('App', () => {
     await act(async () => {});
     await showOverlay();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-    fireEvent.change(textarea, { target: { value: 'hi' } });
+    const textarea = getAskInput();
+    setAskValue('hi');
     fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
     await act(async () => {});
     act(() => {
@@ -667,9 +711,9 @@ describe('App', () => {
       });
     });
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     await act(async () => {
-      fireEvent.change(textarea, { target: { value: 'hi' } });
+      setAskValue('hi');
     });
     await act(async () => {
       fireEvent.keyDown(textarea, { key: 'Enter', code: 'Enter' });
@@ -698,9 +742,9 @@ describe('App', () => {
       });
     });
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     await act(async () => {
-      fireEvent.change(textarea, { target: { value: 'hi' } });
+      setAskValue('hi');
       fireEvent.keyDown(textarea, { key: 'Enter', code: 'Enter' });
     });
 
@@ -739,9 +783,7 @@ describe('App', () => {
 
     await showOverlay();
 
-    expect(
-      screen.getByPlaceholderText('Ask Thuki anything...'),
-    ).toBeInTheDocument();
+    expect(getAskInput()).toBeInTheDocument();
   });
 
   it('handles a restore visibility event without wiping the conversation', async () => {
@@ -758,9 +800,9 @@ describe('App', () => {
     await act(async () => {});
     await showOverlay();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: 'hello' } });
+      setAskValue('hello');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -800,9 +842,9 @@ describe('App', () => {
     await act(async () => {});
     await showOverlay();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: 'hello' } });
+      setAskValue('hello');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -833,9 +875,7 @@ describe('App', () => {
     await showOverlay();
 
     // Confirm overlay is visible
-    expect(
-      screen.getByPlaceholderText('Ask Thuki anything...'),
-    ).toBeInTheDocument();
+    expect(getAskInput()).toBeInTheDocument();
 
     act(() => {
       fireEvent.keyDown(window, { key: 'Escape' });
@@ -852,9 +892,9 @@ describe('App', () => {
 
     await showOverlay();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: '/search rust async' } });
+      setAskValue('/search rust async');
     });
     await act(async () => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -880,12 +920,10 @@ describe('App', () => {
 
     await showOverlay();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
 
     // Type a message
-    act(() => {
-      fireEvent.change(textarea, { target: { value: 'hello there' } });
-    });
+    setAskValue('hello there');
 
     // Submit with Enter
     act(() => {
@@ -921,9 +959,7 @@ describe('App', () => {
 
     // First show overlay
     await showOverlay();
-    expect(
-      screen.getByPlaceholderText('Ask Thuki anything...'),
-    ).toBeInTheDocument();
+    expect(getAskInput()).toBeInTheDocument();
 
     // Then send hide-request - calls requestHideOverlay() (not handleCloseOverlay)
     await act(async () => {
@@ -940,9 +976,7 @@ describe('App', () => {
     await act(async () => {});
 
     await showOverlay();
-    expect(
-      screen.getByPlaceholderText('Ask Thuki anything...'),
-    ).toBeInTheDocument();
+    expect(getAskInput()).toBeInTheDocument();
 
     act(() => {
       fireEvent.keyDown(window, { key: 'w', metaKey: true });
@@ -990,7 +1024,7 @@ describe('App', () => {
 
     await showOverlay();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
 
     // Press Enter with empty textarea
     act(() => {
@@ -1011,12 +1045,9 @@ describe('App', () => {
 
     // First message kicks off streaming. The captured channel never sends
     // Done, so generation stays active for the rest of the test.
-    const askBar = screen.getByPlaceholderText('Ask Thuki anything...');
+    setAskValue('first message');
     act(() => {
-      fireEvent.change(askBar, { target: { value: 'first message' } });
-    });
-    act(() => {
-      fireEvent.keyDown(askBar, { key: 'Enter', shiftKey: false });
+      fireEvent.keyDown(getAskInput(), { key: 'Enter', shiftKey: false });
     });
     await act(async () => {});
 
@@ -1025,23 +1056,18 @@ describe('App', () => {
     expect(askCalls()).toBe(1);
 
     // While streaming, the composer (now in chat mode) stays editable.
-    const composer = screen.getByPlaceholderText('Reply...');
-    expect((composer as HTMLTextAreaElement).disabled).toBe(false);
+    expect(getAskInput().getAttribute('contenteditable')).toBe('true');
 
     // Drafting a follow-up and pressing Enter must NOT fire a second request,
     // and the draft must remain in the box.
+    setAskValue('drafted mid-stream');
     act(() => {
-      fireEvent.change(composer, { target: { value: 'drafted mid-stream' } });
-    });
-    act(() => {
-      fireEvent.keyDown(composer, { key: 'Enter', shiftKey: false });
+      fireEvent.keyDown(getAskInput(), { key: 'Enter', shiftKey: false });
     });
     await act(async () => {});
 
     expect(askCalls()).toBe(1);
-    expect(
-      (screen.getByPlaceholderText('Reply...') as HTMLTextAreaElement).value,
-    ).toBe('drafted mid-stream');
+    expect(getAskInput().textContent).toBe('drafted mid-stream');
   });
 
   it('fires drag on non-interactive mousedown', async () => {
@@ -1091,9 +1117,9 @@ describe('App', () => {
     await showOverlay();
 
     // Send a message to enter chat mode so ChatBubble (with .select-text) renders
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: 'test message' } });
+      setAskValue('test message');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1116,13 +1142,13 @@ describe('App', () => {
     }
   });
 
-  it('does not fire drag when mousedown on TEXTAREA', async () => {
+  it('does not fire drag when mousedown on the contenteditable input', async () => {
     render(<App />);
     await act(async () => {});
 
     await showOverlay();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     __mockWindow.startDragging.mockClear();
 
     act(() => {
@@ -1139,9 +1165,9 @@ describe('App', () => {
     // Show with selected context
     await showOverlay('selected snippet');
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: 'my question' } });
+      setAskValue('my question');
     });
 
     act(() => {
@@ -1183,9 +1209,9 @@ describe('App', () => {
     await act(async () => {});
     await showOverlay('draft email text');
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: '/rewrite ' } });
+      setAskValue('/rewrite ');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1236,9 +1262,9 @@ describe('App', () => {
     await act(async () => {});
     await showOverlay('draft email text');
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: '/rewrite ' } });
+      setAskValue('/rewrite ');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1286,9 +1312,9 @@ describe('App', () => {
     await showOverlay('draft email text');
     __mockWindow.hide.mockClear();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: '/rewrite ' } });
+      setAskValue('/rewrite ');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1336,9 +1362,9 @@ describe('App', () => {
     await showOverlay('draft email text');
     __mockWindow.hide.mockClear();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: '/rewrite ' } });
+      setAskValue('/rewrite ');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1383,9 +1409,9 @@ describe('App', () => {
     await act(async () => {});
     await showOverlay('draft email text');
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: '/rewrite ' } });
+      setAskValue('/rewrite ');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1405,7 +1431,7 @@ describe('App', () => {
     // A plain refinement inherits sticky rewrite mode, so its result is
     // replaceable too.
     act(() => {
-      fireEvent.change(textarea, { target: { value: 'make it longer' } });
+      setAskValue('make it longer');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1451,9 +1477,9 @@ describe('App', () => {
     await act(async () => {});
     await showOverlay('draft email text');
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     act(() => {
-      fireEvent.change(textarea, { target: { value: '/rewrite ' } });
+      setAskValue('/rewrite ');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1468,7 +1494,7 @@ describe('App', () => {
     // A non-replaceable command exits rewrite mode for itself and for any
     // later plain follow-up.
     act(() => {
-      fireEvent.change(textarea, { target: { value: '/tldr wrap this up' } });
+      setAskValue('/tldr wrap this up');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1481,7 +1507,7 @@ describe('App', () => {
     await act(async () => {});
 
     act(() => {
-      fireEvent.change(textarea, { target: { value: 'and again' } });
+      setAskValue('and again');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1846,9 +1872,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'test' } });
+        setAskValue('test');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1872,9 +1898,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'question' } });
+        setAskValue('question');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1909,9 +1935,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'question' } });
+        setAskValue('question');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -1963,9 +1989,9 @@ describe('App', () => {
       await showOverlay();
 
       // Send message + Done
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hello' } });
+        setAskValue('hello');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -2003,9 +2029,9 @@ describe('App', () => {
       await showOverlay();
 
       // Get into chat mode with an unsaved turn
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'question' } });
+        setAskValue('question');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -2033,9 +2059,7 @@ describe('App', () => {
         fireEvent.click(screen.getByRole('button', { name: 'Start New' }));
       });
 
-      expect(
-        screen.getByPlaceholderText('Ask Thuki anything...'),
-      ).toBeInTheDocument();
+      expect(getAskInput()).toBeInTheDocument();
     });
 
     it('handleNewConversation Cancel closes the history dropdown', async () => {
@@ -2048,9 +2072,9 @@ describe('App', () => {
       await showOverlay();
 
       // Get into chat mode with an unsaved turn
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'question' } });
+        setAskValue('question');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -2096,9 +2120,9 @@ describe('App', () => {
       await showOverlay();
 
       // Get into chat mode
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'question' } });
+        setAskValue('question');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -2124,9 +2148,7 @@ describe('App', () => {
       });
 
       // Should be directly back in ask-bar mode (no confirmation prompt)
-      expect(
-        screen.getByPlaceholderText('Ask Thuki anything...'),
-      ).toBeInTheDocument();
+      expect(getAskInput()).toBeInTheDocument();
     });
 
     it('handleNewConversation revokes blob URLs when images are attached', async () => {
@@ -2140,9 +2162,9 @@ describe('App', () => {
       await showOverlay();
 
       // Get into chat mode with an unsaved turn
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'question' } });
+        setAskValue('question');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -2154,11 +2176,12 @@ describe('App', () => {
       });
 
       // Paste an image while in chat mode (unsaved conversation)
-      const replyInput = screen.getByPlaceholderText('Reply...');
+      const replyInput = getAskInput();
       const file = new File(['data'], 'img.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(replyInput, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -2202,9 +2225,9 @@ describe('App', () => {
       await showOverlay();
 
       // Get into chat mode with an unsaved turn
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'question' } });
+        setAskValue('question');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -2233,9 +2256,7 @@ describe('App', () => {
         );
       });
 
-      expect(
-        screen.getByPlaceholderText('Ask Thuki anything...'),
-      ).toBeInTheDocument();
+      expect(getAskInput()).toBeInTheDocument();
     });
 
     it('handleSaveAndNew aborts reset when save fails', async () => {
@@ -2255,9 +2276,9 @@ describe('App', () => {
       await showOverlay();
 
       // Complete a turn so isSaved = false
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'q' } });
+        setAskValue('q');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -2322,9 +2343,9 @@ describe('App', () => {
       await showOverlay();
 
       // Complete a turn (unsaved)
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'q' } });
+        setAskValue('q');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -2387,9 +2408,9 @@ describe('App', () => {
       await showOverlay();
 
       // Complete a turn so isSaved = false
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'q' } });
+        setAskValue('q');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -2456,9 +2477,9 @@ describe('App', () => {
       await showOverlay();
 
       // Complete a turn
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'q' } });
+        setAskValue('q');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -2577,9 +2598,9 @@ describe('App', () => {
       await showOverlay();
 
       // Complete a turn to enter chat mode
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'q' } });
+        setAskValue('q');
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
       });
       await act(async () => {});
@@ -2613,9 +2634,9 @@ describe('App', () => {
       await showOverlay();
 
       // Complete a turn to enter chat mode
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'q' } });
+        setAskValue('q');
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
       });
       await act(async () => {});
@@ -2756,9 +2777,7 @@ describe('App', () => {
 
       // Panel must close even on failure; app must still be running
       expect(screen.queryByPlaceholderText(/search past chats/i)).toBeNull();
-      expect(
-        screen.getByPlaceholderText('Ask Thuki anything...'),
-      ).toBeInTheDocument();
+      expect(getAskInput()).toBeInTheDocument();
     });
 
     it('handleDeleteConversation does not reset history when a different conversation is deleted', async () => {
@@ -2801,11 +2820,12 @@ describe('App', () => {
   describe('image integration', () => {
     /** Helper: paste an image file into the textarea and wait for thumbnails. */
     async function pasteImage() {
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['fake-img-data'], 'photo.png', {
         type: 'image/png',
       });
       const clipboardData = {
+        getData: () => '',
         items: [{ type: 'image/png', getAsFile: () => file }],
       };
       await act(async () => {
@@ -2906,9 +2926,9 @@ describe('App', () => {
       });
 
       // Type a message and submit
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'describe this' } });
+        setAskValue('describe this');
       });
 
       invoke.mockClear();
@@ -2954,7 +2974,7 @@ describe('App', () => {
       enableChannelCapture();
 
       // Submit with Enter (no text, just images)
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
       });
@@ -3136,9 +3156,9 @@ describe('App', () => {
       await showOverlay();
 
       // Send a plain text message and complete the generation to enter chat mode
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hello' } });
+        setAskValue('hello');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -3153,7 +3173,7 @@ describe('App', () => {
       await act(async () => {});
 
       // Confirm we are in chat mode with generation complete
-      expect(screen.getByPlaceholderText('Reply...')).toBeInTheDocument();
+      expect(screen.getByText('Reply...')).toBeInTheDocument();
 
       // Now in chat mode. Drop image onto root div (not AskBarView specifically)
       const rootDiv = document.querySelector('.h-screen')!;
@@ -3199,7 +3219,7 @@ describe('App', () => {
       await showOverlay();
 
       // Paste 3 images to reach max
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       for (let i = 0; i < 3; i++) {
         const file = new File([`data${i}`], `img${i}.png`, {
           type: 'image/png',
@@ -3207,6 +3227,7 @@ describe('App', () => {
         await act(async () => {
           fireEvent.paste(textarea, {
             clipboardData: {
+              getData: () => '',
               items: [{ type: 'image/png', getAsFile: () => file }],
             },
           });
@@ -3252,9 +3273,9 @@ describe('App', () => {
       await showOverlay();
 
       // Submit to trigger isGenerating
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hi' } });
+        setAskValue('hi');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -3276,9 +3297,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hi' } });
+        setAskValue('hi');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -3318,12 +3339,13 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       for (let i = 0; i < 3; i++) {
         const img = new File([`d${i}`], `i${i}.png`, { type: 'image/png' });
         await act(async () => {
           fireEvent.paste(textarea, {
             clipboardData: {
+              getData: () => '',
               items: [{ type: 'image/png', getAsFile: () => img }],
             },
           });
@@ -3383,9 +3405,9 @@ describe('App', () => {
       });
 
       // Type and submit to create a user message with image
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'what is this?' } });
+        setAskValue('what is this?');
       });
 
       invoke.mockClear();
@@ -3450,11 +3472,12 @@ describe('App', () => {
       await showOverlay();
 
       // Paste and submit while still processing → pendingUserMessage with blob URL
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['data'], 'img.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -3467,7 +3490,7 @@ describe('App', () => {
       });
 
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'what is this?' } });
+        setAskValue('what is this?');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -3560,11 +3583,12 @@ describe('App', () => {
       await showOverlay();
 
       // Paste an image - thumbnail appears immediately with null filePath
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['data'], 'img.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -3628,11 +3652,12 @@ describe('App', () => {
       await showOverlay();
 
       // Paste an image; thumbnail appears immediately (filePath null)
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['data'], 'img.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -3645,7 +3670,7 @@ describe('App', () => {
 
       // Type and submit while image is still processing
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'describe this' } });
+        setAskValue('describe this');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -3676,9 +3701,9 @@ describe('App', () => {
       await showOverlay();
 
       // Start a normal text conversation (no images)
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hello' } });
+        setAskValue('hello');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -3727,11 +3752,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/search what is Rust?' },
-        });
+        setAskValue('/search what is Rust?');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -3746,12 +3769,12 @@ describe('App', () => {
 
       expect(invoke).toHaveBeenCalledWith('cancel_generation');
       expect(screen.queryByRole('button', { name: /stop/i })).toBeNull();
-      expect(textarea).not.toBeDisabled();
+      expect(getAskInput().getAttribute('contenteditable')).toBe('true');
 
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hello' } });
+        setAskValue('hello');
       });
-      expect(textarea).toHaveValue('hello');
+      expect(getAskInput().textContent).toBe('hello');
 
       await act(async () => {
         resolveCancel?.();
@@ -3798,11 +3821,12 @@ describe('App', () => {
       await showOverlay();
 
       // Paste an image
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['data'], 'img.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -3814,10 +3838,8 @@ describe('App', () => {
         ).toBeInTheDocument();
       });
 
-      // Type and submit while image is still processing
-      act(() => {
-        fireEvent.change(textarea, { target: { value: 'my question' } });
-      });
+      // Type and submit while image is still processing.
+      setAskValue('my question');
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
       });
@@ -3831,12 +3853,9 @@ describe('App', () => {
       });
 
       // Should revert to ask-bar mode with the query restored
-      const restoredTextarea = screen.getByPlaceholderText(
-        'Ask Thuki anything...',
-      );
-      expect(restoredTextarea).toBeInTheDocument();
-      expect((restoredTextarea as HTMLTextAreaElement).value).toBe(
-        'my question',
+      expect(getAskInput()).toBeInTheDocument();
+      await waitFor(() =>
+        expect(getAskInput().textContent).toBe('my question'),
       );
 
       // Images should still be visible (still processing in background)
@@ -3896,9 +3915,9 @@ describe('App', () => {
       });
 
       // Submit while both images are still processing
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'two images' } });
+        setAskValue('two images');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -3954,11 +3973,12 @@ describe('App', () => {
       await showOverlay();
 
       // Paste and submit while processing
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['data'], 'img.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -3971,7 +3991,7 @@ describe('App', () => {
       });
 
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'describe' } });
+        setAskValue('describe');
       });
 
       // Wait for FileReader to complete and save_image_command to be invoked
@@ -4014,9 +4034,7 @@ describe('App', () => {
       ).toBeInTheDocument();
 
       // User's query should be restored so their text isn't lost
-      expect(screen.getByPlaceholderText('Ask Thuki anything...')).toHaveValue(
-        'describe',
-      );
+      await waitFor(() => expect(getAskInput().textContent).toBe('describe'));
     });
   });
 
@@ -4025,11 +4043,12 @@ describe('App', () => {
   describe('capability gate', () => {
     /** Helper: paste an image file into the textarea and wait for thumbnails. */
     async function pasteImage() {
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['fake-img-data'], 'photo.png', {
         type: 'image/png',
       });
       const clipboardData = {
+        getData: () => '',
         items: [{ type: 'image/png', getAsFile: () => file }],
       };
       await act(async () => {
@@ -4104,9 +4123,8 @@ describe('App', () => {
       });
 
       // Type and submit.
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'summarise these' } });
+        setAskValue('summarise these');
       });
       invoke.mockClear();
       await act(async () => {
@@ -4124,9 +4142,7 @@ describe('App', () => {
       );
       expect(askInvocations.length).toBe(0);
       // Compose state survives.
-      expect(screen.getByPlaceholderText('Ask Thuki anything...')).toHaveValue(
-        'summarise these',
-      );
+      expect(getAskInput().textContent).toBe('summarise these');
       // Wait past the 600 ms shake reset so the cleanup runs and the
       // shake state pulses back to false. This exercises the effect's
       // setTimeout/clearTimeout path that the gate relies on.
@@ -4220,11 +4236,12 @@ describe('App', () => {
 
       // Attach 3 images via paste to reach the limit.
       const pasteOneImage = async () => {
-        const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+        const textarea = getAskInput();
         const file = new File(['data'], 'photo.png', { type: 'image/png' });
         await act(async () => {
           fireEvent.paste(textarea, {
             clipboardData: {
+              getData: () => '',
               items: [{ type: 'image/png', getAsFile: () => file }],
             },
           });
@@ -4283,11 +4300,12 @@ describe('App', () => {
     await showOverlay();
 
     // Paste an image so attachedImages is non-empty
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     const file = new File(['data'], 'img.png', { type: 'image/png' });
     await act(async () => {
       fireEvent.paste(textarea, {
         clipboardData: {
+          getData: () => '',
           items: [{ type: 'image/png', getAsFile: () => file }],
         },
       });
@@ -4315,11 +4333,12 @@ describe('App', () => {
     await act(async () => {});
     await showOverlay();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
     const file = new File(['data'], 'img.png', { type: 'image/png' });
     await act(async () => {
       fireEvent.paste(textarea, {
         clipboardData: {
+          getData: () => '',
           items: [{ type: 'image/png', getAsFile: () => file }],
         },
       });
@@ -4348,11 +4367,11 @@ describe('App', () => {
 
     await showOverlay();
 
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+    const textarea = getAskInput();
 
     // Complete a conversation turn
     act(() => {
-      fireEvent.change(textarea, { target: { value: 'first question' } });
+      setAskValue('first question');
     });
     act(() => {
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -4376,9 +4395,7 @@ describe('App', () => {
     await showOverlay();
 
     // Should be back to input bar mode with placeholder
-    expect(
-      screen.getByPlaceholderText('Ask Thuki anything...'),
-    ).toBeInTheDocument();
+    expect(getAskInput()).toBeInTheDocument();
     // Old messages should be gone
     expect(screen.queryByText('First response')).toBeNull();
   });
@@ -4397,9 +4414,9 @@ describe('App', () => {
 
       // Use "/screen " (with trailing space) so the suggestion popover is dismissed
       // and Enter goes to the submit handler directly.
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen ' } });
+        setAskValue('/screen ');
       });
 
       await act(async () => {
@@ -4430,11 +4447,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/screen what is this error?' },
-        });
+        setAskValue('/screen what is this error?');
       });
 
       await act(async () => {
@@ -4461,11 +4476,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: 'hello /screen there' },
-        });
+        setAskValue('hello /screen there');
       });
 
       await act(async () => {
@@ -4506,9 +4519,9 @@ describe('App', () => {
 
       // Use "/screen " (with trailing space) so the suggestion popover is dismissed
       // and Enter goes directly to the submit handler.
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen ' } });
+        setAskValue('/screen ');
       });
 
       await act(async () => {
@@ -4546,9 +4559,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen ' } });
+        setAskValue('/screen ');
       });
 
       await act(async () => {
@@ -4581,9 +4594,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen ' } });
+        setAskValue('/screen ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -4611,10 +4624,10 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       // First attempt fails; error banner appears.
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen ' } });
+        setAskValue('/screen ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -4624,7 +4637,7 @@ describe('App', () => {
 
       // Typing a new query and submitting normal text clears the error banner.
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hello' } });
+        setAskValue('hello');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -4646,11 +4659,12 @@ describe('App', () => {
 
       // Paste an image first. This exercises the filter/map on attachedImages inside
       // handleScreenSubmit, covering the lines for non-null filePath images.
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['img'], 'photo.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -4665,7 +4679,7 @@ describe('App', () => {
 
       // Now type /screen and submit.
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen describe' } });
+        setAskValue('/screen describe');
       });
 
       vi.useFakeTimers();
@@ -4711,9 +4725,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay('some context');
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen explain' } });
+        setAskValue('/screen explain');
       });
 
       await act(async () => {
@@ -4744,9 +4758,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen check this' } });
+        setAskValue('/screen check this');
       });
 
       // Submit; capture is now in-flight (pending)
@@ -4755,7 +4769,7 @@ describe('App', () => {
       });
 
       // Before capture resolves: query should be cleared and app in pending mode
-      expect((textarea as HTMLTextAreaElement).value).toBe('');
+      await waitFor(() => expect(getAskInput().textContent).toBe(''));
 
       // Resolve the capture and let async work settle
       await act(async () => {
@@ -4787,11 +4801,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/screen what is this?' },
-        });
+        setAskValue('/screen what is this?');
       });
 
       await act(async () => {
@@ -4800,8 +4812,8 @@ describe('App', () => {
       await act(async () => {});
 
       // Query should be restored with the full original message
-      expect((textarea as HTMLTextAreaElement).value).toBe(
-        '/screen what is this?',
+      await waitFor(() =>
+        expect(getAskInput().textContent).toBe('/screen what is this?'),
       );
       expect(screen.getByText('Screen capture timed out')).toBeInTheDocument();
     });
@@ -4825,11 +4837,12 @@ describe('App', () => {
       await showOverlay();
 
       // Paste an image; save_image_command hangs, so filePath stays null.
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['img'], 'photo.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -4837,7 +4850,7 @@ describe('App', () => {
 
       // Submit /screen while image is still processing.
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen ' } });
+        setAskValue('/screen ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -4887,9 +4900,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen ' } });
+        setAskValue('/screen ');
       });
 
       // Submit; capture is now in-flight
@@ -4923,9 +4936,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /explain ' } });
+        setAskValue('/screen /explain ');
       });
 
       await act(async () => {
@@ -4960,11 +4973,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/screen /explain this error message' },
-        });
+        setAskValue('/screen /explain this error message');
       });
 
       await act(async () => {
@@ -4999,11 +5010,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/screen what is this?' },
-        });
+        setAskValue('/screen what is this?');
       });
 
       await act(async () => {
@@ -5034,9 +5043,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay('my highlighted code');
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /explain ' } });
+        setAskValue('/screen /explain ');
       });
 
       await act(async () => {
@@ -5071,11 +5080,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/screen /translate ' },
-        });
+        setAskValue('/screen /translate ');
       });
 
       await act(async () => {
@@ -5100,11 +5107,12 @@ describe('App', () => {
 
   describe('/extract command', () => {
     async function pasteImageForExtract() {
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['fake-img-data'], 'photo.png', {
         type: 'image/png',
       });
       const clipboardData = {
+        getData: () => '',
         items: [{ type: 'image/png', getAsFile: () => file }],
       };
       await act(async () => {
@@ -5122,9 +5130,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/extract ' } });
+        setAskValue('/extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5163,9 +5171,9 @@ describe('App', () => {
         });
       });
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/extract ' } });
+        setAskValue('/extract ');
       });
 
       invoke.mockClear();
@@ -5193,9 +5201,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /extract ' } });
+        setAskValue('/screen /extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5245,9 +5253,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /extract ' } });
+        setAskValue('/screen /extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5294,9 +5302,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /extract ' } });
+        setAskValue('/screen /extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5327,9 +5335,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /extract ' } });
+        setAskValue('/screen /extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5367,9 +5375,8 @@ describe('App', () => {
         ).toBeInTheDocument();
       });
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/extract ' } });
+        setAskValue('/extract ');
       });
 
       // The capability mismatch strip must not appear when /extract is present.
@@ -5389,9 +5396,9 @@ describe('App', () => {
       // Show overlay with selected text to exercise the context branch.
       await showOverlay('Selected content here');
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /extract ' } });
+        setAskValue('/screen /extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5444,9 +5451,9 @@ describe('App', () => {
       await pasteImageForExtract();
       // Do NOT resolve save_image_command yet; image stays in-flight (filePath=null).
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/extract ' } });
+        setAskValue('/extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5490,9 +5497,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /extract ' } });
+        setAskValue('/screen /extract ');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5538,9 +5545,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /extract ' } });
+        setAskValue('/screen /extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5574,9 +5581,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /extract ' } });
+        setAskValue('/screen /extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5617,9 +5624,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /extract ' } });
+        setAskValue('/screen /extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5663,9 +5670,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /extract ' } });
+        setAskValue('/screen /extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5710,9 +5717,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /extract ' } });
+        setAskValue('/screen /extract ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -5737,11 +5744,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/think why is the sky blue?' },
-        });
+        setAskValue('/think why is the sky blue?');
       });
 
       await act(async () => {
@@ -5766,11 +5771,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/think explain recursion' },
-        });
+        setAskValue('/think explain recursion');
       });
 
       await act(async () => {
@@ -5808,9 +5811,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/think' } });
+        setAskValue('/think');
       });
 
       await act(async () => {
@@ -5829,11 +5832,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: 'hello /think world' },
-        });
+        setAskValue('hello /think world');
       });
 
       await act(async () => {
@@ -5858,11 +5859,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay('some selected text');
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/think explain this code' },
-        });
+        setAskValue('/think explain this code');
       });
 
       await act(async () => {
@@ -5888,9 +5887,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/think ' } });
+        setAskValue('/think ');
       });
 
       await act(async () => {
@@ -5916,11 +5915,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/screen /think explain this' },
-        });
+        setAskValue('/screen /think explain this');
       });
 
       await act(async () => {
@@ -5952,11 +5949,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/think /screen explain this' },
-        });
+        setAskValue('/think /screen explain this');
       });
 
       await act(async () => {
@@ -5990,11 +5985,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/rewrite fix this text' },
-        });
+        setAskValue('/rewrite fix this text');
       });
 
       await act(async () => {
@@ -6021,11 +6014,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/translate jpn hello world' },
-        });
+        setAskValue('/translate jpn hello world');
       });
 
       await act(async () => {
@@ -6052,11 +6043,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/think /tldr some long text' },
-        });
+        setAskValue('/think /tldr some long text');
       });
 
       await act(async () => {
@@ -6084,9 +6073,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/rewrite' } });
+        setAskValue('/rewrite');
       });
 
       act(() => {
@@ -6113,11 +6102,12 @@ describe('App', () => {
       await showOverlay();
 
       // Attach an image
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['data'], 'shot.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -6138,7 +6128,7 @@ describe('App', () => {
 
       // Submit just the command with no text: OCR path fires
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/explain' } });
+        setAskValue('/explain');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -6171,11 +6161,12 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['data'], 'img.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -6193,7 +6184,7 @@ describe('App', () => {
       enableChannelCapture();
 
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/translate' } });
+        setAskValue('/translate');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -6212,9 +6203,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/translate jpn' } });
+        setAskValue('/translate jpn');
       });
 
       act(() => {
@@ -6241,13 +6232,11 @@ describe('App', () => {
       // Activate overlay with selected text as context
       await showOverlay('original selected text');
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       // Type a command with extra instruction so strippedMessage is non-empty
       // (bypasses the "no content" early guard) and selectedContext is also set.
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/rewrite make it concise' },
-        });
+        setAskValue('/rewrite make it concise');
       });
 
       await act(async () => {
@@ -6280,11 +6269,12 @@ describe('App', () => {
       await showOverlay('my selected text');
 
       // Paste an image and wait for backend resolution so hasPendingImages is false
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['data'], 'img.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -6305,7 +6295,7 @@ describe('App', () => {
 
       // Submit just the command trigger (strippedMessage will be '')
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/rewrite' } });
+        setAskValue('/rewrite');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -6334,11 +6324,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/rewrite fix this text' },
-        });
+        setAskValue('/rewrite fix this text');
       });
 
       await act(async () => {
@@ -6364,13 +6352,14 @@ describe('App', () => {
       await showOverlay();
 
       // Paste an image and wait for backend resolution
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['fake-img-data'], 'photo.png', {
         type: 'image/png',
       });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -6391,9 +6380,7 @@ describe('App', () => {
 
       // Type /rewrite command and submit
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/rewrite fix this prose' },
-        });
+        setAskValue('/rewrite fix this prose');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -6456,11 +6443,12 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['data'], 'img.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -6473,7 +6461,7 @@ describe('App', () => {
 
       // Submit /translate with image-only (no text) while image still loading.
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/translate' } });
+        setAskValue('/translate');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -6537,11 +6525,12 @@ describe('App', () => {
       await showOverlay();
 
       // Paste an image - thumbnail appears immediately (filePath null)
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['data'], 'img.png', { type: 'image/png' });
       await act(async () => {
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -6554,9 +6543,7 @@ describe('App', () => {
 
       // Type /rewrite and submit while image is still processing
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/rewrite make it clearer' },
-        });
+        setAskValue('/rewrite make it clearer');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -6583,11 +6570,12 @@ describe('App', () => {
 
   describe('Utility commands with images (OCR path)', () => {
     async function pasteImageForUtility() {
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       const file = new File(['fake-img-data'], 'photo.png', {
         type: 'image/png',
       });
       const clipboardData = {
+        getData: () => '',
         items: [{ type: 'image/png', getAsFile: () => file }],
       };
       await act(async () => {
@@ -6620,9 +6608,9 @@ describe('App', () => {
         });
       });
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/tldr ' } });
+        setAskValue('/tldr ');
       });
 
       invoke.mockClear();
@@ -6667,9 +6655,9 @@ describe('App', () => {
         });
       });
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/translate french ' } });
+        setAskValue('/translate french ');
       });
 
       invoke.mockClear();
@@ -6700,9 +6688,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /tldr ' } });
+        setAskValue('/screen /tldr ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -6749,9 +6737,9 @@ describe('App', () => {
         });
       });
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/tldr ' } });
+        setAskValue('/tldr ');
       });
 
       invoke.mockClear();
@@ -6809,9 +6797,9 @@ describe('App', () => {
         });
       });
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/tldr ' } });
+        setAskValue('/tldr ');
       });
 
       invoke.mockClear();
@@ -6868,9 +6856,9 @@ describe('App', () => {
       await pasteImageForUtility();
       // Do NOT resolve save_image_command yet — image stays in-flight (filePath=null).
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/tldr ' } });
+        setAskValue('/tldr ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -6912,9 +6900,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /tldr ' } });
+        setAskValue('/screen /tldr ');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -6961,9 +6949,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/screen /tldr ' } });
+        setAskValue('/screen /tldr ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7000,9 +6988,9 @@ describe('App', () => {
         });
       });
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/translate ' } });
+        setAskValue('/translate ');
       });
 
       invoke.mockClear();
@@ -7029,11 +7017,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/tldr some long text' },
-        });
+        setAskValue('/tldr some long text');
       });
 
       await act(async () => {
@@ -7080,9 +7066,8 @@ describe('App', () => {
         ).toBeInTheDocument();
       });
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/tldr ' } });
+        setAskValue('/tldr ');
       });
 
       expect(
@@ -7119,9 +7104,9 @@ describe('App', () => {
       });
 
       // Submit utility command — image is resolved, non-deferred path taken.
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/tldr ' } });
+        setAskValue('/tldr ');
       });
       invoke.mockClear();
       await act(async () => {
@@ -7178,9 +7163,9 @@ describe('App', () => {
       });
 
       // Submit /tldr while image is still pending and context is present.
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/tldr ' } });
+        setAskValue('/tldr ');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7215,9 +7200,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/search rust async' } });
+        setAskValue('/search rust async');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7243,17 +7228,15 @@ describe('App', () => {
         1,
       );
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/search explain this selection' },
-        });
+        setAskValue('/search explain this selection');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
       });
 
-      expect(textarea).toHaveValue('');
+      await waitFor(() => expect(getAskInput().textContent).toBe(''));
       expect(findSelectedSnippet()).toHaveLength(1);
       expect(container.querySelectorAll('p.text-text-secondary')).toHaveLength(
         0,
@@ -7269,9 +7252,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/search who is him' } });
+        setAskValue('/search who is him');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7300,7 +7283,7 @@ describe('App', () => {
         (c) => c[0] === 'search_pipeline',
       ).length;
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'Donald Trump' } });
+        setAskValue('Donald Trump');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7323,9 +7306,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/search who is him' } });
+        setAskValue('/search who is him');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7356,7 +7339,7 @@ describe('App', () => {
         (c) => c[0] === 'search_pipeline',
       ).length;
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'Donald Trump' } });
+        setAskValue('Donald Trump');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7379,9 +7362,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/search rust' } });
+        setAskValue('/search rust');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7399,7 +7382,7 @@ describe('App', () => {
       });
 
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hello' } });
+        setAskValue('hello');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7419,9 +7402,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/search ambiguous' } });
+        setAskValue('/search ambiguous');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7451,7 +7434,7 @@ describe('App', () => {
         (c) => c[0] === 'search_pipeline',
       ).length;
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'Einstein' } });
+        setAskValue('Einstein');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7474,9 +7457,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/search' } });
+        setAskValue('/search');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7495,9 +7478,9 @@ describe('App', () => {
       await act(async () => {});
       await showOverlay();
 
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: '/search him' } });
+        setAskValue('/search him');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7520,9 +7503,7 @@ describe('App', () => {
 
       // With searchActive still on, /screen must take precedence.
       act(() => {
-        fireEvent.change(textarea, {
-          target: { value: '/screen what is this' },
-        });
+        setAskValue('/screen what is this');
       });
       await act(async () => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7567,9 +7548,7 @@ describe('App', () => {
 
       await showOverlay();
 
-      expect(
-        screen.getByPlaceholderText('Ask Thuki anything...'),
-      ).toBeInTheDocument();
+      expect(getAskInput()).toBeInTheDocument();
     });
 
     it('dismisses onboarding and shows ask bar when onComplete is called', async () => {
@@ -7635,9 +7614,9 @@ describe('App', () => {
       await showOverlay();
       // Tip visible in ask-bar mode.
       expect(screen.getByTestId('tip-text')).toBeInTheDocument();
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hello' } });
+        setAskValue('hello');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7710,9 +7689,9 @@ describe('App', () => {
       );
 
       // Send a message to flip into chat mode.
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hi' } });
+        setAskValue('hi');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -7816,9 +7795,9 @@ describe('App', () => {
       render(<App />);
       await act(async () => {});
       await showOverlay();
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hello' } });
+        setAskValue('hello');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -8261,9 +8240,9 @@ describe('App', () => {
           ollamaReachable: true,
         },
       });
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'hi' } });
+        setAskValue('hi');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -8556,9 +8535,9 @@ describe('App', () => {
       render(<App />);
       await act(async () => {});
       await showOverlay();
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getAskInput();
       act(() => {
-        fireEvent.change(textarea, { target: { value: 'seed' } });
+        setAskValue('seed');
       });
       act(() => {
         fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
@@ -8861,9 +8840,9 @@ describe('App', () => {
         // we want to auto-dismiss. Used as the harness here because
         // the chat-header export button does not render until chat mode
         // (so it cannot trigger an empty-state error).
-        const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+        const textarea = getAskInput();
         act(() => {
-          fireEvent.change(textarea, { target: { value: '/extract' } });
+          setAskValue('/extract');
         });
         await act(async () => {
           fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
diff --git a/src/testUtils/setup.ts b/src/testUtils/setup.ts
index 83ef3a9..755011e 100644
--- a/src/testUtils/setup.ts
+++ b/src/testUtils/setup.ts
@@ -97,3 +97,56 @@ URL.createObjectURL = vi.fn(
   () => `blob:http://localhost/fake-blob-${++blobUrlCounter}`,
 );
 URL.revokeObjectURL = vi.fn();
+
+/**
+ * Mock Range.getBoundingClientRect / getClientRects: jsdom doesn't implement
+ * them. Lexical reads the range rect when syncing the DOM selection after a
+ * programmatic edit (the AskBar input's controlled value sync calls
+ * selectEnd()), which would otherwise throw "getBoundingClientRect is not a
+ * function". Layout is irrelevant in jsdom, so an empty rect is sufficient.
+ */
+const ZERO_RECT: DOMRect = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  toJSON: () => ({}),
+};
+if (!Range.prototype.getBoundingClientRect) {
+  Range.prototype.getBoundingClientRect = () => ZERO_RECT;
+}
+if (!Range.prototype.getClientRects) {
+  Range.prototype.getClientRects = () =>
+    ({
+      length: 0,
+      item: () => null,
+      [Symbol.iterator]: function* () {},
+    }) as unknown as DOMRectList;
+}
+
+/**
+ * Polyfill ClipboardEvent: jsdom doesn't define it. Lexical's plain-text paste
+ * handler references the global `ClipboardEvent` (objectKlassEquals(event,
+ * ClipboardEvent)) when the AskBar input lets a non-image paste fall through,
+ * so the bare reference throws without this stub. Paste mocks supply their own
+ * clipboardData (RTL assigns it onto the event), so this only needs to exist.
+ */
+if (typeof globalThis.ClipboardEvent === 'undefined') {
+  class ClipboardEvent extends Event {
+    clipboardData: DataTransfer | null;
+    constructor(
+      type: string,
+      eventInitDict: { clipboardData?: unknown } & EventInit = {},
+    ) {
+      super(type, eventInitDict);
+      this.clipboardData =
+        (eventInitDict.clipboardData as DataTransfer | null) ?? null;
+    }
+  }
+  globalThis.ClipboardEvent =
+    ClipboardEvent as unknown as typeof globalThis.ClipboardEvent;
+}
diff --git a/src/view/AskBarView.tsx b/src/view/AskBarView.tsx
index 4c5e7c8..c9dbd72 100644
--- a/src/view/AskBarView.tsx
+++ b/src/view/AskBarView.tsx
@@ -1,7 +1,9 @@
 import { motion, AnimatePresence } from 'framer-motion';
 import type React from 'react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { formatQuotedText } from '../utils/formatQuote';
+import { LexicalAskBarInput } from './askbar/LexicalAskBarInput';
+import type { AskBarKeyHandlers } from './askbar/LexicalAskBarInput';
 import { useConfig } from '../contexts/ConfigContext';
 import { ImageThumbnails } from '../components/ImageThumbnails';
 import { CommandSuggestion } from '../components/CommandSuggestion';
@@ -159,8 +161,8 @@ interface AskBarViewProps {
   onSubmit: () => void;
   /** Cancel handler fired when the user stops an active generation. */
   onCancel: () => void;
-  /** Ref to the textarea input element for focus management. */
-  inputRef: React.RefObject<HTMLTextAreaElement | null>;
+  /** Ref to the contentEditable input element for focus management. */
+  inputRef: React.RefObject<HTMLDivElement | null>;
   /** Selected text from the host app captured at activation time, if any. */
   selectedText?: string;
   /**
@@ -217,58 +219,6 @@ interface AskBarViewProps {
   onFirstKeystroke?: () => void;
 }
 
-/**
- * Renders text with command triggers highlighted in violet for the mirror div.
- * Only the first occurrence of each command is highlighted; duplicates render
- * as plain text. Word-boundary aware: `/searching` does not match `/search`.
- *
- * Exported for direct unit testing.
- */
-export function renderHighlightedText(text: string): React.ReactNode {
-  const parts: React.ReactNode[] = [];
-  let remaining = text;
-  const highlighted = new Set<string>();
-
-  while (remaining.length > 0) {
-    let earliest = -1;
-    let matchedTrigger = '';
-    for (const cmd of COMMANDS) {
-      if (highlighted.has(cmd.trigger)) continue;
-      const idx = remaining.indexOf(cmd.trigger);
-      if (idx !== -1 && (earliest === -1 || idx < earliest)) {
-        const before = idx === 0 || remaining[idx - 1] === ' ';
-        const after =
-          idx + cmd.trigger.length >= remaining.length ||
-          remaining[idx + cmd.trigger.length] === ' ';
-        if (before && after) {
-          earliest = idx;
-          matchedTrigger = cmd.trigger;
-        }
-      }
-    }
-
-    if (earliest === -1) {
-      parts.push(<span key={parts.length}>{remaining}</span>);
-      break;
-    }
-
-    if (earliest > 0) {
-      parts.push(
-        <span key={parts.length}>{remaining.slice(0, earliest)}</span>,
-      );
-    }
-    parts.push(
-      <span key={parts.length} className="text-violet-400">
-        {matchedTrigger}
-      </span>,
-    );
-    highlighted.add(matchedTrigger);
-    remaining = remaining.slice(earliest + matchedTrigger.length);
-  }
-
-  return <>{parts}</>;
-}
-
 /**
  * Renders the persistent bottom input bar of the application.
  *
@@ -302,19 +252,6 @@ export function AskBarView({
   /** Quote display limits resolved from the managed AppConfig. */
   const quote = useConfig().quote;
 
-  /** Ref to the mirror div behind the textarea for command highlighting. */
-  const mirrorRef = useRef<HTMLDivElement>(null);
-
-  /** Syncs the mirror div scroll position with the textarea so the colored
-   *  spans stay aligned with the caret on long inputs. */
-  const handleTextareaScroll = useCallback(() => {
-    /* v8 ignore start -- both refs are always set by React when this fires */
-    if (!mirrorRef.current || !inputRef.current) return;
-    /* v8 ignore stop */
-    mirrorRef.current.scrollTop = inputRef.current.scrollTop;
-    mirrorRef.current.scrollLeft = inputRef.current.scrollLeft;
-  }, [inputRef]);
-
   /** True when the UI should be locked - either generating or waiting for images. */
   const isBusy = isGenerating || isSubmitPending;
   const canSubmit =
@@ -438,94 +375,63 @@ export function AskBarView({
   );
 
   /**
-   * Auto-resizes the textarea to fit its content up to a maximum height.
-   * Single forced reflow per input event ensures responsive text wrapping.
-   * Also clears the dismissed-suggestion state so the popover can reopen
-   * if the user has changed the command prefix since dismissing it.
+   * Mirrors the editor's text into the host query state. Clears the dismissed
+   * suggestion so the popover can reopen when the user types a new "/" prefix
+   * after pressing Escape. First-keystroke pre-warming is handled inside the
+   * Lexical input.
    */
-  const handleTextareaChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const newValue = e.target.value;
-      // Any keystroke clears the dismissed state so the popover can reopen
-      // if the user types a new "/" prefix after having pressed Escape.
+  const handleValueChange = useCallback(
+    (newValue: string) => {
       setDismissedQuery('');
-      if (query.length === 0 && newValue.length > 0) {
-        onFirstKeystroke?.();
-      }
       setQuery(newValue);
-      const el = e.target;
-      el.style.height = 'auto'; // Reset to auto to trigger height recalculation
-      el.style.height = `${Math.min(el.scrollHeight, 144)}px`;
     },
-    [setQuery, query, onFirstKeystroke],
+    [setQuery],
   );
 
   /**
-   * Catches `Enter` without `Shift` to submit the form proactively,
-   * avoiding accidental line breaks for power users.
-   *
-   * When the command suggestion popover is open, also handles:
-   * - ArrowDown / ArrowUp: move the highlighted row (wraps around)
-   * - Tab: complete the highlighted command trigger into the input
-   * - Enter: if a valid row is highlighted, complete it; otherwise submit
-   * - Escape: dismiss the popover without changing the query
+   * Keyboard handlers for the slash-command popover, wired into the Lexical
+   * input. Arrow / Tab / Escape only fire while the popover is open; Enter
+   * (without Shift) always fires and either completes the highlighted command
+   * or submits.
    */
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (showSuggestions) {
-        if (e.key === 'ArrowDown') {
-          e.preventDefault();
-          if (filteredCommands.length > 0) {
-            setHighlightedIndex((i) => (i + 1) % filteredCommands.length);
+  const keyHandlers = useMemo<AskBarKeyHandlers>(
+    () => ({
+      onEnterKey: () => {
+        if (
+          showSuggestions &&
+          filteredCommands.length > 0 &&
+          highlightedIndex < filteredCommands.length
+        ) {
+          const selectedTrigger = filteredCommands[highlightedIndex].trigger;
+          if (lastSlashWord !== selectedTrigger) {
+            handleCommandSelect(selectedTrigger);
+            return;
           }
-          return;
         }
-        if (e.key === 'ArrowUp') {
-          e.preventDefault();
-          if (filteredCommands.length > 0) {
-            setHighlightedIndex(
-              (i) =>
-                (i - 1 + filteredCommands.length) % filteredCommands.length,
-            );
-          }
-          return;
-        }
-        if (e.key === 'Tab') {
-          e.preventDefault();
-          if (filteredCommands.length > 0) {
-            const idx = Math.min(highlightedIndex, filteredCommands.length - 1);
-            handleCommandSelect(filteredCommands[idx].trigger);
-          }
-          return;
+        onSubmit();
+      },
+      onArrowDown: () => {
+        if (filteredCommands.length > 0) {
+          setHighlightedIndex((i) => (i + 1) % filteredCommands.length);
         }
-        if (e.key === 'Enter' && !e.shiftKey) {
-          if (
-            filteredCommands.length > 0 &&
-            highlightedIndex < filteredCommands.length
-          ) {
-            const selectedTrigger = filteredCommands[highlightedIndex].trigger;
-            if (lastSlashWord !== selectedTrigger) {
-              // Partial match: complete the trigger into the input.
-              e.preventDefault();
-              handleCommandSelect(selectedTrigger);
-              return;
-            }
-            // Exact match: fall through to normal submit below.
-          }
-          // No match, empty list, or exact trigger already typed: submit.
+      },
+      onArrowUp: () => {
+        if (filteredCommands.length > 0) {
+          setHighlightedIndex(
+            (i) => (i - 1 + filteredCommands.length) % filteredCommands.length,
+          );
         }
-        if (e.key === 'Escape') {
-          e.preventDefault();
-          setDismissedQuery(lastSlashWord);
-          return;
+      },
+      onTab: () => {
+        if (filteredCommands.length > 0) {
+          const idx = Math.min(highlightedIndex, filteredCommands.length - 1);
+          handleCommandSelect(filteredCommands[idx].trigger);
         }
-      }
-
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        onSubmit();
-      }
-    },
+      },
+      onEscape: () => {
+        setDismissedQuery(lastSlashWord);
+      },
+    }),
     [
       showSuggestions,
       filteredCommands,
@@ -536,11 +442,15 @@ export function AskBarView({
     ],
   );
 
-  /** Handles clipboard paste - extracts image items from clipboardData. */
+  /**
+   * Extracts image files from a clipboard paste. Returns true when images were
+   * attached so the editor suppresses the default text paste; false to let the
+   * editor paste text normally.
+   */
   const handlePaste = useCallback(
-    (e: React.ClipboardEvent) => {
-      const items = e.clipboardData?.items;
-      if (!items || isBusy) return;
+    (clipboard: DataTransfer | null): boolean => {
+      const items = clipboard?.items;
+      if (!items || isBusy) return false;
 
       const remaining = maxImages - attachedImages.length;
       if (remaining <= 0) {
@@ -548,7 +458,7 @@ export function AskBarView({
           item.type.startsWith('image/'),
         );
         if (hasImageItem) setPasteMaxError(true);
-        return;
+        return false;
       }
 
       const imageFiles: File[] = [];
@@ -561,9 +471,9 @@ export function AskBarView({
         }
       }
 
-      if (imageFiles.length === 0) return;
-      e.preventDefault();
+      if (imageFiles.length === 0) return false;
       onImagesAttached(imageFiles);
+      return true;
     },
     [isBusy, attachedImages.length, maxImages, onImagesAttached],
   );
@@ -673,37 +583,25 @@ export function AskBarView({
             </button>
           )}
 
+          {/* Lexical-backed input. A single contentEditable means the caret is
+              native and never drifts; command triggers highlight inline via a
+              text-entity node. The host stays the source of truth for `query`. */}
           <div className="relative flex-1 min-w-0">
-            {/* Mirror div: renders the same text with highlighted slash
-                commands. Sits behind the transparent textarea so colored
-                spans show through. Metrics (font, size, padding, leading,
-                wrap) MUST mirror the textarea exactly so the caret never
-                drifts off the rendered glyphs. */}
-            <div
-              ref={mirrorRef}
-              aria-hidden="true"
-              data-testid="askbar-mirror"
-              className="askbar-mirror absolute inset-0 pointer-events-none bg-transparent text-text-primary thuki-text-base py-2 px-1 leading-5 whitespace-pre-wrap break-words overflow-hidden"
-            >
-              {renderHighlightedText(query)}
-            </div>
             {/* The compose surface stays editable while a response streams or
                 a submit is pending, so the user can draft their next message
                 without waiting. Sending is gated at submit time (handleSubmit
                 no-ops while busy and the send button becomes Stop), never by
                 disabling the input. */}
-            <textarea
-              ref={inputRef}
+            <LexicalAskBarInput
               value={query}
-              onChange={handleTextareaChange}
-              onKeyDown={handleKeyDown}
-              onPaste={handlePaste}
-              onScroll={handleTextareaScroll}
-              autoFocus
-              rows={1}
+              onValueChange={handleValueChange}
+              onFirstKeystroke={onFirstKeystroke}
               placeholder={isChatMode ? 'Reply...' : 'Ask Thuki anything...'}
-              className="askbar-textarea relative w-full bg-transparent border-none outline-none text-transparent thuki-text-base placeholder:text-text-secondary py-2 px-1 resize-none leading-5"
-              style={{ caretColor: 'var(--color-text-primary)' }}
+              inputRef={inputRef}
+              contentEditableClassName="askbar-input thuki-text-base w-full bg-transparent outline-none text-text-primary py-2 px-1 whitespace-pre-wrap break-words"
+              suggestionsOpen={showSuggestions}
+              keyHandlers={keyHandlers}
+              onPaste={handlePaste}
             />
           </div>
 
diff --git a/src/view/__tests__/AskBarView.test.tsx b/src/view/__tests__/AskBarView.test.tsx
index 582c3bf..c8cdd9f 100644
--- a/src/view/__tests__/AskBarView.test.tsx
+++ b/src/view/__tests__/AskBarView.test.tsx
@@ -1,13 +1,54 @@
 import React from 'react';
-import { render, screen, fireEvent, act } from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  act,
+  waitFor,
+} from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { AskBarView, renderHighlightedText } from '../AskBarView';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  type LexicalEditor,
+} from 'lexical';
+import { AskBarView } from '../AskBarView';
 import type { AttachedImage } from '../../types/image';
 
-function makeRef(): React.RefObject<HTMLTextAreaElement | null> {
+function makeRef(): React.RefObject<HTMLDivElement | null> {
   return { current: null };
 }
 
+/** The AskBar's Lexical contentEditable (role="textbox"). */
+function getInput(): HTMLElement {
+  return screen.getByRole('textbox');
+}
+
+/** The Lexical editor backing the input, read off the root DOM node. */
+function getEditor(): LexicalEditor {
+  return (getInput() as unknown as { __lexicalEditor: LexicalEditor })
+    .__lexicalEditor;
+}
+
+/**
+ * Replaces the editor's text, mimicking the user typing `text`. jsdom does not
+ * synthesize contentEditable input from key events, so edits are applied through
+ * the editor API; this still exercises the real value-sync path (onValueChange).
+ */
+function typeText(text: string): void {
+  const editor = getEditor();
+  act(() => {
+    editor.update(() => {
+      const root = $getRoot();
+      root.clear();
+      const paragraph = $createParagraphNode();
+      if (text) paragraph.append($createTextNode(text));
+      root.append(paragraph);
+    });
+  });
+}
+
 /** Helper to create an AttachedImage with defaults. */
 function makeImage(overrides: Partial<AttachedImage> = {}): AttachedImage {
   return {
@@ -29,7 +70,7 @@ const IMAGE_DEFAULTS = {
 };
 
 describe('AskBarView', () => {
-  it('renders textarea with placeholder for input bar mode', () => {
+  it('renders the input with placeholder for input bar mode', () => {
     render(
       <AskBarView
         {...IMAGE_DEFAULTS}
@@ -42,11 +83,10 @@ describe('AskBarView', () => {
         inputRef={makeRef()}
       />,
     );
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-    expect(textarea).not.toBeNull();
+    expect(screen.getByText('Ask Thuki anything...')).toBeInTheDocument();
   });
 
-  it('renders textarea with chat mode placeholder', () => {
+  it('renders the input with chat mode placeholder', () => {
     render(
       <AskBarView
         {...IMAGE_DEFAULTS}
@@ -59,11 +99,10 @@ describe('AskBarView', () => {
         inputRef={makeRef()}
       />,
     );
-    const textarea = screen.getByPlaceholderText('Reply...');
-    expect(textarea).not.toBeNull();
+    expect(screen.getByText('Reply...')).toBeInTheDocument();
   });
 
-  it('calls setQuery on textarea change', () => {
+  it('calls setQuery when the editor text changes', async () => {
     const setQuery = vi.fn();
     render(
       <AskBarView
@@ -77,12 +116,11 @@ describe('AskBarView', () => {
         inputRef={makeRef()}
       />,
     );
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-    fireEvent.change(textarea, { target: { value: 'hello' } });
-    expect(setQuery).toHaveBeenCalledWith('hello');
+    typeText('hello');
+    await waitFor(() => expect(setQuery).toHaveBeenCalledWith('hello'));
   });
 
-  it('keeps the textarea editable during generation so the next message can be drafted', () => {
+  it('keeps the input editable during generation so the next message can be drafted', async () => {
     const setQuery = vi.fn();
     render(
       <AskBarView
@@ -96,10 +134,9 @@ describe('AskBarView', () => {
         inputRef={makeRef()}
       />,
     );
-    const textarea = screen.getByPlaceholderText('Reply...');
-    expect((textarea as HTMLTextAreaElement).disabled).toBe(false);
-    fireEvent.change(textarea, { target: { value: 'next message' } });
-    expect(setQuery).toHaveBeenCalledWith('next message');
+    expect(getInput().getAttribute('contenteditable')).toBe('true');
+    typeText('next message');
+    await waitFor(() => expect(setQuery).toHaveBeenCalledWith('next message'));
   });
 
   it('calls onSubmit on Enter key', () => {
@@ -116,8 +153,7 @@ describe('AskBarView', () => {
         inputRef={makeRef()}
       />,
     );
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-    fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
+    fireEvent.keyDown(getInput(), { key: 'Enter', shiftKey: false });
     expect(onSubmit).toHaveBeenCalledTimes(1);
   });
 
@@ -135,8 +171,7 @@ describe('AskBarView', () => {
         inputRef={makeRef()}
       />,
     );
-    const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-    fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true });
+    fireEvent.keyDown(getInput(), { key: 'Enter', shiftKey: true });
     expect(onSubmit).not.toHaveBeenCalled();
   });
 
@@ -752,10 +787,11 @@ describe('AskBarView', () => {
             inputRef={makeRef()}
           />,
         );
-        const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+        const textarea = getInput();
         const file = new File(['x'], 'img.png', { type: 'image/png' });
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -783,10 +819,11 @@ describe('AskBarView', () => {
             inputRef={makeRef()}
           />,
         );
-        const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+        const textarea = getInput();
         const file = new File(['x'], 'img.png', { type: 'image/png' });
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'image/png', getAsFile: () => file }],
           },
         });
@@ -818,9 +855,10 @@ describe('AskBarView', () => {
             inputRef={makeRef()}
           />,
         );
-        const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+        const textarea = getInput();
         fireEvent.paste(textarea, {
           clipboardData: {
+            getData: () => '',
             items: [{ type: 'text/plain', getAsFile: () => null }],
           },
         });
@@ -843,9 +881,10 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       const file = new File(['fake-img'], 'test.png', { type: 'image/png' });
       const clipboardData = {
+        getData: () => '',
         items: [{ type: 'image/png', getAsFile: () => file }],
       };
       fireEvent.paste(textarea, { clipboardData });
@@ -870,8 +909,9 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       const clipboardData = {
+        getData: () => '',
         items: [{ type: 'text/plain', getAsFile: () => null }],
       };
       fireEvent.paste(textarea, { clipboardData });
@@ -893,8 +933,10 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-      fireEvent.paste(textarea, { clipboardData: { items: null } });
+      const textarea = getInput();
+      fireEvent.paste(textarea, {
+        clipboardData: { getData: () => '', items: null },
+      });
       expect(onImagesAttached).not.toHaveBeenCalled();
     });
 
@@ -913,9 +955,10 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       const file = new File(['x'], 'img.png', { type: 'image/png' });
       const clipboardData = {
+        getData: () => '',
         items: [{ type: 'image/png', getAsFile: () => file }],
       };
       fireEvent.paste(textarea, { clipboardData });
@@ -937,8 +980,9 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       const clipboardData = {
+        getData: () => '',
         items: [{ type: 'image/png', getAsFile: () => null }],
       };
       fireEvent.paste(textarea, { clipboardData });
@@ -966,9 +1010,10 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       const file = new File(['x'], 'img.png', { type: 'image/png' });
       const clipboardData = {
+        getData: () => '',
         items: [{ type: 'image/png', getAsFile: () => file }],
       };
       fireEvent.paste(textarea, { clipboardData });
@@ -1243,7 +1288,7 @@ describe('AskBarView', () => {
       expect(btn.classList.contains('stop-btn-ring')).toBe(true);
     });
 
-    it('keeps the textarea editable when isSubmitPending is true', () => {
+    it('keeps the input editable when isSubmitPending is true', () => {
       render(
         <AskBarView
           {...IMAGE_DEFAULTS}
@@ -1257,8 +1302,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-      expect((textarea as HTMLTextAreaElement).disabled).toBe(false);
+      expect(getInput().getAttribute('contenteditable')).toBe('true');
     });
 
     it('ignores paste when isSubmitPending', () => {
@@ -1277,9 +1321,10 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       const file = new File(['x'], 'img.png', { type: 'image/png' });
       const clipboardData = {
+        getData: () => '',
         items: [{ type: 'image/png', getAsFile: () => file }],
       };
       fireEvent.paste(textarea, { clipboardData });
@@ -1355,7 +1400,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       fireEvent.keyDown(textarea, { key: 'Tab' });
       expect(setQuery).toHaveBeenCalledWith('/screen ');
     });
@@ -1375,7 +1420,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
       expect(setQuery).toHaveBeenCalledWith('/screen ');
       expect(onSubmit).not.toHaveBeenCalled();
@@ -1396,7 +1441,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
       expect(onSubmit).toHaveBeenCalledOnce();
       expect(setQuery).not.toHaveBeenCalled();
@@ -1416,7 +1461,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       fireEvent.keyDown(textarea, { key: 'Escape' });
       // setQuery is NOT called (query is unchanged)
       expect(setQuery).not.toHaveBeenCalled();
@@ -1439,7 +1484,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       // Initially row 0 is highlighted (only one command, so index stays 0)
       fireEvent.keyDown(textarea, { key: 'ArrowDown' });
       // ArrowDown from index 0 moves to index 1
@@ -1460,7 +1505,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       fireEvent.keyDown(textarea, { key: 'ArrowUp' });
       // ArrowUp wraps to the last option
       const options = screen.getAllByRole('option');
@@ -1502,7 +1547,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       fireEvent.keyDown(textarea, { key: 'Tab' });
       expect(setQuery).not.toHaveBeenCalled();
       expect(onSubmit).not.toHaveBeenCalled();
@@ -1522,7 +1567,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       fireEvent.keyDown(textarea, { key: 'Escape' });
       expect(setQuery).not.toHaveBeenCalled();
     });
@@ -1546,7 +1591,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
       expect(onSubmit).toHaveBeenCalledOnce();
     });
@@ -1564,7 +1609,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       // Should not throw
       fireEvent.keyDown(textarea, { key: 'ArrowDown' });
       fireEvent.keyDown(textarea, { key: 'ArrowUp' });
@@ -1586,7 +1631,7 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
+      const textarea = getInput();
       fireEvent.keyDown(textarea, { key: 'Tab' });
       expect(setQuery).not.toHaveBeenCalled();
     });
@@ -1665,7 +1710,7 @@ describe('AskBarView', () => {
   });
 
   describe('slash command highlighting', () => {
-    it('mirror div renders the query so colored spans show through the textarea', () => {
+    it('highlights a recognized command token in violet within the input', async () => {
       render(
         <AskBarView
           {...IMAGE_DEFAULTS}
@@ -1678,86 +1723,35 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const mirror = screen.getByTestId('askbar-mirror');
-      expect(mirror).toHaveTextContent('/search what is Rust?');
-      // The trigger token sits in its own span with the violet utility class.
-      const tokenSpan = Array.from(mirror.querySelectorAll('span')).find(
-        (s) => s.textContent === '/search',
-      );
-      expect(tokenSpan).toBeDefined();
-      expect(tokenSpan?.className).toContain('text-violet-400');
+      const input = getInput();
+      await waitFor(() => {
+        expect(input.querySelector('.text-violet-400')?.textContent).toBe(
+          '/search',
+        );
+      });
     });
 
-    it('syncs mirror scrollTop with the textarea so the highlight tracks the caret', () => {
-      const ref = makeRef();
+    it('does not highlight a trigger embedded in a longer word', async () => {
       render(
         <AskBarView
           {...IMAGE_DEFAULTS}
-          query="/think who is Elon"
+          query="/searching"
           setQuery={vi.fn()}
           isChatMode={false}
           isGenerating={false}
           onSubmit={vi.fn()}
           onCancel={vi.fn()}
-          inputRef={ref}
+          inputRef={makeRef()}
         />,
       );
-      const mirror = screen.getByTestId('askbar-mirror') as HTMLDivElement;
-      // Pretend the textarea has been scrolled.
-      Object.defineProperty(ref.current, 'scrollTop', {
-        configurable: true,
-        value: 24,
-      });
-      Object.defineProperty(ref.current, 'scrollLeft', {
-        configurable: true,
-        value: 6,
-      });
-      fireEvent.scroll(ref.current!);
-      expect(mirror.scrollTop).toBe(24);
-      expect(mirror.scrollLeft).toBe(6);
-    });
-  });
-
-  describe('renderHighlightedText (pure)', () => {
-    it('returns a single span when no command trigger is present', () => {
-      const node = renderHighlightedText('plain text only');
-      const { container } = render(<>{node}</>);
-      const violet = container.querySelector('.text-violet-400');
-      expect(violet).toBeNull();
-      expect(container).toHaveTextContent('plain text only');
-    });
-
-    it('wraps the first valid trigger occurrence in the violet utility class', () => {
-      const node = renderHighlightedText('/search what is Rust?');
-      const { container } = render(<>{node}</>);
-      const tokens = container.querySelectorAll('.text-violet-400');
-      expect(tokens.length).toBe(1);
-      expect(tokens[0].textContent).toBe('/search');
-    });
-
-    it('only highlights the first occurrence of any given trigger', () => {
-      const node = renderHighlightedText('/search foo /search bar');
-      const { container } = render(<>{node}</>);
-      const tokens = container.querySelectorAll('.text-violet-400');
-      expect(tokens.length).toBe(1);
-    });
-
-    it('does not match a trigger embedded inside a longer word', () => {
-      // /searching contains /search but is not a standalone trigger token.
-      const node = renderHighlightedText('/searching');
-      const { container } = render(<>{node}</>);
-      expect(container.querySelector('.text-violet-400')).toBeNull();
-    });
-
-    it('returns an empty fragment for an empty string without throwing', () => {
-      const node = renderHighlightedText('');
-      const { container } = render(<>{node}</>);
-      expect(container.textContent).toBe('');
+      const input = getInput();
+      await waitFor(() => expect(input.textContent).toContain('/searching'));
+      expect(input.querySelector('.text-violet-400')).toBeNull();
     });
   });
 
   describe('onFirstKeystroke', () => {
-    it('fires when textarea transitions from empty to non-empty', () => {
+    it('fires when the editor transitions from empty to non-empty', async () => {
       const onFirstKeystroke = vi.fn();
       render(
         <AskBarView
@@ -1772,18 +1766,18 @@ describe('AskBarView', () => {
           onFirstKeystroke={onFirstKeystroke}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-      fireEvent.change(textarea, { target: { value: 'h' } });
-      expect(onFirstKeystroke).toHaveBeenCalledTimes(1);
+      typeText('h');
+      await waitFor(() => expect(onFirstKeystroke).toHaveBeenCalledTimes(1));
     });
 
-    it('does not fire on subsequent keystrokes when query is already non-empty', () => {
+    it('does not fire on subsequent edits when the query is already non-empty', async () => {
       const onFirstKeystroke = vi.fn();
+      const setQuery = vi.fn();
       render(
         <AskBarView
           {...IMAGE_DEFAULTS}
           query="h"
-          setQuery={vi.fn()}
+          setQuery={setQuery}
           isChatMode={false}
           isGenerating={false}
           onSubmit={vi.fn()}
@@ -1792,17 +1786,18 @@ describe('AskBarView', () => {
           onFirstKeystroke={onFirstKeystroke}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-      fireEvent.change(textarea, { target: { value: 'he' } });
+      typeText('he');
+      await waitFor(() => expect(setQuery).toHaveBeenCalledWith('he'));
       expect(onFirstKeystroke).not.toHaveBeenCalled();
     });
 
-    it('does not fire when omitted', () => {
+    it('does not throw when omitted', async () => {
+      const setQuery = vi.fn();
       render(
         <AskBarView
           {...IMAGE_DEFAULTS}
           query=""
-          setQuery={vi.fn()}
+          setQuery={setQuery}
           isChatMode={false}
           isGenerating={false}
           onSubmit={vi.fn()}
@@ -1810,10 +1805,8 @@ describe('AskBarView', () => {
           inputRef={makeRef()}
         />,
       );
-      const textarea = screen.getByPlaceholderText('Ask Thuki anything...');
-      expect(() =>
-        fireEvent.change(textarea, { target: { value: 'h' } }),
-      ).not.toThrow();
+      typeText('h');
+      await waitFor(() => expect(setQuery).toHaveBeenCalledWith('h'));
     });
   });
 });
diff --git a/src/view/askbar/CommandNode.ts b/src/view/askbar/CommandNode.ts
new file mode 100644
index 0000000..c9c14a5
--- /dev/null
+++ b/src/view/askbar/CommandNode.ts
@@ -0,0 +1,53 @@
+import type { EditorConfig, LexicalNode, SerializedTextNode } from 'lexical';
+import { $applyNodeReplacement, TextNode } from 'lexical';
+import { addClassNamesToElement } from '@lexical/utils';
+
+/**
+ * A TextNode subclass that renders a recognized slash-command trigger (e.g.
+ * "/search") in violet. `registerLexicalTextEntity` swaps matched text into
+ * this node as the user types and back to plain text when the token stops
+ * matching, so the highlight tracks the caret natively with no overlay layer.
+ *
+ * Mirrors the canonical `@lexical/hashtag` HashtagNode pattern.
+ */
+export class CommandNode extends TextNode {
+  static getType(): string {
+    return 'command';
+  }
+
+  static clone(node: CommandNode): CommandNode {
+    return new CommandNode(node.__text, node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedTextNode): CommandNode {
+    return $createCommandNode().updateFromJSON(serializedNode);
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const element = super.createDOM(config);
+    addClassNamesToElement(element, 'text-violet-400');
+    return element;
+  }
+
+  /** Marks this node as a text entity so the entity transform tracks boundaries. */
+  isTextEntity(): true {
+    return true;
+  }
+
+  /** Typing immediately before the token must not extend it. */
+  canInsertTextBefore(): boolean {
+    return false;
+  }
+}
+
+/** Creates a CommandNode wrapping `text`, applying any registered node replacement. */
+export function $createCommandNode(text = ''): CommandNode {
+  return $applyNodeReplacement(new CommandNode(text));
+}
+
+/** Type guard for CommandNode. */
+export function $isCommandNode(
+  node: LexicalNode | null | undefined,
+): node is CommandNode {
+  return node instanceof CommandNode;
+}
diff --git a/src/view/askbar/LexicalAskBarInput.tsx b/src/view/askbar/LexicalAskBarInput.tsx
new file mode 100644
index 0000000..9d08049
--- /dev/null
+++ b/src/view/askbar/LexicalAskBarInput.tsx
@@ -0,0 +1,310 @@
+import type { JSX } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { mergeRegister } from '@lexical/utils';
+import { registerLexicalTextEntity } from '@lexical/text';
+import {
+  $createLineBreakNode,
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  COMMAND_PRIORITY_HIGH,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
+  KEY_TAB_COMMAND,
+  PASTE_COMMAND,
+} from 'lexical';
+import { $createCommandNode, CommandNode } from './CommandNode';
+import { getCommandMatch } from './commandMatch';
+
+/** Keyboard handlers the host wires to the slash-command popover. */
+export interface AskBarKeyHandlers {
+  /** Enter without Shift: host decides complete-vs-submit. */
+  onEnterKey: () => void;
+  /** Arrow Down while the popover is open: move the highlight down. */
+  onArrowDown: () => void;
+  /** Arrow Up while the popover is open: move the highlight up. */
+  onArrowUp: () => void;
+  /** Tab while the popover is open: complete the highlighted command. */
+  onTab: () => void;
+  /** Escape while the popover is open: dismiss it. */
+  onEscape: () => void;
+}
+
+interface LexicalAskBarInputProps {
+  /** Controlled text value (the host owns the canonical query string). */
+  value: string;
+  /** Called when the editor's text content changes. */
+  onValueChange: (value: string) => void;
+  /** Fired once when the editor transitions from empty to non-empty. */
+  onFirstKeystroke?: () => void;
+  /** Placeholder shown while the editor is empty. */
+  placeholder: string;
+  /** Receives the underlying contentEditable element for focus management. */
+  inputRef: React.RefObject<HTMLDivElement | null>;
+  /** Class names applied to the contentEditable element. */
+  contentEditableClassName: string;
+  /** True while the slash-command popover is open (enables key interception). */
+  suggestionsOpen: boolean;
+  /** Popover keyboard handlers. */
+  keyHandlers: AskBarKeyHandlers;
+  /**
+   * Called on paste with the clipboard payload. Return true if the host
+   * consumed it (e.g. extracted image files) so the default text paste is
+   * suppressed; false to let the editor paste text normally.
+   */
+  onPaste: (clipboard: DataTransfer | null) => boolean;
+}
+
+/** Surfaces internal Lexical errors instead of silently corrupting state. */
+export function handleEditorError(error: Error): never {
+  throw error;
+}
+
+/**
+ * Two-way controlled-value bridge. Pushes editor edits up to the host and
+ * external value changes (command completion, clearing on submit) down into
+ * the editor. After any editor-originated edit the host value already equals
+ * the editor text, so the down-sync is a no-op and the caret never jumps; it
+ * only rewrites for genuine external changes.
+ */
+export function ValueSyncPlugin({
+  value,
+  onValueChange,
+  onFirstKeystroke,
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+  onFirstKeystroke?: () => void;
+}) {
+  const [editor] = useLexicalComposerContext();
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const onValueChangeRef = useRef(onValueChange);
+  onValueChangeRef.current = onValueChange;
+  const onFirstKeystrokeRef = useRef(onFirstKeystroke);
+  onFirstKeystrokeRef.current = onFirstKeystroke;
+  // True while the host→editor sync is rewriting the editor, so the editor→host
+  // listener ignores that self-inflicted change. Without this guard the rewrite
+  // echoes back as onValueChange and can fight the host's state during rapid
+  // clear/restore cycles (e.g. submit-then-cancel).
+  const applyingExternalRef = useRef(false);
+
+  // Editor → host.
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      if (applyingExternalRef.current) return;
+      const text = editorState.read(() => $getRoot().getTextContent());
+      const prev = valueRef.current;
+      if (text === prev) return;
+      if (prev.length === 0 && text.length > 0) {
+        onFirstKeystrokeRef.current?.();
+      }
+      onValueChangeRef.current(text);
+    });
+  }, [editor]);
+
+  // Host → editor.
+  useEffect(() => {
+    const current = editor
+      .getEditorState()
+      .read(() => $getRoot().getTextContent());
+    if (current === value) return;
+    applyingExternalRef.current = true;
+    // `discrete: true` commits synchronously. Without it the rewrite is async,
+    // so a rapid clear→restore (submit then cancel) can reorder: the cancel
+    // reads a stale editor state, skips its rebuild, and the late clear wins,
+    // leaving the input blank. Synchronous commit keeps the editor in lockstep
+    // with the host value.
+    editor.update(
+      () => {
+        const root = $getRoot();
+        root.clear();
+        const paragraph = $createParagraphNode();
+        const lines = value.split('\n');
+        lines.forEach((line, i) => {
+          if (i > 0) paragraph.append($createLineBreakNode());
+          if (line !== '') paragraph.append($createTextNode(line));
+        });
+        root.append(paragraph);
+        paragraph.selectEnd();
+      },
+      { discrete: true },
+    );
+    applyingExternalRef.current = false;
+  }, [editor, value]);
+
+  return null;
+}
+
+/**
+ * Wires the editor's runtime behavior: editable state, violet command-token
+ * highlighting, popover keyboard interception, and image paste. Commands are
+ * registered once and read the latest props through a ref so the handlers stay
+ * stable while always seeing current popover state.
+ */
+export function BehaviorPlugin({
+  suggestionsOpen,
+  keyHandlers,
+  onPaste,
+}: {
+  suggestionsOpen: boolean;
+  keyHandlers: AskBarKeyHandlers;
+  onPaste: (clipboard: DataTransfer | null) => boolean;
+}) {
+  const [editor] = useLexicalComposerContext();
+
+  const latestRef = useRef({ suggestionsOpen, keyHandlers, onPaste });
+  latestRef.current = { suggestionsOpen, keyHandlers, onPaste };
+
+  useEffect(() => {
+    return mergeRegister(
+      ...registerLexicalTextEntity(
+        editor,
+        getCommandMatch,
+        CommandNode,
+        (node) => $createCommandNode(node.getTextContent()),
+      ),
+    );
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        KEY_ENTER_COMMAND,
+        (event) => {
+          // Shift+Enter falls through to the default line break.
+          if (event?.shiftKey) return false;
+          event?.preventDefault();
+          latestRef.current.keyHandlers.onEnterKey();
+          return true;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+      editor.registerCommand(
+        KEY_ARROW_DOWN_COMMAND,
+        (event) => {
+          if (!latestRef.current.suggestionsOpen) return false;
+          event.preventDefault();
+          latestRef.current.keyHandlers.onArrowDown();
+          return true;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+      editor.registerCommand(
+        KEY_ARROW_UP_COMMAND,
+        (event) => {
+          if (!latestRef.current.suggestionsOpen) return false;
+          event.preventDefault();
+          latestRef.current.keyHandlers.onArrowUp();
+          return true;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+      editor.registerCommand(
+        KEY_TAB_COMMAND,
+        (event) => {
+          if (!latestRef.current.suggestionsOpen) return false;
+          event.preventDefault();
+          latestRef.current.keyHandlers.onTab();
+          return true;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+      editor.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        () => {
+          if (!latestRef.current.suggestionsOpen) return false;
+          latestRef.current.keyHandlers.onEscape();
+          return true;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+      editor.registerCommand(
+        PASTE_COMMAND,
+        (event) => {
+          const clipboard = (event as ClipboardEvent).clipboardData ?? null;
+          if (latestRef.current.onPaste(clipboard)) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+    );
+  }, [editor]);
+
+  return null;
+}
+
+/**
+ * Lexical-backed replacement for the AskBar's textarea + highlight-mirror.
+ * A single contentEditable means the caret is native and never drifts off the
+ * rendered glyphs; command triggers highlight inline via a text-entity node.
+ */
+export function LexicalAskBarInput({
+  value,
+  onValueChange,
+  onFirstKeystroke,
+  placeholder,
+  inputRef,
+  contentEditableClassName,
+  suggestionsOpen,
+  keyHandlers,
+  onPaste,
+}: LexicalAskBarInputProps): JSX.Element {
+  const initialConfig = useMemo(
+    () => ({
+      namespace: 'askbar',
+      nodes: [CommandNode],
+      onError: handleEditorError,
+      theme: {},
+    }),
+    [],
+  );
+
+  return (
+    <LexicalComposer initialConfig={initialConfig}>
+      <PlainTextPlugin
+        contentEditable={
+          <ContentEditable
+            ref={inputRef}
+            data-testid="askbar-input"
+            className={contentEditableClassName}
+            aria-placeholder={placeholder}
+            placeholder={
+              <div className="askbar-placeholder thuki-text-base">
+                {placeholder}
+              </div>
+            }
+          />
+        }
+        ErrorBoundary={LexicalErrorBoundary}
+      />
+      <HistoryPlugin />
+      <AutoFocusPlugin />
+      {/* BehaviorPlugin registers the highlight transform before ValueSyncPlugin
+          seeds any initial text, so a pre-filled value is highlighted on mount
+          (newly registered transforms do not reprocess already-committed nodes). */}
+      <BehaviorPlugin
+        suggestionsOpen={suggestionsOpen}
+        keyHandlers={keyHandlers}
+        onPaste={onPaste}
+      />
+      <ValueSyncPlugin
+        value={value}
+        onValueChange={onValueChange}
+        onFirstKeystroke={onFirstKeystroke}
+      />
+    </LexicalComposer>
+  );
+}
diff --git a/src/view/askbar/__tests__/CommandNode.test.ts b/src/view/askbar/__tests__/CommandNode.test.ts
new file mode 100644
index 0000000..78b9a37
--- /dev/null
+++ b/src/view/askbar/__tests__/CommandNode.test.ts
@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest';
+import { createEditor, TextNode } from 'lexical';
+import type { EditorConfig } from 'lexical';
+import {
+  CommandNode,
+  $createCommandNode,
+  $isCommandNode,
+} from '../CommandNode';
+
+/** Minimal headless editor that knows about CommandNode, for $-prefixed APIs. */
+function makeEditor() {
+  return createEditor({
+    namespace: 'command-node-test',
+    nodes: [CommandNode],
+    onError: (e) => {
+      throw e;
+    },
+  });
+}
+
+describe('CommandNode', () => {
+  it('reports its node type', () => {
+    expect(CommandNode.getType()).toBe('command');
+  });
+
+  it('clones preserving text and key', () => {
+    const editor = makeEditor();
+    editor.update(() => {
+      const original = $createCommandNode('/search');
+      const cloned = CommandNode.clone(original);
+      expect(cloned).toBeInstanceOf(CommandNode);
+      expect(cloned.getTextContent()).toBe('/search');
+      expect(cloned.__key).toBe(original.__key);
+    });
+  });
+
+  it('is a text entity and blocks text insertion before it', () => {
+    const editor = makeEditor();
+    editor.update(() => {
+      const node = $createCommandNode('/search');
+      expect(node.isTextEntity()).toBe(true);
+      expect(node.canInsertTextBefore()).toBe(false);
+    });
+  });
+
+  it('renders a DOM element carrying the violet token class', () => {
+    const editor = makeEditor();
+    let element: HTMLElement | null = null;
+    editor.update(() => {
+      const node = $createCommandNode('/search');
+      element = node.createDOM({ namespace: 'x', theme: {} } as EditorConfig);
+    });
+    expect(element).not.toBeNull();
+    expect((element as unknown as HTMLElement).className).toContain(
+      'text-violet-400',
+    );
+    expect((element as unknown as HTMLElement).textContent).toBe('/search');
+  });
+
+  it('round-trips through JSON serialization', () => {
+    const editor = makeEditor();
+    editor.update(() => {
+      const node = $createCommandNode('/think');
+      const json = node.exportJSON();
+      const restored = CommandNode.importJSON(json);
+      expect($isCommandNode(restored)).toBe(true);
+      expect(restored.getTextContent()).toBe('/think');
+    });
+  });
+
+  it('$isCommandNode distinguishes CommandNode from a plain TextNode', () => {
+    expect($isCommandNode(null)).toBe(false);
+    const editor = makeEditor();
+    editor.update(() => {
+      expect($isCommandNode($createCommandNode('/search'))).toBe(true);
+      expect($isCommandNode(new TextNode('/search'))).toBe(false);
+    });
+  });
+});
diff --git a/src/view/askbar/__tests__/LexicalAskBarInput.test.tsx b/src/view/askbar/__tests__/LexicalAskBarInput.test.tsx
new file mode 100644
index 0000000..f2482d5
--- /dev/null
+++ b/src/view/askbar/__tests__/LexicalAskBarInput.test.tsx
@@ -0,0 +1,409 @@
+import { describe, it, expect, vi } from 'vitest';
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { render, screen, act, waitFor } from '@testing-library/react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  $nodesOfType,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
+  KEY_TAB_COMMAND,
+  PASTE_COMMAND,
+} from 'lexical';
+import type { LexicalEditor } from 'lexical';
+import {
+  LexicalAskBarInput,
+  ValueSyncPlugin,
+  BehaviorPlugin,
+  handleEditorError,
+} from '../LexicalAskBarInput';
+import type { AskBarKeyHandlers } from '../LexicalAskBarInput';
+import { CommandNode } from '../CommandNode';
+
+const HARNESS_CONFIG = {
+  namespace: 'askbar-test',
+  nodes: [CommandNode],
+  onError: (error: Error) => {
+    throw error;
+  },
+};
+
+/** Headless composer harness that exposes the editor instance to the test. */
+function Composer({
+  children,
+  onEditor,
+}: {
+  children: ReactNode;
+  onEditor?: (editor: LexicalEditor) => void;
+}) {
+  return (
+    <LexicalComposer initialConfig={HARNESS_CONFIG}>
+      <PlainTextPlugin
+        contentEditable={<ContentEditable data-testid="ce" />}
+        ErrorBoundary={LexicalErrorBoundary}
+      />
+      {onEditor && <Capture onEditor={onEditor} />}
+      {children}
+    </LexicalComposer>
+  );
+}
+
+function Capture({ onEditor }: { onEditor: (editor: LexicalEditor) => void }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    onEditor(editor);
+  }, [editor, onEditor]);
+  return null;
+}
+
+/** Seeds the editor with a single paragraph holding `text`. */
+function seed(editor: LexicalEditor, text: string) {
+  act(() => {
+    editor.update(() => {
+      const root = $getRoot();
+      root.clear();
+      const paragraph = $createParagraphNode();
+      paragraph.append($createTextNode(text));
+      root.append(paragraph);
+    });
+  });
+}
+
+function makeKeyHandlers(): AskBarKeyHandlers {
+  return {
+    onEnterKey: vi.fn(),
+    onArrowDown: vi.fn(),
+    onArrowUp: vi.fn(),
+    onTab: vi.fn(),
+    onEscape: vi.fn(),
+  };
+}
+
+describe('handleEditorError', () => {
+  it('rethrows the error', () => {
+    expect(() => handleEditorError(new Error('boom'))).toThrow('boom');
+  });
+});
+
+describe('ValueSyncPlugin', () => {
+  it('pushes editor edits up and fires first keystroke on empty→non-empty', async () => {
+    let editor: LexicalEditor | null = null;
+    const onValueChange = vi.fn();
+    const onFirstKeystroke = vi.fn();
+    render(
+      <Composer onEditor={(e) => (editor = e)}>
+        <ValueSyncPlugin
+          value=""
+          onValueChange={onValueChange}
+          onFirstKeystroke={onFirstKeystroke}
+        />
+      </Composer>,
+    );
+    seed(editor!, 'hello');
+    await waitFor(() =>
+      expect(onValueChange).toHaveBeenLastCalledWith('hello'),
+    );
+    expect(onFirstKeystroke).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not fire first keystroke when the value was already non-empty', async () => {
+    let editor: LexicalEditor | null = null;
+    const onValueChange = vi.fn();
+    const onFirstKeystroke = vi.fn();
+    render(
+      <Composer onEditor={(e) => (editor = e)}>
+        <ValueSyncPlugin
+          value="a"
+          onValueChange={onValueChange}
+          onFirstKeystroke={onFirstKeystroke}
+        />
+      </Composer>,
+    );
+    // value="a" seeds the editor via the down-sync; that echo must not call back.
+    await waitFor(() =>
+      expect(
+        editor!.getEditorState().read(() => $getRoot().getTextContent()),
+      ).toBe('a'),
+    );
+    onValueChange.mockClear();
+    seed(editor!, 'ab');
+    await waitFor(() => expect(onValueChange).toHaveBeenLastCalledWith('ab'));
+    expect(onFirstKeystroke).not.toHaveBeenCalled();
+  });
+
+  it('tolerates a missing onFirstKeystroke callback', async () => {
+    let editor: LexicalEditor | null = null;
+    const onValueChange = vi.fn();
+    render(
+      <Composer onEditor={(e) => (editor = e)}>
+        <ValueSyncPlugin value="" onValueChange={onValueChange} />
+      </Composer>,
+    );
+    seed(editor!, 'hi');
+    await waitFor(() => expect(onValueChange).toHaveBeenLastCalledWith('hi'));
+  });
+
+  it('does not echo when the editor text already equals the value', async () => {
+    let editor: LexicalEditor | null = null;
+    const onValueChange = vi.fn();
+    render(
+      <Composer onEditor={(e) => (editor = e)}>
+        <ValueSyncPlugin value="seed" onValueChange={onValueChange} />
+      </Composer>,
+    );
+    await waitFor(() =>
+      expect(
+        editor!.getEditorState().read(() => $getRoot().getTextContent()),
+      ).toBe('seed'),
+    );
+    // The down-sync set the text; the resulting update echoes equal → no call.
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it('rebuilds the editor from an external multi-line value', async () => {
+    let editor: LexicalEditor | null = null;
+    const onValueChange = vi.fn();
+    const { rerender } = render(
+      <Composer onEditor={(e) => (editor = e)}>
+        <ValueSyncPlugin value="" onValueChange={onValueChange} />
+      </Composer>,
+    );
+    rerender(
+      <Composer onEditor={(e) => (editor = e)}>
+        <ValueSyncPlugin value={'a\n\nb'} onValueChange={onValueChange} />
+      </Composer>,
+    );
+    await waitFor(() =>
+      expect(
+        editor!.getEditorState().read(() => $getRoot().getTextContent()),
+      ).toBe('a\n\nb'),
+    );
+  });
+});
+
+describe('BehaviorPlugin', () => {
+  function renderBehavior(
+    overrides: Partial<{
+      suggestionsOpen: boolean;
+      keyHandlers: AskBarKeyHandlers;
+      onPaste: (clipboard: DataTransfer | null) => boolean;
+    }> = {},
+  ) {
+    const keyHandlers = overrides.keyHandlers ?? makeKeyHandlers();
+    const onPaste = overrides.onPaste ?? vi.fn(() => false);
+    let editor: LexicalEditor | null = null;
+    const ui = (props: typeof overrides) => (
+      <Composer onEditor={(e) => (editor = e)}>
+        <BehaviorPlugin
+          suggestionsOpen={props.suggestionsOpen ?? false}
+          keyHandlers={props.keyHandlers ?? keyHandlers}
+          onPaste={props.onPaste ?? onPaste}
+        />
+      </Composer>
+    );
+    const utils = render(ui(overrides));
+    return {
+      getEditor: () => editor as LexicalEditor,
+      keyHandlers,
+      onPaste,
+      rerender: (props: typeof overrides) => utils.rerender(ui(props)),
+    };
+  }
+
+  it('highlights a recognized command token via a CommandNode', async () => {
+    const h = renderBehavior();
+    seed(h.getEditor(), '/search foo');
+    await waitFor(() =>
+      expect(
+        h
+          .getEditor()
+          .getEditorState()
+          .read(() => $nodesOfType(CommandNode).length),
+      ).toBe(1),
+    );
+  });
+
+  it('Enter without Shift triggers the host enter handler', () => {
+    const h = renderBehavior();
+    let handled = false;
+    act(() => {
+      handled = h
+        .getEditor()
+        .dispatchCommand(
+          KEY_ENTER_COMMAND,
+          new KeyboardEvent('keydown', { shiftKey: false }),
+        );
+    });
+    expect(handled).toBe(true);
+    expect(h.keyHandlers.onEnterKey).toHaveBeenCalledTimes(1);
+  });
+
+  it('Enter with Shift falls through to the default line break', () => {
+    const h = renderBehavior();
+    let handled = true;
+    act(() => {
+      handled = h
+        .getEditor()
+        .dispatchCommand(
+          KEY_ENTER_COMMAND,
+          new KeyboardEvent('keydown', { shiftKey: true }),
+        );
+    });
+    expect(handled).toBe(false);
+    expect(h.keyHandlers.onEnterKey).not.toHaveBeenCalled();
+  });
+
+  it('Enter with a null event still submits', () => {
+    const h = renderBehavior();
+    act(() => {
+      h.getEditor().dispatchCommand(KEY_ENTER_COMMAND, null);
+    });
+    expect(h.keyHandlers.onEnterKey).toHaveBeenCalledTimes(1);
+  });
+
+  it('intercepts Arrow/Tab/Escape only while the popover is open', () => {
+    const h = renderBehavior({ suggestionsOpen: true });
+    act(() => {
+      h.getEditor().dispatchCommand(
+        KEY_ARROW_DOWN_COMMAND,
+        new KeyboardEvent('keydown'),
+      );
+      h.getEditor().dispatchCommand(
+        KEY_ARROW_UP_COMMAND,
+        new KeyboardEvent('keydown'),
+      );
+      h.getEditor().dispatchCommand(
+        KEY_TAB_COMMAND,
+        new KeyboardEvent('keydown'),
+      );
+      h.getEditor().dispatchCommand(
+        KEY_ESCAPE_COMMAND,
+        new KeyboardEvent('keydown'),
+      );
+    });
+    expect(h.keyHandlers.onArrowDown).toHaveBeenCalledTimes(1);
+    expect(h.keyHandlers.onArrowUp).toHaveBeenCalledTimes(1);
+    expect(h.keyHandlers.onTab).toHaveBeenCalledTimes(1);
+    expect(h.keyHandlers.onEscape).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores Arrow/Tab/Escape while the popover is closed', () => {
+    const h = renderBehavior({ suggestionsOpen: false });
+    const results: boolean[] = [];
+    act(() => {
+      results.push(
+        h
+          .getEditor()
+          .dispatchCommand(
+            KEY_ARROW_DOWN_COMMAND,
+            new KeyboardEvent('keydown'),
+          ),
+        h
+          .getEditor()
+          .dispatchCommand(KEY_ARROW_UP_COMMAND, new KeyboardEvent('keydown')),
+        h
+          .getEditor()
+          .dispatchCommand(KEY_TAB_COMMAND, new KeyboardEvent('keydown')),
+        h
+          .getEditor()
+          .dispatchCommand(KEY_ESCAPE_COMMAND, new KeyboardEvent('keydown')),
+      );
+    });
+    expect(results.every((r) => r === false)).toBe(true);
+    expect(h.keyHandlers.onArrowDown).not.toHaveBeenCalled();
+    expect(h.keyHandlers.onArrowUp).not.toHaveBeenCalled();
+    expect(h.keyHandlers.onTab).not.toHaveBeenCalled();
+    expect(h.keyHandlers.onEscape).not.toHaveBeenCalled();
+  });
+
+  it('consumes a paste the host handled, preventing the default', () => {
+    const onPaste = vi.fn(() => true);
+    const h = renderBehavior({ onPaste });
+    const clipboardData = { items: [] } as unknown as DataTransfer;
+    const preventDefault = vi.fn();
+    let handled = false;
+    act(() => {
+      handled = h.getEditor().dispatchCommand(PASTE_COMMAND, {
+        clipboardData,
+        preventDefault,
+      } as unknown as ClipboardEvent);
+    });
+    expect(onPaste).toHaveBeenCalledWith(clipboardData);
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(handled).toBe(true);
+  });
+
+  it('lets an unhandled paste fall through with a null clipboard', () => {
+    const onPaste = vi.fn(() => false);
+    const h = renderBehavior({ onPaste });
+    let handled = true;
+    act(() => {
+      handled = h.getEditor().dispatchCommand(PASTE_COMMAND, {
+        preventDefault: vi.fn(),
+      } as unknown as ClipboardEvent);
+    });
+    expect(onPaste).toHaveBeenCalledWith(null);
+    expect(handled).toBe(false);
+  });
+});
+
+describe('LexicalAskBarInput (integration)', () => {
+  function renderInput(
+    overrides: Partial<{
+      value: string;
+      suggestionsOpen: boolean;
+      onValueChange: (v: string) => void;
+      onPaste: (clipboard: DataTransfer | null) => boolean;
+    }> = {},
+  ) {
+    const inputRef = {
+      current: null,
+    } as React.RefObject<HTMLDivElement | null>;
+    render(
+      <LexicalAskBarInput
+        value={overrides.value ?? ''}
+        onValueChange={overrides.onValueChange ?? vi.fn()}
+        placeholder="Ask Thuki anything..."
+        inputRef={inputRef}
+        contentEditableClassName="askbar-input"
+        suggestionsOpen={overrides.suggestionsOpen ?? false}
+        keyHandlers={makeKeyHandlers()}
+        onPaste={overrides.onPaste ?? vi.fn(() => false)}
+      />,
+    );
+    return inputRef;
+  }
+
+  it('renders an editable textbox and the placeholder', () => {
+    renderInput();
+    expect(screen.getByTestId('askbar-input')).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByText('Ask Thuki anything...')).toBeInTheDocument();
+  });
+
+  it('captures the contentEditable element into the inputRef', () => {
+    const ref = renderInput();
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.getAttribute('contenteditable')).toBe('true');
+  });
+
+  it('seeds the editor from value and highlights command tokens', async () => {
+    renderInput({ value: 'hi /search' });
+    const input = screen.getByTestId('askbar-input');
+    await waitFor(() => expect(input.textContent).toContain('/search'));
+    await waitFor(() =>
+      expect(input.querySelector('.text-violet-400')?.textContent).toBe(
+        '/search',
+      ),
+    );
+  });
+});
diff --git a/src/view/askbar/__tests__/commandMatch.test.ts b/src/view/askbar/__tests__/commandMatch.test.ts
new file mode 100644
index 0000000..ae2f6ff
--- /dev/null
+++ b/src/view/askbar/__tests__/commandMatch.test.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { getCommandMatch } from '../commandMatch';
+
+describe('getCommandMatch', () => {
+  it('returns null for an empty string', () => {
+    expect(getCommandMatch('')).toBeNull();
+  });
+
+  it('returns null when no known trigger is present', () => {
+    expect(getCommandMatch('hello world')).toBeNull();
+  });
+
+  it('matches a trigger at the start of the string', () => {
+    expect(getCommandMatch('/search')).toEqual({ start: 0, end: 7 });
+  });
+
+  it('matches a trigger preceded by whitespace', () => {
+    // "hi /think" -> "/think" starts at index 3, length 6.
+    expect(getCommandMatch('hi /think')).toEqual({ start: 3, end: 9 });
+  });
+
+  it('matches a trigger followed by whitespace', () => {
+    expect(getCommandMatch('/search foo')).toEqual({ start: 0, end: 7 });
+  });
+
+  it('rejects a trigger not preceded by a boundary', () => {
+    expect(getCommandMatch('x/search')).toBeNull();
+  });
+
+  it('rejects a trigger not followed by a boundary', () => {
+    // "/searching" is not the command "/search".
+    expect(getCommandMatch('/searching')).toBeNull();
+  });
+
+  it('skips a boundary-invalid occurrence and matches a later valid one', () => {
+    // First "/search" (index 1) is glued to "x"; the second (index 9) is valid.
+    expect(getCommandMatch('x/search /search')).toEqual({ start: 9, end: 16 });
+  });
+
+  it('replaces the best match when a later-listed trigger sits earlier', () => {
+    // "/search" (listed first) matches at index 7; "/think" (listed later)
+    // matches at index 0, so the smaller start replaces the initial best.
+    expect(getCommandMatch('/think /search')).toEqual({ start: 0, end: 6 });
+  });
+
+  it('keeps the best match when a later-listed trigger sits further right', () => {
+    // "/search" matches at index 0 first; "/think" at index 8 does not displace
+    // it because 8 is not smaller than 0.
+    expect(getCommandMatch('/search /think')).toEqual({ start: 0, end: 7 });
+  });
+});
diff --git a/src/view/askbar/commandMatch.ts b/src/view/askbar/commandMatch.ts
new file mode 100644
index 0000000..b3ad8e0
--- /dev/null
+++ b/src/view/askbar/commandMatch.ts
@@ -0,0 +1,41 @@
+import type { EntityMatch } from '@lexical/text';
+import { COMMANDS } from '../../config/commands';
+
+/** All known slash-command triggers, e.g. "/search". */
+const TRIGGERS: readonly string[] = COMMANDS.map((c) => c.trigger);
+
+/** True when `ch` is undefined (string edge) or a whitespace character. */
+function isBoundary(ch: string | undefined): boolean {
+  return ch === undefined || /\s/.test(ch);
+}
+
+/**
+ * Finds the earliest known slash-command token in `text` that is bounded by
+ * whitespace (or the string edges) on both sides, returning its character
+ * range. `registerLexicalTextEntity` calls this to wrap command triggers in a
+ * styled CommandNode so they render violet while the caret stays native.
+ *
+ * Word-boundary aware: "/searching" does not match "/search". Pure and
+ * exported for direct unit testing.
+ */
+export function getCommandMatch(text: string): EntityMatch | null {
+  let best: EntityMatch | null = null;
+  for (const trigger of TRIGGERS) {
+    let from = 0;
+    // Find the first boundary-valid occurrence of this trigger.
+    for (;;) {
+      const idx = text.indexOf(trigger, from);
+      if (idx === -1) break;
+      const beforeOk = idx === 0 || isBoundary(text[idx - 1]);
+      const afterOk = isBoundary(text[idx + trigger.length]);
+      if (beforeOk && afterOk) {
+        if (best === null || idx < best.start) {
+          best = { start: idx, end: idx + trigger.length };
+        }
+        break;
+      }
+      from = idx + trigger.length;
+    }
+  }
+  return best;
+}