feat: replace textarea with tiptap editor in chat composer (Refs: beans-l910)

.beans/beans-l910--replace-textarea-with-tiptap-in-agentcomposer.md

@@ -0,0 +1,21 @@
+---
+# beans-l910
+title: Replace textarea with tiptap in AgentComposer
+status: completed
+type: task
+priority: normal
+created_at: 2026-03-21T13:11:55Z
+updated_at: 2026-03-21T13:14:22Z
+---
+
+Replace the plain textarea chat input in AgentComposer.svelte with a tiptap editor for richer input capabilities.
+
+## Summary of Changes
+
+- Installed `@tiptap/core`, `@tiptap/pm`, `@tiptap/starter-kit`, and `@tiptap/extension-placeholder`
+- Replaced plain `<textarea>` in AgentComposer.svelte with a tiptap Editor instance
+- Created custom `composerKeymap` extension for Enter (send), Shift-Tab (toggle mode), Escape (stop)
+- Handled image paste via tiptap's `handlePaste` editor prop
+- Maintained localStorage persistence and focus management
+- Styled the editor to match the original textarea appearance
+- Updated e2e test selector from `textarea` to `.composer-editor[contenteditable]`

frontend/e2e/workspace-create.spec.ts

@@ -20,8 +20,8 @@ test.describe('Workspace creation', () => {
     });
     await expect(activeWorkspace).toBeVisible({ timeout: 5_000 });
 
-    // The agent chat composer textarea should be focused
-    const composer = page.locator('textarea[placeholder="Send a message..."]');
+    // The agent chat composer editor should be focused
+    const composer = page.locator('.composer-editor[contenteditable="true"]');
     await expect(composer).toBeFocused({ timeout: 5_000 });
   });
 

frontend/package.json

@@ -55,6 +55,10 @@
   "dependencies": {
     "@fontsource-variable/roboto-mono": "^5.2.8",
     "@fontsource-variable/rubik": "^5.2.8",
+    "@tiptap/core": "^3.20.4",
+    "@tiptap/extension-placeholder": "^3.20.4",
+    "@tiptap/pm": "^3.20.4",
+    "@tiptap/starter-kit": "^3.20.4",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",