codex-linux 1.0.0

package/src/renderer/App.tsx

@@ -0,0 +1,314 @@
+import React, { useState, useEffect } from 'react';
+import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
+import { Sidebar } from './components/Sidebar';
+import { Header } from './components/Header';
+import { AgentPanel } from './components/AgentPanel';
+import { WorktreePanel } from './components/WorktreePanel';
+import { SkillsPanel } from './components/SkillsPanel';
+import { AutomationPanel } from './components/AutomationPanel';
+import { SettingsPanel } from './components/SettingsPanel';
+import { CodeWorkspace } from './components/CodeWorkspace';
+import { AuditTrailPanel } from './components/AuditTrailPanel';
+import { I18nProvider } from './i18n/I18nProvider';
+import { Agent, Worktree, Skill, Automation, AIProvider, Settings } from '../shared/types';
+import './styles/minimalist.css';
+
+function App() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [worktrees, setWorktrees] = useState<Worktree[]>([]);
+  const [skills, setSkills] = useState<Skill[]>([]);
+  const [automations, setAutomations] = useState<Automation[]>([]);
+  const [providers, setProviders] = useState<AIProvider[]>([]);
+  const [settings, setSettings] = useState<Settings | null>(null);
+  const [activeTab, setActiveTab] = useState('agents');
+  const [isLoading, setIsLoading] = useState(true);
+  const [streamingContent, setStreamingContent] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    const path = location.pathname;
+    if (path === '/' || path.startsWith('/agents')) {
+      setActiveTab('agents');
+      return;
+    }
+    if (path.startsWith('/code')) {
+      setActiveTab('code');
+      return;
+    }
+    if (path.startsWith('/worktrees')) {
+      setActiveTab('worktrees');
+      return;
+    }
+    if (path.startsWith('/skills')) {
+      setActiveTab('skills');
+      return;
+    }
+    if (path.startsWith('/automations')) {
+      setActiveTab('automations');
+      return;
+    }
+    if (path.startsWith('/settings')) {
+      setActiveTab('settings');
+      return;
+    }
+    setActiveTab('agents');
+  }, [location.pathname]);
+
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab);
+    switch (tab) {
+      case 'agents':
+        navigate('/');
+        break;
+      case 'code':
+        navigate('/code');
+        break;
+      case 'worktrees':
+        navigate('/worktrees');
+        break;
+      case 'skills':
+        navigate('/skills');
+        break;
+      case 'automations':
+        navigate('/automations');
+        break;
+      case 'settings':
+        navigate('/settings');
+        break;
+      default:
+        navigate('/');
+    }
+  };
+
+  useEffect(() => {
+    loadInitialData();
+
+    const handleStreamChunk = ({ agentId, chunk }: { agentId: string; chunk: string }) => {
+      setStreamingContent(prev => ({
+        ...prev,
+        [agentId]: (prev[agentId] || '') + chunk
+      }));
+    };
+
+    const handleStreamEnd = ({ agentId }: { agentId: string }) => {
+      setAgents(prev => prev.map(agent => {
+        if (agent.id === agentId && streamingContent[agentId]) {
+          return {
+            ...agent,
+            messages: [...agent.messages, {
+              id: Date.now().toString(),
+              role: 'assistant',
+              content: streamingContent[agentId],
+              timestamp: new Date()
+            }]
+          };
+        }
+        return agent;
+      }));
+      setStreamingContent(prev => {
+        const newContent = { ...prev };
+        delete newContent[agentId];
+        return newContent;
+      });
+    };
+
+    const handleStreamError = ({ agentId, error }: { agentId: string; error: string }) => {
+      console.error(`Stream error for agent ${agentId}:`, error);
+      setStreamingContent(prev => {
+        const newContent = { ...prev };
+        delete newContent[agentId];
+        return newContent;
+      });
+    };
+
+    window.electronAPI.on('agent:streamChunk', handleStreamChunk);
+    window.electronAPI.on('agent:streamEnd', handleStreamEnd);
+    window.electronAPI.on('agent:streamError', handleStreamError);
+
+    return () => {
+      window.electronAPI.removeListener('agent:streamChunk', handleStreamChunk);
+      window.electronAPI.removeListener('agent:streamEnd', handleStreamEnd);
+      window.electronAPI.removeListener('agent:streamError', handleStreamError);
+    };
+  }, []);
+
+  const loadInitialData = async () => {
+    try {
+      const [
+        agentsData,
+        skillsData,
+        automationsData,
+        providersData,
+        settingsData
+      ] = await Promise.all([
+        window.electronAPI.agent.list(),
+        window.electronAPI.skills.list(),
+        window.electronAPI.automation.list(),
+        window.electronAPI.providers.list(),
+        window.electronAPI.settings.getAll()
+      ]);
+
+      setAgents(agentsData);
+      setSkills(skillsData);
+      setAutomations(automationsData);
+      setProviders(providersData);
+      setSettings(settingsData);
+    } catch (error) {
+      console.error('Failed to load initial data:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCreateAgent = async (config: any) => {
+    try {
+      const newAgent = await window.electronAPI.agent.create(config);
+      setAgents(prev => [...prev, newAgent]);
+      return newAgent;
+    } catch (error) {
+      console.error('Failed to create agent:', error);
+      throw error;
+    }
+  };
+
+  const handleDeleteAgent = async (agentId: string) => {
+    try {
+      await window.electronAPI.agent.delete(agentId);
+      setAgents(prev => prev.filter(a => a.id !== agentId));
+    } catch (error) {
+      console.error('Failed to delete agent:', error);
+    }
+  };
+
+  const handleCreateWorktree = async (repoPath: string, name: string) => {
+    try {
+      const worktree = await window.electronAPI.worktree.create(repoPath, name);
+      setWorktrees(prev => [...prev, worktree]);
+      return worktree;
+    } catch (error) {
+      console.error('Failed to create worktree:', error);
+      throw error;
+    }
+  };
+
+  const handleCreateSkill = async (config: any) => {
+    try {
+      const newSkill = await window.electronAPI.skills.create(config);
+      setSkills(prev => [...prev, newSkill]);
+      return newSkill;
+    } catch (error) {
+      console.error('Failed to create skill:', error);
+      throw error;
+    }
+  };
+
+  const handleCreateAutomation = async (config: any) => {
+    try {
+      const newAutomation = await window.electronAPI.automation.create(config);
+      setAutomations(prev => [...prev, newAutomation]);
+      return newAutomation;
+    } catch (error) {
+      console.error('Failed to create automation:', error);
+      throw error;
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-[var(--color-bg-primary)]" data-testid="app-loading">
+        <div className="flex flex-col items-center gap-4">
+          <div className="relative">
+            <div className="w-12 h-12 rounded-full border-2 border-neutral-200 border-t-neutral-800 animate-spin" />
+          </div>
+          <p className="text-sm text-neutral-500 animate-pulse">Loading Codex...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <I18nProvider>
+      <div className="flex h-screen bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] overflow-hidden selection:bg-neutral-900 selection:text-white" data-testid="app-container">
+        <Sidebar activeTab={activeTab} onTabChange={handleTabChange} />
+        
+        <div className="flex-1 flex flex-col min-w-0">
+          <Header 
+            activeTab={activeTab}
+            agents={agents}
+            onSettingsClick={() => handleTabChange('settings')}
+          />
+          
+          <main className="flex-1 overflow-hidden animate-fadeIn" data-testid="main-content">
+            <Routes>
+              <Route 
+                path="/" 
+                element={
+                  <AgentPanel 
+                    agents={agents}
+                    providers={providers}
+                    skills={skills}
+                    onCreateAgent={handleCreateAgent}
+                    onDeleteAgent={handleDeleteAgent}
+                  />
+                } 
+              />
+              <Route 
+                path="/code" 
+                element={
+                  <CodeWorkspace rootPath="/" />
+                } 
+              />
+              <Route 
+                path="/worktrees" 
+                element={
+                  <WorktreePanel 
+                    worktrees={worktrees}
+                    onCreateWorktree={handleCreateWorktree}
+                  />
+                } 
+              />
+              <Route 
+                path="/skills" 
+                element={
+                  <SkillsPanel 
+                    skills={skills}
+                    onCreateSkill={handleCreateSkill}
+                  />
+                } 
+              />
+              <Route 
+                path="/automations" 
+                element={
+                  <AutomationPanel 
+                    automations={automations}
+                    agents={agents}
+                    skills={skills}
+                    onCreateAutomation={handleCreateAutomation}
+                  />
+                } 
+              />
+              <Route 
+                path="/audit" 
+                element={<AuditTrailPanel />} 
+              />
+              <Route 
+                path="/settings" 
+                element={
+                  <SettingsPanel 
+                    settings={settings!}
+                    providers={providers}
+                    onSettingsChange={setSettings}
+                  />
+                } 
+              />
+            </Routes>
+          </main>
+        </div>
+      </div>
+    </I18nProvider>
+  );
+}
+
+export default App;

package/src/renderer/components/AdvancedSettingsPanel.tsx

@@ -0,0 +1,225 @@
+import React, { useState } from 'react';
+import { Folder, GitBranch, Zap, Save, RotateCcw } from 'lucide-react';
+
+export interface WorktreeSettings {
+  worktreeLocation: string;
+  branchPrefix: string;
+  autoCleanup: boolean;
+  maxWorktrees: number;
+}
+
+export interface SessionSettings {
+  contextCompactionThreshold: number;
+  autoCompact: boolean;
+  compactOnClose: boolean;
+}
+
+interface AdvancedSettingsPanelProps {
+  worktreeSettings: WorktreeSettings;
+  sessionSettings: SessionSettings;
+  onWorktreeSettingsChange: (settings: Partial<WorktreeSettings>) => void;
+  onSessionSettingsChange: (settings: Partial<SessionSettings>) => void;
+  onSave: () => void;
+  onReset: () => void;
+}
+
+function cn(...inputs: (string | undefined | null | boolean)[]): string {
+  return inputs.filter(Boolean).join(' ');
+}
+
+export const AdvancedSettingsPanel: React.FC<AdvancedSettingsPanelProps> = ({
+  worktreeSettings,
+  sessionSettings,
+  onWorktreeSettingsChange,
+  onSessionSettingsChange,
+  onSave,
+  onReset,
+}) => {
+  const [activeTab, setActiveTab] = useState<'worktree' | 'session'>('worktree');
+
+  return (
+    <div className="flex flex-col h-full bg-card">
+      <div className="px-4 py-3 border-b border-border">
+        <div className="flex items-center gap-2">
+          <Zap className="w-5 h-5" />
+          <h2 className="text-lg font-semibold">Advanced Settings</h2>
+        </div>
+      </div>
+
+      <div className="px-4 py-2 border-b border-border">
+        <div className="flex gap-2">
+          <button
+            onClick={() => setActiveTab('worktree')}
+            className={cn(
+              'px-4 py-2 text-sm rounded-lg transition-colors',
+              activeTab === 'worktree'
+                ? 'bg-primary text-primary-foreground'
+                : 'hover:bg-muted'
+            )}
+          >
+            <GitBranch className="w-4 h-4 inline mr-2" />
+            Worktree
+          </button>
+          <button
+            onClick={() => setActiveTab('session')}
+            className={cn(
+              'px-4 py-2 text-sm rounded-lg transition-colors',
+              activeTab === 'session'
+                ? 'bg-primary text-primary-foreground'
+                : 'hover:bg-muted'
+            )}
+          >
+            <Zap className="w-4 h-4 inline mr-2" />
+            Session
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4">
+        {activeTab === 'worktree' && (
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label className="flex items-center gap-2 text-sm font-medium">
+                <Folder className="w-4 h-4" />
+                Worktree Location
+              </label>
+              <input
+                type="text"
+                value={worktreeSettings.worktreeLocation}
+                onChange={(e) => onWorktreeSettingsChange({ worktreeLocation: e.target.value })}
+                className="w-full px-3 py-2 bg-muted border border-input rounded-lg text-sm"
+                placeholder=".claude/worktrees"
+              />
+              <p className="text-xs text-muted-foreground">
+                Directory where Git worktrees will be created
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <label className="flex items-center gap-2 text-sm font-medium">
+                <GitBranch className="w-4 h-4" />
+                Branch Prefix
+              </label>
+              <input
+                type="text"
+                value={worktreeSettings.branchPrefix}
+                onChange={(e) => onWorktreeSettingsChange({ branchPrefix: e.target.value })}
+                className="w-full px-3 py-2 bg-muted border border-input rounded-lg text-sm"
+                placeholder="claude-"
+              />
+              <p className="text-xs text-muted-foreground">
+                Prefix added to all Claude-created branches
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Max Worktrees</label>
+              <input
+                type="number"
+                min="1"
+                max="50"
+                value={worktreeSettings.maxWorktrees}
+                onChange={(e) => onWorktreeSettingsChange({ maxWorktrees: parseInt(e.target.value) || 10 })}
+                className="w-full px-3 py-2 bg-muted border border-input rounded-lg text-sm"
+              />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div>
+                <label className="text-sm font-medium">Auto Cleanup</label>
+                <p className="text-xs text-muted-foreground">
+                  Automatically remove worktrees when session ends
+                </p>
+              </div>
+              <label className="relative inline-flex items-center cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={worktreeSettings.autoCleanup}
+                  onChange={(e) => onWorktreeSettingsChange({ autoCleanup: e.target.checked })}
+                  className="sr-only peer"
+                />
+                <div className="w-11 h-6 bg-muted rounded-full peer peer-checked:bg-primary after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full"></div>
+              </label>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'session' && (
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                Context Compaction Threshold: {Math.round(sessionSettings.contextCompactionThreshold * 100)}%
+              </label>
+              <input
+                type="range"
+                min="0.5"
+                max="1"
+                step="0.05"
+                value={sessionSettings.contextCompactionThreshold}
+                onChange={(e) => onSessionSettingsChange({ contextCompactionThreshold: parseFloat(e.target.value) })}
+                className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer"
+              />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div>
+                <label className="text-sm font-medium">Auto Compact</label>
+              </div>
+              <label className="relative inline-flex items-center cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={sessionSettings.autoCompact}
+                  onChange={(e) => onSessionSettingsChange({ autoCompact: e.target.checked })}
+                  className="sr-only peer"
+                />
+                <div className="w-11 h-6 bg-muted rounded-full peer peer-checked:bg-primary after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full"></div>
+              </label>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div>
+                <label className="text-sm font-medium">Compact on Close</label>
+              </div>
+              <label className="relative inline-flex items-center cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={sessionSettings.compactOnClose}
+                  onChange={(e) => onSessionSettingsChange({ compactOnClose: e.target.checked })}
+                  className="sr-only peer"
+                />
+                <div className="w-11 h-6 bg-muted rounded-full peer peer-checked:bg-primary after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full"></div>
+              </label>
+            </div>
+
+            <div className="p-3 bg-muted rounded-lg">
+              <p className="text-sm font-medium mb-1">Manual Compaction</p>
+              <p className="text-xs text-muted-foreground">
+                Type <code className="px-1 py-0.5 bg-background rounded">/compact</code> to manually trigger context compaction.
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="px-4 py-3 border-t border-border flex items-center justify-between">
+        <button
+          onClick={onReset}
+          className="flex items-center gap-2 px-4 py-2 text-sm text-muted-foreground hover:text-foreground rounded-lg hover:bg-muted transition-colors"
+        >
+          <RotateCcw className="w-4 h-4" />
+          Reset
+        </button>
+        
+        <button
+          onClick={onSave}
+          className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
+        >
+          <Save className="w-4 h-4" />
+          Save
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AdvancedSettingsPanel;