codex-linux 1.0.0 → 1.0.2

package/src/renderer/components/ChatInterface.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Agent, AgentMessage, AgentStatus, PermissionMode } from '../../shared/types';
-import { Send, Bot, User, Loader2, Paperclip, MoreVertical, Copy, Check, ChevronDown, Sparkles, Zap } from 'lucide-react';
+import { Agent, AgentMessage, PermissionMode } from '../../shared/types';
+import { Send, Bot, User, Loader2, Paperclip, MoreVertical, Copy, Check, ChevronDown, Sparkles } from 'lucide-react';
 import { format } from 'date-fns';
 import { PermissionSelector } from './PermissionSelector';
 
@@ -29,34 +29,17 @@ const FREE_MODELS: ModelOption[] = [
   { id: 'meta-llama/llama-3.3-70b-instruct:free', name: 'Llama 3.3 70B', backend: 'openrouter', isFree: true, contextWindow: 128000 },
   { id: 'deepseek/deepseek-r1-0528:free', name: 'DeepSeek R1', backend: 'openrouter', isFree: true, contextWindow: 128000 },
   { id: 'google/gemma-3-27b-it:free', name: 'Gemma 3 27B', backend: 'openrouter', isFree: true, contextWindow: 32768 },
-  { id: 'google/gemma-3-12b-it:free', name: 'Gemma 3 12B', backend: 'openrouter', isFree: true, contextWindow: 32768 },
   { id: 'mistralai/mistral-small-3.1-24b-instruct:free', name: 'Mistral Small 3.1', backend: 'openrouter', isFree: true, contextWindow: 128000, supportsVision: true },
   { id: 'qwen/qwen3-coder:free', name: 'Qwen 3 Coder', backend: 'openrouter', isFree: true, contextWindow: 32768 },
-  { id: 'nousresearch/hermes-3-llama-3.1-405b:free', name: 'Hermes 3 405B', backend: 'openrouter', isFree: true, contextWindow: 128000 },
   { id: 'openai/gpt-oss-120b:free', name: 'GPT-OSS 120B', backend: 'openrouter', isFree: true, contextWindow: 128000 },
-  { id: 'nvidia/nemotron-nano-12b-v2-vl:free', name: 'Nemotron 12B VL', backend: 'openrouter', isFree: true, contextWindow: 32768, supportsVision: true },
   { id: 'z-ai/glm-4.5-air:free', name: 'GLM 4.5 Air', backend: 'openrouter', isFree: true, contextWindow: 128000 },
-  { id: 'liquid/lfm-2.5-1.2b-instruct:free', name: 'LFM 2.5 1.2B', backend: 'openrouter', isFree: true, contextWindow: 8192 },
-  { id: 'upstage/solar-pro-3:free', name: 'Solar Pro 3', backend: 'openrouter', isFree: true, contextWindow: 32768 },
-  { id: 'moonshotai/kimi-k2.5', name: 'Kimi K2.5', backend: 'nvidia', isFree: true, contextWindow: 128000 },
-  { id: 'meta/llama-3.3-70b-instruct', name: 'Llama 3.3 70B (NVIDIA)', backend: 'nvidia', isFree: true, contextWindow: 128000 },
-  { id: 'google/gemma-2-27b-it', name: 'Gemma 2 27B (NVIDIA)', backend: 'nvidia', isFree: true, contextWindow: 8192 },
-  { id: 'microsoft/phi-3-medium-128k-instruct', name: 'Phi-3 Medium 128K', backend: 'nvidia', isFree: true, contextWindow: 128000 },
   { id: 'llama-3.3-70b-versatile', name: 'Llama 3.3 70B (Groq)', backend: 'groq', isFree: true, contextWindow: 128000 },
-  { id: 'llama-3.1-8b-instant', name: 'Llama 3.1 8B (Groq)', backend: 'groq', isFree: true, contextWindow: 128000 },
-  { id: 'mixtral-8x7b-32768', name: 'Mixtral 8x7B (Groq)', backend: 'groq', isFree: true, contextWindow: 32768 },
-  { id: 'gemma2-9b-it', name: 'Gemma 2 9B (Groq)', backend: 'groq', isFree: true, contextWindow: 8192 },
-  { id: 'minimax-m2.5:cloud', name: 'Minimax M2.5 (Ollama)', backend: 'ollama', isFree: true, contextWindow: 128000 },
   { id: 'llama3.2:latest', name: 'Llama 3.2 (Ollama)', backend: 'ollama', isFree: true, contextWindow: 128000, supportsVision: true },
   { id: 'llama3.3:latest', name: 'Llama 3.3 70B (Ollama)', backend: 'ollama', isFree: true, contextWindow: 128000 },
   { id: 'mistral:latest', name: 'Mistral 7B (Ollama)', backend: 'ollama', isFree: true, contextWindow: 32768 },
   { id: 'deepseek-r1:latest', name: 'DeepSeek R1 (Ollama)', backend: 'ollama', isFree: true, contextWindow: 128000 },
   { id: 'qwen2.5:latest', name: 'Qwen 2.5 (Ollama)', backend: 'ollama', isFree: true, contextWindow: 128000 },
-  { id: 'qwen2.5-coder:latest', name: 'Qwen 2.5 Coder (Ollama)', backend: 'ollama', isFree: true, contextWindow: 32768 },
-  { id: 'gemma3:latest', name: 'Gemma 3 (Ollama)', backend: 'ollama', isFree: true, contextWindow: 32768, supportsVision: true },
-  { id: 'phi3:latest', name: 'Phi-3 (Ollama)', backend: 'ollama', isFree: true, contextWindow: 128000 },
   { id: 'codellama:latest', name: 'Code Llama (Ollama)', backend: 'ollama', isFree: true, contextWindow: 16384 },
-  { id: 'deepseek-coder:latest', name: 'DeepSeek Coder (Ollama)', backend: 'ollama', isFree: true, contextWindow: 16384 },
 ];
 
 const BACKEND_LABELS: Record<string, string> = {
@@ -159,21 +142,6 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
     }
   };
 
-  const handleImageUpload = async (file: File) => {
-    if (isLoading) return;
-    
-    try {
-      const reader = new FileReader();
-      reader.onloadend = async () => {
-        const base64 = reader.result as string;
-        await onSendMessage(`[IMAGE] ${base64}`);
-      };
-      reader.readAsDataURL(file);
-    } catch (error) {
-      console.error('Failed to upload image:', error);
-    }
-  };
-
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -212,7 +180,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
           <p key={index} className="my-1">
             {parts.map((part, i) => 
               part.startsWith('`') && part.endsWith('`') ? (
-                <code key={i} className="bg-muted px-1 py-0.5 rounded text-sm font-mono">
+                <code key={i} className="bg-[var(--bg-hover)] px-1 py-0.5 rounded text-[11px] font-[var(--font-mono)] text-[var(--teal-300)]">
                   {part.slice(1, -1)}
                 </code>
               ) : (
@@ -224,24 +192,24 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
       }
 
       if (line.startsWith('### ')) {
-        return <h3 key={index} className="text-lg font-semibold mt-4 mb-2">{line.slice(4)}</h3>;
+        return <h3 key={index} className="text-[15px] font-semibold mt-4 mb-2 text-[var(--text-primary)]">{line.slice(4)}</h3>;
       }
       if (line.startsWith('## ')) {
-        return <h2 key={index} className="text-xl font-semibold mt-4 mb-2">{line.slice(3)}</h2>;
+        return <h2 key={index} className="text-[17px] font-semibold mt-4 mb-2 text-[var(--text-primary)]">{line.slice(3)}</h2>;
       }
       if (line.startsWith('# ')) {
-        return <h1 key={index} className="text-2xl font-bold mt-4 mb-2">{line.slice(2)}</h1>;
+        return <h1 key={index} className="text-[19px] font-bold mt-4 mb-2 text-[var(--text-primary)]">{line.slice(2)}</h1>;
       }
 
       if (line.startsWith('- ') || line.startsWith('* ')) {
-        return <li key={index} className="ml-4 my-1">{line.slice(2)}</li>;
+        return <li key={index} className="ml-4 my-1 text-[var(--text-secondary)]">{line.slice(2)}</li>;
       }
 
       if (line.trim() === '') {
         return <br key={index} />;
       }
 
-      return <p key={index} className="my-1">{line}</p>;
+      return <p key={index} className="my-1 text-[var(--text-secondary)]">{line}</p>;
     });
   };
 
@@ -261,50 +229,48 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
   const currentModelInfo = getCurrentModelInfo();
 
   return (
-    <div className="flex flex-col h-full bg-card">
-      {/* Chat Header */}
-      <div className="px-4 py-3 border-b border-border flex items-center justify-between bg-background/50">
+    <div className="flex flex-col h-full bg-[var(--bg-primary)]">
+      <div className="px-4 py-3 border-b border-[var(--border-subtle)] flex items-center justify-between bg-[var(--bg-surface)]">
         <div className="flex items-center gap-3">
           <div className={`w-2 h-2 rounded-full ${
-            agent.status === 'running' ? 'bg-green-500 animate-pulse' :
-            agent.status === 'error' ? 'bg-red-500' :
-            agent.status === 'paused' ? 'bg-yellow-500' :
-            'bg-gray-400'
+            agent.status === 'running' ? 'bg-[var(--success)] animate-pulse' :
+            agent.status === 'error' ? 'bg-[var(--error)]' :
+            agent.status === 'paused' ? 'bg-[var(--warning)]' :
+            'bg-[var(--text-muted)]'
           }`} />
           <div>
-            <h3 className="font-medium">{agent.name}</h3>
+            <h3 className="font-medium text-[13px] text-[var(--text-primary)]">{agent.name}</h3>
           </div>
         </div>
         
-        {/* Model Selector */}
         <div className="relative" ref={modelSelectorRef}>
           <button
             onClick={() => setShowModelSelector(!showModelSelector)}
-            className="flex items-center gap-2 px-3 py-1.5 bg-muted hover:bg-muted/80 rounded-lg transition-colors text-sm"
+            className="flex items-center gap-2 px-3 py-1.5 bg-[var(--bg-elevated)] hover:bg-[var(--bg-hover)] rounded-lg transition-colors text-[12px] border border-[var(--border-subtle)]"
           >
-            <Sparkles className="w-4 h-4 text-green-500" />
-            <span className="font-medium truncate max-w-[150px]">{currentModelInfo.name}</span>
-            <span className="text-xs text-muted-foreground px-1.5 py-0.5 bg-background rounded">
+            <Sparkles className="w-3.5 h-3.5 text-[var(--success)]" />
+            <span className="font-medium truncate max-w-[150px] text-[var(--text-primary)]">{currentModelInfo.name}</span>
+            <span className="text-[10px] text-[var(--text-muted)] px-1.5 py-0.5 bg-[var(--bg-hover)] rounded">
               {BACKEND_LABELS[currentModelInfo.backend || 'unknown'] || currentModelInfo.backend}
             </span>
-            <ChevronDown className={`w-4 h-4 transition-transform ${showModelSelector ? 'rotate-180' : ''}`} />
+            <ChevronDown className={`w-3.5 h-3.5 text-[var(--text-muted)] transition-transform ${showModelSelector ? 'rotate-180' : ''}`} />
           </button>
 
           {showModelSelector && (
-            <div className="absolute top-full right-0 mt-2 w-80 bg-background border border-border rounded-lg shadow-xl z-50 max-h-[70vh] overflow-hidden">
-              <div className="p-3 border-b border-border">
+            <div className="absolute top-full right-0 mt-2 w-80 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-lg)] shadow-xl z-50 max-h-[70vh] overflow-hidden">
+              <div className="p-3 border-b border-[var(--border-subtle)]">
                 <input
                   type="text"
                   placeholder="Search models..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full px-3 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                  className="w-full px-3 py-2 bg-[var(--bg-elevated)] rounded-[var(--radius-md)] text-[12px] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:outline-none focus:border-[var(--teal-500)] border border-[var(--border-subtle)]"
                 />
                 <div className="flex gap-1 mt-2 flex-wrap">
                   <button
                     onClick={() => setSelectedBackend('all')}
-                    className={`px-2 py-1 text-xs rounded-md transition-colors ${
-                      selectedBackend === 'all' ? 'bg-primary text-primary-foreground' : 'bg-muted hover:bg-muted/80'
+                    className={`px-2 py-1 text-[10px] rounded-md transition-colors ${
+                      selectedBackend === 'all' ? 'bg-[var(--teal-500)] text-[var(--bg-void)]' : 'bg-[var(--bg-hover)] hover:bg-[var(--bg-active)] text-[var(--text-secondary)]'
                     }`}
                   >
                     All
@@ -313,8 +279,8 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
                     <button
                       key={key}
                       onClick={() => setSelectedBackend(key)}
-                      className={`px-2 py-1 text-xs rounded-md transition-colors ${
-                        selectedBackend === key ? 'bg-primary text-primary-foreground' : 'bg-muted hover:bg-muted/80'
+                      className={`px-2 py-1 text-[10px] rounded-md transition-colors ${
+                        selectedBackend === key ? 'bg-[var(--teal-500)] text-[var(--bg-void)]' : 'bg-[var(--bg-hover)] hover:bg-[var(--bg-active)] text-[var(--text-secondary)]'
                       }`}
                     >
                       {label}
@@ -326,40 +292,40 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
               <div className="overflow-y-auto max-h-[50vh]">
                 {Object.entries(groupedModels).map(([backend, backendModels]) => (
                   <div key={backend}>
-                    <div className="px-3 py-2 bg-muted/50 text-xs font-medium text-muted-foreground sticky top-0">
+                    <div className="px-3 py-2 bg-[var(--bg-elevated)] text-[10px] font-medium text-[var(--text-muted)] sticky top-0">
                       {BACKEND_LABELS[backend] || backend} ({backendModels.length})
                     </div>
                     {backendModels.map((model) => (
                       <button
                         key={model.id}
                         onClick={() => handleModelSelect(model.id)}
-                        className={`w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors flex items-center justify-between ${
-                          selectedModel === model.id ? 'bg-primary/10' : ''
+                        className={`w-full px-3 py-2 text-left hover:bg-[var(--bg-hover)] transition-colors flex items-center justify-between ${
+                          selectedModel === model.id ? 'bg-[rgba(0,200,168,0.08)]' : ''
                         }`}
                       >
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-2">
-                            <span className="font-medium text-sm truncate">{model.name}</span>
+                            <span className="font-medium text-[12px] truncate text-[var(--text-primary)]">{model.name}</span>
                             {model.isFree && (
-                              <span className="px-1.5 py-0.5 text-[10px] bg-green-500/20 text-green-500 rounded">
+                              <span className="px-1.5 py-0.5 text-[9px] bg-[rgba(60,200,120,0.1)] text-[var(--success)] rounded">
                                 FREE
                               </span>
                             )}
                             {model.supportsVision && (
-                              <span className="px-1.5 py-0.5 text-[10px] bg-purple-500/20 text-purple-500 rounded">
+                              <span className="px-1.5 py-0.5 text-[9px] bg-[rgba(104,144,244,0.1)] text-[var(--info)] rounded">
                                 VISION
                               </span>
                             )}
                           </div>
-                          <div className="text-xs text-muted-foreground truncate">{model.id}</div>
+                          <div className="text-[10px] text-[var(--text-muted)] truncate">{model.id}</div>
                         </div>
                         {model.contextWindow && model.contextWindow >= 100000 && (
-                          <span className="text-xs text-muted-foreground ml-2">
+                          <span className="text-[10px] text-[var(--text-muted)] ml-2">
                             {model.contextWindow >= 1000000 ? '1M' : `${model.contextWindow / 1000}K`}
                           </span>
                         )}
                         {selectedModel === model.id && (
-                          <Check className="w-4 h-4 text-primary ml-2" />
+                          <Check className="w-3.5 h-3.5 text-[var(--teal-400)] ml-2" />
                         )}
                       </button>
                     ))}
@@ -378,41 +344,34 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
               allowBypass={allowBypassMode}
             />
           )}
-          <span className="text-xs text-muted-foreground">
+          <span className="text-[11px] text-[var(--text-muted)]">
             {agent.messages.length} messages
           </span>
-          <button className="p-2 hover:bg-muted rounded-md">
-            <MoreVertical className="w-4 h-4" />
+          <button className="p-2 hover:bg-[var(--bg-hover)] rounded-[var(--radius-sm)] text-[var(--text-muted)] transition-colors">
+            <MoreVertical className="w-3.5 h-3.5" />
           </button>
         </div>
       </div>
 
-      {/* Messages */}
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
         {agent.messages.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+          <div className="flex flex-col items-center justify-center h-full text-[var(--text-muted)]">
             <Bot className="w-16 h-16 mb-4 opacity-30" />
-            <p className="text-lg font-medium">Start a conversation</p>
-            <p className="text-sm mt-2">Send a message or use /task to assign a task</p>
-            <div className="mt-6 space-y-2 text-sm">
+            <p className="text-[15px] font-medium text-[var(--text-primary)]">Start a conversation</p>
+            <p className="text-[12px] mt-2">Send a message or use /task to assign a task</p>
+            <div className="mt-6 space-y-2 text-[12px]">
               <button 
                 onClick={() => setInput('Can you help me refactor this code?')}
-                className="block px-4 py-2 bg-muted rounded-lg hover:bg-muted/80 transition-colors"
+                className="block px-4 py-2 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] hover:border-[var(--border-accent)] transition-colors text-[var(--text-secondary)]"
               >
                 "Can you help me refactor this code?"
               </button>
               <button 
                 onClick={() => setInput('/task Review all JavaScript files for potential bugs')}
-                className="block px-4 py-2 bg-muted rounded-lg hover:bg-muted/80 transition-colors"
+                className="block px-4 py-2 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] hover:border-[var(--border-accent)] transition-colors text-[var(--text-secondary)]"
               >
                 "/task Review all JavaScript files..."
               </button>
-              <button 
-                onClick={() => setInput('Explain how this function works')}
-                className="block px-4 py-2 bg-muted rounded-lg hover:bg-muted/80 transition-colors"
-              >
-                "Explain how this function works"
-              </button>
             </div>
           </div>
         ) : (
@@ -425,15 +384,15 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
             >
               <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
                 message.role === 'user' 
-                  ? 'bg-primary text-primary-foreground' 
+                  ? 'bg-[var(--teal-500)] text-[var(--bg-void)]' 
                   : message.role === 'system'
-                  ? 'bg-muted text-muted-foreground'
-                  : 'bg-green-500/10 text-green-500'
+                  ? 'bg-[var(--bg-elevated)] text-[var(--text-muted)]'
+                  : 'bg-[rgba(0,200,168,0.1)] text-[var(--teal-400)]'
               }`}>
                 {message.role === 'user' ? (
                   <User className="w-4 h-4" />
                 ) : message.role === 'system' ? (
-                  <span className="text-xs font-bold">S</span>
+                  <span className="text-[10px] font-bold">S</span>
                 ) : (
                   <Bot className="w-4 h-4" />
                 )}
@@ -444,19 +403,19 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
               }`}>
                 <div className={`relative rounded-2xl px-4 py-3 ${
                   message.role === 'user'
-                    ? 'bg-primary text-primary-foreground'
+                    ? 'bg-[var(--teal-500)] text-[var(--bg-void)]'
                     : message.role === 'system'
-                    ? 'bg-muted text-muted-foreground text-sm italic'
-                    : 'bg-muted'
+                    ? 'bg-[var(--bg-elevated)] text-[var(--text-muted)] text-[12px] italic'
+                    : 'bg-[var(--bg-card)] border border-[var(--border-subtle)]'
                 }`}>
                   <button
                     onClick={() => copyToClipboard(message.content, message.id)}
-                    className="absolute top-2 right-2 p-1.5 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 rounded-md"
+                    className="absolute top-2 right-2 p-1.5 opacity-0 group-hover:opacity-100 transition-opacity bg-[var(--bg-surface)] rounded-md"
                   >
                     {copiedId === message.id ? (
-                      <Check className="w-3 h-3 text-green-500" />
+                      <Check className="w-3 h-3 text-[var(--success)]" />
                     ) : (
-                      <Copy className="w-3 h-3" />
+                      <Copy className="w-3 h-3 text-[var(--text-muted)]" />
                     )}
                   </button>
 
@@ -469,7 +428,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
                         <div className="mb-3">
                           <button
                             onClick={() => setExpandedAutoContext(prev => ({ ...prev, [message.id]: !isExpanded }))}
-                            className="text-xs px-2 py-1 rounded-md bg-background/60 hover:bg-background/80 border border-border text-muted-foreground"
+                            className="text-[10px] px-2 py-1 rounded-md bg-[var(--bg-elevated)] hover:bg-[var(--bg-hover)] border border-[var(--border-subtle)] text-[var(--text-muted)]"
                             type="button"
                           >
                             Auto-context: {ac.files.length} files{typeof ac.totalChars === 'number' ? `  ${ac.totalChars} chars` : ''}
@@ -477,12 +436,12 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
                           </button>
 
                           {isExpanded && (
-                            <div className="mt-2 rounded-md border border-border bg-background/50 p-2 text-xs">
+                            <div className="mt-2 rounded-md border border-[var(--border-subtle)] bg-[var(--bg-elevated)] p-2 text-[10px]">
                               <div className="space-y-1">
                                 {ac.files.map((f, idx) => (
                                   <div key={`${message.id}-ac-${idx}`} className="flex gap-2">
-                                    <span className="font-mono text-foreground truncate max-w-[260px]">{f.path}</span>
-                                    <span className="text-muted-foreground">- {f.reason}</span>
+                                    <span className="font-[var(--font-mono)] text-[var(--text-primary)] truncate max-w-[260px]">{f.path}</span>
+                                    <span className="text-[var(--text-muted)]">- {f.reason}</span>
                                   </div>
                                 ))}
                               </div>
@@ -496,30 +455,30 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
                   </div>
 
                   {extractCodeBlocks(message.content).map((block, idx) => (
-                    <div key={idx} className="mt-4 rounded-lg overflow-hidden border border-border">
-                      <div className="flex items-center justify-between px-3 py-2 bg-background/50 border-b border-border">
-                        <span className="text-xs font-medium text-muted-foreground">{block.language}</span>
+                    <div key={idx} className="mt-4 rounded-lg overflow-hidden border border-[var(--border-subtle)]">
+                      <div className="flex items-center justify-between px-3 py-2 bg-[var(--bg-elevated)] border-b border-[var(--border-subtle)]">
+                        <span className="text-[10px] font-medium text-[var(--text-muted)]">{block.language}</span>
                         <button
                           onClick={() => copyToClipboard(block.code, `code-${idx}`)}
-                          className="p-1 hover:bg-background rounded"
+                          className="p-1 hover:bg-[var(--bg-hover)] rounded"
                         >
                           {copiedId === `code-${idx}` ? (
-                            <Check className="w-3 h-3 text-green-500" />
+                            <Check className="w-3 h-3 text-[var(--success)]" />
                           ) : (
-                            <Copy className="w-3 h-3" />
+                            <Copy className="w-3 h-3 text-[var(--text-muted)]" />
                           )}
                         </button>
                       </div>
-                      <pre className="bg-black/50 p-3 rounded-b-lg overflow-x-auto">
-                        <code className="text-sm font-mono text-green-400">{block.code}</code>
+                      <pre className="bg-[var(--bg-void)] p-3 rounded-b-lg overflow-x-auto">
+                        <code className="text-[12px] font-[var(--font-mono)] text-[var(--teal-300)]">{block.code}</code>
                       </pre>
                     </div>
                   ))}
 
-                  <div className={`text-xs mt-2 ${
+                  <div className={`text-[10px] mt-2 ${
                     message.role === 'user' 
-                      ? 'text-primary-foreground/60' 
-                      : 'text-muted-foreground'
+                      ? 'text-[var(--bg-void)] opacity-60'
+                      : 'text-[var(--text-muted)]'
                   }`}>
                     {format(new Date(message.timestamp), 'HH:mm')}
                   </div>
@@ -531,12 +490,12 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
         
         {isLoading && (
           <div className="flex gap-3">
-            <div className="w-8 h-8 rounded-lg bg-green-500/10 text-green-500 flex items-center justify-center">
+            <div className="w-8 h-8 rounded-lg bg-[rgba(0,200,168,0.1)] text-[var(--teal-400)] flex items-center justify-center">
               <Bot className="w-4 h-4" />
             </div>
-            <div className="bg-muted rounded-2xl px-4 py-3 flex items-center gap-2">
-              <Loader2 className="w-4 h-4 animate-spin" />
-              <span className="text-sm text-muted-foreground">Thinking...</span>
+            <div className="bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-2xl px-4 py-3 flex items-center gap-2">
+              <Loader2 className="w-4 h-4 animate-spin text-[var(--teal-400)]" />
+              <span className="text-[12px] text-[var(--text-muted)]">Thinking...</span>
             </div>
           </div>
         )}
@@ -544,10 +503,9 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
         <div ref={messagesEndRef} />
       </div>
 
-      {/* Input Area */}
-      <div className="p-4 border-t border-border bg-background/50">
+      <div className="p-4 border-t border-[var(--border-subtle)] bg-[var(--bg-surface)]">
         <div className="relative flex items-end gap-2">
-          <button className="p-2 text-muted-foreground hover:text-foreground transition-colors">
+          <button className="p-2 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors">
             <Paperclip className="w-5 h-5" />
           </button>
           
@@ -558,7 +516,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
               onChange={e => setInput(e.target.value)}
               onKeyDown={handleKeyDown}
               placeholder="Type a message... (Shift+Enter for new line, /task for tasks)"
-              className="w-full px-4 py-3 pr-12 bg-background border border-input rounded-xl resize-none focus:outline-none focus:ring-2 focus:ring-primary min-h-[56px] max-h-[200px]"
+              className="w-full px-4 py-3 pr-12 bg-[var(--bg-card)] border border-[var(--border-default)] rounded-[var(--radius-lg)] resize-none focus:outline-none focus:border-[var(--teal-500)] text-[13px] text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] min-h-[56px] max-h-[200px]"
               rows={1}
               style={{ height: 'auto' }}
               onInput={(e) => {
@@ -572,19 +530,19 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
           <button
             onClick={handleSend}
             disabled={!input.trim() || isLoading}
-            className="p-3 bg-primary text-primary-foreground rounded-xl hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            className="p-3 bg-[var(--teal-500)] text-[var(--bg-void)] rounded-[var(--radius-lg)] hover:bg-[var(--teal-400)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
             <Send className="w-5 h-5" />
           </button>
         </div>
         
-        <div className="flex items-center justify-between mt-2 text-xs text-muted-foreground">
+        <div className="flex items-center justify-between mt-2 text-[10px] text-[var(--text-muted)]">
           <div className="flex gap-4">
             <span className="flex items-center gap-1">
-              <kbd className="px-1.5 py-0.5 bg-muted rounded">Enter</kbd> to send
+              <kbd className="px-1.5 py-0.5 bg-[var(--bg-elevated)] rounded text-[9px]">Enter</kbd> to send
             </span>
             <span className="flex items-center gap-1">
-              <kbd className="px-1.5 py-0.5 bg-muted rounded">Shift</kbd> + <kbd className="px-1.5 py-0.5 bg-muted rounded">Enter</kbd> for new line
+              <kbd className="px-1.5 py-0.5 bg-[var(--bg-elevated)] rounded text-[9px]">Shift</kbd> + <kbd className="px-1.5 py-0.5 bg-[var(--bg-elevated)] rounded text-[9px]">Enter</kbd> for new line
             </span>
           </div>
           <span>{input.length} characters</span>

package/src/renderer/components/Header.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Agent } from '../../shared/types';
-import { Bot, MoreVertical, Minus, Square, X, Search } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { VoiceCommand } from './VoiceCommand';
+import { Minus, Square, X, Search } from 'lucide-react';
 
 interface HeaderProps {
   activeTab: string;
@@ -10,13 +8,9 @@ interface HeaderProps {
   onSettingsClick: () => void;
 }
 
-export const Header: React.FC<HeaderProps> = ({ activeTab, agents, onSettingsClick }) => {
+export const Header: React.FC<HeaderProps> = ({ activeTab, agents }) => {
   const runningAgents = agents.filter(a => a.status === 'running').length;
 
-  const handleVoiceCommand = (transcript: string) => {
-    console.log('Voice command:', transcript);
-  };
-
   const getTitle = () => {
     switch (activeTab) {
       case 'agents': return 'Agents';
@@ -28,17 +22,6 @@ export const Header: React.FC<HeaderProps> = ({ activeTab, agents, onSettingsCli
     }
   };
 
-  const getDescription = () => {
-    switch (activeTab) {
-      case 'agents': return 'Manage your AI coding agents';
-      case 'worktrees': return 'Isolated Git workspaces';
-      case 'skills': return 'Reusable AI capabilities';
-      case 'automations': return 'Scheduled tasks and workflows';
-      case 'settings': return 'Configure your preferences';
-      default: return '';
-    }
-  };
-
   const handleMinimize = () => {
     window.electronAPI.window.minimize();
   };
@@ -52,34 +35,37 @@ export const Header: React.FC<HeaderProps> = ({ activeTab, agents, onSettingsCli
   };
 
   return (
-    <header className="h-16 border-b border-[var(--color-border)] bg-[var(--color-bg-elevated)] flex items-center justify-between px-6" data-testid="app-header">
-      <div className="flex items-center gap-6">
+    <header 
+      className="h-12 border-b border-[var(--border-subtle)] bg-[var(--bg-surface)] flex items-center justify-between px-5"
+      data-testid="app-header"
+    >
+      <div className="flex items-center gap-4">
         <div>
-          <h1 className="text-xl font-semibold tracking-tight text-[var(--color-text-primary)]" data-testid="page-title">
+          <h1 
+            className="text-[18px] font-medium text-[var(--text-primary)] tracking-tight"
+            data-testid="page-title"
+            style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300 }}
+          >
             {getTitle()}
           </h1>
-          <p className="text-xs text-[var(--color-text-tertiary)]">
-            {getDescription()}
-          </p>
         </div>
         
         {activeTab === 'agents' && runningAgents > 0 && (
-          <div className="flex items-center gap-2 px-3 py-1.5 bg-green-50 text-green-700 rounded-full text-xs font-medium" data-testid="running-agents-badge">
+          <div className="flex items-center gap-2 px-3 py-1 bg-[rgba(60,200,120,0.1)] border border-[rgba(60,200,120,0.2)] rounded-full text-[11px] font-medium text-[var(--success)]">
             <span className="relative flex h-2 w-2">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--success)] opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-[var(--success)]"></span>
             </span>
             {runningAgents} running
           </div>
         )}
 
-        {/* Search */}
         <div className="relative hidden md:block">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--text-muted)]" />
           <input
             type="text"
             placeholder="Search..."
-            className="pl-9 pr-4 py-2 bg-neutral-100 border-0 rounded-lg text-sm w-64 focus:ring-2 focus:ring-neutral-200 transition-all"
+            className="pl-8 pr-3 py-1.5 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-sm)] text-[12px] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] w-56 focus:outline-none focus:border-[var(--teal-500)] transition-colors"
             data-testid="search-input"
           />
         </div>
@@ -88,26 +74,26 @@ export const Header: React.FC<HeaderProps> = ({ activeTab, agents, onSettingsCli
       <div className="flex items-center gap-1">
         <button
           onClick={handleMinimize}
-          className="p-2 hover:bg-neutral-100 rounded-lg text-neutral-500 hover:text-neutral-900 transition-colors"
+          className="p-2 hover:bg-[var(--bg-hover)] rounded-[var(--radius-sm)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
           data-testid="window-minimize"
         >
-          <Minus className="w-4 h-4" />
+          <Minus className="w-3.5 h-3.5" />
         </button>
         <button
           onClick={handleMaximize}
-          className="p-2 hover:bg-neutral-100 rounded-lg text-neutral-500 hover:text-neutral-900 transition-colors"
+          className="p-2 hover:bg-[var(--bg-hover)] rounded-[var(--radius-sm)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
           data-testid="window-maximize"
         >
-          <Square className="w-4 h-4" />
+          <Square className="w-3.5 h-3.5" />
         </button>
         <button
           onClick={handleClose}
-          className="p-2 hover:bg-red-50 hover:text-red-600 rounded-lg text-neutral-500 transition-colors"
+          className="p-2 hover:bg-[rgba(232,90,106,0.1)] hover:text-[var(--error)] rounded-[var(--radius-sm)] text-[var(--text-muted)] transition-colors"
           data-testid="window-close"
         >
-          <X className="w-4 h-4" />
+          <X className="w-3.5 h-3.5" />
         </button>
       </div>
     </header>
   );
-};
+};