@openparachute/agent 0.2.2 → 0.2.3-rc.11

package/src/ui-kit.test.ts

@@ -1,178 +0,0 @@
-/**
- * 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/web/ui/dist/assets/index-C-iWdFFV.css

@@ -1 +0,0 @@
-: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}