codex-lens 0.1.0

package/src/components/App.jsx

@@ -0,0 +1,528 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { TerminalPanel } from './TerminalPanel';
+
+export function App() {
+  const [files, setFiles] = useState([]);
+  const [tabs, setTabs] = useState([]);
+  const [activeTabId, setActiveTabId] = useState(null);
+  const [recentChanges, setRecentChanges] = useState([]);
+  const [wsStatus, setWsStatus] = useState('disconnected');
+  const [contextMenu, setContextMenu] = useState(null);
+  const [taskStatus, setTaskStatus] = useState('idle');
+  const [taskId, setTaskId] = useState(null);
+  const [showRollbackConfirm, setShowRollbackConfirm] = useState(false);
+  const [version, setVersion] = useState(null);
+  const [latestVersion, setLatestVersion] = useState(null);
+  const [hasUpdate, setHasUpdate] = useState(false);
+  const wsRef = useRef(null);
+
+  useEffect(() => {
+    fetchStatus();
+    connectWebSocket();
+    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('click', handleDocumentClick);
+      document.removeEventListener('keydown', handleKeyDown);
+      if (wsRef.current) {
+        wsRef.current.close();
+      }
+    };
+  }, []);
+
+  async function fetchStatus() {
+    try {
+      const port = window.location.port === '5173' ? '5174' : window.location.port;
+      const protocol = window.location.protocol === 'https:' ? 'https:' : 'http:';
+      const response = await fetch(`${protocol}//${window.location.hostname}:${port}/api/status`);
+      if (response.ok) {
+        const data = await response.json();
+        setVersion(data.version);
+        setLatestVersion(data.latestVersion);
+        setHasUpdate(data.hasUpdate);
+      }
+    } catch (error) {
+      console.error('Failed to fetch status:', error);
+    }
+  }
+
+  function handleDocumentClick() {
+    setContextMenu(null);
+  }
+
+  function handleKeyDown(e) {
+    if (e.ctrlKey && e.shiftKey && e.key === 'Enter') {
+      e.preventDefault();
+      handleStartTask();
+      return;
+    }
+
+    if (taskStatus === 'running' && e.ctrlKey && e.key === 'Enter') {
+      e.preventDefault();
+      handleCompleteTask();
+      return;
+    }
+
+    if (taskStatus === 'running' && e.ctrlKey && e.key === 'z') {
+      e.preventDefault();
+      setShowRollbackConfirm(true);
+      return;
+    }
+
+    if (!activeTabId) return;
+
+    if (e.ctrlKey && e.key === 'w') {
+      e.preventDefault();
+      closeTab(activeTabId);
+    } else if (e.ctrlKey && e.key === 'Tab') {
+      e.preventDefault();
+      if (e.shiftKey) {
+        switchToPrevTab();
+      } else {
+        switchToNextTab();
+      }
+    }
+  }
+
+  function connectWebSocket() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = window.location.hostname;
+    const port = window.location.port === '5173' ? '5174' : window.location.port;
+    const wsUrl = `${protocol}//${host}:${port}/ws`;
+
+    const ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+      console.log('Connected to Codex Viewer');
+      setWsStatus('connected');
+      ws.send(JSON.stringify({ type: 'get_task_status' }));
+    };
+
+    ws.onclose = () => {
+      console.log('Disconnected from Codex Viewer');
+      setWsStatus('disconnected');
+      setTimeout(connectWebSocket, 3000);
+    };
+
+    ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        handleMessage(msg);
+      } catch (e) {
+        console.error('Failed to parse message:', e);
+      }
+    };
+
+    wsRef.current = ws;
+  }
+
+  function handleMessage(msg) {
+    switch (msg.type) {
+      case 'file_change':
+        handleFileChange(msg.data);
+        break;
+      case 'file_tree':
+        setFiles(msg.data);
+        break;
+      case 'file_content':
+        openFileInTab(msg.data);
+        break;
+      case 'task_status':
+        setTaskStatus(msg.data.status);
+        setTaskId(msg.data.taskId);
+        break;
+      case 'task_started':
+        setTaskStatus('running');
+        setTaskId(msg.data.taskId);
+        alert(`任务已创建，快照包含 ${msg.data.filesCount} 个文件`);
+        break;
+      case 'task_rolled_back':
+        setTaskStatus('idle');
+        setTaskId(null);
+        setTabs([]);
+        setActiveTabId(null);
+        alert(`已撤回 ${msg.data.restoredCount} 个文件`);
+        setShowRollbackConfirm(false);
+        break;
+      case 'task_completed':
+        setTaskStatus('idle');
+        setTaskId(null);
+        alert('任务已完成，修改已保留');
+        break;
+      case 'connected':
+        console.log('Server confirmed connection');
+        break;
+      default:
+        console.log('Unknown message type:', msg.type);
+    }
+  }
+
+  function handleStartTask() {
+    if (taskStatus === 'running') return;
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'start_task' }));
+    }
+  }
+
+  function handleRollbackTask() {
+    if (taskStatus !== 'running') return;
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'rollback_task' }));
+    }
+  }
+
+  function handleCompleteTask() {
+    if (taskStatus !== 'running') return;
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'complete_task' }));
+    }
+  }
+
+  function openFileInTab(data) {
+    const fileName = data.path.split(/[/\\]/).pop();
+    const existingTab = tabs.find(t => t.path === data.path);
+
+    if (existingTab) {
+      setActiveTabId(existingTab.id);
+    } else {
+      const newTab = {
+        id: Date.now().toString(),
+        path: data.path,
+        name: fileName,
+        content: data.content,
+        diff: data.diff || null,
+        isDiff: !!data.diff
+      };
+      setTabs(prev => [...prev, newTab]);
+      setActiveTabId(newTab.id);
+    }
+  }
+
+  function handleFileChange(data) {
+    const fileName = data.path.split(/[/\\]/).pop();
+    const existingTab = tabs.find(t => t.path === data.path);
+
+    if (existingTab) {
+      setTabs(prev => prev.map(t =>
+        t.path === data.path
+          ? { ...t, content: data.newContent, diff: data.diff, isDiff: true }
+          : t
+      ));
+      if (activeTabId === existingTab.id) {
+        setActiveTabId(existingTab.id);
+      }
+    }
+
+    setRecentChanges(prev => {
+      const filtered = prev.filter(c => c.path !== data.path);
+      return [{ path: data.path, time: Date.now(), diff: data.diff }, ...filtered].slice(0, 10);
+    });
+  }
+
+  function handleFileClick(path) {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'open_file', data: path }));
+    }
+  }
+
+  function closeTab(tabId) {
+    const tabIndex = tabs.findIndex(t => t.id === tabId);
+    const newTabs = tabs.filter(t => t.id !== tabId);
+
+    if (tabs.length === 1) {
+      setTabs([]);
+      setActiveTabId(null);
+    } else if (activeTabId === tabId) {
+      if (tabIndex >= newTabs.length) {
+        setActiveTabId(newTabs[newTabs.length - 1].id);
+      } else {
+        setActiveTabId(newTabs[tabIndex].id);
+      }
+      setTabs(newTabs);
+    } else {
+      setTabs(newTabs);
+    }
+  }
+
+  function closeOtherTabs(keepTabId) {
+    const keepTab = tabs.find(t => t.id === keepTabId);
+    setTabs(keepTab ? [keepTab] : []);
+    setActiveTabId(keepTabId);
+  }
+
+  function closeAllTabs() {
+    setTabs([]);
+    setActiveTabId(null);
+  }
+
+  function switchToNextTab() {
+    if (tabs.length <= 1) return;
+    const currentIndex = tabs.findIndex(t => t.id === activeTabId);
+    const nextIndex = (currentIndex + 1) % tabs.length;
+    setActiveTabId(tabs[nextIndex].id);
+  }
+
+  function switchToPrevTab() {
+    if (tabs.length <= 1) return;
+    const currentIndex = tabs.findIndex(t => t.id === activeTabId);
+    const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+    setActiveTabId(tabs[prevIndex].id);
+  }
+
+  function handleContextMenu(e, tabId) {
+    e.preventDefault();
+    setContextMenu({
+      x: e.clientX,
+      y: e.clientY,
+      tabId
+    });
+  }
+
+  const activeTab = tabs.find(t => t.id === activeTabId);
+
+  return (
+    <div className="app-container">
+      <LeftPanel
+        files={files}
+        recentChanges={recentChanges}
+        activeFile={activeTab?.path || null}
+        onFileClick={handleFileClick}
+      />
+      <div className="panel middle-panel">
+        <TaskBar
+          taskStatus={taskStatus}
+          onStartTask={handleStartTask}
+          onRollback={() => setShowRollbackConfirm(true)}
+          onComplete={handleCompleteTask}
+        />
+        <TabBar
+          tabs={tabs}
+          activeTabId={activeTabId}
+          onTabClick={setActiveTabId}
+          onTabClose={closeTab}
+          onContextMenu={handleContextMenu}
+        />
+        <div className="panel-content code-panel">
+          {!activeTab ? (
+            <div className="empty-state">双击左侧文件查看内容...</div>
+          ) : activeTab.isDiff && activeTab.diff ? (
+            <div className="diff-container">
+              {activeTab.diff.map((line, i) => (
+                <div
+                  key={i}
+                  className={`diff-line ${line.added ? 'added' : line.removed ? 'removed' : ''}`}
+                >
+                  {line.content}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <pre className="code-content">{activeTab.content}</pre>
+          )}
+        </div>
+        {showRollbackConfirm && (
+          <div className="modal-overlay" onClick={() => setShowRollbackConfirm(false)}>
+            <div className="modal-content" onClick={e => e.stopPropagation()}>
+              <div className="modal-title">确认撤回</div>
+              <div className="modal-body">
+                确定要撤回所有修改吗？此操作将把项目恢复到任务开始前的状态，且无法撤销。
+              </div>
+              <div className="modal-buttons">
+                <button className="modal-btn modal-btn-cancel" onClick={() => setShowRollbackConfirm(false)}>
+                  取消
+                </button>
+                <button className="modal-btn modal-btn-danger" onClick={handleRollbackTask}>
+                  确认撤回
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          onClose={() => setContextMenu(null)}
+          onCloseTab={() => {
+            closeTab(contextMenu.tabId);
+            setContextMenu(null);
+          }}
+          onCloseOtherTabs={() => {
+            closeOtherTabs(contextMenu.tabId);
+            setContextMenu(null);
+          }}
+          onCloseAllTabs={() => {
+            closeAllTabs();
+            setContextMenu(null);
+          }}
+        />
+      )}
+      <div className="panel right-panel">
+        <div className="panel-header">
+          <span>Codex 终端</span>
+          <span className={`ws-status ${wsStatus}`}></span>
+          <span className="version-info">
+            {version && <span className="version-number">v{version}</span>}
+            {hasUpdate && latestVersion && (
+              <span className="update-badge" title={`可用版本: ${latestVersion}`}>
+                更新可用
+              </span>
+            )}
+          </span>
+        </div>
+        <div className="terminal-wrapper">
+          <TerminalPanel />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TaskBar({ taskStatus, onStartTask, onRollback, onComplete }) {
+  return (
+    <div className="task-bar">
+      <div className={`task-status ${taskStatus}`}>
+        {taskStatus === 'idle' ? '空闲' : '任务进行中'}
+      </div>
+      <div className="task-buttons">
+        {taskStatus === 'idle' ? (
+          <button className="task-btn task-btn-start" onClick={onStartTask} title="Ctrl+Shift+Enter">
+            开始任务
+          </button>
+        ) : (
+          <>
+            <button className="task-btn task-btn-rollback" onClick={onRollback} title="Ctrl+Z">
+              撤回
+            </button>
+            <button className="task-btn task-btn-complete" onClick={onComplete} title="Ctrl+Enter">
+              完成
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TabBar({ tabs, activeTabId, onTabClick, onTabClose, onContextMenu }) {
+  return (
+    <div className="tab-bar">
+      {tabs.map(tab => (
+        <div
+          key={tab.id}
+          className={`tab ${activeTabId === tab.id ? 'active' : ''}`}
+          onClick={() => onTabClick(tab.id)}
+          onContextMenu={(e) => onContextMenu(e, tab.id)}
+        >
+          <span className="tab-name">{tab.name}</span>
+          <button
+            className="tab-close"
+            onClick={(e) => {
+              e.stopPropagation();
+              onTabClose(tab.id);
+            }}
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ContextMenu({ x, y, onClose, onCloseTab, onCloseOtherTabs, onCloseAllTabs }) {
+  return (
+    <div className="context-menu" style={{ left: x, top: y }} onClick={e => e.stopPropagation()}>
+      <div className="context-menu-item" onClick={onCloseTab}>关闭标签页</div>
+      <div className="context-menu-item" onClick={onCloseOtherTabs}>关闭其他标签页</div>
+      <div className="context-menu-item" onClick={onCloseAllTabs}>关闭全部标签页</div>
+    </div>
+  );
+}
+
+function LeftPanel({ files, recentChanges, activeFile, onFileClick }) {
+  const [expandedDirs, setExpandedDirs] = useState({});
+
+  function toggleDir(path) {
+    setExpandedDirs(prev => ({
+      ...prev,
+      [path]: !prev[path]
+    }));
+  }
+
+  function renderFileTree(items, depth = 0) {
+    return items.map((item, i) => {
+      const isDir = item.type === 'directory';
+      const isExpanded = expandedDirs[item.path];
+      const indent = 8 + depth * 16;
+
+      return (
+        <React.Fragment key={item.path}>
+          <div
+            className={`file-item ${activeFile === item.path ? 'active' : ''}`}
+            onClick={() => isDir ? toggleDir(item.path) : null}
+            onDoubleClick={() => !isDir && onFileClick(item.path)}
+            style={{ paddingLeft: `${indent}px` }}
+          >
+            <span className="file-icon">
+              {isDir ? (isExpanded ? '📂' : '📁') : getFileIcon(item.type)}
+            </span>
+            <span className="file-name">{item.name}</span>
+          </div>
+          {isDir && isExpanded && item.children && renderFileTree(item.children, depth + 1)}
+        </React.Fragment>
+      );
+    });
+  }
+
+  return (
+    <div className="panel left-panel">
+      <div className="panel-header">
+        文件浏览器
+      </div>
+      <div className="panel-content">
+        {recentChanges.length > 0 && (
+          <div className="section">
+            <div className="section-title">最近修改</div>
+            {recentChanges.map((change, i) => (
+              <div
+                key={i}
+                className={`file-item ${activeFile === change.path ? 'active' : ''}`}
+                onDoubleClick={() => onFileClick(change.path)}
+              >
+                <span className="file-icon">📝</span>
+                <span className="file-name">{change.path.split(/[/\\]/).pop()}</span>
+              </div>
+            ))}
+          </div>
+        )}
+        <div className="section">
+          <div className="section-title">项目文件</div>
+          {files.length === 0 ? (
+            <div className="empty-state">
+              {recentChanges.length === 0 ? '等待文件变化...' : '暂无其他文件'}
+            </div>
+          ) : (
+            renderFileTree(files)
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function getFileIcon(type) {
+  switch (type) {
+    case 'directory': return '📁';
+    case 'file': return '📄';
+    default: return '📄';
+  }
+}
+
+export default App;