feat(ui): complete Plan 06-02 - Manus color tokens, thinking indicator, send button

- Apply Manus design tokens to index.css and tailwind.config.js - Replace three-dot thinking indicator with pulsing blue dot + 'Thinking' text - Change send button icon from ArrowUp to PaperPlaneRight - Align message and input widths to 800px max
2026-04-02 09:10:02 -03:00
1 parent cb722e79a6
commit 2d893daf07
@@ -0,0 +1,65 @@
+---
+phase: 06-chat-ui-redesign
+plan: 02
+status: complete
+completed_at: "2026-04-02T12:15:00Z"
+---
+
+# Plan 06-02 Summary: Chat Screen Redesign
+
+## Completed Tasks
+
+### Task 1: Apply Manus color tokens to index.css and tailwind.config.js ✅
+
+**index.css changes:**
+- Updated `:root` CSS vars to Manus design tokens:
+  - `--bg`: `#0d1115` → `#171717` (Manus base)
+  - `--bg2`: `#12171d` → `#1E1E1E` (Manus surface)
+  - `--bg3`: `#171d24` → `#262626` (Manus elevated)
+  - `--bg4`: `#1e252d` → `#333333` (Manus hover)
+  - `--bg5`: `#27303a` → `#3D3D3D` (slightly lighter)
+  - `--text`: `#f2f4f7` → `#F3F4F6` (Manus text-primary)
+  - `--text2`: `#a0a9b4` → `#9CA3AF` (Manus text-secondary)
+  - `--text3`: `#6f7782` → `#52525B` (Manus text-muted)
+- Added new named Manus vars: `--manus-base`, `--manus-surface`, `--manus-elevated`, `--manus-hover`, `--manus-tx`, `--manus-tx2`, `--manus-tx3`, `--manus-blue`
+
+**tailwind.config.js changes:**
+- Added Manus color tokens: `manus-base`, `manus-surface`, `manus-elevated`, `manus-hover`, `manus-tx`, `manus-tx2`, `manus-tx3`, `manus-blue`
+
+### Task 2: Replace thinking indicator, send button icon, and align message widths ✅
+
+**ChatView.tsx changes:**
+1. Added `PaperPlaneRight` to phosphor import
+2. Replaced `<ArrowUp>` with `<PaperPlaneRight weight="fill">` in both send buttons (hero and regular)
+3. Removed "Send" text label from regular send button (icon-only now)
+4. Replaced three-dot `.thinking` with Manus-style `.thinking-manus`:
+   - `<span className="thinking-dot">` pulsing blue dot
+   - `<span className="thinking-label">Thinking</span>` text label
+
+**ChatView.css changes:**
+1. Replaced `.thinking` bounce animation with `.thinking-manus` pulse:
+   - Blue dot (`#3B82F6`) with scale/opacity pulse animation
+   - "Thinking" label in secondary text color (`#9CA3AF`)
+2. Updated `.msg-wrapper.assistant` max-width from `100%` to `800px` for consistent reading column
+
+## Verification Results
+
+### TypeScript Build ✅
+```
+> tsc && vite build
+✓ 6325 modules transformed.
+✓ built in 5.83s
+```
+
+## Files Modified
+- `tauri-app/src/index.css` — Manus color tokens
+- `tauri-app/tailwind.config.js` — Manus Tailwind tokens
+- `tauri-app/src/components/ChatView.tsx` — PaperPlaneRight icon, thinking-manus JSX
+- `tauri-app/src/components/ChatView.css` — thinking-manus styles, message width
+
+## Success Criteria Met
+- [x] App background is neutral dark (#171717), not navy-black
+- [x] Thinking state shows "● Thinking" (pulsing blue dot + text), not three bouncing dots
+- [x] Send button is a paper plane icon, no text label
+- [x] User and assistant messages share same max reading width (800px)
+- [x] Build passes clean