nexus-agentd 0.1.8 → 0.2.0

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 (31) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +224 -446
  3. package/dist/a2a/runtime.d.ts +5 -4
  4. package/dist/a2a/runtime.js +83 -13
  5. package/dist/acp/runtime.d.ts +3 -8
  6. package/dist/acp/runtime.js +63 -79
  7. package/dist/completion-contract.d.ts +1 -0
  8. package/dist/completion-contract.js +9 -0
  9. package/dist/config.js +1 -15
  10. package/dist/control-plane.d.ts +0 -1
  11. package/dist/control-plane.js +1 -19
  12. package/dist/run-store.d.ts +1 -1
  13. package/dist/server.js +63 -248
  14. package/dist/session-contract.d.ts +3 -2
  15. package/dist/session.d.ts +11 -2
  16. package/dist/session.js +202 -17
  17. package/dist/types.d.ts +25 -45
  18. package/dist/webui/app.js +912 -1074
  19. package/dist/webui/icons.d.ts +0 -1
  20. package/dist/webui/icons.js +0 -1
  21. package/dist/webui/index.js +10 -10
  22. package/dist/webui/markup.js +65 -66
  23. package/dist/webui/styles.js +256 -268
  24. package/nexus-agentd.example.json +40 -47
  25. package/package.json +52 -52
  26. package/dist/agent-instructions.d.ts +0 -11
  27. package/dist/agent-instructions.js +0 -44
  28. package/dist/artifact-store.d.ts +0 -41
  29. package/dist/artifact-store.js +0 -340
  30. package/dist/workspace-files.d.ts +0 -48
  31. package/dist/workspace-files.js +0 -269
package/dist/webui/styles.js CHANGED
@@ -1,269 +1,257 @@
1
- export const styles = String.raw `
2
- :root {
3
- color-scheme: light;
4
- --bg: #f7f7f8;
5
- --surface: #ffffff;
6
- --surface-subtle: #f1f1f3;
7
- --surface-hover: #ebebee;
8
- --text: #17171a;
9
- --text-muted: #696970;
10
- --text-faint: #929299;
11
- --border: #ddddE2;
12
- --border-strong: #c7c7cd;
13
- --accent: #6d5dfc;
14
- --accent-soft: #eeeafe;
15
- --accent-text: #ffffff;
16
- --success: #18864b;
17
- --success-soft: #e8f5ed;
18
- --danger: #c93636;
19
- --danger-soft: #fceaea;
20
- --focus: #6d5dfc;
21
- --overlay: rgba(18, 18, 20, .42);
22
- --radius: 8px;
23
- --radius-small: 6px;
24
- --sidebar-width: 232px;
25
- }
26
-
27
- html[data-theme="dark"] {
28
- color-scheme: dark;
29
- --bg: #111113;
30
- --surface: #19191c;
31
- --surface-subtle: #222226;
32
- --surface-hover: #29292e;
33
- --text: #f3f3f4;
34
- --text-muted: #a3a3aa;
35
- --text-faint: #777780;
36
- --border: #303036;
37
- --border-strong: #44444c;
38
- --accent: #8b7cff;
39
- --accent-soft: #292447;
40
- --accent-text: #ffffff;
41
- --success: #48bd79;
42
- --success-soft: #173525;
43
- --danger: #f06a6a;
44
- --danger-soft: #402020;
45
- --focus: #8b7cff;
46
- --overlay: rgba(0, 0, 0, .62);
47
- }
48
-
49
- * { box-sizing: border-box; }
50
- html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: "Noto Sans SC", "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", ui-sans-serif, sans-serif; }
51
- body { font-size: 14px; line-height: 1.45; }
52
- button, input, select, textarea { font: inherit; }
53
- button { color: inherit; }
54
- .hidden { display: none !important; }
55
-
56
- .auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
57
- .auth-card { width: min(400px, 100%); padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
58
- .auth-card h1 { margin: 18px 0 6px; font-size: 22px; letter-spacing: -.02em; }
59
- .auth-card p { color: var(--text-muted); margin: 0 0 22px; }
60
- .brand-mark { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--text); color: var(--surface); font-weight: 750; font-size: 18px; }
61
- .brand-mark.small { width: 28px; height: 28px; border-radius: 7px; font-size: 14px; }
62
-
63
- label { display: grid; gap: 7px; margin-bottom: 16px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
64
- input, select, textarea { width: 100%; min-height: 38px; padding: 8px 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-small); outline: none; }
65
- textarea { min-height: 90px; resize: vertical; }
66
- input:focus, select:focus, textarea:focus, button:focus-visible { border-color: var(--focus); outline: 2px solid var(--accent-soft); outline-offset: 1px; }
67
- .form-error { min-height: 20px; margin: 12px 0 0 !important; color: var(--danger) !important; }
68
-
69
- .app-shell { min-height: 100vh; }
70
- .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); padding: 16px 12px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 10; }
71
- .brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px; font-weight: 700; letter-spacing: -.01em; }
72
- nav { display: grid; gap: 3px; margin-top: 18px; }
73
- .nav-item, .admin-button, .menu-button { border: 0; background: transparent; cursor: pointer; }
74
- .nav-item { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--radius-small); color: var(--text-muted); text-align: left; }
75
- .nav-item:hover { background: var(--surface-subtle); color: var(--text); }
76
- .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
77
- .nav-item svg, .admin-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
78
- .admin-menu-wrap { position: relative; margin-top: auto; }
79
- .admin-button { width: 100%; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: var(--radius); text-align: left; }
80
- .admin-button:hover { background: var(--surface-subtle); }
81
- .admin-button span { display: grid; min-width: 0; }
82
- .admin-button strong { font-size: 13px; }
83
- .admin-button small { color: var(--text-muted); }
84
- .admin-popover { position: absolute; inset: auto 0 calc(100% + 8px); padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
85
- .admin-popover label { margin: 0 0 8px; }
86
- .menu-button { width: 100%; padding: 9px 8px; border-radius: var(--radius-small); text-align: left; }
87
- .menu-button:hover { background: var(--surface-subtle); }
88
- .danger-text { color: var(--danger); }
89
-
90
- .main { margin-left: var(--sidebar-width); min-height: 100vh; padding: 32px clamp(24px, 5vw, 68px) 64px; }
91
- .page-header { min-height: 66px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
92
- .page-header h1 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
93
- .page-header p { margin: 5px 0 0; color: var(--text-muted); }
94
- .page-actions { display: flex; gap: 8px; align-items: center; }
95
- .page-content { max-width: 1180px; }
96
- .button, .icon-button { min-height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-small); background: var(--surface); cursor: pointer; font-weight: 600; }
97
- .button { padding: 0 13px; }
98
- .button:hover, .icon-button:hover { background: var(--surface-hover); }
99
- .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
100
- .button.primary:hover { background: var(--accent); }
101
- .button.danger { border-color: var(--danger); color: var(--danger); }
102
- .button.ghost { border-color: transparent; background: transparent; }
103
- .button.small { min-height: 30px; padding: 0 9px; font-size: 12px; }
104
- .icon-button { width: 36px; padding: 0; font-size: 22px; }
105
-
106
- .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
107
- .stat, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
108
- .stat { padding: 16px; }
109
- .stat span { display: block; color: var(--text-muted); font-size: 12px; font-weight: 650; }
110
- .stat strong { display: block; margin-top: 7px; font-size: 25px; letter-spacing: -.03em; }
111
- .panel-header { min-height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
112
- .panel-header h2 { margin: 0; font-size: 14px; }
113
- .panel-body { padding: 16px; }
114
- .empty { padding: 36px 18px; color: var(--text-muted); text-align: center; }
115
-
116
- .toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
117
- .toolbar input { max-width: 300px; }
118
- .toolbar select { width: 150px; }
119
- .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
120
- table { width: 100%; border-collapse: collapse; min-width: 760px; }
121
- th, td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
122
- th { color: var(--text-muted); background: var(--surface-subtle); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
123
- tr:last-child td { border-bottom: 0; }
124
- .agent-name { display: grid; gap: 2px; }
125
- .agent-name strong { font-size: 13px; }
126
- .agent-name small, .muted { color: var(--text-muted); }
127
- .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; }
128
- .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
129
- .status.ready { color: var(--success); }
130
- .status.ready::before { background: var(--success); }
131
- .status.checking { color: var(--text-muted); }
132
- .status.checking::before { background: var(--text-faint); }
133
- .status.failed { color: var(--danger); }
134
- .status.failed::before { background: var(--danger); }
135
- .status.running { color: #1d68b3; }
136
- .status.running::before { background: #2b7ecb; box-shadow: 0 0 0 3px rgba(43, 126, 203, .13); }
137
- .status.waiting { color: #9a6500; }
138
- .status.waiting::before { background: #d49313; }
139
- .status.completed { color: var(--success); }
140
- .status.completed::before { background: var(--success); }
141
- .status.canceled { color: var(--text-muted); }
142
- .badge { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: var(--surface-subtle); color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
143
- .row-actions { display: flex; justify-content: flex-end; gap: 5px; }
144
- .error-detail { max-width: 280px; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }
145
-
146
- .run-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--border); }
147
- .run-summary-item { min-height: 74px; padding: 13px 15px; background: var(--surface); }
148
- .run-summary-item span { display: block; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
149
- .run-summary-item strong { display: block; margin-top: 5px; font: 700 22px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
150
- .run-section { margin-top: 18px; }
151
- .run-section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 9px; }
152
- .run-section-title h2 { margin: 0; font-size: 14px; }
153
- .run-section-title span { color: var(--text-muted); font-size: 12px; }
154
- .run-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
155
- .run-card { position: relative; min-height: 148px; padding: 14px 15px; border: 1px solid var(--border); border-left: 3px solid #2b7ecb; border-radius: var(--radius); background: var(--surface); cursor: pointer; }
156
- .run-card:hover { border-color: var(--border-strong); border-left-color: var(--accent); }
157
- .run-card.waiting { border-left-color: #d49313; }
158
- .run-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
159
- .run-card-agent { display: flex; align-items: center; gap: 8px; min-width: 0; }
160
- .run-card-agent strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
161
- .run-task { margin: 13px 0 15px; display: -webkit-box; overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-wrap; }
162
- .run-progress { display: grid; gap: 3px; }
163
- .run-progress strong { font-size: 12px; }
164
- .run-progress small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
165
- .run-meta { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
166
- .run-table { min-width: 940px; }
167
- .run-table tbody tr { cursor: pointer; }
168
- .run-table tbody tr:hover td { background: var(--surface-hover); }
169
- .run-table .run-task-cell { max-width: 360px; }
170
- .run-table .run-task-cell strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
171
- .run-table .run-task-cell small { display: block; margin-top: 3px; color: var(--text-muted); }
172
- .run-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
173
- .run-detail-item { padding: 11px 12px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
174
- .run-detail-item:nth-child(odd) { border-right: 1px solid var(--border); }
175
- .run-detail-item span { display: block; color: var(--text-muted); font-size: 11px; }
176
- .run-detail-item strong { display: block; margin-top: 4px; font-size: 13px; overflow-wrap: anywhere; }
177
- .run-detail-block { margin: 0 0 16px; }
178
- .run-detail-block h3 { margin: 0 0 7px; color: var(--text-muted); font-size: 11px; letter-spacing: .05em; }
179
- .run-detail-code { margin: 0; padding: 12px; max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); color: var(--text); font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
180
- .run-id { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
181
-
182
- .key-table { min-width: 900px; }
183
- .key-table th:nth-child(1) { width: 21%; }
184
- .key-table th:nth-child(2) { width: 12%; }
185
- .key-table th:nth-child(3) { width: 18%; }
186
- .key-table th:nth-child(4) { width: 17%; }
187
- .key-table th:nth-child(5) { width: 19%; }
188
- .key-table td { height: 66px; }
189
- .key-actions-heading { text-align: right; }
190
- .key-secret-cell { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
191
- .key-secret-cell code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text-muted); letter-spacing: .02em; }
192
- .key-copy-button, .key-icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--text-muted); cursor: pointer; }
193
- .key-copy-button { width: 28px; height: 28px; }
194
- .key-copy-button:hover, .key-icon-button:hover, .key-icon-button[aria-expanded="true"] { color: var(--text); background: var(--surface-hover); }
195
- .key-copy-button svg, .key-icon-button svg, .key-action-menu svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
196
- .key-icon-button.danger-action { color: var(--danger); }
197
- .key-icon-button.danger-action:hover { background: var(--danger-soft); }
198
- .key-scope, .key-last-used { color: var(--text-muted); font-size: 13px; }
199
- .key-actions-cell { text-align: right; }
200
- .key-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; }
201
- .key-action-menu { position: fixed; z-index: 45; width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
202
- .key-action-menu button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--text); cursor: pointer; text-align: left; font-size: 13px; }
203
- .key-action-menu button:hover { background: var(--surface-hover); }
204
- .key-action-menu button.danger-text { color: var(--danger); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-small) var(--radius-small); margin-top: 4px; padding-top: 4px; min-height: 42px; }
205
- .key-action-menu button.danger-text:hover { background: var(--danger-soft); }
206
-
207
- .workspace-list, .key-list, .overview-list { display: grid; gap: 8px; }
208
- .list-row { min-height: 58px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
209
- .list-row-main { min-width: 0; display: grid; gap: 3px; }
210
- .list-row-main strong, .path { overflow-wrap: anywhere; }
211
- .list-row-main small { color: var(--text-muted); }
212
- .tip { margin-top: 14px; padding: 12px; background: var(--surface-subtle); border-radius: var(--radius-small); color: var(--text-muted); font-size: 12px; }
213
- .file-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
214
- .file-toolbar select { min-width: 280px; max-width: 520px; }
215
- .file-current-path { min-width: 0; overflow-wrap: anywhere; color: var(--text-muted); }
216
- .file-table td:first-child { min-width: 260px; }
217
- .file-name-button { border: 0; background: none; color: var(--text); padding: 0; cursor: pointer; font: inherit; display: inline-flex; gap: 8px; align-items: center; }
218
- .file-name-button:hover span { text-decoration: underline; }
219
- .file-name { display: inline-flex; gap: 8px; align-items: center; }
220
- .published-files { display: grid; gap: 12px; }
221
- .published-file { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-small); }
222
- .published-file a { overflow-wrap: anywhere; }
223
-
224
- .drawer-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 30; }
225
- .drawer { position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); background: var(--surface); border-left: 1px solid var(--border); z-index: 31; display: flex; flex-direction: column; }
226
- .drawer-header { min-height: 64px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
227
- .drawer-header h2 { margin: 0; font-size: 17px; }
228
- .drawer-body { padding: 20px; overflow-y: auto; }
229
- .drawer-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; }
230
- .field-help { margin-top: -2px; color: var(--text-muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
231
- .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
232
- .settings-layout { display: grid; grid-template-columns: minmax(0, 760px); }
233
- .settings-form { overflow: hidden; }
234
- .settings-form .panel-header { align-items: flex-start; padding-top: 16px; padding-bottom: 14px; }
235
- .settings-form .panel-header h2 { font-size: 16px; }
236
- .settings-subtitle { margin: 5px 0 0; color: var(--text-muted); font-size: 12px; }
237
- .settings-fields { display: grid; gap: 18px; padding: 20px 16px 4px; }
238
- .settings-fields label { gap: 7px; }
239
- .settings-fields input { max-width: 260px; }
240
- .settings-divider { height: 1px; margin: 18px 16px 0; background: var(--border); }
241
- .settings-note { display: grid; gap: 4px; margin: 16px; padding: 12px; border-radius: var(--radius-small); background: var(--surface-subtle); color: var(--text-muted); font-size: 12px; line-height: 1.5; }
242
- .settings-note strong { color: var(--text); font-size: 13px; }
243
- .settings-actions { display: flex; justify-content: flex-end; padding: 0 16px 16px; }
244
- .checkbox { display: flex; align-items: center; gap: 8px; min-height: 34px; }
245
- .checkbox input { width: 16px; min-height: 16px; }
246
- .agent-scope { max-height: 170px; overflow: auto; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-small); }
247
- .secret-box { margin: 12px 0; padding: 12px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius); }
248
- .secret-value { display: block; margin: 8px 0 10px; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
249
-
250
- .toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: grid; gap: 8px; }
251
- .toast { max-width: 380px; padding: 11px 13px; background: var(--text); color: var(--surface); border-radius: var(--radius-small); }
252
- .toast.error { background: var(--danger); color: var(--accent-text); }
253
-
254
- @media (max-width: 760px) {
255
- :root { --sidebar-width: 72px; }
256
- .brand span:last-child, .nav-item span, .admin-button span { display: none; }
257
- .brand { justify-content: center; }
258
- .nav-item, .admin-button { justify-content: center; }
259
- .main { padding: 24px 16px 48px; }
260
- .stats { grid-template-columns: 1fr; }
261
- .run-summary, .run-live-grid { grid-template-columns: 1fr; }
262
- .page-header { align-items: flex-start; }
263
- .toolbar { align-items: stretch; flex-direction: column; }
264
- .toolbar input, .toolbar select { max-width: none; width: 100%; }
265
- .file-toolbar { align-items: stretch; flex-direction: column; }
266
- .file-toolbar select { min-width: 0; max-width: none; width: 100%; }
267
- .admin-popover { left: 0; right: auto; width: 190px; }
268
- }
1
+ export const styles = String.raw `
2
+ :root {
3
+ color-scheme: light;
4
+ --bg: #f7f7f8;
5
+ --surface: #ffffff;
6
+ --surface-subtle: #f1f1f3;
7
+ --surface-hover: #ebebee;
8
+ --text: #17171a;
9
+ --text-muted: #696970;
10
+ --text-faint: #929299;
11
+ --border: #ddddE2;
12
+ --border-strong: #c7c7cd;
13
+ --accent: #6d5dfc;
14
+ --accent-soft: #eeeafe;
15
+ --accent-text: #ffffff;
16
+ --success: #18864b;
17
+ --success-soft: #e8f5ed;
18
+ --danger: #c93636;
19
+ --danger-soft: #fceaea;
20
+ --focus: #6d5dfc;
21
+ --overlay: rgba(18, 18, 20, .42);
22
+ --radius: 8px;
23
+ --radius-small: 6px;
24
+ --sidebar-width: 232px;
25
+ }
26
+
27
+ html[data-theme="dark"] {
28
+ color-scheme: dark;
29
+ --bg: #111113;
30
+ --surface: #19191c;
31
+ --surface-subtle: #222226;
32
+ --surface-hover: #29292e;
33
+ --text: #f3f3f4;
34
+ --text-muted: #a3a3aa;
35
+ --text-faint: #777780;
36
+ --border: #303036;
37
+ --border-strong: #44444c;
38
+ --accent: #8b7cff;
39
+ --accent-soft: #292447;
40
+ --accent-text: #ffffff;
41
+ --success: #48bd79;
42
+ --success-soft: #173525;
43
+ --danger: #f06a6a;
44
+ --danger-soft: #402020;
45
+ --focus: #8b7cff;
46
+ --overlay: rgba(0, 0, 0, .62);
47
+ }
48
+
49
+ * { box-sizing: border-box; }
50
+ html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: "Noto Sans SC", "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", ui-sans-serif, sans-serif; }
51
+ body { font-size: 14px; line-height: 1.45; }
52
+ button, input, select, textarea { font: inherit; }
53
+ button { color: inherit; }
54
+ .hidden { display: none !important; }
55
+
56
+ .auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
57
+ .auth-card { width: min(400px, 100%); padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
58
+ .auth-card h1 { margin: 18px 0 6px; font-size: 22px; letter-spacing: -.02em; }
59
+ .auth-card p { color: var(--text-muted); margin: 0 0 22px; }
60
+ .brand-mark { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--text); color: var(--surface); font-weight: 750; font-size: 18px; }
61
+ .brand-mark.small { width: 28px; height: 28px; border-radius: 7px; font-size: 14px; }
62
+
63
+ label { display: grid; gap: 7px; margin-bottom: 16px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
64
+ input, select, textarea { width: 100%; min-height: 38px; padding: 8px 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-small); outline: none; }
65
+ textarea { min-height: 90px; resize: vertical; }
66
+ input:focus, select:focus, textarea:focus, button:focus-visible { border-color: var(--focus); outline: 2px solid var(--accent-soft); outline-offset: 1px; }
67
+ .form-error { min-height: 20px; margin: 12px 0 0 !important; color: var(--danger) !important; }
68
+
69
+ .app-shell { min-height: 100vh; }
70
+ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); padding: 16px 12px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 10; }
71
+ .brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px; font-weight: 700; letter-spacing: -.01em; }
72
+ nav { display: grid; gap: 3px; margin-top: 18px; }
73
+ .nav-item, .admin-button, .menu-button { border: 0; background: transparent; cursor: pointer; }
74
+ .nav-item { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--radius-small); color: var(--text-muted); text-align: left; }
75
+ .nav-item:hover { background: var(--surface-subtle); color: var(--text); }
76
+ .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
77
+ .nav-item svg, .admin-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
78
+ .admin-menu-wrap { position: relative; margin-top: auto; }
79
+ .admin-button { width: 100%; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: var(--radius); text-align: left; }
80
+ .admin-button:hover { background: var(--surface-subtle); }
81
+ .admin-button span { display: grid; min-width: 0; }
82
+ .admin-button strong { font-size: 13px; }
83
+ .admin-button small { color: var(--text-muted); }
84
+ .admin-popover { position: absolute; inset: auto 0 calc(100% + 8px); padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
85
+ .admin-popover label { margin: 0 0 8px; }
86
+ .menu-button { width: 100%; padding: 9px 8px; border-radius: var(--radius-small); text-align: left; }
87
+ .menu-button:hover { background: var(--surface-subtle); }
88
+ .danger-text { color: var(--danger); }
89
+
90
+ .main { margin-left: var(--sidebar-width); min-height: 100vh; padding: 32px clamp(24px, 5vw, 68px) 64px; }
91
+ .page-header { min-height: 66px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
92
+ .page-header h1 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
93
+ .page-header p { margin: 5px 0 0; color: var(--text-muted); }
94
+ .page-actions { display: flex; gap: 8px; align-items: center; }
95
+ .page-content { max-width: 1180px; }
96
+ .button, .icon-button { min-height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-small); background: var(--surface); cursor: pointer; font-weight: 600; }
97
+ .button { padding: 0 13px; }
98
+ .button:hover, .icon-button:hover { background: var(--surface-hover); }
99
+ .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
100
+ .button.primary:hover { background: var(--accent); }
101
+ .button.danger { border-color: var(--danger); color: var(--danger); }
102
+ .button.ghost { border-color: transparent; background: transparent; }
103
+ .button.small { min-height: 30px; padding: 0 9px; font-size: 12px; }
104
+ .icon-button { width: 36px; padding: 0; font-size: 22px; }
105
+
106
+ .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
107
+ .stat, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
108
+ .stat { padding: 16px; }
109
+ .stat span { display: block; color: var(--text-muted); font-size: 12px; font-weight: 650; }
110
+ .stat strong { display: block; margin-top: 7px; font-size: 25px; letter-spacing: -.03em; }
111
+ .panel-header { min-height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
112
+ .panel-header h2 { margin: 0; font-size: 14px; }
113
+ .panel-body { padding: 16px; }
114
+ .empty { padding: 36px 18px; color: var(--text-muted); text-align: center; }
115
+
116
+ .toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
117
+ .toolbar input { max-width: 300px; }
118
+ .toolbar select { width: 150px; }
119
+ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
120
+ table { width: 100%; border-collapse: collapse; min-width: 760px; }
121
+ th, td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
122
+ th { color: var(--text-muted); background: var(--surface-subtle); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
123
+ tr:last-child td { border-bottom: 0; }
124
+ .agent-name { display: grid; gap: 2px; }
125
+ .agent-name strong { font-size: 13px; }
126
+ .agent-name small, .muted { color: var(--text-muted); }
127
+ .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; }
128
+ .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
129
+ .status.ready { color: var(--success); }
130
+ .status.ready::before { background: var(--success); }
131
+ .status.checking { color: var(--text-muted); }
132
+ .status.checking::before { background: var(--text-faint); }
133
+ .status.failed { color: var(--danger); }
134
+ .status.failed::before { background: var(--danger); }
135
+ .status.running { color: #1d68b3; }
136
+ .status.running::before { background: #2b7ecb; box-shadow: 0 0 0 3px rgba(43, 126, 203, .13); }
137
+ .status.waiting { color: #9a6500; }
138
+ .status.waiting::before { background: #d49313; }
139
+ .status.completed { color: var(--success); }
140
+ .status.completed::before { background: var(--success); }
141
+ .status.canceled { color: var(--text-muted); }
142
+ .badge { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: var(--surface-subtle); color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
143
+ .row-actions { display: flex; justify-content: flex-end; gap: 5px; }
144
+ .error-detail { max-width: 280px; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }
145
+
146
+ .run-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--border); }
147
+ .run-summary-item { min-height: 74px; padding: 13px 15px; background: var(--surface); }
148
+ .run-summary-item span { display: block; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
149
+ .run-summary-item strong { display: block; margin-top: 5px; font: 700 22px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
150
+ .run-section { margin-top: 18px; }
151
+ .run-section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 9px; }
152
+ .run-section-title h2 { margin: 0; font-size: 14px; }
153
+ .run-section-title span { color: var(--text-muted); font-size: 12px; }
154
+ .run-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
155
+ .run-card { position: relative; min-height: 148px; padding: 14px 15px; border: 1px solid var(--border); border-left: 3px solid #2b7ecb; border-radius: var(--radius); background: var(--surface); cursor: pointer; }
156
+ .run-card:hover { border-color: var(--border-strong); border-left-color: var(--accent); }
157
+ .run-card.waiting { border-left-color: #d49313; }
158
+ .run-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
159
+ .run-card-agent { display: flex; align-items: center; gap: 8px; min-width: 0; }
160
+ .run-card-agent strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
161
+ .run-task { margin: 13px 0 15px; display: -webkit-box; overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-wrap; }
162
+ .run-progress { display: grid; gap: 3px; }
163
+ .run-progress strong { font-size: 12px; }
164
+ .run-progress small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
165
+ .run-meta { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
166
+ .run-table { min-width: 940px; }
167
+ .run-table tbody tr { cursor: pointer; }
168
+ .run-table tbody tr:hover td { background: var(--surface-hover); }
169
+ .run-table .run-task-cell { max-width: 360px; }
170
+ .run-table .run-task-cell strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
171
+ .run-table .run-task-cell small { display: block; margin-top: 3px; color: var(--text-muted); }
172
+ .run-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
173
+ .run-detail-item { padding: 11px 12px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
174
+ .run-detail-item:nth-child(odd) { border-right: 1px solid var(--border); }
175
+ .run-detail-item span { display: block; color: var(--text-muted); font-size: 11px; }
176
+ .run-detail-item strong { display: block; margin-top: 4px; font-size: 13px; overflow-wrap: anywhere; }
177
+ .run-detail-block { margin: 0 0 16px; }
178
+ .run-detail-block h3 { margin: 0 0 7px; color: var(--text-muted); font-size: 11px; letter-spacing: .05em; }
179
+ .run-detail-code { margin: 0; padding: 12px; max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); color: var(--text); font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
180
+ .run-id { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
181
+
182
+ .key-table { min-width: 900px; }
183
+ .key-table th:nth-child(1) { width: 21%; }
184
+ .key-table th:nth-child(2) { width: 12%; }
185
+ .key-table th:nth-child(3) { width: 18%; }
186
+ .key-table th:nth-child(4) { width: 17%; }
187
+ .key-table th:nth-child(5) { width: 19%; }
188
+ .key-table td { height: 66px; }
189
+ .key-actions-heading { text-align: right; }
190
+ .key-secret-cell { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
191
+ .key-secret-cell code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text-muted); letter-spacing: .02em; }
192
+ .key-copy-button, .key-icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--text-muted); cursor: pointer; }
193
+ .key-copy-button { width: 28px; height: 28px; }
194
+ .key-copy-button:hover, .key-icon-button:hover, .key-icon-button[aria-expanded="true"] { color: var(--text); background: var(--surface-hover); }
195
+ .key-copy-button svg, .key-icon-button svg, .key-action-menu svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
196
+ .key-icon-button.danger-action { color: var(--danger); }
197
+ .key-icon-button.danger-action:hover { background: var(--danger-soft); }
198
+ .key-scope, .key-last-used { color: var(--text-muted); font-size: 13px; }
199
+ .key-actions-cell { text-align: right; }
200
+ .key-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; }
201
+ .key-action-menu { position: fixed; z-index: 45; width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
202
+ .key-action-menu button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--text); cursor: pointer; text-align: left; font-size: 13px; }
203
+ .key-action-menu button:hover { background: var(--surface-hover); }
204
+ .key-action-menu button.danger-text { color: var(--danger); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-small) var(--radius-small); margin-top: 4px; padding-top: 4px; min-height: 42px; }
205
+ .key-action-menu button.danger-text:hover { background: var(--danger-soft); }
206
+
207
+ .workspace-list, .key-list, .overview-list { display: grid; gap: 8px; }
208
+ .list-row { min-height: 58px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
209
+ .list-row-main { min-width: 0; display: grid; gap: 3px; }
210
+ .list-row-main strong, .path { overflow-wrap: anywhere; }
211
+ .list-row-main small { color: var(--text-muted); }
212
+ .tip { margin-top: 14px; padding: 12px; background: var(--surface-subtle); border-radius: var(--radius-small); color: var(--text-muted); font-size: 12px; }
213
+
214
+ .drawer-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 30; }
215
+ .drawer { position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); background: var(--surface); border-left: 1px solid var(--border); z-index: 31; display: flex; flex-direction: column; }
216
+ .drawer-header { min-height: 64px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
217
+ .drawer-header h2 { margin: 0; font-size: 17px; }
218
+ .drawer-body { padding: 20px; overflow-y: auto; }
219
+ .drawer-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; }
220
+ .field-help { margin-top: -2px; color: var(--text-muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
221
+ .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
222
+ .settings-layout { display: grid; grid-template-columns: minmax(0, 760px); }
223
+ .settings-form { overflow: hidden; }
224
+ .settings-form .panel-header { align-items: flex-start; padding-top: 16px; padding-bottom: 14px; }
225
+ .settings-form .panel-header h2 { font-size: 16px; }
226
+ .settings-subtitle { margin: 5px 0 0; color: var(--text-muted); font-size: 12px; }
227
+ .settings-fields { display: grid; gap: 18px; padding: 20px 16px 4px; }
228
+ .settings-fields label { gap: 7px; }
229
+ .settings-fields input { max-width: 260px; }
230
+ .settings-divider { height: 1px; margin: 18px 16px 0; background: var(--border); }
231
+ .settings-note { display: grid; gap: 4px; margin: 16px; padding: 12px; border-radius: var(--radius-small); background: var(--surface-subtle); color: var(--text-muted); font-size: 12px; line-height: 1.5; }
232
+ .settings-note strong { color: var(--text); font-size: 13px; }
233
+ .settings-actions { display: flex; justify-content: flex-end; padding: 0 16px 16px; }
234
+ .checkbox { display: flex; align-items: center; gap: 8px; min-height: 34px; }
235
+ .checkbox input { width: 16px; min-height: 16px; }
236
+ .agent-scope { max-height: 170px; overflow: auto; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-small); }
237
+ .secret-box { margin: 12px 0; padding: 12px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius); }
238
+ .secret-value { display: block; margin: 8px 0 10px; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
239
+
240
+ .toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: grid; gap: 8px; }
241
+ .toast { max-width: 380px; padding: 11px 13px; background: var(--text); color: var(--surface); border-radius: var(--radius-small); }
242
+ .toast.error { background: var(--danger); color: var(--accent-text); }
243
+
244
+ @media (max-width: 760px) {
245
+ :root { --sidebar-width: 72px; }
246
+ .brand span:last-child, .nav-item span, .admin-button span { display: none; }
247
+ .brand { justify-content: center; }
248
+ .nav-item, .admin-button { justify-content: center; }
249
+ .main { padding: 24px 16px 48px; }
250
+ .stats { grid-template-columns: 1fr; }
251
+ .run-summary, .run-live-grid { grid-template-columns: 1fr; }
252
+ .page-header { align-items: flex-start; }
253
+ .toolbar { align-items: stretch; flex-direction: column; }
254
+ .toolbar input, .toolbar select { max-width: none; width: 100%; }
255
+ .admin-popover { left: 0; right: auto; width: 190px; }
256
+ }
269
257
  `;