Kevin Veen-BirkenbachandClaude Opus 5.5
fdf8722fc1
Every Agents view marks each agent as working, alive, sleeping, suspending, unreachable or dead with an animated symbol; a Status menu hides states and switches the 3D faces, kept through a reload. The hub's container sees neither ~/.claude/sessions nor host processes, so the host timer kvb-orchestrator-sessions.timer runs client/sessions.py every 15 seconds while the page polls: it reads the session records without following symlinks, only regular files up to 64 KiB, keeps name, status and statusUpdatedAt within type and length bounds, checks the pid's process start, and writes agent-sessions.json atomically. The hub ignores a snapshot that is missing, malformed, older than five minutes or dated in the future. make orchestrator-install enables the timer and orchestrator-check reports it. 🎯 Fix: 90 % 💥 Break: 5 % 💸 Cost: 100 % ⏱️ Time: 100 % 🛡️ Security: 100 % 🏆 Score: 86 🚦 Gate: ✅ 90/5, cost and time <= 100, security 100 % Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
81 lines
6.3 KiB
CSS
81 lines
6.3 KiB
CSS
.rule-form { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
|
|
.rule-form > label, .settings .grid > label { min-width: 0; }
|
|
.rule-form .field, .settings .grid .field { width: 100%; min-width: 0; }
|
|
.rule-form [hidden] { display: none; }
|
|
.rule-form > label.check { display: inline-flex; min-height: 34px; }
|
|
.radio-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-4); align-items: start; }
|
|
@media (max-width: 960px) { .radio-grid { grid-template-columns: minmax(0, 1fr); } }
|
|
.radio-talk { display: grid; gap: var(--sp-3); }
|
|
.speakers { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
|
|
.speaker { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: var(--fs-sm); }
|
|
.speaker.speaking { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
|
|
.speaker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.speaker-face { position: relative; display: inline-grid; flex: none; border-radius: 50%; }
|
|
.speaker.speaking .speaker-face::after, .radio-caption .speaker-face::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--ok); border-radius: 50%; pointer-events: none; animation: speaking 1.3s var(--ease) infinite; }
|
|
@keyframes speaking { from { opacity: .95; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
|
|
.radio-caption { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line)); border-radius: var(--radius-sm); background: var(--ok-soft); }
|
|
.radio-caption[hidden] { display: none; }
|
|
.radio-caption strong { white-space: nowrap; }
|
|
.caption-line { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
|
|
svg .node.speaking circle { stroke: var(--ok); stroke-width: 4; animation: speaking-node 1.3s ease-in-out infinite; }
|
|
@keyframes speaking-node { 50% { stroke-width: 10; stroke-opacity: .45; } }
|
|
.face-art .mouth { transform-box: fill-box; transform-origin: center; }
|
|
.speaking .face-art .mouth { animation: talk .3s ease-in-out infinite alternate; }
|
|
@keyframes talk { to { transform: scale(1.15, 2.2); } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.speaker.speaking .speaker-face::after, .radio-caption .speaker-face::after, svg .node.speaking circle, .speaking .face-art .mouth { animation: none; }
|
|
}
|
|
.presence { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
|
|
.presence[data-tone="ok"] { color: var(--ok); }
|
|
.presence[data-tone="bad"] { color: var(--bad); }
|
|
.presence[data-tone="warn"] { color: var(--warn); }
|
|
.presence[data-tone="info"] { color: var(--info); }
|
|
.presence[data-tone="violet"] { color: var(--violet); }
|
|
svg .presence { fill: currentColor; }
|
|
svg .presence-dot { fill: var(--panel); stroke: currentColor; stroke-width: 1; }
|
|
.presence .glyph { transform-box: fill-box; transform-origin: center; }
|
|
.presence[data-state="working"] .glyph { animation: presence-spin 3s linear infinite; }
|
|
.presence[data-state="alive"] .glyph { animation: presence-beat 1.6s ease-in-out infinite; }
|
|
.presence[data-state="sleeping"] .glyph { animation: presence-drift 4s ease-in-out infinite; }
|
|
.presence[data-state="suspending"] .glyph { animation: presence-flip 2.4s ease-in-out infinite; }
|
|
.presence[data-state="unreachable"] .glyph { animation: presence-blink 1.2s ease-in-out infinite; }
|
|
.presence[data-state="dead"] .glyph { animation: presence-fade 5s ease-in-out infinite; }
|
|
@keyframes presence-spin { to { transform: rotate(360deg); } }
|
|
@keyframes presence-beat { 15%, 45% { transform: scale(1.25); } 30% { transform: scale(1); } }
|
|
@keyframes presence-drift { 50% { transform: translateY(-15%); opacity: .6; } }
|
|
@keyframes presence-flip { 50%, 100% { transform: rotate(180deg); } }
|
|
@keyframes presence-blink { 50% { opacity: .25; } }
|
|
@keyframes presence-fade { 50% { opacity: .35; } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.presence .glyph { animation: none; }
|
|
}
|
|
.stations { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
|
|
.station { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); min-width: 0; padding: 3px 3px 3px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); }
|
|
.station-name, .station-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.station-name { font-weight: 600; }
|
|
.station-when { color: var(--muted); font-size: var(--fs-sm); }
|
|
.station[data-state="playing"] { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
|
|
.station[data-state="blocked"] { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
|
|
.station[data-state="error"] { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
|
|
@media (max-width: 640px) {
|
|
.station { grid-template-columns: minmax(0, 1fr) auto auto; }
|
|
.station-when { display: none; }
|
|
}
|
|
.spot-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
|
|
.radio-spot { display: grid; gap: var(--sp-3); max-height: 46vh; overflow: auto; }
|
|
.radio-spot[hidden], .radio-gear[hidden] { display: none; }
|
|
body.fit .radio-spot { flex: 0 1 auto; min-height: 0; }
|
|
.spot-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
|
|
.spot-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--sp-4); align-items: start; }
|
|
.radio-gear { min-width: 0; }
|
|
.composer { display: grid; gap: var(--sp-2); }
|
|
.composer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--sp-2) var(--sp-3); }
|
|
.composer-grid label { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: var(--fs-sm); }
|
|
.composer-grid .field { width: 100%; min-width: 0; }
|
|
.composer [hidden] { display: none; }
|
|
.composer .actions { margin-top: 0; }
|
|
.composer-status { min-width: 0; overflow-wrap: anywhere; }
|
|
.voice-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
|
|
.voice-replay { max-width: 100%; height: 34px; }
|
|
.mini .voice-replay, .bubble .voice-replay { width: 100%; }
|