forked from Rockachopa/Timmy-time-dashboard
4020b5222f
Add infrastructure for running swarm agents as isolated Docker containers with HTTP-based coordination, startup recovery, and enhanced dashboard UI for agent management. - Dockerfile and docker-compose.yml for multi-service orchestration - DockerAgentRunner for programmatic container lifecycle management - Internal HTTP API for container agents to poll tasks and submit bids - Startup recovery system to reconcile orphaned tasks and stale agents - Enhanced UI partials for agent panels, chat, and task assignment - Timmy docker entry point with heartbeat and task polling - New Makefile targets for Docker workflows - Tests for swarm recovery Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
345 lines
11 KiB
CSS
345 lines
11 KiB
CSS
/* ── Arcane palette ────────────────────────────────── */
|
|
:root {
|
|
--bg-deep: #080412;
|
|
--bg-panel: #110820;
|
|
--bg-card: #180d2e;
|
|
--border: #3b1a5c;
|
|
--border-glow: #7c3aed;
|
|
--text: #c8b0e0;
|
|
--text-dim: #6b4a8a;
|
|
--text-bright: #ede0ff;
|
|
--green: #00e87a;
|
|
--green-dim: #00704a;
|
|
--amber: #ffb800;
|
|
--amber-dim: #7a5800;
|
|
--red: #ff4455;
|
|
--red-dim: #7a1a22;
|
|
--blue: #ff7a2a; /* orange replaces blue as the primary accent */
|
|
--orange: #ff7a2a;
|
|
--purple: #a855f7;
|
|
--font: 'JetBrains Mono', 'Courier New', monospace;
|
|
--header-h: 52px;
|
|
|
|
/* Bootstrap dark-mode overrides */
|
|
--bs-body-bg: var(--bg-deep);
|
|
--bs-body-color: var(--text);
|
|
--bs-body-font-family: var(--font);
|
|
--bs-body-font-size: 13px;
|
|
--bs-card-bg: var(--bg-panel);
|
|
--bs-card-border-color: var(--border);
|
|
--bs-card-cap-bg: var(--bg-card);
|
|
--bs-card-cap-color: var(--text-dim);
|
|
--bs-border-color: var(--border);
|
|
--bs-form-control-bg: var(--bg-deep);
|
|
--bs-form-control-color: var(--text-bright);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: var(--font);
|
|
background-color: var(--bg-deep);
|
|
background-image: url('/static/bg.svg');
|
|
background-size: cover;
|
|
background-position: center top;
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
min-height: 100dvh;
|
|
overflow-x: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* ── Header ─────────────────────────────────────── */
|
|
.mc-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 24px;
|
|
padding-top: max(12px, env(safe-area-inset-top));
|
|
background: rgba(17, 8, 32, 0.86);
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
border-bottom: 1px solid var(--border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.mc-header-left { display: flex; align-items: baseline; gap: 0; }
|
|
.mc-header-right { display: flex; align-items: center; gap: 16px; }
|
|
.mc-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--text-bright);
|
|
letter-spacing: 0.15em;
|
|
text-shadow: 0 0 18px rgba(168, 85, 247, 0.55), 0 0 40px rgba(168, 85, 247, 0.25);
|
|
}
|
|
.mc-subtitle {
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
letter-spacing: 0.2em;
|
|
margin-left: 16px;
|
|
}
|
|
.mc-time {
|
|
font-size: 14px;
|
|
color: var(--orange);
|
|
letter-spacing: 0.1em;
|
|
text-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
|
|
}
|
|
.mc-test-link {
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
color: var(--text-dim);
|
|
letter-spacing: 0.2em;
|
|
text-decoration: none;
|
|
border: 1px solid var(--border);
|
|
border-radius: 2px;
|
|
padding: 3px 8px;
|
|
transition: border-color 0.15s, color 0.15s;
|
|
touch-action: manipulation;
|
|
}
|
|
.mc-test-link:hover { border-color: var(--purple); color: var(--purple); }
|
|
|
|
/* ── Main layout ─────────────────────────────────── */
|
|
.mc-main {
|
|
padding: 16px;
|
|
height: calc(100dvh - var(--header-h));
|
|
overflow: clip;
|
|
}
|
|
.mc-content {
|
|
height: 100%;
|
|
}
|
|
.mc-content > .row {
|
|
height: 100%;
|
|
}
|
|
|
|
/* ── Sidebar ─────────────────────────────────────── */
|
|
.mc-sidebar {
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ── Chat column ─────────────────────────────────── */
|
|
.mc-chat-panel {
|
|
min-height: 0;
|
|
}
|
|
.mc-chat-panel > .card {
|
|
height: 100%;
|
|
overflow: clip;
|
|
}
|
|
|
|
/* ── Panel / Card overrides ──────────────────────── */
|
|
.mc-panel {
|
|
background: rgba(17, 8, 32, 0.78);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
}
|
|
.mc-panel-header {
|
|
background: rgba(24, 10, 45, 0.90);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--text-dim);
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
padding: 8px 14px;
|
|
}
|
|
|
|
/* ── Agent Card ──────────────────────────────────── */
|
|
.mc-agent-card {
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
padding: 12px;
|
|
background: rgba(24, 10, 45, 0.82);
|
|
}
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
display: inline-block;
|
|
}
|
|
.status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
|
|
.status-dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
|
|
.status-dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); }
|
|
|
|
.agent-name {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--text-bright);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
.agent-meta { font-size: 11px; line-height: 2; }
|
|
.meta-key { color: var(--text-dim); display: inline-block; width: 60px; }
|
|
.meta-val { color: var(--text); }
|
|
|
|
/* ── Health ──────────────────────────────────────── */
|
|
.health-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 7px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 12px;
|
|
}
|
|
.health-row:last-child { border-bottom: none; }
|
|
.health-label { color: var(--text-dim); letter-spacing: 0.08em; }
|
|
|
|
/* Status badges */
|
|
.mc-badge-up { background: var(--green-dim) !important; color: var(--green) !important; font-size: 10px; letter-spacing: 0.12em; border-radius: 2px; }
|
|
.mc-badge-down { background: var(--red-dim) !important; color: var(--red) !important; font-size: 10px; letter-spacing: 0.12em; border-radius: 2px; }
|
|
.mc-badge-ready { background: var(--amber-dim) !important; color: var(--amber) !important; font-size: 10px; letter-spacing: 0.12em; border-radius: 2px; }
|
|
|
|
/* ── Chat ────────────────────────────────────────── */
|
|
.chat-log {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.chat-message { margin-bottom: 16px; }
|
|
.msg-meta {
|
|
font-size: 10px;
|
|
color: var(--text-dim);
|
|
margin-bottom: 4px;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
.chat-message.user .msg-meta { color: var(--orange); }
|
|
.chat-message.agent .msg-meta { color: var(--purple); }
|
|
.chat-message.error-msg .msg-meta { color: var(--red); }
|
|
|
|
.msg-body {
|
|
background: rgba(24, 10, 45, 0.80);
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
padding: 10px 12px;
|
|
line-height: 1.65;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
.chat-message.user .msg-body { border-color: var(--border-glow); }
|
|
.chat-message.agent .msg-body { border-left: 3px solid var(--purple); }
|
|
.chat-message.error-msg .msg-body { border-left: 3px solid var(--red); color: var(--red); }
|
|
|
|
/* ── Chat input footer ───────────────────────────── */
|
|
.mc-chat-footer {
|
|
padding: 12px 14px;
|
|
padding-bottom: max(12px, env(safe-area-inset-bottom));
|
|
background: rgba(24, 10, 45, 0.90);
|
|
border-top: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mc-btn-clear {
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
border-radius: 2px;
|
|
color: var(--text-dim);
|
|
font-family: var(--font);
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
padding: 3px 8px;
|
|
letter-spacing: 0.12em;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, color 0.15s;
|
|
touch-action: manipulation;
|
|
}
|
|
.mc-btn-clear:hover { border-color: var(--red); color: var(--red); }
|
|
|
|
/* Bootstrap form-control overrides */
|
|
.mc-input {
|
|
background: rgba(8, 4, 18, 0.75) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 3px !important;
|
|
color: var(--text-bright) !important;
|
|
font-family: var(--font) !important;
|
|
font-size: 13px !important;
|
|
}
|
|
.mc-input:focus {
|
|
border-color: var(--border-glow) !important;
|
|
box-shadow: 0 0 0 1px var(--border-glow), 0 0 10px rgba(124, 58, 237, 0.25) !important;
|
|
}
|
|
.mc-input::placeholder { color: var(--text-dim) !important; }
|
|
|
|
.mc-btn-send {
|
|
background: var(--border-glow);
|
|
border: none;
|
|
border-radius: 3px;
|
|
color: var(--text-bright);
|
|
font-family: var(--font);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
padding: 8px 18px;
|
|
letter-spacing: 0.12em;
|
|
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
|
|
touch-action: manipulation;
|
|
white-space: nowrap;
|
|
}
|
|
.mc-btn-send:hover {
|
|
background: var(--orange);
|
|
color: #080412;
|
|
box-shadow: 0 0 14px rgba(249, 115, 22, 0.45);
|
|
}
|
|
|
|
/* ── HTMX Loading ────────────────────────────────── */
|
|
.htmx-indicator { display: none; }
|
|
.htmx-request .htmx-indicator,
|
|
.htmx-request.htmx-indicator { display: inline-block; color: var(--amber); animation: blink 0.8s infinite; }
|
|
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
|
|
|
|
/* ── Scrollbar ───────────────────────────────────── */
|
|
::-webkit-scrollbar { width: 4px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--border-glow); }
|
|
|
|
|
|
/* ════════════════════════════════════════════════════
|
|
MOBILE (≤ 768 px)
|
|
════════════════════════════════════════════════════ */
|
|
@media (max-width: 768px) {
|
|
|
|
:root { --header-h: 44px; }
|
|
|
|
/* Compact header */
|
|
.mc-header { padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
|
|
.mc-title { font-size: 14px; letter-spacing: 0.1em; }
|
|
.mc-subtitle { display: none; }
|
|
.mc-time { font-size: 12px; }
|
|
|
|
/* Full-height layout becomes scrollable column stack */
|
|
.mc-main { height: auto; overflow: visible; padding: 8px; }
|
|
.mc-content, .mc-content > .row { height: auto; }
|
|
|
|
/* Sidebar becomes a horizontal scroll strip */
|
|
.mc-sidebar {
|
|
flex-direction: row !important;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.mc-sidebar::-webkit-scrollbar { display: none; }
|
|
.mc-sidebar .mc-panel {
|
|
min-width: 200px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Chat fills remaining space with defined height */
|
|
.mc-chat-panel { min-height: 60dvh; }
|
|
.mc-chat-panel > .card { height: 60dvh; }
|
|
|
|
/* Tighter message padding */
|
|
.chat-log { padding: 10px !important; }
|
|
.msg-body { padding: 8px 10px; font-size: 13px; }
|
|
.chat-message { margin-bottom: 12px; }
|
|
|
|
/* Touch-friendly input */
|
|
.mc-chat-footer {
|
|
padding: 8px 10px;
|
|
padding-bottom: max(8px, env(safe-area-inset-bottom));
|
|
}
|
|
.mc-input { font-size: 16px !important; min-height: 44px; }
|
|
.mc-btn-send { min-height: 44px; min-width: 64px; font-size: 12px; padding: 0 14px; }
|
|
}
|