[claude] Real-time monitoring dashboard for all agent systems (#862) (#1319)

static/css/mission-control.css

@@ -2785,3 +2785,120 @@
   color: var(--text-bright);
   word-break: break-all;
 }
+
+/* =========================================================
+   Monitoring Dashboard — #862
+   ========================================================= */
+
+.mon-last-updated {
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  letter-spacing: 0.04em;
+}
+
+/* Agent rows */
+.mon-agent-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.25rem;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.82rem;
+}
+.mon-agent-row:last-child { border-bottom: none; }
+
+.mon-agent-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.mon-agent-name  { font-weight: 700; color: var(--text-bright); min-width: 7rem; }
+.mon-agent-model { color: var(--text-dim); min-width: 8rem; }
+.mon-agent-status {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--green);
+  min-width: 4rem;
+}
+.mon-agent-action { color: var(--text-dim); font-style: italic; }
+
+/* Resource progress bars */
+.mon-resource-bars {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.mon-bar-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+.mon-bar-label {
+  min-width: 2.8rem;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  text-transform: uppercase;
+}
+.mon-bar-track {
+  flex: 1;
+  height: 6px;
+  background: var(--bg-card);
+  border-radius: 3px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+}
+.mon-bar-fill {
+  height: 100%;
+  background: var(--green);
+  border-radius: 3px;
+  transition: width 0.4s ease, background 0.4s ease;
+}
+.mon-bar-pct {
+  min-width: 2.5rem;
+  text-align: right;
+  color: var(--text-dim);
+  font-size: 0.7rem;
+}
+
+/* Alert items */
+.mon-alert-item {
+  padding: 0.5rem 0.75rem;
+  border-left: 3px solid var(--amber);
+  background: rgba(255,179,0,0.06);
+  margin-bottom: 0.4rem;
+  border-radius: 0 3px 3px 0;
+  font-size: 0.82rem;
+}
+.mon-alert-item.mon-alert-critical {
+  border-left-color: var(--red);
+  background: rgba(255,59,59,0.06);
+}
+.mon-alert-item.mon-alert-info {
+  border-left-color: var(--green);
+  background: rgba(0,255,136,0.05);
+}
+.mon-alert-detail { color: var(--text-dim); }
+
+/* Stream title truncation */
+.mon-stream-title {
+  font-size: 0.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 10rem;
+}
+
+/* Last episode label */
+.mon-last-episode {
+  margin-top: 0.75rem;
+  font-size: 0.78rem;
+  color: var(--text-dim);
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--border);
+}