@app-vitals/agent-lib 0.0.1 → 0.1.0

package/task-store-types.unit.test.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from "bun:test";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+describe("task-store-types", () => {
+	it("should have generated the task-store-types.ts file", () => {
+		const filePath = resolve(__dirname, "./task-store-types.ts");
+		const content = readFileSync(filePath, "utf-8");
+		expect(content).toBeDefined();
+		expect(content.length).toBeGreaterThan(0);
+	});
+
+	it("should export the paths interface", () => {
+		const filePath = resolve(__dirname, "./task-store-types.ts");
+		const content = readFileSync(filePath, "utf-8");
+		expect(content).toContain("export interface paths");
+	});
+
+	it("should include task endpoints from the OpenAPI spec", () => {
+		const filePath = resolve(__dirname, "./task-store-types.ts");
+		const content = readFileSync(filePath, "utf-8");
+		expect(content).toContain('"/tasks"');
+	});
+});

package/web/toolbar.ts

@@ -0,0 +1,244 @@
+/**
+ * lib/web/toolbar.ts
+ * Shared Shipwright toolbar — used by both the metrics dashboard and the admin UI.
+ */
+
+export interface ShipwrightToolbarOptions {
+  userName: string;
+  /** Current request path, used to highlight the active nav link. */
+  activePath: string;
+  /** Form action for the sign-out button (differs per service). */
+  logoutAction: string;
+  /** Full URL of the metrics dashboard. Defaults to "/dashboard". */
+  metricsUrl?: string;
+  /** Base URL of the admin service. Defaults to empty string (same origin). */
+  adminBaseUrl?: string;
+  /**
+   * Public, unauthenticated variant. When true, render only the read-only
+   * surfaces (Metrics dashboard + public task board) and no sign-out — the
+   * authenticated /admin/* links and logout are omitted, since they 404 (and
+   * aren't reachable) on the public proof host.
+   */
+  readOnly?: boolean;
+  /** Public task board URL, used only in readOnly mode. Defaults to "/public/tasks". */
+  tasksUrl?: string;
+  /**
+   * Render the "Account" nav entry (self-serve accounts, admin service only).
+   * Defaults to false so other services sharing this toolbar never show it.
+   */
+  showAccount?: boolean;
+}
+
+export function baseStyles(): string {
+  return `
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html { font-size: 16px; -webkit-font-smoothing: antialiased; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      background: #f7f7fb;
+      color: #1a1a2e;
+      min-height: 100vh;
+    }
+
+    /* ─── Toolbar ───────────────────────────────────────── */
+    .vos-toolbar {
+      background: #fff;
+      border-bottom: 1px solid #e8e8ee;
+      height: 52px;
+      display: flex;
+      align-items: center;
+      padding: 0 24px;
+      gap: 24px;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+    .vos-wordmark {
+      font-size: 15px;
+      font-weight: 700;
+      color: #1a1a2e;
+      text-decoration: none;
+      letter-spacing: -0.3px;
+      flex-shrink: 0;
+    }
+    .vos-wordmark:hover { color: #4f46e5; }
+    .vos-nav {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex: 1;
+    }
+    .vos-nav-link {
+      padding: 5px 12px;
+      border-radius: 6px;
+      font-size: 13px;
+      font-weight: 500;
+      color: #6b7280;
+      text-decoration: none;
+      transition: background 0.1s, color 0.1s;
+      white-space: nowrap;
+    }
+    .vos-nav-link:hover { background: #f3f4f6; color: #1a1a2e; }
+    .vos-nav-link.active {
+      background: #eef2ff;
+      color: #4f46e5;
+      font-weight: 600;
+    }
+    .vos-user {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-shrink: 0;
+      margin-left: auto;
+    }
+    .vos-username {
+      font-size: 13px;
+      color: #6b7280;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 160px;
+    }
+    .vos-signout-btn {
+      font-size: 13px;
+      font-weight: 500;
+      color: #6b7280;
+      background: none;
+      border: 1px solid #e8e8ee;
+      border-radius: 6px;
+      padding: 5px 12px;
+      cursor: pointer;
+      font-family: inherit;
+      transition: background 0.1s, color 0.1s, border-color 0.1s;
+      white-space: nowrap;
+    }
+    .vos-signout-btn:hover { background: #f7f7fb; color: #1a1a2e; border-color: #d1d5db; }
+
+    /* ─── Page body ─────────────────────────────────────── */
+    .vos-page {
+      max-width: 960px;
+      margin: 0 auto;
+      padding: 32px 24px 64px;
+    }
+
+    /* ─── Hamburger toggle (CSS-only, no JS) ───────────── */
+    .vos-nav-toggle { display: none; }
+    .vos-hamburger {
+      display: none;
+      background: none;
+      border: none;
+      font-size: 20px;
+      cursor: pointer;
+      color: #1a1a2e;
+      padding: 4px 8px;
+      line-height: 1;
+      font-family: inherit;
+    }
+    .vos-hamburger:hover { color: #4f46e5; }
+
+    @media (max-width: 640px) {
+      .vos-toolbar { padding: 0 16px; gap: 12px; flex-wrap: wrap; height: auto; min-height: 52px; align-items: center; }
+      .vos-username { display: none; }
+      .vos-nav-link { padding: 5px 8px; }
+      .vos-page { padding: 20px 16px 48px; }
+
+      /* Hide nav links by default on mobile */
+      .vos-nav {
+        display: none;
+        flex-direction: column;
+        width: 100%;
+        gap: 2px;
+        padding: 8px 0;
+        order: 3;
+      }
+      /* Show nav links when hamburger checkbox is checked */
+      .vos-nav-toggle:checked + nav .vos-nav {
+        display: flex;
+      }
+      .vos-nav-link {
+        display: block;
+        padding: 10px 12px;
+        border-radius: 6px;
+        font-size: 14px;
+      }
+      .vos-nav-link.active {
+        background: #eef2ff;
+        color: #4f46e5;
+        font-weight: 600;
+      }
+      /* Show hamburger on mobile */
+      .vos-hamburger {
+        display: block;
+      }
+      /* Hide user section sign-out on mobile when nav is closed */
+      .vos-user {
+        order: 2;
+        margin-left: 0;
+      }
+    }
+
+  `;
+}
+
+export function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export function renderShipwrightToolbar(
+  opts: ShipwrightToolbarOptions,
+): string {
+  const { userName, activePath, logoutAction } = opts;
+  const metricsUrl = opts.metricsUrl ?? "/dashboard";
+  const adminBase = opts.adminBaseUrl ?? "";
+  const active = (prefix: string) =>
+    activePath.startsWith(prefix) ? " active" : "";
+  // /admin/agents/:id/queue-activity starts with /admin/agents, so without
+  // this special case both "Agents" and "Queue & Activity" would highlight
+  // simultaneously on that page. Any path containing "/queue-activity"
+  // belongs to the new tab instead.
+  const isQueueActivity = activePath.includes("/queue-activity");
+
+  // Public proof surface: only the read-only Metrics + Tasks views are routed and
+  // reachable, so omit every /admin/* link and the sign-out form (they 404 on the
+  // public host). The wordmark points at the dashboard instead of /admin/agents.
+  if (opts.readOnly) {
+    const tasksUrl = opts.tasksUrl ?? "/public/tasks";
+    return `<input type="checkbox" id="vos-nav-toggle" class="vos-nav-toggle" aria-hidden="true">
+  <nav class="vos-toolbar" aria-label="Site navigation">
+    <a href="${metricsUrl}" class="vos-wordmark">Shipwright</a>
+    <div id="vos-nav-content" class="vos-nav">
+      <a href="${metricsUrl}" class="vos-nav-link${active(metricsUrl)}">Metrics</a>
+      <a href="${tasksUrl}" class="vos-nav-link${active(tasksUrl)}">Tasks</a>
+    </div>
+    <label for="vos-nav-toggle" class="vos-hamburger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="vos-nav-content">☰</label>
+  </nav>
+  <script>(function(){var t=document.getElementById('vos-nav-toggle');if(t)t.addEventListener('change',function(){var l=document.querySelector('label[for="vos-nav-toggle"]');if(l)l.setAttribute('aria-expanded',t.checked?'true':'false');});})();</script>`;
+  }
+
+  return `<input type="checkbox" id="vos-nav-toggle" class="vos-nav-toggle" aria-hidden="true">
+  <nav class="vos-toolbar" aria-label="Site navigation">
+    <a href="${adminBase}/admin/agents" class="vos-wordmark">Shipwright</a>
+    <div id="vos-nav-content" class="vos-nav">
+      <a href="${adminBase}/admin/agents" class="vos-nav-link${isQueueActivity ? "" : active("/admin/agents")}">Agents</a>
+      <a href="${adminBase}/admin/tasks" class="vos-nav-link${active("/admin/tasks")}">Tasks</a>
+      <a href="${adminBase}/admin/sessions" class="vos-nav-link${active("/admin/sessions")}">Sessions</a>
+      <a href="${adminBase}/admin/prs" class="vos-nav-link${active("/admin/prs")}">PRs</a>
+      <a href="${adminBase}/admin/chat" class="vos-nav-link${active("/admin/chat")}">Chat</a>
+      <a href="${adminBase}/admin/queue-activity" class="vos-nav-link${isQueueActivity ? " active" : ""}">Queue &amp; Activity</a>
+      ${opts.showAccount ? `<a href="${adminBase}/admin/account" class="vos-nav-link${active("/admin/account")}">Account</a>\n      ` : ""}<a href="${metricsUrl}" class="vos-nav-link${active(metricsUrl)}">Metrics</a>
+    </div>
+    <div class="vos-user">
+      <span class="vos-username">${escapeHtml(userName)}</span>
+      <form method="POST" action="${logoutAction}" style="margin:0">
+        <button type="submit" class="vos-signout-btn">Sign out</button>
+      </form>
+    </div>
+    <label for="vos-nav-toggle" class="vos-hamburger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="vos-nav-content">☰</label>
+  </nav>
+  <script>(function(){var t=document.getElementById('vos-nav-toggle');if(t)t.addEventListener('change',function(){var l=document.querySelector('label[for="vos-nav-toggle"]');if(l)l.setAttribute('aria-expanded',t.checked?'true':'false');});})();</script>`;
+}

package/web/toolbar.unit.test.ts

@@ -0,0 +1,243 @@
+/**
+ * lib/web/toolbar.unit.test.ts
+ * Pure unit tests for renderShipwrightToolbar().
+ *
+ * Strategy: call the render function directly, assert on returned HTML strings.
+ * No I/O, no Hono, no HTTP — pure string → string.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { renderShipwrightToolbar } from "./toolbar.ts";
+
+describe("renderShipwrightToolbar", () => {
+  describe("authenticated mode (readOnly=false)", () => {
+    const html = renderShipwrightToolbar({
+      userName: "Alice",
+      activePath: "/admin/agents",
+      logoutAction: "/auth/logout",
+    });
+
+    test("contains hamburger button with class vos-hamburger", () => {
+      expect(html).toContain("vos-hamburger");
+    });
+
+    test("hamburger button shows ☰ icon", () => {
+      expect(html).toContain("☰");
+    });
+
+    test("contains nav links for authenticated mode", () => {
+      expect(html).toContain("Agents");
+      expect(html).toContain("Metrics");
+    });
+
+    // TBF-1.1: the navbar Tasks link must not hardcode a state filter — doing
+    // so silently pre-filtered every navbar-driven visit to ready-only tasks
+    // and (post-AXR-1.3) bounced the user off the default board view. The
+    // link must land on bare /admin/tasks.
+    test("Tasks link has no hardcoded ?state=ready filter", () => {
+      expect(html).not.toContain("/admin/tasks?state=ready");
+      expect(html).toContain('href="/admin/tasks" class="vos-nav-link');
+    });
+
+    test("does not render an /admin/provision link (removed dead nav shortcut)", () => {
+      expect(html).not.toContain('href="/admin/provision"');
+    });
+
+    test("active link has active class", () => {
+      expect(html).toContain('class="vos-nav-link active"');
+    });
+
+    test("checkbox input appears before nav element in DOM", () => {
+      expect(html.indexOf("<input")).toBeLessThan(html.indexOf("<nav"));
+    });
+
+    test("hamburger label has aria-expanded attribute for screen reader feedback", () => {
+      expect(html).toContain('aria-expanded="false"');
+    });
+
+    test("hamburger label has aria-controls pointing to nav content", () => {
+      expect(html).toContain('aria-controls="vos-nav-content"');
+    });
+
+    test("nav content div has id for aria-controls target", () => {
+      expect(html).toContain('id="vos-nav-content"');
+    });
+
+    test("includes JS shim to toggle aria-expanded on checkbox change", () => {
+      expect(html).toContain("aria-expanded");
+      expect(html).toContain("<script>");
+      expect(html).toContain("change");
+    });
+
+    test("contains a Queue & Activity link pointing at /admin/queue-activity", () => {
+      expect(html).toContain('href="/admin/queue-activity"');
+      expect(html).toContain("Queue &amp; Activity");
+    });
+
+    // SESH-4.2: the Sessions link lives between Tasks and PRs.
+    test("contains a Sessions link pointing at /admin/sessions, between Tasks and PRs", () => {
+      expect(html).toContain('href="/admin/sessions"');
+      expect(html).toContain(">Sessions<");
+      const tasksIdx = html.indexOf('href="/admin/tasks"');
+      const sessionsIdx = html.indexOf('href="/admin/sessions"');
+      const prsIdx = html.indexOf('href="/admin/prs"');
+      expect(tasksIdx).toBeGreaterThan(-1);
+      expect(sessionsIdx).toBeGreaterThan(tasksIdx);
+      expect(prsIdx).toBeGreaterThan(sessionsIdx);
+    });
+  });
+
+  describe("active-tab highlighting: Agents vs Queue & Activity (AXR-3.3)", () => {
+    function activeHref(html: string): string | undefined {
+      const match = html.match(
+        /<a href="([^"]+)" class="vos-nav-link active">/,
+      );
+      return match?.[1];
+    }
+
+    test("/admin/agents highlights the Agents tab, not Queue & Activity", () => {
+      const html = renderShipwrightToolbar({
+        userName: "Alice",
+        activePath: "/admin/agents",
+        logoutAction: "/auth/logout",
+      });
+      expect(activeHref(html)).toBe("/admin/agents");
+      expect(html).toContain(
+        '<a href="/admin/queue-activity" class="vos-nav-link">',
+      );
+    });
+
+    test("/admin/agents/:id highlights the Agents tab, not Queue & Activity", () => {
+      const html = renderShipwrightToolbar({
+        userName: "Alice",
+        activePath: "/admin/agents/agent-123",
+        logoutAction: "/auth/logout",
+      });
+      expect(activeHref(html)).toBe("/admin/agents");
+      expect(html).toContain(
+        '<a href="/admin/queue-activity" class="vos-nav-link">',
+      );
+    });
+
+    test("/admin/agents/:id/queue-activity highlights Queue & Activity, not Agents", () => {
+      const html = renderShipwrightToolbar({
+        userName: "Alice",
+        activePath: "/admin/agents/agent-123/queue-activity",
+        logoutAction: "/auth/logout",
+      });
+      expect(activeHref(html)).toBe("/admin/queue-activity");
+      expect(html).toContain('<a href="/admin/agents" class="vos-nav-link">');
+    });
+  });
+
+  describe("active-tab highlighting: Sessions (SESH-4.2)", () => {
+    function activeHref(html: string): string | undefined {
+      const match = html.match(
+        /<a href="([^"]+)" class="vos-nav-link active">/,
+      );
+      return match?.[1];
+    }
+
+    test("/admin/sessions highlights the Sessions tab", () => {
+      const html = renderShipwrightToolbar({
+        userName: "Alice",
+        activePath: "/admin/sessions",
+        logoutAction: "/auth/logout",
+      });
+      expect(activeHref(html)).toBe("/admin/sessions");
+    });
+
+    test("/admin/sessions/some-slug (session detail) also highlights the Sessions tab", () => {
+      const html = renderShipwrightToolbar({
+        userName: "Alice",
+        activePath: "/admin/sessions/some-slug",
+        logoutAction: "/auth/logout",
+      });
+      expect(activeHref(html)).toBe("/admin/sessions");
+    });
+  });
+
+  describe("read-only mode (readOnly=true)", () => {
+    const html = renderShipwrightToolbar({
+      userName: "",
+      activePath: "/dashboard",
+      logoutAction: "",
+      readOnly: true,
+    });
+
+    test("contains hamburger button with class vos-hamburger", () => {
+      expect(html).toContain("vos-hamburger");
+    });
+
+    test("hamburger button shows ☰ icon", () => {
+      expect(html).toContain("☰");
+    });
+
+    test("contains only read-only nav links", () => {
+      expect(html).toContain("Metrics");
+      expect(html).toContain("Tasks");
+    });
+
+    test("does not contain authenticated-only links", () => {
+      expect(html).not.toContain("Agents");
+      expect(html).not.toContain("Sign out");
+    });
+
+    test("checkbox input appears before nav element in DOM", () => {
+      expect(html.indexOf("<input")).toBeLessThan(html.indexOf("<nav"));
+    });
+
+    test("hamburger label has aria-expanded attribute for screen reader feedback", () => {
+      expect(html).toContain('aria-expanded="false"');
+    });
+
+    test("hamburger label has aria-controls pointing to nav content", () => {
+      expect(html).toContain('aria-controls="vos-nav-content"');
+    });
+
+    test("nav content div has id for aria-controls target", () => {
+      expect(html).toContain('id="vos-nav-content"');
+    });
+
+    test("includes JS shim to toggle aria-expanded on checkbox change", () => {
+      expect(html).toContain("aria-expanded");
+      expect(html).toContain("<script>");
+      expect(html).toContain("change");
+    });
+  });
+});
+
+describe("renderShipwrightToolbar Account entry (SSP-3.2)", () => {
+  const base = {
+    userName: "Alice",
+    activePath: "/admin/agents",
+    logoutAction: "/auth/logout",
+  };
+
+  test("omits the Account link by default so other services never render it", () => {
+    expect(renderShipwrightToolbar(base)).not.toContain("/admin/account");
+  });
+
+  test("renders the Account link when showAccount is true", () => {
+    const html = renderShipwrightToolbar({ ...base, showAccount: true });
+    expect(html).toContain('href="/admin/account" class="vos-nav-link');
+  });
+
+  test("highlights Account when it is the active path", () => {
+    const html = renderShipwrightToolbar({
+      ...base,
+      activePath: "/admin/account",
+      showAccount: true,
+    });
+    expect(html).toContain('href="/admin/account" class="vos-nav-link active"');
+  });
+
+  test("readOnly mode never renders Account even when showAccount is true", () => {
+    const html = renderShipwrightToolbar({
+      ...base,
+      readOnly: true,
+      showAccount: true,
+    });
+    expect(html).not.toContain("/admin/account");
+  });
+});

package/README.md

@@ -1,3 +0,0 @@
-# @app-vitals/agent-lib
-
-Placeholder reserving this name. Real releases are published from https://github.com/app-vitals/agent.