forked from Rockachopa/Timmy-time-dashboard
3a3b03e1e8
- Remove stale STATUS.md and DEVELOPMENT_REPORT.md (content superseded) - Rewrite README.md to reflect v2 state (228 tests, swarm, L402, voice, WebSocket, mobile; Makefile commands; updated architecture diagram) - Add AGENTS.md — per-agent development standards for Claude, Kimi, and Manus; coding conventions, architecture patterns, roadmap, file layout - Add Makefile — install, dev, test, test-cov, watch, lint, clean targets - Add docs/index.html — GitHub Pages landing page (dark mission-control theme, scanline overlay, feature grid, architecture diagram, quickstart steps, agent team cards, roadmap, stats bar) https://claude.ai/code/session_0181LU8dCresHiLzYxjK4vUC
927 lines
31 KiB
HTML
927 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||
<title>Timmy Time — Mission Control</title>
|
||
<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@400;600;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
/* ── Reset & base ────────────────────────────────────────────────────── */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
: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;
|
||
--amber: #ffb800;
|
||
--red: #ff4455;
|
||
--blue: #00aaff;
|
||
--purple: #aa77ff;
|
||
--font: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
background: var(--bg-deep);
|
||
color: var(--text);
|
||
font-family: var(--font);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
a { color: var(--blue); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
|
||
/* ── Scanline overlay ────────────────────────────────────────────────── */
|
||
body::before {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(0, 170, 255, 0.012) 2px,
|
||
rgba(0, 170, 255, 0.012) 4px
|
||
);
|
||
pointer-events: none;
|
||
z-index: 999;
|
||
}
|
||
|
||
/* ── Header ──────────────────────────────────────────────────────────── */
|
||
header {
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--bg-panel);
|
||
padding: 0 2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 56px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--blue);
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.logo span { color: var(--text-dim); }
|
||
|
||
nav { display: flex; gap: 1.5rem; align-items: center; }
|
||
nav a {
|
||
color: var(--text-dim);
|
||
font-size: 12px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
transition: color 0.2s;
|
||
}
|
||
nav a:hover { color: var(--blue); text-decoration: none; }
|
||
|
||
.btn-primary {
|
||
background: var(--blue);
|
||
color: #000;
|
||
font-family: var(--font);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
padding: 8px 18px;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.2s, box-shadow 0.2s;
|
||
display: inline-block;
|
||
}
|
||
.btn-primary:hover {
|
||
background: #33bbff;
|
||
box-shadow: 0 0 16px rgba(0, 170, 255, 0.4);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* ── Hero ────────────────────────────────────────────────────────────── */
|
||
.hero {
|
||
padding: 7rem 2rem 5rem;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -80px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 600px;
|
||
height: 600px;
|
||
background: radial-gradient(circle, rgba(0, 170, 255, 0.08) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-label {
|
||
font-size: 11px;
|
||
letter-spacing: 0.25em;
|
||
color: var(--blue);
|
||
text-transform: uppercase;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(2rem, 6vw, 4.5rem);
|
||
font-weight: 700;
|
||
color: var(--text-bright);
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.1;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.hero h1 em {
|
||
font-style: normal;
|
||
color: var(--blue);
|
||
}
|
||
|
||
.hero-sub {
|
||
font-size: clamp(13px, 2vw, 16px);
|
||
color: var(--text-dim);
|
||
max-width: 560px;
|
||
margin: 0 auto 2.5rem;
|
||
}
|
||
|
||
.hero-badges {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.badge {
|
||
font-size: 11px;
|
||
letter-spacing: 0.05em;
|
||
padding: 4px 12px;
|
||
border: 1px solid var(--border-glow);
|
||
color: var(--text-dim);
|
||
background: var(--bg-panel);
|
||
}
|
||
|
||
.badge.green { border-color: var(--green); color: var(--green); }
|
||
.badge.amber { border-color: var(--amber); color: var(--amber); }
|
||
.badge.blue { border-color: var(--blue); color: var(--blue); }
|
||
.badge.purple { border-color: var(--purple); color: var(--purple); }
|
||
|
||
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
|
||
|
||
.btn-ghost {
|
||
border: 1px solid var(--border-glow);
|
||
color: var(--text);
|
||
font-family: var(--font);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
padding: 8px 18px;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s, color 0.2s;
|
||
display: inline-block;
|
||
}
|
||
.btn-ghost:hover {
|
||
border-color: var(--blue);
|
||
color: var(--blue);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* ── Stats bar ───────────────────────────────────────────────────────── */
|
||
.stats {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 0;
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--bg-panel);
|
||
}
|
||
|
||
.stat {
|
||
flex: 1;
|
||
max-width: 200px;
|
||
padding: 1.5rem 1rem;
|
||
text-align: center;
|
||
border-right: 1px solid var(--border);
|
||
}
|
||
.stat:last-child { border-right: none; }
|
||
|
||
.stat-number {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--blue);
|
||
line-height: 1;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 11px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
/* ── Section layout ──────────────────────────────────────────────────── */
|
||
section { padding: 5rem 2rem; max-width: 1100px; margin: 0 auto; }
|
||
|
||
.section-label {
|
||
font-size: 11px;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: var(--blue);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
section h2 {
|
||
font-size: clamp(1.4rem, 3vw, 2.2rem);
|
||
font-weight: 700;
|
||
color: var(--text-bright);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.section-intro {
|
||
color: var(--text-dim);
|
||
max-width: 620px;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
/* ── Feature grid ────────────────────────────────────────────────────── */
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1px;
|
||
border: 1px solid var(--border);
|
||
background: var(--border);
|
||
}
|
||
|
||
.feature-card {
|
||
background: var(--bg-panel);
|
||
padding: 2rem;
|
||
transition: background 0.2s;
|
||
}
|
||
.feature-card:hover { background: var(--bg-card); }
|
||
|
||
.feature-icon {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
display: block;
|
||
}
|
||
|
||
.feature-card h3 {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--text-bright);
|
||
margin-bottom: 0.5rem;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.feature-card p {
|
||
font-size: 13px;
|
||
color: var(--text-dim);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.feature-tag {
|
||
display: inline-block;
|
||
font-size: 10px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
padding: 2px 8px;
|
||
margin-top: 0.75rem;
|
||
border: 1px solid var(--border);
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
/* ── Architecture ────────────────────────────────────────────────────── */
|
||
.arch-wrap {
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-panel);
|
||
padding: 2rem;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.arch-wrap pre {
|
||
font-family: var(--font);
|
||
font-size: 12px;
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
white-space: pre;
|
||
}
|
||
|
||
.arch-wrap pre .hl-blue { color: var(--blue); }
|
||
.arch-wrap pre .hl-green { color: var(--green); }
|
||
.arch-wrap pre .hl-amber { color: var(--amber); }
|
||
.arch-wrap pre .hl-purple { color: var(--purple); }
|
||
.arch-wrap pre .hl-dim { color: var(--text-dim); }
|
||
|
||
/* ── Quickstart ──────────────────────────────────────────────────────── */
|
||
.quickstart-steps { display: flex; flex-direction: column; gap: 1.5rem; }
|
||
|
||
.step {
|
||
display: grid;
|
||
grid-template-columns: 48px 1fr;
|
||
gap: 1.25rem;
|
||
align-items: start;
|
||
}
|
||
|
||
.step-num {
|
||
width: 48px;
|
||
height: 48px;
|
||
border: 1px solid var(--border-glow);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
color: var(--blue);
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.step h4 {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--text-bright);
|
||
margin-bottom: 0.5rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.step p { font-size: 13px; color: var(--text-dim); margin-bottom: 0.5rem; }
|
||
|
||
code {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
padding: 0.15em 0.5em;
|
||
font-family: var(--font);
|
||
font-size: 12px;
|
||
color: var(--green);
|
||
}
|
||
|
||
pre.codeblock {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
padding: 1.25rem 1.5rem;
|
||
font-family: var(--font);
|
||
font-size: 12px;
|
||
color: var(--text);
|
||
line-height: 1.7;
|
||
overflow-x: auto;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
pre.codeblock .cmd { color: var(--green); }
|
||
pre.codeblock .cmt { color: var(--text-dim); }
|
||
pre.codeblock .flag { color: var(--amber); }
|
||
|
||
/* ── Agent team ──────────────────────────────────────────────────────── */
|
||
.agent-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
gap: 1px;
|
||
border: 1px solid var(--border);
|
||
background: var(--border);
|
||
}
|
||
|
||
.agent-card {
|
||
background: var(--bg-panel);
|
||
padding: 2rem;
|
||
position: relative;
|
||
}
|
||
|
||
.agent-accent {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
}
|
||
|
||
.agent-name {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: var(--text-bright);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.agent-role {
|
||
font-size: 11px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-dim);
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.agent-list {
|
||
list-style: none;
|
||
font-size: 12px;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
.agent-list li { padding: 0.2rem 0; }
|
||
.agent-list li::before { content: '→ '; color: var(--border-glow); }
|
||
|
||
/* ── Roadmap ─────────────────────────────────────────────────────────── */
|
||
.roadmap { display: flex; flex-direction: column; gap: 0; }
|
||
|
||
.roadmap-item {
|
||
display: grid;
|
||
grid-template-columns: 120px 1fr;
|
||
gap: 0;
|
||
border: 1px solid var(--border);
|
||
margin-top: -1px;
|
||
}
|
||
|
||
.roadmap-version {
|
||
background: var(--bg-card);
|
||
border-right: 1px solid var(--border);
|
||
padding: 1.5rem 1.25rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.roadmap-ver-num {
|
||
font-weight: 700;
|
||
color: var(--blue);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.roadmap-ver-name {
|
||
font-size: 11px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-dim);
|
||
margin-top: 0.15rem;
|
||
}
|
||
|
||
.roadmap-content { padding: 1.5rem 1.5rem; }
|
||
|
||
.roadmap-status {
|
||
font-size: 11px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.roadmap-content h4 {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--text-bright);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.roadmap-content p { font-size: 12px; color: var(--text-dim); }
|
||
|
||
/* ── Footer ──────────────────────────────────────────────────────────── */
|
||
footer {
|
||
border-top: 1px solid var(--border);
|
||
background: var(--bg-panel);
|
||
padding: 2rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.footer-copy {
|
||
font-size: 11px;
|
||
color: var(--text-dim);
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.footer-links { display: flex; gap: 1.5rem; }
|
||
.footer-links a {
|
||
font-size: 11px;
|
||
color: var(--text-dim);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
transition: color 0.2s;
|
||
}
|
||
.footer-links a:hover { color: var(--blue); text-decoration: none; }
|
||
|
||
/* ── Divider ─────────────────────────────────────────────────────────── */
|
||
.divider {
|
||
border: none;
|
||
border-top: 1px solid var(--border);
|
||
margin: 0;
|
||
}
|
||
|
||
/* ── Responsive ──────────────────────────────────────────────────────── */
|
||
@media (max-width: 640px) {
|
||
header { padding: 0 1rem; }
|
||
nav { display: none; }
|
||
.hero { padding: 4rem 1rem 3rem; }
|
||
.stats { flex-wrap: wrap; }
|
||
.stat { max-width: none; flex: 0 0 50%; border-right: none;
|
||
border-bottom: 1px solid var(--border); }
|
||
section { padding: 3rem 1rem; }
|
||
.roadmap-item { grid-template-columns: 1fr; }
|
||
.roadmap-version { border-right: none; border-bottom: 1px solid var(--border); }
|
||
footer { flex-direction: column; align-items: flex-start; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ── Header ──────────────────────────────────────────────────────────── -->
|
||
<header>
|
||
<div class="logo">TIMMY TIME <span>// MISSION CONTROL</span></div>
|
||
<nav>
|
||
<a href="#features">Features</a>
|
||
<a href="#architecture">Architecture</a>
|
||
<a href="#quickstart">Quickstart</a>
|
||
<a href="#agents">Agent Team</a>
|
||
<a href="#roadmap">Roadmap</a>
|
||
<a class="btn-primary" href="https://github.com/Alexspayne/Timmy-time-dashboard">GitHub →</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- ── Hero ────────────────────────────────────────────────────────────── -->
|
||
<section class="hero" style="max-width:100%; padding-left:2rem; padding-right:2rem;">
|
||
<p class="hero-label">Sovereign AI Agent System</p>
|
||
<h1>Your agents.<br><em>Your hardware.</em><br>Your sats.</h1>
|
||
<p class="hero-sub">
|
||
A local-first AI command center. Talk to Timmy, coordinate your swarm,
|
||
gate API access with Bitcoin Lightning — no cloud, no telemetry, no compromise.
|
||
</p>
|
||
<div class="hero-badges">
|
||
<span class="badge green">228 Tests Passing</span>
|
||
<span class="badge blue">FastAPI + HTMX</span>
|
||
<span class="badge amber">Lightning L402</span>
|
||
<span class="badge">No Cloud</span>
|
||
<span class="badge purple">Multi-Agent Swarm</span>
|
||
<span class="badge">MIT License</span>
|
||
</div>
|
||
<div class="hero-cta">
|
||
<a class="btn-primary" href="https://github.com/Alexspayne/Timmy-time-dashboard">View on GitHub</a>
|
||
<a class="btn-ghost" href="#quickstart">Get Started</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── Stats ────────────────────────────────────────────────────────────── -->
|
||
<div class="stats">
|
||
<div class="stat">
|
||
<div class="stat-number">228</div>
|
||
<div class="stat-label">Tests Passing</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-number">20+</div>
|
||
<div class="stat-label">API Endpoints</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-number">11</div>
|
||
<div class="stat-label">Subsystems</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-number">0</div>
|
||
<div class="stat-label">Cloud Calls</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider" />
|
||
|
||
<!-- ── Features ─────────────────────────────────────────────────────────── -->
|
||
<section id="features">
|
||
<p class="section-label">Capabilities</p>
|
||
<h2>Everything in one dashboard</h2>
|
||
<p class="section-intro">
|
||
Built for the operator who wants sovereignty without sacrificing capability.
|
||
Every subsystem works offline.
|
||
</p>
|
||
<div class="feature-grid">
|
||
|
||
<div class="feature-card">
|
||
<span class="feature-icon">🤖</span>
|
||
<h3>Timmy Agent</h3>
|
||
<p>Agno-powered conversational agent backed by Ollama (llama3.2 default) or
|
||
AirLLM for 70B–405B models on Apple Silicon. SQLite memory, no cloud.</p>
|
||
<span class="feature-tag">Agno · Ollama · AirLLM</span>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<span class="feature-icon">🌐</span>
|
||
<h3>Mission Control UI</h3>
|
||
<p>FastAPI backend with Jinja2 + HTMX frontend. Dark terminal aesthetic.
|
||
Real-time health polling, chat history, live swarm feed — no JavaScript framework.</p>
|
||
<span class="feature-tag">FastAPI · HTMX · Bootstrap 5</span>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<span class="feature-icon">🐝</span>
|
||
<h3>Multi-Agent Swarm</h3>
|
||
<p>Spawn sub-agents, post tasks, run 15-second Lightning auctions. Registry,
|
||
manager, bidder, and coordinator — all in-process or as separate subprocesses.</p>
|
||
<span class="feature-tag">Coordinator · Registry · Auction</span>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<span class="feature-icon">⚡</span>
|
||
<h3>L402 Lightning Payments</h3>
|
||
<p>Bitcoin Lightning payment gating via HMAC macaroons. Mock backend for dev,
|
||
LND gRPC-ready for production. Agents earn and spend sats autonomously.</p>
|
||
<span class="feature-tag">L402 · Macaroon · BOLT11</span>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<span class="feature-icon">🎙️</span>
|
||
<h3>Voice I/O</h3>
|
||
<p>Pattern-matched NLU detects intents (status, swarm, task, help) from natural
|
||
language. TTS via pyttsx3 speaks responses aloud. Fully offline.</p>
|
||
<span class="feature-tag">NLU · pyttsx3 · Intent Detection</span>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<span class="feature-icon">📱</span>
|
||
<h3>Mobile Optimized</h3>
|
||
<p>iOS safe-area, 44px touch targets, 16px inputs (no zoom), momentum scroll,
|
||
dynamic viewport height. 21-scenario HITL test harness built in.</p>
|
||
<span class="feature-tag">iOS · HITL · Responsive</span>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<span class="feature-icon">🔴</span>
|
||
<h3>WebSocket Live Feed</h3>
|
||
<p>Real-time swarm events — agent joins, task posts, auction bids, completions —
|
||
broadcast over WebSocket to the live dashboard.</p>
|
||
<span class="feature-tag">WebSocket · Live Events</span>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<span class="feature-icon">🛡️</span>
|
||
<h3>Security First</h3>
|
||
<p>XSS prevention via textContent (not innerHTML). Startup warnings for default
|
||
secrets. HMAC-signed macaroons. Graceful degradation on every optional service.</p>
|
||
<span class="feature-tag">XSS-safe · HMAC · Warnings</span>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<span class="feature-icon">🔧</span>
|
||
<h3>Self-TDD Watchdog</h3>
|
||
<p>Continuous test runner polls pytest every 60 seconds and alerts on regressions.
|
||
Runs alongside dev work in the background — silent when green.</p>
|
||
<span class="feature-tag">pytest · self-tdd · CI</span>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider" />
|
||
|
||
<!-- ── Architecture ──────────────────────────────────────────────────────── -->
|
||
<section id="architecture">
|
||
<p class="section-label">System Design</p>
|
||
<h2>Architecture</h2>
|
||
<p class="section-intro">
|
||
A layered local stack. Every dependency can degrade gracefully — Ollama offline?
|
||
Error message. Redis missing? In-memory pub/sub. pyttsx3 absent? TTS is a no-op.
|
||
</p>
|
||
<div class="arch-wrap">
|
||
<pre>
|
||
<span class="hl-blue">Browser / Phone</span>
|
||
│ HTTP + HTMX + WebSocket
|
||
▼
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ <span class="hl-blue">FastAPI (dashboard.app)</span> │
|
||
│ routes: agents · health · swarm · marketplace · voice │
|
||
└────────┬──────────────┬────────────────┬────────────────┘
|
||
│ │ │
|
||
▼ ▼ ▼
|
||
<span class="hl-green">Jinja2</span> <span class="hl-amber">Timmy Agent</span> <span class="hl-purple">Swarm Coordinator</span>
|
||
Templates │ ├─ Registry (SQLite)
|
||
(HTMX) ├─ <span class="hl-green">Ollama</span> ├─ AuctionManager (15s bids)
|
||
└─ <span class="hl-amber">AirLLM</span> ├─ SwarmComms (Redis / mem)
|
||
(70B–405B) └─ SwarmManager (subprocess)
|
||
│
|
||
├── <span class="hl-blue">Voice NLU + TTS</span> (pyttsx3, local)
|
||
├── <span class="hl-blue">WebSocket live feed</span> (ws_manager)
|
||
├── <span class="hl-amber">L402 Lightning proxy</span> (macaroon + BOLT11 invoice)
|
||
├── <span class="hl-green">Push notifications</span> (local + macOS native)
|
||
└── Siri Shortcuts API (iOS automation endpoints)
|
||
|
||
<span class="hl-dim">Persistence: timmy.db (Agno memory) · data/swarm.db (registry + tasks)
|
||
External: Ollama :11434 · optional Redis · optional LND gRPC</span>
|
||
</pre>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider" />
|
||
|
||
<!-- ── Quickstart ─────────────────────────────────────────────────────────── -->
|
||
<section id="quickstart">
|
||
<p class="section-label">Get Running</p>
|
||
<h2>Quickstart</h2>
|
||
<p class="section-intro">
|
||
Five minutes from zero to a running agent. You need Python 3.11+ and Ollama.
|
||
</p>
|
||
<div class="quickstart-steps">
|
||
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<div>
|
||
<h4>Clone</h4>
|
||
<pre class="codeblock"><span class="cmd">git clone</span> https://github.com/Alexspayne/Timmy-time-dashboard.git
|
||
<span class="cmd">cd</span> Timmy-time-dashboard</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<div>
|
||
<h4>Install</h4>
|
||
<pre class="codeblock"><span class="cmd">make install</span>
|
||
<span class="cmt"># or manually:</span>
|
||
<span class="cmd">python3 -m venv</span> .venv <span class="cmt">&&</span> <span class="cmd">source</span> .venv/bin/activate
|
||
<span class="cmd">pip install</span> -e ".[dev]"</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<div>
|
||
<h4>Start Ollama</h4>
|
||
<pre class="codeblock"><span class="cmt"># In a separate terminal:</span>
|
||
<span class="cmd">ollama serve</span>
|
||
<span class="cmd">ollama pull</span> llama3.2 <span class="cmt"># ~2 GB, one-time download</span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-num">4</div>
|
||
<div>
|
||
<h4>Launch</h4>
|
||
<pre class="codeblock"><span class="cmd">make dev</span>
|
||
<span class="cmt"># Opens at http://localhost:8000</span>
|
||
<span class="cmt"># Mobile: http://<your-lan-ip>:8000</span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-num">5</div>
|
||
<div>
|
||
<h4>Test</h4>
|
||
<pre class="codeblock"><span class="cmd">make test</span> <span class="cmt"># 228 tests — no Ollama needed</span>
|
||
<span class="cmd">make test-cov</span> <span class="cmt"># + coverage report</span>
|
||
<span class="cmd">make watch</span> <span class="cmt"># self-TDD watchdog in background</span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider" />
|
||
|
||
<!-- ── Agent Team ─────────────────────────────────────────────────────────── -->
|
||
<section id="agents">
|
||
<p class="section-label">Contributors</p>
|
||
<h2>The agent team</h2>
|
||
<p class="section-intro">
|
||
This repo is built by a multi-agent team. Each tool has a defined lane.
|
||
See <a href="https://github.com/Alexspayne/Timmy-time-dashboard/blob/main/AGENTS.md">AGENTS.md</a>
|
||
for the full development standards.
|
||
</p>
|
||
<div class="agent-grid">
|
||
|
||
<div class="agent-card">
|
||
<div class="agent-accent" style="background: var(--blue);"></div>
|
||
<div class="agent-name">Claude</div>
|
||
<div class="agent-role">Anthropic · Architect</div>
|
||
<ul class="agent-list">
|
||
<li>Foundation, scaffolding, CI</li>
|
||
<li>Testing and quality passes</li>
|
||
<li>Documentation and tooling</li>
|
||
<li>Iterative refinement</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="agent-card">
|
||
<div class="agent-accent" style="background: var(--purple);"></div>
|
||
<div class="agent-name">Kimi</div>
|
||
<div class="agent-role">Moonshot AI · Feature Engine</div>
|
||
<ul class="agent-list">
|
||
<li>High-volume feature drops</li>
|
||
<li>New subsystem builds</li>
|
||
<li>Large context, rapid expansion</li>
|
||
<li>Agent persona implementation</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="agent-card">
|
||
<div class="agent-accent" style="background: var(--amber);"></div>
|
||
<div class="agent-name">Manus</div>
|
||
<div class="agent-role">Manus AI · Security Specialist</div>
|
||
<ul class="agent-list">
|
||
<li>Security audits (XSS, injection)</li>
|
||
<li>Coverage gap analysis</li>
|
||
<li>Targeted bug fixes</li>
|
||
<li>Payment flow validation</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="agent-card">
|
||
<div class="agent-accent" style="background: var(--text-dim);"></div>
|
||
<div class="agent-name">Alex Payne</div>
|
||
<div class="agent-role">Human · Orchestrator</div>
|
||
<ul class="agent-list">
|
||
<li>Vision and product decisions</li>
|
||
<li>Agent task assignment</li>
|
||
<li>PR review and merge</li>
|
||
<li>Bitcoin / Lightning domain</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider" />
|
||
|
||
<!-- ── Roadmap ────────────────────────────────────────────────────────────── -->
|
||
<section id="roadmap">
|
||
<p class="section-label">What's Next</p>
|
||
<h2>Roadmap</h2>
|
||
<p class="section-intro">Three phases, each named after a book.</p>
|
||
<div class="roadmap">
|
||
|
||
<div class="roadmap-item">
|
||
<div class="roadmap-version">
|
||
<div class="roadmap-ver-num">v1.0.0</div>
|
||
<div class="roadmap-ver-name">Genesis</div>
|
||
</div>
|
||
<div class="roadmap-content">
|
||
<div class="roadmap-status" style="color:var(--green);">✓ Complete</div>
|
||
<h4>Foundation</h4>
|
||
<p>Agno + Ollama + SQLite + FastAPI dashboard + HTMX + 228 tests.
|
||
CLI, mobile layout, Bootstrap, CI/CD, AirLLM big-brain backend.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="roadmap-item">
|
||
<div class="roadmap-version">
|
||
<div class="roadmap-ver-num">v2.0.0</div>
|
||
<div class="roadmap-ver-name">Exodus</div>
|
||
</div>
|
||
<div class="roadmap-content">
|
||
<div class="roadmap-status" style="color:var(--amber);">⟳ In progress</div>
|
||
<h4>Multi-Agent Economy</h4>
|
||
<p>Swarm coordination, L402 Lightning payment gating, voice NLU/TTS,
|
||
marketplace, WebSocket live feed. Agent personas: Echo, Mace, Helm,
|
||
Seer, Forge, Quill. Real LND gRPC backend.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="roadmap-item">
|
||
<div class="roadmap-version">
|
||
<div class="roadmap-ver-num">v3.0.0</div>
|
||
<div class="roadmap-ver-name">Revelation</div>
|
||
</div>
|
||
<div class="roadmap-content">
|
||
<div class="roadmap-status" style="color:var(--text-dim);">◌ Planned</div>
|
||
<h4>Sovereign Deployment</h4>
|
||
<p>Bitcoin Lightning treasury — agents earn and spend sats autonomously.
|
||
Single <code>.app</code> bundle for macOS (no Python install).
|
||
Federation between Timmy instances.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider" />
|
||
|
||
<!-- ── Footer ────────────────────────────────────────────────────────────── -->
|
||
<footer>
|
||
<div class="footer-copy">
|
||
TIMMY TIME // MISSION CONTROL · MIT License ·
|
||
No cloud. No telemetry. Sats are sovereignty.
|
||
</div>
|
||
<div class="footer-links">
|
||
<a href="https://github.com/Alexspayne/Timmy-time-dashboard">GitHub</a>
|
||
<a href="https://github.com/Alexspayne/Timmy-time-dashboard/blob/main/AGENTS.md">AGENTS.md</a>
|
||
<a href="https://github.com/Alexspayne/Timmy-time-dashboard/blob/main/README.md">README</a>
|
||
<a href="https://github.com/Alexspayne/Timmy-time-dashboard/issues">Issues</a>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|