diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 76d2107..d8b20a6 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -93,6 +93,24 @@ Plans: - [x] `05-03-PLAN.md` - Add validation UI and recovery experience. **UI hint**: yes +### Phase 6: Chat UI Redesign (Manus AI System Design) +**Goal**: Redesign the chat UI to follow Manus AI system design with correct color tokens, component decomposition, and UX patterns. +**Depends on**: Phase 5 +**Requirements**: UI-01, UI-02, UI-03 +**Success Criteria** (what must be TRUE): + 1. Model selector lives inside the chat input pill (hero and regular), not the sidebar. + 2. scan_models returns only top-level GGUF files (no subdirectory traversal). + 3. Thinking indicator is a single pulsing blue dot + "Thinking" text. + 4. Send button uses PaperPlaneRight icon only. + 5. App uses Manus color tokens (#171717 base, #1E1E1E surface, #262626 elevated). + 6. Settings page aligns to Manus design tokens. +**Plans**: 3 plans +Plans: +- [ ] `06-01-PLAN.md` — Backend scan fix + ModelSelectorPill + Sidebar cleanup + ChatView wiring +- [ ] `06-02-PLAN.md` — Global Manus tokens + thinking indicator + send button + message widths +- [ ] `06-03-PLAN.md` — Settings page Manus token alignment +**UI hint**: yes + ## Progress | Phase | Plans Complete | Status | Completed | @@ -102,3 +120,4 @@ Plans: | 3. Unified Runtime Workspace | 3/3 | Complete | 2026-03-29 | | 4. Hugging Face Download Engine | 3/3 | Complete | 2026-03-31 | | 5. Model Source Validation | 3/3 | Planned | - | +| 6. Chat UI Redesign | 0/3 | Planned | - | diff --git a/.planning/phases/06-chat-ui-redesign/06-01-PLAN.md b/.planning/phases/06-chat-ui-redesign/06-01-PLAN.md new file mode 100644 index 0000000..1e68fef --- /dev/null +++ b/.planning/phases/06-chat-ui-redesign/06-01-PLAN.md @@ -0,0 +1,208 @@ +--- +phase: 06-chat-ui-redesign +plan: 01 +type: execute +wave: 1 +depends_on: [] +files_modified: + - tauri-app/src-tauri/src/model_files.rs + - tauri-app/src/components/ModelSelectorPill.tsx + - tauri-app/src/components/Sidebar.tsx + - tauri-app/src/App.tsx + - tauri-app/src/components/ChatView.tsx +autonomous: true +requirements: [UI-01] + +must_haves: + truths: + - "scan_models returns only GGUF files at the root of the models directory (no subdirectory traversal)" + - "Model selector dropdown appears inside the chat input area (both hero and regular input)" + - "Model selector is absent from the Sidebar" + - "Selecting a model in the input pill updates the active model" + artifacts: + - path: "tauri-app/src-tauri/src/model_files.rs" + provides: "scan_model_dir_top_level function replaces recursive scan" + contains: "scan_model_dir_top_level" + - path: "tauri-app/src/components/ModelSelectorPill.tsx" + provides: "Reusable model selector dropdown pill for input area" + exports: ["ModelSelectorPill", "ModelSelectorPillProps"] + - path: "tauri-app/src/components/Sidebar.tsx" + provides: "Sidebar without model-section block" + key_links: + - from: "tauri-app/src/App.tsx" + to: "tauri-app/src/components/ChatView.tsx" + via: "new props: models, localModels, selectedModel, onModelChange, onModelSwap, isSwapping, status" + pattern: "models=\\{models\\}" + - from: "tauri-app/src/components/ChatView.tsx" + to: "tauri-app/src/components/ModelSelectorPill.tsx" + via: "import and render inside .input-box" + pattern: " +Fix the Rust model scan to return only top-level GGUF files, create a ModelSelectorPill component, move the model selector out of the Sidebar and into the ChatView input area. + +Purpose: The model selector must live in the chat input bubble (Manus AI pattern), not the sidebar. The scan bug returns unintended nested models from HuggingFace cache dirs. +Output: `scan_model_dir_top_level` Rust function, `ModelSelectorPill.tsx` component, Sidebar cleaned of model-section, ChatView wired with model selector in both input boxes. + + + +@$HOME/.config/opencode/get-shit-done/workflows/execute-plan.md +@$HOME/.config/opencode/get-shit-done/templates/summary.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/phases/06-chat-ui-redesign/06-RESEARCH.md + +@tauri-app/src-tauri/src/model_files.rs +@tauri-app/src/components/Sidebar.tsx +@tauri-app/src/components/ChatView.tsx +@tauri-app/src/App.tsx + + + + + +From tauri-app/src/components/Sidebar.tsx (lines 13-22) — props that move to ChatView: +```typescript +interface SidebarProps { + models: ModelInfo[]; // <- these 6 props move to ChatView + localModels: RuntimeModelFile[]; + selectedModel: string; + onModelChange: (v: string) => void; + onModelSwap?: (path: string) => void; + isSwapping?: boolean; + status: RuntimeStatus; + // ... non-model props stay in Sidebar +} +``` + +From tauri-app/src/components/ChatView.tsx (lines 18-28) — current ChatView Props: +```typescript +interface Props { + db: DB; + chatId: number | null; + server: string; + apiKey: string; + model: string; + onChatCreated: (id: number) => void; + onChatUpdated: () => void; + onOpenSidebar?: () => void; + onDegradationDetected?: () => void; +} +// New props to add: models, localModels, selectedModel, onModelChange, onModelSwap, isSwapping, status +``` + +From tauri-app/src/components/Sidebar.tsx (lines 56-71) — deduplication logic to extract: +```typescript +// Merge API models + local scanned models, dedupe by id, filter isInChatSelector +const allModels: ModelOption[] = [ + ...models + .filter((m) => m.id !== "" && m.id !== "local") + .map((m) => ({ id: m.id, label: getDisplayName(m.id) })), + ...localModels.map((m) => ({ id: m.path, label: getDisplayName(m.path) })), +].filter((m, i, arr) => arr.findIndex((x) => x.id === m.id) === i); +const selectedLabel = getDisplayName(selectedModel) || "No model"; +``` + +New ModelSelectorPill interface (to create): +```typescript +interface ModelSelectorPillProps { + models: ModelInfo[]; + localModels: RuntimeModelFile[]; + selectedModel: string; + onModelChange: (id: string) => void; + onModelSwap?: (path: string) => void; + isSwapping?: boolean; + status: RuntimeStatus; +} +``` + +Rust scan_models Tauri command signature (model_files.rs): +```rust +#[tauri::command] +pub fn scan_models(dir: String) -> Result, String> +// Currently calls scan_model_dir() -> scan_model_dir_recursive() +// Must change to call scan_model_dir_top_level() +``` + + + + + + Task 1: Fix Rust model scan to top-level only + update test + tauri-app/src-tauri/src/model_files.rs + +Add a new `scan_model_dir_top_level(path: &Path) -> Result, String>` function that reads only the immediate children of `path` (depth=1) — no recursion. Only collects entries where `p.is_file()` and extension is `"gguf"` (case-insensitive). Sort by name. Keep `scan_model_dir_recursive` in place (used by existing tests and potentially future use) — do NOT delete it. + +Update `scan_model_dir()` to call `scan_model_dir_top_level` instead of `scan_model_dir_recursive` — OR bypass `scan_model_dir()` entirely and have the `scan_models` Tauri command call `scan_model_dir_top_level` directly. + +Update the `scan_model_dir_finds_gguf_in_subdirectories` test (line 196): rename it to `scan_model_dir_returns_only_top_level_gguf` and update the assertion so nested models are NOT in the result — only `["top-level.gguf"]`. Add a new test `scan_model_dir_recursive_still_finds_nested` that exercises `scan_model_dir_recursive` directly to ensure the recursive function still works. + +Verify: `cargo test -p commands` (or `cargo test` in `tauri-app/src-tauri/`) passes with no failures. + + + cd tauri-app/src-tauri && cargo test scan_model 2>&1 | tail -10 + + All `scan_model*` tests pass. `scan_models` Tauri command uses top-level scan. Nested GGUFs are NOT returned by default. + + + + Task 2: Create ModelSelectorPill + wire into ChatView + clean Sidebar + + tauri-app/src/components/ModelSelectorPill.tsx, + tauri-app/src/components/Sidebar.tsx, + tauri-app/src/components/ChatView.tsx, + tauri-app/src/App.tsx + + +**Step A — Create `ModelSelectorPill.tsx`:** +Create `tauri-app/src/components/ModelSelectorPill.tsx`. Extract the deduplication logic from `Sidebar.tsx` lines 56-71 into this component (or call a shared util). The component renders a compact pill button showing the selected model's display name (`getDisplayName`). Clicking opens a dropdown listbox (reuse the same HTML pattern as `Sidebar.tsx` lines 136-168: `model-dropdown-menu` with `model-dropdown-item` entries). Use `getDisplayName` from `lib/modelAlias`. Emit `onModelChange(id)` when item selected; if item is a local model path, also call `onModelSwap(path)`. Show a spinner/disabled state when `isSwapping` is true. Style: `bg-[#262626] text-[#9CA3AF] rounded-md px-2 py-1 text-sm flex items-center gap-1.5` for the pill trigger. Dropdown: absolute positioned, `bg-[#1E1E1E] border border-[#333333]`. Props: `ModelSelectorPillProps` as defined in the interface block above. + +**Step B — Clean Sidebar.tsx:** +In `Sidebar.tsx`, delete the `model-section` div block (lines ~131-170) and remove from `SidebarProps`: `models`, `localModels`, `selectedModel`, `onModelChange`, `onModelSwap`, `isSwapping`. Remove the `status` prop if it was only used for model selector logic. Remove the deduplication logic (lines 56-69) and the `handleModelSelect` handler. Remove `ModelInfo` import if no longer used. + +**Step C — Update App.tsx:** +In `App.tsx`, stop passing the 6 model props to ``. Add them as new props to ``: `models={models}`, `localModels={localModels}`, `selectedModel={selectedModel}`, `onModelChange={setSelectedModel}`, `onModelSwap={handleModelSwap}`, `isSwapping={isSwapping}`, `status={status}`. + +**Step D — Update ChatView.tsx:** +Add the 6 model props to ChatView's `Props` interface. Import `ModelSelectorPill`. Render `` inside the input area in TWO places: +1. Hero input block (around line 657) — inside `.input-box`, before the textarea, on its own row or inline left. +2. Regular input block (around line 860-875) — same position inside `.input-box`. + +Do NOT change any existing chat logic, message handling, or streaming logic. + +Pitfall to avoid: Do NOT use `useModelSelector` hook — just pass props directly. Do NOT create a context. Keep it simple prop-drilling. + + + cd tauri-app && npm run build 2>&1 | tail -20 + + TypeScript build passes. ModelSelectorPill renders in both hero and regular input areas. Sidebar has no model-section. App.tsx routes model props to ChatView. + + + + + +- `cargo test scan_model` passes — top-level scan verified by updated test +- `npm run build` passes — no TypeScript errors +- Sidebar.tsx no longer contains `model-section` +- ChatView.tsx imports and renders `ModelSelectorPill` in both input contexts +- App.tsx passes model props to ChatView (not Sidebar) + + + +- Top-level model scan: `scan_models("./models")` returns only `.gguf` files directly in the folder — NOT files from subdirectories +- Model selector visible in chat input pill (hero screen and regular screen) +- No model selector in the sidebar +- TypeScript and Rust compile without errors + + + +After completion, create `.planning/phases/06-chat-ui-redesign/06-01-SUMMARY.md` + diff --git a/.planning/phases/06-chat-ui-redesign/06-02-PLAN.md b/.planning/phases/06-chat-ui-redesign/06-02-PLAN.md new file mode 100644 index 0000000..e896860 --- /dev/null +++ b/.planning/phases/06-chat-ui-redesign/06-02-PLAN.md @@ -0,0 +1,281 @@ +--- +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" +--- + + +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). + + + +@$HOME/.config/opencode/get-shit-done/workflows/execute-plan.md +@$HOME/.config/opencode/get-shit-done/templates/summary.md + + + +@.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): +```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 && ( +
+
+ +
+
+)} +``` + +Current send button (ChatView.tsx line 871 — non-hero): +```tsx + +``` +Current send button (ChatView.tsx line 657 — hero): +```tsx + +``` + +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; } +``` + + + + + + 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): + ```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 && ( +
+
+
+
+ )} + ``` + +3. **Send button icon:** Find ALL occurrences of ``. 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. + + + 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%) + + + +- 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 + + + +After completion, create `.planning/phases/06-chat-ui-redesign/06-02-SUMMARY.md` + diff --git a/.planning/phases/06-chat-ui-redesign/06-03-PLAN.md b/.planning/phases/06-chat-ui-redesign/06-03-PLAN.md new file mode 100644 index 0000000..d7817ba --- /dev/null +++ b/.planning/phases/06-chat-ui-redesign/06-03-PLAN.md @@ -0,0 +1,214 @@ +--- +phase: 06-chat-ui-redesign +plan: 03 +type: execute +wave: 2 +depends_on: [06-01] +files_modified: + - tauri-app/src/features/settings/SettingsPage.tsx + - tauri-app/src/features/settings/SettingsPage.css +autonomous: true +requirements: [UI-03] + +must_haves: + truths: + - "Settings page left nav panel uses Manus surface color (#1E1E1E) and correct border color (#262626)" + - "Settings cards/sections use Manus elevated color (#262626) background" + - "Section titles use Manus primary text (#F3F4F6), descriptions use secondary text (#9CA3AF)" + - "Two-panel layout is preserved and fully functional" + artifacts: + - path: "tauri-app/src/features/settings/SettingsPage.css" + provides: "Updated sp-nav, sp-card, sp-section CSS with Manus tokens" + contains: "var(--manus-surface)" + - path: "tauri-app/src/features/settings/SettingsPage.tsx" + provides: "SettingsPage with Manus Tailwind token classes applied" + key_links: + - from: "tauri-app/src/features/settings/SettingsPage.css" + to: "tauri-app/src/index.css" + via: "var(--manus-surface), var(--manus-elevated), var(--manus-tx), var(--manus-tx2)" + pattern: "var\\(--manus-" +--- + + +Apply Manus design tokens to the Settings page: update the left-nav panel, card/section backgrounds, and text colors while preserving the existing two-panel layout. + +Purpose: Visual consistency — Settings must match the chat UI's Manus dark theme. +Output: Updated SettingsPage.css (sp-nav, sp-card, sp-section selectors) and SettingsPage.tsx (Tailwind token classes on inline-styled elements). The --manus-* CSS vars (created in plan 06-02) are the token source. + + + +@$HOME/.config/opencode/get-shit-done/workflows/execute-plan.md +@$HOME/.config/opencode/get-shit-done/templates/summary.md + + + +@.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/features/settings/SettingsPage.tsx +@tauri-app/src/features/settings/SettingsPage.css +@tauri-app/src/index.css + + + + + +SettingsPage BEM class mapping to update (from SettingsPage.css): +``` +.sp-nav → left panel container → bg: var(--manus-surface) border: var(--manus-elevated) +.sp-nav-item → nav list items → text: var(--manus-tx2) hover bg: var(--manus-elevated) +.sp-nav-item.active → active nav item → text: var(--manus-tx) bg: var(--manus-elevated) +.sp-card → content cards → bg: var(--manus-elevated) border: var(--manus-hover) +.sp-section → section wrappers → no change needed (inherit) +.sp-section-title → section headings → color: var(--manus-tx) +.sp-section-desc → section descriptions → color: var(--manus-tx2) +.sp-label → field labels → color: var(--manus-tx2) +.sp-input → text inputs → bg: var(--manus-surface) border: var(--manus-elevated) color: var(--manus-tx) +.sp-select → select elements → bg: var(--manus-surface) border: var(--manus-elevated) color: var(--manus-tx) +.sp-page → full page container → bg: var(--bg) [already set via --bg] +``` + +Manus design tokens available after plan 06-02: +```css +var(--manus-base): #171717 /* page bg */ +var(--manus-surface): #1E1E1E /* nav, inputs, cards bg */ +var(--manus-elevated): #262626 /* card bg, borders */ +var(--manus-hover): #333333 /* hover states, borders on cards */ +var(--manus-tx): #F3F4F6 /* primary text */ +var(--manus-tx2): #9CA3AF /* secondary text, labels */ +var(--manus-tx3): #52525B /* muted text */ +var(--manus-blue): #3B82F6 /* accent */ +``` + +SettingsPage.tsx — inline Tailwind patterns (lines ~571-644 already use Tailwind): +- HF search area uses classes like `flex`, `gap-2`, `text-sm` — extend these with manus token classes +- Nav items in TSX that use inline styles — switch to `className` with manus token names + + + + + + Task 1: Update SettingsPage.css with Manus token variables + tauri-app/src/features/settings/SettingsPage.css + +Read `SettingsPage.css` fully, then replace hardcoded hex values for the key class groups with Manus CSS vars. Do NOT restructure the CSS — only update background, border, and color property values. Target classes: + +**Left nav panel:** +```css +.sp-nav { + background: var(--manus-surface); /* was hardcoded bg */ + border-right: 1px solid var(--manus-elevated); +} +.sp-nav-item { + color: var(--manus-tx2); +} +.sp-nav-item:hover { + background: var(--manus-elevated); + color: var(--manus-tx); +} +.sp-nav-item.active, .sp-nav-item[data-active="true"] { + background: var(--manus-elevated); + color: var(--manus-tx); +} +``` + +**Content cards:** +```css +.sp-card { + background: var(--manus-elevated); + border: 1px solid var(--manus-hover); +} +``` + +**Section text:** +```css +.sp-section-title { + color: var(--manus-tx); +} +.sp-section-desc { + color: var(--manus-tx2); +} +.sp-label { + color: var(--manus-tx2); +} +``` + +**Form fields:** +```css +.sp-input, .sp-select { + background: var(--manus-surface); + border-color: var(--manus-elevated); + color: var(--manus-tx); +} +.sp-input:focus, .sp-select:focus { + border-color: var(--manus-blue); + outline: none; +} +``` + +**Page container:** +```css +.sp-page { + background: var(--bg); /* picks up updated #171717 */ +} +``` + +Strategy: Read each targeted selector's current rules, replace ONLY the `background`, `border`, `color` values — keep all padding, margin, flex, font-size, and other layout properties exactly as-is. If a property uses `var(--bg)` or `var(--text)` already (and those were updated in plan 06-02), it will inherit the correct Manus value automatically — no change needed for those. + + + cd tauri-app && npm run build 2>&1 | grep -E "error" | head -10 + + SettingsPage.css updated — .sp-nav uses var(--manus-surface), .sp-card uses var(--manus-elevated), text uses var(--manus-tx) / var(--manus-tx2). No layout changes. + + + + Task 2: Update SettingsPage.tsx inline color classes to Manus tokens + tauri-app/src/features/settings/SettingsPage.tsx + +Read `SettingsPage.tsx`. Find all locations where color or background classes are applied inline in JSX as Tailwind utilities or inline style attributes — these should use Manus token Tailwind classes (added in plan 06-02). + +**Specific replacements:** +1. Any `bg-[#0d1115]` or `bg-[#12171d]` or `bg-[#171d24]` → replace with `bg-manus-surface` or `bg-manus-elevated` as appropriate for the element role (nav bg = surface, card bg = elevated). +2. Any `text-[#a0a9b4]` or `text-gray-400` used for labels/descriptions → `text-manus-tx2` +3. Any `text-[#f2f4f7]` or `text-white` used for primary content text → `text-manus-tx` +4. Any `border-[#1e252d]` or similar border colors → `border-manus-elevated` +5. HF search area (lines ~571-644): If using raw hex Tailwind classes, switch to manus token versions + +**Do NOT change:** +- Any `className` attributes that already use the existing `c-*` Tailwind token names (they inherit via CSS vars updated in plan 06-02) +- Layout properties (flex, grid, padding, gap, margin, width, height) +- Component structure, logic, or event handlers +- The `.sp-*` BEM class names (those are handled in Task 1 via CSS) +- Any dynamic or conditional class logic — preserve as-is + +If SettingsPage.tsx has very few inline hex classes (the RESEARCH notes it mostly uses `.sp-*` BEM classes), this task may be small. Confirm by reading the file — if all coloring is done via `.sp-*` CSS classes (already handled in Task 1), this task only needs to verify correctness and make no changes. Still create the SUMMARY confirming the audit. + + + cd tauri-app && npm run build 2>&1 | tail -10 + + TypeScript build passes. SettingsPage.tsx uses Manus token classes or inherits via updated CSS vars. No hardcoded hex colors for backgrounds/text remain in inline JSX. + + + + + +- `npm run build` passes clean +- SettingsPage.css `.sp-nav` uses `var(--manus-surface)` for background +- SettingsPage.css `.sp-card` uses `var(--manus-elevated)` for background +- SettingsPage.css `.sp-section-title` uses `var(--manus-tx)` for color +- Two-panel layout is visually intact (no layout regressions) +- Settings page accessible and all sections navigable + + + +- Settings page left nav is #1E1E1E (Manus surface), not navy-black +- Cards/sections are #262626 (Manus elevated) +- Text hierarchy is correct: titles #F3F4F6, labels/descriptions #9CA3AF +- All form inputs, selects, and buttons remain functional +- Build passes clean + + + +After completion, create `.planning/phases/06-chat-ui-redesign/06-03-SUMMARY.md` +