282 lines
11 KiB
Markdown
282 lines
11 KiB
Markdown
---
|
|
phase: 06-chat-ui-redesign
|
|
plan: 02
|
|
type: execute
|
|
wave: 2
|
|
depends_on: [06-01]
|
|
files_modified:
|
|
- tauri-app/src/index.css
|
|
- tauri-app/tailwind.config.js
|
|
- tauri-app/src/components/ChatView.tsx
|
|
- tauri-app/src/components/ChatView.css
|
|
autonomous: true
|
|
requirements: [UI-02]
|
|
|
|
must_haves:
|
|
truths:
|
|
- "App uses Manus color tokens (#171717 base, #1E1E1E surface, #262626 elevated)"
|
|
- "Thinking indicator is a single pulsing blue dot (#3B82F6) with 'Thinking' text — not three bouncing dots"
|
|
- "Send button uses PaperPlaneRight icon only (no 'Send' text label)"
|
|
- "Message and input area share a consistent reading-column width"
|
|
artifacts:
|
|
- path: "tauri-app/src/index.css"
|
|
provides: "Updated :root CSS vars aligned to Manus tokens + Manus named vars"
|
|
contains: "--manus-base"
|
|
- path: "tauri-app/tailwind.config.js"
|
|
provides: "Manus named color tokens registered for Tailwind use"
|
|
contains: "manus-base"
|
|
- path: "tauri-app/src/components/ChatView.css"
|
|
provides: "thinking-manus CSS class, updated thinking animation"
|
|
contains: "thinking-manus"
|
|
key_links:
|
|
- from: "tauri-app/src/index.css"
|
|
to: "all components"
|
|
via: "CSS custom properties cascade"
|
|
pattern: "--manus-base.*#171717"
|
|
- from: "tauri-app/src/components/ChatView.tsx"
|
|
to: "tauri-app/src/components/ChatView.css"
|
|
via: "className thinking-manus replaces thinking"
|
|
pattern: "thinking-manus"
|
|
---
|
|
|
|
<objective>
|
|
Apply Manus color tokens globally, replace the three-dot thinking indicator with a pulsing blue dot + "Thinking" text, swap the send button icon to PaperPlaneRight, and align message/input reading-column widths.
|
|
|
|
Purpose: Visual alignment with Manus AI system design — correct tokens, correct indicators, correct iconography.
|
|
Output: Updated CSS vars, Tailwind config, ChatView.tsx (send button + thinking JSX), ChatView.css (thinking animation + width rules).
|
|
</objective>
|
|
|
|
<execution_context>
|
|
@$HOME/.config/opencode/get-shit-done/workflows/execute-plan.md
|
|
@$HOME/.config/opencode/get-shit-done/templates/summary.md
|
|
</execution_context>
|
|
|
|
<context>
|
|
@.planning/PROJECT.md
|
|
@.planning/phases/06-chat-ui-redesign/06-RESEARCH.md
|
|
@.planning/phases/06-chat-ui-redesign/06-01-SUMMARY.md
|
|
|
|
@tauri-app/src/index.css
|
|
@tauri-app/tailwind.config.js
|
|
@tauri-app/src/components/ChatView.tsx
|
|
@tauri-app/src/components/ChatView.css
|
|
</context>
|
|
|
|
<interfaces>
|
|
<!-- Key patterns from current codebase. -->
|
|
|
|
Current index.css :root vars to update (tauri-app/src/index.css lines 4-14):
|
|
```css
|
|
:root {
|
|
--bg: #0d1115; /* → #171717 (Manus base) */
|
|
--bg2: #12171d; /* → #1E1E1E (Manus surface) */
|
|
--bg3: #171d24; /* → #262626 (Manus elevated)*/
|
|
--bg4: #1e252d; /* → #333333 (Manus hover) */
|
|
--bg5: #27303a; /* → #333333 or keep as-is */
|
|
--text: #f2f4f7; /* → #F3F4F6 (Manus tx) */
|
|
--text2: #a0a9b4; /* → #9CA3AF (Manus tx2) */
|
|
--text3: #6f7782; /* → #52525B (Manus tx3) */
|
|
}
|
|
```
|
|
|
|
Current tailwind.config.js (full contents):
|
|
```js
|
|
export default {
|
|
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
|
corePlugins: { preflight: false },
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"c-bg": "var(--bg)", "c-bg2": "var(--bg2)", "c-bg3": "var(--bg3)",
|
|
"c-bg4": "var(--bg4)", "c-bg5": "var(--bg5)",
|
|
"c-bdr": "var(--border)", "c-bdr2": "var(--border2)",
|
|
"c-tx": "var(--text)", "c-tx2": "var(--text2)", "c-tx3": "var(--text3)",
|
|
"c-ac": "var(--accent)", "c-ac2": "var(--accent2)",
|
|
"c-danger": "var(--danger)", "c-success": "var(--success)", "c-warn": "var(--warning)",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
```
|
|
|
|
Current thinking indicator JSX (ChatView.tsx lines 763-769):
|
|
```tsx
|
|
{generating && !streamReasoning && !streamContent && !streamThinkingOpen && (
|
|
<div className="msg-wrapper assistant">
|
|
<div className="thinking">
|
|
<span /><span /><span />
|
|
</div>
|
|
</div>
|
|
)}
|
|
```
|
|
|
|
Current send button (ChatView.tsx line 871 — non-hero):
|
|
```tsx
|
|
<button className="send-btn" ...><ArrowUp size={18} weight="duotone" /> Send</button>
|
|
```
|
|
Current send button (ChatView.tsx line 657 — hero):
|
|
```tsx
|
|
<button className="send-btn" ...><ArrowUp size={18} weight="duotone" /></button>
|
|
```
|
|
|
|
Current message width CSS (ChatView.css):
|
|
```css
|
|
.messages-container { max-width: 1200px; }
|
|
.msg-wrapper.user { max-width: 800px; }
|
|
.msg-wrapper.assistant { max-width: 100%; } /* <- too wide */
|
|
.input-row { max-width: 800px; }
|
|
```
|
|
</interfaces>
|
|
|
|
<tasks>
|
|
|
|
<task type="auto">
|
|
<name>Task 1: Apply Manus color tokens to index.css and tailwind.config.js</name>
|
|
<files>tauri-app/src/index.css, tauri-app/tailwind.config.js</files>
|
|
<action>
|
|
**index.css — update :root vars to Manus values:**
|
|
Change the existing CSS vars to the Manus design tokens. Also ADD new named Manus vars for direct use (do not remove old vars — components still reference them):
|
|
```css
|
|
:root {
|
|
/* Updated to Manus design tokens */
|
|
--bg: #171717; /* was #0d1115 — Manus bg-base */
|
|
--bg2: #1E1E1E; /* was #12171d — Manus bg-surface */
|
|
--bg3: #262626; /* was #171d24 — Manus bg-elevated */
|
|
--bg4: #333333; /* was #1e252d — Manus bg-hover */
|
|
--bg5: #3D3D3D; /* was #27303a — slightly lighter */
|
|
--text: #F3F4F6; /* was #f2f4f7 — Manus text-primary */
|
|
--text2: #9CA3AF; /* was #a0a9b4 — Manus text-secondary */
|
|
--text3: #52525B; /* was #6f7782 — Manus text-muted */
|
|
/* Keep all other existing vars (--border, --accent, etc.) unchanged */
|
|
|
|
/* NEW: Manus design tokens as named vars (for new components) */
|
|
--manus-base: #171717;
|
|
--manus-surface: #1E1E1E;
|
|
--manus-elevated: #262626;
|
|
--manus-hover: #333333;
|
|
--manus-tx: #F3F4F6;
|
|
--manus-tx2: #9CA3AF;
|
|
--manus-tx3: #52525B;
|
|
--manus-blue: #3B82F6;
|
|
}
|
|
```
|
|
|
|
**tailwind.config.js — add Manus named color tokens:**
|
|
Add the following entries to the `colors` extension (append after existing entries):
|
|
```js
|
|
"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)",
|
|
```
|
|
|
|
Pitfall: CSS specificity — existing hardcoded hex values in `.css` files (e.g., `background: #252525` in ChatView.css) will NOT automatically update when CSS vars change. Do NOT touch those yet (they are handled in Task 2).
|
|
</action>
|
|
<verify>
|
|
<automated>cd tauri-app && npm run build 2>&1 | grep -E "error|warning" | head -10</automated>
|
|
</verify>
|
|
<done>index.css :root has updated vars + new --manus-* vars. tailwind.config.js has manus-* color tokens. Build passes.</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Task 2: Replace thinking indicator, send button icon, and align message widths</name>
|
|
<files>tauri-app/src/components/ChatView.tsx, tauri-app/src/components/ChatView.css</files>
|
|
<action>
|
|
**ChatView.tsx — three changes:**
|
|
|
|
1. **Import:** Add `PaperPlaneRight` to the phosphor import line (line 10):
|
|
```tsx
|
|
import { ArrowUp, PaperPlaneRight, Image, Microphone, Paperclip, ChatCircleText } from "@phosphor-icons/react";
|
|
```
|
|
(Keep `ArrowUp` import only if used elsewhere; otherwise remove it.)
|
|
|
|
2. **Thinking indicator (lines ~763-769):** Replace the three-span bounce with Manus-style:
|
|
```tsx
|
|
{generating && !streamReasoning && !streamContent && !streamThinkingOpen && (
|
|
<div className="msg-wrapper assistant">
|
|
<div className="thinking-manus">
|
|
<span className="thinking-dot" aria-hidden="true" />
|
|
<span className="thinking-label">Thinking</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
```
|
|
|
|
3. **Send button icon:** Find ALL occurrences of `<ArrowUp` inside send button JSX (hero ~line 657, regular ~line 871) and replace with `<PaperPlaneRight size={18} weight="fill" />`. Remove the "Send" text label from the non-hero button to make it icon-only. Keep the `.send-btn` class unchanged.
|
|
|
|
**ChatView.css — four changes:**
|
|
|
|
1. **Remove/replace old `.thinking span` block** (lines ~770-802). Replace with Manus thinking styles:
|
|
```css
|
|
.thinking-manus {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 0;
|
|
}
|
|
.thinking-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #3B82F6;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
animation: thinking-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
.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); }
|
|
}
|
|
```
|
|
Remove the old `@keyframes thinking-bounce` block too.
|
|
|
|
2. **Message + input reading column alignment:**
|
|
Update the width rules so messages and input align:
|
|
```css
|
|
/* Consistent reading column: 800px for user, aligned input */
|
|
.msg-wrapper.assistant { max-width: 800px; margin-left: 0; } /* was 100% */
|
|
.msg-wrapper.user { max-width: 800px; } /* unchanged */
|
|
.input-row { max-width: 800px; } /* unchanged */
|
|
```
|
|
Keep `.messages-container { max-width: 1200px; }` as the scroll container — only the message wrapper width matters.
|
|
|
|
3. **Update any hardcoded background on `.chat-view` or `.initial-screen`:**
|
|
Find and replace `background: #252525` (or similar hardcoded colors on the hero/initial screen container) with `background: var(--bg)` so it picks up the updated `#171717` token. Only change the hero background — do not mass-replace all hex values.
|
|
</action>
|
|
<verify>
|
|
<automated>cd tauri-app && npm run build 2>&1 | tail -10</automated>
|
|
</verify>
|
|
<done>TypeScript build passes. ChatView renders PaperPlaneRight send button. thinking-manus class replaces thinking. Message widths set to max 800px for both user and assistant.</done>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<verification>
|
|
- `npm run build` passes with no TypeScript errors
|
|
- index.css has `--manus-base: #171717` and updated `--bg: #171717`
|
|
- tailwind.config.js has `manus-base` through `manus-blue` color tokens
|
|
- ChatView.tsx imports `PaperPlaneRight`, renders it in both send buttons
|
|
- ChatView.css has `.thinking-manus` with pulse animation (no more `.thinking span` bounce)
|
|
- `.msg-wrapper.assistant` max-width is 800px (not 100%)
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
- App background is neutral dark (#171717), not navy-black
|
|
- Thinking state shows "● Thinking" (pulsing blue dot + text), not three bouncing dots
|
|
- Send button is a paper plane icon, no text label
|
|
- User and assistant messages share same max reading width (800px)
|
|
- Build passes clean
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.planning/phases/06-chat-ui-redesign/06-02-SUMMARY.md`
|
|
</output>
|