npm - @agentmessier/restwalker - Versions diffs - 1.0.0 - Mend

@agentmessier/restwalker 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 (16) hide show

package/index.html ADDED Viewed

@@ -0,0 +1,1161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>restwalker</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js" integrity="sha384-JUh163oCRItcbPme8pYnROHQMC6fNKTBWtRG3I3I0erJkzNgL7uxKlNwcrcFKeqF" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked@13/marked.min.js" integrity="sha384-YTBHtsL8yVTHcLakYNyrOfK3K+QQcXiECuaALJ+3j7Mo681Rtzadt8NR6WrZH+eQ" crossorigin="anonymous"></script>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --green: #22c55e; --amber: #f59e0b; --red: #ef4444; --blue: #3b82f6;
+    --bg: #0f172a; --card: #1e293b; --border: #334155;
+    --text: #e2e8f0; --muted: #64748b; --mono: 'JetBrains Mono', 'Fira Code', monospace;
+  }
+  body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; min-height: 100vh; }
+  /* ── Header ── */
+  header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px 24px; border-bottom: 1px solid var(--border);
+  }
+  header h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
+  header span.sub { font-size: 13px; color: var(--muted); }
+  .header-right { display: flex; align-items: center; gap: 12px; }
+  .status-pill {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
+    background: var(--card); border: 1px solid var(--border);
+  }
+  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
+  .dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
+  .dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
+  .dot.red   { background: var(--red);   box-shadow: 0 0 6px var(--red); }
+  .ts { font-size: 12px; color: var(--muted); }
+  /* ── Gear button ── */
+  .gear-btn {
+    background: var(--card); border: 1px solid var(--border);
+    color: var(--muted); border-radius: 8px;
+    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
+    cursor: pointer; font-size: 16px; transition: color .15s, border-color .15s;
+  }
+  .gear-btn:hover { color: var(--text); border-color: var(--text); }
+  /* ── Layout ── */
+  main { padding: 20px 24px; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
+  /* ── Cards ── */
+  .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
+  .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
+  .card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 8px; }
+  .card .value { font-size: 28px; font-weight: 700; font-family: var(--mono); line-height: 1; }
+  .card .sub   { font-size: 12px; color: var(--muted); margin-top: 6px; }
+  .stale-badge {
+    display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px;
+    border-radius: 4px; background: rgba(245,158,11,0.15); color: var(--amber);
+    margin-left: 6px; vertical-align: middle;
+  }
+  /* ── Bar ── */
+  .bar-wrap { margin-top: 10px; position: relative; height: 6px; background: var(--border); border-radius: 3px; }
+  .bar-fill { height: 100%; border-radius: 3px; transition: width .4s; }
+  .bar-fill.green { background: var(--green); }
+  .bar-fill.amber { background: var(--amber); }
+  .bar-fill.red   { background: var(--red); }
+  .bar-marker { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--muted); border-radius: 1px; opacity: 0.6; }
+  /* ── Section ── */
+  .section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
+  .section h2 { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 16px; }
+  .chart-wrap { position: relative; height: 220px; }
+  .legend { display: flex; gap: 20px; margin-top: 12px; font-size: 12px; color: var(--muted); }
+  /* ── Predictions ── */
+  .predictions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
+  .pred-item { display: flex; align-items: flex-start; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
+  .pred-icon { font-size: 18px; flex-shrink: 0; }
+  .pred-title { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
+  .pred-value { font-size: 14px; font-weight: 600; }
+  .pred-value.green { color: var(--green); }
+  .pred-value.amber { color: var(--amber); }
+  .pred-value.red   { color: var(--red); }
+  /* ── Modal overlay ── */
+  .modal-overlay {
+    display: none; position: fixed; inset: 0;
+    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
+    z-index: 100; align-items: center; justify-content: center;
+  }
+  .modal-overlay.open { display: flex; }
+  .modal {
+    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
+    width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px);
+    overflow-y: auto; padding: 24px;
+    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
+  }
+  .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
+  .modal-header h2 { font-size: 16px; font-weight: 700; }
+  .modal-close { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px; }
+  .modal-close:hover { color: var(--text); background: var(--border); }
+  /* ── Settings form ── */
+  .settings-group { margin-bottom: 20px; }
+  .settings-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
+  .setting-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
+  .setting-label { font-size: 13px; color: var(--text); flex: 1; }
+  .setting-hint  { font-size: 11px; color: var(--muted); margin-top: 2px; }
+  .setting-input-wrap { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+  .setting-input {
+    width: 72px; text-align: right; padding: 6px 10px;
+    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
+    color: var(--text); font-size: 13px; font-family: var(--mono);
+  }
+  .setting-input:focus { outline: none; border-color: var(--blue); }
+  select.setting-input { text-align: left; cursor: pointer; }
+  .setting-unit { font-size: 12px; color: var(--muted); white-space: nowrap; }
+  /* ── Range sliders ── */
+  .slider-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+  .slider-val  { font-size: 13px; font-family: var(--mono); color: var(--text); min-width: 36px; text-align: right; }
+  input[type=range] {
+    -webkit-appearance: none; appearance: none;
+    width: 160px; height: 4px; border-radius: 2px;
+    background: var(--border); outline: none; cursor: pointer;
+  }
+  input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none; appearance: none;
+    width: 14px; height: 14px; border-radius: 50%;
+    background: var(--blue); border: none; cursor: pointer;
+    transition: transform .1s;
+  }
+  input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.25); }
+  input[type=range]::-moz-range-thumb {
+    width: 14px; height: 14px; border-radius: 50%;
+    background: var(--blue); border: none; cursor: pointer;
+  }
+  .modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
+  .btn { padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; }
+  .btn-secondary { background: var(--bg); border: 1px solid var(--border); color: var(--text); }
+  .btn-primary   { background: var(--blue); color: #fff; }
+  .btn:hover     { opacity: 0.85; }
+  .save-status { font-size: 12px; color: var(--green); align-self: center; margin-right: auto; display: none; }
+  footer { text-align: center; font-size: 12px; color: var(--muted); padding: 16px; }
+  /* ── Markdown body ── */
+  .md-body { font-size: 12px; line-height: 1.65; color: var(--text); }
+  .md-body h1,.md-body h2,.md-body h3 { font-weight: 600; color: var(--text); margin: 8px 0 3px; }
+  .md-body h1 { font-size: 14px; } .md-body h2 { font-size: 13px; } .md-body h3 { font-size: 12px; }
+  .md-body p  { margin: 4px 0; }
+  .md-body ul,.md-body ol { margin: 4px 0; padding-left: 20px; }
+  .md-body li { margin: 2px 0; }
+  .md-body code { background: rgba(255,255,255,.08); border-radius: 3px; padding: 1px 4px; font-family: var(--mono); font-size: 11px; }
+  .md-body pre { background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 5px; padding: 8px 10px; overflow-x: auto; margin: 6px 0; }
+  .md-body pre code { background: none; padding: 0; }
+  .md-body strong { font-weight: 600; }
+  .md-body a { color: var(--blue); }
+  .md-body hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
+  .md-body blockquote { border-left: 3px solid var(--border); margin: 4px 0; padding-left: 10px; color: var(--muted); }
+  @media (max-width: 700px) {
+    .cards { grid-template-columns: repeat(2, 1fr); }
+    .predictions { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div>
+    <h1>restwalker</h1>
+    <span class="sub">Idle-time Claude task runner</span>
+  </div>
+  <div class="header-right">
+    <span class="ts" id="refresh-ts"></span>
+    <div class="status-pill">
+      <div class="dot" id="status-dot"></div>
+      <span id="status-label">—</span>
+    </div>
+    <div style="display:flex;gap:6px;margin-left:8px;align-items:center">
+      <button id="tab-dash" onclick="switchTab('dash')" style="background:var(--accent);color:white;border:none;border-radius:6px;padding:5px 10px;cursor:pointer;font-family:inherit;font-size:12px">Dashboard</button>
+      <button id="tab-queue" onclick="switchTab('queue')" style="background:var(--blue);color:white;border:none;border-radius:6px;padding:6px 14px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0.01em">⚡ Queue</button>
+    </div>
+    <button class="gear-btn" title="Settings" onclick="openSettings()">⚙</button>
+  </div>
+</header>
+<main>
+  <div class="cards">
+    <div class="card">
+      <div class="label">Window</div>
+      <div class="value" id="card-window">—</div>
+      <div class="sub" id="card-window-sub"></div>
+    </div>
+    <div class="card">
+      <div class="label">5h Usage <span class="stale-badge" id="stale-badge" style="display:none">STALE</span></div>
+      <div class="value" id="card-5h">—</div>
+      <div class="bar-wrap">
+        <div class="bar-fill" id="bar-5h" style="width:0%"></div>
+        <div class="bar-marker" id="marker-5h"></div>
+      </div>
+      <div class="sub" id="card-5h-sub"></div>
+    </div>
+    <div class="card">
+      <div class="label">Weekly Usage</div>
+      <div class="value" id="card-weekly">—</div>
+      <div class="bar-wrap">
+        <div class="bar-fill" id="bar-weekly" style="width:0%"></div>
+        <div class="bar-marker" id="marker-weekly-pause"></div>
+        <div class="bar-marker" id="marker-weekly-stop"></div>
+      </div>
+      <div class="sub" id="card-weekly-sub"></div>
+    </div>
+    <div class="card">
+      <div class="label">Next Milestone</div>
+      <div class="value" id="card-next" style="font-size:18px;padding-top:4px">—</div>
+      <div class="sub" id="card-next-sub"></div>
+    </div>
+  </div>
+  <div class="section">
+    <h2>Usage Trend (48h)</h2>
+    <div class="chart-wrap"><canvas id="chart"></canvas></div>
+    <div class="legend">
+      <span><span style="color:#3b82f6">●</span> 5h usage</span>
+      <span><span style="color:#22c55e">●</span> weekly usage</span>
+      <span><span style="color:rgba(100,116,139,0.4)">█</span> coding window</span>
+    </div>
+  </div>
+  <div class="section">
+    <h2>Predictions</h2>
+    <div class="predictions" id="predictions"></div>
+  </div>
+</main>
+<!-- Queue panel -->
+<main id="queue-panel" style="display:none">
+  <div class="section" style="margin-bottom:16px">
+    <h2>Add task to queue</h2>
+    <textarea id="q-desc" style="width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px 10px;font-family:inherit;font-size:13px;resize:vertical;min-height:64px;box-sizing:border-box" placeholder="What should Claude do overnight?&#10;e.g. Add integration tests for the ledger service in ~/dev/agentnet"></textarea>
+    <div style="display:flex;gap:8px;margin-top:8px;align-items:center">
+      <span style="color:var(--muted);white-space:nowrap;font-size:12px">cwd:</span>
+      <select id="q-cwd-select" onchange="qCwdSelectChange()" style="flex:1;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 10px;font-family:inherit;font-size:13px;cursor:pointer">
+        <option value="">— loading projects… —</option>
+      </select>
+      <input type="text" id="q-cwd-custom" style="flex:1;display:none;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 10px;font-family:inherit;font-size:13px" placeholder="enter path…">
+    </div>
+    <div style="display:flex;gap:8px;margin-top:8px;align-items:center">
+      <select id="q-schedule" style="background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 10px;font-family:inherit;font-size:12px;cursor:pointer">
+        <option value="once">Once</option>
+        <option value="hourly">Hourly</option>
+        <option value="daily">Daily</option>
+        <option value="weekly">Weekly</option>
+        <option value="monthly">Monthly</option>
+      </select>
+      <select id="q-provider" style="background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 10px;font-family:inherit;font-size:12px;cursor:pointer">
+        <option value="">default provider</option>
+      </select>
+      <select id="q-model" style="background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 10px;font-family:inherit;font-size:12px;cursor:pointer">
+        <option value="claude-sonnet-4-6">Sonnet 4.6</option>
+      </select>
+      <button onclick="queueAddTask()" style="background:var(--blue);color:#fff;border:none;border-radius:6px;padding:7px 14px;cursor:pointer;font-family:inherit;font-size:13px;white-space:nowrap">Add to queue</button>
+    </div>
+  </div>
+  <div class="section" style="margin-bottom:16px">
+    <h2 style="display:flex;justify-content:space-between;align-items:center">
+      Task queue
+      <span style="font-size:10px;font-weight:400;letter-spacing:0">
+        <span id="q-stat-scheduled" style="color:#a78bfa">0 scheduled</span> ·
+        <span id="q-stat-pending" style="color:#f59e0b">0 pending</span> ·
+        <span id="q-stat-running" style="color:#3b82f6">0 running</span> ·
+        <span id="q-stat-done" style="color:#22c55e">0 done</span> ·
+        <span id="q-stat-failed" style="color:#ef4444">0 failed</span>
+      </span>
+    </h2>
+    <div id="q-task-list"><div style="color:var(--muted);text-align:center;padding:20px;font-style:italic">No tasks yet</div></div>
+    <div id="q-pagination"></div>
+  </div>
+</main>
+<footer>auto-refreshes every 60s · syncs on open</footer>
+<!-- Settings modal -->
+<div class="modal-overlay" id="modal-overlay" onclick="maybeCloseModal(event)">
+  <div class="modal">
+    <div class="modal-header">
+      <h2>⚙ Settings</h2>
+      <button class="modal-close" onclick="closeSettings()">✕</button>
+    </div>
+    <div class="settings-group">
+      <div class="settings-group-title" id="sched-group-title">Schedule</div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">Timezone</div>
+          <div class="setting-hint">Coding window hours are interpreted in this timezone</div>
+        </div>
+        <div class="setting-input-wrap">
+          <select class="setting-input" id="s-TIMEZONE" style="width:14rem"></select>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">Coding window start</div>
+          <div class="setting-hint">Jobs pause after this time</div>
+        </div>
+        <div class="setting-input-wrap">
+          <select class="setting-input" id="s-CODING_START_H" style="width:9rem"></select>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">Coding window end</div>
+          <div class="setting-hint">Jobs resume after this time</div>
+        </div>
+        <div class="setting-input-wrap">
+          <select class="setting-input" id="s-CODING_END_H" style="width:9rem"></select>
+        </div>
+      </div>
+    </div>
+    <div class="settings-group">
+      <div class="settings-group-title">Budget Thresholds</div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">5h pause at</div>
+          <div class="setting-hint">Pause when 5h rolling window hits this %</div>
+        </div>
+        <div class="slider-wrap">
+          <input type="range" min="1" max="100" id="s-FIVE_HOUR_PAUSE_PCT" oninput="document.getElementById('v-FIVE_HOUR_PAUSE_PCT').textContent=this.value+'%'">
+          <span class="slider-val" id="v-FIVE_HOUR_PAUSE_PCT">75%</span>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">Weekly reserve</div>
+          <div class="setting-hint">Keep this % of weekly budget for coding</div>
+        </div>
+        <div class="slider-wrap">
+          <input type="range" min="0" max="99" id="s-WEEKLY_RESERVE_PCT" oninput="document.getElementById('v-WEEKLY_RESERVE_PCT').textContent=this.value+'%'">
+          <span class="slider-val" id="v-WEEKLY_RESERVE_PCT">35%</span>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">Weekly hard stop</div>
+          <div class="setting-hint">Full stop at this weekly %</div>
+        </div>
+        <div class="slider-wrap">
+          <input type="range" min="1" max="100" id="s-WEEKLY_HARD_STOP_PCT" oninput="document.getElementById('v-WEEKLY_HARD_STOP_PCT').textContent=this.value+'%'">
+          <span class="slider-val" id="v-WEEKLY_HARD_STOP_PCT">90%</span>
+        </div>
+      </div>
+    </div>
+    <div class="settings-group">
+      <div class="settings-group-title">Polling</div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">Poll interval</div>
+          <div class="setting-hint">How often to read the Claude Code cache</div>
+        </div>
+        <div class="slider-wrap">
+          <input type="range" min="1" max="60" id="s-POLL_INTERVAL_MIN" oninput="document.getElementById('v-POLL_INTERVAL_MIN').textContent=this.value+'m'">
+          <span class="slider-val" id="v-POLL_INTERVAL_MIN">5m</span>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">Cache stale after</div>
+          <div class="setting-hint">Treat cache as stale if older than this</div>
+        </div>
+        <div class="slider-wrap">
+          <input type="range" min="5" max="120" id="s-CACHE_STALE_MIN" oninput="document.getElementById('v-CACHE_STALE_MIN').textContent=this.value+'m'">
+          <span class="slider-val" id="v-CACHE_STALE_MIN">30m</span>
+        </div>
+      </div>
+    </div>
+    <div class="settings-group">
+      <div class="settings-group-title" style="display:flex;justify-content:space-between;align-items:center">
+        Agent Providers
+        <button onclick="providerShowAdd()" style="background:var(--blue);color:#fff;border:none;border-radius:4px;padding:2px 8px;font-size:11px;cursor:pointer;font-family:inherit">+ Add</button>
+      </div>
+      <div id="provider-list" style="margin-bottom:8px"></div>
+      <div id="provider-add-form" style="display:none;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:8px">
+        <div style="font-size:11px;color:var(--muted);margin-bottom:8px;font-weight:600">NEW PROVIDER</div>
+        <div style="display:grid;gap:6px">
+          <input id="p-name" placeholder="Name (e.g. opencode)" style="background:var(--card);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:5px 8px;font-size:12px;font-family:inherit;width:100%">
+          <input id="p-command" placeholder="Command (e.g. /usr/local/bin/opencode)" style="background:var(--card);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:5px 8px;font-size:12px;font-family:var(--mono);width:100%">
+          <textarea id="p-args" rows="3" placeholder='Args template as JSON array&#10;e.g. ["run","--model","{{model}}","{{task}}"]' style="background:var(--card);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:5px 8px;font-size:11px;font-family:var(--mono);width:100%;resize:vertical"></textarea>
+          <div style="font-size:10px;color:var(--muted)">Placeholders: <code>{{task}}</code> <code>{{model}}</code> <code>{{cwd}}</code></div>
+          <div style="display:flex;gap:6px">
+            <button onclick="providerSaveAdd()" style="background:var(--blue);color:#fff;border:none;border-radius:4px;padding:4px 12px;font-size:12px;cursor:pointer;font-family:inherit">Save</button>
+            <button onclick="providerHideAdd()" style="background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:inherit">Cancel</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <span class="save-status" id="save-status">✓ Saved</span>
+      <button class="btn btn-secondary" onclick="closeSettings()">Cancel</button>
+      <button class="btn btn-primary" onclick="saveSettings()">Save</button>
+    </div>
+  </div>
+</div>
+<script>
+// ── Helpers ───────────────────────────────────────────────────────────────────
+let tz = 'America/Los_Angeles';  // updated from /status on every refresh
+function fmtPct(v) { return v == null ? '—' : Math.round(v) + '%'; }
+function fmtTs(iso) {
+  if (!iso) return '—';
+  return new Date(iso).toLocaleString('en-US', {
+    month:'short', day:'numeric', hour:'2-digit', minute:'2-digit', timeZone: tz
+  }) + ' ' + tzAbbr(tz);
+}
+function tzAbbr(tzName) {
+  try {
+    const parts = new Intl.DateTimeFormat('en-US', {timeZone: tzName, timeZoneName:'short'})
+      .formatToParts(new Date());
+    return parts.find(p => p.type === 'timeZoneName')?.value ?? tzName;
+  } catch { return tzName; }
+}
+function fmtHours(h) {
+  if (h == null || !isFinite(h) || h < 0) return null;
+  if (h < 1) return Math.round(h * 60) + 'm';
+  if (h < 24) return h.toFixed(1) + 'h';
+  return (h / 24).toFixed(1) + 'd';
+}
+function barColor(pct, warnAt, stopAt) {
+  if (pct >= stopAt) return 'red';
+  if (pct >= warnAt) return 'amber';
+  return 'green';
+}
+function isCodingHour(date, startH, endH) {
+  try {
+    const h = parseInt(new Intl.DateTimeFormat('en-US',{timeZone:tz,hour:'numeric',hour12:false}).format(date));
+    return h >= startH || h < endH;
+  } catch {
+    const pstH = ((date.getUTCHours() - 8 + 24) % 24);
+    return pstH >= startH || pstH < endH;
+  }
+}
+function slope(points) {
+  const n = points.length;
+  if (n < 2) return null;
+  let sx = 0, sy = 0, sxy = 0, sxx = 0;
+  for (const p of points) { sx += p.x; sy += p.y; sxy += p.x*p.y; sxx += p.x*p.x; }
+  const d = n*sxx - sx*sx;
+  return d === 0 ? null : (n*sxy - sx*sy) / d;
+}
+function hoursUntil(cur, target, slopePctPerMs) {
+  if (!slopePctPerMs || slopePctPerMs <= 0) return null;
+  const rem = target - cur;
+  if (rem <= 0) return 0;
+  return rem / slopePctPerMs / 3600000;
+}
+// ── Chart ─────────────────────────────────────────────────────────────────────
+let chart = null;
+let currentThresholds = {};
+function buildCodingBands(startMs, endMs, startH, endH) {
+  const pts = [], step = 15 * 60 * 1000;
+  for (let t = startMs; t <= endMs; t += step)
+    pts.push({ x: t, y: isCodingHour(new Date(t), startH, endH) ? 100 : null });
+  return pts;
+}
+function renderChart(fiveH, weekly, startMs, endMs, thr) {
+  const ctx = document.getElementById('chart').getContext('2d');
+  if (chart) chart.destroy();
+  const startH = thr.coding_start_h ?? 16;
+  const endH   = thr.coding_end_h   ?? 2;
+  const coding = buildCodingBands(startMs, endMs, startH, endH);
+  chart = new Chart(ctx, {
+    type: 'line',
+    data: { datasets: [
+      { label:'Coding window', data: coding, borderColor:'transparent', backgroundColor:'rgba(100,116,139,0.1)', fill:true, pointRadius:0, tension:0, spanGaps:false, order:10 },
+      { label:'5h pause',      data:[{x:startMs,y:thr.five_hour_pause_pct??75},{x:endMs,y:thr.five_hour_pause_pct??75}], borderColor:'rgba(59,130,246,0.3)', borderDash:[4,4], borderWidth:1, pointRadius:0, fill:false, order:5 },
+      { label:'Weekly pause',  data:[{x:startMs,y:100-(thr.weekly_reserve_pct??35)},{x:endMs,y:100-(thr.weekly_reserve_pct??35)}], borderColor:'rgba(245,158,11,0.3)', borderDash:[4,4], borderWidth:1, pointRadius:0, fill:false, order:5 },
+      { label:'Hard stop',     data:[{x:startMs,y:thr.weekly_hard_stop_pct??90},{x:endMs,y:thr.weekly_hard_stop_pct??90}], borderColor:'rgba(239,68,68,0.3)', borderDash:[4,4], borderWidth:1, pointRadius:0, fill:false, order:5 },
+      { label:'5h usage',    data:fiveH,  borderColor:'#3b82f6', backgroundColor:'rgba(59,130,246,0.07)', fill:true, pointRadius:0, pointHoverRadius:4, tension:0.3, borderWidth:2, order:1 },
+      { label:'Weekly usage',data:weekly, borderColor:'#22c55e', backgroundColor:'rgba(34,197,94,0.05)',  fill:true, pointRadius:0, pointHoverRadius:4, tension:0.3, borderWidth:2, order:1 },
+    ]},
+    options: {
+      responsive:true, maintainAspectRatio:false, animation:false,
+      interaction:{mode:'index',intersect:false},
+      plugins:{
+        legend:{display:false},
+        tooltip:{
+          backgroundColor:'#1e293b', borderColor:'#334155', borderWidth:1,
+          titleColor:'#94a3b8', bodyColor:'#e2e8f0',
+          callbacks:{
+            title: items => new Date(items[0].parsed.x).toLocaleString('en-US',{month:'short',day:'numeric',hour:'2-digit',minute:'2-digit',timeZone:tz})+' '+tzAbbr(tz),
+            label: item => ['Coding window','5h pause','Weekly pause','Hard stop'].includes(item.dataset.label) ? null : ` ${item.dataset.label}: ${item.parsed.y?.toFixed(1)}%`,
+          }
+        }
+      },
+      scales:{
+        x:{ type:'linear', min:startMs, max:endMs, grid:{color:'rgba(255,255,255,0.04)'}, ticks:{color:'#64748b', maxTicksLimit:8, callback:v=>new Date(v).toLocaleString('en-US',{month:'short',day:'numeric',hour:'2-digit',timeZone:tz})} },
+        y:{ min:0, max:100, grid:{color:'rgba(255,255,255,0.04)'}, ticks:{color:'#64748b', callback:v=>v+'%'} },
+      }
+    }
+  });
+}
+// ── Status cards ──────────────────────────────────────────────────────────────
+function renderStatus(s) {
+  const dot   = document.getElementById('status-dot');
+  const label = document.getElementById('status-label');
+  if (s.window === 'coding') { dot.className='dot amber'; label.textContent='Coding window'; }
+  else if (!s.ok)            { dot.className='dot red';   label.textContent='Paused'; }
+  else                       { dot.className='dot green'; label.textContent='Idle · max'; }
+  // Window card
+  const wEl  = document.getElementById('card-window');
+  const wSub = document.getElementById('card-window-sub');
+  if (s.window === 'coding') {
+    wEl.textContent = 'CODING'; wEl.style.color = 'var(--amber)';
+    const m = Math.round(s.next_idle_in_s / 60);
+    wSub.textContent = `idle in ${m>=60?Math.floor(m/60)+'h '+m%60+'m':m+'m'}`;
+  } else {
+    wEl.textContent = 'IDLE'; wEl.style.color = 'var(--green)';
+    wSub.textContent = s.reason || '';
+  }
+  // Stale badge
+  const stale = s.usage?.stale;
+  document.getElementById('stale-badge').style.display = stale ? 'inline-block' : 'none';
+  // 5h
+  const t5  = s.thresholds?.five_hour_pause_pct ?? 75;
+  const ts  = s.thresholds?.weekly_hard_stop_pct ?? 90;
+  const tw  = s.thresholds?.weekly_reserve_pct ?? 35;
+  const ceiling = 100 - tw;
+  const age = s.usage?.cache_age_s;
+  const fiveH = s.usage?.five_hour_pct;
+  document.getElementById('card-5h').textContent = fmtPct(fiveH);
+  const b5 = document.getElementById('bar-5h');
+  b5.style.width = Math.min(fiveH??0,100)+'%';
+  b5.className = 'bar-fill ' + barColor(fiveH??0, t5, 100);
+  document.getElementById('marker-5h').style.left = t5+'%';
+  document.getElementById('card-5h-sub').textContent =
+    `pause at ${t5}%` + (age != null ? ` · cache ${Math.round(age/60)}m old` : '');
+  // Weekly
+  const weekly = s.usage?.weekly_pct;
+  document.getElementById('card-weekly').textContent = fmtPct(weekly);
+  const bw = document.getElementById('bar-weekly');
+  bw.style.width = Math.min(weekly??0,100)+'%';
+  bw.className = 'bar-fill ' + barColor(weekly??0, ceiling, ts);
+  document.getElementById('marker-weekly-pause').style.left = ceiling+'%';
+  document.getElementById('marker-weekly-stop').style.left  = ts+'%';
+  document.getElementById('card-weekly-sub').textContent = `pause at ${ceiling}% · stop at ${ts}%`;
+  // Next milestone
+  const nextEl  = document.getElementById('card-next');
+  const nextSub = document.getElementById('card-next-sub');
+  if (s.window === 'coding') {
+    const h = Math.floor(s.next_idle_in_s/3600), m = Math.floor((s.next_idle_in_s%3600)/60);
+    nextEl.textContent = h>0?`${h}h ${m}m`:`${m}m`;
+    nextSub.textContent = 'until idle window';
+  } else if (s.usage?.weekly_resets_at) {
+    const d = new Date(s.usage.weekly_resets_at);
+    nextEl.textContent = d.toLocaleDateString('en-US',{month:'short',day:'numeric'});
+    nextSub.textContent = d.toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit',timeZone:tz})+' '+tzAbbr(tz)+' · weekly reset';
+  } else { nextEl.textContent='—'; nextSub.textContent=''; }
+  currentThresholds = s.thresholds || {};
+  if (s.thresholds?.timezone) {
+    tz = s.thresholds.timezone;
+    const abbr = tzAbbr(tz);
+    document.getElementById('sched-group-title').textContent = `Schedule (${abbr})`;
+  }
+}
+// ── Predictions ───────────────────────────────────────────────────────────────
+function renderPredictions(status, history) {
+  const el  = document.getElementById('predictions');
+  const thr = status.thresholds || {};
+  const fiveH  = status.usage?.five_hour_pct;
+  const weekly = status.usage?.weekly_pct;
+  const resets = status.usage?.weekly_resets_at;
+  const t5 = thr.five_hour_pause_pct  ?? 75;
+  const tw = thr.weekly_reserve_pct   ?? 35;
+  const ts = thr.weekly_hard_stop_pct ?? 90;
+  const cutoff = Date.now() - 6*3600000;
+  const recent = history.filter(h => new Date(h.bucket).getTime() > cutoff);
+  const s5  = slope(recent.map(h=>({x:new Date(h.bucket).getTime(), y:h.five_hour_pct})));
+  const sWk = slope(recent.map(h=>({x:new Date(h.bucket).getTime(), y:h.weekly_pct})));
+  const h5   = hoursUntil(fiveH,  t5,       s5);
+  const hw   = hoursUntil(weekly, 100-tw,   sWk);
+  const hws  = hoursUntil(weekly, ts,       sWk);
+  const resetStr = resets ? new Date(resets).toLocaleString('en-US',{month:'short',day:'numeric',hour:'2-digit',minute:'2-digit',timeZone:tz})+' '+tzAbbr(tz) : '—';
+  const items = [
+    { icon:'⏱', title:`5h hits pause (${t5}%)`,       value: h5===0?'Already paused':h5?'in ~'+fmtHours(h5):`${Math.round(fiveH??0)}% — healthy`,  cls: h5===0?'red':h5&&h5<2?'amber':'green' },
+    { icon:'📅', title:`Weekly hits pause (${100-tw}%)`, value: hw===0?'Already paused':hw?'in ~'+fmtHours(hw):`${Math.round(weekly??0)}% — healthy`, cls: hw===0?'red':hw&&hw<12?'amber':'green' },
+    { icon:'🛑', title:`Weekly hard stop (${ts}%)`,     value: hws===0?'Already stopped':hws?'in ~'+fmtHours(hws):`${Math.round(weekly??0)}% — safe`, cls: hws===0?'red':hws&&hws<24?'amber':'green' },
+    { icon:'🔄', title:'Weekly budget resets',           value: resetStr, cls:'green' },
+  ];
+  el.innerHTML = items.map(i=>`
+    <div class="pred-item">
+      <div class="pred-icon">${i.icon}</div>
+      <div><div class="pred-title">${i.title}</div><div class="pred-value ${i.cls}">${i.value}</div></div>
+    </div>`).join('');
+}
+// ── Slider track fill ─────────────────────────────────────────────────────────
+function updateSliderTrack(el) {
+  if (el.type !== 'range') return
+  const pct = ((el.value - el.min) / (el.max - el.min)) * 100
+  el.style.background = `linear-gradient(to right, var(--blue) ${pct}%, var(--border) ${pct}%)`
+}
+document.addEventListener('input', e => { if (e.target.type === 'range') updateSliderTrack(e.target) })
+// ── Settings modal ────────────────────────────────────────────────────────────
+function fmtHour12(h) {
+  if (h === 0)  return '12:00 AM';
+  if (h === 12) return '12:00 PM';
+  return h < 12 ? `${h}:00 AM` : `${h-12}:00 PM`;
+}
+function buildTimezoneSelect(currentTz) {
+  const sel = document.getElementById('s-TIMEZONE')
+  if (!sel) return
+  // Get all IANA timezones from the browser, group by region
+  const all = Intl.supportedValuesOf('timeZone')
+  const groups = {}
+  for (const tz of all) {
+    const region = tz.includes('/') ? tz.split('/')[0] : 'Other'
+    if (!groups[region]) groups[region] = []
+    groups[region].push(tz)
+  }
+  sel.innerHTML = ''
+  for (const region of Object.keys(groups).sort()) {
+    const og = document.createElement('optgroup')
+    og.label = region
+    for (const tz of groups[region]) {
+      const opt = document.createElement('option')
+      opt.value = tz
+      // Show offset + city: "America/New_York (EST, UTC-5)"
+      try {
+        const abbr = new Intl.DateTimeFormat('en-US', { timeZone: tz, timeZoneName: 'short' })
+          .formatToParts(new Date()).find(p => p.type === 'timeZoneName')?.value ?? ''
+        opt.textContent = `${tz.split('/').slice(1).join('/').replace(/_/g,' ')} (${abbr})`
+      } catch {
+        opt.textContent = tz
+      }
+      if (tz === currentTz) opt.selected = true
+      og.appendChild(opt)
+    }
+    sel.appendChild(og)
+  }
+}
+function buildHourSelects() {
+  ['s-CODING_START_H','s-CODING_END_H'].forEach(id => {
+    const sel = document.getElementById(id);
+    if (!sel || sel.options.length) return;
+    for (let h = 0; h < 24; h++) {
+      const opt = document.createElement('option');
+      opt.value = h;
+      opt.textContent = fmtHour12(h);
+      sel.appendChild(opt);
+    }
+  });
+}
+const SETTING_KEYS = ['CODING_START_H','CODING_END_H','TIMEZONE','FIVE_HOUR_PAUSE_PCT','WEEKLY_RESERVE_PCT','WEEKLY_HARD_STOP_PCT','POLL_INTERVAL_MIN','CACHE_STALE_MIN'];
+async function openSettings() {
+  buildHourSelects();
+  loadProviders();
+  const res = await fetch('/settings');
+  const cfg = await res.json();
+  buildTimezoneSelect(cfg.TIMEZONE ?? 'America/Los_Angeles');
+  const SLIDER_KEYS = { FIVE_HOUR_PAUSE_PCT:'%', WEEKLY_RESERVE_PCT:'%', WEEKLY_HARD_STOP_PCT:'%', POLL_INTERVAL_MIN:'m', CACHE_STALE_MIN:'m' }
+  for (const k of SETTING_KEYS) {
+    const el = document.getElementById('s-'+k);
+    if (!el) continue;
+    el.value = cfg[k] ?? '';
+    const vEl = document.getElementById('v-'+k);
+    if (vEl && SLIDER_KEYS[k]) vEl.textContent = (cfg[k] ?? '') + SLIDER_KEYS[k];
+    updateSliderTrack(el);
+  }
+  document.getElementById('save-status').style.display = 'none';
+  document.getElementById('modal-overlay').classList.add('open');
+}
+function closeSettings() {
+  document.getElementById('modal-overlay').classList.remove('open');
+}
+function maybeCloseModal(e) {
+  if (e.target === document.getElementById('modal-overlay')) closeSettings();
+}
+async function saveSettings() {
+  const body = {};
+  for (const k of SETTING_KEYS) {
+    const el = document.getElementById('s-'+k);
+    if (el) body[k] = el.value;
+  }
+  const res = await fetch('/settings', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body) });
+  if (res.ok) {
+    const ss = document.getElementById('save-status');
+    ss.style.display = 'block';
+    setTimeout(() => { ss.style.display='none'; closeSettings(); refresh(); }, 1000);
+  }
+}
+// ── Main refresh ──────────────────────────────────────────────────────────────
+async function refresh() {
+  try {
+    const [statusRes, historyRes] = await Promise.all([fetch('/status'), fetch('/history?hours=48')]);
+    const status  = await statusRes.json();
+    const history = (await historyRes.json()).history ?? [];
+    renderStatus(status);
+    renderPredictions(status, history);
+    const now = Date.now(), start = now - 48*3600000;
+    const fiveH  = history.map(h=>({x:new Date(h.bucket).getTime(), y:h.five_hour_pct}));
+    const weekly = history.map(h=>({x:new Date(h.bucket).getTime(), y:h.weekly_pct}));
+    if (status.usage?.five_hour_pct != null) fiveH.push({x:now, y:status.usage.five_hour_pct});
+    if (status.usage?.weekly_pct    != null) weekly.push({x:now, y:status.usage.weekly_pct});
+    renderChart(fiveH, weekly, start, now, status.thresholds || {});
+    document.getElementById('refresh-ts').textContent =
+      'updated ' + new Date().toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
+  } catch(e) { console.error('refresh failed', e); }
+}
+async function init() {
+  // Trigger immediate sync before first paint so data is fresh
+  await fetch('/sync', { method: 'POST' }).catch(() => {});
+  await refresh();
+  setInterval(refresh, 60000);
+}
+// ── Queue tab ──────────────────────────────────────────────────────────────────
+let qPage     = 0
+let qPageSize = 25
+const qExpanded   = new Set()
+const qSessionCache = new Map()
+// ── Providers ─────────────────────────────────────────────────────────────────
+let _providers = []
+async function loadProviders() {
+  const data = await fetch('/providers').then(r => r.json()).catch(() => null)
+  if (!data?.providers) return
+  _providers = data.providers
+  // populate add-task dropdown
+  const sel = document.getElementById('q-provider')
+  sel.innerHTML = `<option value="">default (${_providers.find(p => p.is_default)?.name ?? '—'})</option>` +
+    _providers.map(p => `<option value="${p.id}">${p.name}${p.is_default ? ' ★' : ''}</option>`).join('')
+  // render settings list
+  renderProviderList()
+}
+function renderProviderList() {
+  const el = document.getElementById('provider-list')
+  if (!el) return
+  if (!_providers.length) { el.innerHTML = '<div style="color:var(--muted);font-size:12px;font-style:italic">No providers</div>'; return }
+  el.innerHTML = _providers.map(p => `
+    <div style="display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:6px;margin-bottom:6px">
+      <div>
+        <div style="font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px">
+          ${escHtml(p.name)}
+          ${p.is_default ? '<span style="font-size:10px;background:rgba(59,130,246,.2);color:var(--blue);padding:1px 6px;border-radius:3px">default</span>' : ''}
+        </div>
+        <div style="font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px">${escHtml(p.command)}</div>
+        <div style="font-size:10px;color:#64748b;font-family:var(--mono);margin-top:2px">${escHtml(p.args_template)}</div>
+      </div>
+      <div style="display:flex;gap:4px;flex-shrink:0">
+        ${!p.is_default ? `<button onclick="providerSetDefault(${p.id})" title="Set as default" style="background:var(--card);border:1px solid var(--border);color:var(--muted);border-radius:4px;padding:2px 6px;font-size:11px;cursor:pointer">★</button>` : ''}
+        <button onclick="providerEdit(${p.id})" style="background:var(--card);border:1px solid var(--border);color:var(--muted);border-radius:4px;padding:2px 6px;font-size:11px;cursor:pointer">✎</button>
+        ${!p.is_default ? `<button onclick="providerDelete(${p.id})" style="background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:var(--red);border-radius:4px;padding:2px 6px;font-size:11px;cursor:pointer">✕</button>` : ''}
+      </div>
+    </div>`).join('')
+}
+function providerShowAdd() {
+  document.getElementById('provider-add-form').style.display = 'block'
+  document.getElementById('p-name').focus()
+}
+function providerHideAdd() {
+  document.getElementById('provider-add-form').style.display = 'none'
+  document.getElementById('p-name').value = ''
+  document.getElementById('p-command').value = ''
+  document.getElementById('p-args').value = ''
+}
+async function providerSaveAdd() {
+  const name    = document.getElementById('p-name').value.trim()
+  const command = document.getElementById('p-command').value.trim()
+  const args    = document.getElementById('p-args').value.trim()
+  if (!name || !command) { alert('Name and command required'); return }
+  let argsTemplate = args || '["{{task}}"]'
+  try { JSON.parse(argsTemplate) } catch { alert('Args must be a valid JSON array, e.g. ["run","{{task}}"]'); return }
+  const r = await fetch('/providers', { method:'POST', headers:{'content-type':'application/json'}, body:JSON.stringify({name, command, args_template: argsTemplate}) }).then(r=>r.json())
+  if (r.ok) { providerHideAdd(); loadProviders() } else { alert(r.error) }
+}
+async function providerSetDefault(id) {
+  await fetch(`/providers/${id}/default`, { method:'POST' })
+  loadProviders()
+}
+async function providerDelete(id) {
+  if (!confirm('Delete this provider?')) return
+  const r = await fetch(`/providers/${id}`, { method:'DELETE' }).then(r=>r.json())
+  if (r.ok) { loadProviders() } else { alert(r.error) }
+}
+function providerEdit(id) {
+  const p = _providers.find(x => x.id === id)
+  if (!p) return
+  const name    = prompt('Name:', p.name);    if (name    === null) return
+  const command = prompt('Command:', p.command); if (command === null) return
+  const args    = prompt('Args template (JSON array):', p.args_template); if (args === null) return
+  try { JSON.parse(args) } catch { alert('Invalid JSON array'); return }
+  fetch(`/providers/${id}`, { method:'PUT', headers:{'content-type':'application/json'}, body:JSON.stringify({name, command, args_template: args}) })
+    .then(() => loadProviders())
+}
+// ── Projects ──────────────────────────────────────────────────────────────────
+async function loadProjects() {
+  const data = await fetch('/projects').then(r => r.json()).catch(() => null)
+  const sel = document.getElementById('q-cwd-select')
+  const projects = data?.projects ?? []
+  sel.innerHTML =
+    `<option value="">— home dir (blank) —</option>` +
+    projects.map(p => {
+      const label = p.cwd.replace('/Users/missa/', '~/').replace('/Users/missa', '~')
+      return `<option value="${p.cwd}">${label}</option>`
+    }).join('') +
+    `<option value="__custom__">Other…</option>`
+}
+function qCwdSelectChange() {
+  const sel    = document.getElementById('q-cwd-select')
+  const custom = document.getElementById('q-cwd-custom')
+  if (sel.value === '__custom__') {
+    custom.style.display = 'block'
+    custom.focus()
+  } else {
+    custom.style.display = 'none'
+    custom.value = ''
+  }
+}
+async function loadModels() {
+  const sel = document.getElementById('q-model')
+  const current = sel.value
+  const data = await fetch('/models').then(r => r.json()).catch(() => null)
+  if (!data?.models?.length) return
+  sel.innerHTML = data.models
+    .map(m => `<option value="${m.id}"${m.id === current || (!current && m.id === 'claude-sonnet-4-6') ? ' selected' : ''}>${m.name.replace('Claude ','')}</option>`)
+    .join('')
+}
+let activeTab = 'dash'
+function switchTab(tab) {
+  activeTab = tab
+  document.querySelector('main:not(#queue-panel)').style.display = tab === 'dash' ? '' : 'none'
+  document.getElementById('queue-panel').style.display = tab === 'queue' ? '' : 'none'
+  document.getElementById('tab-dash').style.cssText  = tab === 'dash'
+    ? 'background:var(--accent);color:white;border:none;border-radius:6px;padding:5px 10px;cursor:pointer;font-family:inherit;font-size:12px'
+    : 'background:var(--card);color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:5px 10px;cursor:pointer;font-family:inherit;font-size:12px'
+  document.getElementById('tab-queue').style.cssText = tab === 'queue'
+    ? 'background:var(--blue);color:white;border:none;border-radius:6px;padding:6px 14px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0.01em;opacity:1'
+    : 'background:var(--blue);color:white;border:none;border-radius:6px;padding:6px 14px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0.01em;opacity:0.65'
+  if (tab === 'queue') { loadProviders(); loadModels(); loadProjects(); refreshQueue() }
+}
+const SCHEDULE_LABELS = { once:'', hourly:'⏰ hourly', daily:'📅 daily', weekly:'🗓 weekly', monthly:'📆 monthly' }
+function scheduleChip(t) {
+  if (!t.schedule || t.schedule === 'once') return ''
+  const label = SCHEDULE_LABELS[t.schedule] || t.schedule
+  if (t.status === 'scheduled' && t.next_run_at) {
+    return `<span style="font-size:10px;background:rgba(167,139,250,.15);color:#a78bfa;padding:1px 6px;border-radius:3px;margin-left:4px">${label} · runs ${qTimeSince(t.next_run_at)}</span>`
+  }
+  return `<span style="font-size:10px;background:rgba(167,139,250,.15);color:#a78bfa;padding:1px 6px;border-radius:3px;margin-left:4px">${label}</span>`
+}
+function qTimeSince(iso) {
+  if (!iso) return ''
+  const d = (Date.now() - new Date(iso).getTime()) / 1000
+  if (d < 60) return `${Math.round(d)}s ago`
+  if (d < 3600) return `${Math.round(d/60)}m ago`
+  return `${Math.round(d/3600)}h ago`
+}
+function qBadge(status) {
+  const colors = { scheduled:'#a78bfa', pending:'#f59e0b', running:'#3b82f6', done:'#22c55e', failed:'#ef4444' }
+  const c = colors[status] || '#64748b'
+  return `<span style="display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;background:${c}22;color:${c}">${status}</span>`
+}
+async function refreshQueue() {
+  const [statsRes, tasksRes] = await Promise.all([
+    fetch('/queue/stats').then(r => r.json()).catch(() => ({})),
+    fetch(`/queue?limit=${qPageSize}&offset=${qPage * qPageSize}`).then(r => r.json()).catch(() => ({ tasks: [], total: 0 })),
+  ])
+  document.getElementById('q-stat-scheduled').textContent = `${statsRes.scheduled ?? 0} scheduled`
+  document.getElementById('q-stat-pending').textContent   = `${statsRes.pending ?? 0} pending`
+  document.getElementById('q-stat-running').textContent   = `${statsRes.running ?? 0} running`
+  document.getElementById('q-stat-done').textContent      = `${statsRes.done ?? 0} done`
+  document.getElementById('q-stat-failed').textContent    = `${statsRes.failed ?? 0} failed`
+  const tasks = tasksRes.tasks ?? []
+  const total = tasksRes.total ?? 0
+  const totalPages = Math.max(1, Math.ceil(total / qPageSize))
+  renderTaskList(tasks)
+  renderPagination(total, totalPages)
+}
+function renderTaskList(tasks) {
+  const tEl = document.getElementById('q-task-list')
+  if (!tasks.length) {
+    tEl.innerHTML = '<div style="color:var(--muted);text-align:center;padding:20px;font-style:italic">No tasks yet</div>'
+    return
+  }
+  tEl.innerHTML = tasks.map(t => {
+    const expanded = qExpanded.has(t.id)
+    const hasSession = !!t.session_path
+    const expandIcon = expanded ? '▾' : '▸'
+    return `
+    <div id="task-row-${t.id}" style="border-bottom:1px solid var(--border)">
+      <div style="display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:10px 0;cursor:pointer" onclick="qToggleExpand(${t.id}, event)">
+        <span style="color:var(--muted);font-size:11px;min-width:28px;padding-top:2px">#${t.id}</span>
+        <div>
+          <div style="font-size:13px;line-height:1.5;display:flex;align-items:center;gap:6px;flex-wrap:wrap">
+            <span style="color:var(--muted);font-size:11px;user-select:none">${expandIcon}</span>
+            <span style="color:var(--text)">${escHtml(qDescPreview(t.description))}</span>
+            ${scheduleChip(t)}
+          </div>
+          <div style="color:var(--muted);font-size:11px;margin-top:3px;padding-left:18px">
+            ${t.cwd ? `<span>${t.cwd}</span> · ` : ''}${(() => { const p = _providers.find(x => x.id === t.provider_id) || _providers.find(x => x.is_default); return p ? `<span style="color:#94a3b8">${escHtml(p.name)}</span> · ` : '' })()}${t.model ? `<span style="color:#818cf8">${t.model.replace('claude-','')}</span> · ` : ''}added ${qTimeSince(t.created_at)}${t.finished_at ? ` · finished ${qTimeSince(t.finished_at)}` : ''}${t.tool_calls ? ` · ${t.tool_calls} tools` : ''}${t.tokens_used ? ` · ${t.tokens_used.toLocaleString()} tok` : ''}
+          </div>
+        </div>
+        <div style="display:flex;gap:6px;align-items:center" onclick="event.stopPropagation()">
+          ${qBadge(t.status)}
+          ${t.status === 'pending' ? `<button id="force-${t.id}" onclick="queueForceRun(${t.id})" style="background:#f59e0b;color:#0f1117;border:none;border-radius:4px;padding:3px 7px;cursor:pointer;font-size:11px;font-weight:600">▶</button>` : ''}
+          ${t.status !== 'running' ? `<button onclick="queueDeleteTask(${t.id})" style="background:#ef4444;color:white;border:none;border-radius:4px;padding:3px 7px;cursor:pointer;font-size:11px" title="Delete task">✕</button>` : ''}
+        </div>
+      </div>
+      <div id="task-expand-${t.id}" style="display:${expanded ? 'block' : 'none'};padding:0 0 12px 38px">
+        ${expanded ? renderTaskDetail(t, hasSession) : ''}
+      </div>
+    </div>`
+  }).join('')
+}
+function escHtml(s) {
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')
+}
+function renderMd(text) {
+  try { return marked.parse(text || '') } catch { return escHtml(text || '') }
+}
+function qDescPreview(desc) {
+  const line = (desc || '').split('\n')[0].trim()
+  if (line.length > 90) return line.slice(0, 88) + '…'
+  if ((desc || '').length > line.length) return line + ' …'
+  return line
+}
+function renderTaskDetail(t, hasSession) {
+  const cached = qSessionCache.get(t.id)
+  let html = ''
+  html += `<div style="background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px;margin-bottom:8px;max-height:320px;overflow-y:auto" class="md-body">${renderMd(t.description)}</div>`
+  if (t.result) {
+    html += `<div style="background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px;margin-bottom:8px;max-height:240px;overflow-y:auto" class="md-body">${renderMd(t.result)}</div>`
+  }
+  if (!hasSession) {
+    html += `<div style="color:var(--muted);font-size:11px;font-style:italic">No session recorded</div>`
+  } else if (!cached) {
+    html += `<div id="session-loading-${t.id}" style="color:var(--muted);font-size:11px">Loading session…</div>`
+    loadSession(t.id)
+  } else if (cached.error) {
+    html += `<div style="color:var(--red);font-size:11px">${cached.error}</div>`
+  } else {
+    html += renderSession(cached.turns)
+  }
+  return html
+}
+async function loadSession(taskId) {
+  try {
+    const data = await fetch(`/queue/${taskId}/session`).then(r => r.json())
+    qSessionCache.set(taskId, data)
+  } catch(e) {
+    qSessionCache.set(taskId, { error: e.message })
+  }
+  const expandEl = document.getElementById(`task-expand-${taskId}`)
+  if (!expandEl || !qExpanded.has(taskId)) return
+  // Re-render the detail section
+  const tasks = Array.from(document.querySelectorAll('[id^="task-row-"]'))
+  // Simple: just refresh queue but preserve expansion
+  refreshQueue()
+}
+function renderSession(turns) {
+  if (!turns?.length) return '<div style="color:var(--muted);font-size:11px;font-style:italic">Empty session</div>'
+  return turns.map((turn, i) => {
+    if (turn.role === 'user' && i === 0) return '' // skip first user turn (= task description)
+    if (turn.role === 'user') {
+      return `<div style="margin:6px 0;padding:6px 10px;background:rgba(255,255,255,.04);border-radius:6px;font-size:11px;color:var(--muted)">${escHtml(turn.text || '')}</div>`
+    }
+    // assistant turn
+    let html = '<div style="margin:8px 0">'
+    if (turn.thinking) {
+      const id = 'think-' + Math.random().toString(36).slice(2)
+      html += `<div style="margin-bottom:6px">
+        <button onclick="const d=document.getElementById('${id}');d.style.display=d.style.display?'':'none'"
+          style="background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);color:#a78bfa;border-radius:4px;padding:2px 8px;font-size:10px;cursor:pointer;font-family:inherit">
+          💭 Reasoning (${Math.round(turn.thinking.length/1000)}k chars)
+        </button>
+        <div id="${id}" style="display:none;margin-top:6px;background:rgba(139,92,246,.05);border:1px solid rgba(139,92,246,.2);border-radius:6px;padding:8px;font-size:11px;font-family:var(--mono);white-space:pre-wrap;color:#c4b5fd;max-height:300px;overflow-y:auto">${escHtml(turn.thinking)}</div>
+      </div>`
+    }
+    if (turn.text) {
+      html += `<div style="font-size:12px;color:var(--text);white-space:pre-wrap;line-height:1.6;margin-bottom:4px">${escHtml(turn.text)}</div>`
+    }
+    for (const tc of (turn.tool_calls || [])) {
+      const inputStr = JSON.stringify(tc.input, null, 2)
+      const resultStr = tc.result || ''
+      const tcId = 'tc-' + Math.random().toString(36).slice(2)
+      html += `<div style="margin:4px 0;border:1px solid var(--border);border-radius:6px;overflow:hidden;font-size:11px;font-family:var(--mono)">
+        <div onclick="const d=document.getElementById('${tcId}');d.style.display=d.style.display?'':'block'"
+          style="display:flex;align-items:center;gap:8px;padding:5px 10px;background:rgba(59,130,246,.08);cursor:pointer;user-select:none">
+          <span style="color:#60a5fa;font-weight:600">${escHtml(tc.name)}</span>
+          <span style="color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escHtml(summarizeInput(tc.input))}</span>
+          <span style="color:var(--muted);font-size:10px">${resultStr ? '✓' : ''}</span>
+        </div>
+        <div id="${tcId}" style="display:none">
+          <div style="padding:6px 10px;background:rgba(0,0,0,.2);white-space:pre-wrap;color:var(--muted);max-height:200px;overflow-y:auto">${escHtml(inputStr.slice(0,2000))}</div>
+          ${resultStr ? `<div style="padding:6px 10px;border-top:1px solid var(--border);white-space:pre-wrap;color:#86efac;max-height:200px;overflow-y:auto">${escHtml(resultStr)}</div>` : ''}
+        </div>
+      </div>`
+    }
+    html += '</div>'
+    return html
+  }).join('')
+}
+function summarizeInput(input) {
+  if (!input || typeof input !== 'object') return ''
+  const v = input.command || input.file_path || input.path || input.prompt || input.query || Object.values(input)[0] || ''
+  return String(v).slice(0, 120)
+}
+function renderPagination(total, totalPages) {
+  const pEl = document.getElementById('q-pagination')
+  if (!pEl) return
+  const start = qPage * qPageSize + 1
+  const end   = Math.min(start + qPageSize - 1, total)
+  pEl.innerHTML = `
+    <div style="display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px;color:var(--muted)">
+      <span>${total ? `${start}–${end} of ${total}` : '0 tasks'}</span>
+      <select onchange="qSetPageSize(+this.value)" style="background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:2px 6px;font-size:12px;cursor:pointer">
+        ${[25,50,100].map(n => `<option value="${n}"${n===qPageSize?' selected':''}>${n} / page</option>`).join('')}
+      </select>
+      <div style="display:flex;gap:4px">
+        <button onclick="qSetPage(0)" ${qPage===0?'disabled':''} style="background:var(--bg);border:1px solid var(--border);border-radius:4px;color:${qPage===0?'var(--muted)':'var(--text)'};padding:2px 8px;cursor:${qPage===0?'default':'pointer'};font-size:12px">«</button>
+        <button onclick="qSetPage(${qPage-1})" ${qPage===0?'disabled':''} style="background:var(--bg);border:1px solid var(--border);border-radius:4px;color:${qPage===0?'var(--muted)':'var(--text)'};padding:2px 8px;cursor:${qPage===0?'default':'pointer'};font-size:12px">‹</button>
+        <span style="padding:2px 10px;background:var(--card);border:1px solid var(--border);border-radius:4px">${qPage+1} / ${totalPages}</span>
+        <button onclick="qSetPage(${qPage+1})" ${qPage>=totalPages-1?'disabled':''} style="background:var(--bg);border:1px solid var(--border);border-radius:4px;color:${qPage>=totalPages-1?'var(--muted)':'var(--text)'};padding:2px 8px;cursor:${qPage>=totalPages-1?'default':'pointer'};font-size:12px">›</button>
+        <button onclick="qSetPage(${totalPages-1})" ${qPage>=totalPages-1?'disabled':''} style="background:var(--bg);border:1px solid var(--border);border-radius:4px;color:${qPage>=totalPages-1?'var(--muted)':'var(--text)'};padding:2px 8px;cursor:${qPage>=totalPages-1?'default':'pointer'};font-size:12px">»</button>
+      </div>
+    </div>`
+}
+function qSetPage(p) { qPage = p; refreshQueue() }
+function qSetPageSize(s) { qPageSize = s; qPage = 0; refreshQueue() }
+function qToggleExpand(taskId, event) {
+  if (qExpanded.has(taskId)) { qExpanded.delete(taskId) } else { qExpanded.add(taskId) }
+  refreshQueue()
+}
+async function queueAddTask() {
+  const desc       = document.getElementById('q-desc').value.trim()
+  const selVal     = document.getElementById('q-cwd-select').value
+  const cwd        = selVal === '__custom__'
+    ? document.getElementById('q-cwd-custom').value.trim()
+    : selVal
+  const model      = document.getElementById('q-model').value
+  const providerRaw = document.getElementById('q-provider').value
+  const provider_id = providerRaw ? parseInt(providerRaw) : undefined
+  const schedule    = document.getElementById('q-schedule').value || 'once'
+  if (!desc) return alert('Description required')
+  const r = await fetch('/queue', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ description: desc, cwd, model, provider_id, schedule }),
+  }).then(r => r.json())
+  if (r.ok) {
+    document.getElementById('q-desc').value = ''
+    document.getElementById('q-cwd-select').value = ''
+    document.getElementById('q-cwd-custom').style.display = 'none'
+    document.getElementById('q-cwd-custom').value = ''
+    refreshQueue()
+  } else {
+    alert(r.error)
+  }
+}
+async function queueDeleteTask(id) {
+  if (!confirm('Delete this task? This cannot be undone.')) return
+  await fetch(`/queue/${id}`, { method: 'DELETE' })
+  refreshQueue()
+}
+async function queueForceRun(id) {
+  const btn = document.getElementById(`force-${id}`)
+  if (btn) { btn.textContent = '⏳'; btn.disabled = true }
+  const r = await fetch(`/queue/${id}/force-run`, { method: 'POST' }).then(r => r.json()).catch(() => ({ ok: false, error: 'request failed' }))
+  if (!r.ok) { if (btn) { btn.textContent = '▶'; btn.disabled = false } alert(r.error); return }
+  const poll = setInterval(async () => {
+    const stats = await fetch('/queue/stats').then(r => r.json()).catch(() => ({}))
+    if (!stats.running) { clearInterval(poll); refreshQueue() }
+  }, 2000)
+}
+init();
+</script>
+</body>
+</html>