src/scss/components/_agents.scss · gabriel/musehub

1

// ─────────────────────────────────────────────────────────────────────────────

2

// Component: Agent Coordination Hub (.agents-* prefix)

3

// File: src/scss/components/_agents.scss

4

//

5

// Visual rules only — colors, typography, backgrounds, borders, animations.

6

// Structural layout lives in pages/_agents.scss.

7

// ─────────────────────────────────────────────────────────────────────────────

8

9

// ── Page header ───────────────────────────────────────────────────────────────

10

11

.agents-wrap { font-family: var(--font-mono); }

12

13

.agents-hd { border-bottom: 1px solid var(--border-default); }

.agents-hd-title {

font-size: 1.1rem;

font-weight: 600;

letter-spacing: 0.04em;

19

color: var(--text-primary);

20

svg { opacity: 0.7; }

21

}

22

23

.agents-hd-repo { font-size: 0.8rem; color: var(--text-muted); }

.agents-hd-live {

font-size: 0.72rem;

letter-spacing: 0.08em;

28

color: var(--color-success);

29

}

30

31

.agents-hd-live-dot {

width: 7px;

height: 7px;

border-radius: 50%;

background: var(--color-success);

36

box-shadow: 0 0 6px var(--color-success);

37

animation: agents-pulse 2s ease-in-out infinite;

38

}

39

40

@keyframes agents-pulse {

41

0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--color-success); }

42

50% { opacity: 0.5; box-shadow: 0 0 2px var(--color-success); }

43

}

44

45

// ── Sub-navigation ────────────────────────────────────────────────────────────

46

47

.agents-subnav-link {

48

border: 1px solid var(--border-default);

49

border-radius: 4px;

50

font-size: 0.78rem;

51

letter-spacing: 0.04em;

52

color: var(--text-muted);

53

text-decoration: none;

54

transition: border-color 0.15s, color 0.15s;

55

56

&:hover {

57

border-color: var(--color-accent);

58

color: var(--color-accent);

}

}

// ── Cards / panels ────────────────────────────────────────────────────────────

63

64

.agents-card {

65

border: 1px solid var(--border-default);

66

border-radius: 6px;

67

background: var(--bg-surface);

}

.agents-card-title {

font-size: 0.7rem;

font-weight: 700;

letter-spacing: 0.1em;

74

text-transform: uppercase;

75

color: var(--text-muted);

76

}

77

78

// ── Active agent list ─────────────────────────────────────────────────────────

79

80

.agents-active-count {

81

font-size: 0.85rem;

82

font-weight: 600;

83

color: var(--color-success);

84

85

&::before { content: "● "; font-size: 0.6rem; }

86

}

87

88

.agents-agent-item a {

89

font-size: 0.8rem;

90

color: var(--color-accent);

91

text-decoration: none;

92

overflow: hidden;

93

text-overflow: ellipsis;

94

white-space: nowrap;

95

display: block;

96

&:hover { text-decoration: underline; }

}

.agents-no-active {

font-size: 0.78rem;

color: var(--text-muted);

font-style: italic;

}

// ── Task queue bar chart ──────────────────────────────────────────────────────

106

107

.agents-queue-row { font-size: 0.78rem; }

108

109

.agents-queue-label { color: var(--text-muted); text-align: right; }

110

111

.agents-queue-track {

112

height: 8px;

113

background: var(--bg-base);

114

border: 1px solid var(--border-default);

border-radius: 2px;

overflow: hidden;

}

.agents-queue-fill {

height: 100%;

border-radius: 2px;

transition: width 0.3s ease;

123

}

124

125

.agents-queue-fill--pending { background: var(--color-accent); }

126

.agents-queue-fill--claimed { background: var(--color-warning); box-shadow: 0 0 4px var(--color-warning); }

127

.agents-queue-fill--done { background: var(--color-success); }

128

.agents-queue-fill--failed { background: var(--color-danger); }

129

130

.agents-queue-count { color: var(--text-muted); text-align: right; }

131

132

// ── Reservations table ────────────────────────────────────────────────────────

133

134

.agents-reservations-title {

135

font-size: 0.7rem;

136

font-weight: 700;

137

letter-spacing: 0.1em;

138

text-transform: uppercase;

139

color: var(--text-muted);

140

}

141

142

.agents-reservations-count { font-size: 0.75rem; color: var(--text-muted); }

.agents-table {

width: 100%;

border-collapse: collapse;

font-size: 0.78rem;

th {

text-align: left;

color: var(--text-muted);

152

font-weight: 400;

153

font-size: 0.7rem;

154

letter-spacing: 0.05em;

155

text-transform: uppercase;

156

border-bottom: 1px solid var(--border-default);

}

td {

border-bottom: 1px solid color-mix(in srgb, var(--border-default) 40%, transparent);

161

vertical-align: middle;

162

}

163

164

tr:last-child td { border-bottom: none; }

165

tr:hover td { background: color-mix(in srgb, var(--bg-surface) 60%, transparent); }

166

}

167

168

.agents-symbol-addr {

169

font-family: var(--font-mono);

170

color: var(--text-primary);

171

max-width: 280px;

172

overflow: hidden;

173

text-overflow: ellipsis;

white-space: nowrap;

}

.agents-agent-chip {

display: inline-block;

179

background: color-mix(in srgb, var(--color-accent) 12%, transparent);

180

border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);

181

border-radius: 10px;

182

font-size: 0.72rem;

183

color: var(--color-accent);

white-space: nowrap;

}

.agents-ttl { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }

188

.agents-ttl--expiring { color: var(--color-warning); }

189

190

// ── Event stream ──────────────────────────────────────────────────────────────

191

192

.agents-stream {

193

border: 1px solid var(--border-default);

194

border-radius: 6px;

195

background: var(--bg-base);

overflow: hidden;

}

.agents-stream-hd {

background: var(--bg-surface);

201

border-bottom: 1px solid var(--border-default);

202

font-size: 0.7rem;

203

color: var(--text-muted);

204

letter-spacing: 0.06em;

205

}

206

207

.agents-stream-cursor { font-family: var(--font-mono); color: var(--text-muted); }

.agents-stream-row {

font-size: 0.76rem;

transition: background 0.1s;

212

&:hover { background: color-mix(in srgb, var(--bg-surface) 60%, transparent); }

}

.agents-stream-dot {

width: 7px;

height: 7px;

border-radius: 50%;

flex-shrink: 0;

}

.agents-stream-dot--reservation { background: var(--color-accent); box-shadow: 0 0 4px var(--color-accent); }

223

.agents-stream-dot--heartbeat { background: var(--color-success); }

224

.agents-stream-dot--claim { background: var(--color-warning); box-shadow: 0 0 4px var(--color-warning); }

225

.agents-stream-dot--release { background: var(--text-muted); }

226

.agents-stream-dot--task { background: color-mix(in srgb, var(--color-accent) 60%, var(--color-success)); }

227

.agents-stream-dot--intent { background: var(--text-muted); }

228

.agents-stream-dot--default { background: var(--text-muted); }

229

230

.agents-stream-kind {

231

font-size: 0.7rem;

232

font-weight: 600;

233

letter-spacing: 0.04em;

234

color: var(--text-muted);

235

}

236

237

.agents-stream-kind--muted { color: var(--text-muted); }

238

239

.agents-stream-detail { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

240

.agents-stream-detail--muted { color: var(--text-muted); }

241

242

// ── Shard map ─────────────────────────────────────────────────────────────────

243

244

.agents-shard-meta { font-size: 0.8rem; color: var(--text-muted); }

245

246

.agents-shard-card {

247

border: 1px solid var(--border-default);

248

border-radius: 6px;

249

background: var(--bg-surface);

250

}

251

252

.agents-shard-card--assigned {

253

border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);

}

.agents-shard-num {

font-size: 0.65rem;

font-weight: 700;

letter-spacing: 0.12em;

260

text-transform: uppercase;

261

color: var(--text-muted);

262

}

263

264

.agents-shard-symbols { font-size: 1rem; font-weight: 600; color: var(--text-primary); }

265

.agents-shard-detail { font-size: 0.72rem; color: var(--text-muted); }

266

267

.agents-shard-assigned {

268

font-size: 0.75rem;

269

color: var(--color-accent);

270

&::before { content: "● "; font-size: 0.55rem; }

271

}

272

273

.agents-shard-unassigned {

274

font-size: 0.75rem;

275

color: var(--text-muted);

276

&::before { content: "○ "; font-size: 0.55rem; }

277

}

278

279

.agents-shard-sym-unit { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); }

280

.agents-shard-assigned-link { color: inherit; text-decoration: none; }

281

282

// ── Empty state ───────────────────────────────────────────────────────────────

283

284

.agents-empty { color: var(--text-muted); font-size: 0.85rem; }

285

.agents-empty-icon { opacity: 0.35; }

286

.agents-empty-hint { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }

287

288

// ── Forecast ──────────────────────────────────────────────────────────────────

289

290

.agents-forecast-title {

291

font-size: 0.7rem;

292

font-weight: 700;

293

letter-spacing: 0.1em;

294

text-transform: uppercase;

295

color: var(--text-muted);

296

border-bottom: 1px solid var(--border-default);

297

}

298

299

.agents-forecast-title-sub {

300

font-size: 0.7rem;

301

font-weight: 400;

302

text-transform: none;

303

letter-spacing: 0;

304

color: var(--text-muted);

305

}

306

307

.agents-conflict-ok {

308

border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);

309

border-radius: 6px;

310

background: color-mix(in srgb, var(--color-success) 6%, transparent);

311

color: var(--color-success);

font-size: 0.82rem;

}

.agents-conflict-item {

316

border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);

317

border-radius: 6px;

318

background: color-mix(in srgb, var(--color-danger) 5%, transparent);

319

}

320

321

.agents-conflict-addr {

322

font-family: var(--font-mono);

323

font-size: 0.82rem;

324

color: var(--color-danger);

325

svg { vertical-align: -1px; margin-right: 3px; }

326

}

327

328

.agents-blast-icon { color: var(--color-warning); flex-shrink: 0; }

329

.agents-blast-addr { font-family: var(--font-mono); color: var(--text-primary); }

330

.agents-blast-count { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }

331

332

.agents-blast-reserved {

333

color: var(--color-warning);

334

font-size: 0.65rem;

335

letter-spacing: 0.08em;

336

text-transform: uppercase;

337

border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);

border-radius: 3px;

}

// ── Agent profile page ────────────────────────────────────────────────────────

342

343

.agents-profile-name {

344

font-size: 1.15rem;

345

font-weight: 700;

346

letter-spacing: 0.02em;

347

color: var(--text-primary);

348

}

349

350

.agents-profile-meta { font-size: 0.78rem; color: var(--text-muted); }

351

352

.agents-profile-meta-key { color: var(--text-muted); }

353

.agents-profile-meta-val { color: var(--text-primary); font-weight: 500; }

354

.agents-profile-meta-item--hint { color: var(--text-muted); font-style: italic; }

355

356

.agents-profile-section-title {

357

font-size: 0.7rem;

358

font-weight: 700;

359

letter-spacing: 0.1em;

360

text-transform: uppercase;

361

color: var(--text-muted);

362

border-bottom: 1px solid var(--border-default);

363

}

364

365

.agents-profile-section-count {

366

display: inline-flex;

367

align-items: center;

368

justify-content: center;

min-width: 18px;

height: 18px;

padding: 0 5px;

border-radius: 9px;

background: var(--bg-overlay);

374

color: var(--text-primary);

font-size: 0.65rem;

font-weight: 700;

}

// ── Task rows ─────────────────────────────────────────────────────────────────

.agents-task-row {

font-size: 0.8rem;

border-bottom: 1px solid color-mix(in srgb, var(--border-default) 40%, transparent);

384

&:last-child { border-bottom: none; }

385

}

386

387

.agents-task-id { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }

388

.agents-task-title { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

389

390

.agents-task-status {

391

font-size: 0.68rem;

392

font-weight: 700;

393

letter-spacing: 0.06em;

394

text-transform: uppercase;

flex-shrink: 0;

border-radius: 3px;

}

.agents-task-status--pending { color: var(--text-muted); border: 1px solid var(--border-default); }

400

.agents-task-status--claimed { color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent); }

401

.agents-task-status--completed { color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent); }

402

.agents-task-status--failed { color: var(--color-danger); border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent); }

403

404

.agents-task-priority { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }

405

406

// ── Commit rows ───────────────────────────────────────────────────────────────

.agents-commit-row {

font-size: 0.8rem;

border-bottom: 1px solid color-mix(in srgb, var(--border-default) 40%, transparent);

411

&:last-child { border-bottom: none; }

412

}

413

414

.agents-commit-id { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-accent); flex-shrink: 0; }

415

.agents-commit-msg { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

416

417

.agents-commit-signed {

418

font-size: 0.65rem;

419

letter-spacing: 0.06em;

420

color: var(--color-success);

flex-shrink: 0;

opacity: 0.8;

}

// ── Misc ──────────────────────────────────────────────────────────────────────

.agents-back {

font-size: 0.78rem;

color: var(--text-muted);

430

text-decoration: none;

431

&:hover { color: var(--color-accent); }

432

}

433

434

.agents-hint { font-size: 0.75rem; color: var(--text-muted); }

435

.agents-section-empty { font-size: 0.8rem; color: var(--text-muted); }

436

.agents-section-empty-hint { font-style: italic; }