forked from Rockachopa/Timmy-time-dashboard
5e7d805245
- src/timmy/ — Agno agent wrapper (llama3.2 via Ollama, SQLite memory, TIMMY_SYSTEM_PROMPT) - src/dashboard/ — FastAPI + HTMX + Jinja2 Mission Control UI - /health + /health/status (Ollama ping, HTMX 30s poll) - /agents list + /agents/timmy/chat (HTMX form submission) - static/style.css — dark terminal mission-control aesthetic - tests/ — 27 pytest tests (prompts, agent config, dashboard routes); no Ollama required - pyproject.toml — hatchling build, pytest configured with pythonpath=src https://claude.ai/code/session_01M4L3R98N5fgXFZRvV8X9b6
239 lines
6.7 KiB
CSS
239 lines
6.7 KiB
CSS
:root {
|
|
--bg-deep: #060d14;
|
|
--bg-panel: #0c1824;
|
|
--bg-card: #0f2030;
|
|
--border: #1a3a55;
|
|
--border-glow: #1e4d72;
|
|
--text: #b8d0e8;
|
|
--text-dim: #4a7a9a;
|
|
--text-bright: #ddeeff;
|
|
--green: #00e87a;
|
|
--green-dim: #00704a;
|
|
--amber: #ffb800;
|
|
--amber-dim: #7a5800;
|
|
--red: #ff4455;
|
|
--red-dim: #7a1a22;
|
|
--blue: #00aaff;
|
|
--font: 'JetBrains Mono', 'Courier New', monospace;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
background: var(--bg-deep);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: 13px;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ── Header ─────────────────────────────────────── */
|
|
.mc-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 24px;
|
|
background: var(--bg-panel);
|
|
border-bottom: 1px solid var(--border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.mc-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--text-bright);
|
|
letter-spacing: 0.15em;
|
|
}
|
|
.mc-subtitle {
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
letter-spacing: 0.2em;
|
|
margin-left: 16px;
|
|
}
|
|
.mc-time {
|
|
font-size: 14px;
|
|
color: var(--blue);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* ── Layout ──────────────────────────────────────── */
|
|
.mc-main {
|
|
display: grid;
|
|
grid-template-columns: 260px 1fr;
|
|
gap: 16px;
|
|
padding: 16px;
|
|
height: calc(100vh - 52px);
|
|
}
|
|
|
|
/* ── Panels ──────────────────────────────────────── */
|
|
.panel {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.panel-header {
|
|
padding: 8px 14px;
|
|
background: var(--bg-card);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--text-dim);
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
}
|
|
.panel-body { padding: 14px; }
|
|
|
|
/* ── Sidebar ─────────────────────────────────────── */
|
|
.sidebar {
|
|
grid-column: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ── Agent Card ──────────────────────────────────── */
|
|
.agent-card {
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
padding: 12px;
|
|
background: var(--bg-card);
|
|
}
|
|
.agent-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.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; }
|
|
|
|
.badge {
|
|
padding: 2px 8px;
|
|
border-radius: 2px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
.badge.up { background: var(--green-dim); color: var(--green); }
|
|
.badge.down { background: var(--red-dim); color: var(--red); }
|
|
.badge.ready { background: var(--amber-dim); color: var(--amber); }
|
|
|
|
/* ── Chat Panel ──────────────────────────────────── */
|
|
.chat-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-column: 2;
|
|
}
|
|
.chat-log {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 14px;
|
|
}
|
|
.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(--blue); }
|
|
.chat-message.agent .msg-meta { color: var(--green); }
|
|
.chat-message.error-msg .msg-meta { color: var(--red); }
|
|
|
|
.msg-body {
|
|
background: var(--bg-card);
|
|
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(--green); }
|
|
.chat-message.error-msg .msg-body { border-left: 3px solid var(--red); color: var(--red); }
|
|
|
|
/* ── Chat Input ──────────────────────────────────── */
|
|
.chat-input-bar {
|
|
padding: 12px 14px;
|
|
background: var(--bg-card);
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.chat-input-bar input {
|
|
flex: 1;
|
|
background: var(--bg-deep);
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
color: var(--text-bright);
|
|
font-family: var(--font);
|
|
font-size: 13px;
|
|
padding: 8px 12px;
|
|
outline: none;
|
|
}
|
|
.chat-input-bar input:focus {
|
|
border-color: var(--border-glow);
|
|
box-shadow: 0 0 0 1px var(--border-glow);
|
|
}
|
|
.chat-input-bar input::placeholder { color: var(--text-dim); }
|
|
.chat-input-bar button {
|
|
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;
|
|
cursor: pointer;
|
|
letter-spacing: 0.12em;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
.chat-input-bar button:hover { background: var(--blue); color: var(--bg-deep); }
|
|
|
|
/* ── 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: var(--bg-deep); }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--border-glow); }
|