---
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>