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

codex-lens 0.1.27 → 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 (10) hide show

package/dist/aggregator.js +0 -1
package/dist/public/assets/{main-d-2BqwRB.js → main-BRIK-RhC.js} +38 -36
package/dist/public/index.html +1 -1
package/package.json +1 -1
package/src/aggregator.js +0 -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-d-2BqwRB.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.27",
+  "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/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>
+  );
+}

package/src/main.jsx CHANGED Viewed

@@ -1,9 +1,17 @@
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './components/App.jsx';
+import { ErrorBoundary } from './components/ErrorBoundary.jsx';
 import './global.css';
 const container = document.getElementById('root');
 const root = createRoot(container);
-root.render(<App />);
+root.render(
+  <ErrorBoundary
+    onError={(error, errorInfo) => {
+      console.error('[Global Error]', error, errorInfo);
+    }}
+  >
+    <App />
+  </ErrorBoundary>
+);

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}