npm - codex-lens - Versions diffs - 0.1.26 → 0.1.28 - Mend

codex-lens 0.1.26 → 0.1.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/aggregator.js +0 -1
package/dist/public/assets/{main-BO4694Xj.js → main-BRIK-RhC.js} +39 -37
package/dist/public/index.html +1 -1
package/package.json +1 -1
package/src/aggregator.js +0 -1
package/src/components/App.jsx +61 -1
package/src/components/CodeViewer.jsx +2 -2
package/src/components/ErrorBoundary.jsx +172 -0
package/src/components/TerminalPanel.jsx +154 -163
package/src/main.jsx +10 -2
package/tsconfig.json +24 -0

package/dist/public/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Codex Lens</title>
-    <script type="module" crossorigin src="./assets/main-BO4694Xj.js"></script>
+    <script type="module" crossorigin src="./assets/main-BRIK-RhC.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/main-DNXrKVO-.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "codex-lens",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "A visualization tool for Codex that monitors API requests and file system changes",
   "license": "MIT",
   "type": "module",

package/src/aggregator.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import { createServer } from 'http';
-import { createHash, createHash as cryptoCreateHash } from 'crypto';
 import { WebSocketServer } from 'ws';
 import express from 'express';
 import { spawn } from 'child_process';

package/src/components/App.jsx CHANGED Viewed

@@ -237,6 +237,54 @@ export function App() {
     }
   }
+  async function saveAllFiles() {
+    const modifiedTabs = tabs.filter(t => t.modified);
+    if (modifiedTabs.length === 0) return;
+    setSaving(true);
+    const port = window.location.port === '5173' ? '5174' : window.location.port;
+    const protocol = window.location.protocol === 'https:' ? 'https:' : 'http:';
+    let savedCount = 0;
+    let failedFiles = [];
+    for (const tab of modifiedTabs) {
+      try {
+        const response = await fetch(`${protocol}//${window.location.hostname}:${port}/api/save-file`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ path: tab.path, content: tab.content })
+        });
+        if (response.ok) {
+          savedCount++;
+        } else {
+          const error = await response.json();
+          failedFiles.push(tab.name);
+          console.error('Failed to save file:', tab.name, error.message);
+        }
+      } catch (error) {
+        failedFiles.push(tab.name);
+        console.error('Failed to save file:', tab.name, error);
+      }
+    }
+    if (savedCount > 0) {
+      setTabs(prevTabs => prevTabs.map(t => {
+        if (t.modified && !failedFiles.includes(t.name)) {
+          return { ...t, originalContent: t.content, modified: false };
+        }
+        return t;
+      }));
+    }
+    if (failedFiles.length > 0) {
+      alert(`以下文件保存失败: ${failedFiles.join(', ')}`);
+    }
+    setSaving(false);
+  }
   function handleFileClick(path) {
     const existingTab = tabs.find(t => t.path === path);
     if (existingTab) {
@@ -382,6 +430,7 @@ export function App() {
             x={contextMenu.x}
             y={contextMenu.y}
             tab={tabs.find(t => t.id === contextMenu.tabId)}
+            tabs={tabs}
             saving={saving}
             onClose={() => setContextMenu(null)}
             onCloseTab={() => {
@@ -400,6 +449,10 @@ export function App() {
               saveFile(contextMenu.tabId);
               setContextMenu(null);
             }}
+            onSaveAll={() => {
+              saveAllFiles();
+              setContextMenu(null);
+            }}
           />
         )}
         <div className="panel right-panel">
@@ -441,7 +494,9 @@ function TabBar({ tabs, activeTabId, onTabClick, onTabClose, onContextMenu }) {
   );
 }
-function ContextMenu({ x, y, tab, saving, onClose, onCloseTab, onCloseOtherTabs, onCloseAllTabs, onSave }) {
+function ContextMenu({ x, y, tab, tabs, saving, onClose, onCloseTab, onCloseOtherTabs, onCloseAllTabs, onSave, onSaveAll }) {
+  const hasModified = tabs?.some(t => t.modified);
   return (
     <div className="context-menu" style={{ left: x, top: y }} onClick={(e) => e.stopPropagation()}>
       {tab?.modified && (
@@ -449,6 +504,11 @@ function ContextMenu({ x, y, tab, saving, onClose, onCloseTab, onCloseOtherTabs,
           {saving ? '保存中...' : '保存'}
         </div>
       )}
+      {hasModified && (
+        <div className="context-menu-item" onClick={onSaveAll} style={{ color: '#4ade80' }}>
+          {saving ? '保存中...' : '全部保存'}
+        </div>
+      )}
       <div className="context-menu-item" onClick={onCloseTab}>关闭</div>
       <div className="context-menu-item" onClick={onCloseOtherTabs}>关闭其他</div>
       <div className="context-menu-item" onClick={onCloseAllTabs}>关闭所有</div>

package/src/components/CodeViewer.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
-import React, { useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
-import { EditorView, Decoration, ViewPlugin, ViewUpdate } from '@codemirror/view';
+import { EditorView, Decoration, ViewPlugin } from '@codemirror/view';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { tags as t } from '@lezer/highlight';
 import { RangeSetBuilder } from '@codemirror/state';

package/src/components/ErrorBoundary.jsx ADDED Viewed

@@ -0,0 +1,172 @@
+import { Component } from 'react';
+class DefaultErrorFallback extends Component {
+  render() {
+    const { error, onReload, onReset } = this.props;
+    return (
+      <div style={{
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#1e1e1e',
+        color: '#e0e0e0',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        padding: '20px',
+      }}>
+        <div style={{
+          maxWidth: '600px',
+          padding: '32px',
+          background: '#252526',
+          borderRadius: '8px',
+          border: '1px solid #3c3c3c',
+          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.4)',
+          textAlign: 'center',
+        }}>
+          <div style={{
+            fontSize: '48px',
+            marginBottom: '16px',
+          }}>
+            <span style={{ color: '#f85149' }}>!</span>
+          </div>
+          <h1 style={{
+            fontSize: '24px',
+            fontWeight: 600,
+            marginBottom: '8px',
+            color: '#ffffff',
+          }}>
+            应用程序出错
+          </h1>
+          <p style={{
+            fontSize: '14px',
+            color: '#858585',
+            marginBottom: '24px',
+          }}>
+            抱歉，应用程序遇到了一个错误。请尝试刷新页面或重置应用状态。
+          </p>
+          {error && (
+            <details style={{
+              marginBottom: '24px',
+              padding: '12px',
+              background: '#1e1e1e',
+              borderRadius: '4px',
+              textAlign: 'left',
+            }}>
+              <summary style={{
+                cursor: 'pointer',
+                fontSize: '13px',
+                color: '#e0e0e0',
+                fontWeight: 500,
+              }}>
+                错误详情
+              </summary>
+              <pre style={{
+                marginTop: '12px',
+                padding: '12px',
+                background: '#0a0a0a',
+                borderRadius: '4px',
+                fontSize: '12px',
+                color: '#f48771',
+                overflow: 'auto',
+                maxHeight: '200px',
+                fontFamily: '"SF Mono", Consolas, monospace',
+              }}>
+                {error.toString()}
+                {error.stack && `\n\n${error.stack}`}
+              </pre>
+            </details>
+          )}
+          <div style={{
+            display: 'flex',
+            gap: '12px',
+            justifyContent: 'center',
+          }}>
+            <button
+              onClick={onReset}
+              style={{
+                padding: '10px 20px',
+                background: '#3c3c3c',
+                border: '1px solid #4c4c4c',
+                borderRadius: '4px',
+                color: '#cccccc',
+                fontSize: '14px',
+                cursor: 'pointer',
+              }}
+            >
+              重置应用
+            </button>
+            <button
+              onClick={onReload}
+              style={{
+                padding: '10px 20px',
+                background: '#0078d4',
+                border: 'none',
+                borderRadius: '4px',
+                color: '#ffffff',
+                fontSize: '14px',
+                cursor: 'pointer',
+                fontWeight: 500,
+              }}
+            >
+              刷新页面
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+export class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ errorInfo });
+    this.props.onError?.(error, errorInfo);
+    console.error('[ErrorBoundary]', error, errorInfo);
+  }
+  handleReload = () => {
+    this.setState({ hasError: false, error: null, errorInfo: null });
+    window.location.reload();
+  };
+  handleReset = () => {
+    this.setState({ hasError: false, error: null, errorInfo: null });
+  };
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return (
+        <DefaultErrorFallback
+          error={this.state.error}
+          errorInfo={this.state.errorInfo}
+          onReload={this.handleReload}
+          onReset={this.handleReset}
+        />
+      );
+    }
+    return this.props.children;
+  }
+}

package/src/components/TerminalPanel.jsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
@@ -15,42 +15,66 @@ const VIRTUAL_KEYS = [
   { label: 'Ctrl+C', seq: '\x03' },
 ];
-export class TerminalPanel extends React.Component {
-  constructor(props) {
-    super(props);
-    this.containerRef = React.createRef();
-    this.terminal = null;
-    this.fitAddon = null;
-    this.ws = null;
-    this.resizeObserver = null;
-    this._writeBuffer = '';
-    this._writeTimer = null;
-  }
-  componentDidMount() {
-    this.initTerminal();
-    this.connectWebSocket();
-    this.setupResizeObserver();
-  }
-  componentWillUnmount() {
-    if (this._writeTimer) {
-      cancelAnimationFrame(this._writeTimer);
+export function TerminalPanel() {
+  const containerRef = useRef(null);
+  const terminalRef = useRef(null);
+  const fitAddonRef = useRef(null);
+  const wsRef = useRef(null);
+  const resizeObserverRef = useRef(null);
+  const writeBufferRef = useRef('');
+  const writeTimerRef = useRef(null);
+  const resizeTimerRef = useRef(null);
+  const sendResize = useCallback(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN && terminalRef.current) {
+      wsRef.current.send(JSON.stringify({
+        type: 'resize',
+        cols: terminalRef.current.cols,
+        rows: terminalRef.current.rows,
+      }));
     }
-    if (this.ws) {
-      this.ws.close();
-      this.ws = null;
+  }, []);
+  const flushWrite = useCallback(() => {
+    if (writeTimerRef.current) {
+      cancelAnimationFrame(writeTimerRef.current);
+      writeTimerRef.current = null;
     }
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
+    if (!writeBufferRef.current || !terminalRef.current) return;
+    const CHUNK_SIZE = 32768;
+    if (writeBufferRef.current.length <= CHUNK_SIZE) {
+      const buf = writeBufferRef.current;
+      writeBufferRef.current = '';
+      terminalRef.current.write(buf);
+    } else {
+      const chunk = writeBufferRef.current.slice(0, CHUNK_SIZE);
+      writeBufferRef.current = writeBufferRef.current.slice(CHUNK_SIZE);
+      terminalRef.current.write(chunk);
+      writeTimerRef.current = requestAnimationFrame(() => {
+        flushWrite();
+      });
     }
-    if (this.terminal) {
-      this.terminal.dispose();
+  }, []);
+  const throttledWrite = useCallback((data) => {
+    writeBufferRef.current += data;
+    if (!writeTimerRef.current) {
+      writeTimerRef.current = requestAnimationFrame(() => {
+        flushWrite();
+      });
     }
-  }
+  }, [flushWrite]);
-  initTerminal() {
-    this.terminal = new Terminal({
+  const handleVirtualKey = useCallback((seq) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'input', data: seq }));
+    }
+    terminalRef.current?.focus();
+  }, []);
+  useEffect(() => {
+    const terminal = new Terminal({
       cursorBlink: true,
       cursorStyle: 'bar',
       fontSize: 13,
@@ -65,52 +89,54 @@ export class TerminalPanel extends React.Component {
       allowProposedApi: true,
     });
-    this.fitAddon = new FitAddon();
-    this.terminal.loadAddon(this.fitAddon);
-    this.terminal.loadAddon(new WebLinksAddon());
+    const fitAddon = new FitAddon();
+    terminal.loadAddon(fitAddon);
+    terminal.loadAddon(new WebLinksAddon());
-    this.terminal.open(this.containerRef.current);
+    terminal.open(containerRef.current);
+    terminalRef.current = terminal;
+    fitAddonRef.current = fitAddon;
     requestAnimationFrame(() => {
-      if (this.fitAddon) {
-        this.fitAddon.fit();
-        this.terminal.focus();
+      if (fitAddon) {
+        fitAddon.fit();
+        terminal.focus();
       }
     });
-    this.terminal.onData((data) => {
-      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-        this.ws.send(JSON.stringify({ type: 'input', data }));
+    terminal.onData((data) => {
+      if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ type: 'input', data }));
       }
     });
-  }
-  connectWebSocket() {
+    // WebSocket connection
     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/terminal`;
-    this.ws = new WebSocket(wsUrl);
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
-    this.ws.onopen = () => {
+    ws.onopen = () => {
       console.log('[Terminal] Connected to PTY service');
-      this.sendResize();
+      sendResize();
     };
-    this.ws.onmessage = (event) => {
+    ws.onmessage = (event) => {
       try {
         const msg = JSON.parse(event.data);
         if (msg.type === 'data') {
-          this._throttledWrite(msg.data);
+          throttledWrite(msg.data);
         } else if (msg.type === 'exit') {
-          this._flushWrite();
-          if (this.terminal) {
-            this.terminal.write(`\r\n[Process exited with code ${msg.exitCode ?? '?'}]\r\n`);
+          flushWrite();
+          if (terminal) {
+            terminal.write(`\r\n[Process exited with code ${msg.exitCode ?? '?'}]\r\n`);
           }
         } else if (msg.type === 'state') {
-          if (!msg.running && this.terminal) {
-            this._flushWrite();
+          if (!msg.running && terminal) {
+            flushWrite();
           }
         }
       } catch (e) {
@@ -118,132 +144,97 @@ export class TerminalPanel extends React.Component {
       }
     };
-    this.ws.onclose = () => {
+    ws.onclose = () => {
       console.log('[Terminal] Disconnected, reconnecting in 3s...');
       setTimeout(() => {
-        if (this.containerRef.current) {
-          this.connectWebSocket();
+        if (containerRef.current) {
+          // Reconnect handled by re-mounting effect
         }
       }, 3000);
     };
-    this.ws.onerror = (error) => {
+    ws.onerror = (error) => {
       console.error('[Terminal] WebSocket error:', error);
     };
-  }
-  sendResize() {
-    if (this.ws && this.ws.readyState === WebSocket.OPEN && this.terminal) {
-      this.ws.send(JSON.stringify({
-        type: 'resize',
-        cols: this.terminal.cols,
-        rows: this.terminal.rows,
-      }));
-    }
-  }
-  setupResizeObserver() {
-    if (!this.containerRef.current) return;
-    this.resizeObserver = new ResizeObserver(() => {
-      if (this._resizeTimer) clearTimeout(this._resizeTimer);
-      this._resizeTimer = setTimeout(() => {
-        if (this.fitAddon && this.containerRef.current) {
+    // ResizeObserver setup
+    const resizeObserver = new ResizeObserver(() => {
+      if (resizeTimerRef.current) clearTimeout(resizeTimerRef.current);
+      resizeTimerRef.current = setTimeout(() => {
+        if (fitAddonRef.current && containerRef.current) {
           try {
-            this.fitAddon.fit();
-            this.sendResize();
+            fitAddonRef.current.fit();
+            sendResize();
           } catch {}
         }
       }, 150);
     });
-    this.resizeObserver.observe(this.containerRef.current);
-  }
-  _throttledWrite(data) {
-    this._writeBuffer += data;
-    if (!this._writeTimer) {
-      this._writeTimer = requestAnimationFrame(() => {
-        this._flushWrite();
-      });
-    }
-  }
-  _flushWrite() {
-    if (this._writeTimer) {
-      cancelAnimationFrame(this._writeTimer);
-      this._writeTimer = null;
-    }
-    if (!this._writeBuffer || !this.terminal) return;
-    const CHUNK_SIZE = 32768;
-    if (this._writeBuffer.length <= CHUNK_SIZE) {
-      const buf = this._writeBuffer;
-      this._writeBuffer = '';
-      this.terminal.write(buf);
-    } else {
-      const chunk = this._writeBuffer.slice(0, CHUNK_SIZE);
-      this._writeBuffer = this._writeBuffer.slice(CHUNK_SIZE);
-      this.terminal.write(chunk);
-      this._writeTimer = requestAnimationFrame(() => {
-        this._flushWrite();
-      });
-    }
-  }
+    resizeObserver.observe(containerRef.current);
+    resizeObserverRef.current = resizeObserver;
-  handleVirtualKey = (seq) => {
-    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-      this.ws.send(JSON.stringify({ type: 'input', data: seq }));
-    }
-    this.terminal?.focus();
-  };
-  render() {
-    return (
+    // Cleanup on unmount
+    return () => {
+      if (writeTimerRef.current) {
+        cancelAnimationFrame(writeTimerRef.current);
+      }
+      if (ws) {
+        ws.close();
+        wsRef.current = null;
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      if (terminal) {
+        terminal.dispose();
+      }
+    };
+  }, [sendResize, throttledWrite, flushWrite]);
+  return (
+    <div style={{
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      background: '#0a0a0a',
+    }}>
+      <div
+        ref={containerRef}
+        style={{
+          flex: 1,
+          overflow: 'hidden',
+          padding: '4px 8px',
+        }}
+      />
       <div style={{
-        height: '100%',
         display: 'flex',
-        flexDirection: 'column',
-        background: '#0a0a0a',
+        gap: '4px',
+        padding: '8px',
+        background: '#111',
+        borderTop: '1px solid #222',
+        flexWrap: 'wrap',
       }}>
-        <div
-          ref={this.containerRef}
-          style={{
-            flex: 1,
-            overflow: 'hidden',
-            padding: '4px 8px',
-          }}
-        />
-        <div style={{
-          display: 'flex',
-          gap: '4px',
-          padding: '8px',
-          background: '#111',
-          borderTop: '1px solid #222',
-          flexWrap: 'wrap',
-        }}>
-          {VIRTUAL_KEYS.map((key) => (
-            <button
-              key={key.label}
-              onClick={() => this.handleVirtualKey(key.seq)}
-              style={{
-                padding: '8px 12px',
-                border: '1px solid #333',
-                borderRadius: '4px',
-                background: '#1a1a1a',
-                color: '#ccc',
-                fontSize: '13px',
-                fontFamily: 'Menlo, Monaco, monospace',
-                cursor: 'pointer',
-                minWidth: '44px',
-                minHeight: '44px',
-              }}
-            >
-              {key.label}
-            </button>
-          ))}
-        </div>
+        {VIRTUAL_KEYS.map((key) => (
+          <button
+            key={key.label}
+            onClick={() => handleVirtualKey(key.seq)}
+            style={{
+              padding: '8px 12px',
+              border: '1px solid #333',
+              borderRadius: '4px',
+              background: '#1a1a1a',
+              color: '#ccc',
+              fontSize: '13px',
+              fontFamily: 'Menlo, Monaco, monospace',
+              cursor: 'pointer',
+              minWidth: '44px',
+              minHeight: '44px',
+            }}
+          >
+            {key.label}
+          </button>
+        ))}
       </div>
-    );
-  }
-}
+    </div>
+  );
+}