gabriel / musehub public
_agents.scss
276 lines 8.5 KB
Raw
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ breaking 8 days 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 min-height: 0;
62
63 @media (max-width: 900px) { grid-template-columns: 1fr; }
64 }
65
66 // ── Cards / panels ────────────────────────────────────────────────────────────
67
68 .agents-card { padding: var(--space-4); }
69
70 .agents-card-title { margin-bottom: var(--space-3); }
71
72 // ── Active agent list ─────────────────────────────────────────────────────────
73
74 .agents-active-count { margin-bottom: var(--space-3); }
75
76 .agents-agent-list {
77 list-style: none;
78 padding: 0;
79 margin: 0;
80 display: flex;
81 flex-direction: column;
82 gap: var(--space-2);
83 }
84
85 // ── Task queue bar chart ──────────────────────────────────────────────────────
86
87 .agents-queue {
88 display: flex;
89 flex-direction: column;
90 gap: var(--space-2);
91 }
92
93 .agents-queue-row {
94 display: grid;
95 grid-template-columns: 68px 1fr 28px;
96 align-items: center;
97 gap: var(--space-2);
98 }
99
100 // ── Reservations table ────────────────────────────────────────────────────────
101
102 .agents-reservations { margin-bottom: var(--space-5); }
103
104 .agents-reservations-hd {
105 display: flex;
106 align-items: baseline;
107 justify-content: space-between;
108 margin-bottom: var(--space-3);
109 }
110
111 .agents-table {
112 th { padding: var(--space-1) var(--space-2); }
113 td { padding: var(--space-2); }
114 }
115
116 .agents-agent-chip { padding: 1px var(--space-2); }
117
118 // ── Event stream ──────────────────────────────────────────────────────────────
119
120 .agents-stream { margin-bottom: var(--space-5); }
121
122 .agents-stream-hd {
123 display: flex;
124 align-items: center;
125 justify-content: space-between;
126 padding: var(--space-2) var(--space-3);
127 }
128
129 .agents-stream-body {
130 padding: var(--space-2) 0;
131 min-height: 120px;
132 max-height: 320px;
133 overflow-y: auto;
134 }
135
136 .agents-stream-row {
137 display: grid;
138 grid-template-columns: 10px 90px 1fr;
139 align-items: center;
140 gap: var(--space-2);
141 padding: 3px var(--space-3);
142 }
143
144 // ── Shard map ─────────────────────────────────────────────────────────────────
145
146 .agents-shard-meta { margin-bottom: var(--space-4); }
147
148 .agents-shard-grid {
149 display: grid;
150 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
151 gap: var(--space-3);
152 margin-bottom: var(--space-5);
153 }
154
155 .agents-shard-card { padding: var(--space-3); }
156
157 .agents-shard-num { margin-bottom: var(--space-2); }
158 .agents-shard-symbols { margin-bottom: 2px; }
159 .agents-shard-detail { margin-bottom: var(--space-3); }
160 .agents-shard-assigned,
161 .agents-shard-unassigned { margin-bottom: var(--space-2); }
162
163 // ── Empty state ───────────────────────────────────────────────────────────────
164
165 .agents-empty {
166 padding: var(--space-8) var(--space-4);
167 text-align: center;
168 }
169
170 .agents-empty-icon { display: block; margin: 0 auto var(--space-3); }
171 .agents-empty-hint { margin-top: var(--space-2); }
172
173 // ── Forecast ──────────────────────────────────────────────────────────────────
174
175 .agents-forecast-section { margin-bottom: var(--space-5); }
176
177 .agents-forecast-title {
178 margin-bottom: var(--space-3);
179 padding-bottom: var(--space-2);
180 }
181
182 .agents-conflict-ok {
183 display: flex;
184 align-items: center;
185 gap: var(--space-2);
186 padding: var(--space-3) var(--space-4);
187 }
188
189 .agents-conflict-list {
190 display: flex;
191 flex-direction: column;
192 gap: var(--space-3);
193 }
194
195 .agents-conflict-item { padding: var(--space-3) var(--space-4); }
196
197 .agents-conflict-addr { margin-bottom: var(--space-2); }
198
199 .agents-conflict-agents {
200 display: flex;
201 flex-wrap: wrap;
202 gap: var(--space-2);
203 }
204
205 .agents-blast-list {
206 display: flex;
207 flex-direction: column;
208 gap: var(--space-2);
209 }
210
211 .agents-blast-item {
212 display: flex;
213 align-items: center;
214 gap: var(--space-2);
215 font-size: 0.8rem;
216 }
217
218 .agents-blast-addr { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
219 .agents-blast-reserved { padding: 1px 5px; }
220
221 // ── Agent profile page ────────────────────────────────────────────────────────
222
223 .agents-profile-hd { margin-bottom: var(--space-5); }
224
225 .agents-profile-name { margin-bottom: var(--space-2); }
226
227 .agents-profile-meta {
228 display: flex;
229 flex-wrap: wrap;
230 gap: var(--space-3);
231 }
232
233 .agents-profile-meta-item {
234 display: flex;
235 align-items: center;
236 gap: var(--space-1);
237 }
238
239 .agents-profile-section { margin-bottom: var(--space-5); }
240
241 .agents-profile-section-title {
242 display: flex;
243 align-items: center;
244 gap: var(--space-2);
245 margin-bottom: var(--space-3);
246 padding-bottom: var(--space-2);
247 }
248
249 // ── Task rows ─────────────────────────────────────────────────────────────────
250
251 .agents-task-row {
252 display: flex;
253 align-items: baseline;
254 gap: var(--space-3);
255 padding: var(--space-2) 0;
256 }
257
258 .agents-task-title { flex: 1; }
259 .agents-task-status { padding: 1px 5px; }
260
261 // ── Commit rows ───────────────────────────────────────────────────────────────
262
263 .agents-commit-row {
264 display: flex;
265 align-items: baseline;
266 gap: var(--space-3);
267 padding: var(--space-2) 0;
268 }
269
270 .agents-commit-msg { flex: 1; }
271
272 // ── Misc ──────────────────────────────────────────────────────────────────────
273
274 .agents-back { display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-4); }
275 .agents-hint { margin-top: var(--space-3); }
276 .agents-section-empty { padding: var(--space-2) 0; }
File History 1 commit
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ 8 days ago