gabriel / musehub public
_agents.scss
275 lines 8.5 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Page: Agent Coordination Hub (.agents-* layout)
3 // File: src/scss/pages/_agents.scss
4 //
5 // STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
6 // Visual rules live in components/_agents.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 .agents-wrap {
10 max-width: 1000px;
11 margin: 0 auto;
12 padding: 0 var(--space-4);
13 }
14
15 // ── Page header ───────────────────────────────────────────────────────────────
16
17 .agents-hd {
18 display: flex;
19 align-items: baseline;
20 gap: var(--space-3);
21 padding: var(--space-5) 0 var(--space-4);
22 margin-bottom: var(--space-5);
23 }
24
25 .agents-hd-title {
26 display: flex;
27 align-items: center;
28 gap: var(--space-2);
29 }
30
31 .agents-hd-live {
32 margin-left: auto;
33 display: flex;
34 align-items: center;
35 gap: var(--space-2);
36 }
37
38 // ── Sub-navigation ────────────────────────────────────────────────────────────
39
40 .agents-subnav {
41 display: flex;
42 gap: var(--space-2);
43 margin-bottom: var(--space-5);
44 flex-wrap: wrap;
45 }
46
47 .agents-subnav-link {
48 display: inline-flex;
49 align-items: center;
50 gap: var(--space-1);
51 padding: var(--space-1) var(--space-3);
52 }
53
54 // ── Two-column grid ───────────────────────────────────────────────────────────
55
56 .agents-grid {
57 display: grid;
58 grid-template-columns: 240px 1fr;
59 gap: var(--space-4);
60 margin-bottom: var(--space-5);
61
62 @media (max-width: 640px) { grid-template-columns: 1fr; }
63 }
64
65 // ── Cards / panels ────────────────────────────────────────────────────────────
66
67 .agents-card { padding: var(--space-4); }
68
69 .agents-card-title { margin-bottom: var(--space-3); }
70
71 // ── Active agent list ─────────────────────────────────────────────────────────
72
73 .agents-active-count { margin-bottom: var(--space-3); }
74
75 .agents-agent-list {
76 list-style: none;
77 padding: 0;
78 margin: 0;
79 display: flex;
80 flex-direction: column;
81 gap: var(--space-2);
82 }
83
84 // ── Task queue bar chart ──────────────────────────────────────────────────────
85
86 .agents-queue {
87 display: flex;
88 flex-direction: column;
89 gap: var(--space-2);
90 }
91
92 .agents-queue-row {
93 display: grid;
94 grid-template-columns: 68px 1fr 28px;
95 align-items: center;
96 gap: var(--space-2);
97 }
98
99 // ── Reservations table ────────────────────────────────────────────────────────
100
101 .agents-reservations { margin-bottom: var(--space-5); }
102
103 .agents-reservations-hd {
104 display: flex;
105 align-items: baseline;
106 justify-content: space-between;
107 margin-bottom: var(--space-3);
108 }
109
110 .agents-table {
111 th { padding: var(--space-1) var(--space-2); }
112 td { padding: var(--space-2); }
113 }
114
115 .agents-agent-chip { padding: 1px var(--space-2); }
116
117 // ── Event stream ──────────────────────────────────────────────────────────────
118
119 .agents-stream { margin-bottom: var(--space-5); }
120
121 .agents-stream-hd {
122 display: flex;
123 align-items: center;
124 justify-content: space-between;
125 padding: var(--space-2) var(--space-3);
126 }
127
128 .agents-stream-body {
129 padding: var(--space-2) 0;
130 min-height: 120px;
131 max-height: 320px;
132 overflow-y: auto;
133 }
134
135 .agents-stream-row {
136 display: grid;
137 grid-template-columns: 10px 90px 1fr;
138 align-items: center;
139 gap: var(--space-2);
140 padding: 3px var(--space-3);
141 }
142
143 // ── Shard map ─────────────────────────────────────────────────────────────────
144
145 .agents-shard-meta { margin-bottom: var(--space-4); }
146
147 .agents-shard-grid {
148 display: grid;
149 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
150 gap: var(--space-3);
151 margin-bottom: var(--space-5);
152 }
153
154 .agents-shard-card { padding: var(--space-3); }
155
156 .agents-shard-num { margin-bottom: var(--space-2); }
157 .agents-shard-symbols { margin-bottom: 2px; }
158 .agents-shard-detail { margin-bottom: var(--space-3); }
159 .agents-shard-assigned,
160 .agents-shard-unassigned { margin-bottom: var(--space-2); }
161
162 // ── Empty state ───────────────────────────────────────────────────────────────
163
164 .agents-empty {
165 padding: var(--space-8) var(--space-4);
166 text-align: center;
167 }
168
169 .agents-empty-icon { display: block; margin: 0 auto var(--space-3); }
170 .agents-empty-hint { margin-top: var(--space-2); }
171
172 // ── Forecast ──────────────────────────────────────────────────────────────────
173
174 .agents-forecast-section { margin-bottom: var(--space-5); }
175
176 .agents-forecast-title {
177 margin-bottom: var(--space-3);
178 padding-bottom: var(--space-2);
179 }
180
181 .agents-conflict-ok {
182 display: flex;
183 align-items: center;
184 gap: var(--space-2);
185 padding: var(--space-3) var(--space-4);
186 }
187
188 .agents-conflict-list {
189 display: flex;
190 flex-direction: column;
191 gap: var(--space-3);
192 }
193
194 .agents-conflict-item { padding: var(--space-3) var(--space-4); }
195
196 .agents-conflict-addr { margin-bottom: var(--space-2); }
197
198 .agents-conflict-agents {
199 display: flex;
200 flex-wrap: wrap;
201 gap: var(--space-2);
202 }
203
204 .agents-blast-list {
205 display: flex;
206 flex-direction: column;
207 gap: var(--space-2);
208 }
209
210 .agents-blast-item {
211 display: flex;
212 align-items: center;
213 gap: var(--space-2);
214 font-size: 0.8rem;
215 }
216
217 .agents-blast-addr { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
218 .agents-blast-reserved { padding: 1px 5px; }
219
220 // ── Agent profile page ────────────────────────────────────────────────────────
221
222 .agents-profile-hd { margin-bottom: var(--space-5); }
223
224 .agents-profile-name { margin-bottom: var(--space-2); }
225
226 .agents-profile-meta {
227 display: flex;
228 flex-wrap: wrap;
229 gap: var(--space-3);
230 }
231
232 .agents-profile-meta-item {
233 display: flex;
234 align-items: center;
235 gap: var(--space-1);
236 }
237
238 .agents-profile-section { margin-bottom: var(--space-5); }
239
240 .agents-profile-section-title {
241 display: flex;
242 align-items: center;
243 gap: var(--space-2);
244 margin-bottom: var(--space-3);
245 padding-bottom: var(--space-2);
246 }
247
248 // ── Task rows ─────────────────────────────────────────────────────────────────
249
250 .agents-task-row {
251 display: flex;
252 align-items: baseline;
253 gap: var(--space-3);
254 padding: var(--space-2) 0;
255 }
256
257 .agents-task-title { flex: 1; }
258 .agents-task-status { padding: 1px 5px; }
259
260 // ── Commit rows ───────────────────────────────────────────────────────────────
261
262 .agents-commit-row {
263 display: flex;
264 align-items: baseline;
265 gap: var(--space-3);
266 padding: var(--space-2) 0;
267 }
268
269 .agents-commit-msg { flex: 1; }
270
271 // ── Misc ──────────────────────────────────────────────────────────────────────
272
273 .agents-back { display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-4); }
274 .agents-hint { margin-top: var(--space-3); }
275 .agents-section-empty { padding: var(--space-2) 0; }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago