codex-linux 1.0.0 → 1.0.2

package/src/renderer/components/SettingsPanel.tsx

@@ -61,22 +61,23 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
 
   return (
     <div className="h-full flex flex-col">
-      <div className="p-4 border-b border-border">
+      <div className="p-4 border-b border-[var(--border-subtle)]">
         <div className="flex items-center gap-2 mb-4">
-          <SettingsIcon className="w-5 h-5" />
-          <h2 className="text-lg font-semibold">Settings</h2>
+          <SettingsIcon className="w-5 h-5 text-[var(--teal-400)]" />
+          <h2 
+            className="text-[18px] font-medium text-[var(--text-primary)]"
+            style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300 }}
+          >
+            Settings
+          </h2>
         </div>
         
-        <div className="flex gap-2">
+        <div className="tabs">
           {tabs.map(tab => (
             <button
               key={tab.id}
               onClick={() => setActiveTab(tab.id)}
-              className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-                activeTab === tab.id
-                  ? 'bg-primary text-primary-foreground'
-                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-              }`}
+              className={`tab ${activeTab === tab.id ? 'active' : ''}`}
             >
               {tab.label}
             </button>
@@ -88,87 +89,87 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
         {activeTab === 'general' && (
           <div className="max-w-2xl space-y-6">
             <section>
-              <h3 className="text-lg font-medium mb-4">General Settings</h3>
+              <h3 className="text-[14px] font-medium mb-4 text-[var(--text-primary)]">General Settings</h3>
               
               <div className="space-y-4">
-                <div className="flex items-center justify-between">
+                <div className="flex items-center justify-between p-3 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]">
                   <div>
-                    <label className="block font-medium">Auto Save</label>
-                    <p className="text-sm text-muted-foreground">Automatically save changes</p>
+                    <label className="block text-[13px] font-medium text-[var(--text-primary)]">Auto Save</label>
+                    <p className="text-[11px] text-[var(--text-muted)]">Automatically save changes</p>
                   </div>
                   <input
                     type="checkbox"
                     checked={localSettings.autoSave}
                     onChange={e => setLocalSettings({ ...localSettings, autoSave: e.target.checked })}
-                    className="w-5 h-5"
+                    className="w-5 h-5 accent-[var(--teal-500)]"
                   />
                 </div>
 
-                <div className="flex items-center justify-between">
+                <div className="flex items-center justify-between p-3 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]">
                   <div>
-                    <label className="block font-medium">Max Parallel Agents</label>
-                    <p className="text-sm text-muted-foreground">Maximum number of agents running simultaneously</p>
+                    <label className="block text-[13px] font-medium text-[var(--text-primary)]">Max Parallel Agents</label>
+                    <p className="text-[11px] text-[var(--text-muted)]">Maximum number of agents running simultaneously</p>
                   </div>
                   <input
                     type="number"
                     value={localSettings.maxParallelAgents}
                     onChange={e => setLocalSettings({ ...localSettings, maxParallelAgents: parseInt(e.target.value) })}
-                    className="w-20 px-3 py-2 bg-background border border-input rounded-md"
+                    className="w-20 px-3 py-2 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] text-[13px] text-[var(--text-primary)]"
                     min={1}
                     max={10}
                   />
                 </div>
 
-                <div className="flex items-center justify-between">
+                <div className="flex items-center justify-between p-3 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]">
                   <div>
-                    <label className="block font-medium">Show Notifications</label>
-                    <p className="text-sm text-muted-foreground">Display desktop notifications for agent events</p>
+                    <label className="block text-[13px] font-medium text-[var(--text-primary)]">Show Notifications</label>
+                    <p className="text-[11px] text-[var(--text-muted)]">Display desktop notifications for agent events</p>
                   </div>
                   <input
                     type="checkbox"
                     checked={localSettings.showNotifications}
                     onChange={e => setLocalSettings({ ...localSettings, showNotifications: e.target.checked })}
-                    className="w-5 h-5"
+                    className="w-5 h-5 accent-[var(--teal-500)]"
                   />
                 </div>
 
-                <div className="flex items-center justify-between">
+                <div className="flex items-center justify-between p-3 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]">
                   <div>
-                    <label className="block font-medium">Confirm Destructive Actions</label>
-                    <p className="text-sm text-muted-foreground">Show confirmation dialogs before deleting agents or worktrees</p>
+                    <label className="block text-[13px] font-medium text-[var(--text-primary)]">Confirm Destructive Actions</label>
+                    <p className="text-[11px] text-[var(--text-muted)]">Show confirmation dialogs before deleting agents or worktrees</p>
                   </div>
                   <input
                     type="checkbox"
                     checked={localSettings.confirmDestructiveActions}
                     onChange={e => setLocalSettings({ ...localSettings, confirmDestructiveActions: e.target.checked })}
-                    className="w-5 h-5"
+                    className="w-5 h-5 accent-[var(--teal-500)]"
                   />
                 </div>
               </div>
             </section>
 
             <section>
-              <h3 className="text-lg font-medium mb-4">Git Configuration</h3>
+              <h3 className="text-[14px] font-medium mb-4 text-[var(--text-primary)]">Git Configuration</h3>
               
               <div className="space-y-4">
-                <div>
-                  <label className="block font-medium mb-1">Author Name</label>
+                <div className="p-4 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]">
+                  <label className="block text-[12px] font-medium mb-1 text-[var(--text-secondary)]">Author Name</label>
                   <input
                     type="text"
                     value={localSettings.gitAuthorName}
                     onChange={e => setLocalSettings({ ...localSettings, gitAuthorName: e.target.value })}
-                    className="w-full px-3 py-2 bg-background border border-input rounded-md"
+                    className="w-full px-3 py-2 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] text-[13px] text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] focus:outline-none focus:border-[var(--teal-500)]"
                     placeholder="Your Name"
                   />
                 </div>
 
-                <div>
-                  <label className="block font-medium mb-1">Author Email</label>
+                <div className="p-4 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]">
+                  <label className="block text-[12px] font-medium mb-1 text-[var(--text-secondary)]">Author Email</label>
                   <input
                     type="email"
                     value={localSettings.gitAuthorEmail}
                     onChange={e => setLocalSettings({ ...localSettings, gitAuthorEmail: e.target.value })}
-                    className="w-full px-3 py-2 bg-background border border-input rounded-md"
+                    className="w-full px-3 py-2 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] text-[13px] text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] focus:outline-none focus:border-[var(--teal-500)]"
                     placeholder="your@email.com"
                   />
                 </div>
@@ -180,21 +181,21 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
         {activeTab === 'providers' && (
           <div className="max-w-4xl space-y-6">
             {freeModelsProvider && (
-              <section className="p-4 border-2 border-green-500/30 bg-green-500/5 rounded-lg">
+              <section className="p-4 border-2 border-[rgba(60,200,120,0.3)] bg-[rgba(60,200,120,0.05)] rounded-[var(--radius-lg)]">
                 <div className="flex items-center gap-2 mb-4">
-                  <Sparkles className="w-5 h-5 text-green-500" />
-                  <h3 className="text-lg font-medium">Free AI Models</h3>
-                  <span className="px-2 py-0.5 text-xs font-medium bg-green-500/20 text-green-500 rounded-full">
+                  <Sparkles className="w-5 h-5 text-[var(--success)]" />
+                  <h3 className="text-[15px] font-medium text-[var(--text-primary)]">Free AI Models</h3>
+                  <span className="badge badge-success">
                     No API Key Required
                   </span>
                 </div>
-                <p className="text-sm text-muted-foreground mb-4">
+                <p className="text-[12px] text-[var(--text-muted)] mb-4">
                   Start using AI immediately with free models from OpenRouter, Groq, Google AI Studio, and Cerebras. 
                   No API key required for OpenRouter free tier - just select a model and start chatting!
                 </p>
                 
                 <div className="mb-4">
-                  <label className="block text-sm font-medium mb-2">Select Model</label>
+                  <label className="block text-[12px] font-medium mb-2 text-[var(--text-secondary)]">Select Model</label>
                   <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 max-h-96 overflow-y-auto">
                     {freeModelsProvider.models
                       .sort((a, b) => {
@@ -207,59 +208,54 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
                       <button
                         key={model.id}
                         onClick={() => handleModelSelect(model.id, freeModelsProvider.id)}
-                        className={`p-3 text-left rounded-lg border transition-all ${
+                        className={`p-3 text-left rounded-[var(--radius-md)] border transition-all ${
                           selectedModel === model.id
-                            ? 'border-green-500 bg-green-500/10'
-                            : 'border-border hover:border-green-500/50 hover:bg-muted'
+                            ? 'border-[var(--teal-500)] bg-[rgba(0,200,168,0.08)]'
+                            : 'border-[var(--border-subtle)] hover:border-[var(--teal-500)] hover:bg-[var(--bg-hover)]'
                         }`}
                       >
                         <div className="flex items-center justify-between">
-                          <span className="font-medium text-sm truncate">{model.name}</span>
+                          <span className="font-medium text-[12px] truncate text-[var(--text-primary)]">{model.name}</span>
                           {selectedModel === model.id && (
-                            <Check className="w-4 h-4 text-green-500 flex-shrink-0" />
+                            <Check className="w-4 h-4 text-[var(--teal-400)] flex-shrink-0" />
                           )}
                         </div>
                         <div className="flex items-center gap-1 mt-1">
-                          <span className="text-xs px-1.5 py-0.5 rounded bg-blue-500/20 text-blue-400">
+                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-[rgba(104,144,244,0.1)] text-[var(--info)]">
                             {model.backend || 'openrouter'}
                           </span>
                           {model.supportsVision && (
-                            <span className="text-xs px-1.5 py-0.5 rounded bg-purple-500/20 text-purple-400">
+                            <span className="text-[10px] px-1.5 py-0.5 rounded bg-[rgba(136,88,219,0.1)] text-purple-400">
                               vision
                             </span>
                           )}
                           {model.contextWindow >= 100000 && (
-                            <span className="text-xs px-1.5 py-0.5 rounded bg-orange-500/20 text-orange-400">
+                            <span className="text-[10px] px-1.5 py-0.5 rounded bg-[rgba(230,185,74,0.1)] text-[var(--warning)]">
                               {model.contextWindow >= 1000000 ? '1M ctx' : `${model.contextWindow / 1000}k ctx`}
                             </span>
                           )}
                         </div>
-                        <p className="text-xs text-muted-foreground mt-1 truncate">{model.description}</p>
+                        <p className="text-[10px] text-[var(--text-muted)] mt-1 truncate">{model.description}</p>
                       </button>
                     ))}
                   </div>
                 </div>
-
-                <div className="text-xs text-muted-foreground">
-                  <strong>Tip:</strong> OpenRouter models work without an API key. For Groq, Google AI Studio, or Cerebras models, 
-                  you may need to add your free API key below.
-                </div>
               </section>
             )}
 
             <section>
-              <h3 className="text-lg font-medium mb-4">Premium Providers</h3>
-              <p className="text-sm text-muted-foreground mb-4">
+              <h3 className="text-[15px] font-medium mb-4 text-[var(--text-primary)]">Premium Providers</h3>
+              <p className="text-[12px] text-[var(--text-muted)] mb-4">
                 Add your API keys for premium models with higher limits and advanced features.
               </p>
               
               <div className="space-y-4">
                 {paidProviders.map(provider => (
-                  <div key={provider.id} className="p-4 bg-muted rounded-lg">
+                  <div key={provider.id} className="p-4 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-lg)]">
                     <div className="flex items-center justify-between mb-3">
                       <div>
-                        <h4 className="font-medium">{provider.name}</h4>
-                        <p className="text-sm text-muted-foreground">{provider.description}</p>
+                        <h4 className="font-medium text-[13px] text-[var(--text-primary)]">{provider.name}</h4>
+                        <p className="text-[11px] text-[var(--text-muted)]">{provider.description}</p>
                       </div>
                       <div className="flex items-center gap-2">
                         <input
@@ -267,21 +263,21 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
                           name="activeProvider"
                           checked={localSettings.defaultProvider === provider.id}
                           onChange={() => setLocalSettings({ ...localSettings, defaultProvider: provider.id })}
-                          className="w-4 h-4"
+                          className="w-4 h-4 accent-[var(--teal-500)]"
                         />
-                        <span className="text-sm">Default</span>
+                        <span className="text-[12px] text-[var(--text-secondary)]">Default</span>
                       </div>
                     </div>
 
                     <div>
-                      <label className="block text-sm font-medium mb-1">API Key</label>
+                      <label className="block text-[12px] font-medium mb-1 text-[var(--text-secondary)]">API Key</label>
                       <div className="flex gap-2">
                         <div className="relative flex-1">
                           <input
                             type={showApiKeys[provider.id] ? 'text' : 'password'}
                             defaultValue={provider.config.apiKey}
                             placeholder={`Enter ${provider.name} API key`}
-                            className="w-full px-3 py-2 bg-background border border-input rounded-md pr-10"
+                            className="w-full px-3 py-2 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] text-[13px] text-[var(--text-primary)] pr-10 focus:outline-none focus:border-[var(--teal-500)]"
                             onBlur={e => handleProviderConfig(provider.id, e.target.value)}
                           />
                           <button
@@ -289,14 +285,14 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
                               ...showApiKeys,
                               [provider.id]: !showApiKeys[provider.id]
                             })}
-                            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                            className="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
                           >
                             {showApiKeys[provider.id] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                           </button>
                         </div>
                         <button
                           onClick={() => handleProviderConfig(provider.id, provider.config.apiKey || '')}
-                          className="px-3 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+                          className="px-3 py-2 bg-[var(--teal-500)] text-[var(--bg-void)] rounded-[var(--radius-md)] hover:bg-[var(--teal-400)] text-[13px] font-medium transition-colors"
                         >
                           Test
                         </button>
@@ -305,12 +301,12 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
 
                     {provider.models.length > 0 && (
                       <div className="mt-3">
-                        <label className="block text-sm font-medium mb-1">Available Models</label>
+                        <label className="block text-[12px] font-medium mb-1 text-[var(--text-secondary)]">Available Models</label>
                         <div className="flex flex-wrap gap-2">
                           {provider.models.map(model => (
                             <span
                               key={model.id}
-                              className="px-2 py-1 bg-background rounded text-xs"
+                              className="px-2 py-1 bg-[var(--bg-hover)] rounded text-[11px] text-[var(--text-secondary)]"
                             >
                               {model.name}
                             </span>
@@ -323,18 +319,16 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
               </div>
             </section>
 
-            <section className="p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
+            <section className="p-4 bg-[rgba(104,144,244,0.1)] border border-[rgba(104,144,244,0.3)] rounded-[var(--radius-lg)]">
               <div className="flex items-center gap-2 mb-2">
-                <Zap className="w-4 h-4 text-blue-400" />
-                <h4 className="font-medium text-blue-400">Get Free API Keys</h4>
+                <Zap className="w-4 h-4 text-[var(--info)]" />
+                <h4 className="font-medium text-[var(--info)]">Get Free API Keys</h4>
               </div>
-              <div className="text-sm text-muted-foreground space-y-1">
-                <p><strong>OpenRouter:</strong> <a href="https://openrouter.ai" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">openrouter.ai</a> - No key needed for free models</p>
-                <p><strong>Ollama:</strong> <a href="https://ollama.com" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">ollama.com</a> - Local models, no API key needed</p>
-                <p><strong>NVIDIA NIM:</strong> <a href="https://build.nvidia.com" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">build.nvidia.com</a> - Kimi K2.5, DeepSeek R1, Llama (40 req/min free)</p>
-                <p><strong>Groq:</strong> <a href="https://console.groq.com" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">console.groq.com</a> - Fast inference, generous free tier</p>
-                <p><strong>Google AI Studio:</strong> <a href="https://aistudio.google.com" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">aistudio.google.com</a> - Gemini models free tier</p>
-                <p><strong>Cerebras:</strong> <a href="https://cloud.cerebras.ai" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">cloud.cerebras.ai</a> - Ultra-fast inference</p>
+              <div className="text-[12px] text-[var(--text-muted)] space-y-1">
+                <p><strong>OpenRouter:</strong> <a href="https://openrouter.ai" target="_blank" rel="noopener noreferrer" className="text-[var(--teal-400)] hover:underline">openrouter.ai</a> - No key needed for free models</p>
+                <p><strong>Ollama:</strong> <a href="https://ollama.com" target="_blank" rel="noopener noreferrer" className="text-[var(--teal-400)] hover:underline">ollama.com</a> - Local models, no API key needed</p>
+                <p><strong>NVIDIA NIM:</strong> <a href="https://build.nvidia.com" target="_blank" rel="noopener noreferrer" className="text-[var(--teal-400)] hover:underline">build.nvidia.com</a> - Kimi K2.5, DeepSeek R1, Llama (40 req/min free)</p>
+                <p><strong>Groq:</strong> <a href="https://console.groq.com" target="_blank" rel="noopener noreferrer" className="text-[var(--teal-400)] hover:underline">console.groq.com</a> - Fast inference, generous free tier</p>
               </div>
             </section>
           </div>
@@ -343,42 +337,41 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
         {activeTab === 'appearance' && (
           <div className="max-w-2xl space-y-6">
             <section>
-              <h3 className="text-lg font-medium mb-4">Appearance</h3>
+              <h3 className="text-[14px] font-medium mb-4 text-[var(--text-primary)]">Appearance</h3>
               
               <div className="space-y-4">
-                <div>
-                  <label className="block font-medium mb-1">Theme</label>
+                <div className="p-4 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]">
+                  <label className="block text-[12px] font-medium mb-1 text-[var(--text-secondary)]">Theme</label>
                   <select
                     value={localSettings.theme}
                     onChange={e => setLocalSettings({ ...localSettings, theme: e.target.value as any })}
-                    className="w-full px-3 py-2 bg-background border border-input rounded-md"
+                    className="w-full px-3 py-2 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] text-[13px] text-[var(--text-primary)]"
                   >
-                    <option value="light">Light</option>
-                    <option value="dark">Dark</option>
+                    <option value="dark">Dark (Abyss Teal)</option>
                     <option value="system">System</option>
                   </select>
                 </div>
 
-                <div>
-                  <label className="block font-medium mb-1">Font Size</label>
+                <div className="p-4 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]">
+                  <label className="block text-[12px] font-medium mb-1 text-[var(--text-secondary)]">Font Size</label>
                   <input
                     type="range"
                     value={localSettings.fontSize}
                     onChange={e => setLocalSettings({ ...localSettings, fontSize: parseInt(e.target.value) })}
-                    className="w-full"
+                    className="w-full accent-[var(--teal-500)]"
                     min={10}
                     max={20}
                   />
-                  <span className="text-sm text-muted-foreground">{localSettings.fontSize}px</span>
+                  <span className="text-[12px] text-[var(--text-muted)]">{localSettings.fontSize}px</span>
                 </div>
 
-                <div>
-                  <label className="block font-medium mb-1">Font Family</label>
+                <div className="p-4 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]">
+                  <label className="block text-[12px] font-medium mb-1 text-[var(--text-secondary)]">Font Family</label>
                   <input
                     type="text"
                     value={localSettings.fontFamily}
                     onChange={e => setLocalSettings({ ...localSettings, fontFamily: e.target.value })}
-                    className="w-full px-3 py-2 bg-background border border-input rounded-md"
+                    className="w-full px-3 py-2 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] text-[13px] text-[var(--text-primary)] focus:outline-none focus:border-[var(--teal-500)]"
                   />
                 </div>
               </div>
@@ -389,12 +382,12 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
         {activeTab === 'shortcuts' && (
           <div className="max-w-2xl">
             <section>
-              <h3 className="text-lg font-medium mb-4">Keyboard Shortcuts</h3>
+              <h3 className="text-[14px] font-medium mb-4 text-[var(--text-primary)]">Keyboard Shortcuts</h3>
               
-              <div className="space-y-3">
+              <div className="space-y-2">
                 {Object.entries(localSettings.shortcuts).map(([action, shortcut]) => (
-                  <div key={action} className="flex items-center justify-between py-2 border-b border-border last:border-0">
-                    <span className="text-sm capitalize">{action.replace(/:/g, ' ')}</span>
+                  <div key={action} className="flex items-center justify-between py-2 px-3 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]">
+                    <span className="text-[12px] capitalize text-[var(--text-secondary)]">{action.replace(/:/g, ' ')}</span>
                     <input
                       type="text"
                       value={shortcut}
@@ -402,7 +395,7 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
                         ...localSettings,
                         shortcuts: { ...localSettings.shortcuts, [action]: e.target.value }
                       })}
-                      className="px-3 py-1 bg-background border border-input rounded-md text-sm font-mono w-32"
+                      className="px-3 py-1 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-sm)] text-[11px] font-[var(--font-mono)] text-[var(--teal-300)] w-32 focus:outline-none focus:border-[var(--teal-500)]"
                     />
                   </div>
                 ))}
@@ -412,10 +405,10 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
         )}
       </div>
 
-      <div className="p-4 border-t border-border flex justify-end">
+      <div className="p-4 border-t border-[var(--border-subtle)] flex justify-end bg-[var(--bg-surface)]">
         <button
           onClick={handleSave}
-          className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+          className="flex items-center gap-2 px-4 py-2 bg-[var(--teal-500)] text-[var(--bg-void)] rounded-[var(--radius-sm)] hover:bg-[var(--teal-400)] text-[13px] font-medium transition-colors"
         >
           <Save className="w-4 h-4" />
           Save Settings

package/src/renderer/components/Sidebar.tsx

@@ -5,11 +5,10 @@ import {
   Wrench, 
   Clock, 
   Settings,
-  ChevronRight,
   Code2,
-  ScrollText
+  ScrollText,
+  MessageSquare
 } from 'lucide-react';
-import { cn } from '@/lib/utils';
 
 interface SidebarProps {
   activeTab: string;
@@ -17,32 +16,31 @@ interface SidebarProps {
 }
 
 const menuItems = [
-  { id: 'agents', label: 'Agents', icon: Bot, description: 'Manage AI agents' },
-  { id: 'code', label: 'Code', icon: Code2, description: 'Code editor' },
-  { id: 'worktrees', label: 'Worktrees', icon: GitBranch, description: 'Git workspaces' },
-  { id: 'skills', label: 'Skills', icon: Wrench, description: 'Reusable prompts' },
-  { id: 'automations', label: 'Automations', icon: Clock, description: 'Scheduled tasks' },
-  { id: 'audit', label: 'Audit', icon: ScrollText, description: 'Activity log' },
+  { id: 'chat', label: 'Chat', icon: MessageSquare },
+  { id: 'agents', label: 'Agents', icon: Bot },
+  { id: 'code', label: 'Code', icon: Code2 },
+  { id: 'worktrees', label: 'Worktrees', icon: GitBranch },
+  { id: 'skills', label: 'Skills', icon: Wrench },
+  { id: 'automations', label: 'Automations', icon: Clock },
+  { id: 'audit', label: 'Audit', icon: ScrollText },
 ];
 
 export const Sidebar: React.FC<SidebarProps> = ({ activeTab, onTabChange }) => {
   return (
-    <aside className="w-64 bg-[var(--color-bg-secondary)] border-r border-[var(--color-border)] flex flex-col" data-testid="sidebar">
-      {/* Logo */}
-      <div className="p-6 border-b border-[var(--color-border)]">
-        <div className="flex items-center gap-3">
-          <div className="w-8 h-8 bg-neutral-900 rounded-lg flex items-center justify-center">
-            <Bot className="w-5 h-5 text-white" />
-          </div>
-          <div>
-            <span className="font-semibold text-lg tracking-tight">Codex</span>
-            <span className="text-xs text-neutral-400 block">Linux</span>
+    <aside 
+      className="w-[200px] bg-[var(--bg-surface)] border-r border-[var(--border-subtle)] flex flex-col"
+      data-testid="sidebar"
+    >
+      <div className="p-4 border-b border-[var(--border-faint)]">
+        <div className="flex items-center gap-2">
+          <div className="w-[22px] h-[22px] bg-[var(--teal-500)] rounded-[6px] flex items-center justify-center">
+            <span className="text-[12px] font-bold text-[var(--bg-void)] font-[var(--font-body)]">C</span>
           </div>
+          <span className="font-medium text-[14px] text-[var(--text-primary)]">Codex</span>
         </div>
       </div>
 
-      {/* Navigation */}
-      <nav className="flex-1 p-3 space-y-1 overflow-y-auto" data-testid="sidebar-nav">
+      <nav className="flex-1 p-3 space-y-0.5 overflow-y-auto" data-testid="sidebar-nav">
         {menuItems.map((item) => {
           const Icon = item.icon;
           const isActive = activeTab === item.id;
@@ -51,50 +49,34 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeTab, onTabChange }) => {
             <button
               key={item.id}
               onClick={() => onTabChange(item.id)}
-              className={cn(
-                'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group',
-                isActive 
-                  ? 'bg-neutral-900 text-white shadow-sm' 
-                  : 'text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900'
-              )}
+              className={`w-full flex items-center gap-2 px-2.5 py-2 rounded-[var(--radius-sm)] text-[12px] transition-all duration-[150ms] ${
+                isActive
+                  ? 'bg-[rgba(0,200,168,0.08)] text-[var(--teal-300)] border-l-[2px] border-[var(--teal-500)] pl-[9px]'
+                  : 'text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]'
+              }`}
               data-testid={`nav-${item.id}`}
             >
-              <Icon className={cn(
-                'w-4 h-4 transition-transform duration-200',
-                isActive ? '' : 'group-hover:scale-110'
-              )} />
-              <div className="flex-1 text-left">
-                <span className="block">{item.label}</span>
-                {!isActive && (
-                  <span className="text-xs text-neutral-400 font-normal opacity-0 group-hover:opacity-100 transition-opacity">
-                    {item.description}
-                  </span>
-                )}
-              </div>
-              {isActive && (
-                <ChevronRight className="w-4 h-4 opacity-50" />
-              )}
+              <Icon className="w-3.5 h-3.5 opacity-50" />
+              <span>{item.label}</span>
             </button>
           );
         })}
       </nav>
 
-      {/* Settings */}
-      <div className="p-3 border-t border-[var(--color-border)]">
+      <div className="p-3 border-t border-[var(--border-faint)]">
         <button
           onClick={() => onTabChange('settings')}
-          className={cn(
-            'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200',
+          className={`w-full flex items-center gap-2 px-2.5 py-2 rounded-[var(--radius-sm)] text-[12px] transition-all duration-[150ms] ${
             activeTab === 'settings'
-              ? 'bg-neutral-900 text-white' 
-              : 'text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900'
-          )}
+              ? 'bg-[rgba(0,200,168,0.08)] text-[var(--teal-300)] border-l-[2px] border-[var(--teal-500)] pl-[9px]'
+              : 'text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]'
+          }`}
           data-testid="nav-settings"
         >
-          <Settings className="w-4 h-4" />
+          <Settings className="w-3.5 h-3.5 opacity-50" />
           <span>Settings</span>
         </button>
       </div>
     </aside>
   );
-};
+};