Zhengshou Lai
b98d35c387
- Click entrypoint: mybot update (make install / pip -e), mybot chat (claude in repo) - Optional --dangerously-skip-permissions for Claude Code - Makefile install; hatchling package layout - .gitignore: venv, build artifacts, workspace (local symlinks) Made-with: Cursor
4.6 KiB
4.6 KiB
Web UI Redesign — "Refined Command Center"
Design Direction
Premium, warm dark theme inspired by Linear/Arc Browser. A sophisticated control center for AI agents that feels intentionally designed, not AI-generated.
What Makes Current UI Look "AI-Generated"
- Purple accent (#7c6df5) — the most cliched AI color
- Cold blue-black backgrounds (#08080c, #111118)
- Plus Jakarta Sans — safe/generic font choice
- Gradient breathing orbs on login page — textbook AI slop
- Predictable glowing/pulsing animations everywhere
- Generic card layouts with no personality
New Design Identity
Typography (Google Fonts):
- UI/Headlines: "Sora" — geometric, slightly technical, distinctive personality
- Code: "IBM Plex Mono" — clean, professional, different from JetBrains Mono
- Single font family for entire UI = cohesive identity
Color Palette:
- Backgrounds: Warm charcoal (#0c0c10 → #141418 → #1c1c22) — NOT cold blue-black
- Text: Warm whites (#e8e6f0, #9b99a9, #5c5a6a)
- Primary accent: Teal (#2dd4bf) — fresh, modern, NOT purple
- Success: Emerald (#10b981)
- Error: Rose (#f43f5e) — refined, not harsh red
- Warning: Amber (#f59e0b)
- Info/Thinking: Indigo (#6366f1) — used sparingly
Visual Texture:
- Subtle CSS noise/grain overlay on backgrounds for depth
- 1px hairline borders with warm tint (rgba(255,255,255,0.06))
- Refined shadows with slight warm undertone
- No breathing orbs, no pulsing glows — purposeful, restrained animations
- Status indicators: small colored dots, not glowing halos
Light Theme:
- Clean warm whites (#fafaf9, #f5f5f4, #e7e5e4)
- High contrast text (#1c1917, #57534e)
- Teal accent stays consistent across themes
Implementation Steps
Step 1: Update fonts in index.html
Replace Google Fonts link: swap Plus Jakarta Sans → Sora + IBM Plex Mono
Step 2: Rewrite theme.css (design tokens)
- Complete replacement of all CSS custom properties
- New color palette (warm charcoal + teal accent)
- New typography tokens (Sora + IBM Plex Mono)
- New spacing, radius, shadow, transition tokens
- Add noise texture as pseudo-element mixin
- Updated light theme variables
- Remove old "Midnight Luxe" naming
Step 3: Redesign LoginPage
- Remove gradient breathing orbs (classic AI slop)
- Replace with subtle geometric grid pattern or clean gradient
- Cleaner card: less border-radius, sharper edges, refined shadows
- Better typography hierarchy
- Minimal changes to TSX (mostly removing orb divs)
Step 4: Redesign Layout (sidebar + nav)
- Warmer sidebar background
- Cleaner nav items: simpler active state (left border accent, no glow)
- Better session list: cleaner hover, subtle delete button
- Refined bot selector dropdown
- Better brand header (no gratuitous gradients)
- Mobile hamburger menu refinements
Step 5: Redesign ChatView (main chat)
- Better message styling: cleaner bubbles, better code blocks
- Refined tool call display: smaller, more compact, professional
- Better status indicators: simple dots + text, no spinning/pulsing excess
- Cleaner input area: refined border, better focus state
- Better cost/duration badges
- Phone call overlay: keep functionality, update colors/style
- Code block redesign: header with language label, better copy button
Step 6: Redesign MemoryView
- Cleaner folder tree
- Better document cards with refined hover states
- Improved search bar styling
- Better document viewer with cleaner metadata
Step 7: Redesign SettingsView
- Cleaner section layout
- Better toggle switch (teal accent)
- Refined status badges
- Better bot list styling
Step 8: Redesign VoiceView
- Updated recording button styling (teal accent instead of purple)
- Better waveform visualization colors
- Cleaner provider selection UI
Step 9: Build & test
npm run build:web- Test on
https://metabot.xvirobotics.com/web/ - Verify dark/light themes, all views, phone call mode
Step 10: Commit & push
Scope
Files to modify (CSS-heavy, minimal TSX changes):
web/index.html— font importweb/src/theme.css— full rewrite (~470 lines)web/src/components/LoginPage.tsx— remove orb divsweb/src/components/LoginPage.module.css— full restyleweb/src/components/Layout.module.css— full restyleweb/src/components/ChatView.module.css— full restyleweb/src/components/MemoryView.module.css— full restyleweb/src/components/SettingsView.module.css— full restyleweb/src/components/VoiceView.module.css— full restyle
No functional changes — all WebSocket, state management, voice/VAD logic stays identical. This is a pure visual redesign.