feat(settings): redesign settings panel with modern dark theme

Overhaul the settings UI with a modern void dark mode color scheme
(indigo accent), 5-tab horizontal navigation (Setup, Model, Browser,
Network, Profiles), clickable scrim overlay to close sidebar, and
removal of the unnecessary Chat sidebar tab. Replace all warm-toned
hsl references across all CSS files with the new indigo-based design
system variables.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 0xSero

packages/extension/sidepanel/styles/animations.css

@@ -1,5 +1,5 @@
 /* ============================================================================
-   Animations — Warm Paper Design System
+   Animations — Modern Void Design System
    Subtle vertical micro-interactions
    ============================================================================ */
 
@@ -190,16 +190,16 @@
 }
 
 /* --------------------------------------------------------------------------
-   Glow Effects — Warm brass tones
+   Glow Effects — Indigo tones
    -------------------------------------------------------------------------- */
 
 @keyframes glowPulse {
   0%,
   100% {
-    box-shadow: 0 0 20px hsla(35, 45%, 55%, 0.3);
+    box-shadow: 0 0 20px rgb(var(--accent-rgb) / 0.3);
   }
   50% {
-    box-shadow: 0 0 40px hsla(35, 45%, 55%, 0.5);
+    box-shadow: 0 0 40px rgb(var(--accent-rgb) / 0.5);
   }
 }
 
@@ -209,7 +209,7 @@
     border-color: var(--accent);
   }
   50% {
-    border-color: hsl(35, 60%, 65%);
+    border-color: var(--accent-light);
   }
 }
 
@@ -282,7 +282,7 @@
   content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(180deg, hsla(35, 20%, 100%, 0.1), transparent);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
   opacity: 0;
   transition: opacity var(--duration-fast);
 }
@@ -306,8 +306,8 @@
 }
 
 .btn-primary:hover {
-  background: linear-gradient(180deg, hsl(35, 55%, 62%), hsl(35, 55%, 52%));
-  box-shadow: 0 4px 16px hsla(35, 45%, 55%, 0.35);
+  background: linear-gradient(180deg, var(--accent-light), var(--accent));
+  box-shadow: 0 4px 16px rgb(var(--accent-rgb) / 0.35);
 }
 
 .icon-btn {
@@ -320,7 +320,7 @@
   content: "";
   position: absolute;
   inset: 0;
-  background: radial-gradient(circle at center, hsla(35, 20%, 100%, 0.15), transparent 70%);
+  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15), transparent 70%);
   opacity: 0;
   transform: scale(0.5);
   transition: all var(--duration-fast);
@@ -345,7 +345,7 @@
 
 .send-btn:hover {
   transform: translateY(-2px) scale(1.02);
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 20px hsla(35, 45%, 55%, 0.3);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgb(var(--accent-rgb) / 0.3);
 }
 
 .send-btn:active {
@@ -360,12 +360,6 @@
   transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out-expo);
 }
 
-.composer:focus-within {
-  border-color: hsla(35, 45%, 55%, 0.3);
-  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55), 0 0 0 1px hsla(35, 45%, 55%, 0.15), inset 0 1px 0
-    hsla(35, 20%, 100%, 0.04);
-  transform: translateY(-1px);
-}
 
 .composer.running {
   animation: borderGlow 2s ease-in-out infinite;
@@ -454,7 +448,7 @@
 .form-group select:focus,
 .form-group textarea:focus {
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px hsla(35, 45%, 55%, 0.15);
+  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.15);
   transform: translateY(-1px);
 }
 
@@ -631,21 +625,9 @@
 
 button:focus-visible,
 input:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
+select:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px hsla(35, 45%, 55%, 0.2);
-  animation: focusPulse 1.5s ease-in-out infinite;
-}
-
-@keyframes focusPulse {
-  0%,
-  100% {
-    box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px hsla(35, 45%, 55%, 0.2);
-  }
-  50% {
-    box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px hsla(35, 45%, 55%, 0.15);
-  }
+  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgb(var(--accent-rgb) / 0.2);
 }
 
 /* --------------------------------------------------------------------------

packages/extension/sidepanel/styles/base.css

@@ -1,32 +1,32 @@
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
 
-/* Parchi — Warm Paper Design System (Dark) */
+/* Parchi — Modern Void Design System (Dark) */
 
 :root {
-  /* Rich charcoal base — warm, never cold */
-  --background: hsl(30, 5%, 10.5%); /* #1b1b1b */
-  --foreground: hsl(40, 20%, 92%); /* warm off-white */
-  --muted: hsl(35, 10%, 55%);
-  --muted-dim: hsl(35, 8%, 40%);
-  --border: hsl(30, 5%, 17%);
-  --card: hsl(30, 5%, 12%); /* #1e1e1e */
-  --card-hover: hsl(30, 5%, 14%);
-
-  /* Warm accent — like aged brass */
-  --accent: hsl(35, 45%, 55%);
-  --accent-rgb: 186 152 93;
-  --accent-light: hsl(35, 40%, 72%);
-  --accent-dark: hsl(35, 45%, 38%);
-
-  /* Status — muted and warm */
-  --success: hsl(120, 15%, 55%);
-  --warning: hsl(40, 55%, 60%);
-  --error: hsl(0, 40%, 60%);
-
-  /* Ink system — paper-like layering */
-  --ink-1: hsla(35, 10%, 100%, 0.06);
-  --ink-2: hsla(35, 10%, 100%, 0.1);
-  --ink-3: hsla(35, 10%, 100%, 0.18);
+  /* Deep void base — cool, neutral, precise */
+  --background: #09090b;
+  --foreground: #fafafa;
+  --muted: #a1a1aa;
+  --muted-dim: #71717a;
+  --border: #27272a;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+
+  /* Accent — indigo with presence */
+  --accent: #818cf8;
+  --accent-rgb: 129 140 248;
+  --accent-light: #a5b4fc;
+  --accent-dark: #6366f1;
+
+  /* Status — vivid and clear */
+  --success: #4ade80;
+  --warning: #fbbf24;
+  --error: #f87171;
+
+  /* Ink system — layered transparency */
+  --ink-1: rgba(255, 255, 255, 0.05);
+  --ink-2: rgba(255, 255, 255, 0.08);
+  --ink-3: rgba(255, 255, 255, 0.14);
 
   /* Sidebar overlay width is responsive and varies by active right panel (see layout.css). */
   --sidebar-width: clamp(280px, 60vw, 560px);
@@ -35,8 +35,8 @@
   --radius-sm: 0.375rem;
   --content-max: 860px;
 
-  --font-sans: "Inter", "Geist Sans", system-ui, -apple-system, sans-serif;
-  --font-mono: "IBM Plex Mono", "Geist Mono", "SF Mono", monospace;
+  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", "SF Mono", monospace;
 
   --ui-zoom: 1;
   --font-base: 13px;

packages/extension/sidepanel/styles/chat.css

@@ -1,5 +1,5 @@
 /* ============================================================================
-   Chat — Warm Paper Design System
+   Chat — Modern Void Design System
    ============================================================================ */
 
 .chat-area {
@@ -40,7 +40,7 @@ body.sidebar-open .new-session-fab {
   transform: scale(1.05);
   opacity: 1;
   border-color: var(--accent);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px hsla(35, 45%, 55%, 0.15);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgb(var(--accent-rgb) / 0.15);
 }
 
 .new-session-fab svg {
@@ -102,8 +102,8 @@ body.sidebar-open .new-session-fab {
   width: 120px;
   height: 120px;
   border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, hsla(35, 45%, 55%, 0.5), hsla(30, 5%, 10%, 0.35));
-  box-shadow: 0 0 40px hsla(35, 45%, 55%, 0.18), inset 0 0 30px hsla(35, 20%, 100%, 0.06);
+  background: radial-gradient(circle at 30% 30%, rgb(var(--accent-rgb) / 0.5), rgba(10, 10, 15, 0.35));
+  box-shadow: 0 0 40px rgb(var(--accent-rgb) / 0.18), inset 0 0 30px rgba(255, 255, 255, 0.06);
   animation: orbPulse 4s ease-in-out infinite, orbFloat 6s ease-in-out infinite;
 }
 
@@ -344,16 +344,16 @@ body.sidebar-open .new-session-fab {
 .message-content a {
   color: var(--accent);
   text-decoration: none;
-  border-bottom: 1px solid hsla(35, 45%, 55%, 0.4);
-  background: hsla(35, 45%, 55%, 0.12);
+  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.4);
+  background: rgb(var(--accent-rgb) / 0.12);
   padding: 1px 4px;
   border-radius: 6px;
   transition: border-color 0.15s ease, background 0.15s ease;
 }
 
 .message-content a:hover {
   border-bottom-color: var(--accent);
-  background: hsla(35, 45%, 55%, 0.2);
+  background: rgb(var(--accent-rgb) / 0.2);
 }
 
 /* Lists */
@@ -428,7 +428,7 @@ body.sidebar-open .new-session-fab {
   font-weight: 500;
   color: var(--foreground);
   border-bottom: 1px solid var(--border);
-  background: hsla(30, 5%, 100%, 0.02);
+  background: rgba(255, 255, 255, 0.02);
 }
 
 .markdown-table tbody tr:hover td,
@@ -442,7 +442,7 @@ body.sidebar-open .new-session-fab {
 }
 
 .markdown-table tbody tr:nth-child(even) {
-  background: hsla(30, 5%, 100%, 0.015);
+  background: rgba(255, 255, 255, 0.015);
 }
 
 .markdown-table tbody tr:nth-child(even):hover {
@@ -597,8 +597,8 @@ body.sidebar-open .new-session-fab {
   padding: 6px 8px;
   border-radius: 12px;
   border: 1px solid var(--ink-1);
-  background: hsla(30, 5%, 100%, 0.02);
-  box-shadow: inset 0 1px 0 hsla(30, 5%, 100%, 0.02);
+  background: rgba(255, 255, 255, 0.02);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
 }
 
 .run-hud-toggle {
@@ -617,7 +617,7 @@ body.sidebar-open .new-session-fab {
 }
 
 .run-hud-toggle:hover {
-  background: hsla(30, 5%, 100%, 0.03);
+  background: rgba(255, 255, 255, 0.03);
   border-color: var(--ink-1);
 }
 
@@ -640,7 +640,7 @@ body.sidebar-open .new-session-fab {
   padding: 1px 6px;
   border-radius: 999px;
   border: 1px solid var(--ink-1);
-  background: hsla(30, 5%, 100%, 0.01);
+  background: rgba(255, 255, 255, 0.01);
   flex-shrink: 0;
 }
 
@@ -671,7 +671,7 @@ body.sidebar-open .new-session-fab {
   letter-spacing: 0.08em;
   text-transform: uppercase;
   border: 1px solid var(--ink-2);
-  background: hsla(30, 5%, 100%, 0.02);
+  background: rgba(255, 255, 255, 0.02);
   color: var(--muted);
 }
 
@@ -838,7 +838,7 @@ body.sidebar-open .new-session-fab {
 .inline-thinking-block {
   margin: 0 0 12px 0;
   padding: 10px 12px;
-  background: linear-gradient(135deg, hsla(35, 45%, 55%, 0.06) 0%, hsla(35, 45%, 55%, 0.02) 100%);
+  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.06) 0%, rgb(var(--accent-rgb) / 0.02) 100%);
   border-left: 2px solid var(--accent);
   border-radius: 0 8px 8px 0;
   animation: fadeInUp 0.3s var(--ease-out-expo);
@@ -877,8 +877,8 @@ body.sidebar-open .new-session-fab {
 .stream-event-reasoning {
   margin: 0 0 12px 0;
   padding: 10px 12px;
-  background: linear-gradient(135deg, hsla(35, 45%, 55%, 0.08) 0%, hsla(35, 45%, 55%, 0.02) 100%);
-  border: 1px solid hsla(35, 45%, 55%, 0.15);
+  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08) 0%, rgb(var(--accent-rgb) / 0.02) 100%);
+  border: 1px solid rgb(var(--accent-rgb) / 0.15);
   border-radius: 8px;
   animation: fadeInUp 0.3s var(--ease-out-expo);
 }
@@ -1072,7 +1072,7 @@ body.sidebar-open .new-session-fab {
 }
 
 .export-option:hover {
-  background: hsla(30, 5%, 100%, 0.04);
+  background: rgba(255, 255, 255, 0.04);
   border-color: var(--border);
 }
 
@@ -1128,7 +1128,7 @@ body.sidebar-open .new-session-fab {
 }
 
 .subagent-block.subagent-highlight {
-  box-shadow: 0 0 0 2px hsla(35, 45%, 55%, 0.4);
+  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.4);
 }
 
 .subagent-header {
@@ -1175,7 +1175,7 @@ body.sidebar-open .new-session-fab {
   letter-spacing: 0.06em;
   padding: 2px 8px;
   border-radius: 999px;
-  background: hsla(30, 5%, 100%, 0.05);
+  background: rgba(255, 255, 255, 0.05);
   color: var(--muted);
 }
 
@@ -1197,7 +1197,7 @@ body.sidebar-open .new-session-fab {
 .subagent-tasks {
   margin: 6px 0;
   padding: 6px 0;
-  border-top: 1px solid hsla(30, 5%, 100%, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .subagent-task {
@@ -1210,7 +1210,7 @@ body.sidebar-open .new-session-fab {
 .subagent-summary {
   margin-top: 8px;
   padding-top: 8px;
-  border-top: 1px solid hsla(30, 5%, 100%, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .subagent-summary-label {
@@ -1277,14 +1277,14 @@ body.sidebar-open .new-session-fab {
 }
 
 .agent-nav-item:hover {
-  background: hsla(30, 5%, 100%, 0.04);
+  background: rgba(255, 255, 255, 0.04);
   border-color: var(--accent);
   color: var(--foreground);
 }
 
 .agent-nav-item.active {
-  background: hsla(35, 45%, 55%, 0.12);
-  border-color: hsla(35, 45%, 55%, 0.4);
+  background: rgb(var(--accent-rgb) / 0.12);
+  border-color: rgb(var(--accent-rgb) / 0.4);
   color: var(--accent-light);
 }