Files
skills/orchestrator/templates/style-ui.css
T
Kevin Veen-BirkenbachandClaude Opus 5.5 995c7cb214 feat(orchestrator): S5.2 drain, suspend and resume chosen agents
The Day/Night menu lists every claimed agent with a checkbox and an All box; Drain, Suspend and Resume act on the ticked agents only, are disabled when none is ticked, and the agent popup carries the same three buttons for that one agent. Each action is passkey-signed with its agent list, night.py takes --target per session and keeps a per-agent part, and each chosen agent gets a call naming the action and its skill. The night skills say how to read a per-agent night.

🎯 Fix: 90 %
💥 Break: 5 %
💸 Cost: 106 %
⏱️ Time: 100 %
🛡️ Security: 100 %
🏆 Score: 81
🚦 Gate: ⚠️ cost 106 % > 100: operator approved the commit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-11 07:45:49 +00:00

60 lines
4.9 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; }
}
.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); }
.night-picks { display: flex; flex-wrap: wrap; gap: 4px var(--sp-3); max-width: 420px; max-height: 30vh; overflow: auto; }
.night-picks:empty { display: none; }
.agent-night { align-items: center; margin: 0 0 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%; }