codex-linux 1.0.0

package/src/renderer/components/FileExplorerPanel.tsx

@@ -0,0 +1,302 @@
+import React, { useState, useCallback } from 'react';
+import { FileCode, FolderOpen, X, Save, Plus, File, ChevronRight, ChevronDown, Search } from 'lucide-react';
+
+export interface FileItem {
+  name: string;
+  path: string;
+  type: 'file' | 'folder';
+  children?: FileItem[];
+  content?: string;
+}
+
+interface FileExplorerPanelProps {
+  files: FileItem[];
+  selectedFile: string | null;
+  onFileSelect: (path: string) => void;
+  onFileCreate: (path: string, type: 'file' | 'folder') => void;
+  onFileDelete: (path: string) => void;
+  onFileRename: (oldPath: string, newPath: string) => void;
+}
+
+function cn(...inputs: (string | undefined | null | boolean)[]): string {
+  return inputs.filter(Boolean).join(' ');
+}
+
+const FileIcon = ({ type, isOpen }: { type: 'file' | 'folder'; isOpen: boolean }) => {
+  if (type === 'folder') {
+    return isOpen ? (
+      <FolderOpen className="w-4 h-4 text-yellow-500" />
+    ) : (
+      <FolderOpen className="w-4 h-4 text-yellow-500" />
+    );
+  }
+  return <File className="w-4 h-4 text-muted-foreground" />;
+};
+
+export const FileExplorerPanel: React.FC<FileExplorerPanelProps> = ({
+  files,
+  selectedFile,
+  onFileSelect,
+  onFileCreate,
+  onFileDelete,
+  onFileRename,
+}) => {
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showNewFileInput, setShowNewFileInput] = useState<string | null>(null);
+  const [newFileName, setNewFileName] = useState('');
+  const [newFileType, setNewFileType] = useState<'file' | 'folder'>('file');
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; path: string } | null>(null);
+  const [editingFile, setEditingFile] = useState<string | null>(null);
+  const [editName, setEditName] = useState('');
+
+  const toggleFolder = (path: string) => {
+    setExpandedFolders(prev => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
+
+  const handleCreateFile = (parentPath: string) => {
+    if (!newFileName.trim()) return;
+    const fullPath = parentPath ? `${parentPath}/${newFileName}` : newFileName;
+    onFileCreate(fullPath, newFileType);
+    setShowNewFileInput(null);
+    setNewFileName('');
+  };
+
+  const handleRename = (path: string) => {
+    if (!editName.trim()) return;
+    onFileRename(path, editName);
+    setEditingFile(null);
+    setEditName('');
+  };
+
+  const handleContextMenu = (e: React.MouseEvent, path: string) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY, path });
+  };
+
+  const filterFiles = (items: FileItem[], query: string): FileItem[] => {
+    if (!query) return items;
+    return items.filter(item => {
+      if (item.name.toLowerCase().includes(query.toLowerCase())) return true;
+      if (item.children) {
+        const filtered = filterFiles(item.children, query);
+        return filtered.length > 0;
+      }
+      return false;
+    });
+  };
+
+  const renderFile = (item: FileItem, depth: number = 0) => {
+    const isFolder = item.type === 'folder';
+    const isExpanded = expandedFolders.has(item.path);
+    const isSelected = selectedFile === item.path;
+    const isEditing = editingFile === item.path;
+
+    return (
+      <div key={item.path}>
+        <div
+          className={cn(
+            'flex items-center gap-1 px-2 py-1 cursor-pointer rounded-md transition-colors group',
+            isSelected && 'bg-primary/10 text-primary',
+            !isSelected && 'hover:bg-muted'
+          )}
+          style={{ paddingLeft: `${depth * 12 + 8}px` }}
+          onClick={() => {
+            if (isFolder) {
+              toggleFolder(item.path);
+            } else {
+              onFileSelect(item.path);
+            }
+          }}
+          onContextMenu={(e) => handleContextMenu(e, item.path)}
+        >
+          {isFolder ? (
+            <button className="p-0.5 hover:bg-muted rounded">
+              {isExpanded ? (
+                <ChevronDown className="w-3 h-3" />
+              ) : (
+                <ChevronRight className="w-3 h-3" />
+              )}
+            </button>
+          ) : (
+            <span className="w-4" />
+          )}
+          
+          <FileIcon type={item.type} isOpen={isExpanded} />
+          
+          {isEditing ? (
+            <input
+              type="text"
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+              onBlur={() => handleRename(item.path)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleRename(item.path);
+                if (e.key === 'Escape') setEditingFile(null);
+              }}
+              className="flex-1 px-1 py-0.5 text-sm bg-background border border-input rounded"
+              autoFocus
+              onClick={(e) => e.stopPropagation()}
+            />
+          ) : (
+            <span className="flex-1 text-sm truncate">{item.name}</span>
+          )}
+          
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setContextMenu(null);
+              setShowNewFileInput(item.path);
+            }}
+            className="opacity-0 group-hover:opacity-100 p-1 hover:bg-muted rounded transition-opacity"
+          >
+            <Plus className="w-3 h-3" />
+          </button>
+        </div>
+        
+        {isFolder && isExpanded && item.children && (
+          <div>
+            {item.children.map(child => renderFile(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const filteredFiles = filterFiles(files, searchQuery);
+
+  return (
+    <div className="flex flex-col h-full bg-card">
+      {/* Header */}
+      <div className="px-3 py-2 border-b border-border">
+        <div className="flex items-center gap-2 mb-2">
+          <FileCode className="w-4 h-4" />
+          <span className="text-sm font-medium">Files</span>
+        </div>
+        
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search files..."
+            className="w-full pl-8 pr-3 py-1.5 bg-muted border-0 rounded-md text-xs"
+          />
+        </div>
+      </div>
+
+      {/* File Tree */}
+      <div className="flex-1 overflow-auto p-2">
+        {filteredFiles.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <FolderOpen className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">No files</p>
+          </div>
+        ) : (
+          filteredFiles.map(file => renderFile(file))
+        )}
+        
+        {/* New file input */}
+        {showNewFileInput !== null && (
+          <div className="px-2 py-1">
+            <div className="flex items-center gap-1">
+              <FileIcon type={newFileType} isOpen={false} />
+              <input
+                type="text"
+                value={newFileName}
+                onChange={(e) => setNewFileName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleCreateFile(showNewFileInput);
+                  if (e.key === 'Escape') setShowNewFileInput(null);
+                }}
+                onBlur={() => handleCreateFile(showNewFileInput)}
+                placeholder={newFileType === 'file' ? 'filename.ext' : 'folder name'}
+                className="flex-1 px-2 py-1 text-sm bg-background border border-input rounded"
+                autoFocus
+              />
+              <button
+                onClick={() => setNewFileType(newFileType === 'file' ? 'folder' : 'file')}
+                className="p-1 hover:bg-muted rounded text-xs"
+              >
+                {newFileType === 'file' ? 'Folder' : 'File'}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Root actions */}
+      <div className="px-3 py-2 border-t border-border flex gap-2">
+        <button
+          onClick={() => {
+            setShowNewFileInput('');
+            setNewFileType('file');
+          }}
+          className="flex items-center gap-1 px-2 py-1 text-xs hover:bg-muted rounded transition-colors"
+        >
+          <Plus className="w-3 h-3" />
+          New File
+        </button>
+        <button
+          onClick={() => {
+            setShowNewFileInput('');
+            setNewFileType('folder');
+          }}
+          className="flex items-center gap-1 px-2 py-1 text-xs hover:bg-muted rounded transition-colors"
+        >
+          <Plus className="w-3 h-3" />
+          New Folder
+        </button>
+      </div>
+
+      {/* Context Menu */}
+      {contextMenu && (
+        <>
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setContextMenu(null)}
+          />
+          <div
+            className="fixed z-50 bg-background border border-border rounded-md shadow-lg py-1 min-w-[140px]"
+            style={{ left: contextMenu.x, top: contextMenu.y }}
+          >
+            <button
+              onClick={() => {
+                const file = files.find(f => f.path === contextMenu.path);
+                if (file) {
+                  setEditingFile(contextMenu.path);
+                  setEditName(file.name);
+                }
+                setContextMenu(null);
+              }}
+              className="w-full px-3 py-1.5 text-left text-sm hover:bg-muted flex items-center gap-2"
+            >
+              Rename
+            </button>
+            <button
+              onClick={() => {
+                onFileDelete(contextMenu.path);
+                setContextMenu(null);
+              }}
+              className="w-full px-3 py-1.5 text-left text-sm hover:bg-muted flex items-center gap-2 text-red-500"
+            >
+              Delete
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default FileExplorerPanel;

package/src/renderer/components/GitPanel.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { GitCommit, GitBranch, GitPullRequest, Check, X, FileText, RefreshCw } from 'lucide-react';
+
+interface GitPanelProps {
+  repoPath: string;
+  onCommit: (message: string) => void;
+}
+
+export const GitPanel: React.FC<GitPanelProps> = ({ repoPath, onCommit }) => {
+  const [stagedFiles, setStagedFiles] = useState<string[]>([]);
+  const [unstagedFiles, setUnstagedFiles] = useState<string[]>([]);
+  const [commitMessage, setCommitMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
+
+  const loadStatus = async () => {
+    setIsLoading(true);
+    try {
+      const status = await window.electronAPI.git.status(repoPath);
+      setStagedFiles(status.staged);
+      setUnstagedFiles(status.unstaged);
+    } catch (error) {
+      console.error('Failed to load git status:', error);
+    }
+    setIsLoading(false);
+  };
+
+  const handleStage = async (file: string) => {
+    // In a real implementation, this would call git add
+    setUnstagedFiles(prev => prev.filter(f => f !== file));
+    setStagedFiles(prev => [...prev, file]);
+  };
+
+  const handleUnstage = async (file: string) => {
+    setStagedFiles(prev => prev.filter(f => f !== file));
+    setUnstagedFiles(prev => [...prev, file]);
+  };
+
+  const handleCommit = async () => {
+    if (!commitMessage.trim() || stagedFiles.length === 0) return;
+    
+    try {
+      await window.electronAPI.git.commit({
+        repoPath,
+        message: commitMessage,
+        files: stagedFiles
+      });
+      setCommitMessage('');
+      setStagedFiles([]);
+      onCommit(commitMessage);
+    } catch (error) {
+      console.error('Failed to commit:', error);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-card">
+      {/* Header */}
+      <div className="px-4 py-3 border-b border-border flex items-center justify-between bg-background/50">
+        <div className="flex items-center gap-2">
+          <GitBranch className="w-5 h-5 text-muted-foreground" />
+          <span className="font-medium">Git</span>
+        </div>
+        <button
+          onClick={loadStatus}
+          disabled={isLoading}
+          className="p-2 hover:bg-muted rounded-md disabled:opacity-50"
+        >
+          <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
+        </button>
+      </div>
+
+      {/* Staged Changes */}
+      <div className="flex-1 overflow-auto p-4">
+        {stagedFiles.length > 0 && (
+          <div className="mb-6">
+            <h3 className="text-sm font-medium text-green-500 mb-2 flex items-center gap-2">
+              <Check className="w-4 h-4" />
+              Staged Changes ({stagedFiles.length})
+            </h3>
+            <div className="space-y-1">
+              {stagedFiles.map(file => (
+                <div
+                  key={file}
+                  className="flex items-center gap-2 px-3 py-2 bg-green-500/5 rounded-md group"
+                >
+                  <FileText className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-sm flex-1 truncate">{file}</span>
+                  <button
+                    onClick={() => handleUnstage(file)}
+                    className="opacity-0 group-hover:opacity-100 p-1 hover:bg-red-500/10 text-red-500 rounded"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {unstagedFiles.length > 0 && (
+          <div>
+            <h3 className="text-sm font-medium text-muted-foreground mb-2">
+              Changes ({unstagedFiles.length})
+            </h3>
+            <div className="space-y-1">
+              {unstagedFiles.map(file => (
+                <div
+                  key={file}
+                  className="flex items-center gap-2 px-3 py-2 hover:bg-muted rounded-md group cursor-pointer"
+                  onClick={() => handleStage(file)}
+                >
+                  <FileText className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-sm flex-1 truncate">{file}</span>
+                  <button className="opacity-0 group-hover:opacity-100 p-1 hover:bg-green-500/10 text-green-500 rounded">
+                    <Check className="w-3 h-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {stagedFiles.length === 0 && unstagedFiles.length === 0 && (
+          <div className="text-center py-8 text-muted-foreground">
+            <GitCommit className="w-12 h-12 mx-auto mb-2 opacity-30" />
+            <p className="text-sm">No changes</p>
+            <p className="text-xs mt-1">Working tree clean</p>
+          </div>
+        )}
+      </div>
+
+      {/* Commit Section */}
+      {stagedFiles.length > 0 && (
+        <div className="p-4 border-t border-border bg-background/50">
+          <textarea
+            value={commitMessage}
+            onChange={e => setCommitMessage(e.target.value)}
+            placeholder="Commit message..."
+            className="w-full px-3 py-2 bg-background border border-input rounded-md text-sm resize-none h-20 mb-3"
+          />
+          <button
+            onClick={handleCommit}
+            disabled={!commitMessage.trim()}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50"
+          >
+            <GitCommit className="w-4 h-4" />
+            Commit {stagedFiles.length} files
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/Header.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Agent } from '../../shared/types';
+import { Bot, MoreVertical, Minus, Square, X, Search } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { VoiceCommand } from './VoiceCommand';
+
+interface HeaderProps {
+  activeTab: string;
+  agents: Agent[];
+  onSettingsClick: () => void;
+}
+
+export const Header: React.FC<HeaderProps> = ({ activeTab, agents, onSettingsClick }) => {
+  const runningAgents = agents.filter(a => a.status === 'running').length;
+
+  const handleVoiceCommand = (transcript: string) => {
+    console.log('Voice command:', transcript);
+  };
+
+  const getTitle = () => {
+    switch (activeTab) {
+      case 'agents': return 'Agents';
+      case 'worktrees': return 'Worktrees';
+      case 'skills': return 'Skills';
+      case 'automations': return 'Automations';
+      case 'settings': return 'Settings';
+      default: return 'Codex';
+    }
+  };
+
+  const getDescription = () => {
+    switch (activeTab) {
+      case 'agents': return 'Manage your AI coding agents';
+      case 'worktrees': return 'Isolated Git workspaces';
+      case 'skills': return 'Reusable AI capabilities';
+      case 'automations': return 'Scheduled tasks and workflows';
+      case 'settings': return 'Configure your preferences';
+      default: return '';
+    }
+  };
+
+  const handleMinimize = () => {
+    window.electronAPI.window.minimize();
+  };
+
+  const handleMaximize = () => {
+    window.electronAPI.window.maximize();
+  };
+
+  const handleClose = () => {
+    window.electronAPI.window.close();
+  };
+
+  return (
+    <header className="h-16 border-b border-[var(--color-border)] bg-[var(--color-bg-elevated)] flex items-center justify-between px-6" data-testid="app-header">
+      <div className="flex items-center gap-6">
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight text-[var(--color-text-primary)]" data-testid="page-title">
+            {getTitle()}
+          </h1>
+          <p className="text-xs text-[var(--color-text-tertiary)]">
+            {getDescription()}
+          </p>
+        </div>
+        
+        {activeTab === 'agents' && runningAgents > 0 && (
+          <div className="flex items-center gap-2 px-3 py-1.5 bg-green-50 text-green-700 rounded-full text-xs font-medium" data-testid="running-agents-badge">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+            </span>
+            {runningAgents} running
+          </div>
+        )}
+
+        {/* Search */}
+        <div className="relative hidden md:block">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
+          <input
+            type="text"
+            placeholder="Search..."
+            className="pl-9 pr-4 py-2 bg-neutral-100 border-0 rounded-lg text-sm w-64 focus:ring-2 focus:ring-neutral-200 transition-all"
+            data-testid="search-input"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-1">
+        <button
+          onClick={handleMinimize}
+          className="p-2 hover:bg-neutral-100 rounded-lg text-neutral-500 hover:text-neutral-900 transition-colors"
+          data-testid="window-minimize"
+        >
+          <Minus className="w-4 h-4" />
+        </button>
+        <button
+          onClick={handleMaximize}
+          className="p-2 hover:bg-neutral-100 rounded-lg text-neutral-500 hover:text-neutral-900 transition-colors"
+          data-testid="window-maximize"
+        >
+          <Square className="w-4 h-4" />
+        </button>
+        <button
+          onClick={handleClose}
+          className="p-2 hover:bg-red-50 hover:text-red-600 rounded-lg text-neutral-500 transition-colors"
+          data-testid="window-close"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+    </header>
+  );
+};