codex-linux 1.0.0

package/src/renderer/components/CodeReviewPanel.tsx

@@ -0,0 +1,256 @@
+import React, { useState } from 'react';
+import { GitPullRequest, CheckCircle, XCircle, AlertTriangle, Loader2, Send, MessageSquare } from 'lucide-react';
+
+export interface CodeChange {
+  id: string;
+  filePath: string;
+  diff: string;
+  status: 'pending' | 'approved' | 'rejected';
+}
+
+export interface ReviewComment {
+  id: string;
+  lineNumber: number;
+  content: string;
+  author: string;
+  createdAt: Date;
+}
+
+export interface ReviewResult {
+  issues: ReviewIssue[];
+  summary: string;
+  timestamp: Date;
+}
+
+export interface ReviewIssue {
+  severity: 'error' | 'warning' | 'info';
+  category: 'security' | 'logic' | 'performance' | 'style' | 'bug';
+  message: string;
+  line?: number;
+  file: string;
+}
+
+interface CodeReviewPanelProps {
+  changes: CodeChange[];
+  isReviewing: boolean;
+  reviewResult?: ReviewResult;
+  onStartReview: () => void;
+  onApproveChange: (changeId: string) => void;
+  onRejectChange: (changeId: string) => void;
+  onAddComment: (changeId: string, lineNumber: number, comment: string) => void;
+  onResolveComment: (commentId: string) => void;
+}
+
+function cn(...inputs: (string | undefined | null | boolean)[]): string {
+  return inputs.filter(Boolean).join(' ');
+}
+
+const getSeverityIcon = (severity: ReviewIssue['severity']) => {
+  switch (severity) {
+    case 'error':
+      return <XCircle className="w-4 h-4 text-red-500" />;
+    case 'warning':
+      return <AlertTriangle className="w-4 h-4 text-yellow-500" />;
+    case 'info':
+      return <MessageSquare className="w-4 h-4 text-blue-500" />;
+  }
+};
+
+const getCategoryColor = (category: ReviewIssue['category']): string => {
+  switch (category) {
+    case 'security':
+      return 'bg-red-500/10 text-red-500';
+    case 'logic':
+      return 'bg-purple-500/10 text-purple-500';
+    case 'performance':
+      return 'bg-orange-500/10 text-orange-500';
+    case 'bug':
+      return 'bg-yellow-500/10 text-yellow-500';
+    case 'style':
+      return 'bg-blue-500/10 text-blue-500';
+    default:
+      return 'bg-muted text-muted-foreground';
+  }
+};
+
+export const CodeReviewPanel: React.FC<CodeReviewPanelProps> = ({
+  changes,
+  isReviewing,
+  reviewResult,
+  onStartReview,
+  onApproveChange,
+  onRejectChange,
+  onAddComment,
+  onResolveComment,
+}) => {
+  const [selectedChange, setSelectedChange] = useState<string | null>(
+    changes.length > 0 ? changes[0].id : null
+  );
+
+  const currentChange = changes.find(c => c.id === selectedChange);
+
+  const errorCount = reviewResult?.issues.filter(i => i.severity === 'error').length || 0;
+  const warningCount = reviewResult?.issues.filter(i => i.severity === 'warning').length || 0;
+
+  return (
+    <div className="flex flex-col h-full bg-card">
+      {/* Header */}
+      <div className="px-4 py-3 border-b border-border">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <GitPullRequest className="w-5 h-5" />
+            <h3 className="font-semibold">Code Review</h3>
+          </div>
+          
+          <button
+            onClick={onStartReview}
+            disabled={isReviewing || changes.length === 0}
+            className={cn(
+              'flex items-center gap-2 px-4 py-2 rounded-md text-sm transition-colors',
+              isReviewing
+                ? 'bg-muted text-muted-foreground cursor-not-allowed'
+                : 'bg-primary text-primary-foreground hover:bg-primary/90'
+            )}
+          >
+            {isReviewing ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Reviewing...
+              </>
+            ) : (
+              <>
+                <Send className="w-4 h-4" />
+                Review Code
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Review Summary */}
+      {reviewResult && (
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <div className="flex items-center gap-4 mb-2">
+            <div className="flex items-center gap-1.5">
+              <XCircle className="w-4 h-4 text-red-500" />
+              <span className="text-sm font-medium">{errorCount} errors</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <AlertTriangle className="w-4 h-4 text-yellow-500" />
+              <span className="text-sm font-medium">{warningCount} warnings</span>
+            </div>
+          </div>
+          <p className="text-sm text-muted-foreground">{reviewResult.summary}</p>
+        </div>
+      )}
+
+      {/* Issues List */}
+      {reviewResult && reviewResult.issues.length > 0 && (
+        <div className="px-4 py-3 border-b border-border max-h-48 overflow-y-auto">
+          <h4 className="text-sm font-medium mb-2">Issues Found</h4>
+          <div className="space-y-2">
+            {reviewResult.issues.map((issue, idx) => (
+              <div
+                key={idx}
+                className={cn(
+                  'flex items-start gap-2 p-2 rounded-lg',
+                  issue.severity === 'error' && 'bg-red-500/10',
+                  issue.severity === 'warning' && 'bg-yellow-500/10',
+                  issue.severity === 'info' && 'bg-blue-500/10'
+                )}
+              >
+                {getSeverityIcon(issue.severity)}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className={cn('text-xs px-1.5 py-0.5 rounded', getCategoryColor(issue.category))}>
+                      {issue.category}
+                    </span>
+                    <span className="text-sm font-medium truncate">{issue.file}</span>
+                    {issue.line && (
+                      <span className="text-xs text-muted-foreground">line {issue.line}</span>
+                    )}
+                  </div>
+                  <p className="text-sm mt-0.5">{issue.message}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Changes List */}
+      <div className="flex-1 overflow-y-auto">
+        {changes.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-muted-foreground p-4">
+            <GitPullRequest className="w-12 h-12 mb-4 opacity-30" />
+            <p className="text-sm">No changes to review</p>
+          </div>
+        ) : (
+          <div className="divide-y divide-border">
+            {changes.map((change) => (
+              <div
+                key={change.id}
+                onClick={() => setSelectedChange(change.id)}
+                className={cn(
+                  'p-3 cursor-pointer transition-colors',
+                  selectedChange === change.id
+                    ? 'bg-primary/10'
+                    : 'hover:bg-muted/50'
+                )}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <span className="text-sm font-medium truncate">{change.filePath}</span>
+                    {change.status === 'approved' && (
+                      <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0" />
+                    )}
+                    {change.status === 'rejected' && (
+                      <XCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Actions */}
+      {currentChange && (
+        <div className="px-4 py-3 border-t border-border">
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => onApproveChange(currentChange.id)}
+              disabled={currentChange.status === 'approved'}
+              className={cn(
+                'flex items-center gap-2 px-3 py-1.5 rounded-md text-sm transition-colors',
+                currentChange.status === 'approved'
+                  ? 'bg-green-500/20 text-green-500 cursor-not-allowed'
+                  : 'hover:bg-green-500/10 text-green-500'
+              )}
+            >
+              <CheckCircle className="w-4 h-4" />
+              Approve
+            </button>
+            
+            <button
+              onClick={() => onRejectChange(currentChange.id)}
+              disabled={currentChange.status === 'rejected'}
+              className={cn(
+                'flex items-center gap-2 px-3 py-1.5 rounded-md text-sm transition-colors',
+                currentChange.status === 'rejected'
+                  ? 'bg-red-500/20 text-red-500 cursor-not-allowed'
+                  : 'hover:bg-red-500/10 text-red-500'
+              )}
+            >
+              <XCircle className="w-4 h-4" />
+              Reject
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CodeReviewPanel;

package/src/renderer/components/CodeWorkspace.tsx

@@ -0,0 +1,192 @@
+import React, { useState, useCallback } from 'react';
+import { FileExplorer } from './FileExplorer';
+import { CodeEditor } from './CodeEditor';
+import { SplitPane } from './SplitPane';
+import { X, FileCode } from 'lucide-react';
+import { Button } from './ui/Button';
+
+interface CodeWorkspaceProps {
+  rootPath?: string;
+}
+
+export const CodeWorkspace: React.FC<CodeWorkspaceProps> = ({ rootPath = '/' }) => {
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [fileContent, setFileContent] = useState<string>('');
+  const [fileLanguage, setFileLanguage] = useState<string>('plaintext');
+  const [isLoading, setIsLoading] = useState(false);
+  const [openFiles, setOpenFiles] = useState<string[]>([]);
+  const [activeFile, setActiveFile] = useState<string | null>(null);
+
+  const getLanguageFromPath = (path: string): string => {
+    const ext = path.split('.').pop()?.toLowerCase();
+    const langMap: Record<string, string> = {
+      'ts': 'typescript',
+      'tsx': 'typescript',
+      'js': 'javascript',
+      'jsx': 'javascript',
+      'json': 'json',
+      'html': 'html',
+      'htm': 'html',
+      'css': 'css',
+      'scss': 'scss',
+      'less': 'less',
+      'md': 'markdown',
+      'mdx': 'markdown',
+      'py': 'python',
+      'rs': 'rust',
+      'go': 'go',
+      'java': 'java',
+      'c': 'c',
+      'cpp': 'cpp',
+      'h': 'c',
+      'hpp': 'cpp',
+      'cs': 'csharp',
+      'rb': 'ruby',
+      'php': 'php',
+      'sql': 'sql',
+      'yaml': 'yaml',
+      'yml': 'yaml',
+      'xml': 'xml',
+      'sh': 'shell',
+      'bash': 'shell',
+      'zsh': 'shell',
+      'dockerfile': 'dockerfile',
+      'toml': 'ini',
+      'ini': 'ini',
+    };
+    return langMap[ext || ''] || 'plaintext';
+  };
+
+  const handleFileSelect = useCallback(async (path: string) => {
+    if (openFiles.includes(path)) {
+      setActiveFile(path);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const content = await window.electronAPI.fs.readFile(path);
+      setFileContent(content);
+      setSelectedFile(path);
+      setFileLanguage(getLanguageFromPath(path));
+      setOpenFiles(prev => [...prev, path]);
+      setActiveFile(path);
+    } catch (error) {
+      console.error('Failed to read file:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [openFiles]);
+
+  const handleCloseFile = (path: string, e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    const newOpenFiles = openFiles.filter(f => f !== path);
+    setOpenFiles(newOpenFiles);
+    
+    if (activeFile === path) {
+      setActiveFile(newOpenFiles[newOpenFiles.length - 1] || null);
+    }
+  };
+
+  const handleSaveFile = useCallback(async (content: string) => {
+    if (!activeFile) return;
+    
+    try {
+      await window.electronAPI.fs.writeFile(activeFile, content);
+      setFileContent(content);
+    } catch (error) {
+      console.error('Failed to save file:', error);
+    }
+  }, [activeFile]);
+
+  const getFileName = (path: string): string => {
+    return path.split('/').pop() || path;
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Tab Bar */}
+      {openFiles.length > 0 && (
+        <div className="flex items-center bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)] overflow-x-auto">
+          {openFiles.map(file => (
+            <div
+              key={file}
+              onClick={() => setActiveFile(file)}
+              className={`flex items-center gap-2 px-3 py-2 text-sm cursor-pointer border-r border-[var(--color-border)] min-w-0 ${
+                activeFile === file 
+                  ? 'bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]' 
+                  : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-tertiary)]'
+              }`}
+            >
+              <FileCode className="w-4 h-4 flex-shrink-0" />
+              <span className="truncate max-w-32">{getFileName(file)}</span>
+              <button
+                onClick={(e) => handleCloseFile(file, e)}
+                className="ml-1 p-0.5 hover:bg-[var(--color-bg-tertiary)] rounded"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Editor Area */}
+      <div className="flex-1 flex overflow-hidden">
+        <SplitPane
+          direction="horizontal"
+          defaultRatio={0.2}
+          minSize={150}
+          maxSize={400}
+        >
+          <div className="h-full overflow-hidden">
+            <FileExplorer
+              rootPath={rootPath}
+              onFileSelect={handleFileSelect}
+              selectedFile={selectedFile || undefined}
+            />
+          </div>
+          
+          <div className="h-full overflow-hidden bg-[var(--color-bg-primary)]">
+            {activeFile ? (
+              <CodeEditor
+                value={fileContent}
+                language={fileLanguage}
+                onChange={(value) => setFileContent(value || '')}
+                onSave={handleSaveFile}
+                height="100%"
+                dataTestid="code-workspace-editor"
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full text-[var(--color-text-muted)]">
+                <div className="text-center">
+                  <FileCode className="w-16 h-16 mx-auto mb-4 opacity-30" />
+                  <p>Select a file to edit</p>
+                  <p className="text-sm mt-2">Or use the file explorer to browse</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </SplitPane>
+      </div>
+
+      {/* Status Bar */}
+      <div className="flex items-center justify-between px-3 py-1 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border)] text-xs text-[var(--color-text-secondary)]">
+        <div className="flex items-center gap-4">
+          {activeFile && (
+            <>
+              <span>{getFileName(activeFile)}</span>
+              <span>{fileLanguage}</span>
+              <span>{fileContent.split('\n').length} lines</span>
+            </>
+          )}
+        </div>
+        <div>
+          {isLoading && <span className="text-[var(--color-accent)]">Loading...</span>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CodeWorkspace;