Update frontend/src/components/AgentPanel.tsx

frontend/src/components/AgentPanel.tsx

@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
+import { FaRobot, FaSpinner, FaCheckCircle } from 'react-icons/fa';
 
 const AgentPanel: React.FC<{ projectPath: string }> = ({ projectPath }) => {
   const [prompt, setPrompt] = useState('');
   const [output, setOutput] = useState('');
   const [running, setRunning] = useState(false);
+  const [done, setDone] = useState(false);
 
   const run = async () => {
     setRunning(true);
+    setDone(false);
     setOutput('');
     try {
       const resp = await fetch('/api/agent/run', {
@@ -28,6 +31,7 @@ const AgentPanel: React.FC<{ projectPath: string }> = ({ projectPath }) => {
           } catch (e) {}
         }
       }
+      setDone(true);
     } catch (e) {
       setOutput('Error: ' + e);
     }
@@ -35,19 +39,34 @@ const AgentPanel: React.FC<{ projectPath: string }> = ({ projectPath }) => {
   };
 
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <div style={{ padding: 8, borderBottom: '1px solid #333' }}>
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)' }}>
+      <div style={{ padding: 12, borderBottom: '1px solid var(--border)' }}>
+        <div style={{ marginBottom: 8, fontWeight: 600, fontSize: 13 }}><FaRobot /> AI Agent</div>
         <textarea
-          style={{ width: '100%', height: 60, background: '#2d2d2d', color: 'white' }}
+          style={{ width: '100%', height: 60, background: 'var(--bg-tertiary)', color: 'var(--text-primary)', border: '1px solid var(--border)', borderRadius: 6, padding: 8, resize: 'vertical' }}
           value={prompt}
           onChange={e => setPrompt(e.target.value)}
-          placeholder="E.g., Create a REST API in Python..."
+          placeholder="E.g., Create a REST API with CRUD endpoints..."
         />
-        <button onClick={run} disabled={running} style={{ marginTop: 4, background: '#007acc', padding: '4px 12px', borderRadius: 4 }}>
-          {running ? 'Running...' : 'Execute Agent'}
+        <button onClick={run} disabled={running} style={{
+          marginTop: 8,
+          background: running ? 'var(--border)' : 'var(--accent)',
+          color: 'white',
+          padding: '6px 16px',
+          borderRadius: 6,
+          fontWeight: 600,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 6
+        }}>
+          {running ? <><FaSpinner className="spin" /> Running...</> : <><FaRobot /> Execute Agent</>}
         </button>
       </div>
-      <div style={{ flex: 1, overflowY: 'auto', padding: 10, fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>{output}</div>
+      <div style={{ flex: 1, overflowY: 'auto', padding: 12, fontFamily: 'monospace', whiteSpace: 'pre-wrap', background: 'var(--bg-secondary)', borderRadius: '0 0 6px 6px' }}>
+        {done && <div style={{ color: 'var(--success)', marginBottom: 8 }}><FaCheckCircle /> Task completed</div>}
+        {output || (running ? 'Working...' : 'Output will appear here')}
+      </div>
+      <style>{`.spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
     </div>
   );
 };