agentgui 1.0.94 → 1.0.96
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.
- package/.prd +6 -0
- package/database.js +43 -1
- package/lib/claude-runner.js +24 -22
- package/package.json +1 -1
- package/server.js +133 -146
- package/static/index.html +422 -977
- package/static/js/client.js +229 -144
- package/static/js/features.js +43 -25
- package/static/js/websocket-manager.js +1 -1
package/static/index.html
CHANGED
|
@@ -4,19 +4,13 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
6
6
|
<meta name="description" content="AgentGUI - Real-time Claude Code Execution Visualization">
|
|
7
|
-
<title>AgentGUI
|
|
7
|
+
<title>AgentGUI</title>
|
|
8
8
|
|
|
9
|
-
<!-- RippleUI CSS -->
|
|
10
9
|
<link href="https://unpkg.com/rippleui@0.14.0/dist/ripple.css" rel="stylesheet">
|
|
11
|
-
|
|
12
|
-
<!-- Syntax Highlighting -->
|
|
13
10
|
<link href="https://unpkg.com/prism@1.29.0/themes/prism-dark.css" rel="stylesheet">
|
|
14
11
|
|
|
15
|
-
<!-- Custom Styles -->
|
|
16
12
|
<style>
|
|
17
|
-
|
|
18
|
-
box-sizing: border-box;
|
|
19
|
-
}
|
|
13
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
20
14
|
|
|
21
15
|
:root {
|
|
22
16
|
--color-primary: #3b82f6;
|
|
@@ -30,6 +24,9 @@
|
|
|
30
24
|
--color-success: #10b981;
|
|
31
25
|
--color-error: #ef4444;
|
|
32
26
|
--color-warning: #f59e0b;
|
|
27
|
+
--sidebar-width: 300px;
|
|
28
|
+
--header-height: 52px;
|
|
29
|
+
--msg-max-width: 768px;
|
|
33
30
|
}
|
|
34
31
|
|
|
35
32
|
html.dark {
|
|
@@ -40,50 +37,53 @@
|
|
|
40
37
|
--color-border: #374151;
|
|
41
38
|
}
|
|
42
39
|
|
|
43
|
-
body {
|
|
40
|
+
html, body {
|
|
44
41
|
margin: 0;
|
|
45
42
|
padding: 0;
|
|
43
|
+
height: 100%;
|
|
46
44
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
47
45
|
background-color: var(--color-bg-primary);
|
|
48
46
|
color: var(--color-text-primary);
|
|
49
|
-
transition: background-color 0.3s, color 0.3s;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/* Layout */
|
|
53
|
-
.app-container {
|
|
54
|
-
display: grid;
|
|
55
|
-
grid-template-columns: 1fr;
|
|
56
|
-
grid-template-rows: auto 1fr;
|
|
57
|
-
min-height: 100vh;
|
|
58
|
-
gap: 0;
|
|
59
47
|
}
|
|
60
48
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
flex: 1;
|
|
49
|
+
/* ===== ROOT LAYOUT: sidebar + main, full viewport ===== */
|
|
50
|
+
.app-shell {
|
|
51
|
+
display: flex;
|
|
52
|
+
height: 100dvh;
|
|
53
|
+
height: 100vh;
|
|
67
54
|
overflow: hidden;
|
|
55
|
+
padding-top: env(safe-area-inset-top);
|
|
56
|
+
padding-bottom: env(safe-area-inset-bottom);
|
|
57
|
+
padding-left: env(safe-area-inset-left);
|
|
58
|
+
padding-right: env(safe-area-inset-right);
|
|
68
59
|
}
|
|
69
60
|
|
|
70
|
-
/*
|
|
61
|
+
/* ===== SIDEBAR ===== */
|
|
71
62
|
.sidebar {
|
|
63
|
+
width: var(--sidebar-width);
|
|
64
|
+
flex-shrink: 0;
|
|
72
65
|
display: flex;
|
|
73
66
|
flex-direction: column;
|
|
74
67
|
background-color: var(--color-bg-secondary);
|
|
75
68
|
border-right: 1px solid var(--color-border);
|
|
76
69
|
overflow: hidden;
|
|
77
|
-
min-
|
|
70
|
+
transition: width 0.25s ease, min-width 0.25s ease;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.sidebar.collapsed {
|
|
74
|
+
width: 0;
|
|
75
|
+
min-width: 0;
|
|
76
|
+
border-right: none;
|
|
78
77
|
}
|
|
79
78
|
|
|
80
79
|
.sidebar-header {
|
|
81
|
-
padding: 1rem;
|
|
80
|
+
padding: 0.75rem 1rem;
|
|
82
81
|
border-bottom: 1px solid var(--color-border);
|
|
83
82
|
display: flex;
|
|
84
83
|
justify-content: space-between;
|
|
85
84
|
align-items: center;
|
|
86
85
|
flex-shrink: 0;
|
|
86
|
+
min-height: var(--header-height);
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
.sidebar-header h2 {
|
|
@@ -93,22 +93,24 @@
|
|
|
93
93
|
text-transform: uppercase;
|
|
94
94
|
letter-spacing: 0.05em;
|
|
95
95
|
color: var(--color-text-secondary);
|
|
96
|
+
white-space: nowrap;
|
|
97
|
+
overflow: hidden;
|
|
96
98
|
}
|
|
97
99
|
|
|
98
100
|
.sidebar-new-btn {
|
|
99
|
-
padding: 0.
|
|
101
|
+
padding: 0.375rem 0.625rem;
|
|
100
102
|
font-size: 0.75rem;
|
|
101
103
|
background-color: var(--color-primary);
|
|
102
104
|
color: white;
|
|
103
105
|
border: none;
|
|
104
|
-
border-radius: 0.
|
|
106
|
+
border-radius: 0.375rem;
|
|
105
107
|
cursor: pointer;
|
|
106
108
|
transition: background-color 0.2s;
|
|
109
|
+
white-space: nowrap;
|
|
110
|
+
flex-shrink: 0;
|
|
107
111
|
}
|
|
108
112
|
|
|
109
|
-
.sidebar-new-btn:hover {
|
|
110
|
-
background-color: var(--color-primary-dark);
|
|
111
|
-
}
|
|
113
|
+
.sidebar-new-btn:hover { background-color: var(--color-primary-dark); }
|
|
112
114
|
|
|
113
115
|
.sidebar-list {
|
|
114
116
|
flex: 1;
|
|
@@ -117,21 +119,20 @@
|
|
|
117
119
|
list-style: none;
|
|
118
120
|
margin: 0;
|
|
119
121
|
padding: 0.5rem 0;
|
|
122
|
+
-webkit-overflow-scrolling: touch;
|
|
120
123
|
}
|
|
121
124
|
|
|
122
125
|
.conversation-item {
|
|
123
|
-
padding: 0.75rem 0.
|
|
124
|
-
margin: 0.
|
|
126
|
+
padding: 0.75rem 0.75rem;
|
|
127
|
+
margin: 0.125rem 0.5rem;
|
|
125
128
|
border-radius: 0.375rem;
|
|
126
129
|
cursor: pointer;
|
|
127
|
-
transition: background-color 0.
|
|
130
|
+
transition: background-color 0.15s;
|
|
128
131
|
border-left: 3px solid transparent;
|
|
129
132
|
user-select: none;
|
|
130
133
|
}
|
|
131
134
|
|
|
132
|
-
.conversation-item:hover {
|
|
133
|
-
background-color: var(--color-bg-primary);
|
|
134
|
-
}
|
|
135
|
+
.conversation-item:hover { background-color: var(--color-bg-primary); }
|
|
135
136
|
|
|
136
137
|
.conversation-item.active {
|
|
137
138
|
background-color: var(--color-primary);
|
|
@@ -151,15 +152,13 @@
|
|
|
151
152
|
.conversation-item-meta {
|
|
152
153
|
font-size: 0.75rem;
|
|
153
154
|
color: var(--color-text-secondary);
|
|
154
|
-
margin-top: 0.
|
|
155
|
+
margin-top: 0.125rem;
|
|
155
156
|
white-space: nowrap;
|
|
156
157
|
overflow: hidden;
|
|
157
158
|
text-overflow: ellipsis;
|
|
158
159
|
}
|
|
159
160
|
|
|
160
|
-
.conversation-item.active .conversation-item-meta {
|
|
161
|
-
color: rgba(255, 255, 255, 0.7);
|
|
162
|
-
}
|
|
161
|
+
.conversation-item.active .conversation-item-meta { color: rgba(255,255,255,0.7); }
|
|
163
162
|
|
|
164
163
|
.sidebar-empty {
|
|
165
164
|
padding: 2rem 1rem;
|
|
@@ -168,37 +167,68 @@
|
|
|
168
167
|
font-size: 0.875rem;
|
|
169
168
|
}
|
|
170
169
|
|
|
171
|
-
/*
|
|
172
|
-
.main-
|
|
170
|
+
/* ===== MAIN PANEL: header + messages + input ===== */
|
|
171
|
+
.main-panel {
|
|
172
|
+
flex: 1;
|
|
173
173
|
display: flex;
|
|
174
174
|
flex-direction: column;
|
|
175
175
|
overflow: hidden;
|
|
176
|
-
|
|
177
|
-
|
|
176
|
+
min-width: 0;
|
|
177
|
+
background-color: var(--color-bg-primary);
|
|
178
178
|
}
|
|
179
179
|
|
|
180
|
-
|
|
180
|
+
/* --- Header bar --- */
|
|
181
|
+
.main-header {
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
gap: 0.75rem;
|
|
185
|
+
padding: 0 1rem;
|
|
186
|
+
height: var(--header-height);
|
|
187
|
+
min-height: var(--header-height);
|
|
188
|
+
flex-shrink: 0;
|
|
181
189
|
background-color: var(--color-bg-secondary);
|
|
182
190
|
border-bottom: 1px solid var(--color-border);
|
|
183
|
-
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.sidebar-toggle-btn {
|
|
184
194
|
display: flex;
|
|
185
|
-
justify-content: space-between;
|
|
186
195
|
align-items: center;
|
|
187
|
-
|
|
196
|
+
justify-content: center;
|
|
197
|
+
width: 36px;
|
|
198
|
+
height: 36px;
|
|
199
|
+
background: none;
|
|
200
|
+
border: 1px solid var(--color-border);
|
|
201
|
+
border-radius: 0.375rem;
|
|
202
|
+
cursor: pointer;
|
|
203
|
+
color: var(--color-text-secondary);
|
|
188
204
|
flex-shrink: 0;
|
|
189
|
-
|
|
205
|
+
transition: background-color 0.15s, color 0.15s;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.sidebar-toggle-btn:hover {
|
|
209
|
+
background-color: var(--color-bg-primary);
|
|
210
|
+
color: var(--color-text-primary);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.sidebar-toggle-btn svg {
|
|
214
|
+
width: 18px;
|
|
215
|
+
height: 18px;
|
|
190
216
|
}
|
|
191
217
|
|
|
192
218
|
.header-title {
|
|
193
|
-
font-size: 1.
|
|
194
|
-
font-weight:
|
|
219
|
+
font-size: 1.125rem;
|
|
220
|
+
font-weight: 600;
|
|
195
221
|
margin: 0;
|
|
196
222
|
flex: 1;
|
|
223
|
+
min-width: 0;
|
|
224
|
+
overflow: hidden;
|
|
225
|
+
text-overflow: ellipsis;
|
|
226
|
+
white-space: nowrap;
|
|
197
227
|
}
|
|
198
228
|
|
|
199
229
|
.header-controls {
|
|
200
230
|
display: flex;
|
|
201
|
-
gap:
|
|
231
|
+
gap: 0.5rem;
|
|
202
232
|
align-items: center;
|
|
203
233
|
flex-shrink: 0;
|
|
204
234
|
}
|
|
@@ -206,219 +236,164 @@
|
|
|
206
236
|
.status-badge {
|
|
207
237
|
display: inline-flex;
|
|
208
238
|
align-items: center;
|
|
209
|
-
gap: 0.
|
|
210
|
-
padding: 0.
|
|
211
|
-
border-radius:
|
|
212
|
-
font-size: 0.
|
|
239
|
+
gap: 0.375rem;
|
|
240
|
+
padding: 0.25rem 0.625rem;
|
|
241
|
+
border-radius: 1rem;
|
|
242
|
+
font-size: 0.75rem;
|
|
213
243
|
font-weight: 500;
|
|
214
244
|
background-color: var(--color-bg-primary);
|
|
215
245
|
border: 1px solid var(--color-border);
|
|
216
246
|
}
|
|
217
247
|
|
|
218
248
|
.status-indicator {
|
|
219
|
-
width: 0.
|
|
220
|
-
height: 0.
|
|
249
|
+
width: 0.5rem;
|
|
250
|
+
height: 0.5rem;
|
|
221
251
|
border-radius: 50%;
|
|
222
252
|
background-color: var(--color-error);
|
|
223
253
|
animation: pulse 2s infinite;
|
|
224
254
|
}
|
|
225
255
|
|
|
226
|
-
.status-indicator[data-status="connected"] {
|
|
227
|
-
background-color: var(--color-success);
|
|
228
|
-
}
|
|
229
|
-
|
|
256
|
+
.status-indicator[data-status="connected"] { background-color: var(--color-success); }
|
|
230
257
|
.status-indicator[data-status="reconnecting"],
|
|
231
|
-
.status-indicator[data-status="connecting"] {
|
|
232
|
-
background-color: var(--color-warning);
|
|
233
|
-
animation: pulse 1s infinite;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
@keyframes pulse {
|
|
237
|
-
0%, 100% {
|
|
238
|
-
opacity: 1;
|
|
239
|
-
}
|
|
240
|
-
50% {
|
|
241
|
-
opacity: 0.5;
|
|
242
|
-
}
|
|
243
|
-
}
|
|
258
|
+
.status-indicator[data-status="connecting"] { background-color: var(--color-warning); animation: pulse 1s infinite; }
|
|
244
259
|
|
|
245
|
-
|
|
246
|
-
#output-scroll {
|
|
247
|
-
flex: 1;
|
|
248
|
-
overflow-y: auto;
|
|
249
|
-
overflow-x: hidden;
|
|
250
|
-
display: flex;
|
|
251
|
-
flex-direction: column;
|
|
252
|
-
min-height: 0;
|
|
253
|
-
padding: 1rem;
|
|
254
|
-
}
|
|
260
|
+
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
|
|
255
261
|
|
|
256
|
-
|
|
262
|
+
.theme-toggle-btn {
|
|
257
263
|
display: flex;
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
.execution-panel {
|
|
264
|
-
background-color: var(--color-bg-secondary);
|
|
265
|
-
border-top: 1px solid var(--color-border);
|
|
266
|
-
padding: 1.5rem;
|
|
267
|
-
display: grid;
|
|
268
|
-
grid-template-columns: 1fr auto;
|
|
269
|
-
gap: 1rem;
|
|
270
|
-
align-items: end;
|
|
271
|
-
flex-shrink: 0;
|
|
272
|
-
min-height: auto;
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
.execution-input-group {
|
|
276
|
-
display: grid;
|
|
277
|
-
grid-template-columns: 1fr auto;
|
|
278
|
-
gap: 0.5rem;
|
|
279
|
-
align-items: end;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
.execution-input-group > * {
|
|
283
|
-
min-width: 0;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
.execution-textarea {
|
|
287
|
-
width: 100%;
|
|
288
|
-
padding: 0.75rem;
|
|
264
|
+
align-items: center;
|
|
265
|
+
justify-content: center;
|
|
266
|
+
width: 36px;
|
|
267
|
+
height: 36px;
|
|
268
|
+
background: none;
|
|
289
269
|
border: 1px solid var(--color-border);
|
|
290
270
|
border-radius: 0.375rem;
|
|
291
|
-
background-color: var(--color-bg-primary);
|
|
292
|
-
color: var(--color-text-primary);
|
|
293
|
-
font-family: inherit;
|
|
294
|
-
resize: none;
|
|
295
|
-
min-height: 3rem;
|
|
296
|
-
max-height: 8rem;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
.btn {
|
|
300
|
-
padding: 0.75rem 1.5rem;
|
|
301
|
-
border: none;
|
|
302
|
-
border-radius: 0.375rem;
|
|
303
|
-
font-weight: 500;
|
|
304
271
|
cursor: pointer;
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
flex-shrink: 0;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
.btn-primary {
|
|
311
|
-
background-color: var(--color-primary);
|
|
312
|
-
color: white;
|
|
272
|
+
color: var(--color-text-secondary);
|
|
273
|
+
transition: background-color 0.15s;
|
|
313
274
|
}
|
|
314
275
|
|
|
315
|
-
.btn
|
|
316
|
-
background-color: var(--color-primary
|
|
276
|
+
.theme-toggle-btn:hover {
|
|
277
|
+
background-color: var(--color-bg-primary);
|
|
278
|
+
color: var(--color-text-primary);
|
|
317
279
|
}
|
|
318
280
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
281
|
+
/* --- View toggle bar --- */
|
|
282
|
+
.view-toggle-bar {
|
|
283
|
+
display: flex;
|
|
284
|
+
gap: 0;
|
|
285
|
+
border-bottom: 1px solid var(--color-border);
|
|
286
|
+
background: var(--color-bg-secondary);
|
|
287
|
+
flex-shrink: 0;
|
|
288
|
+
padding: 0 1rem;
|
|
322
289
|
}
|
|
323
290
|
|
|
324
|
-
.
|
|
325
|
-
padding: 0.5rem;
|
|
326
|
-
border:
|
|
327
|
-
|
|
328
|
-
background-color: var(--color-bg-primary);
|
|
329
|
-
color: var(--color-text-primary);
|
|
330
|
-
font-size: 0.875rem;
|
|
291
|
+
.view-toggle-btn {
|
|
292
|
+
padding: 0.5rem 1rem;
|
|
293
|
+
border: none;
|
|
294
|
+
background: none;
|
|
331
295
|
cursor: pointer;
|
|
296
|
+
font-size: 0.875rem;
|
|
297
|
+
font-weight: 500;
|
|
298
|
+
color: var(--color-text-secondary);
|
|
299
|
+
border-bottom: 2px solid transparent;
|
|
300
|
+
transition: all 0.2s;
|
|
301
|
+
min-height: 40px;
|
|
332
302
|
}
|
|
333
303
|
|
|
334
|
-
|
|
335
|
-
.
|
|
336
|
-
background-color: var(--color-bg-primary);
|
|
337
|
-
border: 1px solid var(--color-border);
|
|
338
|
-
border-radius: 0.375rem;
|
|
339
|
-
padding: 1rem;
|
|
340
|
-
margin-bottom: 0.5rem;
|
|
341
|
-
}
|
|
304
|
+
.view-toggle-btn:hover { color: var(--color-text-primary); }
|
|
305
|
+
.view-toggle-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
|
|
342
306
|
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
307
|
+
/* --- Messages scroll area --- */
|
|
308
|
+
#output-scroll {
|
|
309
|
+
flex: 1;
|
|
310
|
+
overflow-y: auto;
|
|
311
|
+
overflow-x: hidden;
|
|
312
|
+
min-height: 0;
|
|
313
|
+
-webkit-overflow-scrolling: touch;
|
|
314
|
+
position: relative;
|
|
346
315
|
}
|
|
347
316
|
|
|
348
|
-
.
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
317
|
+
.messages-wrapper {
|
|
318
|
+
max-width: var(--msg-max-width);
|
|
319
|
+
margin: 0 auto;
|
|
320
|
+
width: 100%;
|
|
321
|
+
padding: 1.5rem 1rem;
|
|
322
|
+
display: flex;
|
|
323
|
+
flex-direction: column;
|
|
324
|
+
min-height: 100%;
|
|
356
325
|
}
|
|
357
326
|
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
327
|
+
#output {
|
|
328
|
+
display: flex;
|
|
329
|
+
flex-direction: column;
|
|
330
|
+
gap: 0.5rem;
|
|
331
|
+
flex: 1;
|
|
361
332
|
}
|
|
362
333
|
|
|
363
|
-
/* Conversation display */
|
|
334
|
+
/* --- Conversation display --- */
|
|
364
335
|
.conversation-header {
|
|
365
|
-
padding:
|
|
336
|
+
padding: 0.75rem 0;
|
|
366
337
|
border-bottom: 1px solid var(--color-border);
|
|
367
338
|
margin-bottom: 1rem;
|
|
368
339
|
}
|
|
369
340
|
|
|
370
|
-
.conversation-header h2 {
|
|
371
|
-
|
|
372
|
-
font-size: 1.5rem;
|
|
373
|
-
}
|
|
374
|
-
|
|
375
|
-
.conversation-header p {
|
|
376
|
-
margin: 0;
|
|
377
|
-
font-size: 0.875rem;
|
|
378
|
-
color: var(--color-text-secondary);
|
|
379
|
-
}
|
|
341
|
+
.conversation-header h2 { margin: 0 0 0.25rem 0; font-size: 1.25rem; }
|
|
342
|
+
.conversation-header p { margin: 0; font-size: 0.8rem; color: var(--color-text-secondary); }
|
|
380
343
|
|
|
381
|
-
.conversation-messages {
|
|
382
|
-
padding: 1rem;
|
|
383
|
-
}
|
|
344
|
+
.conversation-messages { padding: 0; }
|
|
384
345
|
|
|
346
|
+
/* --- Messages --- */
|
|
385
347
|
.message {
|
|
386
|
-
margin-bottom:
|
|
387
|
-
padding: 1rem;
|
|
388
|
-
border-radius: 0.
|
|
389
|
-
|
|
390
|
-
|
|
348
|
+
margin-bottom: 1.25rem;
|
|
349
|
+
padding: 0.875rem 1rem;
|
|
350
|
+
border-radius: 0.75rem;
|
|
351
|
+
max-width: 85%;
|
|
352
|
+
word-break: break-word;
|
|
391
353
|
}
|
|
392
354
|
|
|
393
355
|
.message-user {
|
|
394
|
-
|
|
356
|
+
background-color: var(--color-primary);
|
|
357
|
+
color: white;
|
|
358
|
+
margin-left: auto;
|
|
359
|
+
border-bottom-right-radius: 0.25rem;
|
|
395
360
|
}
|
|
396
361
|
|
|
397
362
|
.message-assistant {
|
|
398
|
-
|
|
363
|
+
background-color: var(--color-bg-secondary);
|
|
364
|
+
border: 1px solid var(--color-border);
|
|
365
|
+
margin-right: auto;
|
|
366
|
+
border-bottom-left-radius: 0.25rem;
|
|
399
367
|
}
|
|
400
368
|
|
|
401
369
|
.message-role {
|
|
402
370
|
font-weight: 600;
|
|
403
|
-
font-size: 0.
|
|
371
|
+
font-size: 0.7rem;
|
|
404
372
|
text-transform: uppercase;
|
|
405
|
-
|
|
406
|
-
margin-bottom: 0.
|
|
373
|
+
letter-spacing: 0.04em;
|
|
374
|
+
margin-bottom: 0.375rem;
|
|
375
|
+
opacity: 0.7;
|
|
407
376
|
}
|
|
408
377
|
|
|
378
|
+
.message-user .message-role { color: rgba(255,255,255,0.8); }
|
|
379
|
+
.message-assistant .message-role { color: var(--color-text-secondary); }
|
|
380
|
+
|
|
409
381
|
.message-content {
|
|
410
382
|
font-size: 0.9rem;
|
|
411
|
-
line-height: 1.
|
|
383
|
+
line-height: 1.6;
|
|
412
384
|
white-space: pre-wrap;
|
|
413
385
|
word-break: break-word;
|
|
414
386
|
}
|
|
415
387
|
|
|
416
388
|
.message-timestamp {
|
|
417
|
-
font-size: 0.
|
|
418
|
-
color: var(--color-text-secondary);
|
|
389
|
+
font-size: 0.7rem;
|
|
419
390
|
margin-top: 0.5rem;
|
|
391
|
+
opacity: 0.6;
|
|
420
392
|
}
|
|
421
393
|
|
|
394
|
+
.message-user .message-timestamp { color: rgba(255,255,255,0.7); }
|
|
395
|
+
.message-assistant .message-timestamp { color: var(--color-text-secondary); }
|
|
396
|
+
|
|
422
397
|
.message-blocks {
|
|
423
398
|
display: flex;
|
|
424
399
|
flex-direction: column;
|
|
@@ -456,296 +431,93 @@
|
|
|
456
431
|
margin: 0.25rem 0;
|
|
457
432
|
}
|
|
458
433
|
|
|
459
|
-
|
|
460
|
-
|
|
434
|
+
/* --- Input area: fixed at bottom --- */
|
|
435
|
+
.input-section {
|
|
436
|
+
flex-shrink: 0;
|
|
437
|
+
border-top: 1px solid var(--color-border);
|
|
438
|
+
background-color: var(--color-bg-primary);
|
|
439
|
+
padding: 0.75rem 1rem;
|
|
461
440
|
}
|
|
462
441
|
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
.folder-modal-overlay {
|
|
467
|
-
display: none;
|
|
468
|
-
position: fixed;
|
|
469
|
-
top: 0;
|
|
470
|
-
left: 0;
|
|
442
|
+
.input-wrapper {
|
|
443
|
+
max-width: var(--msg-max-width);
|
|
444
|
+
margin: 0 auto;
|
|
471
445
|
width: 100%;
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
align-items: center;
|
|
476
|
-
justify-content: center;
|
|
446
|
+
display: flex;
|
|
447
|
+
gap: 0.5rem;
|
|
448
|
+
align-items: flex-end;
|
|
477
449
|
}
|
|
478
450
|
|
|
479
|
-
.
|
|
480
|
-
|
|
451
|
+
.agent-selector {
|
|
452
|
+
padding: 0.5rem;
|
|
453
|
+
border: 1px solid var(--color-border);
|
|
454
|
+
border-radius: 0.375rem;
|
|
455
|
+
background-color: var(--color-bg-secondary);
|
|
456
|
+
color: var(--color-text-primary);
|
|
457
|
+
font-size: 0.8rem;
|
|
458
|
+
cursor: pointer;
|
|
459
|
+
flex-shrink: 0;
|
|
481
460
|
}
|
|
482
461
|
|
|
483
|
-
.
|
|
484
|
-
|
|
462
|
+
.message-textarea {
|
|
463
|
+
flex: 1;
|
|
464
|
+
padding: 0.625rem 0.875rem;
|
|
485
465
|
border: 1px solid var(--color-border);
|
|
486
|
-
border-radius: 0.
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
466
|
+
border-radius: 0.75rem;
|
|
467
|
+
background-color: var(--color-bg-secondary);
|
|
468
|
+
color: var(--color-text-primary);
|
|
469
|
+
font-family: inherit;
|
|
470
|
+
font-size: 0.9375rem;
|
|
471
|
+
resize: none;
|
|
472
|
+
min-height: 44px;
|
|
473
|
+
max-height: 150px;
|
|
474
|
+
line-height: 1.5;
|
|
475
|
+
transition: border-color 0.15s;
|
|
493
476
|
}
|
|
494
477
|
|
|
495
|
-
.
|
|
496
|
-
|
|
497
|
-
border-
|
|
478
|
+
.message-textarea:focus {
|
|
479
|
+
outline: none;
|
|
480
|
+
border-color: var(--color-primary);
|
|
481
|
+
box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.send-btn {
|
|
498
485
|
display: flex;
|
|
499
|
-
justify-content: space-between;
|
|
500
486
|
align-items: center;
|
|
487
|
+
justify-content: center;
|
|
488
|
+
width: 40px;
|
|
489
|
+
height: 40px;
|
|
490
|
+
background-color: var(--color-primary);
|
|
491
|
+
color: white;
|
|
492
|
+
border: none;
|
|
493
|
+
border-radius: 0.5rem;
|
|
494
|
+
cursor: pointer;
|
|
501
495
|
flex-shrink: 0;
|
|
496
|
+
transition: background-color 0.15s;
|
|
502
497
|
}
|
|
503
498
|
|
|
504
|
-
.
|
|
505
|
-
|
|
506
|
-
font-size: 1rem;
|
|
507
|
-
font-weight: 600;
|
|
508
|
-
}
|
|
499
|
+
.send-btn:hover:not(:disabled) { background-color: var(--color-primary-dark); }
|
|
500
|
+
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
509
501
|
|
|
510
|
-
.
|
|
511
|
-
background: none;
|
|
512
|
-
border: none;
|
|
513
|
-
font-size: 1.25rem;
|
|
514
|
-
cursor: pointer;
|
|
515
|
-
color: var(--color-text-secondary);
|
|
516
|
-
padding: 0.25rem;
|
|
517
|
-
line-height: 1;
|
|
518
|
-
}
|
|
519
|
-
|
|
520
|
-
.folder-modal-close:hover {
|
|
521
|
-
color: var(--color-text-primary);
|
|
522
|
-
}
|
|
523
|
-
|
|
524
|
-
.folder-breadcrumb {
|
|
525
|
-
padding: 0.75rem 1rem;
|
|
526
|
-
border-bottom: 1px solid var(--color-border);
|
|
527
|
-
font-size: 0.8rem;
|
|
528
|
-
font-family: 'Monaco', 'Menlo', monospace;
|
|
529
|
-
color: var(--color-text-secondary);
|
|
530
|
-
background: var(--color-bg-secondary);
|
|
531
|
-
display: flex;
|
|
532
|
-
align-items: center;
|
|
533
|
-
gap: 0.25rem;
|
|
534
|
-
flex-shrink: 0;
|
|
535
|
-
overflow-x: auto;
|
|
536
|
-
white-space: nowrap;
|
|
537
|
-
}
|
|
538
|
-
|
|
539
|
-
.folder-breadcrumb-segment {
|
|
540
|
-
cursor: pointer;
|
|
541
|
-
color: var(--color-primary);
|
|
542
|
-
padding: 0.125rem 0.25rem;
|
|
543
|
-
border-radius: 0.25rem;
|
|
544
|
-
}
|
|
545
|
-
|
|
546
|
-
.folder-breadcrumb-segment:hover {
|
|
547
|
-
background: var(--color-bg-primary);
|
|
548
|
-
text-decoration: underline;
|
|
549
|
-
}
|
|
550
|
-
|
|
551
|
-
.folder-breadcrumb-separator {
|
|
552
|
-
color: var(--color-text-secondary);
|
|
553
|
-
}
|
|
554
|
-
|
|
555
|
-
.folder-list {
|
|
556
|
-
flex: 1;
|
|
557
|
-
overflow-y: auto;
|
|
558
|
-
min-height: 200px;
|
|
559
|
-
max-height: 400px;
|
|
560
|
-
list-style: none;
|
|
561
|
-
margin: 0;
|
|
562
|
-
padding: 0;
|
|
563
|
-
}
|
|
564
|
-
|
|
565
|
-
.folder-list-item {
|
|
566
|
-
padding: 0.5rem 1rem;
|
|
567
|
-
cursor: pointer;
|
|
568
|
-
display: flex;
|
|
569
|
-
align-items: center;
|
|
570
|
-
gap: 0.5rem;
|
|
571
|
-
font-size: 0.875rem;
|
|
572
|
-
border-bottom: 1px solid var(--color-border);
|
|
573
|
-
transition: background-color 0.15s;
|
|
574
|
-
}
|
|
575
|
-
|
|
576
|
-
.folder-list-item:hover {
|
|
577
|
-
background: var(--color-bg-secondary);
|
|
578
|
-
}
|
|
579
|
-
|
|
580
|
-
.folder-list-item-icon {
|
|
581
|
-
font-size: 1rem;
|
|
582
|
-
flex-shrink: 0;
|
|
583
|
-
width: 1.25rem;
|
|
584
|
-
text-align: center;
|
|
585
|
-
}
|
|
586
|
-
|
|
587
|
-
.folder-list-item-name {
|
|
588
|
-
flex: 1;
|
|
589
|
-
overflow: hidden;
|
|
590
|
-
text-overflow: ellipsis;
|
|
591
|
-
white-space: nowrap;
|
|
592
|
-
}
|
|
593
|
-
|
|
594
|
-
.folder-list-empty {
|
|
595
|
-
padding: 2rem 1rem;
|
|
596
|
-
text-align: center;
|
|
597
|
-
color: var(--color-text-secondary);
|
|
598
|
-
font-size: 0.875rem;
|
|
599
|
-
}
|
|
600
|
-
|
|
601
|
-
.folder-list-loading {
|
|
602
|
-
padding: 2rem 1rem;
|
|
603
|
-
text-align: center;
|
|
604
|
-
color: var(--color-text-secondary);
|
|
605
|
-
font-size: 0.875rem;
|
|
606
|
-
}
|
|
607
|
-
|
|
608
|
-
.folder-list-error {
|
|
609
|
-
padding: 1rem;
|
|
610
|
-
text-align: center;
|
|
611
|
-
color: var(--color-error);
|
|
612
|
-
font-size: 0.875rem;
|
|
613
|
-
}
|
|
614
|
-
|
|
615
|
-
.folder-modal-footer {
|
|
616
|
-
padding: 0.75rem 1rem;
|
|
617
|
-
border-top: 1px solid var(--color-border);
|
|
618
|
-
display: flex;
|
|
619
|
-
justify-content: flex-end;
|
|
620
|
-
gap: 0.5rem;
|
|
621
|
-
flex-shrink: 0;
|
|
622
|
-
}
|
|
623
|
-
|
|
624
|
-
.folder-modal-footer .btn {
|
|
625
|
-
padding: 0.5rem 1rem;
|
|
626
|
-
font-size: 0.8rem;
|
|
627
|
-
}
|
|
628
|
-
|
|
629
|
-
.btn-secondary {
|
|
630
|
-
background: var(--color-bg-secondary);
|
|
631
|
-
color: var(--color-text-primary);
|
|
632
|
-
border: 1px solid var(--color-border);
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
.btn-secondary:hover {
|
|
636
|
-
background: var(--color-border);
|
|
637
|
-
}
|
|
638
|
-
|
|
639
|
-
/* Utilities */
|
|
640
|
-
.flex {
|
|
641
|
-
display: flex;
|
|
642
|
-
}
|
|
643
|
-
|
|
644
|
-
.items-center {
|
|
645
|
-
align-items: center;
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
.justify-between {
|
|
649
|
-
justify-content: space-between;
|
|
650
|
-
}
|
|
651
|
-
|
|
652
|
-
.gap-2 {
|
|
653
|
-
gap: 0.5rem;
|
|
654
|
-
}
|
|
655
|
-
|
|
656
|
-
.gap-3 {
|
|
657
|
-
gap: 0.75rem;
|
|
658
|
-
}
|
|
659
|
-
|
|
660
|
-
.text-xs {
|
|
661
|
-
font-size: 0.75rem;
|
|
662
|
-
}
|
|
663
|
-
|
|
664
|
-
.text-sm {
|
|
665
|
-
font-size: 0.875rem;
|
|
666
|
-
}
|
|
667
|
-
|
|
668
|
-
.text-secondary {
|
|
669
|
-
color: var(--color-text-secondary);
|
|
670
|
-
}
|
|
502
|
+
.send-btn svg { width: 18px; height: 18px; }
|
|
671
503
|
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
white-space: nowrap;
|
|
680
|
-
}
|
|
681
|
-
|
|
682
|
-
.mb-2 {
|
|
683
|
-
margin-bottom: 0.5rem;
|
|
684
|
-
}
|
|
685
|
-
|
|
686
|
-
.mb-3 {
|
|
687
|
-
margin-bottom: 0.75rem;
|
|
688
|
-
}
|
|
689
|
-
|
|
690
|
-
.mt-2 {
|
|
691
|
-
margin-top: 0.5rem;
|
|
692
|
-
}
|
|
693
|
-
|
|
694
|
-
.mt-3 {
|
|
695
|
-
margin-top: 0.75rem;
|
|
696
|
-
}
|
|
697
|
-
|
|
698
|
-
.p-2 {
|
|
699
|
-
padding: 0.5rem;
|
|
700
|
-
}
|
|
701
|
-
|
|
702
|
-
.p-3 {
|
|
703
|
-
padding: 0.75rem;
|
|
704
|
-
}
|
|
705
|
-
|
|
706
|
-
.p-4 {
|
|
707
|
-
padding: 1rem;
|
|
708
|
-
}
|
|
709
|
-
|
|
710
|
-
.rounded {
|
|
711
|
-
border-radius: 0.375rem;
|
|
712
|
-
}
|
|
713
|
-
|
|
714
|
-
.bg-gray-50 {
|
|
715
|
-
background-color: #f9fafb;
|
|
716
|
-
}
|
|
717
|
-
|
|
718
|
-
.bg-gray-900 {
|
|
719
|
-
background-color: #111827;
|
|
720
|
-
}
|
|
721
|
-
|
|
722
|
-
.dark .bg-gray-50 {
|
|
723
|
-
background-color: #1f2937;
|
|
724
|
-
}
|
|
725
|
-
|
|
726
|
-
.dark .bg-gray-900 {
|
|
727
|
-
background-color: #111827;
|
|
504
|
+
/* ===== OVERLAY for mobile sidebar ===== */
|
|
505
|
+
.sidebar-overlay {
|
|
506
|
+
display: none;
|
|
507
|
+
position: fixed;
|
|
508
|
+
top: 0; left: 0; width: 100%; height: 100%;
|
|
509
|
+
background: rgba(0,0,0,0.4);
|
|
510
|
+
z-index: 999;
|
|
728
511
|
}
|
|
729
512
|
|
|
730
|
-
.
|
|
731
|
-
color: #4ade80;
|
|
732
|
-
}
|
|
513
|
+
.sidebar-overlay.visible { display: block; }
|
|
733
514
|
|
|
734
|
-
/*
|
|
735
|
-
.
|
|
736
|
-
|
|
737
|
-
}
|
|
515
|
+
/* ===== UTILITIES ===== */
|
|
516
|
+
.text-secondary { color: var(--color-text-secondary); }
|
|
517
|
+
.animate-spin { animation: spin 1s linear infinite; }
|
|
518
|
+
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
738
519
|
|
|
739
|
-
|
|
740
|
-
from {
|
|
741
|
-
transform: rotate(0deg);
|
|
742
|
-
}
|
|
743
|
-
to {
|
|
744
|
-
transform: rotate(360deg);
|
|
745
|
-
}
|
|
746
|
-
}
|
|
747
|
-
|
|
748
|
-
/* HTML rendered content blocks */
|
|
520
|
+
/* ===== HTML rendered content ===== */
|
|
749
521
|
.html-rendered-label {
|
|
750
522
|
padding: 0.5rem;
|
|
751
523
|
background: #eff6ff;
|
|
@@ -759,11 +531,7 @@
|
|
|
759
531
|
margin-bottom: 0.5rem;
|
|
760
532
|
}
|
|
761
533
|
|
|
762
|
-
html.dark .html-rendered-label {
|
|
763
|
-
background: #1e3a5f;
|
|
764
|
-
border-color: #2563eb;
|
|
765
|
-
color: #93c5fd;
|
|
766
|
-
}
|
|
534
|
+
html.dark .html-rendered-label { background: #1e3a5f; border-color: #2563eb; color: #93c5fd; }
|
|
767
535
|
|
|
768
536
|
.html-content {
|
|
769
537
|
background: #ffffff;
|
|
@@ -773,511 +541,221 @@
|
|
|
773
541
|
overflow-x: auto;
|
|
774
542
|
}
|
|
775
543
|
|
|
776
|
-
html.dark .html-content {
|
|
777
|
-
|
|
778
|
-
}
|
|
779
|
-
|
|
780
|
-
.html-content
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
}
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
.
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
}
|
|
798
|
-
|
|
799
|
-
.
|
|
800
|
-
.
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
}
|
|
804
|
-
|
|
805
|
-
.
|
|
806
|
-
|
|
807
|
-
}
|
|
808
|
-
|
|
809
|
-
.
|
|
810
|
-
.
|
|
811
|
-
.
|
|
812
|
-
.
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
.
|
|
817
|
-
|
|
818
|
-
}
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
}
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
border-radius: 0.25rem;
|
|
841
|
-
transition: background-color 0.2s;
|
|
842
|
-
}
|
|
843
|
-
|
|
844
|
-
summary:hover {
|
|
845
|
-
background-color: var(--color-bg-secondary);
|
|
846
|
-
}
|
|
847
|
-
|
|
848
|
-
/* Grid helpers */
|
|
849
|
-
.grid {
|
|
850
|
-
display: grid;
|
|
851
|
-
}
|
|
852
|
-
|
|
853
|
-
.grid-cols-2 {
|
|
854
|
-
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
855
|
-
}
|
|
856
|
-
|
|
857
|
-
.gap-1 {
|
|
858
|
-
gap: 0.25rem;
|
|
859
|
-
}
|
|
860
|
-
|
|
861
|
-
.min-w-0 {
|
|
862
|
-
min-width: 0;
|
|
863
|
-
}
|
|
864
|
-
|
|
865
|
-
.flex-1 {
|
|
866
|
-
flex: 1;
|
|
867
|
-
}
|
|
868
|
-
|
|
869
|
-
.flex-shrink-0 {
|
|
870
|
-
flex-shrink: 0;
|
|
871
|
-
}
|
|
872
|
-
|
|
873
|
-
/* Hamburger menu button */
|
|
874
|
-
.hamburger-btn {
|
|
875
|
-
display: none;
|
|
876
|
-
flex-direction: column;
|
|
877
|
-
justify-content: center;
|
|
878
|
-
align-items: center;
|
|
879
|
-
gap: 4px;
|
|
880
|
-
width: 44px;
|
|
881
|
-
height: 44px;
|
|
882
|
-
background: none;
|
|
883
|
-
border: none;
|
|
884
|
-
cursor: pointer;
|
|
885
|
-
padding: 8px;
|
|
886
|
-
border-radius: 0.375rem;
|
|
887
|
-
flex-shrink: 0;
|
|
888
|
-
-webkit-tap-highlight-color: transparent;
|
|
889
|
-
}
|
|
890
|
-
|
|
891
|
-
.hamburger-btn:hover {
|
|
892
|
-
background-color: var(--color-border);
|
|
893
|
-
}
|
|
894
|
-
|
|
895
|
-
.hamburger-btn span {
|
|
896
|
-
display: block;
|
|
897
|
-
width: 20px;
|
|
898
|
-
height: 2px;
|
|
899
|
-
background-color: var(--color-text-primary);
|
|
900
|
-
border-radius: 1px;
|
|
901
|
-
transition: transform 0.2s, opacity 0.2s;
|
|
902
|
-
}
|
|
903
|
-
|
|
904
|
-
/* Sidebar overlay for mobile */
|
|
905
|
-
.sidebar-overlay {
|
|
906
|
-
display: none;
|
|
907
|
-
position: fixed;
|
|
908
|
-
top: 0;
|
|
909
|
-
left: 0;
|
|
910
|
-
width: 100%;
|
|
911
|
-
height: 100%;
|
|
912
|
-
background: rgba(0, 0, 0, 0.5);
|
|
913
|
-
z-index: 999;
|
|
914
|
-
-webkit-tap-highlight-color: transparent;
|
|
915
|
-
}
|
|
916
|
-
|
|
917
|
-
.sidebar-overlay.visible {
|
|
918
|
-
display: block;
|
|
919
|
-
}
|
|
920
|
-
|
|
921
|
-
/* View toggle bar */
|
|
922
|
-
.view-toggle-bar {
|
|
923
|
-
display: flex;
|
|
924
|
-
gap: 0;
|
|
925
|
-
border-bottom: 1px solid var(--color-border);
|
|
926
|
-
background: var(--color-bg-secondary);
|
|
927
|
-
flex-shrink: 0;
|
|
928
|
-
padding: 0 1rem;
|
|
929
|
-
}
|
|
930
|
-
|
|
931
|
-
.view-toggle-btn {
|
|
932
|
-
padding: 0.625rem 1rem;
|
|
933
|
-
border: none;
|
|
934
|
-
background: none;
|
|
935
|
-
cursor: pointer;
|
|
936
|
-
font-size: 0.875rem;
|
|
937
|
-
font-weight: 500;
|
|
938
|
-
color: var(--color-text-secondary);
|
|
939
|
-
border-bottom: 2px solid transparent;
|
|
940
|
-
transition: all 0.2s;
|
|
941
|
-
min-height: 44px;
|
|
942
|
-
-webkit-tap-highlight-color: transparent;
|
|
943
|
-
}
|
|
944
|
-
|
|
945
|
-
.view-toggle-btn:hover {
|
|
946
|
-
color: var(--color-text-primary);
|
|
947
|
-
}
|
|
948
|
-
|
|
949
|
-
.view-toggle-btn.active {
|
|
950
|
-
color: var(--color-primary);
|
|
951
|
-
border-bottom-color: var(--color-primary);
|
|
952
|
-
}
|
|
953
|
-
|
|
954
|
-
/* Drop zone overlay */
|
|
955
|
-
.drop-zone-overlay {
|
|
956
|
-
display: none;
|
|
957
|
-
position: absolute;
|
|
958
|
-
top: 0;
|
|
959
|
-
left: 0;
|
|
960
|
-
right: 0;
|
|
961
|
-
bottom: 0;
|
|
962
|
-
background: rgba(59, 130, 246, 0.1);
|
|
963
|
-
border: 3px dashed var(--color-primary);
|
|
964
|
-
border-radius: 0.5rem;
|
|
965
|
-
z-index: 100;
|
|
966
|
-
align-items: center;
|
|
967
|
-
justify-content: center;
|
|
968
|
-
}
|
|
969
|
-
|
|
970
|
-
.drop-zone-overlay.visible {
|
|
971
|
-
display: flex;
|
|
972
|
-
}
|
|
973
|
-
|
|
974
|
-
#output-scroll {
|
|
975
|
-
position: relative;
|
|
976
|
-
}
|
|
977
|
-
|
|
978
|
-
.drop-zone-content {
|
|
979
|
-
text-align: center;
|
|
980
|
-
color: var(--color-primary);
|
|
981
|
-
pointer-events: none;
|
|
982
|
-
}
|
|
983
|
-
|
|
984
|
-
.drop-zone-icon {
|
|
985
|
-
font-size: 3rem;
|
|
986
|
-
font-weight: 300;
|
|
987
|
-
line-height: 1;
|
|
988
|
-
margin-bottom: 0.5rem;
|
|
989
|
-
}
|
|
990
|
-
|
|
991
|
-
.drop-zone-text {
|
|
992
|
-
font-size: 1rem;
|
|
993
|
-
font-weight: 500;
|
|
994
|
-
}
|
|
995
|
-
|
|
996
|
-
/* Upload toast notification */
|
|
997
|
-
.upload-toast {
|
|
998
|
-
position: fixed;
|
|
999
|
-
bottom: 100px;
|
|
1000
|
-
left: 50%;
|
|
1001
|
-
transform: translateX(-50%);
|
|
1002
|
-
padding: 0.75rem 1.5rem;
|
|
1003
|
-
border-radius: 0.5rem;
|
|
1004
|
-
font-size: 0.875rem;
|
|
1005
|
-
font-weight: 500;
|
|
1006
|
-
z-index: 2000;
|
|
1007
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
1008
|
-
transition: opacity 0.3s;
|
|
1009
|
-
}
|
|
1010
|
-
|
|
1011
|
-
.upload-toast.success {
|
|
1012
|
-
background: var(--color-success);
|
|
1013
|
-
color: white;
|
|
1014
|
-
}
|
|
1015
|
-
|
|
1016
|
-
.upload-toast.error {
|
|
1017
|
-
background: var(--color-error);
|
|
1018
|
-
color: white;
|
|
1019
|
-
}
|
|
1020
|
-
|
|
1021
|
-
.upload-toast.info {
|
|
1022
|
-
background: var(--color-primary);
|
|
1023
|
-
color: white;
|
|
1024
|
-
}
|
|
1025
|
-
|
|
1026
|
-
/* File browser container */
|
|
1027
|
-
.file-browser-container {
|
|
1028
|
-
flex: 1;
|
|
1029
|
-
min-height: 0;
|
|
1030
|
-
overflow: hidden;
|
|
1031
|
-
}
|
|
1032
|
-
|
|
1033
|
-
.file-browser-iframe {
|
|
1034
|
-
width: 100%;
|
|
1035
|
-
height: 100%;
|
|
1036
|
-
border: none;
|
|
1037
|
-
}
|
|
1038
|
-
|
|
1039
|
-
/* Safe area insets for notched phones */
|
|
1040
|
-
.app-container {
|
|
1041
|
-
padding-top: env(safe-area-inset-top);
|
|
1042
|
-
padding-bottom: env(safe-area-inset-bottom);
|
|
1043
|
-
padding-left: env(safe-area-inset-left);
|
|
1044
|
-
padding-right: env(safe-area-inset-right);
|
|
1045
|
-
}
|
|
1046
|
-
|
|
1047
|
-
/* Responsive improvements */
|
|
544
|
+
html.dark .html-content { background: #1f2937; }
|
|
545
|
+
|
|
546
|
+
.html-content table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
|
|
547
|
+
.html-content th, .html-content td { border: 1px solid var(--color-border); padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; }
|
|
548
|
+
.html-content th { background: var(--color-bg-secondary); font-weight: 600; }
|
|
549
|
+
.html-content ul, .html-content ol { padding-left: 1.5rem; margin: 0.5rem 0; }
|
|
550
|
+
.html-content li { margin: 0.25rem 0; }
|
|
551
|
+
.html-content h1, .html-content h2, .html-content h3, .html-content h4 { margin: 0.75rem 0 0.5rem; }
|
|
552
|
+
.html-content p { margin: 0.5rem 0; }
|
|
553
|
+
|
|
554
|
+
pre { margin: 0; overflow-x: auto; }
|
|
555
|
+
code { font-family: 'Monaco','Menlo','Ubuntu Mono', monospace; font-size: 0.875rem; }
|
|
556
|
+
details { margin: 0.5rem 0; }
|
|
557
|
+
summary { cursor: pointer; user-select: none; padding: 0.5rem; border-radius: 0.25rem; transition: background-color 0.2s; }
|
|
558
|
+
summary:hover { background-color: var(--color-bg-secondary); }
|
|
559
|
+
|
|
560
|
+
/* ===== Folder Browser Modal ===== */
|
|
561
|
+
.folder-modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2000; align-items:center; justify-content:center; }
|
|
562
|
+
.folder-modal-overlay.visible { display:flex; }
|
|
563
|
+
.folder-modal { background:var(--color-bg-primary); border:1px solid var(--color-border); border-radius:0.5rem; width:500px; max-width:90vw; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
|
|
564
|
+
.folder-modal-header { padding:1rem; border-bottom:1px solid var(--color-border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
|
|
565
|
+
.folder-modal-header h3 { margin:0; font-size:1rem; font-weight:600; }
|
|
566
|
+
.folder-modal-close { background:none; border:none; font-size:1.25rem; cursor:pointer; color:var(--color-text-secondary); padding:0.25rem; line-height:1; }
|
|
567
|
+
.folder-modal-close:hover { color:var(--color-text-primary); }
|
|
568
|
+
.folder-breadcrumb { padding:0.75rem 1rem; border-bottom:1px solid var(--color-border); font-size:0.8rem; font-family:'Monaco','Menlo',monospace; color:var(--color-text-secondary); background:var(--color-bg-secondary); display:flex; align-items:center; gap:0.25rem; flex-shrink:0; overflow-x:auto; white-space:nowrap; }
|
|
569
|
+
.folder-breadcrumb-segment { cursor:pointer; color:var(--color-primary); padding:0.125rem 0.25rem; border-radius:0.25rem; }
|
|
570
|
+
.folder-breadcrumb-segment:hover { background:var(--color-bg-primary); text-decoration:underline; }
|
|
571
|
+
.folder-breadcrumb-separator { color:var(--color-text-secondary); }
|
|
572
|
+
.folder-list { flex:1; overflow-y:auto; min-height:200px; max-height:400px; list-style:none; margin:0; padding:0; }
|
|
573
|
+
.folder-list-item { padding:0.5rem 1rem; cursor:pointer; display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; border-bottom:1px solid var(--color-border); transition:background-color 0.15s; }
|
|
574
|
+
.folder-list-item:hover { background:var(--color-bg-secondary); }
|
|
575
|
+
.folder-list-item-icon { font-size:1rem; flex-shrink:0; width:1.25rem; text-align:center; }
|
|
576
|
+
.folder-list-item-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
577
|
+
.folder-list-empty { padding:2rem 1rem; text-align:center; color:var(--color-text-secondary); font-size:0.875rem; }
|
|
578
|
+
.folder-list-loading { padding:2rem 1rem; text-align:center; color:var(--color-text-secondary); font-size:0.875rem; }
|
|
579
|
+
.folder-list-error { padding:1rem; text-align:center; color:var(--color-error); font-size:0.875rem; }
|
|
580
|
+
.folder-modal-footer { padding:0.75rem 1rem; border-top:1px solid var(--color-border); display:flex; justify-content:flex-end; gap:0.5rem; flex-shrink:0; }
|
|
581
|
+
.folder-modal-footer .btn { padding:0.5rem 1rem; font-size:0.8rem; }
|
|
582
|
+
|
|
583
|
+
.btn { padding:0.5rem 1rem; border:none; border-radius:0.375rem; font-weight:500; cursor:pointer; transition:all 0.15s; font-size:0.875rem; }
|
|
584
|
+
.btn-primary { background-color:var(--color-primary); color:white; }
|
|
585
|
+
.btn-primary:hover:not(:disabled) { background-color:var(--color-primary-dark); }
|
|
586
|
+
.btn:disabled { opacity:0.5; cursor:not-allowed; }
|
|
587
|
+
.btn-secondary { background:var(--color-bg-secondary); color:var(--color-text-primary); border:1px solid var(--color-border); }
|
|
588
|
+
.btn-secondary:hover { background:var(--color-border); }
|
|
589
|
+
|
|
590
|
+
/* ===== Drop zone ===== */
|
|
591
|
+
.drop-zone-overlay { display:none; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(59,130,246,0.1); border:3px dashed var(--color-primary); border-radius:0.5rem; z-index:100; align-items:center; justify-content:center; }
|
|
592
|
+
.drop-zone-overlay.visible { display:flex; }
|
|
593
|
+
.drop-zone-content { text-align:center; color:var(--color-primary); pointer-events:none; }
|
|
594
|
+
.drop-zone-icon { font-size:3rem; font-weight:300; line-height:1; margin-bottom:0.5rem; }
|
|
595
|
+
.drop-zone-text { font-size:1rem; font-weight:500; }
|
|
596
|
+
|
|
597
|
+
/* ===== Upload toast ===== */
|
|
598
|
+
.upload-toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); padding:0.75rem 1.5rem; border-radius:0.5rem; font-size:0.875rem; font-weight:500; z-index:2000; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:opacity 0.3s; }
|
|
599
|
+
.upload-toast.success { background:var(--color-success); color:white; }
|
|
600
|
+
.upload-toast.error { background:var(--color-error); color:white; }
|
|
601
|
+
.upload-toast.info { background:var(--color-primary); color:white; }
|
|
602
|
+
|
|
603
|
+
/* ===== File browser ===== */
|
|
604
|
+
.file-browser-container { flex:1; min-height:0; overflow:hidden; }
|
|
605
|
+
.file-browser-iframe { width:100%; height:100%; border:none; }
|
|
606
|
+
|
|
607
|
+
/* ===== RESPONSIVE: MOBILE ===== */
|
|
1048
608
|
@media (max-width: 768px) {
|
|
1049
|
-
|
|
1050
|
-
display: flex;
|
|
1051
|
-
}
|
|
1052
|
-
|
|
1053
|
-
.layout-with-sidebar {
|
|
1054
|
-
grid-template-columns: 1fr;
|
|
1055
|
-
}
|
|
609
|
+
:root { --sidebar-width: 280px; }
|
|
1056
610
|
|
|
1057
611
|
.sidebar {
|
|
1058
612
|
position: fixed;
|
|
1059
|
-
top: 0;
|
|
1060
|
-
left: 0;
|
|
1061
|
-
width: 280px;
|
|
613
|
+
top: 0; left: 0;
|
|
1062
614
|
height: 100%;
|
|
1063
615
|
z-index: 1000;
|
|
1064
616
|
transform: translateX(-100%);
|
|
1065
617
|
transition: transform 0.3s ease;
|
|
1066
618
|
box-shadow: none;
|
|
619
|
+
width: var(--sidebar-width);
|
|
1067
620
|
}
|
|
1068
621
|
|
|
1069
|
-
.sidebar.
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
}
|
|
622
|
+
.sidebar.collapsed { transform: translateX(-100%); width: var(--sidebar-width); }
|
|
623
|
+
.sidebar:not(.collapsed),
|
|
624
|
+
.sidebar.mobile-visible { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.2); }
|
|
1073
625
|
|
|
1074
|
-
.
|
|
1075
|
-
|
|
1076
|
-
padding: 0.75rem;
|
|
1077
|
-
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
|
|
1078
|
-
}
|
|
626
|
+
.main-header { padding: 0 0.75rem; }
|
|
627
|
+
.header-title { font-size: 1rem; }
|
|
1079
628
|
|
|
1080
|
-
.
|
|
1081
|
-
grid-template-columns: 1fr;
|
|
1082
|
-
gap: 0.5rem;
|
|
1083
|
-
}
|
|
629
|
+
.messages-wrapper { padding: 1rem 0.75rem; }
|
|
1084
630
|
|
|
1085
|
-
.
|
|
1086
|
-
min-height: 44px;
|
|
1087
|
-
min-width: 44px;
|
|
1088
|
-
}
|
|
631
|
+
.message { max-width: 90%; }
|
|
1089
632
|
|
|
1090
|
-
.
|
|
1091
|
-
padding: 0.875rem 0.5rem;
|
|
1092
|
-
min-height: 44px;
|
|
1093
|
-
}
|
|
1094
|
-
|
|
1095
|
-
.sidebar-new-btn {
|
|
1096
|
-
min-height: 44px;
|
|
1097
|
-
min-width: 44px;
|
|
1098
|
-
padding: 0.5rem 0.75rem;
|
|
1099
|
-
}
|
|
1100
|
-
|
|
1101
|
-
header {
|
|
633
|
+
.input-section {
|
|
1102
634
|
padding: 0.5rem 0.75rem;
|
|
1103
|
-
|
|
1104
|
-
min-height: 50px;
|
|
1105
|
-
padding-top: calc(0.5rem + env(safe-area-inset-top));
|
|
1106
|
-
}
|
|
1107
|
-
|
|
1108
|
-
.header-title {
|
|
1109
|
-
font-size: 1.125rem;
|
|
635
|
+
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
|
|
1110
636
|
}
|
|
1111
637
|
|
|
1112
|
-
.
|
|
1113
|
-
padding: 0.375rem 0.625rem;
|
|
1114
|
-
font-size: 0.75rem;
|
|
1115
|
-
}
|
|
638
|
+
.message-textarea { font-size: 16px; }
|
|
1116
639
|
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
-webkit-overflow-scrolling: touch;
|
|
1120
|
-
}
|
|
640
|
+
.conversation-item { padding: 0.875rem 0.75rem; min-height: 44px; }
|
|
641
|
+
.sidebar-new-btn { min-height: 44px; min-width: 44px; padding: 0.5rem 0.75rem; }
|
|
1121
642
|
|
|
1122
|
-
.
|
|
1123
|
-
min-height: 44px;
|
|
1124
|
-
font-size: 16px;
|
|
1125
|
-
}
|
|
643
|
+
.status-badge { padding: 0.25rem 0.5rem; font-size: 0.7rem; }
|
|
1126
644
|
|
|
1127
|
-
.view-toggle-btn {
|
|
1128
|
-
flex: 1;
|
|
1129
|
-
text-align: center;
|
|
1130
|
-
}
|
|
645
|
+
.view-toggle-btn { flex: 1; text-align: center; }
|
|
1131
646
|
}
|
|
1132
647
|
|
|
1133
648
|
@media (max-width: 480px) {
|
|
1134
|
-
.sidebar {
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
}
|
|
1138
|
-
|
|
1139
|
-
header {
|
|
1140
|
-
padding: 0.5rem;
|
|
1141
|
-
}
|
|
1142
|
-
|
|
1143
|
-
.header-title {
|
|
1144
|
-
font-size: 1rem;
|
|
1145
|
-
}
|
|
1146
|
-
|
|
1147
|
-
.header-controls {
|
|
1148
|
-
gap: 0.375rem;
|
|
1149
|
-
}
|
|
1150
|
-
|
|
1151
|
-
.execution-panel {
|
|
1152
|
-
padding: 0.5rem;
|
|
1153
|
-
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
|
|
1154
|
-
}
|
|
1155
|
-
|
|
1156
|
-
.execution-textarea {
|
|
1157
|
-
min-height: 44px;
|
|
1158
|
-
max-height: 6rem;
|
|
1159
|
-
font-size: 16px;
|
|
1160
|
-
}
|
|
1161
|
-
|
|
1162
|
-
.btn {
|
|
1163
|
-
padding: 0.625rem 1rem;
|
|
1164
|
-
font-size: 0.8rem;
|
|
1165
|
-
}
|
|
1166
|
-
|
|
1167
|
-
#output-scroll {
|
|
1168
|
-
padding: 0.5rem;
|
|
1169
|
-
}
|
|
1170
|
-
|
|
1171
|
-
.status-badge {
|
|
1172
|
-
padding: 0.25rem 0.5rem;
|
|
1173
|
-
font-size: 0.7rem;
|
|
1174
|
-
}
|
|
1175
|
-
|
|
1176
|
-
.drop-zone-icon {
|
|
1177
|
-
font-size: 2rem;
|
|
1178
|
-
}
|
|
1179
|
-
|
|
1180
|
-
.drop-zone-text {
|
|
1181
|
-
font-size: 0.875rem;
|
|
1182
|
-
}
|
|
649
|
+
.sidebar { width: calc(100% - 3rem); max-width: 320px; }
|
|
650
|
+
.message { max-width: 95%; }
|
|
651
|
+
.messages-wrapper { padding: 0.75rem 0.5rem; }
|
|
652
|
+
.input-section { padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
|
|
653
|
+
.agent-selector { display: none; }
|
|
1183
654
|
}
|
|
1184
655
|
|
|
1185
|
-
/*
|
|
656
|
+
/* ===== RESPONSIVE: TABLET ===== */
|
|
1186
657
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
1187
|
-
|
|
1188
|
-
grid-template-columns: 250px 1fr;
|
|
1189
|
-
}
|
|
1190
|
-
|
|
1191
|
-
.sidebar {
|
|
1192
|
-
width: auto;
|
|
1193
|
-
}
|
|
658
|
+
:root { --sidebar-width: 260px; }
|
|
1194
659
|
}
|
|
1195
660
|
</style>
|
|
1196
661
|
</head>
|
|
1197
662
|
<body>
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
<
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
<div class="status-badge">
|
|
1208
|
-
<div class="status-indicator" data-status="disconnected"></div>
|
|
1209
|
-
<span id="connectionStatus" data-status-indicator>Disconnected</span>
|
|
1210
|
-
</div>
|
|
1211
|
-
|
|
1212
|
-
<button class="btn btn-primary" data-theme-toggle title="Toggle dark mode">
|
|
1213
|
-
Theme
|
|
1214
|
-
</button>
|
|
663
|
+
<!-- Sidebar overlay (mobile) -->
|
|
664
|
+
<div class="sidebar-overlay" data-sidebar-overlay></div>
|
|
665
|
+
|
|
666
|
+
<div class="app-shell">
|
|
667
|
+
<!-- ===== SIDEBAR ===== -->
|
|
668
|
+
<aside class="sidebar" data-sidebar>
|
|
669
|
+
<div class="sidebar-header">
|
|
670
|
+
<h2>History</h2>
|
|
671
|
+
<button id="newConversationBtn" class="sidebar-new-btn" data-new-conversation title="Start new conversation">+ New</button>
|
|
1215
672
|
</div>
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
<!--
|
|
1222
|
-
<
|
|
1223
|
-
<!--
|
|
1224
|
-
<
|
|
1225
|
-
<
|
|
1226
|
-
<
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
</
|
|
1232
|
-
</aside>
|
|
1233
|
-
|
|
1234
|
-
<!-- Main Content Area -->
|
|
1235
|
-
<main id="app" class="main-content">
|
|
1236
|
-
<!-- View Toggle Bar -->
|
|
1237
|
-
<div class="view-toggle-bar" id="viewToggleBar" style="display:none;">
|
|
1238
|
-
<button class="view-toggle-btn active" data-view="chat">Chat</button>
|
|
1239
|
-
<button class="view-toggle-btn" data-view="files">Files</button>
|
|
1240
|
-
</div>
|
|
673
|
+
<ul class="sidebar-list" data-conversation-list>
|
|
674
|
+
<li class="sidebar-empty" data-conversation-empty>No conversations yet</li>
|
|
675
|
+
</ul>
|
|
676
|
+
</aside>
|
|
677
|
+
|
|
678
|
+
<!-- ===== MAIN PANEL ===== -->
|
|
679
|
+
<main id="app" class="main-panel">
|
|
680
|
+
<!-- Header bar -->
|
|
681
|
+
<div class="main-header">
|
|
682
|
+
<button class="sidebar-toggle-btn" data-sidebar-toggle title="Toggle sidebar (Ctrl+B)" aria-label="Toggle sidebar">
|
|
683
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
684
|
+
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
685
|
+
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
686
|
+
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
687
|
+
</svg>
|
|
688
|
+
</button>
|
|
1241
689
|
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
<
|
|
1248
|
-
<div class="drop-zone-icon">+</div>
|
|
1249
|
-
<div class="drop-zone-text">Drop files here to copy to working directory</div>
|
|
1250
|
-
</div>
|
|
690
|
+
<h1 class="header-title">AgentGUI</h1>
|
|
691
|
+
|
|
692
|
+
<div class="header-controls">
|
|
693
|
+
<div class="status-badge">
|
|
694
|
+
<div class="status-indicator" data-status="disconnected"></div>
|
|
695
|
+
<span id="connectionStatus" data-status-indicator>Disconnected</span>
|
|
1251
696
|
</div>
|
|
697
|
+
<button class="theme-toggle-btn" data-theme-toggle title="Toggle dark mode" aria-label="Toggle dark mode">
|
|
698
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
699
|
+
<circle cx="12" cy="12" r="5"></circle>
|
|
700
|
+
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
701
|
+
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
702
|
+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
703
|
+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
704
|
+
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
705
|
+
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
706
|
+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
707
|
+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
708
|
+
</svg>
|
|
709
|
+
</button>
|
|
1252
710
|
</div>
|
|
711
|
+
</div>
|
|
1253
712
|
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
</
|
|
713
|
+
<!-- View toggle bar (hidden by default) -->
|
|
714
|
+
<div class="view-toggle-bar" id="viewToggleBar" style="display:none;">
|
|
715
|
+
<button class="view-toggle-btn active" data-view="chat">Chat</button>
|
|
716
|
+
<button class="view-toggle-btn" data-view="files">Files</button>
|
|
717
|
+
</div>
|
|
1258
718
|
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
<
|
|
1268
|
-
class="execution-textarea"
|
|
1269
|
-
data-message-input
|
|
1270
|
-
placeholder="Enter command or prompt... (Ctrl+Enter to submit)"
|
|
1271
|
-
aria-label="Execution prompt input"
|
|
1272
|
-
></textarea>
|
|
719
|
+
<!-- Messages scroll area -->
|
|
720
|
+
<div id="output-scroll" role="region" aria-label="Chat messages" aria-live="polite" data-drop-zone>
|
|
721
|
+
<div class="messages-wrapper">
|
|
722
|
+
<div id="output"></div>
|
|
723
|
+
</div>
|
|
724
|
+
<div class="drop-zone-overlay" id="dropZoneOverlay">
|
|
725
|
+
<div class="drop-zone-content">
|
|
726
|
+
<div class="drop-zone-icon">+</div>
|
|
727
|
+
<div class="drop-zone-text">Drop files here to copy to working directory</div>
|
|
1273
728
|
</div>
|
|
729
|
+
</div>
|
|
730
|
+
</div>
|
|
1274
731
|
|
|
1275
|
-
|
|
1276
|
-
|
|
732
|
+
<!-- File browser (hidden by default) -->
|
|
733
|
+
<div id="fileBrowserContainer" class="file-browser-container" style="display:none;">
|
|
734
|
+
<iframe id="fileBrowserIframe" class="file-browser-iframe" sandbox="allow-same-origin allow-scripts allow-forms allow-popups"></iframe>
|
|
735
|
+
</div>
|
|
736
|
+
|
|
737
|
+
<!-- Input area: fixed at bottom -->
|
|
738
|
+
<div class="input-section">
|
|
739
|
+
<div class="input-wrapper">
|
|
740
|
+
<select class="agent-selector" data-agent-selector title="Select agent">
|
|
741
|
+
<option value="claude-code">Claude Code</option>
|
|
742
|
+
<option value="opencode">OpenCode</option>
|
|
743
|
+
</select>
|
|
744
|
+
<textarea
|
|
745
|
+
class="message-textarea"
|
|
746
|
+
data-message-input
|
|
747
|
+
placeholder="Message AgentGUI... (Ctrl+Enter to send)"
|
|
748
|
+
aria-label="Message input"
|
|
749
|
+
rows="1"
|
|
750
|
+
></textarea>
|
|
751
|
+
<button class="send-btn" data-send-button title="Send message (Ctrl+Enter)" aria-label="Send message">
|
|
752
|
+
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
753
|
+
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
|
754
|
+
</svg>
|
|
1277
755
|
</button>
|
|
1278
756
|
</div>
|
|
1279
|
-
</
|
|
1280
|
-
</
|
|
757
|
+
</div>
|
|
758
|
+
</main>
|
|
1281
759
|
</div>
|
|
1282
760
|
|
|
1283
761
|
<!-- Folder Browser Modal -->
|
|
@@ -1298,55 +776,22 @@
|
|
|
1298
776
|
</div>
|
|
1299
777
|
</div>
|
|
1300
778
|
|
|
1301
|
-
<!-- Scripts - Order matters! -->
|
|
1302
|
-
<!-- 1. Event Processor (no dependencies) -->
|
|
1303
779
|
<script src="/gm/js/event-processor.js"></script>
|
|
1304
|
-
|
|
1305
|
-
<!-- 2. Streaming Renderer (no dependencies) -->
|
|
1306
780
|
<script src="/gm/js/streaming-renderer.js"></script>
|
|
1307
|
-
|
|
1308
|
-
<!-- 3. WebSocket Manager (no dependencies) -->
|
|
1309
781
|
<script src="/gm/js/websocket-manager.js"></script>
|
|
1310
|
-
|
|
1311
|
-
<!-- 4. Event Filter (depends on Streaming Renderer) -->
|
|
1312
782
|
<script src="/gm/js/event-filter.js"></script>
|
|
1313
|
-
|
|
1314
|
-
<!-- 5. Syntax Highlighter (no dependencies) -->
|
|
1315
783
|
<script src="/gm/js/syntax-highlighter.js"></script>
|
|
1316
|
-
|
|
1317
|
-
<!-- 6. UI Components (no dependencies) -->
|
|
1318
784
|
<script src="/gm/js/ui-components.js"></script>
|
|
1319
|
-
|
|
1320
|
-
<!-- 7. Conversations Manager (loads conversation history) -->
|
|
1321
785
|
<script src="/gm/js/conversations.js"></script>
|
|
1322
|
-
|
|
1323
|
-
<!-- 8. Main Client (depends on all above) -->
|
|
1324
786
|
<script src="/gm/js/client.js"></script>
|
|
1325
|
-
|
|
1326
|
-
<!-- 9. Features: drag-drop, file browser, mobile sidebar -->
|
|
1327
787
|
<script src="/gm/js/features.js"></script>
|
|
1328
788
|
|
|
1329
|
-
<!-- Inline initialization -->
|
|
1330
789
|
<script>
|
|
1331
|
-
// Set initial theme based on preference
|
|
1332
790
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
1333
|
-
if (savedTheme === 'dark')
|
|
1334
|
-
document.documentElement.classList.add('dark');
|
|
1335
|
-
}
|
|
1336
|
-
|
|
1337
|
-
// Fallback error handler
|
|
1338
|
-
window.addEventListener('error', (event) => {
|
|
1339
|
-
console.error('Uncaught error:', event.error);
|
|
1340
|
-
});
|
|
1341
|
-
|
|
1342
|
-
window.addEventListener('unhandledrejection', (event) => {
|
|
1343
|
-
console.error('Unhandled rejection:', event.reason);
|
|
1344
|
-
});
|
|
791
|
+
if (savedTheme === 'dark') document.documentElement.classList.add('dark');
|
|
1345
792
|
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
console.log('DOM loaded, waiting for client initialization');
|
|
1349
|
-
});
|
|
793
|
+
window.addEventListener('error', (event) => console.error('Uncaught error:', event.error));
|
|
794
|
+
window.addEventListener('unhandledrejection', (event) => console.error('Unhandled rejection:', event.reason));
|
|
1350
795
|
</script>
|
|
1351
796
|
</body>
|
|
1352
797
|
</html>
|