@monster-orange/den 0.2.3 → 0.2.5

package/src/ui/server/public/header.js

@@ -15,6 +15,7 @@ import {
   buildWorkspaceMenuModel,
   buildWorkspacePillModel,
 } from "./workspace-picker.js";
+import { changelogView } from "./changelog-view.js";
 
 // 5s between polls — measured from each poll's COMPLETION (schedulePoll
 // re-arms after renderHealthDots resolves), so slow probes can't overlap.
@@ -80,6 +81,8 @@ function _injectNavStyles() {
 const LS_CHANGELOG_SEEN = "__DEN_CLI__-changelog-seen";
 let _changelogEntries = [];
 let _changelogInjected = false;
+/** The pop-up lists every version only after the reader asks. */
+let _clShowAll = false;
 
 function _injectChangelogStyles() {
   if (_changelogInjected) return;
@@ -134,6 +137,7 @@ function _injectChangelogStyles() {
     .cl-entry { margin-bottom: 18px; }
     .cl-ver-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
     .cl-ver {
+      margin: 0;
       font-family: var(--mono, monospace); font-size: 13px; font-weight: 700;
       color: var(--accent, #58a6ff);
     }
@@ -166,6 +170,13 @@ function _injectChangelogStyles() {
       display: inline-flex; align-items: center; justify-content: center;
       transition: color .1s, border-color .1s;
     }
+    .cl-more-btn {
+      margin-right: auto; padding: 4px 12px;
+      font: inherit; font-size: 11px; color: var(--muted, #8b949e);
+      background: none; border: 1px solid var(--border, #30363d); border-radius: 6px;
+      cursor: pointer;
+    }
+    .cl-more-btn:hover { color: var(--accent, #58a6ff); border-color: var(--accent, #58a6ff); }
     .cl-copy-btn:hover { color: var(--accent, #58a6ff); border-color: var(--accent, #58a6ff); }
     .cl-copy-btn.copied { color: #3fb950; border-color: #3fb950; }
     .cl-slack-btn:hover { color: #e01e5a; border-color: #e01e5a; }
@@ -189,12 +200,18 @@ function _injectChangelogStyles() {
   overlay.id = "cl-overlay";
   overlay.className = "cl-overlay";
   overlay.innerHTML =
-    '<div class="cl-box">' +
-    '<div class="cl-hdr"><h3>What\'s new</h3><button class="cl-close" id="cl-close-btn" title="Close">×</button></div>' +
+    '<div class="cl-box" role="dialog" aria-modal="true" aria-labelledby="cl-title">' +
+    '<div class="cl-hdr"><h3 id="cl-title" tabindex="-1">What\'s new</h3><button type="button" class="cl-close" id="cl-close-btn" title="Close" aria-label="Close">×</button></div>' +
     '<div class="cl-body" id="cl-body"></div>' +
-    '<div class="cl-footer"><button class="cl-got-it" id="cl-got-it-btn">Got it</button></div>' +
+    '<div class="cl-footer"><button type="button" class="cl-more-btn" id="cl-more" aria-controls="cl-body" aria-expanded="false" hidden></button><button class="cl-got-it" id="cl-got-it-btn">Got it</button></div>' +
     "</div>";
   document.body.appendChild(overlay);
+  document.getElementById("cl-more")?.addEventListener("click", () => {
+    _clShowAll = !_clShowAll;
+    _renderChangelogBody(_changelogEntries);
+    const body = document.getElementById("cl-body");
+    if (body) body.scrollTop = 0;
+  });
 
   overlay.addEventListener("click", (e) => {
     if (e.target === overlay) window.closeChangelog();
@@ -207,10 +224,44 @@ function _injectChangelogStyles() {
     ?.addEventListener("click", () => window.closeChangelog());
 
   document.addEventListener("keydown", (e) => {
+    if (!_changelogIsOpen()) return;
     if (e.key === "Escape") window.closeChangelog();
+    else if (e.key === "Tab") _trapChangelogTab(e);
   });
 }
 
+function _changelogIsOpen() {
+  return !!document.getElementById("cl-overlay")?.classList.contains("open");
+}
+
+/** The dialog's focusable controls, in order (hidden ones excluded). */
+function _changelogFocusables() {
+  const box = document.querySelector("#cl-overlay .cl-box");
+  if (!box) return [];
+  return [...box.querySelectorAll("button, a[href], [tabindex]")].filter(
+    (el) => !el.hidden && el.getAttribute("tabindex") !== "-1",
+  );
+}
+
+/** Keep Tab inside the open dialog (aria-modal). */
+function _trapChangelogTab(e) {
+  const els = _changelogFocusables();
+  if (!els.length) return;
+  const first = els[0];
+  const last = els[els.length - 1];
+  const inside = els.includes(document.activeElement);
+  if (e.shiftKey && (document.activeElement === first || !inside)) {
+    e.preventDefault();
+    last.focus();
+  } else if (!e.shiftKey && (document.activeElement === last || !inside)) {
+    e.preventDefault();
+    first.focus();
+  }
+}
+
+/** What had focus before the dialog opened; it gets it back on close. */
+let _clReturnFocus = null;
+
 function _renderChangelogBody(entries) {
   const body = document.getElementById("cl-body");
   if (!body) return;
@@ -228,22 +279,25 @@ function _renderChangelogBody(entries) {
     escHtml(s)
       .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
       .replace(/`([^`]+)`/g, "<code>$1</code>");
-  body.innerHTML = entries
+  const view = changelogView(entries, _clShowAll);
+  body.innerHTML = view.shown
     .map(
       (entry, i) =>
         (i > 0 ? '<hr class="cl-divider">' : "") +
         '<div class="cl-entry">' +
         '<div class="cl-ver-row">' +
-        '<span class="cl-ver">v' +
+        '<h4 class="cl-ver">v' +
         escHtml(entry.version) +
-        "</span>" +
+        "</h4>" +
         '<span class="cl-date">' +
         escHtml(entry.date) +
         "</span>" +
         '<div class="cl-copy-group">' +
         '<button class="cl-copy-btn" data-cl-version="' +
         escHtml(entry.version) +
-        '" title="Copy as Markdown">' +
+        '" title="Copy as Markdown" aria-label="Copy v' +
+        escHtml(entry.version) +
+        ' as Markdown">' +
         '<svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
         '<rect x="4" y="0.5" width="8.5" height="8.5" rx="1.5"/>' +
         '<path d="M8.5 9v2.5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2.5"/>' +
@@ -251,7 +305,9 @@ function _renderChangelogBody(entries) {
         "</button>" +
         '<button class="cl-slack-btn" data-cl-version="' +
         escHtml(entry.version) +
-        '" title="Copy for Slack">' +
+        '" title="Copy for Slack" aria-label="Copy v' +
+        escHtml(entry.version) +
+        ' for Slack">' +
         '<svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
         '<path d="M1 2a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H7.5L5 12v-3H2a1 1 0 0 1-1-1V2z"/>' +
         "</svg>" +
@@ -290,6 +346,17 @@ function _renderChangelogBody(entries) {
     )
     .join("");
 
+  // The toggle lives in the footer, so it is in view however long the
+  // newest entry is.
+  const more = document.getElementById("cl-more");
+  if (more) {
+    more.hidden = !view.toggle;
+    if (view.toggle) {
+      more.textContent = view.toggle.label;
+      more.setAttribute("aria-expanded", String(view.toggle.expanded));
+    }
+  }
+
   const _slackIcon =
     '<svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
     '<path d="M1 2a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H7.5L5 12v-3H2a1 1 0 0 1-1-1V2z"/>' +
@@ -455,15 +522,39 @@ function _buildMarkdown(entry) {
 }
 
 window.openChangelog = function () {
+  _clShowAll = false;
   _injectChangelogStyles();
   _renderChangelogBody(_changelogEntries);
   const overlay = document.getElementById("cl-overlay");
-  if (overlay) overlay.classList.add("open");
+  if (!overlay) return;
+  if (!overlay.classList.contains("open")) {
+    // A first-visit auto-open has nothing focused: return to the pill.
+    const active = document.activeElement;
+    _clReturnFocus =
+      active && active !== document.body
+        ? active
+        : document.getElementById("version-pill");
+  }
+  overlay.classList.add("open");
+  // After .open: while the overlay is display:none the body cannot scroll,
+  // and a reset made then does not stick. Always open at the newest release.
+  const body = document.getElementById("cl-body");
+  if (body) body.scrollTop = 0;
+  // The heading first, so a screen reader starts at the latest notes.
+  document.getElementById("cl-title")?.focus();
 };
 
 window.closeChangelog = function () {
   const overlay = document.getElementById("cl-overlay");
+  const wasOpen = !!overlay?.classList.contains("open");
   if (overlay) overlay.classList.remove("open");
+  if (wasOpen) {
+    const back = _clReturnFocus?.isConnected
+      ? _clReturnFocus
+      : document.getElementById("version-pill");
+    _clReturnFocus = null;
+    back?.focus();
+  }
   if (_changelogEntries[0]?.version) {
     try {
       localStorage.setItem(LS_CHANGELOG_SEEN, _changelogEntries[0].version);
@@ -490,6 +581,17 @@ export async function initChangelog() {
   if (pill && latest?.version) {
     pill.querySelector(".v-txt").textContent = "v" + latest.version;
   }
+  // The pill names the running build (0.2.5-dev.2, not the changelog's
+  // newest heading, 0.2.5), so a prerelease under test says what it is.
+  fetch("/api/server-info")
+    .then((r) => r.json())
+    .then((info) => {
+      const txt = pill?.querySelector(".v-txt");
+      if (txt && typeof info?.version === "string" && info.version) {
+        txt.textContent = "v" + info.version;
+      }
+    })
+    .catch(() => {});
 
   let lastSeen = null;
   try {
@@ -1043,7 +1145,9 @@ function _repoHealthItem(repo, items, escAttr) {
     const state = ok === true ? "ok" : ok === false ? "err" : "";
     const tip =
       ok == null
-        ? "no health check"
+        ? error
+          ? `${what} — ${error}`
+          : "no health check"
         : error
           ? `${what} — ${error}`
           : `${what} → ${status}`;
@@ -1063,14 +1167,19 @@ function _repoHealthItem(repo, items, escAttr) {
     overallState = entry.ok === true ? "ok" : entry.ok === false ? "err" : "";
     tip =
       entry.ok == null
-        ? "no health check"
+        ? entry.error
+          ? `${entry.url ?? entry.check} — ${entry.error}`
+          : "no health check"
         : entry.error
           ? `${entry.url ?? entry.check} — ${entry.error}`
           : `${entry.url ?? entry.check} → ${entry.status}`;
   } else {
+    // Only a completed, failed check (ok false) is down; ok null (no check,
+    // or no answer yet) is unknown and never turns the dot red.
     const allOk = items.every((i) => i.ok === true);
     const anyOk = items.some((i) => i.ok === true);
-    overallState = allOk ? "ok" : anyOk ? "running" : "err";
+    const anyDown = items.some((i) => i.ok === false);
+    overallState = allOk ? "ok" : anyOk ? "running" : anyDown ? "err" : "";
     tip = `${items.length} services`;
   }
   return `<div class="health-item" title="${escAttr(tip)}">

package/src/ui/server/services-list.ts

@@ -0,0 +1,210 @@
+/**
+ * The /api/services payload: every service of the legacy-discovered repos and
+ * of the requested (or active) workspace, with commands, branch, deps and
+ * graph rank.
+ *
+ * Built off the request path's critical section: the per-repo branch lookups
+ * (`git rev-parse`, ~40ms each) run as async child processes in parallel
+ * instead of one execSync after another. With ~a dozen repos the sequential
+ * version held the event loop for 0.5-1.5s, so every other request (even
+ * /api/server-info, which answers in ~1ms) waited behind it.
+ */
+import { execFile } from "child_process";
+import * as fs from "fs";
+import type { Environment } from "../../shared/types/index.js";
+import { discoverRepos } from "../../pillars/smoke/discover.js";
+import { readCatalog } from "../../shared/environment-manager/catalog.js";
+import {
+  getActiveWorkspace,
+  listWorkspaceServices,
+  noAutostartRepos,
+  readWorkspacesFile,
+  resolveDepAddress,
+} from "../../shared/environment-manager/workspaces.js";
+import { graphOrder } from "./graph-order.js";
+import { listDaemons } from "../../shared/environment-manager/service-runner.js";
+import { loadManifest } from "../../shared/manifest/read-manifest.js";
+import { servicePlacement } from "../../shared/manifest/placement.js";
+import { depService } from "../../shared/manifest/deps.js";
+import { hasRuntime, repoKind } from "../../shared/repo-kind.js";
+import { readDenConfig } from "../../shared/den-config.js";
+import { GIT_REMOTE_TIMEOUT_MS } from "../../shared/constants.js";
+
+/** `repoPath`'s checked-out branch, or null (not a checkout, git failed). */
+export function currentBranch(repoPath: string): Promise<string | null> {
+  return new Promise((resolve) => {
+    execFile(
+      "git",
+      ["rev-parse", "--abbrev-ref", "HEAD"],
+      { cwd: repoPath, encoding: "utf-8", timeout: GIT_REMOTE_TIMEOUT_MS },
+      (err, stdout) => resolve(err ? null : stdout.trim()),
+    );
+  });
+}
+
+export async function buildServicesList(
+  env: Environment,
+  wsOverride: string | null,
+) {
+  // Conventional lifecycle locally: `down` is opctl-conventional (stops
+  // running containers with no declared command, no-ops gracefully), and
+  // `restart` is orchestrated by the exec runner as down → verify → up — so
+  // every service with an `up` can offer both even when the manifest doesn't
+  // declare them.
+  const withDown = (cmds: string[]): string[] => {
+    if (env !== "local") return cmds;
+    const out = [...cmds];
+    if (!out.includes("down")) out.push("down");
+    if (!out.includes("restart") && out.includes("up")) out.push("restart");
+    return out;
+  };
+
+  // Legacy: discovered repos from .den/ symlinks / registered-repos.json
+  const legacyRepos = discoverRepos();
+  const legacyEntries = legacyRepos.flatMap((repo) => {
+    const manifestLayers = loadManifest(repo.repoPath).layers;
+    return Object.entries(repo.manifest.services ?? {}).map(
+      ([svcName, svc]) => ({
+        repo: repo.repoName,
+        service: svcName,
+        address: `${repo.repoName}/${svcName}`,
+        repoPath: repo.repoPath,
+        commands: withDown(Object.keys(svc.commands?.[env] ?? {})),
+        logs: svc.logs?.[env] ?? null,
+        mode: "dev-managed" as const,
+        branch: null as string | null,
+        fromCatalog: false,
+        isEntrypoint: repo.manifest.entrypoint === svcName,
+        autostart: true, // legacy discovery has no workspace entry to toggle
+        deps: (svc.depends_on ?? []).map(depService),
+        cloned: true, // legacy discovery only ever finds on-disk repos
+        manifestLayers,
+        ...servicePlacement(repo.manifest, svcName, env),
+      }),
+    );
+  });
+
+  // Catalog entries (workspace-aware)
+  const catalog = readCatalog();
+  const wsFile = wsOverride ? readWorkspacesFile() : null;
+  const ws = wsOverride
+    ? wsFile?.workspaces[wsOverride]
+      ? { name: wsOverride, config: wsFile.workspaces[wsOverride] }
+      : null
+    : getActiveWorkspace();
+
+  // One lookup per checkout, all in flight at once; filled in below.
+  const branches = new Map<string, Promise<string | null>>();
+  const branchOf = (repoPath: string): Promise<string | null> => {
+    let p = branches.get(repoPath);
+    if (!p) branches.set(repoPath, (p = currentBranch(repoPath)));
+    return p;
+  };
+
+  const noAutostart = ws
+    ? noAutostartRepos(ws.config, catalog)
+    : new Set<string>();
+  const daemonOwners = new Map(
+    listDaemons().map((d) => [d.address, d.workspaces ?? []] as const),
+  );
+  // Modules and libraries have no runtime: no card, health or commands.
+  // They show as contributors on the Applications tab instead.
+  const pendingBranches: Promise<void>[] = [];
+  const catalogEntries = ws
+    ? listWorkspaceServices(ws.config, catalog, ws.name)
+        .filter((r) => hasRuntime(repoKind(r.repoPath)))
+        .flatMap((resolved) => {
+          // The manifest and the layers it was built from: repo or held,
+          // plus override when manifests/<repo>.override.yml applied.
+          const { manifest, layers: manifestLayers } = loadManifest(
+            resolved.repoPath,
+          );
+          const svc = manifest?.services?.[resolved.subsystem];
+          if (!manifest || !svc) {
+            // Workspace membership is config-driven: a managed entry
+            // whose clone isn't on disk yet (or a checkout without a usable
+            // manifest) must still render everywhere — flagged `cloned:false`
+            // so the UI can offer Sync/clone instead of dropping the system.
+            // `branch` comes from the workspace entry; never probe git on a
+            // path that may not exist.
+            return [
+              {
+                repo: resolved.repoName,
+                service: resolved.subsystem,
+                address: resolved.address,
+                repoPath: resolved.repoPath,
+                commands: [] as string[],
+                logs: null,
+                mode: resolved.mode,
+                branch: resolved.branch as string | null,
+                fromCatalog: true,
+                isEntrypoint: false,
+                autostart: !noAutostart.has(resolved.repoName),
+                owners: daemonOwners.get(resolved.address) ?? [],
+                deps: [] as string[],
+                cloned: fs.existsSync(resolved.repoPath),
+                manifestLayers,
+                ...servicePlacement(null, resolved.subsystem, env),
+              },
+            ];
+          }
+          const entry = {
+            repo: resolved.repoName,
+            service: resolved.subsystem,
+            address: resolved.address,
+            repoPath: resolved.repoPath,
+            commands: withDown(Object.keys(svc.commands?.[env] ?? {})),
+            logs: svc.logs?.[env] ?? null,
+            mode: resolved.mode,
+            branch: resolved.branch as string | null,
+            fromCatalog: true,
+            isEntrypoint: manifest.entrypoint === resolved.subsystem,
+            autostart: !noAutostart.has(resolved.repoName),
+            owners: daemonOwners.get(resolved.address) ?? [],
+            deps: (svc.depends_on ?? []).map((d) =>
+              resolveDepAddress(depService(d), catalog, ws.config, ws.name),
+            ),
+            cloned: true,
+            manifestLayers,
+            ...servicePlacement(manifest, resolved.subsystem, env),
+          };
+          if (entry.branch == null)
+            pendingBranches.push(
+              branchOf(resolved.repoPath).then((b) => {
+                entry.branch = b;
+              }),
+            );
+          return [entry];
+        })
+    : [];
+
+  // Merge: catalog entries take precedence over legacy for same repo.
+  // When a workspace filter is active, also exclude legacy entries not in
+  // the workspace (legacy discovery is not workspace-scoped).
+  const catalogRepos = new Set(Object.keys(catalog));
+  const wsServiceKeys = ws ? new Set(Object.keys(ws.config.services)) : null;
+  const merged = [
+    ...legacyEntries.filter((e) => {
+      if (catalogRepos.has(e.repo)) return false;
+      if (wsServiceKeys && !wsServiceKeys.has(e.repo)) return false;
+      return true;
+    }),
+    ...catalogEntries,
+  ];
+
+  // Attach the dependency-graph position so consumers can present systems
+  // top-down (entry repo first, infra-stack last) — the same order the
+  // health row and `den status` use. Added as a FIELD rather than by
+  // re-sorting the array, because four pages consume this payload and some
+  // rely on the current order.
+  const graphRank = new Map(graphOrder(ws?.name).map((repo, i) => [repo, i]));
+  const infraRepo = readDenConfig()?.graph?.infra?.repo ?? null;
+  await Promise.all(pendingBranches);
+  return merged.map((e) => ({
+    ...e,
+    graphRank: graphRank.get(e.repo) ?? Number.MAX_SAFE_INTEGER,
+    infra: infraRepo !== null && e.repo === infraRepo,
+  }));
+}
+
+export type ServicesList = Awaited<ReturnType<typeof buildServicesList>>;

package/src/ui/server/single-flight.ts

@@ -0,0 +1,53 @@
+/**
+ * A short-lived, keyed cache whose builds are single-flight: callers that ask
+ * for the same key while a build is running share it instead of starting their
+ * own, and a settled result is reused for `ttlMs`. A failed build is never
+ * cached, so the next caller retries.
+ *
+ * For server routes the UI polls from every open tab (/api/services,
+ * /api/health): N tabs cost one build, not N.
+ */
+export interface SingleFlight<T> {
+  /** The cached or in-flight value for `key`; `fresh` forces a new build. */
+  get(key: string, build: () => Promise<T>, fresh?: boolean): Promise<T>;
+  /** Drop every entry (after a change the cached value may not reflect). */
+  clear(): void;
+}
+
+export function singleFlight<T>(
+  ttlMs: number,
+  now: () => number = Date.now,
+): SingleFlight<T> {
+  const entries = new Map<
+    string,
+    { promise: Promise<T>; settledAt: number | null }
+  >();
+  return {
+    get(key, build, fresh = false) {
+      const hit = entries.get(key);
+      if (
+        !fresh &&
+        hit &&
+        (hit.settledAt === null || now() - hit.settledAt < ttlMs)
+      )
+        return hit.promise;
+      const entry: { promise: Promise<T>; settledAt: number | null } = {
+        promise: Promise.resolve().then(build),
+        settledAt: null,
+      };
+      entries.set(key, entry);
+      entry.promise.then(
+        () => {
+          entry.settledAt = now();
+        },
+        () => {
+          if (entries.get(key) === entry) entries.delete(key);
+        },
+      );
+      return entry.promise;
+    },
+    clear() {
+      entries.clear();
+    },
+  };
+}

package/src/ui/server/ui-assets.ts

@@ -19,6 +19,7 @@ export const UI_MODULES: readonly string[] = [
   "/graph-model.js",
   "/panel.js",
   "/graph.css",
+  "/changelog-view.js",
 ];
 
 /** URL path → file inside node_modules. */