perplexity/Timmy-time-dashboard
Archived
1
0
Fork 0
forked from Rockachopa/Timmy-time-dashboard
Code Issues Pull Requests 1 Activity

Merge pull request #2 from Alexspayne/claude/timmy-time-bootstrap-f3TDe

Browse Source
This commit is contained in:
Alexander Whitestone
2026-02-20 08:06:17 -05:00
committed by GitHub
parent acace792aa cf99c06b97
commit c9ac2d9d17
4 changed files with 170 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/dashboard/templates/base.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
@@ -10,6 +10,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<link rel="stylesheet" href="/static/style.css" />
<script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
</head>
@@ -37,5 +38,6 @@
setInterval(updateClock, 1000);
updateClock();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmE6bgx5xwkVYG3WhIEOFSjBqg4X" crossorigin="anonymous"></script>
</body>
</html>

140
src/dashboard/templates/index.html
View File

@@ -2,77 +2,87 @@
{% block content %}
<div class="sidebar">
<div class="container-fluid mc-content h-100">
<div class="row g-3 h-100">
<!-- Agents -->
<div class="panel">
<div class="panel-header">// AGENTS</div>
<div class="panel-body">
<div class="agent-card">
<div class="agent-card-header">
<span class="status-dot amber"></span>
<span class="agent-name">TIMMY</span>
<!-- Sidebar -->
<div class="col-12 col-md-3 d-flex flex-column gap-3 mc-sidebar">
<!-- Agents -->
<div class="card mc-panel">
<div class="card-header mc-panel-header">// AGENTS</div>
<div class="card-body p-3">
<div class="mc-agent-card">
<div class="d-flex align-items-center gap-2 mb-2">
<span class="status-dot amber"></span>
<span class="agent-name">TIMMY</span>
</div>
<div class="agent-meta">
<span class="meta-key">TYPE</span> <span class="meta-val">sovereign</span><br>
<span class="meta-key">MODEL</span> <span class="meta-val">llama3.2</span><br>
<span class="meta-key">BACKEND</span> <span class="meta-val">ollama</span><br>
<span class="meta-key">VERSION</span> <span class="meta-val">1.0.0</span>
</div>
</div>
</div>
<div class="agent-meta">
<span class="meta-key">TYPE</span> <span class="meta-val">sovereign</span><br>
<span class="meta-key">MODEL</span> <span class="meta-val">llama3.2</span><br>
<span class="meta-key">BACKEND</span> <span class="meta-val">ollama</span><br>
<span class="meta-key">VERSION</span> <span class="meta-val">1.0.0</span>
</div>
<!-- System Health (HTMX polled) -->
<div class="card mc-panel"
hx-get="/health/status"
hx-trigger="load, every 30s"
hx-target="this"
hx-swap="innerHTML">
<div class="card-header mc-panel-header">// SYSTEM HEALTH</div>
<div class="card-body p-3">
<div class="health-row">
<span class="health-label">LOADING...</span>
</div>
</div>
</div>
</div>
<!-- Chat Panel -->
<div class="col-12 col-md-9 d-flex flex-column mc-chat-panel">
<div class="card mc-panel flex-grow-1 d-flex flex-column min-h-0">
<div class="card-header mc-panel-header">// TIMMY INTERFACE</div>
<div class="chat-log flex-grow-1 overflow-auto p-3" id="chat-log">
<div class="chat-message agent">
<div class="msg-meta">TIMMY // SYSTEM</div>
<div class="msg-body">Mission Control initialized. Timmy ready — awaiting input.</div>
</div>
</div>
<div class="card-footer mc-chat-footer">
<form hx-post="/agents/timmy/chat"
hx-target="#chat-log"
hx-swap="beforeend"
hx-indicator="#send-indicator"
hx-sync="this:drop"
hx-disabled-elt="find button"
hx-on::after-settle="this.reset(); scrollChat()"
class="d-flex gap-2">
<input type="text"
name="message"
class="form-control mc-input"
placeholder="send a message to timmy..."
autocomplete="off"
autocorrect="off"
autocapitalize="none"
spellcheck="false"
enterkeyhint="send"
required />
<button type="submit" class="btn mc-btn-send">
SEND
<span id="send-indicator" class="htmx-indicator">▋</span>
</button>
</form>
</div>
</div>
</div>
</div>
<!-- System Health (HTMX polled) -->
<div class="panel"
hx-get="/health/status"
hx-trigger="load, every 30s"
hx-target="this"
hx-swap="innerHTML">
<div class="panel-header">// SYSTEM HEALTH</div>
<div class="panel-body">
<div class="health-row">
<span class="health-label">LOADING...</span>
</div>
</div>
</div>
</div>
<!-- Chat Panel -->
<div class="panel chat-panel">
<div class="panel-header">// TIMMY INTERFACE</div>
<div class="chat-log" id="chat-log">
<div class="chat-message agent">
<div class="msg-meta">TIMMY // SYSTEM</div>
<div class="msg-body">Mission Control initialized. Timmy ready — awaiting input.</div>
</div>
</div>
<div class="chat-input-bar">
<form hx-post="/agents/timmy/chat"
hx-target="#chat-log"
hx-swap="beforeend"
hx-indicator="#send-indicator"
hx-sync="this:drop"
hx-disabled-elt="find button"
hx-on::after-settle="this.reset(); scrollChat()"
style="display:flex; flex:1; gap:8px;">
<input type="text"
name="message"
placeholder="send a message to timmy..."
autocomplete="off"
autocorrect="off"
autocapitalize="none"
spellcheck="false"
enterkeyhint="send"
required />
<button type="submit">
SEND
<span id="send-indicator" class="htmx-indicator">▋</span>
</button>
</form>
</div>
</div>

12
src/dashboard/templates/partials/health_status.html
View File

@@ -1,19 +1,19 @@
<div class="panel-header">// SYSTEM HEALTH</div>
<div class="panel-body">
<div class="card-header mc-panel-header">// SYSTEM HEALTH</div>
<div class="card-body p-3">
<div class="health-row">
<span class="health-label">OLLAMA</span>
{% if ollama %}
<span class="badge up">UP</span>
<span class="badge mc-badge-up">UP</span>
{% else %}
<span class="badge down">DOWN</span>
<span class="badge mc-badge-down">DOWN</span>
{% endif %}
</div>
<div class="health-row">
<span class="health-label">TIMMY</span>
<span class="badge ready">READY</span>
<span class="badge mc-badge-ready">READY</span>
</div>
<div class="health-row">
<span class="health-label">MODEL</span>
<span class="badge ready">llama3.2</span>
<span class="badge mc-badge-ready">llama3.2</span>
</div>
</div>

199
static/style.css
View File

@@ -1,3 +1,4 @@
/* ── Mission Control palette ──────────────────────── */
:root {
--bg-deep: #060d14;
--bg-panel: #0c1824;
@@ -14,20 +15,32 @@
--red: #ff4455;
--red-dim: #7a1a22;
--blue: #00aaff;
--font: 'JetBrains Mono', 'Courier New', monospace;
--header-h: 52px;
--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; margin: 0; padding: 0; }
* { box-sizing: border-box; }
body {
font-family: var(--font);
background: var(--bg-deep);
color: var(--text);
font-family: var(--font);
font-size: 13px;
min-height: 100dvh;
overflow-x: hidden;
/* prevent bounce-scroll from revealing background on iOS */
overscroll-behavior: none;
}
@@ -63,24 +76,40 @@ body {
letter-spacing: 0.1em;
}
/* ── Layout — desktop ────────────────────────────── */
/* ── Main layout ─────────────────────────────────── */
.mc-main {
display: grid;
grid-template-columns: 260px 1fr;
gap: 16px;
padding: 16px;
height: calc(100dvh - var(--header-h));
overflow: hidden;
}
.mc-content {
height: 100%;
}
.mc-content > .row {
height: 100%;
}
/* ── Panels ──────────────────────────────────────── */
.panel {
/* ── Sidebar ─────────────────────────────────────── */
.mc-sidebar {
overflow-y: auto;
}
/* ── Chat column ─────────────────────────────────── */
.mc-chat-panel {
min-height: 0;
}
.mc-chat-panel > .card {
height: 100%;
overflow: hidden;
}
/* ── Panel / Card overrides ──────────────────────── */
.mc-panel {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.panel-header {
padding: 8px 14px;
.mc-panel-header {
background: var(--bg-card);
border-bottom: 1px solid var(--border);
font-size: 10px;
@@ -88,36 +117,22 @@ body {
color: var(--text-dim);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.panel-body { padding: 14px; }
/* ── Sidebar — desktop ───────────────────────────── */
.sidebar {
grid-column: 1;
display: flex;
flex-direction: column;
gap: 16px;
overflow-y: auto;
padding: 8px 14px;
}
/* ── Agent Card ──────────────────────────────────── */
.agent-card {
.mc-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;
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); }
@@ -145,28 +160,15 @@ body {
.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); }
/* Status badges (use Bootstrap .badge base + mc-badge-* modifier) */
.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 Panel ──────────────────────────────────── */
.chat-panel {
display: flex;
flex-direction: column;
grid-column: 2;
min-height: 0;
}
/* ── Chat ────────────────────────────────────────── */
.chat-log {
flex: 1;
overflow-y: auto;
padding: 14px;
-webkit-overflow-scrolling: touch;
}
.chat-message { margin-bottom: 16px; }
@@ -193,34 +195,31 @@ body {
.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 {
/* ── Chat input footer ───────────────────────────── */
.mc-chat-footer {
padding: 12px 14px;
/* safe area for iPhone home bar */
padding-bottom: max(12px, env(safe-area-inset-bottom));
background: var(--bg-card);
border-top: 1px solid var(--border);
display: flex;
gap: 8px;
flex-shrink: 0;
}
.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;
/* Bootstrap form-control overrides */
.mc-input {
background: var(--bg-deep) !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;
}
.chat-input-bar input:focus {
border-color: var(--border-glow);
box-shadow: 0 0 0 1px var(--border-glow);
.mc-input:focus {
border-color: var(--border-glow) !important;
box-shadow: 0 0 0 1px var(--border-glow) !important;
}
.chat-input-bar input::placeholder { color: var(--text-dim); }
.chat-input-bar button {
.mc-input::placeholder { color: var(--text-dim) !important; }
.mc-btn-send {
background: var(--border-glow);
border: none;
border-radius: 3px;
@@ -229,13 +228,12 @@ body {
font-size: 12px;
font-weight: 700;
padding: 8px 18px;
cursor: pointer;
letter-spacing: 0.12em;
transition: background 0.15s, color 0.15s;
/* prevent double-tap zoom on iOS */
touch-action: manipulation;
white-space: nowrap;
}
.chat-input-bar button:hover { background: var(--blue); color: var(--bg-deep); }
.mc-btn-send:hover { background: var(--blue); color: var(--bg-deep); }
/* ── HTMX Loading ────────────────────────────────── */
.htmx-indicator { display: none; }
@@ -263,63 +261,38 @@ body {
.mc-subtitle { display: none; }
.mc-time { font-size: 12px; }
/* Single-column stack; sidebar on top, chat below */
.mc-main {
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
padding: 8px;
gap: 8px;
height: calc(100dvh - var(--header-h));
}
/* 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 */
.sidebar {
grid-column: 1;
grid-row: 1;
flex-direction: row;
.mc-sidebar {
flex-direction: row !important;
overflow-x: auto;
overflow-y: hidden;
gap: 8px;
flex-shrink: 0;
scrollbar-width: none; /* Firefox */
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.sidebar::-webkit-scrollbar { display: none; }
/* Each panel card has a fixed width so they don't squash */
.sidebar .panel {
.mc-sidebar::-webkit-scrollbar { display: none; }
.mc-sidebar .mc-panel {
min-width: 200px;
flex-shrink: 0;
}
/* Chat fills remaining vertical space */
.chat-panel {
grid-column: 1;
grid-row: 2;
min-height: 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; }
.chat-log { padding: 10px !important; }
.msg-body { padding: 8px 10px; font-size: 13px; }
.chat-message { margin-bottom: 12px; }
/* Touch-friendly input bar */
.chat-input-bar {
/* Touch-friendly input */
.mc-chat-footer {
padding: 8px 10px;
padding-bottom: max(8px, env(safe-area-inset-bottom));
gap: 6px;
}
.chat-input-bar input {
/* 16px prevents iOS from zooming when the field focuses */
font-size: 16px;
min-height: 44px;
padding: 0 12px;
}
.chat-input-bar button {
min-height: 44px;
min-width: 64px;
font-size: 12px;
padding: 0 14px;
}
.mc-input { font-size: 16px !important; min-height: 44px; }
.mc-btn-send { min-height: 44px; min-width: 64px; font-size: 12px; padding: 0 14px; }
}