Delete frontend/src

frontend/src/App.tsx

@@ -1,94 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
-import ChatPanel from './components/ChatPanel';
-import AgentPanel from './components/AgentPanel';
-import CodeEditor from './components/CodeEditor';
-import TerminalTabs from './components/TerminalTabs';
-import FileTree from './components/FileTree';
-import ModelSelector from './components/ModelSelector';
-import TopBar from './components/TopBar';
-import StatusBar from './components/StatusBar';
-import GitPanel from './components/GitPanel';
-import BackgroundTasks from './components/BackgroundTasks';
-import { FaComments, FaRobot, FaTerminal, FaCodeBranch, FaTasks } from 'react-icons/fa';
-
-const App: React.FC = () => {
-  const [activeBottom, setActiveBottom] = useState('chat');
-  const [projectPath] = useState('/app/sandbox');
-  const [activeFile, setActiveFile] = useState<string | null>(null);
-  const [selectedModel, setSelectedModel] = useState('groq-llama-3.3-70b-versatile');
-  const [sidebarVisible, setSidebarVisible] = useState(true);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      const mod = e.ctrlKey || e.metaKey;
-      if (mod && e.key === 'b') { e.preventDefault(); setSidebarVisible(prev => !prev); }
-      else if (mod && e.key === '1') { e.preventDefault(); setActiveBottom('chat'); }
-      else if (mod && e.key === '2') { e.preventDefault(); setActiveBottom('agent'); }
-      else if (mod && e.key === '3') { e.preventDefault(); setActiveBottom('terminal'); }
-      else if (mod && e.key === '4') { e.preventDefault(); setActiveBottom('git'); }
-      else if (mod && e.key === '5') { e.preventDefault(); setActiveBottom('tasks'); }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', background: 'var(--bg-primary)' }}>
-      <TopBar />
-      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
-        {sidebarVisible && (
-          <div style={{ width: 280, background: 'var(--bg-secondary)', borderRight: '1px solid var(--border)', display: 'flex', flexDirection: 'column' }}>
-            <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <span style={{ fontWeight: 600, fontSize: 13 }}>EXPLORER</span>
-              <span onClick={() => setSidebarVisible(false)} style={{ cursor: 'pointer', color: 'var(--text-secondary)' }}>×</span>
-            </div>
-            <ModelSelector selectedModel={selectedModel} onModelChange={setSelectedModel} />
-            <FileTree projectPath={projectPath} onFileSelect={setActiveFile} />
-          </div>
-        )}
-        {!sidebarVisible && (
-          <div style={{ width: 40, background: 'var(--bg-secondary)', borderRight: '1px solid var(--border)', display: 'flex', alignItems: 'flex-start', paddingTop: 10, justifyContent: 'center' }}>
-            <span onClick={() => setSidebarVisible(true)} style={{ cursor: 'pointer', color: 'var(--text-secondary)' }}>☰</span>
-          </div>
-        )}
-        <PanelGroup direction="vertical" style={{ flex: 1 }}>
-          <Panel defaultSize={65} minSize={20}>
-            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-              <div style={{ display: 'flex', background: 'var(--bg-tertiary)', borderBottom: '1px solid var(--border)', padding: '0 8px', overflowX: 'auto' }}>
-                {activeFile ? (
-                  <div style={{ padding: '8px 12px', borderBottom: '2px solid var(--accent)', color: 'var(--accent)', fontSize: 13 }}>📄 {activeFile}</div>
-                ) : (
-                  <div style={{ padding: '8px 12px', color: 'var(--text-secondary)', fontSize: 13 }}>No file selected</div>
-                )}
-              </div>
-              <CodeEditor filePath={activeFile} projectPath={projectPath} />
-            </div>
-          </Panel>
-          <PanelResizeHandle style={{ height: 4, background: 'var(--border)' }} />
-          <Panel defaultSize={35} minSize={15}>
-            <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)' }}>
-              <div style={{ display: 'flex', background: 'var(--bg-tertiary)', borderBottom: '1px solid var(--border)', padding: '0 8px' }}>
-                <button onClick={() => setActiveBottom('chat')} style={{ padding: '8px 16px', background: activeBottom === 'chat' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'chat' ? '2px solid var(--accent)' : 'none', color: activeBottom === 'chat' ? 'var(--accent)' : 'var(--text-secondary)' }}><FaComments /> Chat (Ctrl+1)</button>
-                <button onClick={() => setActiveBottom('agent')} style={{ padding: '8px 16px', background: activeBottom === 'agent' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'agent' ? '2px solid var(--accent)' : 'none', color: activeBottom === 'agent' ? 'var(--accent)' : 'var(--text-secondary)' }}><FaRobot /> Agent (Ctrl+2)</button>
-                <button onClick={() => setActiveBottom('terminal')} style={{ padding: '8px 16px', background: activeBottom === 'terminal' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'terminal' ? '2px solid var(--accent)' : 'none', color: activeBottom === 'terminal' ? 'var(--accent)' : 'var(--text-secondary)' }}><FaTerminal /> Terminal (Ctrl+3)</button>
-                <button onClick={() => setActiveBottom('git')} style={{ padding: '8px 16px', background: activeBottom === 'git' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'git' ? '2px solid var(--accent)' : 'none', color: activeBottom === 'git' ? 'var(--accent)' : 'var(--text-secondary)' }}><FaCodeBranch /> Git (Ctrl+4)</button>
-                <button onClick={() => setActiveBottom('tasks')} style={{ padding: '8px 16px', background: activeBottom === 'tasks' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'tasks' ? '2px solid var(--accent)' : 'none', color: activeBottom === 'tasks' ? 'var(--accent)' : 'var(--text-secondary)' }}><FaTasks /> Tasks (Ctrl+5)</button>
-              </div>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                {activeBottom === 'chat' && <ChatPanel projectPath={projectPath} model={selectedModel} />}
-                {activeBottom === 'agent' && <AgentPanel projectPath={projectPath} />}
-                {activeBottom === 'terminal' && <TerminalTabs />}
-                {activeBottom === 'git' && <GitPanel projectPath={projectPath} />}
-                {activeBottom === 'tasks' && <BackgroundTasks />}
-              </div>
-            </div>
-          </Panel>
-        </PanelGroup>
-      </div>
-      <StatusBar model={selectedModel} />
-    </div>
-  );
-};
-
-export default App;

frontend/src/components/AgentPanel.tsx

@@ -1,141 +0,0 @@
-import React, { useState } from 'react';
-import { FaRobot, FaSpinner, FaCheck, FaTimes, FaChevronLeft, FaChevronRight } from 'react-icons/fa';
-import { DiffEditor } from '@monaco-editor/react';
-
-interface Change {
-  filepath: string;
-  action: string;
-  search?: string;
-  replace?: string;
-  content?: string;
-}
-
-const AgentPanel: React.FC<{ projectPath: string }> = ({ projectPath }) => {
-  const [prompt, setPrompt] = useState('');
-  const [changes, setChanges] = useState<Change[]>([]);
-  const [approved, setApproved] = useState<Set<number>>(new Set());
-  const [currentDiff, setCurrentDiff] = useState(0);
-  const [planning, setPlanning] = useState(false);
-  const [applying, setApplying] = useState(false);
-  const [output, setOutput] = useState('');
-
-  const runPlan = async () => {
-    setPlanning(true);
-    setOutput('Planning...');
-    setChanges([]);
-    setApproved(new Set());
-    try {
-      const resp = await fetch('/api/agent/plan', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ prompt, project_path: projectPath, auto_approve: false }),
-      });
-      const data = await resp.json();
-      setChanges(data.changes || []);
-      setOutput(`Agent proposed ${data.changes?.length || 0} changes.`);
-    } catch (e) {
-      setOutput('Error: ' + e);
-    }
-    setPlanning(false);
-  };
-
-  const applyApproved = async () => {
-    setApplying(true);
-    const indices = Array.from(approved);
-    try {
-      const resp = await fetch('/api/agent/apply', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ task_id: 'default', approved_indices: indices }),
-      });
-      const data = await resp.json();
-      setOutput(prev => prev + '\n' + (data.logs || []).join('\n'));
-    } catch (e) {
-      setOutput('Error applying: ' + e);
-    }
-    setApplying(false);
-  };
-
-  const toggleApproval = (idx: number) => {
-    const newSet = new Set(approved);
-    if (newSet.has(idx)) newSet.delete(idx); else newSet.add(idx);
-    setApproved(newSet);
-  };
-
-  const diffOriginal = (change: Change) => {
-    if (change.action === 'create') return '';
-    return change.search || '';
-  };
-
-  const diffModified = (change: Change) => {
-    if (change.action === 'create') return change.content || '';
-    return change.replace || '';
-  };
-
-  return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)' }}>
-      <div style={{ padding: 12, borderBottom: '1px solid var(--border)' }}>
-        <div style={{ fontWeight: 600, marginBottom: 8 }}><FaRobot /> AI Agent</div>
-        <textarea
-          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., Convert all React components to TypeScript..."
-        />
-        <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
-          <button onClick={runPlan} disabled={planning} style={{ background: 'var(--accent)', color: 'white', padding: '6px 16px', borderRadius: 6, fontWeight: 600 }}>
-            {planning ? <><FaSpinner className="spin" /> Planning</> : 'Plan Changes'}
-          </button>
-          {changes.length > 0 && (
-            <button onClick={applyApproved} disabled={applying || approved.size === 0} style={{ background: 'var(--success)', color: 'white', padding: '6px 16px', borderRadius: 6, fontWeight: 600 }}>
-              {applying ? 'Applying...' : `Apply ${approved.size} Approved`}
-            </button>
-          )}
-        </div>
-      </div>
-
-      {changes.length > 0 && (
-        <div style={{ borderBottom: '1px solid var(--border)', flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '4px 12px', background: 'var(--bg-secondary)' }}>
-            <div style={{ display: 'flex', gap: 12 }}>
-              <button onClick={() => setCurrentDiff(Math.max(0, currentDiff - 1))}><FaChevronLeft /></button>
-              <span style={{ fontSize: 13 }}>File {currentDiff + 1} of {changes.length}: <strong>{changes[currentDiff]?.filepath}</strong></span>
-              <button onClick={() => setCurrentDiff(Math.min(changes.length - 1, currentDiff + 1))}><FaChevronRight /></button>
-            </div>
-            <button
-              onClick={() => toggleApproval(currentDiff)}
-              style={{
-                background: approved.has(currentDiff) ? 'var(--success)' : 'var(--danger)',
-                color: 'white',
-                padding: '4px 12px',
-                borderRadius: 4,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 4,
-                fontSize: 12,
-              }}
-            >
-              {approved.has(currentDiff) ? <><FaCheck /> Approved</> : <><FaTimes /> Rejected</>}
-            </button>
-          </div>
-          <div style={{ flex: 1, minHeight: 0 }}>
-            <DiffEditor
-              height="100%"
-              original={diffOriginal(changes[currentDiff])}
-              modified={diffModified(changes[currentDiff])}
-              language="typescript"
-              theme="vs-dark"
-              options={{ readOnly: true, renderSideBySide: true }}
-            />
-          </div>
-        </div>
-      )}
-
-      <div style={{ padding: 12, background: 'var(--bg-secondary)', maxHeight: 150, overflowY: 'auto', fontFamily: 'monospace', fontSize: 12, whiteSpace: 'pre-wrap' }}>
-        {output}
-      </div>
-    </div>
-  );
-};
-
-export default AgentPanel;

frontend/src/components/BackgroundTasks.tsx

@@ -1,33 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-
-const BackgroundTasks: React.FC = () => {
-  const [tasks, setTasks] = useState<string[]>([]);
-
-  const pollTasks = async () => {
-    try {
-      const res = await axios.get('/api/agent/tasks');
-      setTasks(res.data.tasks || []);
-    } catch (e) {}
-  };
-
-  useEffect(() => {
-    pollTasks();
-    const interval = setInterval(pollTasks, 3000);
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div style={{ padding: 12 }}>
-      <div style={{ fontWeight: 600, marginBottom: 8 }}>Background Agents</div>
-      {tasks.length === 0 && <div style={{ color: 'var(--text-secondary)', fontSize: 12 }}>No running tasks</div>}
-      {tasks.map(task => (
-        <div key={task} style={{ background: 'var(--bg-tertiary)', padding: '4px 8px', borderRadius: 4, marginBottom: 4, fontSize: 12 }}>
-          {task} – running
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default BackgroundTasks;

frontend/src/components/ChatPanel.tsx

@@ -1,251 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown';
-import { FaUser, FaRobot, FaSpinner } from 'react-icons/fa';
-import axios from 'axios';
-
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-}
-
-const ChatPanel: React.FC<{ projectPath: string; model: string }> = ({ projectPath, model }) => {
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [input, setInput] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [mentionQuery, setMentionQuery] = useState('');
-  const [mentionItems, setMentionItems] = useState<any[]>([]);
-  const [showMentions, setShowMentions] = useState(false);
-  const [contextFiles, setContextFiles] = useState<string[]>([]);
-  const chatEnd = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const send = async () => {
-    if (!input.trim() || loading) return;
-    const userMsg = input;
-    setInput('');
-    setMessages(prev => [...prev, { role: 'user', content: userMsg }]);
-    setLoading(true);
-
-    const assistantMsgRef = { current: '' };
-    setMessages(prev => [...prev, { role: 'assistant', content: '' }]);
-
-    try {
-      const response = await fetch('/api/chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          messages: [...messages, { role: 'user', content: userMsg }],
-          project_path: projectPath,
-          model: model,
-          context_files: contextFiles,
-        }),
-      });
-
-      if (!response.ok) throw new Error(`Server responded with ${response.status}`);
-
-      const reader = response.body?.getReader();
-      if (!reader) throw new Error('No response body');
-
-      const decoder = new TextDecoder();
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const lines = buffer.split('\n');
-        buffer = lines.pop() || '';
-        for (const line of lines) {
-          if (line.startsWith('data: ')) {
-            const data = line.slice(6);
-            if (data === '[DONE]') break;
-            try {
-              const { token } = JSON.parse(data);
-              if (token.startsWith('ERROR:')) {
-                assistantMsgRef.current = `❌ ${token.substring(7)}`;
-                setMessages(prev => {
-                  const copy = [...prev];
-                  copy[copy.length - 1] = { role: 'assistant', content: assistantMsgRef.current };
-                  return copy;
-                });
-                return;
-              }
-              assistantMsgRef.current += token;
-              setMessages(prev => {
-                const copy = [...prev];
-                copy[copy.length - 1] = { role: 'assistant', content: assistantMsgRef.current };
-                return copy;
-              });
-            } catch (e) {
-              assistantMsgRef.current = `Parse error: ${data}`;
-              setMessages(prev => {
-                const copy = [...prev];
-                copy[copy.length - 1] = { role: 'assistant', content: assistantMsgRef.current };
-                return copy;
-              });
-              return;
-            }
-          }
-        }
-      }
-    } catch (err: any) {
-      setMessages(prev => {
-        const copy = [...prev];
-        copy[copy.length - 1] = { role: 'assistant', content: `❌ ${err.message}` };
-        return copy;
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => { chatEnd.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setInput(value);
-
-    const atIndex = value.lastIndexOf('@');
-    if (atIndex !== -1 && (atIndex === 0 || value[atIndex - 1] === ' ')) {
-      const query = value.slice(atIndex + 1).toLowerCase();
-      setMentionQuery(query);
-
-      if ('git'.startsWith(query)) {
-        setMentionItems([{ name: 'git (current diff)', type: 'special', path: '__git__' }]);
-        setShowMentions(true);
-        return;
-      }
-
-      axios.get('/api/files', { params: { project_path: projectPath } })
-        .then(res => {
-          const flatten = (nodes: any[]): any[] => {
-            let result: any[] = [];
-            for (const node of nodes) {
-              if (node.name.toLowerCase().includes(query))
-                result.push(node);
-              if (node.children) result = result.concat(flatten(node.children));
-            }
-            return result;
-          };
-          const matches = flatten(res.data).slice(0, 5);
-          setMentionItems(matches);
-          setShowMentions(matches.length > 0);
-        })
-        .catch(() => setShowMentions(false));
-    } else {
-      setShowMentions(false);
-    }
-  };
-
-  const insertMention = (item: any) => {
-    const atIndex = input.lastIndexOf('@');
-    const newInput = input.slice(0, atIndex) + item.name + ' ';
-    setInput(newInput);
-    setShowMentions(false);
-    if (item.path === '__git__') {
-      if (!contextFiles.includes('__git__')) {
-        setContextFiles(prev => [...prev, '__git__']);
-      }
-    } else if (!contextFiles.includes(item.path)) {
-      setContextFiles(prev => [...prev, item.path]);
-    }
-    inputRef.current?.focus();
-  };
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      <div style={{ flex: 1, overflowY: 'auto', padding: 16 }}>
-        {messages.map((m, i) => (
-          <div key={i} style={{ marginBottom: 16, display: 'flex', justifyContent: m.role === 'user' ? 'flex-end' : 'flex-start' }}>
-            <div style={{
-              maxWidth: '80%',
-              background: m.role === 'user' ? 'var(--accent)' : 'var(--bg-tertiary)',
-              color: m.role === 'user' ? 'white' : 'var(--text-primary)',
-              borderRadius: 12,
-              borderBottomRightRadius: m.role === 'user' ? 4 : 12,
-              borderBottomLeftRadius: m.role === 'user' ? 12 : 4,
-              padding: 12,
-              boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
-            }}>
-              <div style={{ fontSize: 11, marginBottom: 4, display: 'flex', alignItems: 'center', gap: 4, color: m.role === 'user' ? 'rgba(255,255,255,0.8)' : 'var(--text-secondary)' }}>
-                {m.role === 'user' ? <FaUser size={10} /> : <FaRobot size={10} />}
-                {m.role === 'user' ? 'You' : 'Codeki'}
-              </div>
-              <ReactMarkdown>{m.content}</ReactMarkdown>
-            </div>
-          </div>
-        ))}
-        {loading && (
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-secondary)', padding: 8 }}>
-            <FaSpinner className="spin" /> Codeki is thinking...
-          </div>
-        )}
-        <div ref={chatEnd} />
-      </div>
-      <div style={{ borderTop: '1px solid var(--border)', padding: 12, background: 'var(--bg-secondary)', position: 'relative' }}>
-        {showMentions && (
-          <div style={{
-            position: 'absolute',
-            bottom: '100%',
-            left: 0,
-            right: 0,
-            background: 'var(--bg-tertiary)',
-            border: '1px solid var(--border)',
-            borderRadius: 4,
-            maxHeight: 150,
-            overflowY: 'auto',
-            marginBottom: 4,
-            zIndex: 10,
-          }}>
-            {mentionItems.map(item => (
-              <div
-                key={item.path}
-                onClick={() => insertMention(item)}
-                style={{ padding: '4px 8px', cursor: 'pointer', fontSize: 12, display: 'flex', alignItems: 'center', gap: 6 }}
-              >
-                {item.type === 'folder' ? '📁' : item.type === 'special' ? '🔗' : '📄'} {item.name}
-              </div>
-            ))}
-          </div>
-        )}
-        <div style={{ display: 'flex', gap: 8 }}>
-          <input
-            ref={inputRef}
-            style={{ flex: 1 }}
-            value={input}
-            onChange={handleInputChange}
-            onKeyDown={e => e.key === 'Enter' && send()}
-            placeholder="Ask anything... Type @ to reference a file or @git"
-            disabled={loading}
-          />
-          <button
-            onClick={send}
-            disabled={loading}
-            style={{
-              background: loading ? 'var(--border)' : 'var(--accent)',
-              color: 'white',
-              padding: '0 20px',
-              borderRadius: 6,
-              fontWeight: 600,
-              transition: 'background 0.2s'
-            }}
-          >
-            {loading ? '...' : 'Send'}
-          </button>
-        </div>
-        {contextFiles.length > 0 && (
-          <div style={{ marginTop: 6, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-            {contextFiles.map(f => (
-              <span key={f} style={{ background: 'var(--accent)', color: 'white', padding: '2px 8px', borderRadius: 10, fontSize: 11 }}>
-                📎 {f === '__git__' ? 'Git Diff' : f.split('/').pop()}
-                <span style={{ marginLeft: 4, cursor: 'pointer' }} onClick={() => setContextFiles(prev => prev.filter(x => x !== f))}>×</span>
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ChatPanel;

frontend/src/components/CodeEditor.tsx

@@ -1,86 +0,0 @@
-import React, { useRef } from 'react';
-import Editor, { OnMount } from '@monaco-editor/react';
-import * as monaco from 'monaco-editor';
-
-const CodeEditor: React.FC<{ filePath: string | null; projectPath: string }> = ({ filePath, projectPath }) => {
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
-
-  const handleEditorDidMount: OnMount = (editor, monaco) => {
-    editorRef.current = editor;
-
-    monaco.languages.registerInlineCompletionsProvider('*', {
-      provideInlineCompletions: async (model, position, context, token) => {
-        const prefix = model.getValueInRange({
-          startLineNumber: 1,
-          startColumn: 1,
-          endLineNumber: position.lineNumber,
-          endColumn: position.column,
-        });
-        const suffix = model.getValueInRange({
-          startLineNumber: position.lineNumber,
-          startColumn: position.column,
-          endLineNumber: model.getLineCount(),
-          endColumn: model.getLineMaxColumn(model.getLineCount()),
-        });
-
-        try {
-          const resp = await fetch('/api/autocomplete', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              prefix,
-              suffix,
-              filepath: filePath || '',
-              language: model.getLanguageId(),
-              max_tokens: 64,
-              model: 'groq-llama-3.1-8b-instant',
-            }),
-          });
-          if (!resp.ok) return { items: [] };
-          const data = await resp.json();
-          const completions = data.completions || [];
-          return {
-            items: completions.map((c: any) => ({
-              insertText: c.text,
-              range: {
-                startLineNumber: position.lineNumber,
-                startColumn: position.column,
-                endLineNumber: position.lineNumber,
-                endColumn: position.column,
-              },
-            })),
-          };
-        } catch (e) {
-          return { items: [] };
-        }
-      },
-      freeInlineCompletions: () => {},
-    });
-  };
-
-  if (!filePath) return (
-    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)', fontSize: 14 }}>
-      ← Select a file from the explorer to start editing
-    </div>
-  );
-
-  return (
-    <Editor
-      height="100%"
-      defaultLanguage="typescript"
-      theme="vs-dark"
-      path={filePath}
-      onMount={handleEditorDidMount}
-      loading={<div style={{ color: 'var(--text-secondary)', padding: 20 }}>Loading editor...</div>}
-      options={{
-        fontSize: 13,
-        minimap: { enabled: true },
-        smoothScrolling: true,
-        cursorBlinking: 'smooth',
-        inlineSuggest: { enabled: true },
-      }}
-    />
-  );
-};
-
-export default CodeEditor;

frontend/src/components/CodebaseExplorer.tsx

@@ -1,3 +0,0 @@
-import React from 'react';
-const CodebaseExplorer: React.FC<{ projectPath: string }> = () => <div style={{ color: 'white' }}>Files</div>;
-export default CodebaseExplorer;

frontend/src/components/FileTree.tsx

@@ -1,83 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { FaFolder, FaFolderOpen, FaFile, FaChevronRight, FaChevronDown, FaSpinner } from 'react-icons/fa';
-import axios from 'axios';
-
-interface TreeNode {
-  name: string;
-  path: string;
-  type: 'file' | 'folder';
-  children?: TreeNode[];
-}
-
-const FileTree: React.FC<{ projectPath: string; onFileSelect: (path: string) => void }> = ({ projectPath, onFileSelect }) => {
-  const [tree, setTree] = useState<TreeNode[]>([]);
-  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-  const [selected, setSelected] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    axios.get('/api/files', { params: { project_path: projectPath } })
-      .then(res => setTree(res.data))
-      .catch(() => setTree([]))
-      .finally(() => setLoading(false));
-  }, [projectPath]);
-
-  const toggle = (path: string) => {
-    setExpanded(prev => {
-      const next = new Set(prev);
-      if (next.has(path)) next.delete(path); else next.add(path);
-      return next;
-    });
-  };
-
-  const handleClick = (node: TreeNode) => {
-    if (node.type === 'folder') {
-      toggle(node.path);
-    } else {
-      setSelected(node.path);
-      onFileSelect(node.path);
-    }
-  };
-
-  const renderNode = (node: TreeNode, depth: number = 0) => {
-    const isOpen = expanded.has(node.path);
-    return (
-      <div key={node.path}>
-        <div
-          onClick={() => handleClick(node)}
-          style={{
-            paddingLeft: depth * 16 + 8,
-            padding: '4px 8px',
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 6,
-            background: selected === node.path ? 'var(--accent)' : 'transparent',
-            color: selected === node.path ? 'white' : 'var(--text-primary)',
-            fontSize: 13,
-          }}
-        >
-          {node.type === 'folder' ? (
-            <>
-              {isOpen ? <FaChevronDown size={10} /> : <FaChevronRight size={10} />}
-              {isOpen ? <FaFolderOpen size={14} /> : <FaFolder size={14} />}
-            </>
-          ) : (
-            <>
-              <span style={{ width: 10 }} />
-              <FaFile size={14} />
-            </>
-          )}
-          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{node.name}</span>
-        </div>
-        {node.type === 'folder' && isOpen && node.children?.map(child => renderNode(child, depth + 1))}
-      </div>
-    );
-  };
-
-  if (loading) return <div style={{ padding: 12, color: 'var(--text-secondary)' }}><FaSpinner className="spin" /> Loading files...</div>;
-
-  return <div style={{ overflowY: 'auto', flex: 1 }}>{tree.map(node => renderNode(node))}</div>;
-};
-
-export default FileTree;

frontend/src/components/GitPanel.tsx

@@ -1,148 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import { FaCodeBranch, FaHistory, FaPen, FaFileAlt } from 'react-icons/fa';
-import ReactMarkdown from 'react-markdown';
-
-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 [prSummary, setPrSummary] = useState('');
-
-  const fetchData = async () => {
-    try {
-      const [branchesRes, logsRes] = await Promise.all([
-        axios.post('/api/git', { action: 'branch', project_path: projectPath }),
-        axios.post('/api/git', { action: 'log', project_path: projectPath })
-      ]);
-      setBranches(branchesRes.data.branches || []);
-      setLogs(logsRes.data.log || []);
-    } catch (e) {}
-  };
-
-  useEffect(() => { fetchData(); }, []);
-
-  const generateCommitMessage = async () => {
-    setGenerating(true);
-    try {
-      const diffRes = await axios.post('/api/git', { action: 'diff', project_path: projectPath });
-      const diff = diffRes.data.diff || '';
-      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 diff:\n${diff}` }],
-          project_path: projectPath,
-        }),
-      });
-      const reader = resp.body?.getReader();
-      let msg = '';
-      while (reader) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        const text = new TextDecoder().decode(value);
-        const lines = text.split('\n').filter(l => l.startsWith('data: ')).map(l => l.slice(6));
-        for (const line of lines) {
-          if (line === '[DONE]') break;
-          try {
-            const { token } = JSON.parse(line);
-            msg += token;
-          } catch (e) {}
-        }
-      }
-      setCommitMsg(msg.replace(/ERROR:.*/, '').trim());
-    } catch (e) {}
-    setGenerating(false);
-  };
-
-  const generatePRSummary = async () => {
-    try {
-      const diffRes = await axios.post('/api/git', { action: 'diff', project_path: projectPath });
-      const diff = diffRes.data.diff || '';
-      const resp = await fetch('/api/chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          model: 'groq-llama-3.3-70b-versatile',
-          messages: [{ role: 'user', content: `Review the following diff and provide a PR summary with suggestions:\n${diff}` }],
-          project_path: projectPath,
-        }),
-      });
-      const reader = resp.body?.getReader();
-      let summary = '';
-      while (reader) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        const text = new TextDecoder().decode(value);
-        const lines = text.split('\n').filter(l => l.startsWith('data: ')).map(l => l.slice(6));
-        for (const line of lines) {
-          if (line === '[DONE]') break;
-          try {
-            const { token } = JSON.parse(line);
-            summary += token;
-          } catch (e) {}
-        }
-      }
-      setPrSummary(summary);
-    } catch (e) {}
-  };
-
-  const commit = async () => {
-    await axios.post('/api/git', { action: 'commit', project_path: projectPath, args: { message: commitMsg } });
-    fetchData();
-    setCommitMsg('');
-  };
-
-  return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)', padding: 12, overflowY: 'auto' }}>
-      <div style={{ fontWeight: 600, marginBottom: 8 }}><FaCodeBranch /> Git</div>
-
-      <div style={{ marginBottom: 12 }}>
-        <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 4 }}>Branches</div>
-        {branches.map(b => (
-          <div key={b} style={{ padding: '2px 8px', background: 'var(--bg-tertiary)', borderRadius: 4, marginBottom: 2, fontSize: 13 }}>{b}</div>
-        ))}
-      </div>
-
-      <div style={{ marginBottom: 12 }}>
-        <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 4 }}>Recent Commits</div>
-        {logs.map((log, i) => (
-          <div key={i} style={{ borderBottom: '1px solid var(--border)', padding: '4px 0', fontSize: 12 }}>
-            <span style={{ color: 'var(--accent)' }}>{log.hash?.substring(0,7)} </span>
-            {log.message}
-          </div>
-        ))}
-      </div>
-
-      <div style={{ marginBottom: 12 }}>
-        <textarea
-          style={{ width: '100%', height: 40, background: 'var(--bg-tertiary)', color: 'var(--text-primary)', border: '1px solid var(--border)', borderRadius: 4, padding: 4, fontSize: 12 }}
-          placeholder="Commit message..."
-          value={commitMsg}
-          onChange={e => setCommitMsg(e.target.value)}
-        />
-        <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
-          <button onClick={generateCommitMessage} disabled={generating} style={{ background: 'var(--accent)', color: 'white', padding: '4px 8px', borderRadius: 4, fontSize: 12, display: 'flex', alignItems: 'center', gap: 4 }}>
-            <FaPen /> {generating ? '...' : 'AI Message'}
-          </button>
-          <button onClick={commit} style={{ background: 'var(--success)', color: 'white', padding: '4px 8px', borderRadius: 4, fontSize: 12 }}>Commit</button>
-        </div>
-      </div>
-
-      <div style={{ marginBottom: 12 }}>
-        <button onClick={generatePRSummary} style={{ background: 'var(--accent)', color: 'white', padding: '4px 12px', borderRadius: 4, fontSize: 12, display: 'flex', alignItems: 'center', gap: 4 }}>
-          <FaFileAlt /> Generate PR Summary
-        </button>
-        {prSummary && (
-          <div style={{ marginTop: 8, padding: 8, background: 'var(--bg-secondary)', borderRadius: 4 }}>
-            <ReactMarkdown>{prSummary}</ReactMarkdown>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default GitPanel;

frontend/src/components/ModelSelector.tsx

@@ -1,32 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import { FaRobot } from 'react-icons/fa';
-
-const ModelSelector: React.FC<{ selectedModel: string; onModelChange: (model: string) => void }> = ({ selectedModel, onModelChange }) => {
-  const [models, setModels] = useState<any[]>([]);
-
-  useEffect(() => {
-    axios.get('/api/models')
-      .then(res => setModels(res.data))
-      .catch(() => setModels([]));
-  }, []);
-
-  return (
-    <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border)' }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6, color: 'var(--text-secondary)', fontSize: 12 }}>
-        <FaRobot /> ACTIVE MODEL
-      </div>
-      <select
-        style={{ width: '100%', background: 'var(--bg-tertiary)', color: 'var(--text-primary)', border: '1px solid var(--border)', padding: '6px 8px', borderRadius: 6, outline: 'none', fontSize: 13 }}
-        value={selectedModel}
-        onChange={e => onModelChange(e.target.value)}
-      >
-        {models.map((m: any) => (
-          <option key={m.id} value={m.id}>{m.name}</option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
-export default ModelSelector;

frontend/src/components/StatusBar.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { FaMicrochip, FaPlug } from 'react-icons/fa';
-
-const StatusBar: React.FC<{ model: string }> = ({ model }) => {
-  return (
-    <div style={{ height: 24, background: 'var(--bg-tertiary)', borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 12px', fontSize: 12, color: 'var(--text-secondary)' }}>
-      <div style={{ display: 'flex', gap: 15 }}>
-        <span><FaPlug style={{ color: 'var(--success)' }} /> Connected</span>
-        <span><FaMicrochip /> {model}</span>
-      </div>
-      <span>Ln 1, Col 1</span>
-    </div>
-  );
-};
-
-export default StatusBar;

frontend/src/components/Terminal.tsx

@@ -1,242 +0,0 @@
-
-# Fixed Terminal.tsx - proper TypeScript with correct escaping
-terminal_tsx = r'''import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Terminal } from 'xterm';
-import { FitAddon } from 'xterm-addon-fit';
-import 'xterm/css/xterm.css';
-
-interface Tab {
-  id: number;
-  terminal: Terminal;
-  socket: WebSocket;
-  fitAddon: FitAddon;
-}
-
-const TerminalTabs: React.FC = () => {
-  const [tabs, setTabs] = useState<Tab[]>([]);
-  const [activeTab, setActiveTab] = useState<number>(0);
-  const termRefs = useRef<Map<number, HTMLDivElement>>(new Map());
-  const nextId = useRef(1);
-
-  const createTerminal = useCallback(() => {
-    const id = nextId.current++;
-    const term = new Terminal({
-      cursorBlink: true,
-      theme: {
-        background: '#0d1117',
-        foreground: '#c9d1d9',
-        cursor: '#58a6ff',
-        black: '#484f58',
-        red: '#f85149',
-        green: '#3fb950',
-        yellow: '#d29922',
-        blue: '#58a6ff',
-        magenta: '#bc8cff',
-        cyan: '#39c5cf',
-        white: '#c9d1d9',
-      },
-      fontSize: 13,
-      fontFamily: 'monospace',
-      rows: 24,
-      cols: 80,
-    });
-
-    const fitAddon = new FitAddon();
-    term.loadAddon(fitAddon);
-
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const socket = new WebSocket(`${protocol}//${window.location.host}/ws/terminal`);
-
-    socket.onopen = () => {
-      term.writeln('\r\n\x1b[32mConnected to terminal\x1b[0m\r\n');
-    };
-
-    socket.onmessage = (event) => {
-      term.write(event.data);
-    };
-
-    socket.onerror = () => {
-      term.writeln('\r\n\x1b[31mConnection error\x1b[0m\r\n');
-    };
-
-    socket.onclose = () => {
-      term.writeln('\r\n\x1b[33mDisconnected\x1b[0m\r\n');
-    };
-
-    term.onData((data) => {
-      if (socket.readyState === WebSocket.OPEN) {
-        socket.send(`exec:${data}`);
-      }
-    });
-
-    const newTab: Tab = { id, terminal: term, socket, fitAddon };
-    setTabs((prev) => [...prev, newTab]);
-    setActiveTab(id);
-    return newTab;
-  }, []);
-
-  // Create initial terminal
-  useEffect(() => {
-    if (tabs.length === 0) {
-      createTerminal();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Mount terminal to DOM when active tab changes
-  useEffect(() => {
-    const tab = tabs.find((t) => t.id === activeTab);
-    if (!tab) return;
-
-    const container = termRefs.current.get(tab.id);
-    if (!container) return;
-
-    // Only open if not already open
-    if (!tab.terminal.element) {
-      tab.terminal.open(container);
-      tab.fitAddon.fit();
-
-      // Handle resize
-      const handleResize = () => {
-        tab.fitAddon.fit();
-      };
-      window.addEventListener('resize', handleResize);
-
-      return () => {
-        window.removeEventListener('resize', handleResize);
-      };
-    }
-  }, [activeTab, tabs]);
-
-  const removeTab = (id: number) => {
-    const tab = tabs.find((t) => t.id === id);
-    if (!tab) return;
-
-    // Clean up
-    if (tab.socket.readyState === WebSocket.OPEN || tab.socket.readyState === WebSocket.CONNECTING) {
-      tab.socket.close();
-    }
-    tab.terminal.dispose();
-
-    setTabs((prev) => prev.filter((t) => t.id !== id));
-
-    if (activeTab === id) {
-      const remaining = tabs.filter((t) => t.id !== id);
-      if (remaining.length > 0) {
-        setActiveTab(remaining[0].id);
-      }
-    }
-  };
-
-  const activeTabIndex = tabs.findIndex((t) => t.id === activeTab);
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      {/* Tab Bar */}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          background: '#161b22',
-          borderBottom: '1px solid #30363d',
-          overflowX: 'auto',
-        }}
-      >
-        {tabs.map((tab, idx) => (
-          <div
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            style={{
-              padding: '6px 14px',
-              cursor: 'pointer',
-              background: activeTab === tab.id ? '#0d1117' : 'transparent',
-              borderRight: '1px solid #30363d',
-              display: 'flex',
-              alignItems: 'center',
-              gap: 8,
-              fontSize: 12,
-              color: activeTab === tab.id ? '#c9d1d9' : '#8b949e',
-              whiteSpace: 'nowrap',
-              userSelect: 'none',
-            }}
-          >
-            <span>Terminal {idx + 1}</span>
-            <span
-              onClick={(e) => {
-                e.stopPropagation();
-                removeTab(tab.id);
-              }}
-              style={{
-                opacity: 0.5,
-                cursor: 'pointer',
-                fontSize: 14,
-                lineHeight: 1,
-              }}
-              onMouseEnter={(e) => (e.currentTarget.style.opacity = '1')}
-              onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.5')}
-            >
-              ×
-            </span>
-          </div>
-        ))}
-        <button
-          onClick={() => createTerminal()}
-          style={{
-            padding: '6px 12px',
-            background: 'transparent',
-            border: 'none',
-            color: '#8b949e',
-            cursor: 'pointer',
-            fontSize: 16,
-            lineHeight: 1,
-          }}
-          title="New Terminal"
-        >
-          +
-        </button>
-      </div>
-
-      {/* Terminal Containers */}
-      <div style={{ flex: 1, position: 'relative', background: '#0d1117' }}>
-        {tabs.map((tab) => (
-          <div
-            key={tab.id}
-            ref={(el) => {
-              if (el) termRefs.current.set(tab.id, el);
-            }}
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              display: activeTab === tab.id ? 'block' : 'none',
-              padding: 4,
-            }}
-          />
-        ))}
-        {tabs.length === 0 && (
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              height: '100%',
-              color: '#8b949e',
-              fontSize: 14,
-            }}
-          >
-            No terminals open. Click + to create one.
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default TerminalTabs;
-'''
-
-with open('/mnt/agents/output/Terminal.tsx', 'w') as f:
-    f.write(terminal_tsx)
-print("Terminal.tsx fixed")

frontend/src/components/TerminalTabs.tsx

@@ -1,171 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Terminal as XTerm } from 'xterm';
-import { FitAddon } from 'xterm-addon-fit';
-import 'xterm/css/xterm.css';
-import { FaPlus, FaTimes, FaRobot } from 'react-icons/fa';
-import axios from 'axios';
-
-interface Tab {
-  id: number;
-  terminal: XTerm;
-  socket: WebSocket;
-}
-
-const TerminalTabs: React.FC = () => {
-  const [tabs, setTabs] = useState<Tab[]>([]);
-  const [activeTab, setActiveTab] = useState(0);
-  const termRefs = useRef<Map<number, HTMLDivElement>>(new Map());
-  const nextId = useRef(1);
-  const [suggestionInput, setSuggestionInput] = useState('');
-  const [suggesting, setSuggesting] = useState(false);
-
-  const createTerminal = () => {
-    const id = nextId.current++;
-    const term = new XTerm({
-      cursorBlink: true,
-      theme: {
-        background: '#0d1117',
-        foreground: '#c9d1d9',
-        cursor: '#58a6ff',
-        black: '#484f58',
-        red: '#f85149',
-        green: '#3fb950',
-        yellow: '#d29922',
-        blue: '#58a6ff',
-        magenta: '#bc8cff',
-        cyan: '#39c5cf',
-        white: '#c9d1d9',
-      },
-      fontSize: 13,
-      fontFamily: 'monospace',
-    });
-    const fit = new FitAddon();
-    term.loadAddon(fit);
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const socket = new WebSocket(`${protocol}//${window.location.host}/ws/terminal`);
-    term.onData(data => socket.send(`exec:${data}`));
-    socket.onmessage = (event) => term.write(event.data);
-    const newTab: Tab = { id, terminal: term, socket };
-    setTabs(prev => [...prev, newTab]);
-    setActiveTab(id);
-    return { term, socket, fit };
-  };
-
-  useEffect(() => { createTerminal(); }, []);
-
-  useEffect(() => {
-    const tab = tabs.find(t => t.id === activeTab);
-    if (tab) {
-      const container = termRefs.current.get(tab.id);
-      if (container && !tab.terminal.element) {
-        tab.terminal.open(container);
-        const fitAddon = new FitAddon();
-        tab.terminal.loadAddon(fitAddon);
-        fitAddon.fit();
-        window.addEventListener('resize', () => fitAddon.fit());
-      }
-    }
-  }, [activeTab, tabs]);
-
-  const removeTab = (id: number) => {
-    const tab = tabs.find(t => t.id === id);
-    if (tab) {
-      tab.socket.close();
-      tab.terminal.dispose();
-      setTabs(prev => prev.filter(t => t.id !== id));
-      if (activeTab === id) {
-        const remaining = tabs.filter(t => t.id !== id);
-        if (remaining.length > 0) setActiveTab(remaining[0].id);
-      }
-    }
-  };
-
-  const handleSuggestion = async () => {
-    if (!suggestionInput.trim()) return;
-    setSuggesting(true);
-    try {
-      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: `Suggest a terminal command for: ${suggestionInput}. Only respond with the command, nothing else.` }],
-          project_path: '/app/sandbox',
-        }),
-      });
-      const reader = resp.body?.getReader();
-      let command = '';
-      while (reader) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        const text = new TextDecoder().decode(value);
-        const lines = text.split('\n').filter(l => l.startsWith('data: ')).map(l => l.slice(6));
-        for (const line of lines) {
-          if (line === '[DONE]') break;
-          try {
-            const { token } = JSON.parse(line);
-            command += token;
-          } catch (e) {}
-        }
-      }
-      const tab = tabs.find(t => t.id === activeTab);
-      if (tab) {
-        tab.terminal.write(command + '\r\n');
-      }
-    } catch (e) {}
-    setSuggesting(false);
-    setSuggestionInput('');
-  };
-
-  return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#0d1117' }}>
-      <div style={{ display: 'flex', background: 'var(--bg-tertiary)', borderBottom: '1px solid var(--border)', alignItems: 'center' }}>
-        {tabs.map(tab => (
-          <div key={tab.id}
-               onClick={() => setActiveTab(tab.id)}
-               style={{
-                 padding: '4px 12px',
-                 cursor: 'pointer',
-                 background: activeTab === tab.id ? 'var(--bg-primary)' : 'transparent',
-                 borderRight: '1px solid var(--border)',
-                 display: 'flex',
-                 alignItems: 'center',
-                 gap: 6,
-                 fontSize: 12,
-                 color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-secondary)',
-               }}>
-            <span>Terminal {tab.id}</span>
-            <FaTimes size={10} onClick={(e) => { e.stopPropagation(); removeTab(tab.id); }} style={{ opacity: 0.6 }} />
-          </div>
-        ))}
-        <button onClick={() => createTerminal()} style={{ padding: '4px 8px', color: 'var(--text-secondary)' }}>
-          <FaPlus size={12} />
-        </button>
-        <div style={{ flex: 1 }} />
-        <div style={{ display: 'flex', alignItems: 'center', gap: 4, paddingRight: 8 }}>
-          <input
-            style={{ width: 150, fontSize: 12, padding: '2px 6px' }}
-            placeholder="Describe command..."
-            value={suggestionInput}
-            onChange={e => setSuggestionInput(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && handleSuggestion()}
-          />
-          <button onClick={handleSuggestion} disabled={suggesting} style={{ color: 'var(--accent)', fontSize: 12 }}>
-            <FaRobot /> {suggesting ? '...' : 'Suggest'}
-          </button>
-        </div>
-      </div>
-      <div style={{ flex: 1, position: 'relative' }}>
-        {tabs.map(tab => (
-          <div
-            key={tab.id}
-            ref={el => { if (el) termRefs.current.set(tab.id, el); }}
-            style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: activeTab === tab.id ? 'block' : 'none' }}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default TerminalTabs;

frontend/src/components/TopBar.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { FaCode, FaGithub, FaRocket } from 'react-icons/fa';
-
-const TopBar: React.FC = () => {
-  return (
-    <div style={{ height: 36, background: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 12px', fontSize: 13 }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-        <FaCode style={{ color: 'var(--accent)' }} />
-        <span style={{ fontWeight: 600 }}>Codeki</span>
-        <span style={{ color: 'var(--text-secondary)' }}>– AI Coding Assistant</span>
-      </div>
-      <div style={{ display: 'flex', gap: 15, alignItems: 'center' }}>
-        <FaGithub style={{ color: 'var(--text-secondary)', cursor: 'pointer' }} />
-        <FaRocket style={{ color: 'var(--accent)', cursor: 'pointer' }} />
-      </div>
-    </div>
-  );
-};
-
-export default TopBar;

frontend/src/index.css

@@ -1,25 +0,0 @@
-:root {
-  --bg-primary: #0d1117;
-  --bg-secondary: #161b22;
-  --bg-tertiary: #21262d;
-  --border: #30363d;
-  --text-primary: #c9d1d9;
-  --text-secondary: #8b949e;
-  --accent: #58a6ff;
-  --accent-hover: #79c0ff;
-  --danger: #f85149;
-  --success: #3fb950;
-  --warning: #d29922;
-}
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif; background: var(--bg-primary); color: var(--text-primary); overflow: hidden; }
-#root { height: 100vh; }
-::-webkit-scrollbar { width: 8px; height: 8px; }
-::-webkit-scrollbar-track { background: var(--bg-secondary); }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: #484f58; }
-button { cursor: pointer; border: none; background: none; color: inherit; font-family: inherit; }
-input, select, textarea { background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-primary); padding: 6px 10px; border-radius: 6px; font-family: inherit; outline: none; transition: border 0.2s; }
-input:focus, select:focus, textarea:focus { border-color: var(--accent); }
-.spin { animation: spin 1s linear infinite; }
-@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

frontend/src/index.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

frontend/src/services/api.ts

@@ -1,2 +0,0 @@
-// Placeholder for API calls
-export const apiBase = '';