ForgeLM/.planning/phases/06-chat-ui-redesign/06-02-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
06-chat-ui-redesign	02	execute	2	06-01	tauri-app/src/index.css tauri-app/tailwind.config.js tauri-app/src/components/ChatView.tsx tauri-app/src/components/ChatView.css	true	UI-02	truths artifacts key_links 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 path provides contains tauri-app/src/index.css Updated :root CSS vars aligned to Manus tokens + Manus named vars --manus-base path provides contains tauri-app/tailwind.config.js Manus named color tokens registered for Tailwind use manus-base path provides contains tauri-app/src/components/ChatView.css thinking-manus CSS class, updated thinking animation thinking-manus from to via pattern tauri-app/src/index.css all components CSS custom properties cascade --manus-base.*#171717 from to via pattern tauri-app/src/components/ChatView.tsx tauri-app/src/components/ChatView.css className thinking-manus replaces thinking thinking-manus

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

<execution_context> @$HOME/.config/opencode/get-shit-done/workflows/execute-plan.md @$HOME/.config/opencode/get-shit-done/templates/summary.md </execution_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

Current index.css :root vars to update (tauri-app/src/index.css lines 4-14):

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

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

{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):

<button className="send-btn" ...><ArrowUp size={18} weight="duotone" /> Send</button>

Current send button (ChatView.tsx line 657 — hero):

<button className="send-btn" ...><ArrowUp size={18} weight="duotone" /></button>

Current message width CSS (ChatView.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; }

Task 1: Apply Manus color tokens to index.css and tailwind.config.js tauri-app/src/index.css, tauri-app/tailwind.config.js **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). cd tauri-app && npm run build 2>&1 | grep -E "error|warning" | head -10 index.css :root has updated vars + new --manus-* vars. tailwind.config.js has manus-* color tokens. Build passes.

Task 2: Replace thinking indicator, send button icon, and align message widths tauri-app/src/components/ChatView.tsx, tauri-app/src/components/ChatView.css **ChatView.tsx — three changes:**

1. Import: Add PaperPlaneRight to the phosphor import line (line 10):

   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:

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

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

   /* 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. cd tauri-app && npm run build 2>&1 | tail -10 TypeScript build passes. ChatView renders PaperPlaneRight send button. thinking-manus class replaces thinking. Message widths set to max 800px for both user and assistant.

- `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%)

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

After completion, create `.planning/phases/06-chat-ui-redesign/06-02-SUMMARY.md`