docs: update all docs for ChatModeSelector, plan fixes, test counts

- COMPONENTS.md: add ChatModeSelector, mark PlanApprovalAlert deprecated
- README.md: 20 providers -> 22 providers
- docs/README.md: 511 tests -> 537, 20 -> 22 providers, add What's New
- CONTRIBUTING.md: 511 tests -> 537 across 27 files
- STATE-MANAGEMENT.md: add usePlanSync hook
- STYLING-GUIDELINES.md: add blue-tinted page theme colors

Author: zebbern

README.md

@@ -43,7 +43,7 @@ pnpm run dev
 
 ## Why Devonz?
 
-- **20 AI providers** — OpenAI, Anthropic, Google, Groq, Z.ai, Ollama, and more. Swap models mid-conversation.
+- **22 AI providers** — OpenAI, Anthropic, Google, Groq, Z.ai, Ollama, and more. Swap models mid-conversation.
 - **Full dev environment in the browser** — editor, terminal, live preview, all powered by WebContainers.
 - **One-click deploy** — push to GitHub, GitLab, Netlify, or Vercel directly from the UI.
 - **MCP tools** — extend the agent with Model Context Protocol servers for specialized workflows.
@@ -60,7 +60,7 @@ pnpm run dev
 
 **AI & Code Generation**
 - Natural language to full-stack apps (Node.js-based)
-- 20 LLM providers with hot-swappable model selection
+- 22 LLM providers with hot-swappable model selection
 - MCP (Model Context Protocol) tool integration
 - Automatic error detection and auto-fix from terminal output
 - Attach images to prompts for visual context

docs/COMPONENTS.md

@@ -20,7 +20,7 @@ The primary user interaction surface. Handles message display, input, file uploa
 | --------- | ------- |
 | `Chat.client.tsx` | Top-level chat controller (client-only, wraps AI SDK `useChat`) |
 | `BaseChat.tsx` | Layout and props interface for the chat UI |
-| `ChatBox.tsx` | Message input area with toolbar |
+| `ChatBox.tsx` | Message input area with toolbar and mode selector |
 | `Messages.client.tsx` | Message list renderer |
 | `UserMessage.tsx` | User message bubble |
 | `AssistantMessage.tsx` | AI response bubble |
@@ -43,7 +43,8 @@ The primary user interaction surface. Handles message display, input, file uploa
 | `ChatAlert.tsx` | Chat error/warning alerts |
 | `LLMApiAlert.tsx` | LLM API error alerts |
 | `SupabaseAlert.tsx` | Supabase connection alerts |
-| `PlanApprovalAlert.tsx` | Plan approval UI |
+| `ChatModeSelector.tsx` | Unified Build/Plan/Discuss mode selector (Radix Popover) — replaces separate Plan and Discuss toggles |
+| `PlanApprovalAlert.tsx` | ~~Plan approval UI~~ — **deprecated**, no longer imported (dead code) |
 | `DicussMode.tsx` | Discuss (non-coding) mode |
 | `MCPTools.tsx` | MCP tools indicator in the chat toolbar; MCP tool selection |
 | `chatExportAndImport/` | Chat export/import functionality |

docs/CONTRIBUTING.md

@@ -138,7 +138,7 @@ describe('MyComponent', () => {
 });
 ```
 
-The project currently has 511 tests across 25 test files.
+The project currently has 537 tests across 27 test files.
 
 Recent test expansion areas include:
 

docs/README.md

@@ -27,8 +27,10 @@
 - **MCP Schema Sanitization** — Automatic schema compatibility for Google Gemini (strips unsupported constructs)
 - **MCP Auto-Approve** — Per-server auto-approve toggle for trusted MCP servers
 - **Formatted Tool Results** — MCP tool results render as formatted markdown instead of raw JSON
+- **Unified Mode Selector** — Single Build/Plan/Discuss dropdown replaces separate toggles
+- **Auto-Collapse Plan** — Plan panel auto-collapses when all tasks reach 100%
 - **Security Hardening** — `withSecurity()` on all 35+ API routes with input validation, rate limiting options, URL allowlisting
-- **511 Tests** — Across 25 test files for comprehensive coverage
+- **537 Tests** — Across 27 test files for comprehensive coverage
 - **Z.ai Provider** — Integration with 10 static GLM models optimized for coding tasks
 
 ---
@@ -42,7 +44,7 @@
 | Language | TypeScript (strict) |
 | Styling | UnoCSS + SCSS + Radix UI |
 | State | Nanostores |
-| AI/LLM | Vercel AI SDK v4.3 (20 providers) |
+| AI/LLM | Vercel AI SDK v4.3 (22 providers) |
 | Editor | CodeMirror 6 |
 | Terminal | xterm.js 5.5 |
 | Runtime | WebContainer API |

docs/STATE-MANAGEMENT.md

@@ -193,6 +193,7 @@ All hooks live in `app/lib/hooks/`. They often wrap store access or provide data
 | `useSupabaseConnection` | Supabase connection state |
 | `useViewport` | Responsive breakpoint detection |
 | `useVersionCheck` | Polls `/api/version-check` to detect available updates, drives `UpdateBanner` |
+| `usePlanSync` | Syncs PLAN.md file changes from WebContainer into the plan store, preserving user approval state |
 
 ---
 

docs/STYLING-GUIDELINES.md

@@ -27,6 +27,8 @@ className = 'bg-[#1a1a1a]';
 
 ## Color Palette (Dark Theme)
 
+### Neutral Dark (Generic Components)
+
 | Element               | Color     | Usage                      |
 | --------------------- | --------- | -------------------------- |
 | Background (deep)     | `#0a0a0a` | Deepest background         |
@@ -40,6 +42,20 @@ className = 'bg-[#1a1a1a]';
 | Text (muted)          | `#6b7280` | Placeholder, hints         |
 | Accent                | `#a855f7` | Purple accent (purple-500) |
 
+### Blue-Tinted Dark (Page & Popover Theme)
+
+The main page body and floating UI (popovers, dropdowns) use blue-tinted dark colors for a cohesive feel:
+
+| Element               | Color     | Usage                      |
+| --------------------- | --------- | -------------------------- |
+| Page background       | `#0b0d13` | Body / root background     |
+| Popover / dropdown bg | `#0f1219` | Floating panel backgrounds |
+| Hover (blue-tinted)   | `#1a1f2e` | Hover states in popovers   |
+| Border (blue-tinted)  | `#1e293b` | Borders on floating panels |
+| Shadow (floating)     | `rgba(0,0,0,0.6)` | Deep drop shadow for depth |
+
+> **Important**: Browser default `<button>` backgrounds are gray. Always add `bg-transparent` or `border-none bg-transparent` to custom buttons in dark popovers.
+
 ## Component Patterns
 
 ### Modals/Dialogs