codex-lens 0.1.11 → 0.1.12

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 (7) hide show
  1. package/dist/public/assets/main-DA0U-HuE.css +32 -0
  2. package/dist/public/index.html +2 -2
  3. package/package.json +1 -1
  4. package/src/global.css +283 -96
  5. package/update.bat +23 -0
  6. package/dist/public/assets/main-BKzjViIb.css +0 -32
  7. /package/dist/public/assets/{main-qWSP2Vq-.js → main-4W6-SFMa.js} +0 -0
package/dist/public/assets/main-DA0U-HuE.css ADDED
@@ -0,0 +1,32 @@
1
+ @import"https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700&display=swap";/**
2
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
3
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
4
+ * https://github.com/chjj/term.js
5
+ * @license MIT
6
+ *
7
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
8
+ * of this software and associated documentation files (the "Software"), to deal
9
+ * in the Software without restriction, including without limitation the rights
10
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
+ * copies of the Software, and to permit persons to whom the Software is
12
+ * furnished to do so, subject to the following conditions:
13
+ *
14
+ * The above copyright notice and this permission notice shall be included in
15
+ * all copies or substantial portions of the Software.
16
+ *
17
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23
+ * THE SOFTWARE.
24
+ *
25
+ * Originally forked from (with the author's permission):
26
+ * Fabrice Bellard's javascript vt100 for jslinux:
27
+ * http://bellard.org/jslinux/
28
+ * Copyright (c) 2011 Fabrice Bellard
29
+ * The original design remains. The terminal itself
30
+ * has been extended to include xterm CSI codes, among
31
+ * other features.
32
+ */.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: #0F172A;--bg-secondary: #1E293B;--bg-tertiary: #334155;--text-primary: #F8FAFC;--text-secondary: #94A3B8;--text-muted: #64748B;--border-color: #475569;--accent-color: #22C55E;--accent-hover: #16A34A;--accent-glow: rgba(34, 197, 94, .3);--diff-add-bg: rgba(34, 197, 94, .15);--diff-add-text: #4ADE80;--diff-add-border: #22C55E;--diff-remove-bg: rgba(239, 68, 68, .15);--diff-remove-text: #F87171;--diff-remove-border: #EF4444;--danger-color: #EF4444;--danger-hover: #DC2626;--success-color: #22C55E;--success-hover: #16A34A;--warning-color: #F59E0B;--font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "Fira Code", "SF Mono", "Consolas", "Monaco", monospace;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px var(--accent-glow);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease}@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-color: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;height:100vh;width:100vw}.panel{display:flex;flex-direction:column;overflow:hidden;background:var(--bg-secondary);border-right:1px solid var(--border-color)}.panel:last-child{border-right:none}.panel-header{padding:12px 16px;background:linear-gradient(180deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);border-bottom:1px solid var(--border-color);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.panel-content{flex:1;overflow:auto}.file-tree{padding:8px}.file-item{padding:6px 12px;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;gap:8px;transition:background var(--transition-fast),transform var(--transition-fast)}.file-item:hover{background:var(--bg-tertiary)}.file-item:active{transform:scale(.98)}.file-item.active{background:var(--accent-color);color:var(--text-primary);box-shadow:var(--shadow-glow)}.file-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:14px}.file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-line{font-family:var(--font-mono);font-size:13px;padding:2px 16px;white-space:pre;border-left:3px solid transparent;transition:background var(--transition-fast)}.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:20px;margin-right:8px;text-align:center;font-weight:600}.diff-line.added:before{content:"+";color:var(--diff-add-text)}.diff-line.removed:before{content:"-";color:var(--diff-remove-text)}.chat-message{padding:12px 16px;margin:8px 12px;border-radius:var(--radius-lg);max-width:85%;line-height:1.5}.chat-message.user{background:var(--accent-color);color:#fff;margin-left:auto;box-shadow:var(--shadow-md)}.chat-message.codex{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.chat-input-container{padding:12px;border-top:1px solid var(--border-color);background:var(--bg-secondary)}.chat-input{width:100%;padding:10px 14px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-family);font-size:14px;resize:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.chat-input:focus{outline:none;border-color:var(--accent-color);box-shadow:var(--shadow-glow)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.ws-status{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:8px;transition:background var(--transition-normal),box-shadow var(--transition-normal)}.ws-status.connected{background:var(--success-color);box-shadow:0 0 8px var(--success-color)}.ws-status.disconnected{background:var(--danger-color);box-shadow:0 0 8px var(--danger-color)}.version-info{display:flex;align-items:center;gap:8px;margin-left:auto}.version-number{font-size:11px;color:var(--text-muted);font-weight:500;font-family:var(--font-mono)}.update-badge{font-size:10px;padding:3px 8px;background:var(--warning-color);color:var(--bg-primary);border-radius:var(--radius-sm);cursor:pointer;font-weight:600;transition:background var(--transition-fast),transform var(--transition-fast)}.update-badge:hover{background:#fbbf24;transform:translateY(-1px)}.terminal-wrapper{flex:1;overflow:hidden;min-height:0}.left-panel{width:260px;flex-shrink:0}.middle-panel{flex:1;min-width:300px}.right-panel{width:40%;min-width:300px;max-width:60%}.section{margin-bottom:16px}.section-title{padding:12px 16px 8px;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.empty-state{padding:32px;text-align:center;color:var(--text-muted);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:8px}.empty-state:before{content:"📄";font-size:32px;opacity:.5}.code-panel{font-family:var(--font-mono)}.code-content{padding:16px;white-space:pre-wrap;word-break:break-all;line-height:1.7}.diff-container{font-family:var(--font-mono);font-size:13px;padding:8px 0}.tab-bar{display:flex;background:var(--bg-primary);border-bottom:1px solid var(--border-color);overflow-x:auto;min-height:40px}.tab{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg-secondary);border-right:1px solid var(--border-color);cursor:pointer;min-width:100px;max-width:200px;font-size:13px;color:var(--text-secondary);transition:background var(--transition-fast),color var(--transition-fast)}.tab:hover{background:var(--bg-tertiary);color:var(--text-primary)}.tab.active{background:var(--bg-primary);color:var(--text-primary);border-bottom:2px solid 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:14px;cursor:pointer;padding:2px 4px;border-radius:var(--radius-sm);line-height:1;transition:background var(--transition-fast),color var(--transition-fast)}.tab-close:hover{background:#ffffff1a;color:var(--text-primary)}.context-menu{position:fixed;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:4px 0;min-width:160px;box-shadow:var(--shadow-lg);z-index:1000;animation:contextMenuIn .15s ease}@keyframes contextMenuIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu-item{padding:10px 16px;cursor:pointer;font-size:13px;color:var(--text-primary);transition:background var(--transition-fast),color var(--transition-fast)}.context-menu-item:hover{background:var(--accent-color);color:#fff}.file-context-menu{position:fixed;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:4px 0;min-width:180px;box-shadow:var(--shadow-lg);z-index:1000;animation:contextMenuIn .15s ease}.task-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:linear-gradient(180deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);border-bottom:1px solid var(--border-color);min-height:48px}.task-status{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500}.task-status.idle{color:var(--text-muted)}.task-status.running{color:var(--accent-color)}.task-status:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%}.task-status.idle:before{background:var(--text-muted)}.task-status.running:before{background:var(--accent-color);box-shadow:0 0 8px var(--accent-color);animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 8px var(--accent-color)}50%{opacity:.6;box-shadow:0 0 4px var(--accent-color)}}.task-buttons{display:flex;gap:8px}.task-btn{padding:8px 16px;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);font-family:var(--font-family)}.task-btn:hover{transform:translateY(-1px)}.task-btn:active{transform:translateY(0)}.task-btn-start{background:var(--accent-color);color:#fff;box-shadow:var(--shadow-sm)}.task-btn-start:hover{background:var(--accent-hover);box-shadow:var(--shadow-glow)}.task-btn-start:disabled{background:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed;box-shadow:none}.task-btn-start:disabled:hover{transform:none}.task-btn-rollback{background:var(--danger-color);color:#fff}.task-btn-rollback:hover{background:var(--danger-hover);box-shadow:0 4px 12px #ef44444d}.task-btn-complete{background:var(--success-color);color:#fff}.task-btn-complete:hover{background:var(--success-hover);box-shadow:0 4px 12px #22c55e4d}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:modalOverlayIn .2s ease}@keyframes modalOverlayIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;min-width:340px;max-width:420px;box-shadow:var(--shadow-lg);animation:modalContentIn .2s ease}@keyframes modalContentIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-title{font-size:18px;font-weight:600;margin-bottom:12px;color:var(--text-primary)}.modal-body{font-size:14px;color:var(--text-secondary);margin-bottom:24px;line-height:1.7}.modal-buttons{display:flex;justify-content:flex-end;gap:12px}.modal-btn{padding:10px 20px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast);font-family:var(--font-family)}.modal-btn:hover{transform:translateY(-1px)}.modal-btn:active{transform:translateY(0)}.modal-btn-cancel{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.modal-btn-cancel:hover{background:var(--border-color)}.modal-btn-danger{background:var(--danger-color);color:#fff}.modal-btn-danger:hover{background:var(--danger-hover);box-shadow:0 4px 12px #ef44444d}@media (max-width: 768px){.left-panel{width:200px}.right-panel{width:50%;min-width:200px}}@media (max-width: 480px){.app-container{flex-direction:column}.left-panel,.right-panel{width:100%;max-width:none;min-width:auto}.middle-panel{min-height:300px}}
package/dist/public/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Codex Viewer</title>
7
- <script type="module" crossorigin src="./assets/main-qWSP2Vq-.js"></script>
8
- <link rel="stylesheet" crossorigin href="./assets/main-BKzjViIb.css">
7
+ <script type="module" crossorigin src="./assets/main-4W6-SFMa.js"></script>
8
+ <link rel="stylesheet" crossorigin href="./assets/main-DA0U-HuE.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "codex-lens",
3
- "version": "0.1.11",
3
+ "version": "0.1.12",
4
4
  "description": "A visualization tool for Codex that monitors API requests and file system changes with task snapshot rollback",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/global.css CHANGED
@@ -1,18 +1,47 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700&display=swap');
2
+
1
3
  :root {
2
- --bg-primary: #1e1e1e;
3
- --bg-secondary: #252526;
4
- --bg-tertiary: #2d2d30;
5
- --text-primary: #cccccc;
6
- --text-secondary: #858585;
7
- --border-color: #3c3c3c;
8
- --accent-color: #007acc;
9
- --accent-hover: #1e8ad2;
10
- --diff-add-bg: #2d4a2d;
11
- --diff-add-text: #89d185;
12
- --diff-remove-bg: #5a2d2d;
13
- --diff-remove-text: #f48771;
14
- --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
15
- --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
4
+ --bg-primary: #0F172A;
5
+ --bg-secondary: #1E293B;
6
+ --bg-tertiary: #334155;
7
+ --text-primary: #F8FAFC;
8
+ --text-secondary: #94A3B8;
9
+ --text-muted: #64748B;
10
+ --border-color: #475569;
11
+ --accent-color: #22C55E;
12
+ --accent-hover: #16A34A;
13
+ --accent-glow: rgba(34, 197, 94, 0.3);
14
+ --diff-add-bg: rgba(34, 197, 94, 0.15);
15
+ --diff-add-text: #4ADE80;
16
+ --diff-add-border: #22C55E;
17
+ --diff-remove-bg: rgba(239, 68, 68, 0.15);
18
+ --diff-remove-text: #F87171;
19
+ --diff-remove-border: #EF4444;
20
+ --danger-color: #EF4444;
21
+ --danger-hover: #DC2626;
22
+ --success-color: #22C55E;
23
+ --success-hover: #16A34A;
24
+ --warning-color: #F59E0B;
25
+ --font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
26
+ --font-mono: 'Fira Code', 'SF Mono', 'Consolas', 'Monaco', monospace;
27
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
28
+ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
29
+ --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
30
+ --shadow-glow: 0 0 20px var(--accent-glow);
31
+ --radius-sm: 4px;
32
+ --radius-md: 8px;
33
+ --radius-lg: 12px;
34
+ --transition-fast: 150ms ease;
35
+ --transition-normal: 200ms ease;
36
+ --transition-slow: 300ms ease;
37
+ }
38
+
39
+ @media (prefers-reduced-motion: reduce) {
40
+ *, *::before, *::after {
41
+ animation-duration: 0.01ms !important;
42
+ animation-iteration-count: 1 !important;
43
+ transition-duration: 0.01ms !important;
44
+ }
16
45
  }
17
46
 
18
47
  * {
@@ -32,7 +61,9 @@ body {
32
61
  background-color: var(--bg-primary);
33
62
  color: var(--text-primary);
34
63
  font-size: 14px;
35
- line-height: 1.5;
64
+ line-height: 1.6;
65
+ -webkit-font-smoothing: antialiased;
66
+ -moz-osx-font-smoothing: grayscale;
36
67
  }
37
68
 
38
69
  .app-container {
@@ -45,6 +76,7 @@ body {
45
76
  display: flex;
46
77
  flex-direction: column;
47
78
  overflow: hidden;
79
+ background: var(--bg-secondary);
48
80
  border-right: 1px solid var(--border-color);
49
81
  }
50
82
 
@@ -53,13 +85,17 @@ body {
53
85
  }
54
86
 
55
87
  .panel-header {
56
- padding: 8px 12px;
57
- background: var(--bg-tertiary);
88
+ padding: 12px 16px;
89
+ background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
58
90
  border-bottom: 1px solid var(--border-color);
59
91
  font-weight: 600;
60
- font-size: 12px;
92
+ font-size: 11px;
61
93
  text-transform: uppercase;
94
+ letter-spacing: 0.5px;
62
95
  color: var(--text-secondary);
96
+ display: flex;
97
+ align-items: center;
98
+ gap: 8px;
63
99
  }
64
100
 
65
101
  .panel-content {
@@ -72,76 +108,103 @@ body {
72
108
  }
73
109
 
74
110
  .file-item {
75
- padding: 4px 8px;
111
+ padding: 6px 12px;
76
112
  cursor: pointer;
77
- border-radius: 3px;
113
+ border-radius: var(--radius-sm);
78
114
  display: flex;
79
115
  align-items: center;
80
- gap: 6px;
116
+ gap: 8px;
117
+ transition: background var(--transition-fast), transform var(--transition-fast);
81
118
  }
82
119
 
83
120
  .file-item:hover {
84
121
  background: var(--bg-tertiary);
85
122
  }
86
123
 
124
+ .file-item:active {
125
+ transform: scale(0.98);
126
+ }
127
+
87
128
  .file-item.active {
88
129
  background: var(--accent-color);
130
+ color: var(--text-primary);
131
+ box-shadow: var(--shadow-glow);
89
132
  }
90
133
 
91
134
  .file-icon {
92
135
  width: 16px;
93
136
  height: 16px;
137
+ display: flex;
138
+ align-items: center;
139
+ justify-content: center;
140
+ font-size: 14px;
141
+ }
142
+
143
+ .file-name {
144
+ flex: 1;
145
+ overflow: hidden;
146
+ text-overflow: ellipsis;
147
+ white-space: nowrap;
94
148
  }
95
149
 
96
150
  .diff-line {
97
151
  font-family: var(--font-mono);
98
152
  font-size: 13px;
99
- padding: 2px 12px;
153
+ padding: 2px 16px;
100
154
  white-space: pre;
155
+ border-left: 3px solid transparent;
156
+ transition: background var(--transition-fast);
101
157
  }
102
158
 
103
159
  .diff-line.added {
104
160
  background: var(--diff-add-bg);
105
161
  color: var(--diff-add-text);
162
+ border-left-color: var(--diff-add-border);
106
163
  }
107
164
 
108
165
  .diff-line.removed {
109
166
  background: var(--diff-remove-bg);
110
167
  color: var(--diff-remove-text);
168
+ border-left-color: var(--diff-remove-border);
111
169
  }
112
170
 
113
171
  .diff-line::before {
114
172
  display: inline-block;
115
- width: 16px;
173
+ width: 20px;
116
174
  margin-right: 8px;
117
175
  text-align: center;
118
- font-weight: bold;
176
+ font-weight: 600;
119
177
  }
120
178
 
121
179
  .diff-line.added::before {
122
180
  content: '+';
181
+ color: var(--diff-add-text);
123
182
  }
124
183
 
125
184
  .diff-line.removed::before {
126
185
  content: '-';
186
+ color: var(--diff-remove-text);
127
187
  }
128
188
 
129
189
  .chat-message {
130
- padding: 8px 12px;
131
- margin: 4px 8px;
132
- border-radius: 8px;
190
+ padding: 12px 16px;
191
+ margin: 8px 12px;
192
+ border-radius: var(--radius-lg);
133
193
  max-width: 85%;
194
+ line-height: 1.5;
134
195
  }
135
196
 
136
197
  .chat-message.user {
137
198
  background: var(--accent-color);
138
199
  color: white;
139
200
  margin-left: auto;
201
+ box-shadow: var(--shadow-md);
140
202
  }
141
203
 
142
204
  .chat-message.codex {
143
205
  background: var(--bg-tertiary);
144
206
  color: var(--text-primary);
207
+ border: 1px solid var(--border-color);
145
208
  }
146
209
 
147
210
  .chat-input-container {
@@ -152,36 +215,39 @@ body {
152
215
 
153
216
  .chat-input {
154
217
  width: 100%;
155
- padding: 8px 12px;
218
+ padding: 10px 14px;
156
219
  background: var(--bg-primary);
157
220
  border: 1px solid var(--border-color);
158
- border-radius: 4px;
221
+ border-radius: var(--radius-md);
159
222
  color: var(--text-primary);
160
223
  font-family: var(--font-family);
224
+ font-size: 14px;
161
225
  resize: none;
226
+ transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
162
227
  }
163
228
 
164
229
  .chat-input:focus {
165
230
  outline: none;
166
231
  border-color: var(--accent-color);
232
+ box-shadow: var(--shadow-glow);
167
233
  }
168
234
 
169
235
  ::-webkit-scrollbar {
170
- width: 10px;
171
- height: 10px;
236
+ width: 8px;
237
+ height: 8px;
172
238
  }
173
239
 
174
240
  ::-webkit-scrollbar-track {
175
- background: var(--bg-secondary);
241
+ background: var(--bg-primary);
176
242
  }
177
243
 
178
244
  ::-webkit-scrollbar-thumb {
179
245
  background: var(--border-color);
180
- border-radius: 5px;
246
+ border-radius: 4px;
181
247
  }
182
248
 
183
249
  ::-webkit-scrollbar-thumb:hover {
184
- background: var(--text-secondary);
250
+ background: var(--text-muted);
185
251
  }
186
252
 
187
253
  .ws-status {
@@ -190,14 +256,17 @@ body {
190
256
  height: 8px;
191
257
  border-radius: 50%;
192
258
  margin-left: 8px;
259
+ transition: background var(--transition-normal), box-shadow var(--transition-normal);
193
260
  }
194
261
 
195
262
  .ws-status.connected {
196
- background: #0dbc79;
263
+ background: var(--success-color);
264
+ box-shadow: 0 0 8px var(--success-color);
197
265
  }
198
266
 
199
267
  .ws-status.disconnected {
200
- background: #cd3131;
268
+ background: var(--danger-color);
269
+ box-shadow: 0 0 8px var(--danger-color);
201
270
  }
202
271
 
203
272
  .version-info {
@@ -209,21 +278,25 @@ body {
209
278
 
210
279
  .version-number {
211
280
  font-size: 11px;
212
- color: var(--text-secondary);
213
- font-weight: normal;
281
+ color: var(--text-muted);
282
+ font-weight: 500;
283
+ font-family: var(--font-mono);
214
284
  }
215
285
 
216
286
  .update-badge {
217
287
  font-size: 10px;
218
- padding: 2px 6px;
219
- background: #d9534f;
220
- color: white;
221
- border-radius: 3px;
288
+ padding: 3px 8px;
289
+ background: var(--warning-color);
290
+ color: var(--bg-primary);
291
+ border-radius: var(--radius-sm);
222
292
  cursor: pointer;
293
+ font-weight: 600;
294
+ transition: background var(--transition-fast), transform var(--transition-fast);
223
295
  }
224
296
 
225
297
  .update-badge:hover {
226
- background: #c9302c;
298
+ background: #FBBF24;
299
+ transform: translateY(-1px);
227
300
  }
228
301
 
229
302
  .terminal-wrapper {
@@ -233,7 +306,7 @@ body {
233
306
  }
234
307
 
235
308
  .left-panel {
236
- width: 250px;
309
+ width: 260px;
237
310
  flex-shrink: 0;
238
311
  }
239
312
 
@@ -253,18 +326,29 @@ body {
253
326
  }
254
327
 
255
328
  .section-title {
256
- padding: 8px 12px 4px;
257
- font-size: 11px;
329
+ padding: 12px 16px 8px;
330
+ font-size: 10px;
258
331
  font-weight: 600;
259
- color: var(--text-secondary);
332
+ color: var(--text-muted);
260
333
  text-transform: uppercase;
334
+ letter-spacing: 0.5px;
261
335
  }
262
336
 
263
337
  .empty-state {
264
- padding: 20px;
338
+ padding: 32px;
265
339
  text-align: center;
266
- color: var(--text-secondary);
340
+ color: var(--text-muted);
267
341
  font-size: 13px;
342
+ display: flex;
343
+ flex-direction: column;
344
+ align-items: center;
345
+ gap: 8px;
346
+ }
347
+
348
+ .empty-state::before {
349
+ content: '📄';
350
+ font-size: 32px;
351
+ opacity: 0.5;
268
352
  }
269
353
 
270
354
  .code-panel {
@@ -272,29 +356,31 @@ body {
272
356
  }
273
357
 
274
358
  .code-content {
275
- padding: 12px;
359
+ padding: 16px;
276
360
  white-space: pre-wrap;
277
361
  word-break: break-all;
362
+ line-height: 1.7;
278
363
  }
279
364
 
280
365
  .diff-container {
281
366
  font-family: var(--font-mono);
282
367
  font-size: 13px;
368
+ padding: 8px 0;
283
369
  }
284
370
 
285
371
  .tab-bar {
286
372
  display: flex;
287
- background: var(--bg-secondary);
373
+ background: var(--bg-primary);
288
374
  border-bottom: 1px solid var(--border-color);
289
375
  overflow-x: auto;
290
- min-height: 36px;
376
+ min-height: 40px;
291
377
  }
292
378
 
293
379
  .tab {
294
380
  display: flex;
295
381
  align-items: center;
296
382
  gap: 8px;
297
- padding: 8px 12px;
383
+ padding: 10px 16px;
298
384
  background: var(--bg-secondary);
299
385
  border-right: 1px solid var(--border-color);
300
386
  cursor: pointer;
@@ -302,10 +388,12 @@ body {
302
388
  max-width: 200px;
303
389
  font-size: 13px;
304
390
  color: var(--text-secondary);
391
+ transition: background var(--transition-fast), color var(--transition-fast);
305
392
  }
306
393
 
307
394
  .tab:hover {
308
395
  background: var(--bg-tertiary);
396
+ color: var(--text-primary);
309
397
  }
310
398
 
311
399
  .tab.active {
@@ -324,12 +412,13 @@ body {
324
412
  .tab-close {
325
413
  background: none;
326
414
  border: none;
327
- color: var(--text-secondary);
328
- font-size: 16px;
415
+ color: var(--text-muted);
416
+ font-size: 14px;
329
417
  cursor: pointer;
330
- padding: 0 4px;
331
- border-radius: 3px;
418
+ padding: 2px 4px;
419
+ border-radius: var(--radius-sm);
332
420
  line-height: 1;
421
+ transition: background var(--transition-fast), color var(--transition-fast);
333
422
  }
334
423
 
335
424
  .tab-close:hover {
@@ -341,55 +430,70 @@ body {
341
430
  position: fixed;
342
431
  background: var(--bg-tertiary);
343
432
  border: 1px solid var(--border-color);
344
- border-radius: 4px;
433
+ border-radius: var(--radius-md);
345
434
  padding: 4px 0;
346
- min-width: 150px;
347
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
435
+ min-width: 160px;
436
+ box-shadow: var(--shadow-lg);
348
437
  z-index: 1000;
438
+ animation: contextMenuIn 0.15s ease;
439
+ }
440
+
441
+ @keyframes contextMenuIn {
442
+ from {
443
+ opacity: 0;
444
+ transform: scale(0.95);
445
+ }
446
+ to {
447
+ opacity: 1;
448
+ transform: scale(1);
449
+ }
349
450
  }
350
451
 
351
452
  .context-menu-item {
352
- padding: 8px 16px;
453
+ padding: 10px 16px;
353
454
  cursor: pointer;
354
455
  font-size: 13px;
355
456
  color: var(--text-primary);
457
+ transition: background var(--transition-fast), color var(--transition-fast);
356
458
  }
357
459
 
358
460
  .context-menu-item:hover {
359
461
  background: var(--accent-color);
462
+ color: white;
360
463
  }
361
464
 
362
465
  .file-context-menu {
363
466
  position: fixed;
364
467
  background: var(--bg-tertiary);
365
468
  border: 1px solid var(--border-color);
366
- border-radius: 4px;
469
+ border-radius: var(--radius-md);
367
470
  padding: 4px 0;
368
- min-width: 150px;
369
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
471
+ min-width: 180px;
472
+ box-shadow: var(--shadow-lg);
370
473
  z-index: 1000;
474
+ animation: contextMenuIn 0.15s ease;
371
475
  }
372
476
 
373
477
  .task-bar {
374
478
  display: flex;
375
479
  align-items: center;
376
480
  justify-content: space-between;
377
- padding: 8px 12px;
378
- background: var(--bg-secondary);
481
+ padding: 10px 16px;
482
+ background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
379
483
  border-bottom: 1px solid var(--border-color);
380
- min-height: 44px;
484
+ min-height: 48px;
381
485
  }
382
486
 
383
487
  .task-status {
384
488
  display: flex;
385
489
  align-items: center;
386
- gap: 8px;
490
+ gap: 10px;
387
491
  font-size: 13px;
388
492
  font-weight: 500;
389
493
  }
390
494
 
391
495
  .task-status.idle {
392
- color: var(--text-secondary);
496
+ color: var(--text-muted);
393
497
  }
394
498
 
395
499
  .task-status.running {
@@ -405,17 +509,24 @@ body {
405
509
  }
406
510
 
407
511
  .task-status.idle::before {
408
- background: var(--text-secondary);
512
+ background: var(--text-muted);
409
513
  }
410
514
 
411
515
  .task-status.running::before {
412
516
  background: var(--accent-color);
517
+ box-shadow: 0 0 8px var(--accent-color);
413
518
  animation: pulse 1.5s infinite;
414
519
  }
415
520
 
416
521
  @keyframes pulse {
417
- 0%, 100% { opacity: 1; }
418
- 50% { opacity: 0.5; }
522
+ 0%, 100% {
523
+ opacity: 1;
524
+ box-shadow: 0 0 8px var(--accent-color);
525
+ }
526
+ 50% {
527
+ opacity: 0.6;
528
+ box-shadow: 0 0 4px var(--accent-color);
529
+ }
419
530
  }
420
531
 
421
532
  .task-buttons {
@@ -424,46 +535,64 @@ body {
424
535
  }
425
536
 
426
537
  .task-btn {
427
- padding: 6px 12px;
538
+ padding: 8px 16px;
428
539
  border: none;
429
- border-radius: 4px;
540
+ border-radius: var(--radius-sm);
430
541
  font-size: 12px;
431
- font-weight: 500;
542
+ font-weight: 600;
432
543
  cursor: pointer;
433
- transition: background 0.2s;
544
+ transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
545
+ font-family: var(--font-family);
546
+ }
547
+
548
+ .task-btn:hover {
549
+ transform: translateY(-1px);
550
+ }
551
+
552
+ .task-btn:active {
553
+ transform: translateY(0);
434
554
  }
435
555
 
436
556
  .task-btn-start {
437
557
  background: var(--accent-color);
438
558
  color: white;
559
+ box-shadow: var(--shadow-sm);
439
560
  }
440
561
 
441
562
  .task-btn-start:hover {
442
563
  background: var(--accent-hover);
564
+ box-shadow: var(--shadow-glow);
443
565
  }
444
566
 
445
567
  .task-btn-start:disabled {
446
568
  background: var(--bg-tertiary);
447
- color: var(--text-secondary);
569
+ color: var(--text-muted);
448
570
  cursor: not-allowed;
571
+ box-shadow: none;
572
+ }
573
+
574
+ .task-btn-start:disabled:hover {
575
+ transform: none;
449
576
  }
450
577
 
451
578
  .task-btn-rollback {
452
- background: #d9534f;
579
+ background: var(--danger-color);
453
580
  color: white;
454
581
  }
455
582
 
456
583
  .task-btn-rollback:hover {
457
- background: #c9302c;
584
+ background: var(--danger-hover);
585
+ box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
458
586
  }
459
587
 
460
588
  .task-btn-complete {
461
- background: #5cb85c;
589
+ background: var(--success-color);
462
590
  color: white;
463
591
  }
464
592
 
465
593
  .task-btn-complete:hover {
466
- background: #4cae4c;
594
+ background: var(--success-hover);
595
+ box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
467
596
  }
468
597
 
469
598
  .modal-overlay {
@@ -472,25 +601,44 @@ body {
472
601
  left: 0;
473
602
  right: 0;
474
603
  bottom: 0;
475
- background: rgba(0, 0, 0, 0.6);
604
+ background: rgba(0, 0, 0, 0.7);
605
+ backdrop-filter: blur(4px);
476
606
  display: flex;
477
607
  align-items: center;
478
608
  justify-content: center;
479
609
  z-index: 2000;
610
+ animation: modalOverlayIn 0.2s ease;
611
+ }
612
+
613
+ @keyframes modalOverlayIn {
614
+ from { opacity: 0; }
615
+ to { opacity: 1; }
480
616
  }
481
617
 
482
618
  .modal-content {
483
619
  background: var(--bg-secondary);
484
620
  border: 1px solid var(--border-color);
485
- border-radius: 8px;
486
- padding: 20px;
487
- min-width: 320px;
488
- max-width: 400px;
489
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
621
+ border-radius: var(--radius-lg);
622
+ padding: 24px;
623
+ min-width: 340px;
624
+ max-width: 420px;
625
+ box-shadow: var(--shadow-lg);
626
+ animation: modalContentIn 0.2s ease;
627
+ }
628
+
629
+ @keyframes modalContentIn {
630
+ from {
631
+ opacity: 0;
632
+ transform: scale(0.95) translateY(-10px);
633
+ }
634
+ to {
635
+ opacity: 1;
636
+ transform: scale(1) translateY(0);
637
+ }
490
638
  }
491
639
 
492
640
  .modal-title {
493
- font-size: 16px;
641
+ font-size: 18px;
494
642
  font-weight: 600;
495
643
  margin-bottom: 12px;
496
644
  color: var(--text-primary);
@@ -499,8 +647,8 @@ body {
499
647
  .modal-body {
500
648
  font-size: 14px;
501
649
  color: var(--text-secondary);
502
- margin-bottom: 20px;
503
- line-height: 1.6;
650
+ margin-bottom: 24px;
651
+ line-height: 1.7;
504
652
  }
505
653
 
506
654
  .modal-buttons {
@@ -510,18 +658,28 @@ body {
510
658
  }
511
659
 
512
660
  .modal-btn {
513
- padding: 8px 16px;
661
+ padding: 10px 20px;
514
662
  border: none;
515
- border-radius: 4px;
663
+ border-radius: var(--radius-sm);
516
664
  font-size: 13px;
517
- font-weight: 500;
665
+ font-weight: 600;
518
666
  cursor: pointer;
519
- transition: background 0.2s;
667
+ transition: background var(--transition-fast), transform var(--transition-fast);
668
+ font-family: var(--font-family);
669
+ }
670
+
671
+ .modal-btn:hover {
672
+ transform: translateY(-1px);
673
+ }
674
+
675
+ .modal-btn:active {
676
+ transform: translateY(0);
520
677
  }
521
678
 
522
679
  .modal-btn-cancel {
523
680
  background: var(--bg-tertiary);
524
681
  color: var(--text-primary);
682
+ border: 1px solid var(--border-color);
525
683
  }
526
684
 
527
685
  .modal-btn-cancel:hover {
@@ -529,10 +687,39 @@ body {
529
687
  }
530
688
 
531
689
  .modal-btn-danger {
532
- background: #d9534f;
690
+ background: var(--danger-color);
533
691
  color: white;
534
692
  }
535
693
 
536
694
  .modal-btn-danger:hover {
537
- background: #c9302c;
695
+ background: var(--danger-hover);
696
+ box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
697
+ }
698
+
699
+ @media (max-width: 768px) {
700
+ .left-panel {
701
+ width: 200px;
702
+ }
703
+
704
+ .right-panel {
705
+ width: 50%;
706
+ min-width: 200px;
707
+ }
708
+ }
709
+
710
+ @media (max-width: 480px) {
711
+ .app-container {
712
+ flex-direction: column;
713
+ }
714
+
715
+ .left-panel,
716
+ .right-panel {
717
+ width: 100%;
718
+ max-width: none;
719
+ min-width: auto;
720
+ }
721
+
722
+ .middle-panel {
723
+ min-height: 300px;
724
+ }
538
725
  }
package/update.bat ADDED
@@ -0,0 +1,23 @@
1
+ @echo off
2
+ cd /d "%~dp0"
3
+
4
+ echo Publishing to npm...
5
+ call npm publish
6
+ if %errorlevel% neq 0 (
7
+ echo Failed to publish to npm
8
+ pause
9
+ exit /b 1
10
+ )
11
+
12
+ echo.
13
+ echo Installing codex-lens globally...
14
+ call npm install -g codex-lens
15
+ if %errorlevel% neq 0 (
16
+ echo Failed to install codex-lens globally
17
+ pause
18
+ exit /b 1
19
+ )
20
+
21
+ echo.
22
+ echo Done! codex-lens has been published and installed globally.
23
+ pause
package/dist/public/assets/main-BKzjViIb.css DELETED
@@ -1,32 +0,0 @@
1
- /**
2
- * Copyright (c) 2014 The xterm.js authors. All rights reserved.
3
- * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
4
- * https://github.com/chjj/term.js
5
- * @license MIT
6
- *
7
- * Permission is hereby granted, free of charge, to any person obtaining a copy
8
- * of this software and associated documentation files (the "Software"), to deal
9
- * in the Software without restriction, including without limitation the rights
10
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
- * copies of the Software, and to permit persons to whom the Software is
12
- * furnished to do so, subject to the following conditions:
13
- *
14
- * The above copyright notice and this permission notice shall be included in
15
- * all copies or substantial portions of the Software.
16
- *
17
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23
- * THE SOFTWARE.
24
- *
25
- * Originally forked from (with the author's permission):
26
- * Fabrice Bellard's javascript vt100 for jslinux:
27
- * http://bellard.org/jslinux/
28
- * Copyright (c) 2011 Fabrice Bellard
29
- * The original design remains. The terminal itself
30
- * has been extended to include xterm CSI codes, among
31
- * other features.
32
- */.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: #1e1e1e;--bg-secondary: #252526;--bg-tertiary: #2d2d30;--text-primary: #cccccc;--text-secondary: #858585;--border-color: #3c3c3c;--accent-color: #007acc;--accent-hover: #1e8ad2;--diff-add-bg: #2d4a2d;--diff-add-text: #89d185;--diff-remove-bg: #5a2d2d;--diff-remove-text: #f48771;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono: "SF Mono", "Fira Code", "Consolas", monospace}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);font-size:14px;line-height:1.5}.app-container{display:flex;height:100vh;width:100vw}.panel{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border-color)}.panel:last-child{border-right:none}.panel-header{padding:8px 12px;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);font-weight:600;font-size:12px;text-transform:uppercase;color:var(--text-secondary)}.panel-content{flex:1;overflow:auto}.file-tree{padding:8px}.file-item{padding:4px 8px;cursor:pointer;border-radius:3px;display:flex;align-items:center;gap:6px}.file-item:hover{background:var(--bg-tertiary)}.file-item.active{background:var(--accent-color)}.file-icon{width:16px;height:16px}.diff-line{font-family:var(--font-mono);font-size:13px;padding:2px 12px;white-space:pre}.diff-line.added{background:var(--diff-add-bg);color:var(--diff-add-text)}.diff-line.removed{background:var(--diff-remove-bg);color:var(--diff-remove-text)}.diff-line:before{display:inline-block;width:16px;margin-right:8px;text-align:center;font-weight:700}.diff-line.added:before{content:"+"}.diff-line.removed:before{content:"-"}.chat-message{padding:8px 12px;margin:4px 8px;border-radius:8px;max-width:85%}.chat-message.user{background:var(--accent-color);color:#fff;margin-left:auto}.chat-message.codex{background:var(--bg-tertiary);color:var(--text-primary)}.chat-input-container{padding:12px;border-top:1px solid var(--border-color);background:var(--bg-secondary)}.chat-input{width:100%;padding:8px 12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-family:var(--font-family);resize:none}.chat-input:focus{outline:none;border-color:var(--accent-color)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.ws-status{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:8px}.ws-status.connected{background:#0dbc79}.ws-status.disconnected{background:#cd3131}.version-info{display:flex;align-items:center;gap:8px;margin-left:auto}.version-number{font-size:11px;color:var(--text-secondary);font-weight:400}.update-badge{font-size:10px;padding:2px 6px;background:#d9534f;color:#fff;border-radius:3px;cursor:pointer}.update-badge:hover{background:#c9302c}.terminal-wrapper{flex:1;overflow:hidden;min-height:0}.left-panel{width:250px;flex-shrink:0}.middle-panel{flex:1;min-width:300px}.right-panel{width:40%;min-width:300px;max-width:60%}.section{margin-bottom:16px}.section-title{padding:8px 12px 4px;font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase}.empty-state{padding:20px;text-align:center;color:var(--text-secondary);font-size:13px}.code-panel{font-family:var(--font-mono)}.code-content{padding:12px;white-space:pre-wrap;word-break:break-all}.diff-container{font-family:var(--font-mono);font-size:13px}.tab-bar{display:flex;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);overflow-x:auto;min-height:36px}.tab{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-secondary);border-right:1px solid var(--border-color);cursor:pointer;min-width:100px;max-width:200px;font-size:13px;color:var(--text-secondary)}.tab:hover{background:var(--bg-tertiary)}.tab.active{background:var(--bg-primary);color:var(--text-primary);border-bottom:2px solid var(--accent-color)}.tab-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-close{background:none;border:none;color:var(--text-secondary);font-size:16px;cursor:pointer;padding:0 4px;border-radius:3px;line-height:1}.tab-close:hover{background:#ffffff1a;color:var(--text-primary)}.context-menu{position:fixed;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;padding:4px 0;min-width:150px;box-shadow:0 4px 12px #0000004d;z-index:1000}.context-menu-item{padding:8px 16px;cursor:pointer;font-size:13px;color:var(--text-primary)}.context-menu-item:hover{background:var(--accent-color)}.file-context-menu{position:fixed;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;padding:4px 0;min-width:150px;box-shadow:0 4px 12px #0000004d;z-index:1000}.task-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);min-height:44px}.task-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}.task-status.idle{color:var(--text-secondary)}.task-status.running{color:var(--accent-color)}.task-status:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%}.task-status.idle:before{background:var(--text-secondary)}.task-status.running:before{background:var(--accent-color);animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.task-buttons{display:flex;gap:8px}.task-btn{padding:6px 12px;border:none;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:background .2s}.task-btn-start{background:var(--accent-color);color:#fff}.task-btn-start:hover{background:var(--accent-hover)}.task-btn-start:disabled{background:var(--bg-tertiary);color:var(--text-secondary);cursor:not-allowed}.task-btn-rollback{background:#d9534f;color:#fff}.task-btn-rollback:hover{background:#c9302c}.task-btn-complete{background:#5cb85c;color:#fff}.task-btn-complete:hover{background:#4cae4c}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:2000}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:20px;min-width:320px;max-width:400px;box-shadow:0 8px 32px #0006}.modal-title{font-size:16px;font-weight:600;margin-bottom:12px;color:var(--text-primary)}.modal-body{font-size:14px;color:var(--text-secondary);margin-bottom:20px;line-height:1.6}.modal-buttons{display:flex;justify-content:flex-end;gap:12px}.modal-btn{padding:8px 16px;border:none;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s}.modal-btn-cancel{background:var(--bg-tertiary);color:var(--text-primary)}.modal-btn-cancel:hover{background:var(--border-color)}.modal-btn-danger{background:#d9534f;color:#fff}.modal-btn-danger:hover{background:#c9302c}