feat: implement Codex theme and update UI components — added new theme with dark and light modes, refactored status bar and toggle components for improved styling and functionality

Author: BunsDev

app/globals.css

@@ -2998,85 +2998,73 @@ p {
   position: relative;
   border-top: 1px solid var(--shell-status-border);
   background: var(--shell-status-bg);
-  backdrop-filter: blur(16px) saturate(135%);
-  -webkit-backdrop-filter: blur(16px) saturate(135%);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(10px) saturate(120%);
+  -webkit-backdrop-filter: blur(10px) saturate(120%);
 }
 
-.shell-status-chip {
+.shell-status-item {
   display: inline-flex;
   align-items: center;
-  gap: 0.45rem;
-  min-height: 22px;
-  padding: 0 0.65rem;
-  border: 1px solid var(--shell-chip-border);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--shell-chip-bg) 92%, transparent);
-  color: var(--text-secondary);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  gap: 0.3rem;
+  padding: 0 0.3rem;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-tertiary);
+  transition:
+    color 140ms ease,
+    background 140ms ease;
 }
 
-.shell-status-chip--compact {
-  padding: 0 0.45rem;
+.shell-status-item:hover {
+  color: var(--text-secondary);
+  background: var(--shell-chip-hover);
 }
 
-.shell-status-chip--compact > * {
+.shell-status-item > * {
   display: flex;
   align-items: center;
 }
 
-.shell-status-chip--attention {
+.shell-status-item--attention {
   color: var(--warning);
-  border-color: color-mix(in srgb, var(--warning) 25%, var(--shell-chip-border));
-  background: color-mix(in srgb, var(--warning) 10%, var(--shell-chip-bg));
 }
 
-.shell-status-chip--signal,
-.shell-status-chip--connection {
-  padding-inline: 0.5rem;
+.shell-status-item--attention:hover {
+  background: color-mix(in srgb, var(--warning) 8%, transparent);
 }
 
-.shell-status-path {
-  padding: 0 0.2rem;
-}
-
-.shell-status-brand {
-  color: var(--text-disabled);
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  font-size: 10px;
+.shell-status-separator {
+  width: 1px;
+  height: 12px;
+  background: var(--shell-chip-border);
+  opacity: 0.5;
+  flex-shrink: 0;
 }
 
 .shell-status-icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 999px;
-  border: 1px solid transparent;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  border: none;
   background: transparent;
   color: var(--text-disabled);
   cursor: pointer;
   transition:
-    color 180ms ease,
-    border-color 180ms ease,
-    background 180ms ease,
-    transform 180ms ease;
+    color 140ms ease,
+    background 140ms ease;
 }
 
 .shell-status-icon-btn:hover {
   color: var(--text-primary);
-  border-color: var(--shell-chip-border);
   background: var(--shell-chip-hover);
-  transform: translateY(-0.5px);
 }
 
 .shell-status-icon-btn--active {
   color: var(--brand);
-  border-color: color-mix(in srgb, var(--brand) 24%, var(--shell-chip-border));
-  background: color-mix(in srgb, var(--brand) 9%, var(--shell-chip-bg));
+  background: color-mix(in srgb, var(--brand) 8%, transparent);
 }
 
 .shell-sidebar {
@@ -5845,3 +5833,234 @@ p {
     grid-template-columns: 1fr;
   }
 }
+
+/* ══════════════════════════════════════════════════════════════════
+   Theme: Codex — black and charcoal with quiet contrast
+   ══════════════════════════════════════════════════════════════════ */
+
+/* ── Codex Dark ──────────────────────────────────────────────── */
+.dark[data-theme='codex'] {
+  --bg: #090909;
+  --bg-elevated: #111111;
+  --bg-subtle: #171717;
+  --bg-secondary: #0d0d0d;
+  --bg-tertiary: #1d1d1d;
+  --sidebar-bg: #0b0b0b;
+  --foreground: #ededed;
+  --subtle: #7d7d7d;
+  --font-sans: 'IBM Plex Sans', Inter, system-ui, sans-serif;
+  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
+
+  --brand: #cfcfcf;
+  --brand-hover: #e3e3e3;
+  --brand-muted: rgba(207, 207, 207, 0.12);
+
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --error: #ef4444;
+  --info: #94a3b8;
+
+  --text-primary: #ededed;
+  --text-secondary: #b1b1b1;
+  --text-tertiary: #7d7d7d;
+  --text-disabled: #646464;
+
+  --syntax-comment: #666666;
+  --syntax-keyword: #d4d4d4;
+  --syntax-string: #c7d2fe;
+  --syntax-string-escape: #e2e8f0;
+  --syntax-number: #f5f5f5;
+  --syntax-regexp: #d4d4d4;
+  --syntax-type: #cbd5e1;
+  --syntax-function: #f1f5f9;
+  --syntax-variable: #ededed;
+  --syntax-variable-predefined: #cfcfcf;
+  --syntax-constant: #e5e7eb;
+  --syntax-tag: #d4d4d4;
+  --syntax-attribute-name: #cbd5e1;
+  --syntax-attribute-value: #f1f5f9;
+  --syntax-delimiter: #8a8a8a;
+  --syntax-operator: #9a9a9a;
+
+  --border: #252525;
+  --border-hover: #343434;
+  --border-focus: #cfcfcf;
+
+  --glass-bg: rgba(9, 9, 9, 0.94);
+  --glass-bg-hover: var(--bg-subtle);
+  --glass-bg-elevated: var(--bg-subtle);
+  --glass-border: var(--border);
+  --glass-border-hover: rgba(255, 255, 255, 0.12);
+  --glass-shadow: rgba(0, 0, 0, 0.72);
+  --brand-glow: rgba(255, 255, 255, 0.08);
+  --brand-glow-subtle: rgba(255, 255, 255, 0.03);
+  --brand-deep: #8f8f8f;
+  --brand-chat: #1d1d1d;
+  --brand-contrast: #090909;
+
+  --shadow-2xs: 0 1px 2px rgba(0, 0, 0, 0.45);
+  --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.55);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55);
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.62);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.72);
+  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.8);
+  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.86);
+
+  --kn-claw: var(--brand);
+  --vscode-text: var(--text-primary);
+  --vscode-subtle: var(--text-tertiary);
+  --vscode-muted: var(--text-secondary);
+
+  --overlay: rgba(0, 0, 0, 0.58);
+  --logo-filter: grayscale(0.2) brightness(1.05);
+
+  --scrollbar-thumb: #313131;
+  --scrollbar-thumb-hover: #434343;
+  --header-glass-bg: rgba(9, 9, 9, 0.94);
+  --shimmer-from: var(--bg-elevated);
+  --shimmer-via: var(--bg-subtle);
+
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 20px;
+}
+
+/* ── Codex Light ─────────────────────────────────────────────── */
+[data-theme='codex']:not(.dark) {
+  --bg: #f7f7f7;
+  --bg-elevated: #ffffff;
+  --bg-subtle: #f1f1f1;
+  --bg-secondary: #f4f4f4;
+  --bg-tertiary: #e8e8e8;
+  --sidebar-bg: #f3f3f3;
+  --foreground: #171717;
+  --subtle: #8a8a8a;
+  --font-sans: 'IBM Plex Sans', Inter, system-ui, sans-serif;
+  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
+
+  --brand: #2b2b2b;
+  --brand-hover: #111111;
+  --brand-muted: rgba(43, 43, 43, 0.08);
+
+  --success: #16a34a;
+  --warning: #b45309;
+  --error: #dc2626;
+  --info: #475569;
+
+  --text-primary: #171717;
+  --text-secondary: #4b4b4b;
+  --text-tertiary: #8a8a8a;
+  --text-disabled: #9a9a9a;
+
+  --border: #e1e1e1;
+  --border-hover: #cacaca;
+  --border-focus: #2b2b2b;
+
+  --glass-bg: rgba(247, 247, 247, 0.94);
+  --glass-bg-hover: var(--bg-subtle);
+  --glass-bg-elevated: #ffffff;
+  --glass-border: var(--border);
+  --glass-border-hover: rgba(23, 23, 23, 0.12);
+  --glass-shadow: rgba(0, 0, 0, 0.06);
+  --brand-glow: rgba(23, 23, 23, 0.06);
+  --brand-glow-subtle: rgba(23, 23, 23, 0.03);
+  --brand-deep: #111111;
+  --brand-chat: #ececec;
+  --brand-contrast: #ffffff;
+
+  --shadow-2xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12);
+  --shadow-2xl: 0 24px 56px rgba(0, 0, 0, 0.14);
+
+  --kn-claw: var(--brand);
+  --vscode-text: var(--text-primary);
+  --vscode-subtle: var(--text-tertiary);
+  --vscode-muted: var(--text-secondary);
+
+  --overlay: rgba(247, 247, 247, 0.55);
+  --logo-filter: grayscale(0.2) brightness(0.9);
+
+  --scrollbar-thumb: #c5c5c5;
+  --scrollbar-thumb-hover: #aaaaaa;
+  --header-glass-bg: rgba(247, 247, 247, 0.94);
+  --shimmer-from: var(--bg-elevated);
+  --shimmer-via: var(--bg-subtle);
+
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 20px;
+}
+
+/* ── Codex semantic tokens ───────────────────────────────────── */
+.dark[data-theme='codex'] {
+  --color-additions: #22c55e;
+  --color-deletions: #ef4444;
+  --on-additions: #090909;
+  --on-deletions: #ffffff;
+  --color-stage-review: #cbd5e1;
+  --color-stage-review-bg: rgba(203, 213, 225, 0.1);
+  --color-stage-review-border: rgba(203, 213, 225, 0.24);
+  --color-stage-prepare: #f59e0b;
+  --color-stage-prepare-bg: rgba(245, 158, 11, 0.1);
+  --color-stage-prepare-border: rgba(245, 158, 11, 0.24);
+  --color-stage-merge: #22c55e;
+  --color-stage-merge-bg: rgba(34, 197, 94, 0.1);
+  --color-stage-merge-border: rgba(34, 197, 94, 0.24);
+  --color-prereq-met: #22c55e;
+  --color-prereq-unmet: #f59e0b;
+  --color-conflict: #ef4444;
+  --color-stale: #f59e0b;
+  --color-merged: #d4d4d8;
+  --color-merged-muted: rgba(212, 212, 216, 0.12);
+  --color-merged-border: rgba(212, 212, 216, 0.24);
+  --color-closed: #ef4444;
+  --color-action-default: var(--text-secondary);
+  --color-ai: #d4d4d8;
+  --color-ai-muted: rgba(212, 212, 216, 0.1);
+  --color-ai-border: rgba(212, 212, 216, 0.22);
+  --color-ai-hover: #ededed;
+  --color-ai-hover-bg: rgba(255, 255, 255, 0.06);
+}
+
+[data-theme='codex']:not(.dark) {
+  --color-additions: #16a34a;
+  --color-deletions: #dc2626;
+  --on-additions: #ffffff;
+  --on-deletions: #ffffff;
+  --color-stage-review: #475569;
+  --color-stage-review-bg: rgba(71, 85, 105, 0.08);
+  --color-stage-review-border: rgba(71, 85, 105, 0.22);
+  --color-stage-prepare: #b45309;
+  --color-stage-prepare-bg: rgba(180, 83, 9, 0.08);
+  --color-stage-prepare-border: rgba(180, 83, 9, 0.22);
+  --color-stage-merge: #16a34a;
+  --color-stage-merge-bg: rgba(22, 163, 74, 0.08);
+  --color-stage-merge-border: rgba(22, 163, 74, 0.22);
+  --color-prereq-met: #16a34a;
+  --color-prereq-unmet: #b45309;
+  --color-conflict: #dc2626;
+  --color-stale: #b45309;
+  --color-merged: #3f3f46;
+  --color-merged-muted: rgba(63, 63, 70, 0.08);
+  --color-merged-border: rgba(63, 63, 70, 0.22);
+  --color-closed: #dc2626;
+  --color-action-default: var(--text-secondary);
+  --color-ai: #2b2b2b;
+  --color-ai-muted: rgba(43, 43, 43, 0.08);
+  --color-ai-border: rgba(43, 43, 43, 0.2);
+  --color-ai-hover: #111111;
+  --color-ai-hover-bg: rgba(17, 17, 17, 0.05);
+}
+
+.dark[data-theme='codex'] body {
+  background:
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 24%),
+    radial-gradient(circle at top right, rgba(255, 255, 255, 0.02), transparent 18%),
+    linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
+}

components/caffeinate-toggle.tsx

@@ -61,27 +61,30 @@ export function CaffeinateToggle({ compact = false }: { compact?: boolean }) {
         onClick={toggle}
         title={isActive ? 'Allow sleep (caffeinate off)' : 'Prevent sleep (caffeinate on)'}
       >
-        <Icon icon={isActive ? 'lucide:coffee' : 'lucide:moon'} width={14} />
+        <Icon icon={isActive ? 'lucide:coffee' : 'lucide:moon'} width={12} />
 
         <style jsx>{`
           .caffeinate-compact {
-            background: none;
-            border: 1px solid var(--border);
-            color: var(--text-muted);
+            background: transparent;
+            border: none;
+            color: var(--text-disabled);
             cursor: pointer;
-            padding: 5px 8px;
-            border-radius: 6px;
+            padding: 3px;
+            border-radius: 4px;
             display: flex;
             align-items: center;
-            transition: all 0.15s;
+            transition:
+              color 140ms ease,
+              background 140ms ease;
           }
           .caffeinate-compact:hover {
             color: var(--text-secondary);
-            border-color: var(--text-muted);
+            background: var(--shell-chip-hover);
           }
           .caffeinate-compact--active {
             color: #f59e0b;
-            border-color: rgba(245, 158, 11, 0.3);
+          }
+          .caffeinate-compact--active:hover {
             background: rgba(245, 158, 11, 0.08);
           }
         `}</style>