@openparachute/agent 0.1.2 → 0.2.2

package/src/ui-kit.test.ts

@@ -0,0 +1,178 @@
+/**
+ * Unit tests for the shared UI kit (src/ui-kit.ts) — the foundation every
+ * channel page adopts. Guards the shell contract (active-tab marking, controls
+ * slot, nav set) + the token/CSS invariants the pages depend on.
+ */
+import { describe, test, expect } from "bun:test";
+import { THEME_CSS, SHELL_JS, appShell, NAV_VIEWS, BRAND } from "./ui-kit.ts";
+
+describe("appShell", () => {
+  test("renders the brand + all nav tabs, marking only the active one", () => {
+    const h = appShell({ active: "agents" });
+    expect(h).toContain("app-header");
+    expect(h).toContain('class="brand-mark"');
+    for (const v of NAV_VIEWS) expect(h).toContain(`data-view="${v.view}"`);
+    // active tab gets class="active"; others don't.
+    expect(h).toContain('data-view="agents" href="#" class="active"');
+    expect(h).toContain('data-view="chat" href="#"');
+    expect(h).not.toContain('data-view="chat" href="#" class="active"');
+  });
+
+  test("marks Home active when it is the current view", () => {
+    const h = appShell({ active: "home" });
+    expect(h).toContain('data-view="home" href="#" class="active"');
+    expect(h).toContain('data-view="chat" href="#"');
+    expect(h).not.toContain('data-view="chat" href="#" class="active"');
+  });
+
+  test("status defaults, and a custom status + tag suffix render", () => {
+    expect(appShell({ active: "chat" })).toContain('id="status"');
+    const h = appShell({ active: "chat", status: "● ready", tag: "chat" });
+    expect(h).toContain("● ready");
+    expect(h).toContain("· chat");
+  });
+
+  test("controls slot is injected before the status when provided, omitted otherwise", () => {
+    const withCtl = appShell({ active: "terminal", controls: "<button id='reconnect'>Reconnect</button>" });
+    expect(withCtl).toContain("app-controls");
+    expect(withCtl).toContain("id='reconnect'");
+    expect(appShell({ active: "terminal" })).not.toContain("app-controls");
+  });
+
+  test("nav covers exactly home/chat/agents/schedules/terminal/config, Home first", () => {
+    expect(NAV_VIEWS.map((v) => v.view)).toEqual([
+      "home",
+      "chat",
+      "agents",
+      "schedules",
+      "terminal",
+      "config",
+    ]);
+  });
+});
+
+describe("THEME_CSS", () => {
+  test("declares the brand tokens incl. the warm-light bg, accent, warn, and dark term pane", () => {
+    expect(THEME_CSS).toContain(":root");
+    expect(THEME_CSS).toContain(`--bg: ${BRAND.bg}`); // #faf8f4, the warm light brand
+    expect(THEME_CSS).toContain(`--accent: ${BRAND.accent}`);
+    expect(THEME_CSS).toContain(`--warn: ${BRAND.warn}`);
+    expect(THEME_CSS).toContain(`--term-bg: ${BRAND.termBg}`); // #000 — the only intended black
+  });
+  test("ships the shared component layer (shell + buttons + banners + pills)", () => {
+    for (const sel of [".app-nav", ".app-nav a.active", ".btn-primary", ".banner-warn", ".pill.warn"]) {
+      expect(THEME_CSS).toContain(sel);
+    }
+  });
+  test("carries NO leftover dark-console tokens (the pages unified on the brand)", () => {
+    expect(THEME_CSS).not.toContain("#0f1115");
+    expect(THEME_CSS).not.toContain("--panel");
+  });
+});
+
+describe("SHELL_JS", () => {
+  test("provides MOUNT derivation, nav wiring, token fetch, and helpers", () => {
+    for (const sym of ["var MOUNT", "function wireShell", "function escapeHtml", "function setStatus", "function fetchToken", "function authedFetch", "function setTerminalNavVisible"]) {
+      expect(SHELL_JS).toContain(sym);
+    }
+    // It hits the hub agent-token endpoint with the operator cookie.
+    expect(SHELL_JS).toContain("/admin/agent-token");
+    expect(SHELL_JS).toContain('credentials: "include"');
+  });
+
+  // Terminal-nav cleanup (Parachute Agent Phase 1): wireShell hides the standalone
+  // Terminal nav entry by default (programmatic backend has no terminal); pages
+  // reveal it via setTerminalNavVisible when an interactive agent exists. The
+  // Terminal page itself (active === "terminal") shows it.
+  test("wireShell gates the Terminal nav link via setTerminalNavVisible", () => {
+    expect(SHELL_JS).toContain('a[data-view="terminal"]');
+    // wireShell defaults the terminal entry to its own-page-only visibility.
+    expect(SHELL_JS).toContain('setTerminalNavVisible(active === "terminal")');
+  });
+  test("is safe to interpolate — no naked backtick that could break a host literal", () => {
+    expect(SHELL_JS.includes("`")).toBe(false);
+  });
+  test("exports a renderMarkdown helper (reused by the chat transcript)", () => {
+    expect(SHELL_JS).toContain("function renderMarkdown");
+  });
+});
+
+// renderMarkdown lives inside SHELL_JS (vanilla JS, no DOM). Evaluate SHELL_JS in
+// a fresh function scope and hand back its renderMarkdown so we can exercise it
+// directly — the same code the chat page runs in the browser.
+function loadRenderMarkdown(): (text: string) => string {
+  // SHELL_JS defines `var MOUNT = window.location...` at the top; stub a minimal
+  // window so that line doesn't throw when evaluated outside a browser.
+  const factory = new Function(
+    "window",
+    SHELL_JS + "\nreturn renderMarkdown;",
+  ) as (w: unknown) => (text: string) => string;
+  return factory({ location: { pathname: "/ui" } });
+}
+
+describe("renderMarkdown (SHELL_JS, XSS-safe Markdown subset)", () => {
+  const renderMarkdown = loadRenderMarkdown();
+
+  test("escapes raw HTML first — a <script> tag never survives as markup", () => {
+    const out = renderMarkdown("<script>alert(1)</script>");
+    expect(out).not.toContain("<script>");
+    expect(out).toContain("&lt;script&gt;");
+  });
+
+  test("renders bold and italic", () => {
+    expect(renderMarkdown("**bold**")).toContain("<strong>bold</strong>");
+    expect(renderMarkdown("an *italic* word")).toContain("<em>italic</em>");
+  });
+
+  test("renders inline code and fenced code blocks", () => {
+    const bt = String.fromCharCode(96);
+    expect(renderMarkdown(bt + "inline" + bt)).toContain("<code>inline</code>");
+    const fenced = renderMarkdown(bt + bt + bt + "\nconst x = 1;\n" + bt + bt + bt);
+    expect(fenced).toContain("<pre><code>");
+    expect(fenced).toContain("const x = 1;");
+  });
+
+  test("does not apply inline rules inside code spans", () => {
+    const bt = String.fromCharCode(96);
+    const out = renderMarkdown(bt + "**not bold**" + bt);
+    expect(out).toContain("<code>**not bold**</code>");
+    expect(out).not.toContain("<strong>");
+  });
+
+  test("renders http/https links as anchors with the url preserved", () => {
+    const out = renderMarkdown("[site](https://example.com/x)");
+    expect(out).toContain('href="https://example.com/x"');
+    expect(out).toContain(">site</a>");
+    expect(out).toContain('rel="noopener noreferrer"');
+  });
+
+  test("rejects javascript: URLs — renders inert escaped text, no anchor", () => {
+    const out = renderMarkdown("[click](javascript:alert(1))");
+    // No anchor and no href is produced — the would-be URL never reaches markup.
+    expect(out).not.toContain("<a ");
+    expect(out).not.toContain("href=");
+    // The markdown is left as inert escaped text (safe — not an executable link).
+    expect(out).toContain("[click]");
+  });
+
+  test("rejects data: URLs too — only http/https survive as anchors", () => {
+    const out = renderMarkdown("[x](data:text/html,<script>alert(1)</script>)");
+    expect(out).not.toContain("<a ");
+    expect(out).not.toContain("href=");
+    // any escaped markup inside is inert text, never executable.
+    expect(out).not.toContain("<script>");
+  });
+
+  test("escapes other canonical XSS vectors (img onerror, svg onload)", () => {
+    const out1 = renderMarkdown('<img src=x onerror=alert(1)>');
+    expect(out1).not.toContain("<img");
+    expect(out1).toContain("&lt;img");
+    const out2 = renderMarkdown('<svg onload=alert(1)>');
+    expect(out2).not.toContain("<svg");
+    expect(out2).toContain("&lt;svg");
+  });
+
+  test("converts newlines to <br>", () => {
+    expect(renderMarkdown("line1\nline2")).toContain("line1<br>line2");
+  });
+});

package/src/ui-kit.ts

@@ -0,0 +1,402 @@
+/**
+ * Shared UI kit for the agent module's web pages (chat, agents, terminal,
+ * config). ONE source of truth for the look + the app shell, so the four pages
+ * read as one app instead of four hand-rolled surfaces.
+ *
+ * Why this exists: every page used to re-implement its own theme, header, nav,
+ * buttons, MOUNT derivation, and token fetch. That guaranteed drift (a light
+ * admin page vs three dark ones; a nav on some pages, a dead-end on others).
+ * This module is the fix at the root — adopt it on every page and the surfaces
+ * can't diverge.
+ *
+ * The look is the canonical Parachute brand (warm/light, teal accent, serif
+ * headlines) — consistent with the hub portal, brain, and surfaces. The ONE
+ * exception is the terminal CONTENT pane, which stays black like any terminal
+ * (`--term-bg`); only the chrome around it is brand-light.
+ *
+ * Three exports:
+ *   - THEME_CSS  — the full stylesheet (tokens + base + shell + components).
+ *   - appShell() — the shared <header> markup (brand + nav tabs + status slot).
+ *   - SHELL_JS   — shared client JS (MOUNT, nav wiring, token fetch, helpers).
+ *
+ * Pages drop `<style>${THEME_CSS}</style>` + `${appShell({active})}` +
+ * `<script>${SHELL_JS} ...page JS...</script>` and add only their page-specific
+ * styles/markup/logic on top.
+ */
+
+/** The Parachute brand palette + fonts, promoted from the original admin page. */
+export const BRAND = {
+  bg: "#faf8f4",
+  bgSoft: "#f3f0ea",
+  fg: "#2c2a26",
+  fgMuted: "#6b6860",
+  fgDim: "#9a9690",
+  accent: "#4cc2a0",
+  accentHover: "#3da689",
+  accentSoft: "rgba(76, 194, 160, 0.10)",
+  border: "#e4e0d8",
+  borderLight: "#ece9e2",
+  card: "#ffffff",
+  danger: "#a3392b",
+  dangerSoft: "rgba(163, 57, 43, 0.08)",
+  success: "#3d6849",
+  successSoft: "rgba(61, 104, 73, 0.08)",
+  // A warm amber for warnings (distinct from danger-red and accent-teal) — fits
+  // the warm-light palette. Used for "needs attention" states (e.g. no credential
+  // set yet, a permission prompt) that aren't errors.
+  warn: "#8a6d1b",
+  warnSoft: "rgba(184, 134, 11, 0.12)",
+  // The terminal content pane stays dark — a terminal is black everywhere.
+  termBg: "#000000",
+  termFg: "#e6e9ef",
+  fontSans: `-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif`,
+  fontSerif: `Georgia, "Times New Roman", serif`,
+  fontMono: `ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace`,
+} as const;
+
+/** The navigable views, in nav order. Home is the default landing (Phase 2). */
+export const NAV_VIEWS = [
+  { view: "home", label: "Home", path: "/home" },
+  { view: "chat", label: "Chat", path: "/ui" },
+  { view: "agents", label: "Agents", path: "/agents" },
+  { view: "schedules", label: "Schedules", path: "/jobs" },
+  { view: "terminal", label: "Terminal", path: "/terminal" },
+  { view: "config", label: "Config", path: "/admin" },
+] as const;
+
+export type ShellView = (typeof NAV_VIEWS)[number]["view"];
+
+/**
+ * The shared stylesheet: CSS custom properties (the brand tokens) + base
+ * element styles + the app-shell header/nav + the component layer (buttons,
+ * cards, banners, inputs, fields, pills, sections). Every page includes this
+ * verbatim and layers only page-specific rules on top.
+ */
+export const THEME_CSS = `
+  :root {
+    --bg: ${BRAND.bg};
+    --bg-soft: ${BRAND.bgSoft};
+    --fg: ${BRAND.fg};
+    --fg-muted: ${BRAND.fgMuted};
+    --fg-dim: ${BRAND.fgDim};
+    --accent: ${BRAND.accent};
+    --accent-hover: ${BRAND.accentHover};
+    --accent-soft: ${BRAND.accentSoft};
+    --border: ${BRAND.border};
+    --border-light: ${BRAND.borderLight};
+    --card: ${BRAND.card};
+    --danger: ${BRAND.danger};
+    --danger-soft: ${BRAND.dangerSoft};
+    --success: ${BRAND.success};
+    --success-soft: ${BRAND.successSoft};
+    --warn: ${BRAND.warn};
+    --warn-soft: ${BRAND.warnSoft};
+    --term-bg: ${BRAND.termBg};
+    --term-fg: ${BRAND.termFg};
+    --font-sans: ${BRAND.fontSans};
+    --font-serif: ${BRAND.fontSerif};
+    --font-mono: ${BRAND.fontMono};
+  }
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  body {
+    font-family: var(--font-sans);
+    background: var(--bg);
+    color: var(--fg);
+    line-height: 1.55;
+    min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  a { color: var(--accent); text-decoration: none; }
+  a:hover { color: var(--accent-hover); text-decoration: underline; }
+  code, pre { font-family: var(--font-mono); }
+
+  /* ---- App shell: the shared top bar on every page ------------------------ */
+  .app-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.6rem 1.1rem;
+    background: var(--card);
+    border-bottom: 1px solid var(--border);
+    flex-wrap: wrap;
+  }
+  .app-brand { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
+  .brand-mark {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 1.5rem; height: 1.5rem; border-radius: 50%;
+    background: var(--accent); color: var(--card);
+    font-weight: 600; font-size: 0.85rem; line-height: 1;
+  }
+  .brand-name { font-weight: 600; letter-spacing: 0.01em; color: var(--fg); }
+  .brand-name small { color: var(--fg-dim); font-weight: 400; }
+  .app-nav { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; }
+  .app-nav a {
+    color: var(--fg-muted);
+    text-decoration: none;
+    font-size: 0.9rem;
+    padding: 0.3rem 0.6rem;
+    border-radius: 6px;
+    transition: background 0.12s ease, color 0.12s ease;
+  }
+  .app-nav a:hover { background: var(--bg-soft); color: var(--fg); text-decoration: none; }
+  .app-nav a.active { background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; }
+  .app-controls { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
+  .app-status { font-size: 0.8rem; color: var(--fg-dim); flex: 0 0 auto; }
+  .app-status.live { color: var(--accent-hover); }
+  .app-status.err { color: var(--danger); }
+  .spacer { flex: 1 1 auto; }
+
+  /* ---- Buttons ----------------------------------------------------------- */
+  .btn {
+    font: inherit;
+    font-weight: 500;
+    padding: 0.5rem 0.9rem;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    background: var(--card);
+    color: var(--fg);
+    cursor: pointer;
+    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+  }
+  .btn:hover { border-color: var(--fg-dim); }
+  .btn:disabled { opacity: 0.5; cursor: default; }
+  .btn-primary { background: var(--accent); border-color: var(--accent); color: #06140f; font-weight: 600; }
+  .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+  .btn-secondary { background: var(--bg-soft); }
+  .btn-danger { color: var(--danger); border-color: var(--border); background: transparent; }
+  .btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
+  .btn-ghost { background: transparent; border-color: transparent; color: var(--fg-muted); }
+  .btn-ghost:hover { background: var(--bg-soft); color: var(--fg); }
+  .btn-sm { font-size: 0.8rem; padding: 0.3rem 0.7rem; }
+
+  /* ---- Cards / sections -------------------------------------------------- */
+  .card-surface {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 1.5rem 1.5rem;
+    box-shadow: 0 1px 2px rgba(44,42,38,0.04), 0 8px 24px rgba(44,42,38,0.06);
+  }
+  h1 { font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; line-height: 1.2; margin: 0 0 0.4rem; color: var(--fg); }
+  h2, .section-title { font-family: var(--font-serif); font-weight: 400; font-size: 1.2rem; margin: 0; color: var(--fg); }
+  .subtitle, .muted { margin: 0; color: var(--fg-muted); font-size: 0.95rem; }
+  .dim { color: var(--fg-dim); }
+
+  /* ---- Banners / notices ------------------------------------------------- */
+  .banner {
+    margin: 0 0 1rem;
+    padding: 0.75rem 0.9rem;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    border: 1px solid transparent;
+  }
+  .banner-error, .banner-err { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
+  .banner-success, .banner-ok { background: var(--success-soft); border-color: var(--success); color: var(--success); }
+  .banner-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
+  .banner code { font-family: var(--font-mono); font-size: 0.85em; background: rgba(255,255,255,0.5); padding: 0.05rem 0.3rem; border-radius: 3px; }
+
+  /* ---- Inputs / fields --------------------------------------------------- */
+  select, input[type=text], input[type=password], textarea {
+    font: inherit;
+    width: 100%;
+    padding: 0.5rem 0.7rem;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--card);
+    color: var(--fg);
+  }
+  select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); }
+  .field { display: flex; flex-direction: column; gap: 0.3rem; }
+  .field[hidden] { display: none; }
+  .field-label { font-size: 0.85rem; font-weight: 500; color: var(--fg-muted); letter-spacing: 0.01em; }
+  .field-hint { font-size: 0.8rem; color: var(--fg-dim); }
+  .field-error { font-size: 0.8rem; color: var(--danger); font-weight: 500; }
+
+  /* ---- Pills (status badges) -------------------------------------------- */
+  .pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-muted); background: var(--bg-soft); }
+  .pill.on, .pill.attached { color: var(--accent-hover); border-color: var(--accent); background: var(--accent-soft); }
+  .pill.off { color: var(--fg-dim); }
+  .pill.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
+  .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; background: var(--fg-dim); }
+  .dot.live { background: var(--accent); }
+
+  /* ---- Generic page main ------------------------------------------------- */
+  .page { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem; }
+`;
+
+/**
+ * Render the shared app-shell header. `active` highlights the current view;
+ * `controls` is an optional HTML slot for page-specific header controls (the
+ * terminal's agent picker + Reconnect, the chat/terminal channel select) placed
+ * before the status. `status` seeds the status text (default "connecting…").
+ * Nav hrefs are placeholders wired client-side by SHELL_JS (so they resolve
+ * under the hub proxy mount). `tag` is an optional brand suffix (e.g. "agents").
+ */
+export function appShell(opts: { active: ShellView; controls?: string; status?: string; tag?: string }): string {
+  const links = NAV_VIEWS.map((v) => {
+    const cls = v.view === opts.active ? ' class="active"' : "";
+    return `<a data-view="${v.view}" href="#"${cls}>${v.label}</a>`;
+  }).join("");
+  const tag = opts.tag ? ` <small>· ${opts.tag}</small>` : "";
+  const controls = opts.controls ? `<span class="app-controls">${opts.controls}</span>` : "";
+  const status = opts.status ?? "connecting…";
+  return `<header class="app-header">
+    <span class="app-brand"><span class="brand-mark">A</span><span class="brand-name">Agent${tag}</span></span>
+    <nav class="app-nav">${links}</nav>
+    <span class="spacer"></span>
+    ${controls}
+    <span id="status" class="app-status">${status}</span>
+  </header>`;
+}
+
+/**
+ * Shared client JS, injected into each page's <script> (interpolated as
+ * `${SHELL_JS}` — its content, including any backticks, is inserted at runtime,
+ * so it never collides with the host page's own template literal). Provides:
+ *   - MOUNT      — the public path prefix (handles loopback + hub /agent proxy)
+ *   - wireShell  — set nav hrefs from MOUNT + mark the active tab
+ *   - escapeHtml — text/attribute-safe escape (mirrors the server-side one)
+ *   - setStatus  — update the shared #status element
+ *   - fetchToken / authedFetch — hub agent-token fetch with one 401 retry
+ * Pages keep their own stream logic (SSE/WS) but reuse fetchToken for the token.
+ */
+export const SHELL_JS = `
+  // Public mount prefix: "" on loopback, "/agent" behind the hub proxy.
+  var MOUNT = window.location.pathname.replace(/\\/(home|ui|admin|agents|jobs|terminal)(\\/[^?]*)?\\/?$/, "");
+  var NAV_MAP = { home: "/home", chat: "/ui", agents: "/agents", schedules: "/jobs", terminal: "/terminal", config: "/admin" };
+  function wireShell(active) {
+    var links = document.querySelectorAll(".app-nav a[data-view]");
+    for (var i = 0; i < links.length; i++) {
+      var v = links[i].getAttribute("data-view");
+      if (NAV_MAP[v] != null) links[i].setAttribute("href", MOUNT + NAV_MAP[v]);
+      if (v === active) links[i].classList.add("active");
+      else links[i].classList.remove("active");
+    }
+    // Terminal-nav cleanup (Parachute Agent Phase 1): programmatic is the default
+    // backend, which has no live terminal — so the standalone Terminal nav entry is
+    // HIDDEN by default. It's only meaningful when an INTERACTIVE agent exists.
+    // Pages that know the interactive-agent count call setTerminalNavVisible(true)
+    // to reveal it; the Terminal page itself reveals it (you're already on it). The
+    // /terminal ROUTE + page stay fully functional regardless — only the nav chrome
+    // is gated, never the capability.
+    setTerminalNavVisible(active === "terminal");
+  }
+  // Show/hide the standalone Terminal nav link. Default hidden (see wireShell);
+  // a page reveals it once it learns an interactive agent is running. Idempotent.
+  function setTerminalNavVisible(show) {
+    var link = document.querySelector('.app-nav a[data-view="terminal"]');
+    if (link) link.style.display = show ? "" : "none";
+  }
+  // Reveal the Terminal nav entry IFF ≥1 interactive agent is running. Pages that
+  // don't otherwise list agents (chat, config) call this on boot so they don't
+  // STRAND an operator who has a live interactive session: GET /api/agents
+  // (agent:admin via authedFetch) and reveal when any agent's backend isn't
+  // programmatic. Best-effort + never throws — a failed/401 fetch leaves the
+  // default-hidden state (the /terminal route still works regardless). The agents
+  // + home pages drive the link directly from their own list and don't need this.
+  function revealTerminalNavIfInteractive() {
+    return authedFetch(MOUNT + "/api/agents")
+      .then(function (r) { return r && r.ok ? r.json() : null; })
+      .then(function (j) {
+        var agents = (j && j.agents) || [];
+        if (agents.some(function (a) { return a.backend !== "programmatic"; })) {
+          setTerminalNavVisible(true);
+        }
+      })
+      .catch(function () { /* leave default-hidden */ });
+  }
+  function escapeHtml(s) {
+    return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  // Render a SMALL, SAFE subset of Markdown to HTML. XSS-safe by construction:
+  // the input is escapeHtml'd FIRST (so no raw HTML can survive), THEN a limited
+  // set of patterns is applied to the already-escaped string. Supports fenced
+  // code blocks, inline code, bold, italic, links (http/https only), and line
+  // breaks. Anything else passes through as escaped text. Returns trusted HTML —
+  // assign it via innerHTML. Shared so Phase 4's vault-backed chat reuses it.
+  //
+  // No literal backtick appears in this source (SHELL_JS is asserted backtick-
+  // free so it is safe to interpolate into a host template literal); the fence +
+  // inline-code markers are built from char code 96 at runtime.
+  function renderMarkdown(text) {
+    var BT = String.fromCharCode(96); // the backtick character
+    var escaped = escapeHtml(String(text == null ? "" : text));
+    // 1. Fenced code blocks: a run of 3+ backticks, optional language token on
+    //    the open line, body until the closing fence. Pull these out FIRST and
+    //    park them as placeholders so inline rules never touch code contents.
+    // (These dynamic regexes are built via new RegExp from strings inside SHELL_JS,
+    //  which is itself a template literal then eval'd, so regex backslashes are
+    //  written four-deep in this source to survive both unescapes to a single
+    //  regex escape at runtime. The placeholder NUL sentinels are written the
+    //  same way so they reach the runtime as a real NUL.)
+    var blocks = [];
+    var fence = new RegExp(BT + "{3,}([^\\\\n]*)\\\\n([\\\\s\\\\S]*?)" + BT + "{3,}", "g");
+    escaped = escaped.replace(fence, function (_m, _lang, code) {
+      blocks.push(code.replace(/\\n$/, ""));
+      return "\\u0000B" + (blocks.length - 1) + "\\u0000";
+    });
+    // 2. Inline code: a single backtick run. Park it too so bold/italic/link
+    //    rules never fire inside code.
+    var inlines = [];
+    var inline = new RegExp(BT + "([^" + BT + "\\\\n]+)" + BT, "g");
+    escaped = escaped.replace(inline, function (_m, code) {
+      inlines.push(code);
+      return "\\u0000I" + (inlines.length - 1) + "\\u0000";
+    });
+    // 3. Links: [text](url) — only http/https URLs survive; anything else (e.g.
+    //    javascript:) renders as inert escaped text. The URL is already HTML-
+    //    escaped; we re-escape the double-quote for the attribute context.
+    escaped = escaped.replace(/\\[([^\\]]+)\\]\\(([^)\\s]+)\\)/g, function (m, label, url) {
+      if (!/^https?:\\/\\//i.test(url)) return m;
+      var safeUrl = url.replace(/"/g, "&quot;");
+      return '<a href="' + safeUrl + '" target="_blank" rel="noopener noreferrer">' + label + "</a>";
+    });
+    // 4. Bold (**x**) then italic (*x* / _x_). Bold first so ** is consumed
+    //    before the single-* italic rule sees it.
+    escaped = escaped.replace(/\\*\\*([^*\\n]+)\\*\\*/g, "<strong>$1</strong>");
+    escaped = escaped.replace(/(^|[^*])\\*([^*\\n]+)\\*/g, "$1<em>$2</em>");
+    escaped = escaped.replace(/(^|[^_])_([^_\\n]+)_/g, "$1<em>$2</em>");
+    // 5. Line breaks → <br>.
+    escaped = escaped.replace(/\\n/g, "<br>");
+    // 6. Restore the parked code spans (their contents stay escaped, never parsed).
+    escaped = escaped.replace(/\\u0000I(\\d+)\\u0000/g, function (_m, i) {
+      return "<code>" + inlines[+i] + "</code>";
+    });
+    escaped = escaped.replace(/\\u0000B(\\d+)\\u0000/g, function (_m, i) {
+      return "<pre><code>" + blocks[+i] + "</code></pre>";
+    });
+    return escaped;
+  }
+  function setStatus(text, kind) {
+    var el = document.getElementById("status");
+    if (!el) return;
+    el.textContent = text;
+    el.className = "app-status" + (kind ? " " + kind : "");
+  }
+  // Hub-minted agent token (cookie-gated to the logged-in operator). Cached on
+  // window.__token; pages attach it as a Bearer header and/or ?token= param.
+  // (Endpoint renamed /admin/channel-token → /admin/agent-token in the
+  // channel→agent rename; the hub 301-redirects the old path for old bookmarks.)
+  function fetchToken() {
+    return fetch(window.location.origin + "/admin/agent-token", { credentials: "include" })
+      .then(function (r) { if (!r.ok) throw new Error("token " + r.status); return r.json(); })
+      .then(function (j) { window.__token = j && j.token ? j.token : null; return window.__token; })
+      .catch(function (err) { window.__token = null; throw err; });
+  }
+  // fetch() with the agent Bearer + a single token-refresh retry on 401.
+  function authedFetch(url, opts) {
+    opts = opts || {};
+    var headers = Object.assign({}, opts.headers || {});
+    if (window.__token) headers["authorization"] = "Bearer " + window.__token;
+    return fetch(url, Object.assign({}, opts, { headers: headers })).then(function (r) {
+      if (r.status !== 401) return r;
+      return fetchToken().then(function (tok) {
+        if (!tok) return r;
+        var h2 = Object.assign({}, opts.headers || {}, { authorization: "Bearer " + tok });
+        return fetch(url, Object.assign({}, opts, { headers: h2 }));
+      });
+    });
+  }
+`;

package/tsconfig.json

@@ -1,21 +1,15 @@
 {
   "compilerOptions": {
-    "target": "ES2022",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "lib": ["ES2022"],
-    "types": ["bun-types", "node"],
-    "outDir": "./dist",
-    "rootDir": "./src",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
     "strict": true,
+    "noUncheckedIndexedAccess": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
+    "types": ["bun-types"]
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "include": ["src"]
 }

package/web/ui/dist/assets/index-C-iWdFFV.css

@@ -0,0 +1 @@
+:root{--bg: #faf8f4;--bg-soft: #f3f0ea;--fg: #2c2a26;--fg-muted: #6b6860;--fg-dim: #9a9690;--accent: #4a7c59;--accent-soft: rgba(74, 124, 89, .08);--accent-hover: #3d6849;--border: #e4e0d8;--border-light: #ece9e2;--card-bg: #ffffff;--error: #a3392b;--error-soft: rgba(163, 57, 43, .08);--warn: #b08023;--warn-soft: rgba(176, 128, 35, .08);--success: #3d6849;--success-soft: rgba(61, 104, 73, .08);--font-serif: Georgia, "Times New Roman", serif;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace;font-family:var(--font-sans)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:.45rem .9rem;cursor:pointer;transition:background .15s ease}button:hover{background:var(--accent-hover)}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:#fff;color:var(--fg);border:1px solid var(--border)}button.secondary:hover{background:var(--bg-soft)}code{font-family:var(--font-mono);font-size:.85em;background:var(--bg-soft);padding:.1em .3em;border-radius:3px}.page{max-width:960px;margin:0 auto;padding:1.5rem 1.5rem 6rem}.nav{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--border);margin-bottom:2rem}.nav .brand{font-weight:600;font-family:var(--font-serif);font-size:1.15rem;margin-right:auto;display:inline-flex;align-items:center;gap:.45rem;color:var(--accent);text-decoration:none}.nav .brand:hover{color:var(--accent-hover);text-decoration:none}.nav .brand-wordmark{color:var(--fg);letter-spacing:-.005em}.nav .brand .sub{color:var(--fg-dim);font-size:.78rem;font-weight:400;margin-left:.4rem;font-family:var(--font-sans)}.nav a{color:var(--fg-muted);font-size:.95rem}.nav a:hover{text-decoration:none;color:var(--fg)}.nav a.nav-link-active{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px}h1{margin:0 0 .5rem;font-family:var(--font-serif);font-size:1.85rem;font-weight:400;letter-spacing:-.01em;line-height:1.2;color:var(--fg)}h2{margin:0 0 1rem;font-size:1.4rem;font-weight:500}h3{margin:0 0 .5rem;font-size:1.05rem;font-weight:600}.muted{color:var(--fg-muted);font-size:.92rem}.dim{color:var(--fg-dim);font-size:.85rem}.lede{color:var(--fg-muted);font-size:.95rem;margin:0 0 1.5rem;max-width:60ch}.error-banner{background:var(--error-soft);border:1px solid var(--error);color:var(--error);padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem}.info-banner{background:var(--accent-soft);border:1px solid var(--accent);color:var(--fg);padding:.65rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.88rem}.empty{border:1px dashed var(--border);border-radius:10px;padding:2rem 1.5rem;text-align:center;color:var(--fg-muted);background:var(--card-bg)}.loading{color:var(--fg-muted);padding:1rem 0;font-size:.92rem}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.25rem;box-shadow:0 1px 2px #2c2a260a,0 8px 24px #2c2a260d;margin-bottom:1.5rem}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.section-head .count{color:var(--fg-dim);font-size:.85rem}table{width:100%;border-collapse:collapse;font-size:.88rem}th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--border);vertical-align:middle}th{color:var(--fg-muted);font-weight:500;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}tr.agent-row{cursor:pointer}tr.agent-row:hover{background:var(--bg-soft)}tr.agent-row.selected{background:var(--accent-soft)}.cell-name{font-weight:600;color:var(--fg)}.cell-dim{color:var(--fg-dim)}.pill{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em;border:1px solid var(--border);color:var(--fg-muted);background:var(--bg-soft)}.pill.backend-programmatic{color:var(--accent);background:var(--accent-soft);border-color:transparent}.pill.backend-channel{color:var(--warn);background:var(--warn-soft);border-color:transparent}.pill.backend-interactive{color:var(--fg-muted);background:var(--bg-soft)}.pill.status-enabled,.pill.status-idle{color:var(--success);background:var(--success-soft);border-color:transparent}.pill.status-working{color:var(--accent);background:var(--accent-soft);border-color:transparent}.pill.status-pending,.pill.status-queued{color:var(--warn);background:var(--warn-soft);border-color:transparent}.pill.status-error{color:var(--error);background:var(--error-soft);border-color:transparent}.detail{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.4rem;margin-bottom:1.5rem;box-shadow:0 1px 2px #2c2a260a,0 8px 24px #2c2a260d}.detail-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem}.detail-head h2{margin:0;font-size:1.25rem}.detail-grid{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1.2rem;font-size:.9rem;margin-bottom:1rem}.detail-grid dt{color:var(--fg-muted);font-weight:500}.detail-grid dd{margin:0;color:var(--fg);word-break:break-word}.detail-prompt{background:var(--bg-soft);border:1px solid var(--border-light);border-radius:8px;padding:.75rem .9rem;font-family:var(--font-mono);font-size:.82rem;white-space:pre-wrap;color:var(--fg);margin:.3rem 0 1rem}.detail-note{font-size:.82rem;color:var(--fg-dim);margin:.5rem 0 0}.detail-close{margin-left:auto;background:#fff;color:var(--fg-muted);border:1px solid var(--border);padding:.3rem .7rem;font-size:.82rem}.detail-close:hover{background:var(--bg-soft);color:var(--fg)}.tag-list{display:flex;flex-wrap:wrap;gap:.35rem}.tag{font-family:var(--font-mono);font-size:.76rem;background:var(--bg-soft);border:1px solid var(--border-light);border-radius:4px;padding:.05rem .35rem;color:var(--fg-muted)}.section-head-actions{display:inline-flex;align-items:center;gap:.9rem}.button-link{display:inline-block;background:var(--accent);color:#fff;border-radius:6px;padding:.4rem .85rem;font-size:.85rem;font-weight:500;transition:background .15s ease}.button-link:hover{background:var(--accent-hover);color:#fff;text-decoration:none}.field{display:block;border:0;margin:0 0 1.25rem;padding:0}.field>label,.field>legend{display:block;font-weight:500;font-size:.9rem;color:var(--fg);margin-bottom:.35rem;padding:0}.field input[type=text],.field select,.field textarea{width:100%;font:inherit;font-size:.9rem;color:var(--fg);background:var(--card-bg);border:1px solid var(--border);border-radius:6px;padding:.5rem .6rem}.field textarea{font-family:var(--font-mono);font-size:.82rem;resize:vertical}.field input[type=text]:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.field-hint{color:var(--fg-dim);font-size:.8rem;margin:.3rem 0 0}.field-error{color:var(--error);font-size:.8rem;margin:.3rem 0 0}.radio-row{display:flex;align-items:flex-start;gap:.6rem;border:1px solid var(--border);border-radius:8px;padding:.65rem .8rem;margin-bottom:.5rem;cursor:pointer;transition:border-color .15s ease,background .15s ease}.radio-row:hover{background:var(--bg-soft)}.radio-row.selected{border-color:var(--accent);background:var(--accent-soft)}.radio-row input[type=radio]{margin-top:.2rem;accent-color:var(--accent)}.radio-body{display:flex;flex-direction:column;gap:.15rem}.radio-label{font-weight:500;font-size:.9rem;color:var(--fg)}.radio-help{font-size:.8rem;color:var(--fg-muted)}.advanced{margin:0 0 1.25rem}.advanced>summary{cursor:pointer;font-size:.88rem;font-weight:500;color:var(--fg-muted);margin-bottom:.75rem}.advanced>summary:hover{color:var(--fg)}.form-actions{display:flex;align-items:center;gap:1rem}.cancel-link{color:var(--fg-muted);font-size:.9rem}.success-banner{background:var(--success-soft);border:1px solid var(--success);color:var(--success);padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.95rem}.snippet-row{display:flex;align-items:stretch;gap:.6rem;margin:.5rem 0}.snippet{flex:1;font-family:var(--font-mono);font-size:.8rem;background:var(--bg-soft);border:1px solid var(--border-light);border-radius:6px;padding:.6rem .75rem;color:var(--fg);white-space:pre-wrap;word-break:break-all}.detail-actions{display:flex;gap:.6rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border-light)}button.button-danger{background:#fff;color:var(--error);border:1px solid var(--error)}button.button-danger:hover{background:var(--error-soft)}button.button-danger:disabled{opacity:.5;cursor:not-allowed}.confirm-box{margin-top:1.25rem;padding:1rem;border:1px solid var(--error);border-radius:8px;background:var(--error-soft)}.confirm-prompt{margin:0 0 .75rem;font-size:.9rem;color:var(--fg)}.confirm-inline{display:inline-flex;align-items:center;gap:.6rem}.inline-form{margin:.75rem 0 1rem}.schedules,.detail-section{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border-light)}.schedules .section-head h3,.detail-section .section-head h3{margin:0;font-size:1.05rem}.schedule-presets{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}.schedule-presets button{font-size:.78rem;padding:.2rem .55rem}.schedule-row-actions{display:inline-flex;align-items:center;gap:.6rem}.schedule-status{font-size:.82rem;color:var(--fg-muted);margin:.5rem 0 0}.chat-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.75rem 1rem;margin-bottom:1rem}.chat-head h1{margin:0}.chat-picker{display:inline-flex;align-items:center;gap:.5rem}.chat-picker-label{font-size:.82rem;color:var(--fg-muted)}.chat-picker select{font:inherit;font-size:.88rem;color:var(--fg);background:var(--card-bg);border:1px solid var(--border);border-radius:6px;padding:.35rem .5rem}.chat-status{font-size:.8rem;color:var(--fg-muted);margin-left:auto}.chat-status.status-live{color:var(--success)}.chat-status.status-err{color:var(--error)}.transcript{display:flex;flex-direction:column;gap:.5rem;height:60vh;min-height:18rem;overflow-y:auto;padding:1rem;background:var(--card-bg);border:1px solid var(--border);border-radius:12px 12px 0 0}.transcript .msg{max-width:78%;padding:.5rem .75rem;border-radius:12px;font-size:.9rem;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.transcript .msg.you{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}.transcript .msg.them{align-self:flex-start;background:var(--bg-soft);color:var(--fg);border:1px solid var(--border);border-bottom-left-radius:4px}.transcript .msg.sys{align-self:center;background:transparent;color:var(--fg-muted);font-size:.8rem;font-style:italic;max-width:90%;text-align:center}.transcript .msg.live{border-style:dashed;animation:chatLivePulse 1.4s ease-in-out infinite}@keyframes chatLivePulse{0%,to{opacity:1}50%{opacity:.6}}.transcript .msg.live.errored{border-color:var(--error);color:var(--error);animation:none}.transcript .live-tools{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.4rem}.transcript .tool-chip{font-family:var(--font-mono);font-size:.72rem;padding:.05rem .45rem;border-radius:10px;background:var(--card-bg);color:var(--fg-muted);border:1px solid var(--border)}.transcript .live-working{margin-top:.4rem;font-size:.75rem;color:var(--fg-muted);font-style:italic}.composer{display:flex;gap:.6rem;padding:.75rem 1rem;background:var(--card-bg);border:1px solid var(--border);border-top:0;border-radius:0 0 12px 12px;margin-bottom:1.5rem}.composer .chat-input{flex:1;font:inherit;font-size:.9rem;color:var(--fg);background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:.55rem .7rem;resize:none;max-height:7.5rem}.composer .chat-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.composer button{flex:0 0 auto;align-self:flex-end}