Create frontend/src/components/GitPanel.tsx

frontend/src/components/GitPanel.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { FaCodeBranch, FaHistory, FaPen } from 'react-icons/fa';
+
+const GitPanel: React.FC<{ projectPath: string }> = ({ projectPath }) => {
+  const [branches, setBranches] = useState<string[]>([]);
+  const [logs, setLogs] = useState<any[]>([]);
+  const [commitMsg, setCommitMsg] = useState('');
+  const [generating, setGenerating] = useState(false);
+
+  const fetchBranches = async () => {
+    try {
+      const res = await axios.post('/api/git', { action: 'branch', project_path: projectPath });
+      setBranches(res.data.branches || []);
+    } catch (e) {}
+  };
+
+  const fetchLog = async () => {
+    try {
+      const res = await axios.post('/api/git', { action: 'log', project_path: projectPath });
+      setLogs(res.data.log || []);
+    } catch (e) {}
+  };
+
+  const generateMessage = async () => {
+    setGenerating(true);
+    try {
+      // Use the chat API to generate a commit message from the diff
+      const diffRes = await axios.post('/api/git', { action: 'diff', project_path: projectPath }); // we need a diff action
+      // For simplicity, just call the chat endpoint
+      const resp = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          model: 'groq-llama-3.1-8b-instant',
+          messages: [{ role: 'user', content: 'Generate a concise git commit message for the following changes:\n' + (diffRes.data.diff || '') }],
+          project_path: projectPath,
+        }),
+      });
+      const reader = resp.body?.getReader();
+      let msg = '';
+      while (reader) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        msg += new TextDecoder().decode(value);
+        // parse the stream (simplified)
+      }
+      setCommitMsg(msg.replace(/data: /g, '').replace(/\[DONE\]/g, '').trim());
+    } catch (e) {}
+    setGenerating(false);
+  };
+
+  const commit = async () => {
+    await axios.post('/api/git', { action: 'commit', project_path: projectPath, args: { message: commitMsg } });
+    fetchLog();
+    setCommitMsg('');
+  };
+
+  useEffect(() => {
+    fetchBranches();
+    fetchLog();
+  }, []);
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)', padding: 12 }}>
+      <div style={{ fontWeight: 600, marginBottom: 8 }}><FaCodeBranch /> Git</div>
+      <div style={{ marginBottom: 12 }}>
+        <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Branches</div>
+        {branches.map(b => (
+          <div key={b} style={{ padding: '2px 8px', cursor: 'pointer', background: 'var(--bg-tertiary)', borderRadius: 4, marginTop: 4, fontSize: 13 }}>
+            {b}
+          </div>
+        ))}
+      </div>
+      <div style={{ flex: 1, overflowY: 'auto' }}>
+        <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Recent commits</div>
+        {logs.map((log, i) => (
+          <div key={i} style={{ padding: '4px 0', borderBottom: '1px solid var(--border)', fontSize: 12 }}>
+            <div style={{ color: 'var(--accent)' }}>{log.hash?.substring(0,7)}</div>
+            <div>{log.message}</div>
+          </div>
+        ))}
+      </div>
+      <div style={{ marginTop: 8 }}>
+        <textarea
+          style={{ width: '100%', height: 50, background: 'var(--bg-tertiary)', color: 'var(--text-primary)', border: '1px solid var(--border)', borderRadius: 4, padding: 4, fontSize: 12 }}
+          value={commitMsg}
+          onChange={e => setCommitMsg(e.target.value)}
+          placeholder="Commit message..."
+        />
+        <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
+          <button onClick={generateMessage} disabled={generating} style={{ background: 'var(--accent)', color: 'white', padding: '4px 8px', borderRadius: 4, fontSize: 12, display: 'flex', alignItems: 'center', gap: 4 }}>
+            <FaPen /> {generating ? '...' : 'AI msg'}
+          </button>
+          <button onClick={commit} style={{ background: 'var(--success)', color: 'white', padding: '4px 8px', borderRadius: 4, fontSize: 12 }}>Commit</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GitPanel;