codex-linux 1.0.0

package/src/renderer/components/SearchReplace.tsx

@@ -0,0 +1,284 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Search, Replace, ChevronDown, ChevronUp, X, FileText } from 'lucide-react';
+import { debounce } from 'lodash';
+
+interface SearchReplaceProps {
+  rootPath: string;
+  onClose: () => void;
+}
+
+interface SearchMatch {
+  file: string;
+  line: number;
+  column: number;
+  content: string;
+}
+
+export const SearchReplace: React.FC<SearchReplaceProps> = ({
+  rootPath,
+  onClose,
+}) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [replaceQuery, setReplaceQuery] = useState('');
+  const [isRegex, setIsRegex] = useState(false);
+  const [caseSensitive, setCaseSensitive] = useState(false);
+  const [wholeWord, setWholeWord] = useState(false);
+  const [filePattern, setFilePattern] = useState('*');
+  const [matches, setMatches] = useState<SearchMatch[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
+  const [showReplace, setShowReplace] = useState(false);
+  const [includeIgnored, setIncludeIgnored] = useState(false);
+
+  const performSearch = useCallback(
+    debounce(async (query: string) => {
+      if (!query.trim()) {
+        setMatches([]);
+        return;
+      }
+
+      setIsSearching(true);
+      try {
+        const results = await window.electronAPI.search.files({
+          query,
+          path: rootPath,
+          pattern: filePattern !== '*' ? filePattern : undefined,
+        });
+
+        const allMatches: SearchMatch[] = [];
+        results.forEach((result: any) => {
+          result.matches.forEach((match: any) => {
+            allMatches.push({
+              file: result.path,
+              line: match.line,
+              column: match.content.indexOf(query) + 1,
+              content: match.content,
+            });
+          });
+        });
+
+        setMatches(allMatches);
+        setCurrentMatchIndex(0);
+      } catch (error) {
+        console.error('Search failed:', error);
+      }
+      setIsSearching(false);
+    }, 300),
+    [rootPath, filePattern]
+  );
+
+  useEffect(() => {
+    performSearch(searchQuery);
+  }, [searchQuery, performSearch]);
+
+  const handleReplace = async () => {
+    if (!replaceQuery.trim() || matches.length === 0) return;
+
+    let replaced = 0;
+    for (const match of matches) {
+      try {
+        const content = await window.electronAPI.fs.readFile(match.file);
+        const lines = content.split('\n');
+        
+        if (lines[match.line - 1]) {
+          const searchRegex = isRegex
+            ? new RegExp(searchQuery, caseSensitive ? 'g' : 'gi')
+            : new RegExp(
+                searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'),
+                caseSensitive ? 'g' : 'gi'
+              );
+          
+          lines[match.line - 1] = lines[match.line - 1].replace(
+            searchRegex,
+            replaceQuery
+          );
+          
+          await window.electronAPI.fs.writeFile(match.file, lines.join('\n'));
+          replaced++;
+        }
+      } catch (error) {
+        console.error(`Failed to replace in ${match.file}:`, error);
+      }
+    }
+
+    // Refresh search
+    performSearch(searchQuery);
+  };
+
+  const navigateMatch = (direction: 'prev' | 'next') => {
+    if (matches.length === 0) return;
+    
+    if (direction === 'next') {
+      setCurrentMatchIndex((prev) => (prev + 1) % matches.length);
+    } else {
+      setCurrentMatchIndex((prev) => (prev - 1 + matches.length) % matches.length);
+    }
+  };
+
+  const highlightMatch = (content: string, query: string) => {
+    if (!query) return content;
+    
+    const parts = content.split(new RegExp(`(${query})`, caseSensitive ? 'g' : 'gi'));
+    return parts.map((part, i) => 
+      part.toLowerCase() === query.toLowerCase() ? (
+        <mark key={i} className="bg-yellow-500/30 text-yellow-900 dark:text-yellow-100">
+          {part}
+        </mark>
+      ) : (
+        part
+      )
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-card border-l border-border">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border">
+        <h2 className="font-semibold">
+          {showReplace ? 'Search & Replace' : 'Search'}
+        </h2>
+        <button onClick={onClose} className="p-1 hover:bg-muted rounded">
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Search Input */}
+      <div className="p-4 space-y-3">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search..."
+            className="w-full pl-10 pr-4 py-2 bg-background border border-input rounded-md"
+            autoFocus
+          />
+        </div>
+
+        {/* Replace Input */}
+        {showReplace && (
+          <div className="relative">
+            <Replace className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <input
+              type="text"
+              value={replaceQuery}
+              onChange={(e) => setReplaceQuery(e.target.value)}
+              placeholder="Replace..."
+              className="w-full pl-10 pr-4 py-2 bg-background border border-input rounded-md"
+            />
+          </div>
+        )}
+
+        {/* Options */}
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={() => setIsRegex(!isRegex)}
+            className={`px-2 py-1 text-xs rounded ${
+              isRegex ? 'bg-primary text-primary-foreground' : 'bg-muted'
+            }`}
+          >
+            .*
+          </button>
+          <button
+            onClick={() => setCaseSensitive(!caseSensitive)}
+            className={`px-2 py-1 text-xs rounded ${
+              caseSensitive ? 'bg-primary text-primary-foreground' : 'bg-muted'
+            }`}
+          >
+            Aa
+          </button>
+          <button
+            onClick={() => setWholeWord(!wholeWord)}
+            className={`px-2 py-1 text-xs rounded ${
+              wholeWord ? 'bg-primary text-primary-foreground' : 'bg-muted'
+            }`}
+          >
+            ""
+          </button>
+          <button
+            onClick={() => setShowReplace(!showReplace)}
+            className="px-2 py-1 text-xs rounded bg-muted hover:bg-muted/80"
+          >
+            {showReplace ? 'Hide Replace' : 'Show Replace'}
+          </button>
+        </div>
+
+        {/* File Pattern */}
+        <input
+          type="text"
+          value={filePattern}
+          onChange={(e) => setFilePattern(e.target.value)}
+          placeholder="Files to include (e.g., *.ts)"
+          className="w-full px-3 py-2 bg-background border border-input rounded-md text-sm"
+        />
+
+        {/* Replace Actions */}
+        {showReplace && matches.length > 0 && (
+          <div className="flex gap-2">
+            <button
+              onClick={handleReplace}
+              className="flex-1 px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm hover:bg-primary/90"
+            >
+              Replace All ({matches.length})
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Results */}
+      <div className="flex-1 overflow-auto">
+        {isSearching ? (
+          <div className="flex items-center justify-center py-8 text-muted-foreground">
+            Searching...
+          </div>
+        ) : matches.length > 0 ? (
+          <div>
+            <div className="px-4 py-2 text-xs text-muted-foreground border-b border-border flex items-center justify-between">
+              <span>{matches.length} results</span>
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => navigateMatch('prev')}
+                  className="p-1 hover:bg-muted rounded"
+                >
+                  <ChevronUp className="w-3 h-3" />
+                </button>
+                <span>{currentMatchIndex + 1}</span>
+                <button
+                  onClick={() => navigateMatch('next')}
+                  className="p-1 hover:bg-muted rounded"
+                >
+                  <ChevronDown className="w-3 h-3" />
+                </button>
+              </div>
+            </div>
+
+            {matches.map((match, index) => (
+              <div
+                key={`${match.file}-${match.line}`}
+                className={`px-4 py-2 border-b border-border cursor-pointer ${
+                  index === currentMatchIndex ? 'bg-primary/10' : 'hover:bg-muted/50'
+                }`}
+                onClick={() => setCurrentMatchIndex(index)}
+              >
+                <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+                  <FileText className="w-3 h-3" />
+                  <span className="truncate">{match.file.replace(rootPath, '')}</span>
+                  <span>:{match.line}</span>
+                </div>
+                <code className="text-xs font-mono block truncate">
+                  {highlightMatch(match.content, searchQuery)}
+                </code>
+              </div>
+            ))}
+          </div>
+        ) : searchQuery ? (
+          <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+            <Search className="w-8 h-8 mb-2 opacity-30" />
+            <p className="text-sm">No results</p>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/SessionSidebar.tsx

@@ -0,0 +1,367 @@
+import React, { useState } from 'react';
+import {
+  Plus,
+  MoreHorizontal,
+  Cloud,
+  CloudOff,
+  Terminal,
+  Filter,
+  Archive,
+  Clock,
+  CheckCircle,
+  XCircle,
+  AlertCircle,
+  Loader2,
+  GitBranch,
+  Circle,
+  Pencil,
+  X,
+  Check
+} from 'lucide-react';
+
+export type SessionStatus = 'active' | 'archived' | 'running';
+export type SessionEnvironment = 'local' | 'cloud' | 'ssh';
+
+export interface Session {
+  id: string;
+  name: string;
+  projectPath: string;
+  environment: SessionEnvironment;
+  status: SessionStatus;
+  model?: string;
+  lastActivity: Date;
+  createdAt: Date;
+  branch?: string;
+  prMonitored?: number;
+  isLoading?: boolean;
+  ciStatus?: 'pending' | 'running' | 'success' | 'failure';
+}
+
+interface SessionSidebarProps {
+  sessions: Session[];
+  activeSessionId?: string;
+  onSessionSelect: (sessionId: string) => void;
+  onSessionNew: () => void;
+  onSessionArchive?: (sessionId: string) => void;
+  onSessionDelete?: (sessionId: string) => void;
+  onSessionRename?: (sessionId: string, newName: string) => void;
+}
+
+function cn(...inputs: (string | undefined | null | boolean)[]): string {
+  return inputs.filter(Boolean).join(' ');
+}
+
+export const SessionSidebar: React.FC<SessionSidebarProps> = ({
+  sessions,
+  activeSessionId,
+  onSessionSelect,
+  onSessionNew,
+  onSessionArchive,
+  onSessionDelete,
+  onSessionRename
+}) => {
+  const [filter, setFilter] = useState<'all' | 'active' | 'archived'>('all');
+  const [envFilter, setEnvFilter] = useState<'all' | 'local' | 'cloud' | 'ssh'>('all');
+  const [contextMenu, setContextMenu] = useState<string | null>(null);
+  const [renamingSession, setRenamingSession] = useState<string | null>(null);
+  const [newName, setNewName] = useState('');
+
+  const filteredSessions = sessions.filter(session => {
+    if (filter === 'active' && session.status !== 'active') return false;
+    if (filter === 'archived' && session.status !== 'archived') return false;
+    if (envFilter !== 'all' && session.environment !== envFilter) return false;
+    return true;
+  });
+
+  const getStatusIcon = (session: Session) => {
+    if (session.isLoading) {
+      return <Loader2 className="w-4 h-4 animate-spin text-blue-500" />;
+    }
+    switch (session.status) {
+      case 'active':
+        return <Circle className="w-4 h-4 fill-green-500 text-green-500" />;
+      case 'archived':
+        return <Archive className="w-4 h-4 text-muted-foreground" />;
+      default:
+        return <Clock className="w-4 h-4 text-muted-foreground" />;
+    }
+  };
+
+  const getEnvIcon = (env: SessionEnvironment) => {
+    switch (env) {
+      case 'cloud':
+        return <Cloud className="w-3.5 h-3.5 text-blue-500" />;
+      case 'ssh':
+        return <Terminal className="w-3.5 h-3.5 text-purple-500" />;
+      default:
+        return <CloudOff className="w-3.5 h-3.5 text-muted-foreground" />;
+    }
+  };
+
+  const getCIStatusIcon = (status?: Session['ciStatus']) => {
+    switch (status) {
+      case 'success':
+        return <CheckCircle className="w-3 h-3 text-green-500" />;
+      case 'failure':
+        return <XCircle className="w-3 h-3 text-red-500" />;
+      case 'running':
+        return <Loader2 className="w-3 h-3 text-blue-500 animate-spin" />;
+      case 'pending':
+        return <AlertCircle className="w-3 h-3 text-yellow-500" />;
+      default:
+        return null;
+    }
+  };
+
+  const formatTimeAgo = (date: Date) => {
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+
+    if (minutes < 1) return 'Just now';
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    return `${days}d ago`;
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-card border-r border-border w-72">
+      <div className="px-4 py-3 border-b border-border">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="font-semibold">Sessions</h3>
+          <button
+            onClick={onSessionNew}
+            className="p-1.5 hover:bg-muted rounded-md transition-colors"
+            title="New session"
+          >
+            <Plus className="w-4 h-4" />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1 bg-muted rounded-md p-0.5">
+            <button
+              onClick={() => setFilter('all')}
+              className={cn(
+                'px-2 py-1 text-xs rounded',
+                filter === 'all' ? 'bg-background shadow-sm' : 'text-muted-foreground'
+              )}
+            >
+              All
+            </button>
+            <button
+              onClick={() => setFilter('active')}
+              className={cn(
+                'px-2 py-1 text-xs rounded',
+                filter === 'active' ? 'bg-background shadow-sm' : 'text-muted-foreground'
+              )}
+            >
+              Active
+            </button>
+            <button
+              onClick={() => setFilter('archived')}
+              className={cn(
+                'px-2 py-1 text-xs rounded',
+                filter === 'archived' ? 'bg-background shadow-sm' : 'text-muted-foreground'
+              )}
+            >
+              Archived
+            </button>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1 mt-2">
+          <Filter className="w-3 h-3 text-muted-foreground" />
+          <select
+            value={envFilter}
+            onChange={(e) => setEnvFilter(e.target.value as typeof envFilter)}
+            className="text-xs bg-muted border-0 rounded px-2 py-1"
+          >
+            <option value="all">All environments</option>
+            <option value="local">Local</option>
+            <option value="cloud">Cloud</option>
+            <option value="ssh">SSH</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        {filteredSessions.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-muted-foreground p-4">
+            <p className="text-sm">No sessions found</p>
+            <button
+              onClick={onSessionNew}
+              className="mt-2 text-sm text-primary hover:underline"
+            >
+              Create a new session
+            </button>
+          </div>
+        ) : (
+          <div className="p-2 space-y-1">
+            {filteredSessions.map((session) => (
+              <div
+                key={session.id}
+                onClick={() => onSessionSelect(session.id)}
+                className={cn(
+                  'group relative p-3 rounded-lg cursor-pointer transition-all',
+                  activeSessionId === session.id
+                    ? 'bg-primary/10 border border-primary/30'
+                    : 'hover:bg-muted border border-transparent'
+                )}
+              >
+                {session.ciStatus && (
+                  <div className="absolute top-2 right-2">
+                    {getCIStatusIcon(session.ciStatus)}
+                  </div>
+                )}
+
+                <div className="flex items-start gap-2">
+                  {getStatusIcon(session)}
+                  
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      {renamingSession === session.id ? (
+                        <div className="flex items-center gap-1 flex-1">
+                          <input
+                            type="text"
+                            value={newName}
+                            onChange={(e) => setNewName(e.target.value)}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') {
+                                onSessionRename?.(session.id, newName);
+                                setRenamingSession(null);
+                              }
+                              if (e.key === 'Escape') {
+                                setRenamingSession(null);
+                              }
+                            }}
+                            onClick={(e) => e.stopPropagation()}
+                            className="flex-1 px-2 py-0.5 text-sm bg-background border border-input rounded"
+                            autoFocus
+                          />
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onSessionRename?.(session.id, newName);
+                              setRenamingSession(null);
+                            }}
+                            className="p-1 hover:bg-muted rounded"
+                          >
+                            <Check className="w-3 h-3 text-green-500" />
+                          </button>
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setRenamingSession(null);
+                            }}
+                            className="p-1 hover:bg-muted rounded"
+                          >
+                            <X className="w-3 h-3" />
+                          </button>
+                        </div>
+                      ) : (
+                        <>
+                          <span className="font-medium text-sm truncate">
+                            {session.name}
+                          </span>
+                          {getEnvIcon(session.environment)}
+                        </>
+                      )}
+                    </div>
+                    
+                    <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
+                      {session.branch && (
+                        <span className="flex items-center gap-0.5 truncate max-w-[120px]">
+                          <GitBranch className="w-3 h-3" />
+                          {session.branch}
+                        </span>
+                      )}
+                      {session.prMonitored !== undefined && session.prMonitored > 0 && (
+                        <span className="text-blue-500">
+                          #{session.prMonitored}
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
+                      <span>{formatTimeAgo(session.lastActivity)}</span>
+                      {session.model && (
+                        <>
+                          <span>•</span>
+                          <span>{session.model}</span>
+                        </>
+                      )}
+                    </div>
+                  </div>
+
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setContextMenu(contextMenu === session.id ? null : session.id);
+                    }}
+                    className="p-1 opacity-0 group-hover:opacity-100 hover:bg-muted rounded transition-all"
+                  >
+                    <MoreHorizontal className="w-4 h-4" />
+                  </button>
+                </div>
+
+                {contextMenu === session.id && (
+                  <div className="absolute right-2 top-10 z-10 bg-background border border-border rounded-md shadow-lg py-1 min-w-[140px]">
+                    {session.status !== 'archived' && onSessionArchive && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onSessionArchive(session.id);
+                          setContextMenu(null);
+                        }}
+                        className="w-full px-3 py-1.5 text-left text-sm hover:bg-muted flex items-center gap-2"
+                      >
+                        <Archive className="w-4 h-4" />
+                        Archive
+                      </button>
+                    )}
+                    {onSessionDelete && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onSessionDelete(session.id);
+                          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"
+                      >
+                        <XCircle className="w-4 h-4" />
+                        Delete
+                      </button>
+                    )}
+                    {onSessionRename && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setRenamingSession(session.id);
+                          setNewName(session.name);
+                          setContextMenu(null);
+                        }}
+                        className="w-full px-3 py-1.5 text-left text-sm hover:bg-muted flex items-center gap-2"
+                      >
+                        <Pencil className="w-4 h-4" />
+                        Rename
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="px-4 py-2 border-t border-border text-xs text-muted-foreground">
+        {filteredSessions.length} session{filteredSessions.length !== 1 ? 's' : ''}
+      </div>
+    </div>
+  );
+};
+
+export default SessionSidebar;