@xcanwin/manyoyo 4.1.4 → 4.1.10
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/docker/manyoyo.Dockerfile +36 -39
- package/lib/web/frontend/app.css +420 -190
- package/lib/web/frontend/app.html +71 -4
- package/lib/web/frontend/app.js +840 -136
- package/lib/web/frontend/login.css +77 -63
- package/lib/web/server.js +609 -40
- package/package.json +2 -2
package/lib/web/frontend/app.css
CHANGED
|
@@ -1,30 +1,53 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--
|
|
3
|
-
--
|
|
4
|
-
--
|
|
2
|
+
--font-ui: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
3
|
+
--font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
4
|
+
--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
|
5
|
+
|
|
6
|
+
--bg-canvas: #f3ede4;
|
|
7
|
+
--bg-canvas-alt: #efe4d3;
|
|
8
|
+
--bg-grid: rgba(138, 114, 83, 0.16);
|
|
9
|
+
|
|
10
|
+
--panel: #fffdfa;
|
|
11
|
+
--panel-soft: #f9f2e7;
|
|
5
12
|
--panel-strong: #ffffff;
|
|
6
|
-
|
|
7
|
-
--line
|
|
8
|
-
--
|
|
9
|
-
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
13
|
+
|
|
14
|
+
--line: #d9c7ad;
|
|
15
|
+
--line-strong: #b59263;
|
|
16
|
+
|
|
17
|
+
--text: #1f1a14;
|
|
18
|
+
--muted: #6a5f52;
|
|
19
|
+
|
|
20
|
+
--accent: #c4551f;
|
|
21
|
+
--accent-strong: #9d4418;
|
|
22
|
+
--accent-soft: #fee4d6;
|
|
23
|
+
|
|
24
|
+
--subaccent: #0f7c72;
|
|
25
|
+
--subaccent-strong: #0a655e;
|
|
26
|
+
--subaccent-soft: #ddf3f0;
|
|
27
|
+
|
|
28
|
+
--danger: #bf332d;
|
|
29
|
+
--danger-strong: #962824;
|
|
30
|
+
--danger-soft: #ffe8e5;
|
|
31
|
+
|
|
32
|
+
--status-running-bg: #e0f5ef;
|
|
33
|
+
--status-running-text: #0c695f;
|
|
34
|
+
--status-stopped-bg: #fff0dd;
|
|
35
|
+
--status-stopped-text: #9a5a09;
|
|
36
|
+
--status-history-bg: #ece7df;
|
|
37
|
+
--status-history-text: #645647;
|
|
38
|
+
--status-unknown-bg: #ece9ff;
|
|
39
|
+
--status-unknown-text: #5a4bb0;
|
|
40
|
+
|
|
41
|
+
--user-bubble: #fee9dd;
|
|
42
|
+
--assistant-bubble: #fffdf8;
|
|
43
|
+
--system-bubble: #e5f3f1;
|
|
44
|
+
|
|
45
|
+
--terminal-bg: #11161d;
|
|
46
|
+
--terminal-fg: #e8edf5;
|
|
47
|
+
--terminal-cursor: #ffd166;
|
|
48
|
+
|
|
49
|
+
--shadow-soft: 0 14px 34px rgba(44, 31, 15, 0.16);
|
|
50
|
+
--shadow-strong: 0 24px 54px rgba(44, 31, 15, 0.24);
|
|
28
51
|
}
|
|
29
52
|
|
|
30
53
|
* {
|
|
@@ -42,116 +65,125 @@ body {
|
|
|
42
65
|
min-height: 100vh;
|
|
43
66
|
overflow: hidden;
|
|
44
67
|
position: relative;
|
|
45
|
-
font-family:
|
|
68
|
+
font-family: var(--font-ui);
|
|
46
69
|
color: var(--text);
|
|
47
|
-
background:
|
|
70
|
+
background:
|
|
71
|
+
radial-gradient(120% 80% at 8% -8%, #f8f2ea 0%, rgba(248, 242, 234, 0) 56%),
|
|
72
|
+
radial-gradient(90% 62% at 92% 108%, #f2ddc6 0%, rgba(242, 221, 198, 0) 68%),
|
|
73
|
+
linear-gradient(170deg, var(--bg-canvas) 0%, var(--bg-canvas-alt) 100%);
|
|
48
74
|
}
|
|
49
75
|
|
|
50
76
|
body::before,
|
|
51
77
|
body::after {
|
|
52
78
|
content: "";
|
|
53
79
|
position: absolute;
|
|
54
|
-
|
|
55
|
-
filter: blur(4px);
|
|
56
|
-
z-index: 0;
|
|
80
|
+
inset: 0;
|
|
57
81
|
pointer-events: none;
|
|
58
82
|
}
|
|
59
83
|
|
|
60
84
|
body::before {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
85
|
+
background-image:
|
|
86
|
+
repeating-linear-gradient(
|
|
87
|
+
90deg,
|
|
88
|
+
transparent 0,
|
|
89
|
+
transparent 27px,
|
|
90
|
+
var(--bg-grid) 27px,
|
|
91
|
+
var(--bg-grid) 28px
|
|
92
|
+
);
|
|
93
|
+
opacity: 0.22;
|
|
67
94
|
}
|
|
68
95
|
|
|
69
96
|
body::after {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
bottom: -120px;
|
|
74
|
-
background: radial-gradient(circle at 55% 45%, rgba(33, 130, 86, 0.22) 0%, rgba(33, 130, 86, 0) 70%);
|
|
75
|
-
animation: none;
|
|
97
|
+
background-image:
|
|
98
|
+
linear-gradient(145deg, rgba(196, 85, 31, 0.08) 0%, rgba(196, 85, 31, 0) 46%),
|
|
99
|
+
linear-gradient(-145deg, rgba(15, 124, 114, 0.08) 0%, rgba(15, 124, 114, 0) 42%);
|
|
76
100
|
}
|
|
77
101
|
|
|
78
102
|
.app {
|
|
79
103
|
position: relative;
|
|
80
104
|
z-index: 1;
|
|
81
105
|
height: 100vh;
|
|
82
|
-
|
|
106
|
+
height: 100dvh;
|
|
107
|
+
padding: 18px;
|
|
83
108
|
display: grid;
|
|
84
|
-
grid-template-columns: minmax(
|
|
85
|
-
gap:
|
|
109
|
+
grid-template-columns: minmax(282px, 334px) minmax(0, 1fr);
|
|
110
|
+
gap: 16px;
|
|
86
111
|
}
|
|
87
112
|
|
|
88
113
|
.sidebar,
|
|
89
114
|
.main {
|
|
90
|
-
border-radius:
|
|
115
|
+
border-radius: 18px;
|
|
91
116
|
border: 1px solid var(--line);
|
|
92
|
-
background: var(--panel);
|
|
93
117
|
box-shadow: var(--shadow-soft);
|
|
94
118
|
}
|
|
95
119
|
|
|
96
120
|
.sidebar {
|
|
97
121
|
min-height: 0;
|
|
98
|
-
padding:
|
|
122
|
+
padding: 16px;
|
|
99
123
|
display: flex;
|
|
100
124
|
flex-direction: column;
|
|
101
125
|
gap: 12px;
|
|
102
|
-
|
|
126
|
+
background:
|
|
127
|
+
linear-gradient(165deg, #fffefd 0%, #f8f1e7 100%);
|
|
128
|
+
animation: panelIn 320ms ease both;
|
|
103
129
|
}
|
|
104
130
|
|
|
105
131
|
.sidebar-top {
|
|
106
132
|
display: flex;
|
|
107
133
|
align-items: flex-start;
|
|
108
134
|
justify-content: space-between;
|
|
109
|
-
gap:
|
|
135
|
+
gap: 10px;
|
|
136
|
+
padding-bottom: 8px;
|
|
137
|
+
border-bottom: 1px solid rgba(181, 146, 99, 0.45);
|
|
110
138
|
}
|
|
111
139
|
|
|
112
140
|
.brand-wrap {
|
|
113
141
|
display: flex;
|
|
114
142
|
flex-direction: column;
|
|
115
|
-
gap:
|
|
143
|
+
gap: 2px;
|
|
144
|
+
min-width: 0;
|
|
116
145
|
}
|
|
117
146
|
|
|
118
147
|
.brand {
|
|
148
|
+
font-family: var(--font-display);
|
|
119
149
|
font-weight: 700;
|
|
120
|
-
letter-spacing:
|
|
121
|
-
font-size:
|
|
150
|
+
letter-spacing: 1.1px;
|
|
151
|
+
font-size: 22px;
|
|
152
|
+
line-height: 1;
|
|
153
|
+
text-transform: uppercase;
|
|
122
154
|
}
|
|
123
155
|
|
|
124
156
|
.brand-sub {
|
|
125
157
|
color: var(--muted);
|
|
126
|
-
font-size:
|
|
158
|
+
font-size: 11px;
|
|
159
|
+
letter-spacing: 0.3px;
|
|
160
|
+
text-transform: uppercase;
|
|
127
161
|
}
|
|
128
162
|
|
|
129
|
-
.
|
|
130
|
-
display:
|
|
131
|
-
grid-template-columns: 1fr auto;
|
|
163
|
+
.sidebar-actions {
|
|
164
|
+
display: inline-flex;
|
|
132
165
|
gap: 8px;
|
|
166
|
+
align-items: center;
|
|
167
|
+
flex-wrap: wrap;
|
|
168
|
+
margin-left: auto;
|
|
169
|
+
justify-content: flex-end;
|
|
133
170
|
}
|
|
134
171
|
|
|
135
|
-
.
|
|
136
|
-
|
|
137
|
-
border-radius: 8px;
|
|
138
|
-
padding: 10px 11px;
|
|
139
|
-
background: var(--panel-strong);
|
|
140
|
-
color: var(--text);
|
|
141
|
-
font-size: 13px;
|
|
172
|
+
.sidebar-actions button {
|
|
173
|
+
min-width: 62px;
|
|
142
174
|
}
|
|
143
175
|
|
|
144
176
|
input:focus,
|
|
145
177
|
textarea:focus {
|
|
146
178
|
outline: none;
|
|
147
179
|
border-color: var(--accent);
|
|
148
|
-
box-shadow: 0 0 0 3px rgba(
|
|
180
|
+
box-shadow: 0 0 0 3px rgba(196, 85, 31, 0.16);
|
|
149
181
|
}
|
|
150
182
|
|
|
151
183
|
button {
|
|
152
184
|
border: 1px solid transparent;
|
|
153
|
-
border-radius:
|
|
154
|
-
padding: 9px
|
|
185
|
+
border-radius: 10px;
|
|
186
|
+
padding: 9px 14px;
|
|
155
187
|
font-weight: 650;
|
|
156
188
|
font-size: 13px;
|
|
157
189
|
cursor: pointer;
|
|
@@ -165,32 +197,37 @@ button:hover {
|
|
|
165
197
|
background: var(--accent-strong);
|
|
166
198
|
}
|
|
167
199
|
|
|
200
|
+
button:active {
|
|
201
|
+
transform: translateY(0);
|
|
202
|
+
}
|
|
203
|
+
|
|
168
204
|
button:disabled {
|
|
169
205
|
opacity: 0.58;
|
|
170
206
|
cursor: not-allowed;
|
|
171
207
|
transform: none;
|
|
208
|
+
box-shadow: none;
|
|
172
209
|
}
|
|
173
210
|
|
|
174
211
|
button.secondary {
|
|
175
212
|
color: var(--text);
|
|
176
|
-
background:
|
|
213
|
+
background: var(--panel-soft);
|
|
177
214
|
border-color: var(--line);
|
|
178
215
|
}
|
|
179
216
|
|
|
180
217
|
button.secondary:hover {
|
|
181
|
-
background: #
|
|
218
|
+
background: #f5ebdf;
|
|
182
219
|
border-color: var(--line-strong);
|
|
183
220
|
}
|
|
184
221
|
|
|
185
222
|
button.danger-outline {
|
|
186
223
|
color: var(--danger);
|
|
187
224
|
background: #fff5f3;
|
|
188
|
-
border-color: #
|
|
225
|
+
border-color: #edc1bc;
|
|
189
226
|
}
|
|
190
227
|
|
|
191
228
|
button.danger-outline:hover {
|
|
192
|
-
background:
|
|
193
|
-
border-color: #
|
|
229
|
+
background: var(--danger-soft);
|
|
230
|
+
border-color: #df9791;
|
|
194
231
|
}
|
|
195
232
|
|
|
196
233
|
button.danger {
|
|
@@ -201,6 +238,13 @@ button.danger:hover {
|
|
|
201
238
|
background: var(--danger-strong);
|
|
202
239
|
}
|
|
203
240
|
|
|
241
|
+
button:focus-visible,
|
|
242
|
+
input:focus-visible,
|
|
243
|
+
textarea:focus-visible {
|
|
244
|
+
outline: 2px solid rgba(196, 85, 31, 0.45);
|
|
245
|
+
outline-offset: 2px;
|
|
246
|
+
}
|
|
247
|
+
|
|
204
248
|
.mobile-session-toggle,
|
|
205
249
|
.mobile-actions-toggle,
|
|
206
250
|
.mobile-sidebar-close,
|
|
@@ -212,6 +256,133 @@ button.danger:hover {
|
|
|
212
256
|
display: none !important;
|
|
213
257
|
}
|
|
214
258
|
|
|
259
|
+
.modal-backdrop {
|
|
260
|
+
position: fixed;
|
|
261
|
+
inset: 0;
|
|
262
|
+
z-index: 80;
|
|
263
|
+
display: flex;
|
|
264
|
+
align-items: center;
|
|
265
|
+
justify-content: center;
|
|
266
|
+
padding: 16px;
|
|
267
|
+
background: rgba(23, 17, 11, 0.48);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.modal-backdrop[hidden] {
|
|
271
|
+
display: none !important;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.modal {
|
|
275
|
+
width: min(960px, calc(100vw - 24px));
|
|
276
|
+
max-height: min(92vh, 860px);
|
|
277
|
+
display: flex;
|
|
278
|
+
flex-direction: column;
|
|
279
|
+
border: 1px solid var(--line);
|
|
280
|
+
border-radius: 14px;
|
|
281
|
+
background: #fffefb;
|
|
282
|
+
box-shadow: var(--shadow-strong);
|
|
283
|
+
overflow: hidden;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.modal-header {
|
|
287
|
+
display: flex;
|
|
288
|
+
align-items: center;
|
|
289
|
+
justify-content: space-between;
|
|
290
|
+
gap: 12px;
|
|
291
|
+
padding: 12px 14px;
|
|
292
|
+
border-bottom: 1px solid var(--line);
|
|
293
|
+
background: #fff8ef;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.modal-header h2 {
|
|
297
|
+
margin: 0;
|
|
298
|
+
font-size: 16px;
|
|
299
|
+
line-height: 1.3;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.modal-body {
|
|
303
|
+
padding: 12px 14px;
|
|
304
|
+
overflow: auto;
|
|
305
|
+
min-height: 0;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.modal-footer {
|
|
309
|
+
display: flex;
|
|
310
|
+
justify-content: flex-end;
|
|
311
|
+
gap: 8px;
|
|
312
|
+
padding: 12px 14px;
|
|
313
|
+
border-top: 1px solid var(--line);
|
|
314
|
+
background: #fff8ef;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.modal-tip {
|
|
318
|
+
color: var(--muted);
|
|
319
|
+
font-size: 12px;
|
|
320
|
+
margin-bottom: 10px;
|
|
321
|
+
word-break: break-all;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.modal-error {
|
|
325
|
+
margin-top: 10px;
|
|
326
|
+
color: var(--danger);
|
|
327
|
+
font-size: 13px;
|
|
328
|
+
padding: 8px 10px;
|
|
329
|
+
border: 1px solid #efb2ad;
|
|
330
|
+
border-radius: 8px;
|
|
331
|
+
background: #fff2f0;
|
|
332
|
+
white-space: pre-wrap;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.config-editor {
|
|
336
|
+
width: 100%;
|
|
337
|
+
min-height: 340px;
|
|
338
|
+
border: 1px solid var(--line);
|
|
339
|
+
border-radius: 10px;
|
|
340
|
+
background: #fffdfa;
|
|
341
|
+
color: var(--text);
|
|
342
|
+
font-family: var(--font-mono);
|
|
343
|
+
font-size: 13px;
|
|
344
|
+
line-height: 1.5;
|
|
345
|
+
padding: 12px;
|
|
346
|
+
resize: vertical;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.form-grid {
|
|
350
|
+
display: grid;
|
|
351
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
352
|
+
gap: 10px;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.form-grid label,
|
|
356
|
+
.text-block {
|
|
357
|
+
display: flex;
|
|
358
|
+
flex-direction: column;
|
|
359
|
+
gap: 6px;
|
|
360
|
+
font-size: 12px;
|
|
361
|
+
color: var(--muted);
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.form-grid input,
|
|
365
|
+
.form-grid select,
|
|
366
|
+
.text-block textarea {
|
|
367
|
+
border: 1px solid var(--line);
|
|
368
|
+
border-radius: 10px;
|
|
369
|
+
padding: 9px 11px;
|
|
370
|
+
background: var(--panel-strong);
|
|
371
|
+
color: var(--text);
|
|
372
|
+
font-size: 13px;
|
|
373
|
+
font-family: var(--font-ui);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.text-block {
|
|
377
|
+
margin-top: 10px;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.text-block textarea {
|
|
381
|
+
min-height: 88px;
|
|
382
|
+
font-family: var(--font-mono);
|
|
383
|
+
resize: vertical;
|
|
384
|
+
}
|
|
385
|
+
|
|
215
386
|
.session-head {
|
|
216
387
|
display: flex;
|
|
217
388
|
justify-content: space-between;
|
|
@@ -238,31 +409,48 @@ button.danger:hover {
|
|
|
238
409
|
|
|
239
410
|
#sessionList::-webkit-scrollbar-thumb,
|
|
240
411
|
#messages::-webkit-scrollbar-thumb {
|
|
241
|
-
background: #
|
|
242
|
-
border-radius:
|
|
412
|
+
background: #d6c1a5;
|
|
413
|
+
border-radius: 8px;
|
|
243
414
|
}
|
|
244
415
|
|
|
245
416
|
.session-item {
|
|
246
417
|
text-align: left;
|
|
247
418
|
width: 100%;
|
|
248
419
|
border: 1px solid var(--line);
|
|
249
|
-
background:
|
|
420
|
+
background: var(--panel-strong);
|
|
250
421
|
color: var(--text);
|
|
251
|
-
border-radius:
|
|
252
|
-
padding: 10px;
|
|
422
|
+
border-radius: 10px;
|
|
423
|
+
padding: 11px 11px 11px 10px;
|
|
253
424
|
animation: itemIn 220ms ease both;
|
|
254
|
-
animation-delay: calc(var(--item-index, 0) *
|
|
425
|
+
animation-delay: calc(var(--item-index, 0) * 30ms);
|
|
255
426
|
}
|
|
256
427
|
|
|
257
428
|
.session-item:hover {
|
|
258
|
-
border-color: #
|
|
259
|
-
background: #
|
|
429
|
+
border-color: #d1aa7f;
|
|
430
|
+
background: #fff8ef;
|
|
431
|
+
box-shadow: inset 3px 0 0 #d39c6d;
|
|
260
432
|
}
|
|
261
433
|
|
|
262
434
|
.session-item.active {
|
|
263
|
-
border-color: #
|
|
264
|
-
background: #
|
|
265
|
-
box-shadow: 0 0 0 2px rgba(
|
|
435
|
+
border-color: #c68d5a;
|
|
436
|
+
background: #fff3e8;
|
|
437
|
+
box-shadow: inset 3px 0 0 var(--accent), 0 0 0 2px rgba(196, 85, 31, 0.14);
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.session-item.history-only {
|
|
441
|
+
color: #b3ab9f;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.session-item.history-only .session-name,
|
|
445
|
+
.session-item.history-only .session-count,
|
|
446
|
+
.session-item.history-only .session-time {
|
|
447
|
+
color: #b3ab9f;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.session-item.history-only .session-status {
|
|
451
|
+
background: #f7f3ed;
|
|
452
|
+
border-color: #e3dbd1;
|
|
453
|
+
color: #b3ab9f;
|
|
266
454
|
}
|
|
267
455
|
|
|
268
456
|
.session-name {
|
|
@@ -280,7 +468,7 @@ button.danger:hover {
|
|
|
280
468
|
}
|
|
281
469
|
|
|
282
470
|
.session-status {
|
|
283
|
-
border-radius:
|
|
471
|
+
border-radius: 99px;
|
|
284
472
|
padding: 2px 8px;
|
|
285
473
|
font-weight: 700;
|
|
286
474
|
font-size: 11px;
|
|
@@ -291,25 +479,25 @@ button.danger:hover {
|
|
|
291
479
|
.session-status.running {
|
|
292
480
|
background: var(--status-running-bg);
|
|
293
481
|
color: var(--status-running-text);
|
|
294
|
-
border-color: #
|
|
482
|
+
border-color: #a9dacf;
|
|
295
483
|
}
|
|
296
484
|
|
|
297
485
|
.session-status.stopped {
|
|
298
486
|
background: var(--status-stopped-bg);
|
|
299
487
|
color: var(--status-stopped-text);
|
|
300
|
-
border-color: #
|
|
488
|
+
border-color: #edc98e;
|
|
301
489
|
}
|
|
302
490
|
|
|
303
491
|
.session-status.history {
|
|
304
492
|
background: var(--status-history-bg);
|
|
305
493
|
color: var(--status-history-text);
|
|
306
|
-
border-color: #
|
|
494
|
+
border-color: #d8cebe;
|
|
307
495
|
}
|
|
308
496
|
|
|
309
497
|
.session-status.unknown {
|
|
310
498
|
background: var(--status-unknown-bg);
|
|
311
499
|
color: var(--status-unknown-text);
|
|
312
|
-
border-color: #
|
|
500
|
+
border-color: #cac1fb;
|
|
313
501
|
}
|
|
314
502
|
|
|
315
503
|
.session-count {
|
|
@@ -319,24 +507,24 @@ button.danger:hover {
|
|
|
319
507
|
.session-time {
|
|
320
508
|
margin-top: 6px;
|
|
321
509
|
font-size: 11px;
|
|
322
|
-
color: #
|
|
510
|
+
color: #7b6d5d;
|
|
323
511
|
}
|
|
324
512
|
|
|
325
513
|
.empty {
|
|
326
514
|
padding: 12px 10px;
|
|
327
|
-
border: 1px dashed #
|
|
328
|
-
border-radius:
|
|
515
|
+
border: 1px dashed #d4bf9f;
|
|
516
|
+
border-radius: 10px;
|
|
329
517
|
color: var(--muted);
|
|
330
518
|
font-size: 13px;
|
|
331
|
-
background: rgba(255,
|
|
519
|
+
background: rgba(255, 252, 245, 0.86);
|
|
332
520
|
}
|
|
333
521
|
|
|
334
522
|
.skeleton {
|
|
335
523
|
position: relative;
|
|
336
524
|
overflow: hidden;
|
|
337
|
-
background: #
|
|
338
|
-
border-radius:
|
|
339
|
-
border: 1px solid #
|
|
525
|
+
background: #f4ebde;
|
|
526
|
+
border-radius: 10px;
|
|
527
|
+
border: 1px solid #e4d3bd;
|
|
340
528
|
}
|
|
341
529
|
|
|
342
530
|
.skeleton::after {
|
|
@@ -344,12 +532,12 @@ button.danger:hover {
|
|
|
344
532
|
position: absolute;
|
|
345
533
|
inset: 0;
|
|
346
534
|
transform: translateX(-100%);
|
|
347
|
-
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.
|
|
348
|
-
animation: shimmer 1.1s ease-in-out
|
|
535
|
+
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.66) 50%, rgba(255, 255, 255, 0) 100%);
|
|
536
|
+
animation: shimmer 1.1s ease-in-out 6;
|
|
349
537
|
}
|
|
350
538
|
|
|
351
539
|
.skeleton.session {
|
|
352
|
-
height:
|
|
540
|
+
height: 74px;
|
|
353
541
|
}
|
|
354
542
|
|
|
355
543
|
.skeleton.message {
|
|
@@ -359,11 +547,13 @@ button.danger:hover {
|
|
|
359
547
|
|
|
360
548
|
.main {
|
|
361
549
|
min-height: 0;
|
|
362
|
-
padding:
|
|
550
|
+
padding: 14px;
|
|
363
551
|
display: grid;
|
|
364
552
|
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
365
553
|
gap: 0;
|
|
366
|
-
|
|
554
|
+
background:
|
|
555
|
+
linear-gradient(165deg, rgba(255, 251, 243, 0.95) 0%, rgba(247, 237, 223, 0.95) 100%);
|
|
556
|
+
animation: panelIn 360ms ease 60ms both;
|
|
367
557
|
}
|
|
368
558
|
|
|
369
559
|
.header {
|
|
@@ -372,7 +562,7 @@ button.danger:hover {
|
|
|
372
562
|
align-items: flex-start;
|
|
373
563
|
gap: 12px;
|
|
374
564
|
padding: 6px 8px 12px;
|
|
375
|
-
border-bottom: 1px solid
|
|
565
|
+
border-bottom: 1px solid rgba(181, 146, 99, 0.48);
|
|
376
566
|
}
|
|
377
567
|
|
|
378
568
|
.header-main {
|
|
@@ -391,9 +581,11 @@ button.danger:hover {
|
|
|
391
581
|
|
|
392
582
|
#activeTitle {
|
|
393
583
|
margin: 0;
|
|
394
|
-
font-
|
|
584
|
+
font-family: var(--font-display);
|
|
585
|
+
font-size: 22px;
|
|
395
586
|
font-weight: 700;
|
|
396
|
-
line-height: 1.
|
|
587
|
+
line-height: 1.12;
|
|
588
|
+
letter-spacing: 0.4px;
|
|
397
589
|
word-break: break-all;
|
|
398
590
|
}
|
|
399
591
|
|
|
@@ -403,7 +595,7 @@ button.danger:hover {
|
|
|
403
595
|
}
|
|
404
596
|
|
|
405
597
|
#activeMeta {
|
|
406
|
-
margin-top:
|
|
598
|
+
margin-top: 2px;
|
|
407
599
|
font-size: 12px;
|
|
408
600
|
color: var(--muted);
|
|
409
601
|
}
|
|
@@ -420,8 +612,12 @@ button.danger:hover {
|
|
|
420
612
|
justify-content: space-between;
|
|
421
613
|
align-items: center;
|
|
422
614
|
gap: 10px;
|
|
423
|
-
margin:
|
|
424
|
-
min-height:
|
|
615
|
+
margin: 10px 8px 4px;
|
|
616
|
+
min-height: 36px;
|
|
617
|
+
padding: 8px;
|
|
618
|
+
border: 1px solid var(--line);
|
|
619
|
+
border-radius: 12px;
|
|
620
|
+
background: rgba(255, 251, 244, 0.9);
|
|
425
621
|
}
|
|
426
622
|
|
|
427
623
|
.mode-switch-left {
|
|
@@ -432,10 +628,10 @@ button.danger:hover {
|
|
|
432
628
|
}
|
|
433
629
|
|
|
434
630
|
.mode-switch button {
|
|
435
|
-
min-width:
|
|
631
|
+
min-width: 102px;
|
|
436
632
|
color: var(--text);
|
|
437
|
-
background: #
|
|
438
|
-
border-color:
|
|
633
|
+
background: #f7eee1;
|
|
634
|
+
border-color: #e0c6a5;
|
|
439
635
|
}
|
|
440
636
|
|
|
441
637
|
.mode-switch button.is-active {
|
|
@@ -465,11 +661,16 @@ body.terminal-mode .mode-terminal-controls {
|
|
|
465
661
|
#messages {
|
|
466
662
|
min-height: 0;
|
|
467
663
|
overflow-y: auto;
|
|
468
|
-
|
|
664
|
+
margin: 10px 8px 0;
|
|
665
|
+
padding: 14px;
|
|
666
|
+
border: 1px solid var(--line);
|
|
667
|
+
border-radius: 14px;
|
|
469
668
|
display: flex;
|
|
470
669
|
flex-direction: column;
|
|
471
670
|
gap: 14px;
|
|
472
671
|
scroll-behavior: smooth;
|
|
672
|
+
background:
|
|
673
|
+
linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(252, 246, 236, 0.88) 100%);
|
|
473
674
|
}
|
|
474
675
|
|
|
475
676
|
#terminalPanel {
|
|
@@ -477,7 +678,11 @@ body.terminal-mode .mode-terminal-controls {
|
|
|
477
678
|
display: none;
|
|
478
679
|
flex-direction: column;
|
|
479
680
|
gap: 8px;
|
|
480
|
-
|
|
681
|
+
margin: 10px 8px 0;
|
|
682
|
+
padding: 12px;
|
|
683
|
+
border: 1px solid var(--line);
|
|
684
|
+
border-radius: 14px;
|
|
685
|
+
background: rgba(255, 251, 245, 0.9);
|
|
481
686
|
}
|
|
482
687
|
|
|
483
688
|
.terminal-status {
|
|
@@ -491,11 +696,11 @@ body.terminal-mode .mode-terminal-controls {
|
|
|
491
696
|
flex: 1;
|
|
492
697
|
min-height: 0;
|
|
493
698
|
height: 100%;
|
|
494
|
-
border-radius:
|
|
495
|
-
border: 1px solid #
|
|
496
|
-
box-shadow: inset 0 0 0 1px rgba(
|
|
699
|
+
border-radius: 12px;
|
|
700
|
+
border: 1px solid #2a3544;
|
|
701
|
+
box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.14);
|
|
497
702
|
overflow: hidden;
|
|
498
|
-
background:
|
|
703
|
+
background: var(--terminal-bg);
|
|
499
704
|
}
|
|
500
705
|
|
|
501
706
|
#terminalScreen .xterm {
|
|
@@ -509,7 +714,7 @@ body.terminal-mode .mode-terminal-controls {
|
|
|
509
714
|
}
|
|
510
715
|
|
|
511
716
|
.terminal-foot {
|
|
512
|
-
color:
|
|
717
|
+
color: var(--muted);
|
|
513
718
|
font-size: 12px;
|
|
514
719
|
}
|
|
515
720
|
|
|
@@ -538,13 +743,13 @@ body.terminal-mode .composer {
|
|
|
538
743
|
}
|
|
539
744
|
|
|
540
745
|
.msg {
|
|
541
|
-
max-width: min(
|
|
746
|
+
max-width: min(920px, 94%);
|
|
542
747
|
width: fit-content;
|
|
543
748
|
display: flex;
|
|
544
749
|
flex-direction: column;
|
|
545
750
|
gap: 6px;
|
|
546
|
-
animation: msgIn
|
|
547
|
-
animation-delay:
|
|
751
|
+
animation: msgIn 210ms ease both;
|
|
752
|
+
animation-delay: 0ms;
|
|
548
753
|
}
|
|
549
754
|
|
|
550
755
|
.msg.user {
|
|
@@ -560,24 +765,69 @@ body.terminal-mode .composer {
|
|
|
560
765
|
color: var(--muted);
|
|
561
766
|
font-size: 12px;
|
|
562
767
|
font-weight: 600;
|
|
768
|
+
display: flex;
|
|
769
|
+
flex-direction: column;
|
|
770
|
+
gap: 2px;
|
|
771
|
+
line-height: 1.25;
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
.msg-meta-line {
|
|
775
|
+
white-space: nowrap;
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
.msg.user .msg-meta {
|
|
779
|
+
align-items: flex-end;
|
|
780
|
+
text-align: right;
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
.msg.assistant .msg-meta,
|
|
784
|
+
.msg.system .msg-meta {
|
|
785
|
+
align-items: flex-start;
|
|
786
|
+
text-align: left;
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
.msg-meta-time {
|
|
790
|
+
font-weight: 500;
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
.msg-meta-role {
|
|
794
|
+
font-weight: 700;
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
.msg-exit {
|
|
798
|
+
font-family: var(--font-mono);
|
|
799
|
+
font-size: 11px;
|
|
800
|
+
letter-spacing: 0.1px;
|
|
801
|
+
color: var(--muted);
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
.msg.user .msg-exit {
|
|
805
|
+
align-self: flex-end;
|
|
806
|
+
text-align: right;
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
.msg.assistant .msg-exit,
|
|
810
|
+
.msg.system .msg-exit {
|
|
811
|
+
align-self: flex-start;
|
|
812
|
+
text-align: left;
|
|
563
813
|
}
|
|
564
814
|
|
|
565
815
|
.bubble {
|
|
566
816
|
border: 1px solid var(--line);
|
|
567
|
-
border-radius:
|
|
817
|
+
border-radius: 10px;
|
|
568
818
|
background: var(--assistant-bubble);
|
|
569
819
|
padding: 10px 12px;
|
|
570
|
-
box-shadow: 0 8px
|
|
820
|
+
box-shadow: 0 8px 16px rgba(46, 31, 13, 0.08);
|
|
571
821
|
}
|
|
572
822
|
|
|
573
823
|
.msg.user .bubble {
|
|
574
824
|
background: var(--user-bubble);
|
|
575
|
-
border-color: #
|
|
825
|
+
border-color: #e9b994;
|
|
576
826
|
}
|
|
577
827
|
|
|
578
828
|
.msg.system .bubble {
|
|
579
829
|
background: var(--system-bubble);
|
|
580
|
-
border-color: #
|
|
830
|
+
border-color: #b8e3dd;
|
|
581
831
|
}
|
|
582
832
|
|
|
583
833
|
.msg.pending .bubble {
|
|
@@ -588,15 +838,16 @@ body.terminal-mode .composer {
|
|
|
588
838
|
margin: 0;
|
|
589
839
|
white-space: pre-wrap;
|
|
590
840
|
word-break: break-word;
|
|
591
|
-
font-family:
|
|
841
|
+
font-family: var(--font-mono);
|
|
592
842
|
font-size: 13px;
|
|
593
843
|
line-height: 1.55;
|
|
594
844
|
}
|
|
595
845
|
|
|
596
846
|
.composer {
|
|
597
|
-
border-top: 1px solid
|
|
847
|
+
border-top: 1px solid rgba(181, 146, 99, 0.45);
|
|
848
|
+
margin-top: 10px;
|
|
598
849
|
padding: 12px 8px 4px;
|
|
599
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.
|
|
850
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 249, 240, 0.78) 100%);
|
|
600
851
|
}
|
|
601
852
|
|
|
602
853
|
.composer-inner {
|
|
@@ -611,18 +862,18 @@ body.terminal-mode .composer {
|
|
|
611
862
|
min-height: 116px;
|
|
612
863
|
max-height: 300px;
|
|
613
864
|
border: 1px solid var(--line);
|
|
614
|
-
border-radius:
|
|
865
|
+
border-radius: 10px;
|
|
615
866
|
padding: 11px 12px;
|
|
616
867
|
resize: vertical;
|
|
617
868
|
background: var(--panel-strong);
|
|
618
869
|
color: var(--text);
|
|
619
|
-
font-family:
|
|
870
|
+
font-family: var(--font-mono);
|
|
620
871
|
font-size: 13px;
|
|
621
872
|
line-height: 1.5;
|
|
622
873
|
}
|
|
623
874
|
|
|
624
875
|
#sendBtn {
|
|
625
|
-
min-width:
|
|
876
|
+
min-width: 92px;
|
|
626
877
|
}
|
|
627
878
|
|
|
628
879
|
.composer-foot {
|
|
@@ -677,26 +928,6 @@ body.terminal-mode .composer {
|
|
|
677
928
|
}
|
|
678
929
|
}
|
|
679
930
|
|
|
680
|
-
@keyframes orbA {
|
|
681
|
-
0%,
|
|
682
|
-
100% {
|
|
683
|
-
transform: translate3d(0, 0, 0) scale(1);
|
|
684
|
-
}
|
|
685
|
-
50% {
|
|
686
|
-
transform: translate3d(14px, 18px, 0) scale(1.08);
|
|
687
|
-
}
|
|
688
|
-
}
|
|
689
|
-
|
|
690
|
-
@keyframes orbB {
|
|
691
|
-
0%,
|
|
692
|
-
100% {
|
|
693
|
-
transform: translate3d(0, 0, 0) scale(1);
|
|
694
|
-
}
|
|
695
|
-
50% {
|
|
696
|
-
transform: translate3d(-16px, -12px, 0) scale(1.06);
|
|
697
|
-
}
|
|
698
|
-
}
|
|
699
|
-
|
|
700
931
|
@keyframes shimmer {
|
|
701
932
|
100% {
|
|
702
933
|
transform: translateX(100%);
|
|
@@ -727,11 +958,10 @@ body.terminal-mode .composer {
|
|
|
727
958
|
left: max(10px, env(safe-area-inset-left));
|
|
728
959
|
top: max(10px, env(safe-area-inset-top));
|
|
729
960
|
bottom: max(10px, env(safe-area-inset-bottom));
|
|
730
|
-
width: min(
|
|
731
|
-
max-width:
|
|
961
|
+
width: min(86vw, 346px);
|
|
962
|
+
max-width: 346px;
|
|
732
963
|
max-height: none;
|
|
733
|
-
background: rgba(255,
|
|
734
|
-
backdrop-filter: blur(4px);
|
|
964
|
+
background: rgba(255, 252, 246, 0.98);
|
|
735
965
|
z-index: 40;
|
|
736
966
|
transform: translateX(calc(-100% - 16px));
|
|
737
967
|
opacity: 0;
|
|
@@ -758,11 +988,7 @@ body.terminal-mode .composer {
|
|
|
758
988
|
z-index: 1;
|
|
759
989
|
}
|
|
760
990
|
|
|
761
|
-
#messages
|
|
762
|
-
min-height: 0;
|
|
763
|
-
max-height: none;
|
|
764
|
-
}
|
|
765
|
-
|
|
991
|
+
#messages,
|
|
766
992
|
#terminalPanel {
|
|
767
993
|
min-height: 0;
|
|
768
994
|
}
|
|
@@ -773,23 +999,15 @@ body.terminal-mode .composer {
|
|
|
773
999
|
z-index: 3;
|
|
774
1000
|
}
|
|
775
1001
|
|
|
776
|
-
.mobile-session-toggle
|
|
1002
|
+
.mobile-session-toggle,
|
|
1003
|
+
.mobile-sidebar-close {
|
|
777
1004
|
display: inline-flex;
|
|
778
1005
|
padding: 8px 12px;
|
|
779
1006
|
font-size: 13px;
|
|
780
1007
|
}
|
|
781
1008
|
|
|
782
1009
|
.mobile-actions-toggle {
|
|
783
|
-
display:
|
|
784
|
-
padding: 8px 12px;
|
|
785
|
-
font-size: 13px;
|
|
786
|
-
}
|
|
787
|
-
|
|
788
|
-
.mobile-sidebar-close {
|
|
789
|
-
display: inline-flex;
|
|
790
|
-
flex-shrink: 0;
|
|
791
|
-
padding: 8px 12px;
|
|
792
|
-
font-size: 13px;
|
|
1010
|
+
display: none;
|
|
793
1011
|
}
|
|
794
1012
|
|
|
795
1013
|
.sidebar-backdrop {
|
|
@@ -797,28 +1015,22 @@ body.terminal-mode .composer {
|
|
|
797
1015
|
position: fixed;
|
|
798
1016
|
inset: 0;
|
|
799
1017
|
z-index: 30;
|
|
800
|
-
background:
|
|
801
|
-
backdrop-filter: none;
|
|
1018
|
+
background: rgba(23, 17, 11, 0.45);
|
|
802
1019
|
opacity: 0;
|
|
803
1020
|
pointer-events: none;
|
|
804
1021
|
transition: opacity 220ms ease;
|
|
805
1022
|
}
|
|
806
1023
|
|
|
807
1024
|
body.mobile-sessions-open .sidebar-backdrop {
|
|
808
|
-
background: rgba(9, 24, 16, 0.32);
|
|
809
|
-
backdrop-filter: blur(2px);
|
|
810
1025
|
opacity: 1;
|
|
811
1026
|
pointer-events: auto;
|
|
812
1027
|
}
|
|
813
1028
|
}
|
|
814
1029
|
|
|
815
1030
|
@media (max-width: 640px) {
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
.new-session {
|
|
821
|
-
grid-template-columns: 1fr;
|
|
1031
|
+
.sidebar-actions {
|
|
1032
|
+
width: 100%;
|
|
1033
|
+
justify-content: flex-end;
|
|
822
1034
|
}
|
|
823
1035
|
|
|
824
1036
|
.header {
|
|
@@ -826,6 +1038,10 @@ body.terminal-mode .composer {
|
|
|
826
1038
|
padding: 10px 12px 16px;
|
|
827
1039
|
}
|
|
828
1040
|
|
|
1041
|
+
#activeTitle {
|
|
1042
|
+
font-size: 20px;
|
|
1043
|
+
}
|
|
1044
|
+
|
|
829
1045
|
#activeMeta {
|
|
830
1046
|
display: none;
|
|
831
1047
|
}
|
|
@@ -839,10 +1055,9 @@ body.terminal-mode .composer {
|
|
|
839
1055
|
width: min(240px, calc(100vw - 36px));
|
|
840
1056
|
padding: 8px;
|
|
841
1057
|
border: 1px solid var(--line);
|
|
842
|
-
border-radius:
|
|
843
|
-
background:
|
|
844
|
-
box-shadow:
|
|
845
|
-
backdrop-filter: blur(10px) saturate(1.08);
|
|
1058
|
+
border-radius: 10px;
|
|
1059
|
+
background: #fffaf2;
|
|
1060
|
+
box-shadow: var(--shadow-strong);
|
|
846
1061
|
grid-template-columns: 1fr;
|
|
847
1062
|
gap: 8px;
|
|
848
1063
|
}
|
|
@@ -851,28 +1066,30 @@ body.terminal-mode .composer {
|
|
|
851
1066
|
display: grid;
|
|
852
1067
|
}
|
|
853
1068
|
|
|
854
|
-
.
|
|
855
|
-
|
|
1069
|
+
.mobile-actions-toggle {
|
|
1070
|
+
display: inline-flex;
|
|
1071
|
+
padding: 8px 12px;
|
|
1072
|
+
font-size: 13px;
|
|
856
1073
|
}
|
|
857
1074
|
|
|
858
1075
|
.mode-switch {
|
|
859
|
-
margin: 8px
|
|
1076
|
+
margin: 8px 8px 2px;
|
|
860
1077
|
overflow-x: auto;
|
|
861
|
-
padding
|
|
1078
|
+
padding: 8px;
|
|
862
1079
|
gap: 8px;
|
|
863
1080
|
}
|
|
864
1081
|
|
|
865
|
-
.mode-switch-left
|
|
1082
|
+
.mode-switch-left,
|
|
1083
|
+
.mode-terminal-controls,
|
|
1084
|
+
.mode-switch button {
|
|
866
1085
|
flex: 0 0 auto;
|
|
867
1086
|
}
|
|
868
1087
|
|
|
869
1088
|
.mode-switch button {
|
|
870
1089
|
min-width: 90px;
|
|
871
|
-
flex: 0 0 auto;
|
|
872
1090
|
}
|
|
873
1091
|
|
|
874
1092
|
.mode-terminal-controls {
|
|
875
|
-
flex: 0 0 auto;
|
|
876
1093
|
gap: 6px;
|
|
877
1094
|
}
|
|
878
1095
|
|
|
@@ -900,6 +1117,19 @@ body.terminal-mode .composer {
|
|
|
900
1117
|
.composer {
|
|
901
1118
|
padding: 8px 8px 6px;
|
|
902
1119
|
}
|
|
1120
|
+
|
|
1121
|
+
.modal-backdrop {
|
|
1122
|
+
padding: 8px;
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
.modal {
|
|
1126
|
+
width: calc(100vw - 16px);
|
|
1127
|
+
max-height: calc(100vh - 16px);
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
.form-grid {
|
|
1131
|
+
grid-template-columns: 1fr;
|
|
1132
|
+
}
|
|
903
1133
|
}
|
|
904
1134
|
|
|
905
1135
|
@media (prefers-reduced-motion: reduce) {
|