<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Roboticus Dashboard</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=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23060e20'/%3E%3Crect x='10' y='5' width='12' height='18' rx='0.8' fill='none' stroke='%23c180ff' stroke-width='2'/%3E%3Ccircle cx='13.6' cy='11.5' r='1.35' fill='%23c180ff'/%3E%3Ccircle cx='18.4' cy='11.5' r='1.35' fill='%23c180ff'/%3E%3Crect x='13.6' y='16.8' width='4.8' height='1.35' fill='%23c180ff'/%3E%3Crect x='15' y='23' width='2' height='4' fill='%23c180ff'/%3E%3C/svg%3E">
<style>
/* {CSS} */
</style>
</head>
<body>
<div class="layout">
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<svg class="robot-icon" viewBox="0 0 32 32" width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="2" fill="var(--surface-4, #142449)"/>
<rect x="10" y="5" width="12" height="18" rx="0.8" fill="none" stroke="var(--robot-color, #c180ff)" stroke-width="2"/>
<circle cx="13.6" cy="11.5" r="1.35" fill="var(--robot-color, #c180ff)"/>
<circle cx="18.4" cy="11.5" r="1.35" fill="var(--robot-color, #c180ff)"/>
<rect x="13.6" y="16.8" width="4.8" height="1.35" fill="var(--robot-color, #c180ff)"/>
<rect x="15" y="23" width="2" height="4" fill="var(--robot-color, #c180ff)"/>
</svg>
<div class="sidebar-brand">
<div class="sidebar-title glow-text">ROBOTICUS</div>
<div class="sidebar-subtitle">AI MANAGEMENT</div>
<div class="agent-badge" id="agent-badge">
<div class="status-dot" id="agent-dot"></div>
<span id="agent-state">—</span>
</div>
</div>
</div>
<nav class="sidebar-nav">
<a href="#overview" data-page="overview" class="active"><svg class="nav-icon" viewBox="0 0 16 16"><rect x="1" y="1" width="6" height="6" rx="1" fill="currentColor"/><rect x="9" y="1" width="6" height="3" rx="1" fill="currentColor"/><rect x="1" y="9" width="6" height="3" rx="1" fill="currentColor"/><rect x="9" y="6" width="6" height="9" rx="1" fill="currentColor"/><rect x="1" y="14" width="6" height="1" rx=".5" fill="currentColor"/></svg><span class="nav-label">Overview</span></a>
<a href="#sessions" data-page="sessions"><svg class="nav-icon" viewBox="0 0 16 16"><path d="M2 1h12a1 1 0 011 1v8a1 1 0 01-1 1H5.5L2 14V2a1 1 0 010-1z" fill="none" stroke="currentColor" stroke-width="1.5"/><line x1="5" y1="5" x2="11" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="5" y1="8" x2="9" y2="8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg><span class="nav-label">Sessions</span></a>
<a href="#context" data-page="context"><svg class="nav-icon" viewBox="0 0 16 16"><path d="M8 1.5l5.5 2v5c0 3.1-2.2 5.6-5.5 6.6-3.3-1-5.5-3.5-5.5-6.6v-5z" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="7" r="1.4" fill="currentColor"/><path d="M5.5 10c.7-1 1.5-1.5 2.5-1.5s1.8.5 2.5 1.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg><span class="nav-label">Context</span></a>
<a href="#memory" data-page="memory"><svg class="nav-icon" viewBox="0 0 16 16"><rect x="3" y="2" width="10" height="12" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.5"/><line x1="1" y1="5" x2="3" y2="5" stroke="currentColor" stroke-width="1.2"/><line x1="1" y1="8" x2="3" y2="8" stroke="currentColor" stroke-width="1.2"/><line x1="1" y1="11" x2="3" y2="11" stroke="currentColor" stroke-width="1.2"/><line x1="13" y1="5" x2="15" y2="5" stroke="currentColor" stroke-width="1.2"/><line x1="13" y1="8" x2="15" y2="8" stroke="currentColor" stroke-width="1.2"/><line x1="13" y1="11" x2="15" y2="11" stroke="currentColor" stroke-width="1.2"/><circle cx="8" cy="8" r="2" fill="currentColor"/></svg><span class="nav-label">Memory</span></a>
<a href="#skills" data-page="skills"><svg class="nav-icon" viewBox="0 0 16 16"><path d="M8 1l1.8 3.6L14 5.3l-3 2.9.7 4.1L8 10.5l-3.7 1.8.7-4.1-3-2.9 4.2-.7z" fill="currentColor"/></svg><span class="nav-label">Skills & Plugins</span></a>
<a href="#agents" data-page="agents"><svg class="nav-icon" viewBox="0 0 16 16"><circle cx="8" cy="4" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="13" cy="6" r="2" fill="currentColor" opacity=".5"/><circle cx="3" cy="6" r="2" fill="currentColor" opacity=".5"/></svg><span class="nav-label">Agents</span></a>
<a href="#scheduler" data-page="scheduler"><svg class="nav-icon" viewBox="0 0 16 16"><rect x="1.5" y="2.5" width="13" height="12" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.5"/><line x1="1.5" y1="6" x2="14.5" y2="6" stroke="currentColor" stroke-width="1.5"/><line x1="5" y1="1" x2="5" y2="4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="11" y1="1" x2="11" y2="4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><rect x="4" y="8.5" width="2" height="2" rx=".5" fill="currentColor"/><rect x="7" y="8.5" width="2" height="2" rx=".5" fill="currentColor"/><rect x="10" y="8.5" width="2" height="2" rx=".5" fill="currentColor"/><rect x="4" y="11.5" width="2" height="1.5" rx=".5" fill="currentColor"/></svg><span class="nav-label">Scheduler</span></a>
<a href="#integrations" data-page="integrations"><svg class="nav-icon" viewBox="0 0 16 16"><circle cx="8" cy="8" r="2" fill="currentColor"/><circle cx="3" cy="4" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="13" cy="4" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="3" cy="12" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="13" cy="12" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><line x1="4.3" y1="5.2" x2="6.5" y2="7" stroke="currentColor" stroke-width="1.2"/><line x1="11.7" y1="5.2" x2="9.5" y2="7" stroke="currentColor" stroke-width="1.2"/><line x1="4.3" y1="10.8" x2="6.5" y2="9" stroke="currentColor" stroke-width="1.2"/><line x1="11.7" y1="10.8" x2="9.5" y2="9" stroke="currentColor" stroke-width="1.2"/></svg><span class="nav-label">Integrations</span></a>
<a href="#metrics" data-page="metrics"><svg class="nav-icon" viewBox="0 0 16 16"><polyline points="1,12 4,7 7,9 10,3 14,6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><line x1="1" y1="14.5" x2="15" y2="14.5" stroke="currentColor" stroke-width="1.2"/></svg><span class="nav-label">Observability</span></a>
<a href="#efficiency" data-page="efficiency"><svg class="nav-icon" viewBox="0 0 16 16"><path d="M8 1v6l4.2 2.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="8" r="1" fill="currentColor"/></svg><span class="nav-label">Prompt Performance</span></a>
<a href="#wallet" data-page="wallet"><svg class="nav-icon" viewBox="0 0 16 16"><rect x="1" y="3" width="14" height="11" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M1 3V2.5A1.5 1.5 0 012.5 1h9L14 3" fill="none" stroke="currentColor" stroke-width="1.3"/><rect x="10" y="7" width="5" height="3" rx="1" fill="currentColor"/><circle cx="12.5" cy="8.5" r=".8" fill="var(--bg)"/></svg><span class="nav-label">Wallet</span></a>
<a href="#workspace" data-page="workspace"><svg class="nav-icon" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="5" cy="5.5" r="1.5" fill="currentColor"/><circle cx="11" cy="5.5" r="1.5" fill="currentColor"/><circle cx="8" cy="11" r="1.5" fill="currentColor"/><line x1="5" y1="7" x2="8" y2="9.5" stroke="currentColor" stroke-width="1" opacity=".5"/><line x1="11" y1="7" x2="8" y2="9.5" stroke="currentColor" stroke-width="1" opacity=".5"/></svg><span class="nav-label">Workspace</span></a>
<a href="#settings" data-page="settings"><svg class="nav-icon" viewBox="0 0 16 16"><path d="M6.5 1h3l.3 2.1a5.5 5.5 0 011.3.7L13 2.7l1.5 2.6-1.8 1.2a5.5 5.5 0 010 1.5l1.8 1.2-1.5 2.6-1.9-1.1a5.5 5.5 0 01-1.3.7L9.5 13.5h-3l-.3-2.1a5.5 5.5 0 01-1.3-.7L3 11.8l-1.5-2.6 1.8-1.2a5.5 5.5 0 010-1.5L1.5 5.3 3 2.7l1.9 1.1a5.5 5.5 0 011.3-.7L6.5 1zM8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z" fill="currentColor"/></svg><span class="nav-label">Settings</span></a>
<a id="sidebar-help-open" role="button" title="Help, docs, and hints" aria-haspopup="dialog" aria-controls="sidebar-help-dialog"><svg class="nav-icon" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/><text x="8" y="11.5" text-anchor="middle" fill="currentColor" font-size="10" font-weight="700" font-family="var(--font)">?</text></svg><span class="nav-label">Help</span></a>
</nav>
<button class="sidebar-collapse-btn" id="sidebar-collapse" title="Collapse sidebar">
<svg class="collapse-icon" viewBox="0 0 16 16"><path d="M10.3 2.3L4.6 8l5.7 5.7 1.1-1.1L6.8 8l4.6-4.6z" fill="currentColor"/></svg>
<span class="collapse-label">Collapse</span>
</button>
<div class="sidebar-footer">v<span id="version">—</span></div>
</aside>
<div class="main-wrap">
<header class="header-bar">
<span class="breadcrumb" id="breadcrumb">Overview</span>
<div style="display:flex;align-items:center;gap:0.75rem">
<div class="theme-picker">
<span style="font-size:0.6875rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em">Theme</span>
<button class="theme-btn" id="theme-toggle"><div class="theme-swatch"></div><span id="theme-name">AI Purple (Default)</span></button>
<div class="theme-dropdown" id="theme-dropdown"></div>
</div>
<button type="button" class="header-help-btn" id="header-help-open" title="Help, docs, and hints" aria-haspopup="dialog" aria-controls="sidebar-help-dialog"><svg viewBox="0 0 16 16" width="14" height="14"><circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/><text x="8" y="11.5" text-anchor="middle" fill="currentColor" font-size="10" font-weight="700">?</text></svg></button>
<div class="connection-status">
<div class="ws-dot off" id="ws-dot"></div>
<span id="ws-label">Connecting…</span>
</div>
</div>
</header>
<main class="content" id="content"></main>
</div>
</div>
<div class="crt-overlay"></div>
<div class="toast-container" id="toasts"></div>
<div id="sidebar-help-overlay" class="hint-pref-overlay" style="display:none" aria-hidden="true">
<div id="sidebar-help-dialog" class="hint-pref-modal" role="dialog" aria-modal="true" aria-labelledby="sidebar-help-title">
<h2 id="sidebar-help-title" class="hint-pref-title">Help & hints</h2>
<div class="hint-help-wiki-block">
<p class="hint-help-wiki-desc">Guides and reference material are maintained in the project wiki.</p>
<a id="sidebar-help-wiki-link" href="https://github.com/robot-accomplice/roboticus/wiki" target="_blank" rel="noopener noreferrer">Open Roboticus wiki →</a>
</div>
<div class="hint-help-toggle-row">
<span class="hint-help-toggle-label" id="modal-hints-label">Show contextual hints</span>
<label class="toggle" aria-labelledby="modal-hints-label"><input type="checkbox" id="modal-hints-toggle"><span class="toggle-track"></span></label>
</div>
<p class="hint-pref-copy" style="margin-top:0.85rem;margin-bottom:0">When hints are off, cards and dismissals stay as you left them until you turn hints back on.</p>
<div class="hint-pref-actions" style="margin-top:1rem">
<button type="button" class="btn" id="sidebar-help-close">Close</button>
</div>
</div>
</div>
<nav class="mobile-nav">
<a href="#overview" data-page="overview"><svg class="nav-icon" viewBox="0 0 16 16"><rect x="1" y="1" width="6" height="6" rx="1" fill="currentColor"/><rect x="9" y="1" width="6" height="3" rx="1" fill="currentColor"/><rect x="1" y="9" width="6" height="3" rx="1" fill="currentColor"/><rect x="9" y="6" width="6" height="9" rx="1" fill="currentColor"/><rect x="1" y="14" width="6" height="1" rx=".5" fill="currentColor"/></svg>Overview</a>
<a href="#sessions" data-page="sessions"><svg class="nav-icon" viewBox="0 0 16 16"><path d="M2 1h12a1 1 0 011 1v8a1 1 0 01-1 1H5.5L2 14V2a1 1 0 010-1z" fill="none" stroke="currentColor" stroke-width="1.5"/><line x1="5" y1="5" x2="11" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="5" y1="8" x2="9" y2="8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>Sessions</a>
<a href="#context" data-page="context"><svg class="nav-icon" viewBox="0 0 16 16"><path d="M8 1.5l5.5 2v5c0 3.1-2.2 5.6-5.5 6.6-3.3-1-5.5-3.5-5.5-6.6v-5z" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="7" r="1.4" fill="currentColor"/><path d="M5.5 10c.7-1 1.5-1.5 2.5-1.5s1.8.5 2.5 1.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>Context</a>
<a href="#memory" data-page="memory"><svg class="nav-icon" viewBox="0 0 16 16"><rect x="3" y="2" width="10" height="12" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.5"/><line x1="1" y1="5" x2="3" y2="5" stroke="currentColor" stroke-width="1.2"/><line x1="1" y1="8" x2="3" y2="8" stroke="currentColor" stroke-width="1.2"/><line x1="1" y1="11" x2="3" y2="11" stroke="currentColor" stroke-width="1.2"/><circle cx="8" cy="8" r="2" fill="currentColor"/></svg>Memory</a>
<a href="#skills" data-page="skills"><svg class="nav-icon" viewBox="0 0 16 16"><path d="M8 1l1.8 3.6L14 5.3l-3 2.9.7 4.1L8 10.5l-3.7 1.8.7-4.1-3-2.9 4.2-.7z" fill="currentColor"/></svg>Skills & Plugins</a>
<a href="#agents" data-page="agents"><svg class="nav-icon" viewBox="0 0 16 16"><circle cx="8" cy="4" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>Agents</a>
<a href="#scheduler" data-page="scheduler"><svg class="nav-icon" viewBox="0 0 16 16"><rect x="1.5" y="2.5" width="13" height="12" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.5"/><line x1="1.5" y1="6" x2="14.5" y2="6" stroke="currentColor" stroke-width="1.5"/><line x1="5" y1="1" x2="5" y2="4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="11" y1="1" x2="11" y2="4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>Scheduler</a>
<a href="#integrations" data-page="integrations"><svg class="nav-icon" viewBox="0 0 16 16"><circle cx="8" cy="8" r="2" fill="currentColor"/><circle cx="3" cy="4" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="13" cy="4" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="3" cy="12" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="13" cy="12" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><line x1="4.3" y1="5.2" x2="6.5" y2="7" stroke="currentColor" stroke-width="1.2"/><line x1="11.7" y1="5.2" x2="9.5" y2="7" stroke="currentColor" stroke-width="1.2"/><line x1="4.3" y1="10.8" x2="6.5" y2="9" stroke="currentColor" stroke-width="1.2"/><line x1="11.7" y1="10.8" x2="9.5" y2="9" stroke="currentColor" stroke-width="1.2"/></svg>Integrations</a>
<a href="#metrics" data-page="metrics"><svg class="nav-icon" viewBox="0 0 16 16"><polyline points="1,12 4,7 7,9 10,3 14,6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><line x1="1" y1="14.5" x2="15" y2="14.5" stroke="currentColor" stroke-width="1.2"/></svg>Observability</a>
<a href="#efficiency" data-page="efficiency"><svg class="nav-icon" viewBox="0 0 16 16"><path d="M8 1v6l4.2 2.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="8" r="1" fill="currentColor"/></svg>Prompt Performance</a>
<a href="#wallet" data-page="wallet"><svg class="nav-icon" viewBox="0 0 16 16"><rect x="1" y="3" width="14" height="11" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M1 3V2.5A1.5 1.5 0 012.5 1h9L14 3" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>Wallet</a>
<a href="#workspace" data-page="workspace"><svg class="nav-icon" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="5" cy="5.5" r="1.5" fill="currentColor"/><circle cx="11" cy="5.5" r="1.5" fill="currentColor"/><circle cx="8" cy="11" r="1.5" fill="currentColor"/></svg>Workspace</a>
<a href="#settings" data-page="settings"><svg class="nav-icon" viewBox="0 0 16 16"><path d="M6.5 1h3l.3 2.1a5.5 5.5 0 011.3.7L13 2.7l1.5 2.6-1.8 1.2a5.5 5.5 0 010 1.5l1.8 1.2-1.5 2.6-1.9-1.1a5.5 5.5 0 01-1.3.7L9.5 13.5h-3l-.3-2.1a5.5 5.5 0 01-1.3-.7L3 11.8l-1.5-2.6 1.8-1.2a5.5 5.5 0 010-1.5L1.5 5.3 3 2.7l1.9 1.1a5.5 5.5 0 011.3-.7L6.5 1zM8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z" fill="currentColor"/></svg>Settings</a>
</nav>
<script>
(function() {
/* {JS} */
})();
</script>
</body>
</html>