feat: Twitter-style UI theme + Playwright optimization + documentation

UI Changes: - Replace neobrutalism with clean Twitter/Supabase-style design - Remove all shadows, use thin borders (1px) - Single accent color (Twitter blue) for all status indicators - Rounded corners (1.3rem base) - Fix dark mode contrast and visibility - Make KanbanColumn themeable via CSS classes Backend Changes: - Default Playwright browser changed to Firefox (lower CPU) - Default Playwright mode changed to headless (saves resources) - Add PLAYWRIGHT_BROWSER env var support Documentation: - Add CUSTOM_UPDATES.md with all customizations documented - Update .env.example with new Playwright options Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 06:12:06 +00:00 · 2026-01-24 10:39:34 +02:00
parent 8bc4b25511
commit 813bb900fd
5 changed files with 776 additions and 180 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,12 +1,19 @@
 # Optional: N8N webhook for progress notifications
 # PROGRESS_N8N_WEBHOOK_URL=https://your-n8n-instance.com/webhook/...

-# Playwright Browser Mode
-# Controls whether Playwright runs Chrome in headless mode (no visible browser window).
-# - true: Browser runs in background, invisible (recommended for using PC while agent works)
+# Playwright Browser Configuration
+#
+# PLAYWRIGHT_BROWSER: Which browser to use for testing
+# - firefox: Lower CPU usage, recommended (default)
+# - chrome: Google Chrome
+# - webkit: Safari engine
+# - msedge: Microsoft Edge
+# PLAYWRIGHT_BROWSER=firefox
+#
+# PLAYWRIGHT_HEADLESS: Run browser without visible window
+# - true: Browser runs in background, saves CPU (default)
 # - false: Browser opens a visible window (useful for debugging)
-# Defaults to 'false' if not specified
-# PLAYWRIGHT_HEADLESS=false
+# PLAYWRIGHT_HEADLESS=true

 # GLM/Alternative API Configuration (Optional)
 # To use Zhipu AI's GLM models instead of Claude, uncomment and set these variables.
--- a/CUSTOM_UPDATES.md
+++ b/CUSTOM_UPDATES.md
@@ -0,0 +1,328 @@
+# Custom Updates - AutoCoder
+
+This document tracks all customizations made to AutoCoder that deviate from the upstream repository. Reference this file before any updates to preserve these changes.
+
+---
+
+## Table of Contents
+
+1. [UI Theme Customization](#1-ui-theme-customization)
+2. [Playwright Browser Configuration](#2-playwright-browser-configuration)
+3. [SQLite Robust Connection Handling](#3-sqlite-robust-connection-handling)
+4. [Update Checklist](#update-checklist)
+
+---
+
+## 1. UI Theme Customization
+
+### Overview
+
+The UI has been customized from the default **neobrutalism** style to a clean **Twitter/Supabase-style** design.
+
+**Design Changes:**
+- No shadows
+- Thin borders (1px)
+- Rounded corners (1.3rem base)
+- Blue accent color (Twitter blue)
+- Clean typography (Open Sans)
+
+### Modified Files
+
+#### `ui/src/styles/custom-theme.css`
+
+**Purpose:** Main theme override file that replaces neo design with clean Twitter style.
+
+**Key Changes:**
+- All `--shadow-neo-*` variables set to `none`
+- All status colors (`pending`, `progress`, `done`) use Twitter blue
+- Rounded corners: `--radius-neo-lg: 1.3rem`
+- Font: Open Sans
+- Removed all transform effects on hover
+- Dark mode with proper contrast
+
+**CSS Variables (Light Mode):**
+```css
+--color-neo-accent: oklch(0.6723 0.1606 244.9955);  /* Twitter blue */
+--color-neo-pending: oklch(0.6723 0.1606 244.9955);
+--color-neo-progress: oklch(0.6723 0.1606 244.9955);
+--color-neo-done: oklch(0.6723 0.1606 244.9955);
+```
+
+**CSS Variables (Dark Mode):**
+```css
+--color-neo-bg: oklch(0.08 0 0);
+--color-neo-card: oklch(0.16 0.005 250);
+--color-neo-border: oklch(0.30 0 0);
+```
+
+**How to preserve:** This file should NOT be overwritten. It loads after `globals.css` and overrides it.
+
+---
+
+#### `ui/src/components/KanbanColumn.tsx`
+
+**Purpose:** Modified to support themeable kanban columns without inline styles.
+
+**Changes:**
+
+1. **colorMap changed from inline colors to CSS classes:**
+```tsx
+// BEFORE (original):
+const colorMap = {
+  pending: 'var(--color-neo-pending)',
+  progress: 'var(--color-neo-progress)',
+  done: 'var(--color-neo-done)',
+}
+
+// AFTER (customized):
+const colorMap = {
+  pending: 'kanban-header-pending',
+  progress: 'kanban-header-progress',
+  done: 'kanban-header-done',
+}
+```
+
+2. **Column div uses CSS class instead of inline style:**
+```tsx
+// BEFORE:
+<div className="neo-card overflow-hidden" style={{ borderColor: colorMap[color] }}>
+
+// AFTER:
+<div className={`neo-card overflow-hidden kanban-column ${colorMap[color]}`}>
+```
+
+3. **Header div simplified (removed duplicate color class):**
+```tsx
+// BEFORE:
+<div className={`... ${colorMap[color]}`} style={{ backgroundColor: colorMap[color] }}>
+
+// AFTER:
+<div className="kanban-header px-4 py-3 border-b border-[var(--color-neo-border)]">
+```
+
+4. **Title text color:**
+```tsx
+// BEFORE:
+text-[var(--color-neo-text-on-bright)]
+
+// AFTER:
+text-[var(--color-neo-text)]
+```
+
+---
+
+## 2. Playwright Browser Configuration
+
+### Overview
+
+Changed default Playwright settings for better performance:
+- **Default browser:** Firefox (lower CPU usage)
+- **Default mode:** Headless (saves resources)
+
+### Modified Files
+
+#### `client.py`
+
+**Changes:**
+
+```python
+# BEFORE:
+DEFAULT_PLAYWRIGHT_HEADLESS = False
+
+# AFTER:
+DEFAULT_PLAYWRIGHT_HEADLESS = True
+DEFAULT_PLAYWRIGHT_BROWSER = "firefox"
+```
+
+**New function added:**
+```python
+def get_playwright_browser() -> str:
+    """
+    Get the browser to use for Playwright.
+    Options: chrome, firefox, webkit, msedge
+    Firefox is recommended for lower CPU usage.
+    """
+    return os.getenv("PLAYWRIGHT_BROWSER", DEFAULT_PLAYWRIGHT_BROWSER).lower()
+```
+
+**Playwright args updated:**
+```python
+playwright_args = [
+    "@playwright/mcp@latest",
+    "--viewport-size", "1280x720",
+    "--browser", browser,  # NEW: configurable browser
+]
+```
+
+---
+
+#### `.env.example`
+
+**Updated documentation:**
+```bash
+# PLAYWRIGHT_BROWSER: Which browser to use for testing
+# - firefox: Lower CPU usage, recommended (default)
+# - chrome: Google Chrome
+# - webkit: Safari engine
+# - msedge: Microsoft Edge
+# PLAYWRIGHT_BROWSER=firefox
+
+# PLAYWRIGHT_HEADLESS: Run browser without visible window
+# - true: Browser runs in background, saves CPU (default)
+# - false: Browser opens a visible window (useful for debugging)
+# PLAYWRIGHT_HEADLESS=true
+```
+
+---
+
+## 3. SQLite Robust Connection Handling
+
+### Overview
+
+Added robust SQLite connection handling to prevent database corruption from concurrent access (MCP server, FastAPI server, progress tracking).
+
+**Features Added:**
+- WAL mode for better concurrency
+- Busy timeout (30 seconds)
+- Retry logic with exponential backoff
+- Database health check endpoint
+
+### Modified Files
+
+#### `api/database.py`
+
+**New functions added:**
+
+```python
+def get_robust_connection(db_path: str) -> sqlite3.Connection:
+    """
+    Create a SQLite connection with robust settings:
+    - WAL mode for concurrent access
+    - 30 second busy timeout
+    - Foreign keys enabled
+    """
+
+@contextmanager
+def robust_db_connection(db_path: str):
+    """Context manager for robust database connections."""
+
+def execute_with_retry(conn, sql, params=None, max_retries=3):
+    """Execute SQL with exponential backoff retry for transient errors."""
+
+def check_database_health(db_path: str) -> dict:
+    """
+    Check database integrity and return health status.
+    Returns: {healthy: bool, message: str, details: dict}
+    """
+```
+
+---
+
+#### `progress.py`
+
+**Changed from raw sqlite3 to robust connections:**
+
+```python
+# BEFORE:
+conn = sqlite3.connect(db_path)
+
+# AFTER:
+from api.database import robust_db_connection, execute_with_retry
+
+with robust_db_connection(db_path) as conn:
+    execute_with_retry(conn, sql, params)
+```
+
+---
+
+#### `server/routers/projects.py`
+
+**New endpoint added:**
+
+```python
+@router.get("/{project_name}/db-health")
+async def get_database_health(project_name: str) -> DatabaseHealth:
+    """
+    Check the health of the project's features database.
+    Useful for diagnosing corruption issues.
+    """
+```
+
+---
+
+#### `server/schemas.py`
+
+**New schema added:**
+
+```python
+class DatabaseHealth(BaseModel):
+    healthy: bool
+    message: str
+    details: dict = {}
+```
+
+---
+
+## Update Checklist
+
+When updating AutoCoder from upstream, verify these items:
+
+### UI Changes
+- [ ] `ui/src/styles/custom-theme.css` is preserved
+- [ ] `ui/src/components/KanbanColumn.tsx` changes are preserved
+- [ ] Run `npm run build` in `ui/` directory
+- [ ] Test both light and dark modes
+
+### Backend Changes
+- [ ] `client.py` - Playwright browser/headless defaults preserved
+- [ ] `.env.example` - Documentation updates preserved
+- [ ] `api/database.py` - Robust connection functions preserved
+- [ ] `progress.py` - Uses robust_db_connection
+- [ ] `server/routers/projects.py` - db-health endpoint preserved
+- [ ] `server/schemas.py` - DatabaseHealth schema preserved
+
+### General
+- [ ] Test database operations under concurrent load
+- [ ] Verify Playwright uses Firefox by default
+- [ ] Check that browser runs headless by default
+
+---
+
+## Reverting to Defaults
+
+### UI Only
+```bash
+rm ui/src/styles/custom-theme.css
+git checkout ui/src/components/KanbanColumn.tsx
+cd ui && npm run build
+```
+
+### Backend Only
+```bash
+git checkout client.py .env.example api/database.py progress.py
+git checkout server/routers/projects.py server/schemas.py
+```
+
+---
+
+## Files Summary
+
+| File | Type | Change Description |
+|------|------|-------------------|
+| `ui/src/styles/custom-theme.css` | UI | Twitter-style theme |
+| `ui/src/components/KanbanColumn.tsx` | UI | Themeable kanban columns |
+| `client.py` | Backend | Firefox + headless defaults |
+| `.env.example` | Config | Updated documentation |
+| `api/database.py` | Backend | Robust SQLite connections |
+| `progress.py` | Backend | Uses robust connections |
+| `server/routers/projects.py` | Backend | db-health endpoint |
+| `server/schemas.py` | Backend | DatabaseHealth schema |
+
+---
+
+## Last Updated
+
+**Date:** January 2026
+**Commits:**
+- `1910b96` - SQLite robust connection handling
+- `e014b04` - Custom theme override system
--- a/client.py
+++ b/client.py
@@ -21,9 +21,14 @@ from security import bash_security_hook
 load_dotenv()

 # Default Playwright headless mode - can be overridden via PLAYWRIGHT_HEADLESS env var
-# When True, browser runs invisibly in background
-# When False, browser window is visible (default - useful for monitoring agent progress)
-DEFAULT_PLAYWRIGHT_HEADLESS = False
+# When True, browser runs invisibly in background (default - saves CPU)
+# When False, browser window is visible (useful for monitoring agent progress)
+DEFAULT_PLAYWRIGHT_HEADLESS = True
+
+# Default browser for Playwright - can be overridden via PLAYWRIGHT_BROWSER env var
+# Options: chrome, firefox, webkit, msedge
+# Firefox is recommended for lower CPU usage
+DEFAULT_PLAYWRIGHT_BROWSER = "firefox"

 # Environment variables to pass through to Claude CLI for API configuration
 # These allow using alternative API endpoints (e.g., GLM via z.ai) without
@@ -42,14 +47,25 @@ def get_playwright_headless() -> bool:
    """
    Get the Playwright headless mode setting.

-    Reads from PLAYWRIGHT_HEADLESS environment variable, defaults to False.
+    Reads from PLAYWRIGHT_HEADLESS environment variable, defaults to True.
    Returns True for headless mode (invisible browser), False for visible browser.
    """
-    value = os.getenv("PLAYWRIGHT_HEADLESS", "false").lower()
+    value = os.getenv("PLAYWRIGHT_HEADLESS", str(DEFAULT_PLAYWRIGHT_HEADLESS).lower()).lower()
    # Accept various truthy/falsy values
    return value in ("true", "1", "yes", "on")


+def get_playwright_browser() -> str:
+    """
+    Get the browser to use for Playwright.
+
+    Reads from PLAYWRIGHT_BROWSER environment variable, defaults to firefox.
+    Options: chrome, firefox, webkit, msedge
+    Firefox is recommended for lower CPU usage.
+    """
+    return os.getenv("PLAYWRIGHT_BROWSER", DEFAULT_PLAYWRIGHT_BROWSER).lower()
+
+
 # Feature MCP tools for feature/test management
 FEATURE_MCP_TOOLS = [
    # Core feature operations
@@ -228,10 +244,16 @@ def create_client(
    }
    if not yolo_mode:
        # Include Playwright MCP server for browser automation (standard mode only)
-        # Headless mode is configurable via PLAYWRIGHT_HEADLESS environment variable
-        playwright_args = ["@playwright/mcp@latest", "--viewport-size", "1280x720"]
+        # Browser and headless mode configurable via environment variables
+        browser = get_playwright_browser()
+        playwright_args = [
+            "@playwright/mcp@latest",
+            "--viewport-size", "1280x720",
+            "--browser", browser,
+        ]
        if get_playwright_headless():
            playwright_args.append("--headless")
+        print(f"   - Browser: {browser} (headless={get_playwright_headless()})")

        # Browser isolation for parallel execution
        # Each agent gets its own isolated browser context to prevent tab conflicts
--- a/ui/src/components/KanbanColumn.tsx
+++ b/ui/src/components/KanbanColumn.tsx
@@ -18,9 +18,9 @@ interface KanbanColumnProps {
 }

 const colorMap = {
-  pending: 'var(--color-neo-pending)',
-  progress: 'var(--color-neo-progress)',
-  done: 'var(--color-neo-done)',
+  pending: 'kanban-header-pending',
+  progress: 'kanban-header-progress',
+  done: 'kanban-header-done',
 }

 export function KanbanColumn({
@@ -43,18 +43,16 @@ export function KanbanColumn({
  )
  return (
    <div
-      className="neo-card overflow-hidden"
-      style={{ borderColor: colorMap[color] }}
+      className={`neo-card overflow-hidden kanban-column ${colorMap[color]}`}
    >
      {/* Header */}
      <div
-        className="px-4 py-3 border-b-3 border-[var(--color-neo-border)]"
-        style={{ backgroundColor: colorMap[color] }}
+        className="kanban-header px-4 py-3 border-b border-[var(--color-neo-border)]"
      >
        <div className="flex items-center justify-between">
-          <h2 className="font-display text-lg font-bold uppercase flex items-center gap-2 text-[var(--color-neo-text-on-bright)]">
+          <h2 className="font-display text-lg font-semibold flex items-center gap-2 text-[var(--color-neo-text)]">
            {title}
-            <span className="neo-badge bg-[var(--color-neo-card)] text-[var(--color-neo-text)]">{count}</span>
+            <span className="neo-badge bg-[var(--color-neo-neutral-100)] text-[var(--color-neo-text-secondary)]">{count}</span>
          </h2>
          {(onAddFeature || onExpandProject) && (
            <div className="flex items-center gap-2">
--- a/ui/src/styles/custom-theme.css
+++ b/ui/src/styles/custom-theme.css
@@ -1,170 +1,411 @@
 /*
- * Custom Theme Overrides
- * ======================
- * This file overrides the default neobrutalism theme.
- * It loads AFTER globals.css, so these values take precedence.
- *
- * This file is safe from upstream merge conflicts since it doesn't
- * exist in the upstream repository.
+ * Clean Twitter-Style Theme
+ * =========================
+ * Based on user's exact design system values
 */

 :root {
-  --background: oklch(1.0000 0 0);
-  --foreground: oklch(0.1884 0.0128 248.5103);
-  --card: oklch(0.9784 0.0011 197.1387);
-  --card-foreground: oklch(0.1884 0.0128 248.5103);
-  --popover: oklch(1.0000 0 0);
-  --popover-foreground: oklch(0.1884 0.0128 248.5103);
-  --primary: oklch(0.6723 0.1606 244.9955);
-  --primary-foreground: oklch(1.0000 0 0);
-  --secondary: oklch(0.1884 0.0128 248.5103);
-  --secondary-foreground: oklch(1.0000 0 0);
-  --muted: oklch(0.9222 0.0013 286.3737);
-  --muted-foreground: oklch(0.1884 0.0128 248.5103);
-  --accent: oklch(0.9392 0.0166 250.8453);
-  --accent-foreground: oklch(0.6723 0.1606 244.9955);
-  --destructive: oklch(0.6188 0.2376 25.7658);
-  --destructive-foreground: oklch(1.0000 0 0);
-  --border: oklch(0.9317 0.0118 231.6594);
-  --input: oklch(0.9809 0.0025 228.7836);
-  --ring: oklch(0.6818 0.1584 243.3540);
-  --chart-1: oklch(0.6723 0.1606 244.9955);
-  --chart-2: oklch(0.6907 0.1554 160.3454);
-  --chart-3: oklch(0.8214 0.1600 82.5337);
-  --chart-4: oklch(0.7064 0.1822 151.7125);
-  --chart-5: oklch(0.5919 0.2186 10.5826);
-  --sidebar: oklch(0.9784 0.0011 197.1387);
-  --sidebar-foreground: oklch(0.1884 0.0128 248.5103);
-  --sidebar-primary: oklch(0.6723 0.1606 244.9955);
-  --sidebar-primary-foreground: oklch(1.0000 0 0);
-  --sidebar-accent: oklch(0.9392 0.0166 250.8453);
-  --sidebar-accent-foreground: oklch(0.6723 0.1606 244.9955);
-  --sidebar-border: oklch(0.9271 0.0101 238.5177);
-  --sidebar-ring: oklch(0.6818 0.1584 243.3540);
-  --font-sans: Open Sans, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Menlo, monospace;
-  --radius: 1.3rem;
-  --shadow-x: 0px;
-  --shadow-y: 2px;
-  --shadow-blur: 0px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0;
-  --shadow-color: rgba(29,161,242,0.15);
-  --shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
+  /* Core colors */
+  --color-neo-bg: oklch(1.0000 0 0);
+  --color-neo-card: oklch(0.9784 0.0011 197.1387);
+  --color-neo-text: oklch(0.1884 0.0128 248.5103);
+  --color-neo-text-secondary: oklch(0.1884 0.0128 248.5103);
+  --color-neo-text-muted: oklch(0.5637 0.0078 247.9662);
+  --color-neo-text-on-bright: oklch(1.0000 0 0);
+
+  /* Primary accent - Twitter blue */
+  --color-neo-accent: oklch(0.6723 0.1606 244.9955);
+
+  /* Status colors - all use accent blue except danger */
+  --color-neo-pending: oklch(0.6723 0.1606 244.9955);
+  --color-neo-progress: oklch(0.6723 0.1606 244.9955);
+  --color-neo-done: oklch(0.6723 0.1606 244.9955);
+  --color-neo-danger: oklch(0.6188 0.2376 25.7658);
+
+  /* Borders and neutrals */
+  --color-neo-border: oklch(0.9317 0.0118 231.6594);
+  --color-neo-neutral-50: oklch(0.9809 0.0025 228.7836);
+  --color-neo-neutral-100: oklch(0.9392 0.0166 250.8453);
+  --color-neo-neutral-200: oklch(0.9222 0.0013 286.3737);
+  --color-neo-neutral-300: oklch(0.9317 0.0118 231.6594);
+
+  /* No shadows */
+  --shadow-neo-sm: none;
+  --shadow-neo-md: none;
+  --shadow-neo-lg: none;
+  --shadow-neo-xl: none;
+  --shadow-neo-left: none;
+  --shadow-neo-inset: none;
+
+  /* Typography */
+  --font-neo-sans: Open Sans, sans-serif;
+  --font-neo-mono: Menlo, monospace;
+
+  /* Radius - 1.3rem base */
+  --radius-neo-sm: calc(1.3rem - 4px);
+  --radius-neo-md: calc(1.3rem - 2px);
+  --radius-neo-lg: 1.3rem;
+  --radius-neo-xl: calc(1.3rem + 4px);
 }

 .dark {
-  --background: oklch(0 0 0);
-  --foreground: oklch(0.9328 0.0025 228.7857);
-  --card: oklch(0.2097 0.0080 274.5332);
-  --card-foreground: oklch(0.8853 0 0);
-  --popover: oklch(0 0 0);
-  --popover-foreground: oklch(0.9328 0.0025 228.7857);
-  --primary: oklch(0.6692 0.1607 245.0110);
-  --primary-foreground: oklch(1.0000 0 0);
-  --secondary: oklch(0.9622 0.0035 219.5331);
-  --secondary-foreground: oklch(0.1884 0.0128 248.5103);
-  --muted: oklch(0.2090 0 0);
-  --muted-foreground: oklch(0.5637 0.0078 247.9662);
-  --accent: oklch(0.1928 0.0331 242.5459);
-  --accent-foreground: oklch(0.6692 0.1607 245.0110);
-  --destructive: oklch(0.6188 0.2376 25.7658);
-  --destructive-foreground: oklch(1.0000 0 0);
-  --border: oklch(0.2674 0.0047 248.0045);
-  --input: oklch(0.3020 0.0288 244.8244);
-  --ring: oklch(0.6818 0.1584 243.3540);
-  --chart-1: oklch(0.6723 0.1606 244.9955);
-  --chart-2: oklch(0.6907 0.1554 160.3454);
-  --chart-3: oklch(0.8214 0.1600 82.5337);
-  --chart-4: oklch(0.7064 0.1822 151.7125);
-  --chart-5: oklch(0.5919 0.2186 10.5826);
-  --sidebar: oklch(0.2097 0.0080 274.5332);
-  --sidebar-foreground: oklch(0.8853 0 0);
-  --sidebar-primary: oklch(0.6818 0.1584 243.3540);
-  --sidebar-primary-foreground: oklch(1.0000 0 0);
-  --sidebar-accent: oklch(0.1928 0.0331 242.5459);
-  --sidebar-accent-foreground: oklch(0.6692 0.1607 245.0110);
-  --sidebar-border: oklch(0.3795 0.0220 240.5943);
-  --sidebar-ring: oklch(0.6818 0.1584 243.3540);
-  --font-sans: Open Sans, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Menlo, monospace;
-  --radius: 1.3rem;
-  --shadow-x: 0px;
-  --shadow-y: 2px;
-  --shadow-blur: 0px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0;
-  --shadow-color: rgba(29,161,242,0.25);
-  --shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
-  --shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
+  /* Core colors - dark mode (Twitter dark style) */
+  --color-neo-bg: oklch(0.08 0 0);
+  --color-neo-card: oklch(0.16 0.005 250);
+  --color-neo-text: oklch(0.95 0 0);
+  --color-neo-text-secondary: oklch(0.75 0 0);
+  --color-neo-text-muted: oklch(0.55 0 0);
+  --color-neo-text-on-bright: oklch(1.0 0 0);
+
+  /* Primary accent */
+  --color-neo-accent: oklch(0.6692 0.1607 245.0110);
+
+  /* Status colors - all use accent blue except danger */
+  --color-neo-pending: oklch(0.6692 0.1607 245.0110);
+  --color-neo-progress: oklch(0.6692 0.1607 245.0110);
+  --color-neo-done: oklch(0.6692 0.1607 245.0110);
+  --color-neo-danger: oklch(0.6188 0.2376 25.7658);
+
+  /* Borders and neutrals - better contrast */
+  --color-neo-border: oklch(0.30 0 0);
+  --color-neo-neutral-50: oklch(0.20 0 0);
+  --color-neo-neutral-100: oklch(0.25 0.01 250);
+  --color-neo-neutral-200: oklch(0.22 0 0);
+  --color-neo-neutral-300: oklch(0.30 0 0);
+
+  /* No shadows */
+  --shadow-neo-sm: none;
+  --shadow-neo-md: none;
+  --shadow-neo-lg: none;
+  --shadow-neo-xl: none;
+  --shadow-neo-left: none;
+  --shadow-neo-inset: none;
 }

-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+/* ===== GLOBAL OVERRIDES ===== */

-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
+* {
+  box-shadow: none !important;
+}
+
+/* ===== CARDS ===== */
+.neo-card,
+[class*="neo-card"] {
+  border: 1px solid var(--color-neo-border) !important;
+  box-shadow: none !important;
+  transform: none !important;
+  border-radius: var(--radius-neo-lg) !important;
+  background-color: var(--color-neo-card) !important;
+}
+
+.neo-card:hover,
+[class*="neo-card"]:hover {
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* ===== BUTTONS ===== */
+.neo-btn,
+[class*="neo-btn"],
+button {
+  border-width: 1px !important;
+  box-shadow: none !important;
+  text-transform: none !important;
+  font-weight: 500 !important;
+  transform: none !important;
+  border-radius: var(--radius-neo-lg) !important;
+  font-family: var(--font-neo-sans) !important;
+}
+
+.neo-btn:hover,
+[class*="neo-btn"]:hover,
+button:hover {
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+.neo-btn:active,
+[class*="neo-btn"]:active {
+  transform: none !important;
+}
+
+/* Primary button */
+.neo-btn-primary {
+  background-color: var(--color-neo-accent) !important;
+  border-color: var(--color-neo-accent) !important;
+  color: white !important;
+}
+
+/* Success button - use accent blue instead of green */
+.neo-btn-success {
+  background-color: var(--color-neo-accent) !important;
+  border-color: var(--color-neo-accent) !important;
+  color: white !important;
+}
+
+/* Danger button - subtle red */
+.neo-btn-danger {
+  background-color: var(--color-neo-danger) !important;
+  border-color: var(--color-neo-danger) !important;
+  color: white !important;
+}
+
+/* ===== INPUTS ===== */
+.neo-input,
+.neo-textarea,
+input,
+textarea,
+select {
+  border: 1px solid var(--color-neo-border) !important;
+  box-shadow: none !important;
+  border-radius: var(--radius-neo-md) !important;
+  background-color: var(--color-neo-neutral-50) !important;
+}
+
+.neo-input:focus,
+.neo-textarea:focus,
+input:focus,
+textarea:focus,
+select:focus {
+  box-shadow: none !important;
+  border-color: var(--color-neo-accent) !important;
+  outline: none !important;
+}
+
+/* ===== BADGES ===== */
+.neo-badge,
+[class*="neo-badge"] {
+  border: 1px solid var(--color-neo-border) !important;
+  box-shadow: none !important;
+  border-radius: var(--radius-neo-lg) !important;
+  font-weight: 500 !important;
+  text-transform: none !important;
+}
+
+/* ===== PROGRESS BAR ===== */
+.neo-progress {
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: var(--radius-neo-lg) !important;
+  background-color: var(--color-neo-neutral-100) !important;
+  overflow: hidden !important;
+  height: 0.75rem !important;
+}
+
+.neo-progress-fill {
+  background-color: var(--color-neo-accent) !important;
+  border-radius: var(--radius-neo-lg) !important;
+}
+
+.neo-progress-fill::after {
+  display: none !important;
+}
+
+/* ===== KANBAN COLUMNS ===== */
+.kanban-column {
+  border: 1px solid var(--color-neo-border) !important;
+  border-radius: var(--radius-neo-lg) !important;
+  overflow: hidden;
+  background-color: var(--color-neo-bg) !important;
+  border-left: none !important;
+}
+
+/* Left accent border on the whole column */
+.kanban-column.kanban-header-pending {
+  border-left: 3px solid var(--color-neo-accent) !important;
+}
+
+.kanban-column.kanban-header-progress {
+  border-left: 3px solid var(--color-neo-accent) !important;
+}
+
+.kanban-column.kanban-header-done {
+  border-left: 3px solid var(--color-neo-accent) !important;
+}
+
+.kanban-header {
+  background-color: var(--color-neo-card) !important;
+  border-bottom: 1px solid var(--color-neo-border) !important;
+  border-left: none !important;
+}
+
+/* ===== MODALS & DROPDOWNS ===== */
+.neo-modal,
+[class*="neo-modal"],
+[role="dialog"] {
+  border: 1px solid var(--color-neo-border) !important;
+  border-radius: var(--radius-neo-xl) !important;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important;
+}
+
+.neo-dropdown,
+[class*="dropdown"],
+[role="menu"],
+[data-radix-popper-content-wrapper] {
+  border: 1px solid var(--color-neo-border) !important;
+  border-radius: var(--radius-neo-lg) !important;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
+}
+
+/* ===== STATUS BADGES ===== */
+[class*="bg-neo-pending"],
+.bg-\[var\(--color-neo-pending\)\] {
+  background-color: var(--color-neo-neutral-100) !important;
+  color: var(--color-neo-text-secondary) !important;
+}
+
+[class*="bg-neo-progress"],
+.bg-\[var\(--color-neo-progress\)\] {
+  background-color: oklch(0.9392 0.0166 250.8453) !important;
+  color: var(--color-neo-accent) !important;
+}
+
+[class*="bg-neo-done"],
+.bg-\[var\(--color-neo-done\)\] {
+  background-color: oklch(0.9392 0.0166 250.8453) !important;
+  color: var(--color-neo-accent) !important;
+}
+
+/* ===== REMOVE NEO EFFECTS ===== */
+[class*="shadow-neo"],
+[class*="shadow-"] {
+  box-shadow: none !important;
+}
+
+[class*="hover:translate"],
+[class*="hover:-translate"],
+[class*="translate-x"],
+[class*="translate-y"] {
+  transform: none !important;
+}
+
+/* ===== TEXT STYLING ===== */
+h1, h2, h3, h4, h5, h6,
+[class*="heading"],
+[class*="title"],
+[class*="font-display"] {
+  text-transform: none !important;
+  font-family: var(--font-neo-sans) !important;
+}
+
+.uppercase {
+  text-transform: none !important;
+}
+
+strong, b,
+[class*="font-bold"],
+[class*="font-black"] {
+  font-weight: 600 !important;
+}
+
+/* ===== SPECIFIC ELEMENT FIXES ===== */
+
+/* Green badges should use accent color */
+[class*="bg-green"],
+[class*="bg-emerald"],
+[class*="bg-lime"] {
+  background-color: oklch(0.9392 0.0166 250.8453) !important;
+  color: var(--color-neo-accent) !important;
+}
+
+/* Category badges */
+[class*="FUNCTIONAL"],
+[class*="functional"] {
+  background-color: oklch(0.9392 0.0166 250.8453) !important;
+  color: var(--color-neo-accent) !important;
+}
+
+/* Live/Status indicators - use accent instead of green */
+.text-\[var\(--color-neo-done\)\] {
+  color: var(--color-neo-accent) !important;
+}
+
+/* Override any remaining borders to be thin */
+[class*="border-3"],
+[class*="border-b-3"] {
+  border-width: 1px !important;
+}
+
+/* ===== DARK MODE SPECIFIC FIXES ===== */
+
+.dark .neo-card,
+.dark [class*="neo-card"] {
+  background-color: var(--color-neo-card) !important;
+  border-color: var(--color-neo-border) !important;
+}
+
+.dark .kanban-column {
+  background-color: var(--color-neo-card) !important;
+}
+
+.dark .kanban-header {
+  background-color: var(--color-neo-neutral-50) !important;
+}
+
+/* Feature cards in dark mode */
+.dark .neo-card .neo-card {
+  background-color: var(--color-neo-neutral-50) !important;
+}
+
+/* Badges in dark mode - lighter background for visibility */
+.dark .neo-badge,
+.dark [class*="neo-badge"] {
+  background-color: var(--color-neo-neutral-100) !important;
+  color: var(--color-neo-text) !important;
+  border-color: var(--color-neo-border) !important;
+}
+
+/* Status badges in dark mode */
+.dark [class*="bg-neo-done"],
+.dark .bg-\[var\(--color-neo-done\)\] {
+  background-color: oklch(0.25 0.05 245) !important;
+  color: var(--color-neo-accent) !important;
+}
+
+.dark [class*="bg-neo-progress"],
+.dark .bg-\[var\(--color-neo-progress\)\] {
+  background-color: oklch(0.25 0.05 245) !important;
+  color: var(--color-neo-accent) !important;
+}
+
+/* Green badges in dark mode */
+.dark [class*="bg-green"],
+.dark [class*="bg-emerald"],
+.dark [class*="bg-lime"] {
+  background-color: oklch(0.25 0.05 245) !important;
+  color: var(--color-neo-accent) !important;
+}
+
+/* Category badges in dark mode */
+.dark [class*="FUNCTIONAL"],
+.dark [class*="functional"] {
+  background-color: oklch(0.25 0.05 245) !important;
+  color: var(--color-neo-accent) !important;
+}
+
+/* Buttons in dark mode - better visibility */
+.dark .neo-btn,
+.dark button {
+  border-color: var(--color-neo-border) !important;
+}
+
+.dark .neo-btn-primary,
+.dark .neo-btn-success {
+  background-color: var(--color-neo-accent) !important;
+  border-color: var(--color-neo-accent) !important;
+  color: white !important;
+}
+
+/* Toggle buttons - fix "Graph" visibility */
+.dark [class*="text-neo-text"] {
+  color: var(--color-neo-text) !important;
+}
+
+/* Inputs in dark mode */
+.dark input,
+.dark textarea,
+.dark select {
+  background-color: var(--color-neo-neutral-50) !important;
+  border-color: var(--color-neo-border) !important;
+  color: var(--color-neo-text) !important;
 }