From 2d893daf07daff36c32f77e93df4f24fbe76fbc0 Mon Sep 17 00:00:00 2001 From: Evandro Fonseca Junior Date: Thu, 2 Apr 2026 09:10:02 -0300 Subject: [PATCH] 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 --- .../06-chat-ui-redesign/06-02-SUMMARY.md | 65 +++++++++++++++++++ tauri-app/src/components/ChatView.css | 35 +++++----- tauri-app/src/index.css | 52 ++++++++++----- tauri-app/tailwind.config.js | 9 +++ 4 files changed, 127 insertions(+), 34 deletions(-) create mode 100644 .planning/phases/06-chat-ui-redesign/06-02-SUMMARY.md diff --git a/.planning/phases/06-chat-ui-redesign/06-02-SUMMARY.md b/.planning/phases/06-chat-ui-redesign/06-02-SUMMARY.md new file mode 100644 index 0000000..ac833ed --- /dev/null +++ b/.planning/phases/06-chat-ui-redesign/06-02-SUMMARY.md @@ -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 `` with `` 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`: + - `` pulsing blue dot + - `Thinking` 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 \ No newline at end of file diff --git a/tauri-app/src/components/ChatView.css b/tauri-app/src/components/ChatView.css index be8075e..0d5ba35 100644 --- a/tauri-app/src/components/ChatView.css +++ b/tauri-app/src/components/ChatView.css @@ -661,7 +661,7 @@ width: 100%; } .msg-wrapper.user { align-self: flex-end; align-items: flex-end; } -.msg-wrapper.assistant { align-self: flex-start; align-items: flex-start; width: 100%; max-width: 100%; } +.msg-wrapper.assistant { align-self: flex-start; align-items: flex-start; max-width: 800px; } /* ── Bubbles ── */ .msg-bubble { @@ -766,31 +766,34 @@ line-height: 1.55; } -/* ── Thinking bubble (loading dots) ── */ -.thinking { +/* ── Thinking bubble (Manus-style pulsing blue dot) ── */ +.thinking-manus { display: flex; align-items: center; - gap: 5px; - padding: 13px 18px; - width: fit-content; + gap: 8px; + padding: 8px 0; } -.thinking span { +.thinking-dot { width: 8px; height: 8px; - background: #9fd0ff; + background: #3B82F6; border-radius: 50%; - opacity: 0.5; - animation: thinking-bounce 1.4s ease-in-out infinite; + flex-shrink: 0; + animation: thinking-pulse 1.5s ease-in-out infinite; } -.thinking span:nth-child(2) { animation-delay: 0.16s; } -.thinking span:nth-child(3) { animation-delay: 0.32s; } -@keyframes thinking-bounce { - 0%, 80%, 100% { transform: translateY(0); opacity: 0.3; } - 40% { transform: translateY(-6px); opacity: 1; } +.thinking-label { + font-size: 0.875rem; + color: #9CA3AF; + font-weight: 400; +} +@keyframes thinking-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.35; transform: scale(0.7); } } @media (prefers-reduced-motion: reduce) { - .thinking span, + .thinking-manus, + .thinking-dot, .msg-bubble, .queue-clear-btn, .notice-action-btn, diff --git a/tauri-app/src/index.css b/tauri-app/src/index.css index 350357e..9a425c4 100644 --- a/tauri-app/src/index.css +++ b/tauri-app/src/index.css @@ -2,41 +2,57 @@ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { - --bg: #0a1016; - --bg2: #0f1721; - --bg3: #14202d; - --bg4: #182636; - --bg5: #203246; - --border: #243241; - --border2: #344759; - --text: #edf5ff; - --text2: #93a8bc; - --text3: #5d7288; - --accent: #48a6ff; - --accent2: #2f8ae3; - --accent-glow: rgba(72,166,255,0.16); - --user-bg: #10263f; - --user-border: #214468; - --asst-bg: #101924; - --asst-border: #243241; + /* Updated to Manus design tokens */ + --bg: #171717; /* Manus bg-base */ + --bg2: #1E1E1E; /* Manus bg-surface */ + --bg3: #262626; /* Manus bg-elevated */ + --bg4: #333333; /* Manus bg-hover */ + --bg5: #3D3D3D; /* slightly lighter */ + --border: #232a33; + --border2: #313944; + --text: #F3F4F6; /* Manus text-primary */ + --text2: #9CA3AF; /* Manus text-secondary */ + --text3: #52525B; /* Manus text-muted */ + --accent: #4b86ff; + --accent2: #3674ef; + --accent-glow: rgba(75,134,255,0.14); + --user-bg: #101c2d; + --user-border: #203451; + --asst-bg: #10161d; + --asst-border: #26303b; --danger: #f04040; --success: #30d158; --warning: #ffd60a; --code-bg: #0d0d10; --radius-sm: 6px; + --radius-md: 10px; --radius: 10px; --radius-lg: 14px; + --font-sans: "Inter", "Segoe UI Variable", "SF Pro Display", system-ui, sans-serif; + --font-serif: "Merriweather", Georgia, serif; --shadow: 0 2px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); font-size: 15px; } +/* Manus design tokens as named vars (for new components) */ +:root { + --manus-base: #171717; + --manus-surface: #1E1E1E; + --manus-elevated: #262626; + --manus-hover: #333333; + --manus-tx: #F3F4F6; + --manus-tx2: #9CA3AF; + --manus-tx3: #52525B; + --manus-blue: #3B82F6; +} + html, body, #root { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); - font-family: "Segoe UI Variable", "SF Pro Display", "IBM Plex Sans", "Inter", system-ui, sans-serif; + font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } diff --git a/tauri-app/tailwind.config.js b/tauri-app/tailwind.config.js index a14fb87..2b7551e 100644 --- a/tauri-app/tailwind.config.js +++ b/tauri-app/tailwind.config.js @@ -20,6 +20,15 @@ export default { "c-danger": "var(--danger)", "c-success": "var(--success)", "c-warn": "var(--warning)", + // Manus design tokens + "manus-base": "var(--manus-base)", + "manus-surface": "var(--manus-surface)", + "manus-elevated": "var(--manus-elevated)", + "manus-hover": "var(--manus-hover)", + "manus-tx": "var(--manus-tx)", + "manus-tx2": "var(--manus-tx2)", + "manus-tx3": "var(--manus-tx3)", + "manus-blue": "var(--manus-blue)", }, }, },