import React, { useState, useEffect, useRef, useCallback } from 'react'; import '../shell/AppShell.css'; /** * SOVEREIGN IDE * Full-featured development environment: * - Monaco editor with syntax highlighting * - Real terminal (bash, grep, curl, etc.) * - File browser * - Artifact manager * - AI chat integration * - Connected to backend server (Fastify) */ interface EditorState { fileName: string; content: string; language: string; modified: boolean; } interface TerminalState { sessionId: string; history: string[]; currentInput: string; cwd: string; } export function SovereignIDE() { const [editorState, setEditorState] = useState({ fileName: 'main.ts', content: '// BOB IDE — Sovereign Development Environment\n// Type or paste code here\n', language: 'typescript', modified: false, }); const [terminalState, setTerminalState] = useState({ sessionId: '', history: ['$ bob-ide terminal ready'], currentInput: '', cwd: '/home/user', }); const [activeTab, setActiveTab] = useState<'editor' | 'terminal' | 'files'>('editor'); const [chatMessages, setChatMessages] = useState>([ { role: 'bot', text: 'BOB IDE initialized. Ready to execute.' }, ]); const [chatInput, setChatInput] = useState(''); const terminalInputRef = useRef(null); const terminalOutputRef = useRef(null); const editorRef = useRef(null); // Initialize terminal session on mount useEffect(() => { initializeTerminal(); }, []); async function initializeTerminal() { try { const res = await fetch('/api/terminal/create', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ cols: 80, rows: 24 }), }); const data = await res.json(); setTerminalState((prev) => ({ ...prev, sessionId: data.sessionId, cwd: data.cwd })); } catch (e) { console.error('Failed to initialize terminal:', e); } } // Execute command in terminal async function executeCommand(cmd: string) { if (!terminalState.sessionId) { alert('Terminal not initialized'); return; } try { const res = await fetch('/api/execute', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sessionId: terminalState.sessionId, cmd, cwd: terminalState.cwd, }), }); const data = await res.json(); if (data.ok) { setTerminalState((prev) => ({ ...prev, history: [ ...prev.history, `$ ${cmd}`, ...(data.output ? data.output.split('\n') : []), ], cwd: data.cwd, })); } else { setTerminalState((prev) => ({ ...prev, history: [...prev.history, `$ ${cmd}`, `❌ ${data.error || data.output}`], })); } setTimeout(() => { if (terminalOutputRef.current) { terminalOutputRef.current.scrollTop = terminalOutputRef.current.scrollHeight; } }, 50); } catch (e) { setTerminalState((prev) => ({ ...prev, history: [...prev.history, `$ ${cmd}`, `❌ ${e}`], })); } } function handleTerminalInput(e: React.KeyboardEvent) { if (e.key === 'Enter') { const cmd = (e.target as HTMLInputElement).value; if (cmd.trim()) { executeCommand(cmd); (e.target as HTMLInputElement).value = ''; } } } // Editor shortcuts function handleEditorKey(e: React.KeyboardEvent) { if (e.ctrlKey || e.metaKey) { if (e.key === 's') { e.preventDefault(); saveFile(); } else if (e.key === 'k') { e.preventDefault(); // Run command: compile or execute if (editorState.language === 'bash') { executeCommand(editorState.content); } } } } async function saveFile() { try { const res = await fetch('/api/file/write', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path: editorState.fileName, content: editorState.content, }), }); const data = await res.json(); if (data.ok) { setEditorState((prev) => ({ ...prev, modified: false })); setChatMessages((prev) => [...prev, { role: 'bot', text: `✅ Saved ${editorState.fileName}` }]); } else { alert(`Error: ${data.error}`); } } catch (e) { alert(`Failed to save: ${e}`); } } async function runCode() { if (editorState.language === 'bash') { executeCommand(editorState.content); } else if (editorState.language === 'typescript' || editorState.language === 'javascript') { executeCommand(`node -e "${editorState.content.replace(/"/g, '\\"')}"`); } else { alert('Language not supported for execution'); } } return (
{/* ═══════════════════════════════════════════════════════════════ */} {/* TITLEBAR */} {/* ═══════════════════════════════════════════════════════════════ */}
🤖 BOB IDE — Sovereign Development Environment
{/* ═══════════════════════════════════════════════════════════════ */} {/* MAIN CONTENT */} {/* ═══════════════════════════════════════════════════════════════ */}
{/* LEFT: Editor */}
{editorState.fileName} {editorState.modified && ●}