ForgeLM/.planning/phases/06-chat-ui-redesign/06-03-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	03	execute	2	06-01	tauri-app/src/features/settings/SettingsPage.tsx tauri-app/src/features/settings/SettingsPage.css	true	UI-03	truths artifacts key_links 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 path provides contains tauri-app/src/features/settings/SettingsPage.css Updated sp-nav, sp-card, sp-section CSS with Manus tokens var(--manus-surface) path provides tauri-app/src/features/settings/SettingsPage.tsx SettingsPage with Manus Tailwind token classes applied from to via pattern tauri-app/src/features/settings/SettingsPage.css tauri-app/src/index.css var(--manus-surface), var(--manus-elevated), var(--manus-tx), var(--manus-tx2) 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.

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

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:

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

.sp-card {
  background: var(--manus-elevated);
  border: 1px solid var(--manus-hover);
}

Section text:

.sp-section-title {
  color: var(--manus-tx);
}
.sp-section-desc {
  color: var(--manus-tx2);
}
.sp-label {
  color: var(--manus-tx2);
}

Form fields:

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

.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

<success_criteria>

• 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 </success_criteria>

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