npm - notsleep - Versions diffs - 1.0.0 - Mend

notsleep 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/.env.example +117 -0
package/LICENSE +21 -0
package/README.md +341 -0
package/dashboard/index.html +893 -0
package/dist/agent.d.ts +162 -0
package/dist/agent.d.ts.map +1 -0
package/dist/agent.js +1064 -0
package/dist/agent.js.map +1 -0
package/dist/api.d.ts +10 -0
package/dist/api.d.ts.map +1 -0
package/dist/api.js +39 -0
package/dist/api.js.map +1 -0
package/dist/checkpoint.d.ts +52 -0
package/dist/checkpoint.d.ts.map +1 -0
package/dist/checkpoint.js +234 -0
package/dist/checkpoint.js.map +1 -0
package/dist/config.d.ts +24 -0
package/dist/config.d.ts.map +1 -0
package/dist/config.js +265 -0
package/dist/config.js.map +1 -0
package/dist/context.d.ts +15 -0
package/dist/context.d.ts.map +1 -0
package/dist/context.js +237 -0
package/dist/context.js.map +1 -0
package/dist/cost.d.ts +26 -0
package/dist/cost.d.ts.map +1 -0
package/dist/cost.js +161 -0
package/dist/cost.js.map +1 -0
package/dist/dashboard.d.ts +96 -0
package/dist/dashboard.d.ts.map +1 -0
package/dist/dashboard.js +292 -0
package/dist/dashboard.js.map +1 -0
package/dist/fileconfig.d.ts +129 -0
package/dist/fileconfig.d.ts.map +1 -0
package/dist/fileconfig.js +391 -0
package/dist/fileconfig.js.map +1 -0
package/dist/index.d.ts +3 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +882 -0
package/dist/index.js.map +1 -0
package/dist/init.d.ts +9 -0
package/dist/init.d.ts.map +1 -0
package/dist/init.js +221 -0
package/dist/init.js.map +1 -0
package/dist/logger.d.ts +33 -0
package/dist/logger.d.ts.map +1 -0
package/dist/logger.js +150 -0
package/dist/logger.js.map +1 -0
package/dist/modelsdev.d.ts +63 -0
package/dist/modelsdev.d.ts.map +1 -0
package/dist/modelsdev.js +265 -0
package/dist/modelsdev.js.map +1 -0
package/dist/parallel.d.ts +54 -0
package/dist/parallel.d.ts.map +1 -0
package/dist/parallel.js +139 -0
package/dist/parallel.js.map +1 -0
package/dist/pool.d.ts +17 -0
package/dist/pool.d.ts.map +1 -0
package/dist/pool.js +53 -0
package/dist/pool.js.map +1 -0
package/dist/provider.d.ts +60 -0
package/dist/provider.d.ts.map +1 -0
package/dist/provider.js +396 -0
package/dist/provider.js.map +1 -0
package/dist/registry.d.ts +60 -0
package/dist/registry.d.ts.map +1 -0
package/dist/registry.js +153 -0
package/dist/registry.js.map +1 -0
package/dist/safety.d.ts +21 -0
package/dist/safety.d.ts.map +1 -0
package/dist/safety.js +118 -0
package/dist/safety.js.map +1 -0
package/dist/schema.d.ts +9 -0
package/dist/schema.d.ts.map +1 -0
package/dist/schema.js +166 -0
package/dist/schema.js.map +1 -0
package/dist/test-dashboard.d.ts +5 -0
package/dist/test-dashboard.d.ts.map +1 -0
package/dist/test-dashboard.js +202 -0
package/dist/test-dashboard.js.map +1 -0
package/dist/tools.d.ts +27 -0
package/dist/tools.d.ts.map +1 -0
package/dist/tools.js +1212 -0
package/dist/tools.js.map +1 -0
package/dist/types.d.ts +180 -0
package/dist/types.d.ts.map +1 -0
package/dist/types.js +14 -0
package/dist/types.js.map +1 -0
package/dist/worktree.d.ts +50 -0
package/dist/worktree.d.ts.map +1 -0
package/dist/worktree.js +186 -0
package/dist/worktree.js.map +1 -0
package/package.json +67 -0

package/dashboard/index.html ADDED Viewed

@@ -0,0 +1,893 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>NotSleep - Dashboard</title>
+<style>
+  :root {
+    --bg: #0a0e17;
+    --bg2: #111827;
+    --bg3: #1a2233;
+    --border: #2a3548;
+    --text: #e2e8f0;
+    --text-dim: #8892a4;
+    --accent: #38bdf8;
+    --accent2: #818cf8;
+    --green: #34d399;
+    --yellow: #fbbf24;
+    --red: #f87171;
+    --orange: #fb923c;
+    --cyan: #22d3ee;
+    --purple: #a78bfa;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+  /* ─── Header ─────────────────────────────── */
+  .header {
+    background: linear-gradient(135deg, var(--bg2), var(--bg3));
+    border-bottom: 1px solid var(--border);
+    padding: 16px 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    backdrop-filter: blur(12px);
+  }
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .logo {
+    font-size: 20px;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--accent), var(--accent2));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: -0.5px;
+  }
+  .status-badge {
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  .status-running { background: rgba(52, 211, 153, 0.15); color: var(--green); border: 1px solid rgba(52, 211, 153, 0.3); }
+  .status-paused { background: rgba(251, 191, 36, 0.15); color: var(--yellow); border: 1px solid rgba(251, 191, 36, 0.3); }
+  .status-stopped { background: rgba(248, 113, 113, 0.15); color: var(--red); border: 1px solid rgba(248, 113, 113, 0.3); }
+  .status-completed { background: rgba(56, 189, 248, 0.15); color: var(--accent); border: 1px solid rgba(56, 189, 248, 0.3); }
+  .status-idle { background: rgba(136, 146, 164, 0.15); color: var(--text-dim); border: 1px solid rgba(136, 146, 164, 0.3); }
+  .connection-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--red);
+    margin-left: 12px;
+  }
+  .connection-dot.connected { background: var(--green); box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  /* ─── Buttons ────────────────────────────── */
+  button {
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 6px 14px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    background: var(--bg3);
+    color: var(--text);
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+  button:hover { background: var(--border); }
+  button:active { transform: scale(0.97); }
+  button.btn-danger { border-color: rgba(248, 113, 113, 0.4); color: var(--red); }
+  button.btn-danger:hover { background: rgba(248, 113, 113, 0.1); }
+  button.btn-primary { border-color: rgba(56, 189, 248, 0.4); color: var(--accent); }
+  button.btn-primary:hover { background: rgba(56, 189, 248, 0.1); }
+  button.btn-success { border-color: rgba(52, 211, 153, 0.4); color: var(--green); }
+  button.btn-success:hover { background: rgba(52, 211, 153, 0.1); }
+  button.btn-warning { border-color: rgba(251, 191, 36, 0.4); color: var(--yellow); }
+  button.btn-warning:hover { background: rgba(251, 191, 36, 0.1); }
+  /* ─── Layout ─────────────────────────────── */
+  .container {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    grid-template-rows: auto 1fr;
+    gap: 16px;
+    padding: 16px 24px;
+    height: calc(100vh - 65px);
+  }
+  .panel {
+    background: var(--bg2);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  .panel-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-dim);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--bg3);
+  }
+  .panel-body {
+    padding: 12px 16px;
+    overflow-y: auto;
+    flex: 1;
+  }
+  /* ─── Stats Row ──────────────────────────── */
+  .stats-row {
+    grid-column: 1 / -1;
+  }
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 12px;
+    padding: 12px 16px;
+  }
+  .stat-card {
+    background: var(--bg3);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px 16px;
+    text-align: center;
+  }
+  .stat-value {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--accent);
+    margin-bottom: 4px;
+  }
+  .stat-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-dim);
+  }
+  /* ─── Progress Bar ───────────────────────── */
+  .progress-bar-container {
+    padding: 0 16px 12px;
+  }
+  .progress-bar {
+    height: 4px;
+    background: var(--bg);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+  .progress-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), var(--accent2));
+    border-radius: 2px;
+    transition: width 0.5s ease;
+    width: 0%;
+  }
+  .progress-text {
+    font-size: 10px;
+    color: var(--text-dim);
+    margin-top: 4px;
+    text-align: right;
+  }
+  /* ─── Meters (iterations + context window) ─── */
+  .meter-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-dim);
+    margin: 10px 0 4px;
+  }
+  .meter-head:first-child { margin-top: 0; }
+  .meter-head .meter-val { color: var(--text); font-weight: 600; letter-spacing: 0; text-transform: none; }
+  /* Context-window fill changes colour as it approaches the summarize point. */
+  .progress-bar-fill.ctx-ok   { background: linear-gradient(90deg, var(--green), var(--cyan)); }
+  .progress-bar-fill.ctx-warn { background: linear-gradient(90deg, var(--yellow), var(--orange)); }
+  .progress-bar-fill.ctx-high { background: linear-gradient(90deg, var(--orange), var(--red)); }
+  /* ─── Sparkline ──────────────────────────── */
+  .sparkline-row {
+    padding: 6px 16px 12px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .sparkline-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-dim);
+    white-space: nowrap;
+  }
+  .sparkline {
+    flex: 1;
+    height: 34px;
+    width: 100%;
+    display: block;
+  }
+  .sparkline .spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
+  .sparkline .spark-area { fill: rgba(56, 189, 248, 0.12); stroke: none; }
+  /* Sub-label under a stat value (e.g. cost per hour). */
+  .stat-sub {
+    font-size: 10px;
+    color: var(--text-dim);
+    margin-top: 2px;
+  }
+  /* ─── Log Panel ──────────────────────────── */
+  .log-panel {
+    grid-row: 2;
+  }
+  .log-body {
+    font-size: 12px;
+    line-height: 1.6;
+    padding: 8px 12px;
+  }
+  .log-line {
+    display: flex;
+    gap: 8px;
+    padding: 2px 4px;
+    border-radius: 3px;
+    word-break: break-word;
+  }
+  .log-line:hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .log-time {
+    color: var(--text-dim);
+    flex-shrink: 0;
+    font-size: 11px;
+  }
+  .log-level {
+    flex-shrink: 0;
+    font-weight: 600;
+    font-size: 11px;
+    min-width: 50px;
+  }
+  .log-level-DEBUG { color: var(--text-dim); }
+  .log-level-INFO { color: var(--accent); }
+  .log-level-WARN { color: var(--yellow); }
+  .log-level-ERROR { color: var(--red); }
+  .log-level-AGENT { color: var(--green); }
+  .log-level-PROGRESS { color: var(--cyan); }
+  .log-msg {
+    color: var(--text);
+    flex: 1;
+  }
+  .log-msg-AGENT { color: var(--green); }
+  .log-msg-ERROR { color: var(--red); }
+  .log-msg-WARN { color: var(--yellow); }
+  /* Tool log messages */
+  .log-level-TOOL { color: var(--purple); }
+  .log-msg-TOOL { color: var(--text-dim); }
+  /* ─── Sidebar ────────────────────────────── */
+  .sidebar {
+    grid-row: 2;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  /* ─── Task Queue ─────────────────────────── */
+  .task-list {
+    list-style: none;
+  }
+  .task-item {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .task-item:last-child { border-bottom: none; }
+  .task-item-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 11px;
+  }
+  .task-status {
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 9px;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+  .task-status-pending { background: rgba(136, 146, 164, 0.15); color: var(--text-dim); }
+  .task-status-in_progress { background: rgba(56, 189, 248, 0.15); color: var(--accent); }
+  .task-status-completed { background: rgba(52, 211, 153, 0.15); color: var(--green); }
+  .task-status-failed { background: rgba(248, 113, 113, 0.15); color: var(--red); }
+  .task-priority {
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 9px;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+  .task-priority-high { color: var(--red); }
+  .task-priority-medium { color: var(--yellow); }
+  .task-priority-low { color: var(--text-dim); }
+  .task-desc {
+    font-size: 12px;
+    color: var(--text);
+    line-height: 1.4;
+  }
+  .task-summary {
+    font-size: 11px;
+    color: var(--text-dim);
+    font-style: italic;
+  }
+  /* ─── Add Task Form ──────────────────────── */
+  .add-task-form {
+    padding: 12px 16px;
+    border-top: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .add-task-form input,
+  .add-task-form select {
+    font-family: inherit;
+    font-size: 12px;
+    padding: 8px 10px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    background: var(--bg);
+    color: var(--text);
+    outline: none;
+  }
+  .add-task-form input:focus,
+  .add-task-form select:focus {
+    border-color: var(--accent);
+  }
+  .add-task-row {
+    display: flex;
+    gap: 8px;
+  }
+  .add-task-row select { width: 100px; }
+  .add-task-row input { flex: 1; }
+  /* ─── Info Panel ─────────────────────────── */
+  .info-grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 6px 12px;
+    font-size: 12px;
+  }
+  .info-label { color: var(--text-dim); }
+  .info-value { color: var(--text); font-weight: 600; }
+  /* ─── Scrollbar ──────────────────────────── */
+  ::-webkit-scrollbar { width: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
+  /* ─── Responsive ─────────────────────────── */
+  @media (max-width: 900px) {
+    .container {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto 1fr;
+    }
+    .sidebar { grid-row: 3; }
+  }
+  /* ─── Animations ─────────────────────────── */
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+  .pulse { animation: pulse 2s ease-in-out infinite; }
+  .fade-in {
+    animation: fadeIn 0.3s ease;
+  }
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  /* ─── Empty State ────────────────────────── */
+  .empty-state {
+    text-align: center;
+    padding: 32px 16px;
+    color: var(--text-dim);
+    font-size: 13px;
+  }
+  .empty-state-icon {
+    font-size: 32px;
+    margin-bottom: 12px;
+    opacity: 0.5;
+  }
+  /* ─── Current Task Banner ────────────────── */
+  .current-task {
+    padding: 8px 16px;
+    background: rgba(56, 189, 248, 0.05);
+    border-bottom: 1px solid var(--border);
+    font-size: 12px;
+    color: var(--accent);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .current-task-label {
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 10px;
+    letter-spacing: 0.5px;
+  }
+</style>
+</head>
+<body>
+<!-- ─── Header ──────────────────────────────── -->
+<div class="header">
+  <div class="header-left">
+    <div class="logo">NotSleep</div>
+    <div id="statusBadge" class="status-badge status-idle">IDLE</div>
+    <div id="connectionDot" class="connection-dot" title="WebSocket disconnected"></div>
+  </div>
+  <div class="header-right">
+    <button id="btnPause" class="btn-warning" onclick="sendCommand('pause')" title="Pause agent">Pause</button>
+    <button id="btnResume" class="btn-success" onclick="sendCommand('resume')" title="Resume agent" style="display:none">Resume</button>
+    <button id="btnStop" class="btn-danger" onclick="confirmStop()" title="Stop agent">Stop</button>
+  </div>
+</div>
+<!-- ─── Main Layout ─────────────────────────── -->
+<div class="container">
+  <!-- Stats Row -->
+  <div class="panel stats-row">
+    <div class="progress-bar-container">
+      <div class="meter-head"><span>Iterations</span><span id="progressText" class="meter-val">0</span></div>
+      <div class="progress-bar"><div id="progressFill" class="progress-bar-fill"></div></div>
+      <div class="meter-head"><span>Context window</span><span id="ctxLabel" class="meter-val">–</span></div>
+      <div class="progress-bar"><div id="ctxFill" class="progress-bar-fill ctx-ok"></div></div>
+    </div>
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div id="statElapsed" class="stat-value">00:00:00</div>
+        <div class="stat-label">Elapsed</div>
+      </div>
+      <div class="stat-card">
+        <div id="statIterations" class="stat-value">0</div>
+        <div class="stat-label">Iterations</div>
+      </div>
+      <div class="stat-card">
+        <div id="statTokens" class="stat-value">0</div>
+        <div class="stat-label">Tokens</div>
+      </div>
+      <div class="stat-card">
+        <div id="statCost" class="stat-value">$0</div>
+        <div class="stat-label">Est. Cost</div>
+        <div id="statCostRate" class="stat-sub"></div>
+      </div>
+      <div class="stat-card">
+        <div id="statToolCalls" class="stat-value">0</div>
+        <div class="stat-label">Tool Calls</div>
+      </div>
+      <div class="stat-card">
+        <div id="statTasks" class="stat-value">0</div>
+        <div class="stat-label">Tasks Done</div>
+      </div>
+      <div class="stat-card">
+        <div id="statErrors" class="stat-value">0</div>
+        <div class="stat-label">Errors</div>
+      </div>
+      <div class="stat-card">
+        <div id="statResets" class="stat-value">0</div>
+        <div class="stat-label">Ctx Resets</div>
+      </div>
+    </div>
+    <div class="sparkline-row">
+      <span class="sparkline-label">Token trend</span>
+      <svg id="sparkline" class="sparkline" viewBox="0 0 300 34" preserveAspectRatio="none" aria-hidden="true"></svg>
+    </div>
+  </div>
+  <!-- Log Panel -->
+  <div class="panel log-panel">
+    <div class="panel-header">
+      <span>Live Logs</span>
+      <div style="display:flex;gap:8px;align-items:center;">
+        <label style="font-size:11px;font-weight:normal;text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:4px;cursor:pointer;">
+          <input type="checkbox" id="autoScroll" checked> Auto-scroll
+        </label>
+        <button onclick="clearLogs()" style="font-size:10px;padding:3px 8px;">Clear</button>
+      </div>
+    </div>
+    <div id="currentTaskBanner" class="current-task" style="display:none;">
+      <span class="current-task-label">Current Task:</span>
+      <span id="currentTaskText"></span>
+    </div>
+    <div id="logBody" class="panel-body log-body"></div>
+  </div>
+  <!-- Sidebar -->
+  <div class="sidebar">
+    <!-- Info Panel -->
+    <div class="panel" style="flex:0 0 auto;">
+      <div class="panel-header"><span>Agent Info</span></div>
+      <div class="panel-body">
+        <div class="info-grid">
+          <span class="info-label">Provider</span>
+          <span id="infoProvider" class="info-value">-</span>
+          <span class="info-label">Model</span>
+          <span id="infoModel" class="info-value">-</span>
+          <span class="info-label">Small model</span>
+          <span id="infoSmallModel" class="info-value">-</span>
+          <span class="info-label">Context</span>
+          <span id="infoContext" class="info-value">-</span>
+          <span class="info-label">Mode</span>
+          <span id="infoMode" class="info-value">-</span>
+        </div>
+      </div>
+    </div>
+    <!-- Task Queue Panel -->
+    <div class="panel" style="flex:1;min-height:0;">
+      <div class="panel-header">
+        <span>Task Queue (<span id="taskCount">0</span>)</span>
+      </div>
+      <div id="taskQueueBody" class="panel-body">
+        <div class="empty-state">
+          <div class="empty-state-icon">&#x1f4cb;</div>
+          <div>No tasks in queue</div>
+        </div>
+      </div>
+      <div class="add-task-form">
+        <div class="add-task-row">
+          <select id="newTaskPriority">
+            <option value="high">High</option>
+            <option value="medium" selected>Medium</option>
+            <option value="low">Low</option>
+          </select>
+          <input type="text" id="newTaskInput" placeholder="Add a task..." onkeydown="if(event.key==='Enter')addTask()">
+        </div>
+        <button class="btn-primary" onclick="addTask()" style="width:100%;">+ Add Task</button>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+// ─── State ──────────────────────────────────
+let ws = null;
+let state = {};
+let reconnectTimer = null;
+let elapsedTimer = null;
+const maxLogLines = 2000;
+// ─── WebSocket ──────────────────────────────
+function connect() {
+  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  ws = new WebSocket(`${protocol}//${location.host}`);
+  ws.onopen = () => {
+    document.getElementById('connectionDot').classList.add('connected');
+    document.getElementById('connectionDot').title = 'Connected';
+    if (reconnectTimer) { clearInterval(reconnectTimer); reconnectTimer = null; }
+  };
+  ws.onclose = () => {
+    document.getElementById('connectionDot').classList.remove('connected');
+    document.getElementById('connectionDot').title = 'Disconnected - reconnecting...';
+    if (!reconnectTimer) {
+      reconnectTimer = setInterval(connect, 3000);
+    }
+  };
+  ws.onerror = () => {};
+  ws.onmessage = (event) => {
+    try {
+      const msg = JSON.parse(event.data);
+      if (msg.type === 'state') updateState(msg.data);
+      else if (msg.type === 'log') appendLog(msg.data);
+    } catch(e) {}
+  };
+}
+function sendCommand(type, extra) {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({ type, ...extra }));
+  }
+}
+// ─── State Update ───────────────────────────
+function updateState(s) {
+  state = s;
+  // Status badge
+  const badge = document.getElementById('statusBadge');
+  badge.textContent = s.status.toUpperCase();
+  badge.className = 'status-badge status-' + s.status;
+  // Pause/Resume buttons
+  if (s.paused || s.status === 'paused') {
+    document.getElementById('btnPause').style.display = 'none';
+    document.getElementById('btnResume').style.display = '';
+  } else {
+    document.getElementById('btnPause').style.display = '';
+    document.getElementById('btnResume').style.display = 'none';
+  }
+  // Stats
+  document.getElementById('statIterations').textContent = s.stats.totalIterations.toLocaleString();
+  document.getElementById('statTokens').textContent = formatNumber(s.stats.totalTokensUsed);
+  const cost = s.stats.totalCostUsd || 0;
+  document.getElementById('statCost').textContent = cost < 1 ? '$' + cost.toFixed(4) : '$' + cost.toFixed(2);
+  document.getElementById('statToolCalls').textContent = s.stats.totalToolCalls.toLocaleString();
+  document.getElementById('statTasks').textContent = s.stats.tasksCompleted.toLocaleString();
+  document.getElementById('statErrors').textContent = s.stats.errors.toLocaleString();
+  document.getElementById('statResets').textContent = s.stats.contextResets.toLocaleString();
+  // Iterations bar. maxIterations <= 0 means UNLIMITED — a percentage is
+  // meaningless there, so show the running count with an ∞ marker instead.
+  const unlimited = !s.maxIterations || s.maxIterations <= 0;
+  const iterPct = unlimited ? 0 : Math.min((s.stats.totalIterations / s.maxIterations) * 100, 100);
+  document.getElementById('progressFill').style.width = iterPct + '%';
+  document.getElementById('progressText').textContent = unlimited
+    ? `${s.stats.totalIterations.toLocaleString()} · ∞`
+    : `${s.stats.totalIterations.toLocaleString()} / ${s.maxIterations.toLocaleString()}`;
+  // Context-window meter — the key long-horizon metric. contextUsage is 0..1
+  // from the REAL API token count; colour shifts as it nears the summarize point.
+  const ctxPct = Math.round((s.contextUsage || 0) * 100);
+  const ctxFill = document.getElementById('ctxFill');
+  ctxFill.style.width = Math.min(ctxPct, 100) + '%';
+  ctxFill.className = 'progress-bar-fill ' + (ctxPct >= 85 ? 'ctx-high' : ctxPct >= 60 ? 'ctx-warn' : 'ctx-ok');
+  const ctxTokens = Math.round((s.contextUsage || 0) * (s.contextLimit || 0));
+  document.getElementById('ctxLabel').textContent =
+    `${ctxPct}% · ${formatNumber(ctxTokens)} / ${formatNumber(s.contextLimit || 0)}`;
+  // Cost-per-hour, derived from est. cost and elapsed time (relevant for long runs).
+  const elapsedHr = s.stats.startTime ? (Date.now() - s.stats.startTime) / 3600000 : 0;
+  const rate = elapsedHr > 0.002 ? cost / elapsedHr : 0;
+  document.getElementById('statCostRate').textContent =
+    rate > 0 ? `~$${rate < 10 ? rate.toFixed(2) : Math.round(rate)}/hr` : '';
+  // Token trend sparkline
+  renderSparkline(s.tokenHistory || []);
+  // Elapsed timer
+  updateElapsed(s.stats.startTime);
+  // Info
+  document.getElementById('infoProvider').textContent = s.provider || '-';
+  document.getElementById('infoModel').textContent = s.model || '-';
+  document.getElementById('infoSmallModel').textContent = s.smallModel || '(same as model)';
+  document.getElementById('infoContext').textContent = s.contextLimit
+    ? `${formatNumber(s.contextLimit)}${s.contextLimitSource ? ' (' + s.contextLimitSource + ')' : ''}`
+    : '-';
+  document.getElementById('infoMode').textContent = s.continuous ? 'Continuous' : 'Single Task';
+  // Current task
+  const banner = document.getElementById('currentTaskBanner');
+  if (s.currentTask) {
+    banner.style.display = 'flex';
+    document.getElementById('currentTaskText').textContent = s.currentTask;
+  } else {
+    banner.style.display = 'none';
+  }
+  // Task queue
+  renderTaskQueue(s.taskQueue || []);
+}
+// ─── Task Queue ─────────────────────────────
+function renderTaskQueue(tasks) {
+  const body = document.getElementById('taskQueueBody');
+  const count = document.getElementById('taskCount');
+  count.textContent = tasks.length;
+  if (tasks.length === 0) {
+    body.innerHTML = '<div class="empty-state"><div class="empty-state-icon">&#x1f4cb;</div><div>No tasks in queue</div></div>';
+    return;
+  }
+  let html = '<ul class="task-list">';
+  for (const t of tasks) {
+    html += `<li class="task-item fade-in">
+      <div class="task-item-header">
+        <span class="task-status task-status-${t.status}">${t.status.replace('_', ' ')}</span>
+        <span class="task-priority task-priority-${t.priority}">${t.priority}</span>
+      </div>
+      <div class="task-desc">${escapeHtml(t.description)}</div>
+      ${t.summary ? `<div class="task-summary">${escapeHtml(t.summary)}</div>` : ''}
+    </li>`;
+  }
+  html += '</ul>';
+  body.innerHTML = html;
+}
+function addTask() {
+  const input = document.getElementById('newTaskInput');
+  const priority = document.getElementById('newTaskPriority').value;
+  const desc = input.value.trim();
+  if (!desc) return;
+  sendCommand('add_task', { description: desc, priority });
+  input.value = '';
+}
+// ─── Log Rendering ──────────────────────────
+function appendLog(entry) {
+  const body = document.getElementById('logBody');
+  const autoScroll = document.getElementById('autoScroll').checked;
+  const div = document.createElement('div');
+  div.className = 'log-line fade-in';
+  // Determine level class
+  let levelClass = entry.level;
+  if (levelClass.startsWith('TOOL:')) levelClass = 'TOOL';
+  div.innerHTML = `
+    <span class="log-time">${entry.elapsed}</span>
+    <span class="log-level log-level-${levelClass}">${entry.level}</span>
+    <span class="log-msg log-msg-${levelClass}">${escapeHtml(entry.message)}</span>
+  `;
+  body.appendChild(div);
+  // Limit log lines
+  while (body.children.length > maxLogLines) {
+    body.removeChild(body.firstChild);
+  }
+  if (autoScroll) {
+    body.scrollTop = body.scrollHeight;
+  }
+}
+function clearLogs() {
+  document.getElementById('logBody').innerHTML = '';
+}
+// ─── Controls ───────────────────────────────
+function confirmStop() {
+  if (confirm('Are you sure you want to stop the agent? It will save a checkpoint first.')) {
+    sendCommand('stop');
+  }
+}
+// ─── Helpers ────────────────────────────────
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+function formatNumber(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
+  return n.toLocaleString();
+}
+// Render the cumulative-token history as a small filled line chart.
+function renderSparkline(history) {
+  const svg = document.getElementById('sparkline');
+  if (!svg) return;
+  const data = (Array.isArray(history) ? history : []).slice(-60);
+  if (data.length < 2) { svg.innerHTML = ''; return; }
+  const W = 300, H = 34, pad = 3;
+  const min = Math.min(...data), max = Math.max(...data);
+  const range = (max - min) || 1;
+  const n = data.length;
+  const pts = data.map((v, i) => [
+    (i / (n - 1)) * W,
+    H - pad - ((v - min) / range) * (H - 2 * pad),
+  ]);
+  const line = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
+  const area = 'M0 ' + H + ' ' + line.replace(/^M/, 'L') + ' L' + W + ' ' + H + ' Z';
+  svg.innerHTML = '<path class="spark-area" d="' + area + '"/><path class="spark-line" d="' + line + '"/>';
+}
+function updateElapsed(startTime) {
+  if (!startTime) return;
+  const ms = Date.now() - startTime;
+  const s = Math.floor(ms / 1000) % 60;
+  const m = Math.floor(ms / 60000) % 60;
+  const h = Math.floor(ms / 3600000);
+  document.getElementById('statElapsed').textContent =
+    `${h.toString().padStart(2,'0')}:${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`;
+}
+// Update elapsed every second
+setInterval(() => {
+  if (state.stats) updateElapsed(state.stats.startTime);
+}, 1000);
+// ─── Init ───────────────────────────────────
+connect();
+</script>
+</body>
+</html>