codex-linux 1.0.1 → 1.0.3

package/src/renderer/components/AgentPanel.tsx

@@ -3,12 +3,8 @@ import { Agent, AIProvider, Skill, CodeChange, ChangeStatus } from '../../shared
 import { 
   Bot, 
   Plus, 
-  Play, 
-  Pause, 
-  Square, 
-  Trash2, 
   MessageSquare,
-  MoreVertical
+  Trash2
 } from 'lucide-react';
 import DiffViewer from './DiffViewer';
 
@@ -41,10 +37,12 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
   const [newAgentConfig, setNewAgentConfig] = useState({
     name: '',
     projectPath: '',
-    providerId: providers[0]?.id || '',
+    providerId: '',
     model: '',
     skills: [] as string[]
   });
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
 
   const selectedAgentChanges = useMemo(() => {
     if (!selectedAgent) return [];
@@ -88,6 +86,16 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
     void refreshQueueHistory(selectedAgent.id);
   }, [selectedAgent?.id]);
 
+  useEffect(() => {
+    if (providers.length > 0 && !newAgentConfig.providerId) {
+      setNewAgentConfig(prev => ({
+        ...prev,
+        providerId: providers[0].id,
+        model: providers[0].models[0]?.id || ''
+      }));
+    }
+  }, [providers]);
+
   useEffect(() => {
     const onTaskStarted = (event: any, payload: { agentId: string }) => {
       setInFlightByAgent(prev => ({ ...prev, [payload.agentId]: true }));
@@ -164,7 +172,6 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
           setInFlightByAgent(prev => ({ ...prev, [agentId]: false }));
         } else {
           await window.electronAPI.agent.executeTask(agentId, claimed.content);
-          // keep inFlight until taskCompleted/taskFailed
         }
       } catch (error) {
         console.error('Failed to dispatch queued item:', error);
@@ -173,7 +180,6 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
           try {
             await window.electronAPI.queue.complete(agentId, claimed.id, 'failed', error instanceof Error ? error.message : String(error));
           } catch {
-            // ignore
           }
           setClaimedByAgent(prev => ({ ...prev, [agentId]: null }));
         }
@@ -201,6 +207,22 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
   }, [selectedAgent?.id]);
 
   const handleCreateAgent = async () => {
+    if (!newAgentConfig.name.trim()) {
+      setCreateError('Agent name is required');
+      return;
+    }
+    if (!newAgentConfig.projectPath.trim()) {
+      setCreateError('Project path is required');
+      return;
+    }
+    if (!newAgentConfig.model) {
+      setCreateError('Please select a model');
+      return;
+    }
+    
+    setCreateError(null);
+    setIsCreating(true);
+    
     try {
       await onCreateAgent(newAgentConfig);
       setShowCreateModal(false);
@@ -208,11 +230,14 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
         name: '',
         projectPath: '',
         providerId: providers[0]?.id || '',
-        model: '',
+        model: providers[0]?.models[0]?.id || '',
         skills: []
       });
     } catch (error) {
       console.error('Failed to create agent:', error);
+      setCreateError(error instanceof Error ? error.message : 'Failed to create agent');
+    } finally {
+      setIsCreating(false);
     }
   };
 
@@ -224,14 +249,6 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
     }
   };
 
-  const handleExecuteTask = async (agentId: string, task: string) => {
-    try {
-      await window.electronAPI.agent.executeTask(agentId, task);
-    } catch (error) {
-      console.error('Failed to execute task:', error);
-    }
-  };
-
   const handleApproveChange = async (changeId: string) => {
     if (!selectedAgent) return;
     try {
@@ -294,49 +311,48 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
   const getStatusIcon = (status: string) => {
     switch (status) {
       case 'running':
-        return <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />;
+        return <div className="w-2 h-2 bg-[var(--success)] rounded-full animate-pulse" />;
       case 'paused':
-        return <div className="w-2 h-2 bg-yellow-500 rounded-full" />;
+        return <div className="w-2 h-2 bg-[var(--warning)] rounded-full" />;
       case 'error':
-        return <div className="w-2 h-2 bg-red-500 rounded-full" />;
+        return <div className="w-2 h-2 bg-[var(--error)] rounded-full" />;
       default:
-        return <div className="w-2 h-2 bg-gray-400 rounded-full" />;
+        return <div className="w-2 h-2 bg-[var(--text-muted)] rounded-full" />;
     }
   };
 
   return (
     <div className="h-full flex">
-      {/* Agents List */}
-      <div className="w-80 border-r border-border bg-card flex flex-col">
-        <div className="p-4 border-b border-border flex items-center justify-between">
-          <h2 className="font-semibold">Active Agents</h2>
+      <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)] flex items-center justify-between">
+          <h2 className="font-medium text-[13px] text-[var(--text-primary)]">Active Agents</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>
         </div>
 
-        <div className="flex-1 overflow-auto p-2 space-y-2">
+        <div className="flex-1 overflow-auto p-2 space-y-1">
           {agents.map(agent => (
             <div
               key={agent.id}
               onClick={() => setSelectedAgent(agent)}
-              className={`p-3 rounded-lg cursor-pointer transition-colors ${
+              className={`p-3 rounded-[var(--radius-md)] cursor-pointer transition-all ${
                 selectedAgent?.id === agent.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-start justify-between">
                 <div className="flex items-center gap-2">
-                  <Bot className="w-4 h-4 text-muted-foreground" />
-                  <span className="font-medium text-sm">{agent.name}</span>
+                  <Bot className="w-4 h-4 text-[var(--text-muted)]" />
+                  <span className="font-medium text-[13px] text-[var(--text-primary)]">{agent.name}</span>
                 </div>
                 {getStatusIcon(agent.status)}
               </div>
-              <div className="mt-2 text-xs text-muted-foreground">
+              <div className="mt-2 text-[11px] text-[var(--text-muted)]">
                 <div className="truncate">{agent.projectPath}</div>
                 <div className="mt-1">{agent.model}</div>
               </div>
@@ -344,37 +360,36 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
           ))}
 
           {agents.length === 0 && (
-            <div className="text-center py-8 text-muted-foreground">
-              <Bot className="w-12 h-12 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No agents yet</p>
-              <p className="text-xs mt-1">Create your first agent to get started</p>
+            <div className="text-center py-8 text-[var(--text-muted)]">
+              <Bot className="w-12 h-12 mx-auto mb-2 opacity-30" />
+              <p className="text-[13px]">No agents yet</p>
+              <p className="text-[11px] mt-1">Create your first agent to get started</p>
             </div>
           )}
         </div>
       </div>
 
-      {/* Agent Detail View */}
       <div className="flex-1 flex flex-col">
         {selectedAgent ? (
           <>
-            <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">{selectedAgent.name}</h2>
-                <p className="text-sm text-muted-foreground">
-                  {selectedAgent.projectPath} • {selectedAgent.model}
+                <h2 className="text-[16px] font-medium text-[var(--text-primary)]">{selectedAgent.name}</h2>
+                <p className="text-[12px] text-[var(--text-muted)]">
+                  {selectedAgent.projectPath} · {selectedAgent.model}
                 </p>
               </div>
               <div className="flex items-center gap-2">
                 <button
                   onClick={() => handleSendMessage(selectedAgent.id, 'Hello!')}
-                  className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+                  className="px-3 py-1.5 text-[12px] bg-[var(--teal-500)] text-[var(--bg-void)] rounded-[var(--radius-sm)] hover:bg-[var(--teal-400)] transition-colors flex items-center gap-1"
                 >
-                  <MessageSquare className="w-4 h-4 inline mr-1" />
+                  <MessageSquare className="w-3.5 h-3.5" />
                   Chat
                 </button>
                 <button
                   onClick={() => onDeleteAgent(selectedAgent.id)}
-                  className="p-2 text-destructive hover:bg-destructive/10 rounded-md"
+                  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>
@@ -384,15 +399,15 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
             <div className="flex-1 overflow-auto p-4">
               <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                 <div className="space-y-4">
-                  <div className="bg-card border border-border rounded-lg p-3">
+                  <div className="bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-lg)] p-4">
                     <div className="flex items-center justify-between">
                       <div>
-                        <h3 className="text-sm font-medium">Queue</h3>
-                        <p className="text-xs text-muted-foreground">Stack work while the agent is busy</p>
+                        <h3 className="text-[13px] font-medium text-[var(--text-primary)]">Queue</h3>
+                        <p className="text-[11px] text-[var(--text-muted)]">Stack work while the agent is busy</p>
                       </div>
-                      <span className="text-xs text-muted-foreground">
+                      <span className="text-[11px] text-[var(--text-muted)]">
                         {queueItems.length} queued
-                        {inFlightByAgent[selectedAgent.id] ? ' • running' : ''}
+                        {inFlightByAgent[selectedAgent.id] ? ' · running' : ''}
                       </span>
                     </div>
 
@@ -400,7 +415,7 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
                       <select
                         value={newQueueType}
                         onChange={e => setNewQueueType(e.target.value as any)}
-                        className="px-2 py-2 bg-background border border-input rounded-md text-sm"
+                        className="px-2 py-2 bg-[var(--bg-elevated)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] text-[12px] text-[var(--text-primary)]"
                       >
                         <option value="task">Task</option>
                         <option value="message">Message</option>
@@ -409,7 +424,7 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
                         value={newQueueContent}
                         onChange={e => setNewQueueContent(e.target.value)}
                         placeholder={newQueueType === 'task' ? 'Describe the task...' : 'Type a message...'}
-                        className="flex-1 px-3 py-2 bg-background border border-input rounded-md text-sm"
+                        className="flex-1 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)]"
                       />
                       <button
                         onClick={() => {
@@ -428,7 +443,7 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
                             }
                           })();
                         }}
-                        className="px-3 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 text-sm"
+                        className="px-3 py-2 bg-[var(--teal-500)] text-[var(--bg-void)] rounded-[var(--radius-md)] hover:bg-[var(--teal-400)] text-[12px] font-medium transition-colors"
                       >
                         Add
                       </button>
@@ -436,11 +451,11 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
 
                     <div className="mt-3 space-y-2 max-h-40 overflow-auto">
                       {queueItems.map((item, idx) => (
-                        <div key={item.id} className="flex items-center gap-2 p-2 bg-muted rounded-md">
-                          <span className="text-xs px-2 py-0.5 rounded-full bg-background border border-border">
+                        <div key={item.id} className="flex items-center gap-2 p-2 bg-[var(--bg-elevated)] rounded-[var(--radius-md)]">
+                          <span className="text-[10px] px-2 py-0.5 rounded-full bg-[var(--bg-hover)] border border-[var(--border-subtle)] text-[var(--text-secondary)]">
                             {item.type}
                           </span>
-                          <span className="text-sm flex-1 truncate">{item.content}</span>
+                          <span className="text-[12px] flex-1 truncate text-[var(--text-primary)]">{item.content}</span>
                           <button
                             onClick={() => {
                               const agentId = selectedAgent.id;
@@ -449,56 +464,42 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
                                 await refreshQueue(agentId);
                               })();
                             }}
-                            className="text-xs text-destructive hover:underline"
+                            className="text-[11px] text-[var(--error)] hover:underline"
                           >
                             Remove
                           </button>
-                          <button
-                            disabled={idx === 0}
-                            onClick={() => {
-                              const agentId = selectedAgent.id;
-                              (async () => {
-                                await window.electronAPI.queue.moveUp(agentId, item.id);
-                                await refreshQueue(agentId);
-                              })();
-                            }}
-                            className="text-xs text-muted-foreground disabled:opacity-50"
-                          >
-                            Up
-                          </button>
                         </div>
                       ))}
                       {queueItems.length === 0 && (
-                        <div className="text-xs text-muted-foreground">No queued items</div>
+                        <div className="text-[11px] text-[var(--text-muted)]">No queued items</div>
                       )}
                     </div>
 
-                    {/* Queue History */}
                     <div className="mt-3">
                       <button
                         onClick={() => setShowQueueHistory(!showQueueHistory)}
-                        className="text-xs text-muted-foreground hover:text-foreground"
+                        className="text-[11px] text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
                       >
                         {showQueueHistory ? 'Hide' : 'Show'} history ({queueHistory.length})
                       </button>
                       {showQueueHistory && (
                         <div className="mt-2 space-y-1 max-h-32 overflow-auto">
                           {queueHistory.map(item => (
-                            <div key={item.id} className="flex items-center gap-2 p-2 bg-muted/50 rounded-md text-xs">
+                            <div key={item.id} className="flex items-center gap-2 p-2 bg-[var(--bg-elevated)] rounded-[var(--radius-md)] text-[11px]">
                               <span className={`px-1.5 py-0.5 rounded-full ${
-                                item.status === 'completed' ? 'bg-green-500/10 text-green-500' : 'bg-red-500/10 text-red-500'
+                                item.status === 'completed' ? 'bg-[rgba(60,200,120,0.1)] text-[var(--success)]' : 'bg-[rgba(232,90,106,0.1)] text-[var(--error)]'
                               }`}>
                                 {item.status}
                               </span>
-                              <span className="text-muted-foreground">{item.type}</span>
-                              <span className="flex-1 truncate">{item.content}</span>
+                              <span className="text-[var(--text-muted)]">{item.type}</span>
+                              <span className="flex-1 truncate text-[var(--text-primary)]">{item.content}</span>
                               {item.error && (
-                                <span className="text-red-500 truncate" title={item.error}>⚠️</span>
+                                <span className="text-[var(--error)] truncate" title={item.error}>⚠️</span>
                               )}
                             </div>
                           ))}
                           {queueHistory.length === 0 && (
-                            <div className="text-xs text-muted-foreground">No completed items yet</div>
+                            <div className="text-[11px] text-[var(--text-muted)]">No completed items yet</div>
                           )}
                         </div>
                       )}
@@ -506,13 +507,13 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
                   </div>
 
                   <div>
-                    <h3 className="text-sm font-medium mb-2">Status</h3>
+                    <h3 className="text-[12px] font-medium text-[var(--text-secondary)] mb-2">Status</h3>
                     <div className="flex items-center gap-2">
-                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${
-                        selectedAgent.status === 'running' ? 'bg-green-500/10 text-green-500' :
-                        selectedAgent.status === 'paused' ? 'bg-yellow-500/10 text-yellow-500' :
-                        selectedAgent.status === 'error' ? 'bg-red-500/10 text-red-500' :
-                        'bg-gray-500/10 text-gray-500'
+                      <span className={`px-2 py-1 rounded-full text-[11px] font-medium ${
+                        selectedAgent.status === 'running' ? 'bg-[rgba(60,200,120,0.1)] text-[var(--success)]' :
+                        selectedAgent.status === 'paused' ? 'bg-[rgba(230,185,74,0.1)] text-[var(--warning)]' :
+                        selectedAgent.status === 'error' ? 'bg-[rgba(232,90,106,0.1)] text-[var(--error)]' :
+                        'bg-[var(--bg-hover)] text-[var(--text-muted)]'
                       }`}>
                         {selectedAgent.status}
                       </span>
@@ -520,48 +521,48 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
                   </div>
 
                   <div>
-                    <h3 className="text-sm font-medium mb-2">Skills</h3>
+                    <h3 className="text-[12px] font-medium text-[var(--text-secondary)] mb-2">Skills</h3>
                     <div className="flex flex-wrap gap-2">
                       {selectedAgent.skills.map(skillId => {
                         const skill = skills.find(s => s.id === skillId);
                         return (
                           <span
                             key={skillId}
-                            className="px-2 py-1 bg-muted rounded-md text-xs"
+                            className="px-2 py-1 bg-[var(--bg-hover)] rounded-[var(--radius-sm)] text-[11px] text-[var(--text-secondary)]"
                           >
                             {skill?.name || skillId}
                           </span>
                         );
                       })}
                       {selectedAgent.skills.length === 0 && (
-                        <span className="text-sm text-muted-foreground">No skills applied</span>
+                        <span className="text-[12px] text-[var(--text-muted)]">No skills applied</span>
                       )}
                     </div>
                   </div>
 
                   <div>
-                    <h3 className="text-sm font-medium mb-2">Recent Tasks</h3>
+                    <h3 className="text-[12px] font-medium text-[var(--text-secondary)] mb-2">Recent Tasks</h3>
                     <div className="space-y-2">
                       {selectedAgent.tasks.slice(-5).map(task => (
                         <div
                           key={task.id}
-                          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 justify-between">
-                            <span className="text-sm font-medium">{task.description}</span>
-                            <span className={`text-xs ${
-                              task.status === 'completed' ? 'text-green-500' :
-                              task.status === 'failed' ? 'text-red-500' :
-                              task.status === 'running' ? 'text-blue-500' :
-                              'text-muted-foreground'
+                            <span className="text-[12px] font-medium text-[var(--text-primary)]">{task.description}</span>
+                            <span className={`text-[11px] ${
+                              task.status === 'completed' ? 'text-[var(--success)]' :
+                              task.status === 'failed' ? 'text-[var(--error)]' :
+                              task.status === 'running' ? 'text-[var(--info)]' :
+                              'text-[var(--text-muted)]'
                             }`}>
                               {task.status}
                             </span>
                           </div>
                           {task.status === 'running' && (
-                            <div className="mt-2 h-1 bg-muted-foreground/20 rounded-full overflow-hidden">
+                            <div className="mt-2 h-1 bg-[var(--bg-hover)] rounded-full overflow-hidden">
                               <div
-                                className="h-full bg-primary transition-all"
+                                className="h-full bg-[var(--teal-500)] transition-all"
                                 style={{ width: `${task.progress}%` }}
                               />
                             </div>
@@ -569,17 +570,17 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
                         </div>
                       ))}
                       {selectedAgent.tasks.length === 0 && (
-                        <span className="text-sm text-muted-foreground">No tasks yet</span>
+                        <span className="text-[12px] text-[var(--text-muted)]">No tasks yet</span>
                       )}
                     </div>
                   </div>
                 </div>
 
-                <div className="bg-card border border-border rounded-lg overflow-hidden min-h-[420px]">
-                  <div className="p-3 border-b border-border flex items-center justify-between">
+                <div className="bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-[var(--radius-lg)] overflow-hidden min-h-[420px]">
+                  <div className="p-3 border-b border-[var(--border-subtle)] flex items-center justify-between">
                     <div>
-                      <h3 className="text-sm font-medium">Changes</h3>
-                      <p className="text-xs text-muted-foreground">
+                      <h3 className="text-[13px] font-medium text-[var(--text-primary)]">Changes</h3>
+                      <p className="text-[11px] text-[var(--text-muted)]">
                         Review and apply changes generated by the agent
                       </p>
                     </div>
@@ -606,12 +607,12 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
                           });
                         }
                       }}
-                      className="px-3 py-1.5 text-xs bg-muted hover:bg-muted/80 rounded-md"
+                      className="px-3 py-1.5 text-[11px] bg-[var(--bg-hover)] hover:bg-[var(--bg-active)] rounded-[var(--radius-sm)] text-[var(--text-secondary)] transition-colors"
                     >
                       Undo last apply
                     </button>
                     {changesLoading && (
-                      <span className="text-xs text-muted-foreground">Loading...</span>
+                      <span className="text-[11px] text-[var(--text-muted)]">Loading...</span>
                     )}
                   </div>
 
@@ -628,41 +629,40 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
             </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">
               <Bot className="w-16 h-16 mx-auto mb-4 opacity-30" />
-              <p>Select an agent to view details</p>
+              <p className="text-[14px]">Select an agent to view details</p>
             </div>
           </div>
         )}
       </div>
 
-      {/* Create Agent Modal */}
       {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] max-w-[90vw]">
-            <h2 className="text-lg font-semibold mb-4">Create New Agent</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] max-w-[90vw]">
+            <h2 className="text-[16px] font-medium text-[var(--text-primary)] mb-4">Create New Agent</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 text-[var(--text-secondary)] mb-1">Name</label>
                 <input
                   type="text"
                   value={newAgentConfig.name}
                   onChange={e => setNewAgentConfig({ ...newAgentConfig, 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 Coding Agent"
                 />
               </div>
 
               <div>
-                <label className="block text-sm font-medium mb-1">Project Path</label>
+                <label className="block text-[11px] font-medium text-[var(--text-secondary)] mb-1">Project Path</label>
                 <div className="flex gap-2">
                   <input
                     type="text"
                     value={newAgentConfig.projectPath}
                     onChange={e => setNewAgentConfig({ ...newAgentConfig, projectPath: 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/project"
                   />
                   <button
@@ -670,7 +670,7 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
                       const path = await window.electronAPI.dialog.selectFolder();
                       if (path) setNewAgentConfig({ ...newAgentConfig, projectPath: path });
                     }}
-                    className="px-3 py-2 bg-muted rounded-md hover:bg-muted/80"
+                    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>
@@ -678,7 +678,7 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
               </div>
 
               <div>
-                <label className="block text-sm font-medium mb-1">Provider</label>
+                <label className="block text-[11px] font-medium text-[var(--text-secondary)] mb-1">Provider</label>
                 <select
                   value={newAgentConfig.providerId}
                   onChange={e => {
@@ -689,7 +689,7 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
                       model: provider?.models[0]?.id || ''
                     });
                   }}
-                  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)]"
                 >
                   {providers.map(provider => (
                     <option key={provider.id} value={provider.id}>{provider.name}</option>
@@ -698,11 +698,11 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
               </div>
 
               <div>
-                <label className="block text-sm font-medium mb-1">Model</label>
+                <label className="block text-[11px] font-medium text-[var(--text-secondary)] mb-1">Model</label>
                 <select
                   value={newAgentConfig.model}
                   onChange={e => setNewAgentConfig({ ...newAgentConfig, model: 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)]"
                 >
                   {providers
                     .find(p => p.id === newAgentConfig.providerId)
@@ -713,7 +713,7 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
               </div>
 
               <div>
-                <label className="block text-sm font-medium mb-1">Skills</label>
+                <label className="block text-[11px] font-medium text-[var(--text-secondary)] mb-1">Skills</label>
                 <div className="flex flex-wrap gap-2">
                   {skills.map(skill => (
                     <button
@@ -724,10 +724,10 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
                           : [...newAgentConfig.skills, skill.id];
                         setNewAgentConfig({ ...newAgentConfig, skills: newSkills });
                       }}
-                      className={`px-3 py-1.5 rounded-md text-sm transition-colors ${
+                      className={`px-3 py-1.5 rounded-[var(--radius-sm)] text-[12px] transition-colors ${
                         newAgentConfig.skills.includes(skill.id)
-                          ? 'bg-primary text-primary-foreground'
-                          : 'bg-muted hover:bg-muted/80'
+                          ? 'bg-[var(--teal-500)] text-[var(--bg-void)]'
+                          : 'bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:bg-[var(--bg-active)]'
                       }`}
                     >
                       {skill.name}
@@ -737,19 +737,35 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
               </div>
             </div>
 
+            {createError && (
+              <div className="mt-4 p-3 bg-[rgba(232,90,106,0.1)] border border-[rgba(232,90,106,0.3)] rounded-[var(--radius-md)]">
+                <p className="text-[12px] text-[var(--error)]">{createError}</p>
+              </div>
+            )}
+
             <div className="flex justify-end gap-2 mt-6">
               <button
-                onClick={() => setShowCreateModal(false)}
-                className="px-4 py-2 text-muted-foreground hover:text-foreground"
+                onClick={() => {
+                  setShowCreateModal(false);
+                  setCreateError(null);
+                }}
+                className="px-4 py-2 text-[var(--text-muted)] hover:text-[var(--text-primary)] text-[13px] transition-colors"
               >
                 Cancel
               </button>
               <button
                 onClick={handleCreateAgent}
-                disabled={!newAgentConfig.name || !newAgentConfig.projectPath}
-                className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50"
+                disabled={isCreating || !newAgentConfig.name || !newAgentConfig.projectPath}
+                className="px-4 py-2 bg-[var(--teal-500)] text-[var(--bg-void)] rounded-[var(--radius-sm)] hover:bg-[var(--teal-400)] disabled:opacity-50 text-[13px] font-medium transition-colors flex items-center gap-2"
               >
-                Create Agent
+                {isCreating ? (
+                  <>
+                    <div className="w-4 h-4 border-2 border-[var(--bg-void)] border-t-transparent rounded-full animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  'Create Agent'
+                )}
               </button>
             </div>
           </div>
@@ -757,4 +773,4 @@ export const AgentPanel: React.FC<AgentPanelProps> = ({
       )}
     </div>
   );
-};
+};