codex-linux 1.0.0 → 1.0.2

package/src/renderer/components/SkillsPanel.tsx

@@ -38,14 +38,13 @@ export const SkillsPanel: React.FC<SkillsPanelProps> = ({
 
   return (
     <div className="h-full flex">
-      {/* Skills List */}
-      <div className="w-80 border-r border-border bg-card flex flex-col">
-        <div className="p-4 border-b border-border">
+      <div className="w-80 border-r border-[var(--border-subtle)] bg-[var(--bg-surface)] flex flex-col">
+        <div className="p-4 border-b border-[var(--border-faint)]">
           <div className="flex items-center justify-between mb-3">
-            <h2 className="font-semibold">Skills Library</h2>
+            <h2 className="font-medium text-[13px] text-[var(--text-primary)]">Skills Library</h2>
             <button
               onClick={() => setShowCreateModal(true)}
-              className="p-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+              className="p-2 bg-[var(--teal-500)] text-[var(--bg-void)] rounded-[var(--radius-sm)] hover:bg-[var(--teal-400)] transition-colors"
             >
               <Plus className="w-4 h-4" />
             </button>
@@ -55,31 +54,31 @@ export const SkillsPanel: React.FC<SkillsPanelProps> = ({
             placeholder="Search skills..."
             value={searchQuery}
             onChange={e => setSearchQuery(e.target.value)}
-            className="w-full px-3 py-2 bg-background border border-input rounded-md text-sm"
+            className="w-full px-3 py-2 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] text-[12px] text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] focus:outline-none focus:border-[var(--teal-500)]"
           />
         </div>
 
-        <div className="flex-1 overflow-auto p-2 space-y-2">
+        <div className="flex-1 overflow-auto p-2 space-y-1">
           {filteredSkills.map(skill => (
             <div
               key={skill.id}
               onClick={() => setSelectedSkill(skill)}
-              className={`p-3 rounded-lg cursor-pointer transition-colors ${
+              className={`p-3 rounded-[var(--radius-md)] cursor-pointer transition-all ${
                 selectedSkill?.id === skill.id
-                  ? 'bg-primary/10 border border-primary/30'
-                  : 'hover:bg-muted border border-transparent'
+                  ? 'bg-[rgba(0,200,168,0.08)] border border-[var(--border-accent)]'
+                  : 'hover:bg-[var(--bg-hover)] border border-transparent'
               }`}
             >
               <div className="flex items-center gap-2">
-                <Wrench className="w-4 h-4 text-muted-foreground" />
-                <span className="font-medium text-sm">{skill.name}</span>
+                <Wrench className="w-4 h-4 text-[var(--text-muted)]" />
+                <span className="font-medium text-[13px] text-[var(--text-primary)]">{skill.name}</span>
               </div>
-              <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
+              <p className="mt-1 text-[11px] text-[var(--text-muted)] line-clamp-2">
                 {skill.description}
               </p>
               <div className="flex flex-wrap gap-1 mt-2">
                 {skill.tags.slice(0, 3).map(tag => (
-                  <span key={tag} className="px-1.5 py-0.5 bg-muted rounded text-xs">
+                  <span key={tag} className="badge badge-neutral text-[10px]">
                     {tag}
                   </span>
                 ))}
@@ -88,36 +87,35 @@ export const SkillsPanel: React.FC<SkillsPanelProps> = ({
           ))}
 
           {filteredSkills.length === 0 && (
-            <div className="text-center py-8 text-muted-foreground">
-              <Wrench className="w-12 h-12 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No skills found</p>
+            <div className="text-center py-8 text-[var(--text-muted)]">
+              <Wrench className="w-12 h-12 mx-auto mb-2 opacity-30" />
+              <p className="text-[13px]">No skills found</p>
             </div>
           )}
         </div>
       </div>
 
-      {/* Skill Detail */}
       <div className="flex-1 flex flex-col">
         {selectedSkill ? (
           <>
-            <div className="p-4 border-b border-border flex items-start justify-between">
+            <div className="p-4 border-b border-[var(--border-subtle)] flex items-start justify-between">
               <div>
-                <h2 className="text-lg font-semibold">{selectedSkill.name}</h2>
-                <p className="text-sm text-muted-foreground">{selectedSkill.description}</p>
+                <h2 className="text-[16px] font-medium text-[var(--text-primary)]">{selectedSkill.name}</h2>
+                <p className="text-[12px] text-[var(--text-muted)]">{selectedSkill.description}</p>
                 <div className="flex flex-wrap gap-2 mt-2">
                   {selectedSkill.tags.map(tag => (
-                    <span key={tag} className="px-2 py-0.5 bg-muted rounded-full text-xs">
-                      <Tag className="w-3 h-3 inline mr-1" />
+                    <span key={tag} className="badge badge-teal">
+                      <Tag className="w-3 h-3" />
                       {tag}
                     </span>
                   ))}
                 </div>
               </div>
               <div className="flex gap-2">
-                <button className="p-2 hover:bg-muted rounded-md">
+                <button className="p-2 hover:bg-[var(--bg-hover)] rounded-[var(--radius-sm)] text-[var(--text-muted)] transition-colors">
                   <Edit2 className="w-4 h-4" />
                 </button>
-                <button className="p-2 text-destructive hover:bg-destructive/10 rounded-md">
+                <button className="p-2 text-[var(--error)] hover:bg-[rgba(232,90,106,0.1)] rounded-[var(--radius-sm)] transition-colors">
                   <Trash2 className="w-4 h-4" />
                 </button>
               </div>
@@ -126,22 +124,22 @@ export const SkillsPanel: React.FC<SkillsPanelProps> = ({
             <div className="flex-1 overflow-auto p-4">
               <div className="space-y-4">
                 <div>
-                  <h3 className="text-sm font-medium mb-2">Files</h3>
+                  <h3 className="text-[12px] font-medium mb-2 text-[var(--text-secondary)]">Files</h3>
                   <div className="space-y-2">
                     {selectedSkill.files.map(file => (
                       <div
                         key={file.path}
-                        className="p-3 bg-muted rounded-md"
+                        className="p-3 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]"
                       >
                         <div className="flex items-center gap-2 mb-2">
-                          <FileText className="w-4 h-4 text-muted-foreground" />
-                          <span className="text-sm font-medium">{file.path}</span>
-                          <span className="text-xs text-muted-foreground uppercase">
+                          <FileText className="w-4 h-4 text-[var(--text-muted)]" />
+                          <span className="text-[12px] font-medium text-[var(--text-primary)]">{file.path}</span>
+                          <span className="text-[10px] text-[var(--text-muted)] uppercase">
                             {file.type}
                           </span>
                         </div>
-                        <pre className="text-xs bg-background p-2 rounded overflow-x-auto">
-                          <code>{file.content.slice(0, 500)}{file.content.length > 500 ? '...' : ''}</code>
+                        <pre className="text-[11px] bg-[var(--bg-void)] p-2 rounded-[var(--radius-sm)] overflow-x-auto border border-[var(--border-faint)]">
+                          <code className="text-[var(--teal-300)]">{file.content.slice(0, 500)}{file.content.length > 500 ? '...' : ''}</code>
                         </pre>
                       </div>
                     ))}
@@ -149,24 +147,24 @@ export const SkillsPanel: React.FC<SkillsPanelProps> = ({
                 </div>
 
                 <div>
-                  <h3 className="text-sm font-medium mb-2">Configuration</h3>
-                  <div className="bg-muted p-3 rounded-md text-sm">
+                  <h3 className="text-[12px] font-medium mb-2 text-[var(--text-secondary)]">Configuration</h3>
+                  <div className="bg-[var(--bg-card)] border border-[var(--border-subtle)] p-3 rounded-[var(--radius-md)] text-[12px]">
                     <div className="grid grid-cols-2 gap-4">
                       <div>
-                        <span className="text-muted-foreground">Entry Point:</span>
-                        <span className="ml-2">{selectedSkill.config.entryPoint}</span>
+                        <span className="text-[var(--text-muted)]">Entry Point:</span>
+                        <span className="ml-2 text-[var(--text-primary)]">{selectedSkill.config.entryPoint}</span>
                       </div>
                       <div>
-                        <span className="text-muted-foreground">Version:</span>
-                        <span className="ml-2">{selectedSkill.version}</span>
+                        <span className="text-[var(--text-muted)]">Version:</span>
+                        <span className="ml-2 text-[var(--text-primary)]">{selectedSkill.version}</span>
                       </div>
                       <div>
-                        <span className="text-muted-foreground">Author:</span>
-                        <span className="ml-2">{selectedSkill.author}</span>
+                        <span className="text-[var(--text-muted)]">Author:</span>
+                        <span className="ml-2 text-[var(--text-primary)]">{selectedSkill.author}</span>
                       </div>
                       <div>
-                        <span className="text-muted-foreground">Dependencies:</span>
-                        <span className="ml-2">{selectedSkill.config.dependencies.length || 'None'}</span>
+                        <span className="text-[var(--text-muted)]">Dependencies:</span>
+                        <span className="ml-2 text-[var(--text-primary)]">{selectedSkill.config.dependencies.length || 'None'}</span>
                       </div>
                     </div>
                   </div>
@@ -175,48 +173,48 @@ export const SkillsPanel: React.FC<SkillsPanelProps> = ({
             </div>
           </>
         ) : (
-          <div className="flex-1 flex items-center justify-center text-muted-foreground">
+          <div className="flex-1 flex items-center justify-center text-[var(--text-muted)]">
             <div className="text-center">
               <Wrench className="w-16 h-16 mx-auto mb-4 opacity-30" />
-              <p>Select a skill to view details</p>
+              <p className="text-[14px]">Select a skill to view details</p>
             </div>
           </div>
         )}
       </div>
 
       {showCreateModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-card border border-border rounded-lg p-6 w-[600px]">
-            <h2 className="text-lg font-semibold mb-4">Create New Skill</h2>
+        <div className="fixed inset-0 bg-[rgba(3,7,9,0.8)] flex items-center justify-center z-50">
+          <div className="bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-lg)] p-6 w-[600px]">
+            <h2 className="text-[16px] font-medium text-[var(--text-primary)] mb-4">Create New Skill</h2>
             
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-medium mb-1">Name</label>
+                <label className="block text-[11px] font-medium mb-1 text-[var(--text-secondary)]">Name</label>
                 <input
                   type="text"
                   value={newSkill.name}
                   onChange={e => setNewSkill({ ...newSkill, name: 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="My Custom Skill"
                 />
               </div>
 
               <div>
-                <label className="block text-sm font-medium mb-1">Description</label>
+                <label className="block text-[11px] font-medium mb-1 text-[var(--text-secondary)]">Description</label>
                 <textarea
                   value={newSkill.description}
                   onChange={e => setNewSkill({ ...newSkill, description: e.target.value })}
-                  className="w-full px-3 py-2 bg-background border border-input rounded-md h-20 resize-none"
+                  className="w-full px-3 py-2 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] h-20 resize-none text-[13px] text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] focus:outline-none focus:border-[var(--teal-500)]"
                   placeholder="What does this skill do?"
                 />
               </div>
 
               <div>
-                <label className="block text-sm font-medium mb-1">Content</label>
+                <label className="block text-[11px] font-medium mb-1 text-[var(--text-secondary)]">Content</label>
                 <textarea
                   value={newSkill.content}
                   onChange={e => setNewSkill({ ...newSkill, content: e.target.value })}
-                  className="w-full px-3 py-2 bg-background border border-input rounded-md h-40 resize-none font-mono text-sm"
+                  className="w-full px-3 py-2 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] h-40 resize-none font-[var(--font-mono)] text-[12px] text-[var(--teal-300)] placeholder:text-[var(--text-disabled)] focus:outline-none focus:border-[var(--teal-500)]"
                   placeholder="Enter skill instructions..."
                 />
               </div>
@@ -225,14 +223,14 @@ export const SkillsPanel: React.FC<SkillsPanelProps> = ({
             <div className="flex justify-end gap-2 mt-6">
               <button
                 onClick={() => setShowCreateModal(false)}
-                className="px-4 py-2 text-muted-foreground"
+                className="px-4 py-2 text-[var(--text-muted)] hover:text-[var(--text-primary)] text-[13px] transition-colors"
               >
                 Cancel
               </button>
               <button
                 onClick={handleCreate}
                 disabled={!newSkill.name || !newSkill.content}
-                className="px-4 py-2 bg-primary text-primary-foreground rounded-md disabled:opacity-50"
+                className="px-4 py-2 bg-[var(--teal-500)] text-[var(--bg-void)] rounded-[var(--radius-sm)] disabled:opacity-50 text-[13px] font-medium transition-colors hover:bg-[var(--teal-400)]"
               >
                 Create Skill
               </button>
@@ -242,4 +240,4 @@ export const SkillsPanel: React.FC<SkillsPanelProps> = ({
       )}
     </div>
   );
-};
+};

package/src/renderer/components/WelcomeChat.tsx

@@ -0,0 +1,199 @@
+import React, { useState, useRef } from 'react';
+import { Agent, AIProvider, Skill } from '../../shared/types';
+import { Send, Sparkles, Code2, GitBranch, Wrench, Clock, Bot, X } from 'lucide-react';
+
+interface WelcomeChatProps {
+  agents: Agent[];
+  providers: AIProvider[];
+  skills: Skill[];
+  onCreateAgent: (config: any) => Promise<Agent>;
+}
+
+const FREE_MODELS = [
+  { id: 'meta-llama/llama-3.3-70b-instruct:free', name: 'Llama 3.3 70B', backend: 'openrouter' },
+  { id: 'deepseek/deepseek-r1-0528:free', name: 'DeepSeek R1', backend: 'openrouter' },
+  { id: 'mistralai/mistral-small-3.1-24b-instruct:free', name: 'Mistral Small 3.1', backend: 'openrouter' },
+];
+
+export const WelcomeChat: React.FC<WelcomeChatProps> = ({
+  agents,
+  providers,
+  skills,
+  onCreateAgent
+}) => {
+  const [input, setInput] = useState('');
+  const [activeTab, setActiveTab] = useState('Cowork');
+  const [selectedModel] = useState(FREE_MODELS[0].id);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const suggestions = [
+    { icon: Code2, text: 'Optimize my workflow' },
+    { icon: GitBranch, text: 'Organize my files' },
+    { icon: Wrench, text: 'Find insights in data' },
+    { icon: Clock, text: 'Build an automation' },
+  ];
+
+  const files = [
+    { name: 'Project Constitution v4', lines: 491, type: 'TEXT' },
+    { name: 'Task Breakdown', lines: 566, type: 'TEXT' },
+    { name: 'Implementation Plan', lines: 390, type: 'TEXT' },
+  ];
+
+  const handleSend = async () => {
+    if (!input.trim()) return;
+    
+    try {
+      const newAgent = await onCreateAgent({
+        name: 'Quick Chat',
+        projectPath: process.cwd(),
+        providerId: 'free',
+        model: selectedModel,
+        skills: []
+      });
+      
+      await window.electronAPI.agent.sendMessage(newAgent.id, input);
+      setInput('');
+    } catch (error) {
+      console.error('Failed to send message:', error);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="h-full flex relative">
+      <div 
+        className="absolute inset-0 pointer-events-none z-0"
+        style={{
+          backgroundImage: 'radial-gradient(circle, rgba(0,200,168,0.04) 1px, transparent 1px)',
+          backgroundSize: '22px 22px'
+        }}
+      />
+      
+      <div className="absolute w-[600px] h-[400px] -top-[120px] -right-[100px] pointer-events-none z-0"
+        style={{
+          background: 'radial-gradient(ellipse, rgba(0,200,168,0.09) 0%, transparent 65%)'
+        }}
+      />
+      <div className="absolute w-[300px] h-[300px] -bottom-[80px] -left-[60px] pointer-events-none z-0"
+        style={{
+          background: 'radial-gradient(circle, rgba(0,150,130,0.06) 0%, transparent 70%)'
+        }}
+      />
+
+      <div className="flex-1 flex flex-col z-10">
+        <div className="h-12 border-b border-[var(--border-subtle)] flex items-center px-5 gap-1">
+          <div className="flex gap-0.5 bg-[var(--bg-elevated)] p-[3px] rounded-lg">
+            {['Chat', 'Cowork', 'Code'].map(tab => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                className={`px-4 py-1.5 rounded-md text-xs font-medium transition-all ${
+                  activeTab === tab
+                    ? 'bg-[var(--bg-card)] text-[var(--text-primary)] shadow-[0_1px_4px_rgba(0,0,0,0.4)]'
+                    : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
+                }`}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex-1 p-7 flex flex-col gap-5 overflow-hidden">
+          <h1 
+            className="text-[22px] leading-tight tracking-[-0.01em] text-[var(--text-primary)]"
+            style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300 }}
+          >
+            Let's knock something<br />off your list
+          </h1>
+
+          <div className="grid grid-cols-2 gap-2.5 flex-1">
+            {suggestions.map((sugg, idx) => {
+              const Icon = sugg.icon;
+              return (
+                <button
+                  key={idx}
+                  onClick={() => setInput(sugg.text)}
+                  className="flex items-center gap-2.5 px-4 py-3.5 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] text-left hover:border-[var(--border-accent)] transition-colors group"
+                >
+                  <div className="w-7 h-7 rounded-md bg-[rgba(0,200,168,0.08)] border border-[rgba(0,200,168,0.12)] flex items-center justify-center flex-shrink-0">
+                    <Icon className="w-3.5 h-3.5 text-[var(--teal-400)]" />
+                  </div>
+                  <span className="text-[12px] text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] transition-colors">
+                    {sugg.text}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="bg-[var(--bg-card)] border border-[var(--border-default)] rounded-[var(--radius-lg)] px-3.5 py-3 flex gap-2.5 items-center">
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={e => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="How can I help you today?"
+              className="flex-1 bg-transparent border-none outline-none text-[12px] text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] resize-none leading-normal"
+              rows={1}
+            />
+            <button
+              onClick={handleSend}
+              disabled={!input.trim()}
+              className="w-7 h-7 rounded-[7px] bg-[var(--teal-500)] flex items-center justify-center disabled:opacity-50 hover:bg-[var(--teal-400)] transition-colors flex-shrink-0"
+            >
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="var(--bg-void)">
+                <path d="M1 6l9-4-3.5 4L10 10 1 6z"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-60 bg-[var(--bg-surface)] border-l border-[var(--border-subtle)] p-4 flex flex-col gap-3 z-10 flex-shrink-0">
+        <div>
+          <div className="text-[10px] font-medium tracking-[0.12em] uppercase text-[var(--text-muted)] mb-1">
+            Memory
+          </div>
+          <div className="bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] px-3 py-2.5 text-[11px] text-[var(--text-secondary)] leading-relaxed">
+            Purpose & context
+            <small className="block text-[var(--text-muted)] text-[10px] mt-0.5">
+              Only you · Updated 14 days ago
+            </small>
+          </div>
+        </div>
+
+        <div>
+          <div className="text-[10px] font-medium tracking-[0.12em] uppercase text-[var(--text-muted)] mb-1">
+            Files
+          </div>
+          <div className="flex flex-col gap-2">
+            {files.map((file, idx) => (
+              <div key={idx} className="bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] px-3 py-2.5 text-[11px] text-[var(--text-secondary)] leading-relaxed">
+                {file.name}
+                <small className="block text-[var(--text-muted)] text-[10px] mt-0.5">
+                  {file.lines} lines · {file.type}
+                </small>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-auto">
+          <div className="h-1 bg-[var(--bg-hover)] rounded overflow-hidden">
+            <div className="h-full rounded bg-gradient-to-r from-[var(--teal-700)] to-[var(--teal-400)]" style={{ width: '2%' }} />
+          </div>
+          <div className="text-[9px] text-[var(--text-muted)] mt-1.5">
+            2% of project capacity
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/WorktreePanel.tsx

@@ -29,14 +29,19 @@ export const WorktreePanel: React.FC<WorktreePanelProps> = ({
 
   return (
     <div className="h-full flex flex-col">
-      <div className="p-4 border-b border-border flex items-center justify-between">
+      <div className="p-4 border-b border-[var(--border-subtle)] flex items-center justify-between">
         <div>
-          <h2 className="text-lg font-semibold">Worktrees</h2>
-          <p className="text-sm text-muted-foreground">Isolated workspaces for agents</p>
+          <h2 
+            className="text-[18px] font-medium text-[var(--text-primary)]"
+            style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300 }}
+          >
+            Worktrees
+          </h2>
+          <p className="text-[12px] text-[var(--text-muted)]">Isolated workspaces for agents</p>
         </div>
         <button
           onClick={() => setShowCreateModal(true)}
-          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"
         >
           <Plus className="w-4 h-4" />
           New Worktree
@@ -48,21 +53,21 @@ export const WorktreePanel: React.FC<WorktreePanelProps> = ({
           {worktrees.map(worktree => (
             <div
               key={worktree.name}
-              className="p-4 bg-card border border-border rounded-lg"
+              className="p-4 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-lg)] hover:border-[var(--border-accent)] hover:translate-y-[-2px] transition-all"
             >
               <div className="flex items-start justify-between mb-3">
                 <div className="flex items-center gap-2">
-                  <GitBranch className="w-5 h-5 text-muted-foreground" />
-                  <span className="font-medium">{worktree.name}</span>
+                  <GitBranch className="w-5 h-5 text-[var(--text-muted)]" />
+                  <span className="font-medium text-[13px] text-[var(--text-primary)]">{worktree.name}</span>
                 </div>
                 {worktree.isMain && (
-                  <span className="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full">
+                  <span className="badge badge-teal text-[10px]">
                     Main
                   </span>
                 )}
               </div>
 
-              <div className="space-y-2 text-sm text-muted-foreground">
+              <div className="space-y-2 text-[12px] text-[var(--text-muted)]">
                 <div className="flex items-center gap-2">
                   <Folder className="w-4 h-4" />
                   <span className="truncate">{worktree.path}</span>
@@ -71,18 +76,18 @@ export const WorktreePanel: React.FC<WorktreePanelProps> = ({
                   <GitBranch className="w-4 h-4" />
                   <span>{worktree.branch}</span>
                 </div>
-                <div className="text-xs font-mono truncate">
+                <div className="text-[11px] font-[var(--font-mono)] text-[var(--teal-300)] truncate">
                   {worktree.commit?.slice(0, 8)}
                 </div>
               </div>
 
               {!worktree.isMain && (
-                <div className="flex gap-2 mt-4 pt-4 border-t border-border">
-                  <button className="flex-1 px-3 py-1.5 text-sm bg-muted rounded-md hover:bg-muted/80">
+                <div className="flex gap-2 mt-4 pt-4 border-t border-[var(--border-faint)]">
+                  <button className="flex-1 px-3 py-1.5 text-[12px] bg-[var(--bg-hover)] rounded-[var(--radius-sm)] hover:bg-[var(--bg-active)] text-[var(--text-secondary)] transition-colors">
                     <GitMerge className="w-4 h-4 inline mr-1" />
                     Merge
                   </button>
-                  <button className="p-1.5 text-destructive hover:bg-destructive/10 rounded-md">
+                  <button className="p-1.5 text-[var(--error)] hover:bg-[rgba(232,90,106,0.1)] rounded-[var(--radius-sm)] transition-colors">
                     <Trash2 className="w-4 h-4" />
                   </button>
                 </div>
@@ -91,29 +96,29 @@ export const WorktreePanel: React.FC<WorktreePanelProps> = ({
           ))}
 
           {worktrees.length === 0 && (
-            <div className="col-span-full flex flex-col items-center justify-center py-12 text-muted-foreground">
+            <div className="col-span-full flex flex-col items-center justify-center py-12 text-[var(--text-muted)]">
               <GitBranch className="w-16 h-16 mb-4 opacity-30" />
-              <p className="text-lg font-medium">No worktrees yet</p>
-              <p className="text-sm">Create a worktree to isolate agent changes</p>
+              <p className="text-[15px] font-medium text-[var(--text-primary)]">No worktrees yet</p>
+              <p className="text-[12px]">Create a worktree to isolate agent changes</p>
             </div>
           )}
         </div>
       </div>
 
       {showCreateModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-card border border-border rounded-lg p-6 w-[500px]">
-            <h2 className="text-lg font-semibold mb-4">Create New Worktree</h2>
+        <div className="fixed inset-0 bg-[rgba(3,7,9,0.8)] flex items-center justify-center z-50">
+          <div className="bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-lg)] p-6 w-[500px]">
+            <h2 className="text-[16px] font-medium text-[var(--text-primary)] mb-4">Create New Worktree</h2>
             
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-medium mb-1">Repository Path</label>
+                <label className="block text-[11px] font-medium mb-1 text-[var(--text-secondary)]">Repository Path</label>
                 <div className="flex gap-2">
                   <input
                     type="text"
                     value={newWorktreeConfig.repoPath}
                     onChange={e => setNewWorktreeConfig({ ...newWorktreeConfig, repoPath: e.target.value })}
-                    className="flex-1 px-3 py-2 bg-background border border-input rounded-md"
+                    className="flex-1 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="/path/to/repo"
                   />
                   <button
@@ -121,7 +126,7 @@ export const WorktreePanel: React.FC<WorktreePanelProps> = ({
                       const path = await window.electronAPI.dialog.selectFolder();
                       if (path) setNewWorktreeConfig({ ...newWorktreeConfig, repoPath: path });
                     }}
-                    className="px-3 py-2 bg-muted rounded-md"
+                    className="px-3 py-2 bg-[var(--bg-hover)] rounded-[var(--radius-md)] hover:bg-[var(--bg-active)] text-[13px] text-[var(--text-secondary)] transition-colors"
                   >
                     Browse
                   </button>
@@ -129,12 +134,12 @@ export const WorktreePanel: React.FC<WorktreePanelProps> = ({
               </div>
 
               <div>
-                <label className="block text-sm font-medium mb-1">Worktree Name</label>
+                <label className="block text-[11px] font-medium mb-1 text-[var(--text-secondary)]">Worktree Name</label>
                 <input
                   type="text"
                   value={newWorktreeConfig.name}
                   onChange={e => setNewWorktreeConfig({ ...newWorktreeConfig, name: 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="feature-branch"
                 />
               </div>
@@ -143,14 +148,14 @@ export const WorktreePanel: React.FC<WorktreePanelProps> = ({
             <div className="flex justify-end gap-2 mt-6">
               <button
                 onClick={() => setShowCreateModal(false)}
-                className="px-4 py-2 text-muted-foreground"
+                className="px-4 py-2 text-[var(--text-muted)] hover:text-[var(--text-primary)] text-[13px] transition-colors"
               >
                 Cancel
               </button>
               <button
                 onClick={handleCreate}
                 disabled={!newWorktreeConfig.repoPath || !newWorktreeConfig.name}
-                className="px-4 py-2 bg-primary text-primary-foreground rounded-md disabled:opacity-50"
+                className="px-4 py-2 bg-[var(--teal-500)] text-[var(--bg-void)] rounded-[var(--radius-sm)] disabled:opacity-50 text-[13px] font-medium transition-colors hover:bg-[var(--teal-400)]"
               >
                 Create Worktree
               </button>
@@ -160,4 +165,4 @@ export const WorktreePanel: React.FC<WorktreePanelProps> = ({
       )}
     </div>
   );
-};
+};