codex-lens 0.1.27 → 0.1.29

package/dist/public/assets/{main-DNXrKVO-.css → main-CnRUPtz5.css}

@@ -29,4 +29,4 @@
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
-*/.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility:not(.debug),.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;right:0;z-index:10;color:transparent;pointer-events:none}.xterm .xterm-accessibility-tree:not(.debug) *::selection{color:transparent}.xterm .xterm-accessibility-tree{-webkit-user-select:text;user-select:text;white-space:pre}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:1!important}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-overline{text-decoration:overline}.xterm-overline.xterm-underline-1{text-decoration:overline underline}.xterm-overline.xterm-underline-2{text-decoration:overline double underline}.xterm-overline.xterm-underline-3{text-decoration:overline wavy underline}.xterm-overline.xterm-underline-4{text-decoration:overline dotted underline}.xterm-overline.xterm-underline-5{text-decoration:overline dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}.xterm-decoration-overview-ruler{z-index:8;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative}:root{--bg-primary: #000000;--bg-secondary: #0A0A0A;--bg-tertiary: #141414;--bg-elevated: #1A1A1A;--bg-surface: #0F0F0F;--text-primary: #F8FAFC;--text-secondary: #94A3B8;--text-muted: #64748B;--border-color: rgba(148, 163, 184, .15);--border-glow: rgba(34, 197, 94, .3);--accent-color: #22C55E;--accent-hover: #16A34A;--accent-glow: rgba(34, 197, 94, .4);--accent-soft: rgba(34, 197, 94, .1);--diff-add-bg: rgba(34, 197, 94, .12);--diff-add-text: #4ADE80;--diff-add-border: #22C55E;--diff-remove-bg: rgba(239, 68, 68, .12);--diff-remove-text: #F87171;--diff-remove-border: #EF4444;--danger-color: #EF4444;--danger-hover: #DC2626;--success-color: #22C55E;--success-hover: #16A34A;--warning-color: #F59E0B;--info-color: #3B82F6;--font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Consolas", monospace;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .5);--shadow-glow: 0 0 24px var(--accent-glow);--shadow-glow-sm: 0 0 12px var(--accent-glow);--radius-xs: 4px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--transition-fast: .12s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--blur-sm: 8px;--blur-md: 16px;--blur-lg: 24px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;background:var(--bg-primary)}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(180deg,#1e293bf2,#1e293bd9);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));border-bottom:1px solid var(--border-color);min-height:52px;position:relative;z-index:100}.top-bar:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-color),transparent);opacity:.3}.top-bar-left,.top-bar-center,.top-bar-right{display:flex;align-items:center;gap:16px}.top-bar-left{width:260px}.top-bar-center{flex:1;justify-content:center}.top-bar-right{width:40%;justify-content:flex-end}.top-bar-title{font-family:var(--font-display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.top-bar-title:before{content:"";display:inline-block;width:3px;height:14px;background:var(--accent-color);border-radius:2px}.main-content{display:flex;flex:1;overflow:hidden;gap:1px;background:var(--border-color)}.panel{display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,var(--bg-secondary) 0%,rgba(30,41,59,.95) 100%)}.left-panel{width:260px;flex-shrink:0}.middle-panel{flex:1;min-width:300px}.right-panel{width:40%;min-width:300px;max-width:60%}.panel-content{flex:1;overflow:auto;padding:8px}.file-tree{padding:4px}.file-item{padding:8px 12px;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;gap:10px;transition:all var(--transition-fast);position:relative;margin:2px 0}.file-item:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--accent-color);border-radius:0 2px 2px 0;transition:height var(--transition-fast)}.file-item:hover{background:#94a3b814}.file-item:hover:before{height:60%}.file-item:active{transform:scale(.98)}.file-item.active{background:var(--accent-soft);color:var(--text-primary)}.file-item.active:before{height:70%}.file-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:.9}.file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.diff-line{font-family:var(--font-mono);font-size:13px;padding:3px 16px 3px 20px;white-space:pre;border-left:3px solid transparent;transition:background var(--transition-fast);position:relative}.diff-line.added{background:var(--diff-add-bg);color:var(--diff-add-text);border-left-color:var(--diff-add-border)}.diff-line.removed{background:var(--diff-remove-bg);color:var(--diff-remove-text);border-left-color:var(--diff-remove-border)}.diff-line:before{display:inline-block;width:16px;margin-left:-16px;text-align:center;font-weight:600;font-size:12px}.diff-line.added:before{content:"+";color:var(--diff-add-text)}.diff-line.removed:before{content:"-";color:var(--diff-remove-text)}.tab-bar{display:flex;background:#0f172a99;border-bottom:1px solid var(--border-color);overflow-x:auto;min-height:40px;scrollbar-width:none}.tab-bar::-webkit-scrollbar{display:none}.tab{display:flex;align-items:center;gap:8px;padding:10px 16px;background:transparent;border-right:1px solid var(--border-color);cursor:pointer;min-width:100px;max-width:180px;font-size:13px;color:var(--text-muted);transition:all var(--transition-fast);position:relative}.tab:hover{background:#94a3b80d;color:var(--text-secondary)}.tab.active{background:var(--bg-secondary);color:var(--text-primary)}.tab.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent-color)}.tab-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-close{background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:var(--radius-xs);line-height:1;transition:all var(--transition-fast);opacity:.6}.tab-close:hover{background:#ef444433;color:var(--danger-color);opacity:1}.tab.modified .tab-name{color:var(--accent-color)}.tab-modified-mark{color:var(--accent-color);margin-right:4px;font-size:10px}.context-menu{position:fixed;background:linear-gradient(180deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:6px;min-width:160px;box-shadow:var(--shadow-lg);z-index:1000;animation:contextMenuIn .15s ease;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm))}@keyframes contextMenuIn{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.context-menu-item{padding:10px 14px;cursor:pointer;font-size:13px;color:var(--text-primary);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.context-menu-item:hover{background:var(--accent-soft);color:var(--accent-color)}.file-context-menu{position:fixed;background:linear-gradient(180deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:6px;min-width:200px;box-shadow:var(--shadow-lg);z-index:1000;animation:contextMenuIn .15s ease;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm))}.ws-status{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:8px;transition:all var(--transition-normal)}.ws-status.connected{background:var(--success-color);box-shadow:0 0 8px var(--success-color);animation:pulse 2s infinite}.ws-status.disconnected{background:var(--danger-color);box-shadow:0 0 8px var(--danger-color)}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 8px var(--success-color)}50%{opacity:.7;box-shadow:0 0 4px var(--success-color)}}.version-info{display:flex;align-items:center;gap:10px}.version-number{font-size:11px;color:var(--text-muted);font-weight:500;font-family:var(--font-mono);padding:3px 8px;background:#94a3b81a;border-radius:var(--radius-xs)}.update-badge{font-size:10px;padding:4px 10px;background:linear-gradient(135deg,var(--warning-color) 0%,#FBBF24 100%);color:var(--bg-primary);border-radius:var(--radius-sm);cursor:pointer;font-weight:600;transition:all var(--transition-fast)}.update-badge:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f59e0b4d}.terminal-wrapper{flex:1;overflow:hidden;min-height:0}.section{margin-bottom:8px}.section-title{padding:10px 12px 6px;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px}.empty-state{padding:40px 24px;text-align:center;color:var(--text-muted);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:12px}.empty-state:before{content:"";width:48px;height:48px;background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-elevated) 100%);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.code-panel{font-family:var(--font-mono)}.code-viewer-codemirror{height:100%;width:100%;display:flex;min-height:0;min-width:0}.code-viewer-codemirror .cm-theme{flex:1;display:flex;min-height:0;min-width:0}.code-viewer-codemirror .cm-editor{flex:1;min-width:0;min-height:0}.code-viewer-codemirror .cm-scroller{flex:1;overflow:auto!important;min-height:0}.code-content{padding:16px;white-space:pre-wrap;word-break:break-all;line-height:1.7;font-size:13px}.diff-container{font-family:var(--font-mono);font-size:13px;padding:8px 0}.task-btn{padding:8px 18px;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-family);display:inline-flex;align-items:center;gap:6px}.task-btn:hover{transform:translateY(-1px)}.task-btn:active{transform:translateY(0)}.task-btn-clear{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color)}.task-btn-clear:hover{background:var(--accent-soft);border-color:var(--accent-color);color:var(--accent-color);box-shadow:var(--shadow-glow-sm)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::-webkit-scrollbar-corner{background:transparent}@media (max-width: 1024px){.left-panel{width:220px}.right-panel{width:45%;min-width:250px}.top-bar-left{width:220px}}@media (max-width: 768px){.main-content{flex-direction:column}.left-panel,.right-panel{width:100%;max-width:none;min-width:auto}.middle-panel{min-height:300px}.top-bar{flex-wrap:wrap;padding:10px 16px}.top-bar-left,.top-bar-center,.top-bar-right{width:auto}.top-bar-center{order:3;width:100%;justify-content:flex-start;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color)}}
+*/.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility:not(.debug),.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;right:0;z-index:10;color:transparent;pointer-events:none}.xterm .xterm-accessibility-tree:not(.debug) *::selection{color:transparent}.xterm .xterm-accessibility-tree{-webkit-user-select:text;user-select:text;white-space:pre}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:1!important}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-overline{text-decoration:overline}.xterm-overline.xterm-underline-1{text-decoration:overline underline}.xterm-overline.xterm-underline-2{text-decoration:overline double underline}.xterm-overline.xterm-underline-3{text-decoration:overline wavy underline}.xterm-overline.xterm-underline-4{text-decoration:overline dotted underline}.xterm-overline.xterm-underline-5{text-decoration:overline dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}.xterm-decoration-overview-ruler{z-index:8;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative}:root{--bg-primary: #000000;--bg-secondary: #0A0A0A;--bg-tertiary: #141414;--bg-elevated: #1A1A1A;--bg-surface: #0F0F0F;--text-primary: #F8FAFC;--text-secondary: #94A3B8;--text-muted: #64748B;--border-color: rgba(148, 163, 184, .15);--border-glow: rgba(34, 197, 94, .3);--accent-color: #22C55E;--accent-hover: #16A34A;--accent-glow: rgba(34, 197, 94, .4);--accent-soft: rgba(34, 197, 94, .1);--diff-add-bg: rgba(34, 197, 94, .12);--diff-add-text: #4ADE80;--diff-add-border: #22C55E;--diff-remove-bg: rgba(239, 68, 68, .12);--diff-remove-text: #F87171;--diff-remove-border: #EF4444;--danger-color: #EF4444;--danger-hover: #DC2626;--success-color: #22C55E;--success-hover: #16A34A;--warning-color: #F59E0B;--info-color: #3B82F6;--font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Consolas", monospace;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .5);--shadow-glow: 0 0 24px var(--accent-glow);--shadow-glow-sm: 0 0 12px var(--accent-glow);--radius-xs: 4px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--transition-fast: .12s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--blur-sm: 8px;--blur-md: 16px;--blur-lg: 24px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;background:var(--bg-primary)}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(180deg,#1e293bf2,#1e293bd9);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));border-bottom:1px solid var(--border-color);min-height:52px;position:relative;z-index:100}.top-bar:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-color),transparent);opacity:.3}.top-bar-left,.top-bar-center,.top-bar-right{display:flex;align-items:center;gap:16px}.top-bar-left{width:260px}.top-bar-center{flex:1;justify-content:center}.top-bar-right{width:40%;justify-content:flex-end}.top-bar-title{font-family:var(--font-display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.top-bar-title:before{content:"";display:inline-block;width:3px;height:14px;background:var(--accent-color);border-radius:2px}.main-content{display:flex;flex:1;overflow:hidden;gap:1px;background:var(--border-color)}.panel{display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,var(--bg-secondary) 0%,rgba(30,41,59,.95) 100%)}.left-panel{width:260px;flex-shrink:0}.middle-panel{flex:1;min-width:300px}.right-panel{width:40%;min-width:300px;max-width:60%}.panel-content{flex:1;overflow:auto;padding:8px}.file-tree{padding:4px}.file-item{padding:8px 12px;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;gap:10px;transition:all var(--transition-fast);position:relative;margin:2px 0}.file-item:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--accent-color);border-radius:0 2px 2px 0;transition:height var(--transition-fast)}.file-item:hover{background:#94a3b814}.file-item:hover:before{height:60%}.file-item:active{transform:scale(.98)}.file-item.active{background:var(--accent-soft);color:var(--text-primary)}.file-item.active:before{height:70%}.file-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:.9}.file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.diff-line{font-family:var(--font-mono);font-size:13px;padding:3px 16px 3px 20px;white-space:pre;border-left:3px solid transparent;transition:background var(--transition-fast);position:relative}.diff-line.added{background:var(--diff-add-bg);color:var(--diff-add-text);border-left-color:var(--diff-add-border)}.diff-line.removed{background:var(--diff-remove-bg);color:var(--diff-remove-text);border-left-color:var(--diff-remove-border)}.diff-line:before{display:inline-block;width:16px;margin-left:-16px;text-align:center;font-weight:600;font-size:12px}.diff-line.added:before{content:"+";color:var(--diff-add-text)}.diff-line.removed:before{content:"-";color:var(--diff-remove-text)}.tab-bar{display:flex;background:#0f172a99;border-bottom:1px solid var(--border-color);overflow-x:auto;min-height:40px;scrollbar-width:none}.tab-bar::-webkit-scrollbar{display:none}.tab{display:flex;align-items:center;gap:8px;padding:10px 16px;background:transparent;border-right:1px solid var(--border-color);cursor:pointer;min-width:100px;max-width:180px;font-size:13px;color:var(--text-muted);transition:all var(--transition-fast);position:relative}.tab:hover{background:#94a3b80d;color:var(--text-secondary)}.tab.active{background:var(--bg-secondary);color:var(--text-primary)}.tab.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent-color)}.tab-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-close{background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:var(--radius-xs);line-height:1;transition:all var(--transition-fast);opacity:.6}.tab-close:hover{background:#ef444433;color:var(--danger-color);opacity:1}.tab.modified .tab-name{color:var(--accent-color)}.tab-modified-mark{color:var(--accent-color);margin-right:4px;font-size:10px}.context-menu{position:fixed;background:linear-gradient(180deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:6px;min-width:160px;box-shadow:var(--shadow-lg);z-index:1000;animation:contextMenuIn .15s ease;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm))}@keyframes contextMenuIn{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.context-menu-item{padding:10px 14px;cursor:pointer;font-size:13px;color:var(--text-primary);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.context-menu-item:hover{background:var(--accent-soft);color:var(--accent-color)}.file-context-menu{position:fixed;background:linear-gradient(180deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:6px;min-width:200px;box-shadow:var(--shadow-lg);z-index:1000;animation:contextMenuIn .15s ease;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm))}.ws-status{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:8px;transition:all var(--transition-normal)}.ws-status.connected{background:var(--success-color);box-shadow:0 0 8px var(--success-color);animation:pulse 2s infinite}.ws-status.disconnected{background:var(--danger-color);box-shadow:0 0 8px var(--danger-color)}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 8px var(--success-color)}50%{opacity:.7;box-shadow:0 0 4px var(--success-color)}}.version-info{display:flex;align-items:center;gap:10px}.version-number{font-size:11px;color:var(--text-muted);font-weight:500;font-family:var(--font-mono);padding:3px 8px;background:#94a3b81a;border-radius:var(--radius-xs)}.update-badge{font-size:10px;padding:4px 10px;background:linear-gradient(135deg,var(--warning-color) 0%,#FBBF24 100%);color:var(--bg-primary);border-radius:var(--radius-sm);cursor:pointer;font-weight:600;transition:all var(--transition-fast)}.update-badge:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f59e0b4d}.terminal-wrapper{flex:1;overflow:hidden;min-height:0}.section{margin-bottom:8px}.section-title{padding:10px 12px 6px;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px}.empty-state{padding:40px 24px;text-align:center;color:var(--text-muted);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:12px}.empty-state:before{content:"";width:48px;height:48px;background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-elevated) 100%);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.code-panel{font-family:var(--font-mono)}.code-viewer-codemirror{height:100%;width:100%;display:flex;min-height:0;min-width:0}.code-viewer-codemirror .cm-theme{flex:1;display:flex;min-height:0;min-width:0}.code-viewer-codemirror .cm-editor{flex:1;min-width:0;min-height:0}.code-viewer-codemirror .cm-scroller{flex:1;overflow:auto!important;min-height:0}.code-content{padding:16px;white-space:pre-wrap;word-break:break-all;line-height:1.7;font-size:13px}.diff-container{font-family:var(--font-mono);font-size:13px;padding:8px 0}.task-btn{padding:8px 18px;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-family);display:inline-flex;align-items:center;gap:6px}.task-btn:hover{transform:translateY(-1px)}.task-btn:active{transform:translateY(0)}.task-btn-clear{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color)}.task-btn-clear:hover{background:var(--accent-soft);border-color:var(--accent-color);color:var(--accent-color);box-shadow:var(--shadow-glow-sm)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::-webkit-scrollbar-corner{background:transparent}.git-status-bar{display:flex;align-items:center;gap:16px;padding:6px 14px;background:#94a3b814;border-radius:var(--radius-sm);border:1px solid var(--border-color)}.git-branch{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent-color)}.git-branch-icon{font-size:14px;opacity:.8}.git-stats{display:flex;align-items:center;gap:12px}.git-staged,.git-unstaged{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary)}.git-staged-count{font-weight:600;color:var(--success-color)}.git-unstaged-count{font-weight:600;color:var(--warning-color)}.git-changes-btn{padding:4px 10px;font-size:11px;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.git-changes-btn:hover{background:var(--accent-soft);border-color:var(--accent-color);color:var(--accent-color)}.staged-changes-panel{position:absolute;top:52px;left:0;right:0;max-height:400px;background:linear-gradient(180deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);border-bottom:1px solid var(--border-color);z-index:99;overflow-y:auto;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.staged-panel-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#0f172a99;border-bottom:1px solid var(--border-color);font-weight:600;font-size:12px;color:var(--text-secondary)}.staged-panel-actions{display:flex;gap:8px;align-items:center}.stage-btn,.unstage-btn{padding:4px 10px;font-size:11px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.stage-btn:hover,.unstage-btn:hover{background:var(--accent-soft);border-color:var(--accent-color);color:var(--accent-color)}.close-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;border-radius:var(--radius-xs);transition:all var(--transition-fast)}.close-btn:hover{background:#ef444433;color:var(--danger-color)}.changes-section{padding:8px 0;border-bottom:1px solid var(--border-color)}.changes-section:last-child{border-bottom:none}.changes-section-header{padding:4px 16px}.changes-section-title{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.changes-list{display:flex;flex-direction:column}.change-item{display:flex;align-items:center;gap:8px;padding:6px 16px;cursor:pointer;transition:background var(--transition-fast)}.change-item:hover{background:#94a3b814}.change-item.staged{background:var(--accent-soft)}.change-icon{width:16px;text-align:center;font-size:12px;color:var(--text-muted)}.change-item.staged .change-icon{color:var(--success-color)}.change-status{width:14px;height:14px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-family:var(--font-mono);border-radius:2px}.change-status.M{background:var(--warning-color);color:var(--bg-primary)}.change-status.A{background:var(--success-color);color:var(--bg-primary)}.change-status.D{background:var(--danger-color);color:var(--text-primary)}.change-status.R{background:var(--info-color);color:var(--text-primary)}.change-status.\?{background:var(--text-muted);color:var(--bg-primary)}.change-path{flex:1;font-size:12px;font-family:var(--font-mono);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-changes{padding:24px;text-align:center;color:var(--text-muted);font-size:13px}.commit-section{display:flex;gap:8px;padding:12px 16px;background:#0f172a99;border-top:1px solid var(--border-color)}.commit-input{flex:1;padding:8px 12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px;font-family:var(--font-family)}.commit-input:focus{outline:none;border-color:var(--accent-color)}.commit-btn{padding:8px 16px;background:var(--accent-color);border:none;border-radius:var(--radius-sm);color:var(--bg-primary);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.commit-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.file-git-badge{width:14px;height:14px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;font-family:var(--font-mono);border-radius:2px;margin-right:2px}.file-git-badge.staged{background:var(--success-color);color:var(--bg-primary)}.file-git-badge.wt{background:var(--warning-color);color:var(--bg-primary)}@media (max-width: 1024px){.left-panel{width:220px}.right-panel{width:45%;min-width:250px}.top-bar-left{width:220px}}@media (max-width: 768px){.main-content{flex-direction:column}.left-panel,.right-panel{width:100%;max-width:none;min-width:auto}.middle-panel{min-height:300px}.top-bar{flex-wrap:wrap;padding:10px 16px}.top-bar-left,.top-bar-center,.top-bar-right{width:auto}.top-bar-center{order:3;width:100%;justify-content:flex-start;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color)}}

package/dist/public/index.html

@@ -4,8 +4,8 @@
     <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>
-    <link rel="stylesheet" crossorigin href="./assets/main-DNXrKVO-.css">
+    <script type="module" crossorigin src="./assets/main-8FK9vFAz.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/main-CnRUPtz5.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/watcher.js

@@ -109,6 +109,21 @@ class FileWatcher {
     this.wsEmitter = wsEmitter;
     this.watcher = null;
     this.fileContents = /* @__PURE__ */ new Map();
+    this.gitStatusCallback = null;
+    this._gitStatusTimeout = null;
+  }
+  setGitStatusCallback(callback) {
+    this.gitStatusCallback = callback;
+  }
+  _scheduleGitStatusUpdate(filePath) {
+    if (this.gitStatusCallback) {
+      if (this._gitStatusTimeout) {
+        clearTimeout(this._gitStatusTimeout);
+      }
+      this._gitStatusTimeout = setTimeout(() => {
+        this.gitStatusCallback(filePath);
+      }, 500);
+    }
   }
   async start() {
     const ignored = [
@@ -174,6 +189,7 @@ class FileWatcher {
         }
         this.emitFileChange(filePath, newContent, diff);
       }
+      this._scheduleGitStatusUpdate(filePath);
     } catch (error) {
       logger.errorWithStack(`Error handling file change: ${filePath}`, error);
     }

package/package.json

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

package/src/aggregator.js

@@ -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';
@@ -7,6 +6,7 @@ import { createProxyServer } from './proxy.js';
 import { FileWatcher, scanDirectory } from './watcher.js';
 import { createLogger } from './lib/logger.js';
 import { spawnCodex, writeToPty, resizePty, killPty, onPtyData, onPtyExit, getPtyState, getOutputBuffer } from './pty-manager.js';
+import { createGitManager } from './git-manager.js';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { readFileSync, existsSync, writeFileSync } from 'fs';
@@ -56,6 +56,7 @@ class Aggregator {
     this.proxyServer = null;
     this.fileWatcher = null;
     this.ptyProcess = null;
+    this.gitManager = null;
   }
 
   async start(proxyPort) {
@@ -158,6 +159,19 @@ class Aggregator {
     this.fileWatcher = new FileWatcher(this.projectRoot, (event) => this.broadcast(event));
     await this.fileWatcher.start();
 
+    // Initialize Git Manager
+    this.gitManager = createGitManager(this.projectRoot, (event) => this.broadcast(event));
+    if (this.gitManager.isGitRepo()) {
+      await this.gitManager.broadcastUpdate();
+      logger.info('Git repository detected, git status broadcasting enabled');
+      // Set up git status update trigger on file changes
+      this.fileWatcher.setGitStatusCallback((filePath) => {
+        if (this.gitManager?.isGitRepo()) {
+          this.gitManager.scheduleStatusUpdate();
+        }
+      });
+    }
+
     await this.startCodex(proxyPort);
 
     return { httpPort: HTTP_PORT, proxyPort };
@@ -249,7 +263,7 @@ class Aggregator {
     }
   }
 
-  handleClientMessage(data, ws) {
+  async handleClientMessage(data, ws) {
     if (data.type === 'user_message') {
       writeToPty(data.data + '\r');
     } else if (data.type === 'open_file') {
@@ -267,6 +281,33 @@ class Aggregator {
           }
         }));
       }
+    } else if (data.type === 'git_status_request') {
+      if (this.gitManager?.isGitRepo()) {
+        this.gitManager.broadcastUpdate();
+      }
+    } else if (data.type === 'git_stage') {
+      if (this.gitManager?.isGitRepo()) {
+        if (data.filePath) {
+          await this.gitManager.stageFile(data.filePath);
+        } else {
+          await this.gitManager.stageAll();
+        }
+        this.gitManager.broadcastUpdate();
+      }
+    } else if (data.type === 'git_unstage') {
+      if (this.gitManager?.isGitRepo()) {
+        if (data.filePath) {
+          await this.gitManager.unstageFile(data.filePath);
+        } else {
+          await this.gitManager.unstageAll();
+        }
+        this.gitManager.broadcastUpdate();
+      }
+    } else if (data.type === 'git_commit') {
+      if (this.gitManager?.isGitRepo()) {
+        await this.gitManager.commit(data.message);
+        this.gitManager.broadcastUpdate();
+      }
     }
   }
 

package/src/components/App.jsx

@@ -13,6 +13,14 @@ export function App() {
   const [hasUpdate, setHasUpdate] = useState(false);
   const [projectName, setProjectName] = useState('');
   const [saving, setSaving] = useState(false);
+  const [gitInfo, setGitInfo] = useState({
+    isRepo: false,
+    branch: null,
+    status: null,
+    stagedCount: 0,
+    unstagedCount: 0
+  });
+  const [showStagedPanel, setShowStagedPanel] = useState(false);
   const wsRef = useRef(null);
 
   useEffect(() => {
@@ -122,6 +130,15 @@ export function App() {
       case 'file_content':
         openFileInTab(msg.data);
         break;
+      case 'git_status':
+        setGitInfo({
+          isRepo: msg.data.isRepo,
+          branch: msg.data.branch,
+          status: msg.data.status,
+          stagedCount: msg.data.stagedCount,
+          unstagedCount: msg.data.unstagedCount
+        });
+        break;
       case 'connected':
         console.log('Server confirmed connection');
         break;
@@ -130,6 +147,24 @@ export function App() {
     }
   }
 
+  function sendGitCommand(type, payload) {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type, ...payload }));
+    }
+  }
+
+  function handleStage(path) {
+    sendGitCommand('git_stage', { filePath: path });
+  }
+
+  function handleUnstage(path) {
+    sendGitCommand('git_unstage', { filePath: path });
+  }
+
+  function handleCommit(message) {
+    sendGitCommand('git_commit', { message });
+  }
+
   function openFileInTab(data) {
     const fileName = data.path.split(/[/\\]/).pop();
     
@@ -380,6 +415,30 @@ export function App() {
           <span className="top-bar-title">当前工作区: {projectName}</span>
         </div>
         <div className="top-bar-center">
+          {gitInfo.isRepo && (
+            <div className="git-status-bar">
+              <span className="git-branch">
+                <span className="git-branch-icon">⎇</span>
+                {gitInfo.branch || 'main'}
+              </span>
+              <div className="git-stats">
+                <span className="git-staged" title="已暂存">
+                  <span className="git-staged-count">{gitInfo.stagedCount}</span>
+                  <span className="git-staged-label">已暂存</span>
+                </span>
+                <span className="git-unstaged" title="未暂存">
+                  <span className="git-unstaged-count">{gitInfo.unstagedCount}</span>
+                  <span className="git-unstaged-label">未暂存</span>
+                </span>
+              </div>
+              <button
+                className="git-changes-btn"
+                onClick={() => setShowStagedPanel(!showStagedPanel)}
+              >
+                {showStagedPanel ? '隐藏变更' : '查看变更'}
+              </button>
+            </div>
+          )}
           <button className="task-btn task-btn-clear" onClick={clearAllDiff} title="清空所有 diff 显示">
             清空 diff
           </button>
@@ -402,6 +461,7 @@ export function App() {
           files={files}
           activeFile={activeTab?.path || null}
           onFileClick={handleFileClick}
+          gitInfo={gitInfo}
         />
         <div className="panel middle-panel">
           <TabBar
@@ -455,6 +515,15 @@ export function App() {
             }}
           />
         )}
+        {showStagedPanel && gitInfo.isRepo && (
+          <StagedChangesPanel
+            gitInfo={gitInfo}
+            onStage={handleStage}
+            onUnstage={handleUnstage}
+            onCommit={handleCommit}
+            onClose={() => setShowStagedPanel(false)}
+          />
+        )}
         <div className="panel right-panel">
           <div className="terminal-wrapper">
             <TerminalPanel />
@@ -516,7 +585,93 @@ function ContextMenu({ x, y, tab, tabs, saving, onClose, onCloseTab, onCloseOthe
   );
 }
 
-function LeftPanel({ files, activeFile, onFileClick }) {
+function StagedChangesPanel({ gitInfo, onStage, onUnstage, onCommit, onClose }) {
+  if (!gitInfo.isRepo || !gitInfo.status) return null;
+
+  const { staged, unstaged, untracked } = gitInfo.status;
+
+  return (
+    <div className="staged-changes-panel">
+      <div className="staged-panel-header">
+        <span>Git 变更</span>
+        <div className="staged-panel-actions">
+          <button onClick={() => onStage(null)} className="stage-btn">Stage All</button>
+          <button onClick={() => onUnstage(null)} className="unstage-btn">Unstage All</button>
+          <button onClick={onClose} className="close-btn">×</button>
+        </div>
+      </div>
+
+      {staged?.length > 0 && (
+        <div className="changes-section">
+          <div className="changes-section-header">
+            <span className="changes-section-title">已暂存 ({staged.length})</span>
+          </div>
+          <div className="changes-list">
+            {staged.map((file, i) => (
+              <div key={i} className="change-item staged" onClick={() => onUnstage(file.path)}>
+                <span className="change-icon">✓</span>
+                <span className={`change-status ${file.indexStatus}`}>{file.indexStatus}</span>
+                <span className="change-path">{file.path}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {unstaged?.length > 0 && (
+        <div className="changes-section">
+          <div className="changes-section-header">
+            <span className="changes-section-title">未暂存修改 ({unstaged.length})</span>
+          </div>
+          <div className="changes-list">
+            {unstaged.map((file, i) => (
+              <div key={i} className="change-item" onClick={() => onStage(file.path)}>
+                <span className="change-icon">○</span>
+                <span className={`change-status ${file.workTreeStatus}`}>{file.workTreeStatus}</span>
+                <span className="change-path">{file.path}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {untracked?.length > 0 && (
+        <div className="changes-section">
+          <div className="changes-section-header">
+            <span className="changes-section-title">未跟踪 ({untracked.length})</span>
+          </div>
+          <div className="changes-list">
+            {untracked.map((file, i) => (
+              <div key={i} className="change-item untracked" onClick={() => onStage(file.path)}>
+                <span className="change-icon">?</span>
+                <span className="change-status">?</span>
+                <span className="change-path">{file.path}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {((!staged?.length) && (!unstaged?.length) && (!untracked?.length)) && (
+        <div className="no-changes">无变更</div>
+      )}
+
+      {staged?.length > 0 && (
+        <div className="commit-section">
+          <input type="text" className="commit-input" placeholder="提交信息..." id="commit-message" />
+          <button className="commit-btn" onClick={() => {
+            const msg = document.getElementById('commit-message')?.value;
+            if (msg) onCommit(msg);
+          }}>
+            Commit
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function LeftPanel({ files, activeFile, onFileClick, gitInfo }) {
   const [expandedDirs, setExpandedDirs] = useState({});
   const [contextMenu, setContextMenu] = useState(null);
 
@@ -567,6 +722,14 @@ function LeftPanel({ files, activeFile, onFileClick }) {
       const isExpanded = expandedDirs[item.path];
       const indent = 8 + depth * 16;
 
+      // Get file git status
+      let fileGitStatus = null;
+      if (!isDir && gitInfo.status) {
+        fileGitStatus = gitInfo.status.staged?.find(f => f.path === item.path) ||
+                       gitInfo.status.unstaged?.find(f => f.path === item.path) ||
+                       gitInfo.status.untracked?.find(f => f.path === item.path);
+      }
+
       return (
         <React.Fragment key={item.path}>
           <div
@@ -576,6 +739,11 @@ function LeftPanel({ files, activeFile, onFileClick }) {
             onContextMenu={(e) => handleContextMenu(e, item)}
             style={{ paddingLeft: `${indent}px` }}
           >
+            {fileGitStatus && (
+              <span className={`file-git-badge ${fileGitStatus.indexStatus !== '?' ? 'staged' : 'wt'}`}>
+                {fileGitStatus.indexStatus !== '?' ? fileGitStatus.indexStatus : fileGitStatus.workTreeStatus}
+              </span>
+            )}
             <span className="file-icon">
               {isDir ? (isExpanded ? '📂' : '📁') : getFileIcon(item.type)}
             </span>

package/src/components/CodeViewer.jsx

@@ -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

@@ -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;
+  }
+}