shelldeck 0.0.1__py3-none-any.whl

shelldeck/static/gitgraph.js

@@ -0,0 +1,142 @@
+import { $, $$, api, dialog, esc, fmtTime, icon, menu, toast, toastError } from "./ui.js";
+
+const ROW_H = 28;
+const LANE_W = 16;
+const R = 4;
+
+function laneX(col) {
+  return col * LANE_W + LANE_W / 2;
+}
+
+// A curve if the lane changes column, a straight line otherwise.
+function path(x1, y1, x2, y2) {
+  if (x1 === x2) return `M${x1},${y1} L${x2},${y2}`;
+  const my = (y1 + y2) / 2;
+  return `M${x1},${y1} C${x1},${my} ${x2},${my} ${x2},${y2}`;
+}
+
+function rowSvg(commit, lanes) {
+  const midY = ROW_H / 2;
+  const cx = laneX(commit.column);
+  const lines = [
+    ...commit.through.map((t) => `<path d="${path(laneX(t.col), 0, laneX(t.col), ROW_H)}" stroke="${t.color}" />`),
+    ...commit.enter.map((e) => `<path d="${path(laneX(e.from_col), 0, cx, midY)}" stroke="${e.color}" />`),
+    ...commit.exit.map((x) => `<path d="${path(cx, midY, laneX(x.to_col), ROW_H)}" stroke="${x.color}" />`),
+  ].join("");
+  return `<svg width="${lanes * LANE_W}" height="${ROW_H}" class="git-lanes">${lines}<circle cx="${cx}" cy="${midY}" r="${R}" fill="${commit.color}" /></svg>`;
+}
+
+function refPills(refs) {
+  return refs
+    .map((r) => {
+      const tag = r.startsWith("tag: ");
+      const name = r.replace("HEAD -> ", "").replace("tag: ", "");
+      return `<span class="git-ref ${tag ? "tag" : ""}" data-ref="${esc(name)}">${esc(name)}</span>`;
+    })
+    .join("");
+}
+
+function renderCommits(commits, lanes) {
+  return commits
+    .map(
+      (c) => `<div class="git-row" data-hash="${c.hash}">
+        ${rowSvg(c, lanes)}
+        <span class="git-hash mono">${c.short}</span>
+        <span class="git-subject" title="${esc(c.subject)}">${esc(c.subject)}</span>
+        <span class="git-refs">${refPills(c.refs)}</span>
+        <span class="git-author">${esc(c.author)}</span>
+        <span class="git-date faint">${fmtTime(c.date)}</span>
+      </div>`,
+    )
+    .join("");
+}
+
+const PAGE = 300;
+const SCROLL_MARGIN = 120; // px from the bottom that triggers loading the next page
+
+export function showGitGraph(project) {
+  let limit = PAGE;
+  let hasMore = false;
+  let loadingMore = false;
+  const d = dialog({ title: `Git \u2014 ${project.name}`, cls: "git-dialog", wide: true, body: `<div class="placeholder">Loading\u2026</div>` });
+  const body = $(".dialog-body", d.el);
+
+  async function load() {
+    limit = PAGE;
+    body.innerHTML = `<div class="placeholder">Loading\u2026</div>`;
+    try {
+      render(await api(`/api/projects/${project.id}/git/log?limit=${limit}`));
+    } catch (e) {
+      body.innerHTML = `<div class="placeholder">${esc(e.message.replaceAll("_", " "))}</div>`;
+    }
+  }
+
+  async function loadMore() {
+    if (loadingMore || !hasMore) return;
+    loadingMore = true;
+    limit += PAGE;
+    const scrollTop = $(".git-rows", body)?.scrollTop || 0;
+    try {
+      render(await api(`/api/projects/${project.id}/git/log?limit=${limit}`), scrollTop);
+    } catch (e) {
+      toastError(e);
+    } finally {
+      loadingMore = false;
+    }
+  }
+
+  function render(log, scrollTop = 0) {
+    hasMore = log.has_more;
+    if (!log.commits.length) {
+      body.innerHTML = `<div class="placeholder">No commits yet.</div>`;
+      return;
+    }
+    const lanes = 1 + Math.max(0, ...log.commits.flatMap((c) => [c.column, ...c.through.map((t) => t.col), ...c.enter.map((e) => e.from_col), ...c.exit.map((x) => x.to_col)]));
+    body.innerHTML = `<div class="git-head">
+        <span class="faint">On <strong>${esc(log.current_branch)}</strong></span>
+        <button class="icon-btn sm" data-git="refresh" title="Refresh" aria-label="Refresh">${icon("refresh")}</button>
+      </div>
+      <div class="git-rows">${renderCommits(log.commits, lanes)}</div>`;
+
+    $("[data-git=refresh]", body).onclick = load;
+    const rows = $(".git-rows", body);
+    rows.scrollTop = scrollTop;
+    rows.addEventListener("scroll", () => {
+      if (rows.scrollTop + rows.clientHeight >= rows.scrollHeight - SCROLL_MARGIN) loadMore();
+    });
+    const byHash = new Map(log.commits.map((c) => [c.hash, c]));
+    rows.addEventListener("contextmenu", (e) => {
+      const row = e.target.closest(".git-row");
+      if (!row) return;
+      e.preventDefault();
+      rowMenu({ x: e.clientX, y: e.clientY }, project, byHash.get(row.dataset.hash));
+    });
+    $$(".git-ref", body).forEach((pill) => {
+      pill.addEventListener("click", (e) => {
+        e.stopPropagation();
+        checkout(project, pill.dataset.ref);
+      });
+    });
+  }
+
+  function rowMenu(anchor, project, commit) {
+    const items = commit.refs
+      .filter((r) => !r.startsWith("tag: "))
+      .map((r) => r.replace("HEAD -> ", ""))
+      .map((name) => ({ label: `Checkout branch ${name}`, icon: "git-branch", onClick: () => checkout(project, name) }));
+    items.push({ label: "Checkout commit (detached)", icon: "git-branch", onClick: () => checkout(project, commit.hash) });
+    menu(anchor, items);
+  }
+
+  async function checkout(project, ref) {
+    try {
+      await api(`/api/projects/${project.id}/git/checkout`, { method: "POST", body: { ref } });
+      toast({ title: `Checked out ${ref}` });
+      load();
+    } catch (e) {
+      toastError(e);
+    }
+  }
+
+  load();
+}

shelldeck/static/history.js

@@ -0,0 +1,172 @@
+// Command history page and search across every terminal's output.
+import { S, findSession, orderedProjects, projectColor, sessionTitle, showSession } from "./app.js";
+import { runBookmarks } from "./views.js";
+import { $, api, confirmDialog, dialog, esc, fmtTime, icon, toast, toastError } from "./ui.js";
+
+function fmtMs(ms) {
+  if (ms == null) return "";
+  if (ms < 1000) return `${ms} ms`;
+  const s = ms / 1000;
+  return s < 60 ? `${s.toFixed(s < 10 ? 1 : 0)} s` : `${Math.floor(s / 60)}m ${Math.round(s % 60)}s`;
+}
+
+function terminalLabel(sid, projectId) {
+  const s = sid && findSession(sid);
+  if (s) return `<span class="proj-dot" style="background:${projectColor(s.project)}"></span>${esc(s.project.name)} · ${esc(sessionTitle(s))}`;
+  const p = S.projects.find((x) => x.id === projectId);
+  return p ? `<span class="proj-dot" style="background:${projectColor(p)}"></span>${esc(p.name)} <span class="faint">· closed</span>` : '<span class="faint">closed terminal</span>';
+}
+
+// ------------------------------------------------------------ history page
+
+let rows = [];
+
+export function renderHistory(el) {
+  if (!el.dataset.wired) {
+    el.dataset.wired = "1";
+    el.innerHTML = `<div class="page-head">
+        <div><h1>Command history</h1><p>Every command run in shelldeck, with its folder, exit code and duration. Insert types it into the focused terminal; Run also presses Enter.</p></div>
+        <button class="btn" data-h="clear">${icon("trash")}Clear history</button>
+      </div>
+      <div class="row hist-filters">
+        <input type="search" class="hist-q" placeholder="Search commands…" spellcheck="false" aria-label="Search commands" />
+        <select class="hist-project" aria-label="Project"><option value="">All projects</option></select>
+        <label class="hist-failed"><input type="checkbox" /> Failed only</label>
+      </div>
+      <div class="card hist-table"><table><tbody></tbody></table></div>`;
+    let timer = 0;
+    const reload = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => loadHistory(el), 200);
+    };
+    el.querySelector(".hist-q").addEventListener("input", reload);
+    el.querySelector(".hist-project").addEventListener("change", reload);
+    el.querySelector(".hist-failed input").addEventListener("change", reload);
+    el.addEventListener("click", (e) => onHistoryClick(e, el));
+  }
+  const sel = el.querySelector(".hist-project");
+  const current = sel.value;
+  sel.innerHTML = `<option value="">All projects</option>${orderedProjects().map((p) => `<option value="${p.id}" ${p.id === current ? "selected" : ""}>${esc(p.name)}</option>`).join("")}`;
+  loadHistory(el);
+}
+
+async function loadHistory(el) {
+  const params = new URLSearchParams({
+    q: el.querySelector(".hist-q").value,
+    project_id: el.querySelector(".hist-project").value,
+    failed: el.querySelector(".hist-failed input").checked,
+  });
+  try {
+    rows = (await api(`/api/history?${params}`)).commands;
+  } catch (e) {
+    return toastError(e);
+  }
+  el.querySelector(".hist-table tbody").innerHTML = rows.length
+    ? rows
+        .map(
+          (r, i) => `<tr>
+        <td class="faint nowrap">${esc(fmtTime(r.started_at))}</td>
+        <td class="hist-cmd"><code title="${esc(r.command)}">${esc(r.command)}</code>
+          <div class="hist-meta">${terminalLabel(r.session_id, r.project_id)}${r.cwd ? `<span class="faint"> · ${esc(r.cwd)}</span>` : ""}</div></td>
+        <td class="nowrap">${r.exit_code == null ? "" : `<span class="exit ${r.exit_code ? "bad" : "ok"}" title="Exit code">${r.exit_code ? `exit ${r.exit_code}` : "ok"}</span>`}</td>
+        <td class="num faint nowrap">${fmtMs(r.duration_ms)}</td>
+        <td class="nowrap hist-actions">
+          <button class="icon-btn sm" data-h="insert" data-i="${i}" title="Insert into focused terminal" aria-label="Insert">${icon("terminal")}</button>
+          <button class="icon-btn sm" data-h="run" data-i="${i}" title="Run in focused terminal" aria-label="Run">${icon("play")}</button>
+          <button class="icon-btn sm" data-h="copy" data-i="${i}" title="Copy" aria-label="Copy">${icon("clipboard")}</button>
+          <button class="icon-btn sm" data-h="bookmark" data-i="${i}" title="Save as bookmark" aria-label="Save as bookmark">${icon("bookmark")}</button>
+        </td>
+      </tr>`,
+        )
+        .join("")
+    : `<tr><td class="faint empty-row">No commands yet. Commands appear here once you run them in a terminal.</td></tr>`;
+}
+
+async function onHistoryClick(e, el) {
+  const b = e.target.closest("[data-h]");
+  if (!b) return;
+  const a = b.dataset.h;
+  if (a === "clear") {
+    if (await confirmDialog("Delete every saved command? Terminals are not affected.", { ok: "Clear history", danger: true })) {
+      await api("/api/history", { method: "DELETE" });
+      loadHistory(el);
+    }
+    return;
+  }
+  const r = rows[+b.dataset.i];
+  if (!r) return;
+  if (a === "copy") {
+    await navigator.clipboard.writeText(r.command).catch(() => {});
+    toast({ title: "Copied", body: r.command, timeout: 2000 });
+  } else if (a === "insert" || a === "run") {
+    const focused = S.focused && findSession(S.focused);
+    if (focused) showSession(focused.id);
+    runBookmarks([{ command: r.command, project_id: focused ? null : r.project_id }], { execute: a === "run" });
+  } else if (a === "bookmark") {
+    try {
+      await api("/api/bookmarks", { method: "POST", body: { name: r.command.slice(0, 40), command: r.command, project_id: r.project_id || null } });
+      toast({ title: "Saved as bookmark", body: r.command, timeout: 2500 });
+    } catch (err) {
+      toastError(err);
+    }
+  }
+}
+
+// ------------------------------------------------------ search all terminals
+
+function highlight(text, q) {
+  const i = text.toLowerCase().indexOf(q.toLowerCase());
+  if (i < 0) return esc(text);
+  return `${esc(text.slice(0, i))}<mark>${esc(text.slice(i, i + q.length))}</mark>${esc(text.slice(i + q.length))}`;
+}
+
+export function searchAllDialog() {
+  const d = dialog({
+    title: "Search all terminals",
+    wide: true,
+    cls: "search-all",
+    body: `<input type="search" class="sa-q" placeholder="Text in any terminal's output (2+ characters)…" spellcheck="false" aria-label="Search text" />
+      <div class="sa-results"><p class="faint">Searches the saved output of every terminal, including ones not on screen.</p></div>`,
+  });
+  const input = $(".sa-q", d.el);
+  const out = $(".sa-results", d.el);
+  let timer = 0;
+  let seq = 0;
+  input.addEventListener("input", () => {
+    clearTimeout(timer);
+    timer = setTimeout(async () => {
+      const q = input.value.trim();
+      const mine = ++seq;
+      if (q.length < 2) {
+        out.innerHTML = `<p class="faint">Type at least 2 characters.</p>`;
+        return;
+      }
+      let results;
+      try {
+        results = (await api(`/api/search?q=${encodeURIComponent(q)}`)).results;
+      } catch (e) {
+        return toastError(e);
+      }
+      if (mine !== seq) return;
+      out.innerHTML = results.length
+        ? results
+            .map(
+              (r) => `<div class="sa-group">
+          <div class="sa-head">${terminalLabel(r.session_id)}<span class="faint"> · ${r.count} match${r.count === 1 ? "" : "es"}</span></div>
+          ${r.hits.map((h) => `<button class="sa-hit" data-sid="${r.session_id}"><code>${highlight(h.text, q)}</code></button>`).join("")}
+        </div>`,
+            )
+            .join("")
+        : `<p class="faint">No matches.</p>`;
+    }, 200);
+  });
+  out.addEventListener("click", (e) => {
+    const hit = e.target.closest(".sa-hit");
+    if (!hit) return;
+    const q = input.value.trim();
+    d.close();
+    const t = showSession(hit.dataset.sid);
+    setTimeout(() => (t || S.terms.get(hit.dataset.sid))?.openFind(q), 50);
+  });
+  input.focus();
+}

shelldeck/static/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect x="0.5" y="0.5" width="31" height="31" rx="8" fill="#0a0a0b" stroke="#3f3f46"/><path d="M9 11l5 5-5 5" fill="none" stroke="#fafafa" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 21h6" stroke="#fafafa" stroke-width="3" stroke-linecap="round"/></svg>

shelldeck/static/index.html

@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark light" />
+    <title>shelldeck</title>
+    <link rel="icon" href="/static/icon.svg" type="image/svg+xml" />
+    <link rel="icon" href="/static/icon-32.png" sizes="32x32" type="image/png" />
+    <link rel="apple-touch-icon" href="/static/icon-192.png" />
+    <link rel="manifest" href="/static/manifest.webmanifest" />
+    <meta name="theme-color" content="#0a0a0b" />
+    <link rel="stylesheet" href="/static/vendor/xterm.css" />
+    <link rel="stylesheet" href="/static/app.css" />
+    <script src="/static/vendor/xterm.js"></script>
+    <script src="/static/vendor/addon-fit.js"></script>
+    <script src="/static/vendor/addon-web-links.js"></script>
+    <script src="/static/vendor/addon-webgl.js"></script>
+    <script src="/static/vendor/addon-search.js"></script>
+    <script src="/static/vendor/addon-serialize.js"></script>
+    <script type="module" src="/static/app.js"></script>
+  </head>
+  <body>
+    <div id="boot" aria-hidden="true">
+      <div class="boot-mark">
+        <svg viewBox="0 0 32 32"><rect x="0.5" y="0.5" width="31" height="31" rx="8" fill="#0a0a0b" stroke="#3f3f46"/><path class="chev" d="M9 11l5 5-5 5" fill="none" stroke="#fafafa" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path class="cursor" d="M17 21h6" stroke="#fafafa" stroke-width="3" stroke-linecap="round"/></svg>
+        <span class="boot-name">shelldeck<span class="boot-cover"></span></span>
+      </div>
+    </div>
+    <div id="app">
+      <aside id="sidebar" aria-label="Projects">
+        <div class="sb-head">
+          <div class="brand"><img src="/static/icon.svg" alt="" width="18" height="18" /> shelldeck</div>
+          <button class="icon-btn" data-action="toggle-sidebar" title="Hide sidebar (Ctrl+Alt+E)" aria-label="Hide sidebar"><i data-icon="panel"></i></button>
+        </div>
+        <button class="sb-new" data-action="new-terminal"><i data-icon="plus"></i><span>New terminal</span><kbd>Ctrl Alt N</kbd></button>
+        <button class="sb-search" data-action="palette"><i data-icon="search"></i><span>Search</span><kbd>Ctrl K</kbd></button>
+        <div class="sb-section">
+          <span>Projects</span>
+          <button class="icon-btn sm" data-action="add-project" title="Add project" aria-label="Add project"><i data-icon="folder-plus"></i></button>
+        </div>
+        <nav id="projects" class="sb-projects"></nav>
+        <div class="sb-foot">
+          <button class="sb-link" data-action="view" data-view="terminals"><i data-icon="terminal"></i>Terminals</button>
+          <button class="sb-link" data-action="view" data-view="bookmarks"><i data-icon="bookmark"></i>Bookmarks</button>
+          <button class="sb-link" data-action="view" data-view="scheduler"><i data-icon="clock"></i>Scheduler</button>
+          <button class="sb-link" data-action="view" data-view="tasks"><i data-icon="kanban"></i>Tasks</button>
+          <button class="sb-link" data-action="view" data-view="history"><i data-icon="history"></i>History</button>
+          <button class="sb-link" data-action="view" data-view="monitor"><i data-icon="activity"></i>Task manager</button>
+          <div class="sb-row">
+            <button class="sb-link" data-action="settings"><i data-icon="settings"></i>Settings</button>
+            <span id="conn" class="conn" title="Server connection"></span>
+          </div>
+        </div>
+        <div class="sb-resize" data-resize="sidebar" aria-hidden="true"></div>
+      </aside>
+      <div id="scrim" data-action="toggle-sidebar"></div>
+
+      <main id="main">
+        <header id="topbar">
+          <button class="icon-btn" id="sb-open" data-action="toggle-sidebar" title="Show sidebar (Ctrl+Alt+E)" aria-label="Show sidebar"><i data-icon="panel"></i></button>
+          <div id="crumbs" class="crumbs"></div>
+          <button id="sysmon" class="sysmon" data-action="view" data-view="monitor" title="Task manager (Ctrl+Alt+M)" aria-label="System usage, open task manager"></button>
+          <div class="top-actions" id="term-actions">
+            <button class="icon-btn" data-action="bookmark-picker" title="Run bookmark (Ctrl+Alt+B)" aria-label="Run bookmark"><i data-icon="bookmark"></i></button>
+            <button class="icon-btn" data-action="split" data-dir="row" title="Split right (Ctrl+Alt+\)" aria-label="Split right"><i data-icon="split-h"></i></button>
+            <button class="icon-btn" data-action="tile" title="Tile all windows" aria-label="Tile all windows" hidden><i data-icon="grid"></i></button>
+            <button class="icon-btn" data-action="split" data-dir="col" title="Split down (Ctrl+Alt+-)" aria-label="Split down"><i data-icon="split-v"></i></button>
+          </div>
+        </header>
+
+        <section id="view-terminals" class="view">
+          <div id="layout"></div>
+          <div id="empty" class="empty">
+            <div class="empty-card">
+              <img src="/static/icon.svg" alt="" width="40" height="40" />
+              <h2>No terminal open</h2>
+              <p>Add a project folder, then open a terminal in it.</p>
+              <div class="row">
+                <button class="btn primary" data-action="add-project"><i data-icon="folder-plus"></i>Add project</button>
+                <button class="btn" data-action="new-terminal"><i data-icon="plus"></i>New terminal</button>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section id="view-bookmarks" class="view page" hidden></section>
+        <section id="view-scheduler" class="view page" hidden></section>
+        <section id="view-tasks" class="view page" hidden></section>
+        <section id="view-monitor" class="view page" hidden></section>
+        <section id="view-history" class="view page" hidden></section>
+      </main>
+    </div>
+
+    <div id="term-store" hidden></div>
+    <div id="dialog-root"></div>
+    <div id="menu-root"></div>
+    <div id="toasts" aria-live="polite"></div>
+    <div id="lock" hidden>
+      <form class="lock-card" id="lock-form"></form>
+    </div>
+  </body>
+</html>

shelldeck/static/manifest.webmanifest

@@ -0,0 +1 @@
+{"name":"shelldeck","short_name":"shelldeck","display":"standalone","background_color":"#0a0a0b","theme_color":"#0a0a0b","start_url":"/","icons":[{"src":"/static/icon.svg","sizes":"any","type":"image/svg+xml","purpose":"any"},{"src":"/static/icon-192.png","sizes":"192x192","type":"image/png"},{"src":"/static/icon-512.png","sizes":"512x512","type":"image/png"}]}

shelldeck/static/monitor.js

@@ -0,0 +1,143 @@
+// Resource usage: top-bar meters and the Task manager page. One poller feeds both.
+import { S, findSession, portChips, projectColor, sessionTitle, shellLabel, showSession } from "./app.js";
+import { $, api, esc } from "./ui.js";
+
+const POLL_MS = 2000;
+const HISTORY = 60; // samples kept for sparklines (2 minutes)
+const hist = { cpu: [], mem: [], gpu: [] };
+let stats = null;
+let pageEl = null;
+
+export function startMonitor() {
+  poll();
+  setInterval(() => !document.hidden && poll(), POLL_MS);
+}
+
+async function poll() {
+  try {
+    stats = await api("/api/stats");
+  } catch {
+    return;
+  }
+  const s = stats.system;
+  push("cpu", s.cpu);
+  push("mem", (100 * s.mem_used) / s.mem_total);
+  if (s.gpu) push("gpu", s.gpu.util);
+  renderMeters();
+  updatePorts();
+  if (pageEl && !pageEl.hidden) renderMonitor(pageEl);
+}
+
+// dev servers etc. listening in a terminal: chips in its pane header
+function updatePorts() {
+  const next = {};
+  for (const [sid, u] of Object.entries(stats.sessions)) if (u.ports?.length) next[sid] = u.ports;
+  if (JSON.stringify(next) === JSON.stringify(S.ports)) return;
+  S.ports = next;
+  for (const el of document.querySelectorAll(".pane[data-sid] .pane-head .ports")) {
+    el.innerHTML = portChips(el.closest(".pane").dataset.sid);
+  }
+}
+
+function push(k, v) {
+  hist[k].push(v);
+  if (hist[k].length > HISTORY) hist[k].shift();
+}
+
+export function fmtBytes(b) {
+  return b >= 2 ** 30 ? `${(b / 2 ** 30).toFixed(1)} GB` : `${Math.round(b / 2 ** 20)} MB`;
+}
+
+const level = (pct) => (pct >= 85 ? "high" : pct >= 60 ? "mid" : "");
+
+function meter(label, pct, text, title) {
+  return `<span class="meter" data-level="${level(pct)}" title="${esc(title)}">
+    <span class="m-label">${label}</span><span class="m-bar"><i style="width:${Math.min(100, pct).toFixed(1)}%"></i></span><span class="m-val">${esc(text)}</span>
+  </span>`;
+}
+
+function renderMeters() {
+  const el = $("#sysmon");
+  if (!el || !stats) return;
+  const s = stats.system;
+  const memPct = (100 * s.mem_used) / s.mem_total;
+  el.innerHTML =
+    meter("CPU", s.cpu, `${Math.round(s.cpu)}%`, `CPU ${s.cpu.toFixed(1)}%`) +
+    meter("RAM", memPct, `${(s.mem_used / 2 ** 30).toFixed(1)}/${Math.round(s.mem_total / 2 ** 30)}G`, `Memory ${fmtBytes(s.mem_used)} of ${fmtBytes(s.mem_total)} (${Math.round(memPct)}%)`) +
+    (s.gpu ? meter("GPU", s.gpu.util, `${Math.round(s.gpu.util)}%`, `${s.gpu.name}: ${s.gpu.util}% · VRAM ${fmtBytes(s.gpu.mem_used)} of ${fmtBytes(s.gpu.mem_total)}`) : "");
+}
+
+function spark(values) {
+  if (values.length < 2) return `<svg class="spark" viewBox="0 0 100 32" preserveAspectRatio="none"></svg>`;
+  const step = 100 / (HISTORY - 1);
+  const x0 = 100 - step * (values.length - 1);
+  const pts = values.map((v, i) => `${(x0 + i * step).toFixed(2)},${(31 - (Math.min(100, v) / 100) * 30).toFixed(2)}`);
+  return `<svg class="spark" viewBox="0 0 100 32" preserveAspectRatio="none" aria-hidden="true">
+    <polygon points="${x0.toFixed(2)},32 ${pts.join(" ")} 100,32" /><polyline points="${pts.join(" ")}" />
+  </svg>`;
+}
+
+function card(label, value, sub, key, pct) {
+  return `<div class="card mon-card" data-level="${level(pct)}">
+    <div class="mon-label">${label}</div>
+    <div class="mon-value">${esc(value)}</div>
+    <div class="mon-sub">${esc(sub)}</div>
+    ${key ? spark(hist[key]) : ""}
+  </div>`;
+}
+
+export function renderMonitor(el) {
+  pageEl = el;
+  if (!el.dataset.wired) {
+    el.dataset.wired = "1";
+    el.addEventListener("click", (e) => {
+      const port = e.target.closest("[data-port]")?.dataset.port;
+      if (port) return window.open(`http://localhost:${port}`, "_blank", "noopener");
+      const sid = e.target.closest("tr[data-sid]")?.dataset.sid;
+      if (sid) showSession(sid);
+    });
+  }
+  const head = `<div class="page-head"><div><h1>Task manager</h1>
+    <p>Live usage of this machine and of each running terminal (its shell plus every process started from it). Updates every 2 seconds.</p></div></div>`;
+  if (!stats) {
+    el.innerHTML = `${head}<p class="faint">Loading…</p>`;
+    return;
+  }
+  const s = stats.system;
+  const memPct = (100 * s.mem_used) / s.mem_total;
+  const cards = [
+    card("CPU", `${s.cpu.toFixed(0)}%`, `${navigator.hardwareConcurrency || "?"} logical cores`, "cpu", s.cpu),
+    card("Memory", `${fmtBytes(s.mem_used)} / ${fmtBytes(s.mem_total)}`, `${Math.round(memPct)}% in use`, "mem", memPct),
+    s.gpu
+      ? card("GPU", `${Math.round(s.gpu.util)}%`, `${s.gpu.name} · VRAM ${fmtBytes(s.gpu.mem_used)} / ${fmtBytes(s.gpu.mem_total)}`, "gpu", s.gpu.util)
+      : card("GPU", "n/a", "No NVIDIA GPU found (usage comes from nvidia-smi)", null, 0),
+  ].join("");
+
+  const rows = Object.entries(stats.sessions)
+    .map(([sid, u]) => ({ sid, u, s: findSession(sid) }))
+    .filter((r) => r.s)
+    .sort((a, b) => b.u.cpu - a.u.cpu || b.u.mem - a.u.mem);
+  const total = rows.reduce((t, r) => ({ cpu: t.cpu + r.u.cpu, mem: t.mem + r.u.mem, procs: t.procs + r.u.procs }), { cpu: 0, mem: 0, procs: 0 });
+  const body = rows.length
+    ? rows
+        .map(
+          ({ sid, u, s: sess }) => `<tr data-sid="${sid}" title="Open terminal">
+        <td><span class="proj-dot" style="background:${projectColor(sess.project)}"></span>${esc(sessionTitle(sess))}<span class="faint"> · ${esc(shellLabel(sess.shell))}</span></td>
+        <td class="faint">${esc(sess.project.name)}</td>
+        <td class="num"><span class="cell-bar" data-level="${level(u.cpu)}"><i style="width:${Math.min(100, u.cpu)}%"></i></span>${u.cpu.toFixed(1)}%</td>
+        <td class="num">${fmtBytes(u.mem)}</td>
+        <td class="num">${u.procs}</td>
+        <td class="mono">${esc((u.top || "").replace(/\.exe$/i, "")) || '<span class="faint" title="No processes besides the shell">—</span>'}</td>
+        <td>${portChips(sid)}</td>
+      </tr>`,
+        )
+        .join("")
+    : `<tr><td colspan="7" class="faint empty-row">No running terminals. A terminal starts when you open it.</td></tr>`;
+
+  el.innerHTML = `${head}<div class="mon-cards">${cards}</div>
+    <div class="card mon-table"><table>
+      <thead><tr><th>Terminal</th><th>Project</th><th class="num">CPU</th><th class="num">Memory</th><th class="num">Processes</th><th>Busiest process</th><th>Ports</th></tr></thead>
+      <tbody>${body}</tbody>
+      ${rows.length ? `<tfoot><tr><td>All terminals</td><td></td><td class="num">${total.cpu.toFixed(1)}%</td><td class="num">${fmtBytes(total.mem)}</td><td class="num">${total.procs}</td><td></td><td></td></tr></tfoot>` : ""}
+    </table></div>`;
+}