akm-cli 0.10.261004-beta → 0.10.261006-beta

package/CHANGELOG.md

@@ -6,6 +6,64 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [0.10.261006] - 2026-10-16
+
+### Added
+
+- **`akm ui` serves a local web UI.** It listens on `127.0.0.1` (a random free port unless `--port` is given),
+  prints a URL that carries a per-launch token and opens your browser; `--no-open` only prints it. It reads health and
+  metrics, bundles with git status, the effective config, the proposal queue, recent changes and search through the
+  functions the CLI uses, and browsing writes nothing: no usage events, no index build, no config or database writes.
+  The page has Overview (health, metrics, recent improve runs, 14-day usage), Bundles, Config (with a source badge per
+  key), Proposals (with diffs), Changes and Search with an asset view. It is plain HTML, CSS and JavaScript with no
+  external requests, backed by a JSON API (`docs/reference/ui-api.md`). Experimental.
+- **`akm ui` can accept and reject proposals.** A proposal's page has Accept (after an inline confirmation) and Reject
+  (with a required reason); the pending list has a checkbox per row and an "Accept selected" bar that accepts several
+  proposals in one commit. These are the UI's only writes, through three `POST` routes that call the functions
+  `akm proposal accept` and `reject` call, so a decision is recorded and committed exactly as on the command line.
+  A write needs the token in the `X-Akm-Ui-Token` header (not the URL), a JSON content type and an `Origin` that is the
+  server's own address; a stale target, an already-decided proposal and a held write lease come back as `409`.
+- **`akm ui` shows a proposal's diff side by side.** The proposal page lines the current asset up against the proposed
+  text (current on the left, proposed on the right, line numbers on both, changed words highlighted inside a changed
+  line) and collapses long unchanged runs behind "Show N unchanged lines". A "Side by side | Inline" switch above the
+  diff picks the layout; the choice is remembered in the browser, and a narrow screen starts inline. The unified diff
+  `akm proposal diff` prints pairs lines by position, so one frontmatter field added near the top used to read as a
+  rewrite of the whole file; the page now aligns the two texts itself. `GET /api/proposals/:id` returns `diff.before`
+  and `diff.after` for this (never for env or secret assets); `diff.unified` is unchanged.
+
+### Fixed
+
+- **Reflect's missing-H1 title is now a valid, byte-preserving edit (#1183).** When a reflect patch carried a title
+  and the body had no level-1 heading, reflect inserted `# <title>` but also stripped every leading blank line of the
+  body, so reviewers and gates reading the rules as "frontmatter only" rejected those proposals as body edits.
+  Reflect now inserts only the heading and one blank line, at the body's first non-blank line and in its line ending;
+  the rest of the body is unchanged. The rules doc now says reflect edits frontmatter
+  plus at most a missing H1.
+- **`akm health` no longer prints credentials carried in configured URLs.** The `egress-endpoints` advisory listed
+  every registry, source, LLM and embedding URL verbatim, so a `?token=…` query or a `user:password@` in a git URL
+  appeared in the health output, its JSON and the HTML/markdown reports. Each entry now goes through the shared
+  credential redaction, which keeps the host and path and replaces the secret with `[REDACTED]`.
+
+## [0.10.261005] - 2026-10-14
+
+### Changed
+
+- **A process that accepts several proposals commits once, not once per proposal.** `akm proposal drain`,
+  `akm proposal accept --generator` and the triage drain inside `akm improve` used to make one commit (and, on a git-kind
+  bundle, one push) per accepted proposal. They now commit once when they finish, with a subject such as
+  `akm proposal drain: 37 accepted (consolidate-pair 30, consolidate 7)` and one `<id8> <source> <ref>` body line per
+  proposal. In `akm improve`, triage accepts join the run's end-of-run batch commit. A single `akm proposal accept <id>`
+  is still one commit, and `akm proposal accept <id> <id> ...` now accepts several ids in one process and commits them
+  once; an id that fails is reported in the batch result (exit 1) and the others still land.
+
+### Fixed
+
+- **`akm sync` pushes commits that were made earlier.** With a clean working tree it fetched and merged the upstream
+  but never pushed, so a commit made outside `akm sync` (an `akm proposal accept` on a filesystem bundle, an improve
+  run killed before its end-of-run sync, a manual commit) stayed ahead of the remote and `akm sync` reported
+  `pushed: false`. It now pushes those commits when the bundle is writable, has an upstream and push is allowed, and
+  reports `pushed: true`. `--no-push`, read-only bundles and branches without an upstream are unchanged.
+
 ## [0.10.261004] - 2026-10-13
 
 ### Fixed

package/STABILITY.md

@@ -88,6 +88,7 @@ enumeration of the whole `proposal` noun group.
 | `akm index` | Stable | |
 | `akm health` | Evolving | Exit codes are Evolving; report *content* and rendered `md`/`html` layout are Experimental — do not script against report layout. |
 | `akm metrics` | Experimental | New in 0.9.28. Report content, JSON shape and the `html` dashboard may change. |
+| `akm ui` | Experimental | New in 0.10. The command, its flags, the page and the `/api/` JSON it reads may change in any release. Read-only except that proposals can be accepted (singly or in a batch) and rejected from it. |
 | `akm info` | Stable | |
 | `akm bundle create` | Stable | |
 | `akm bundle add` | Stable | |
@@ -403,6 +404,14 @@ for scripted use.
 - **`akm metrics`** — new in 0.9.28. What it reports, its JSON shape and the
   `--format html` dashboard may change in any release; do not script against
   them.
+- **`akm ui`** — new in 0.10. A local web UI over the same data
+  `akm health`, `akm metrics`, `akm config`, `akm proposal`, `akm search` and
+  `akm show` report. It is read-only except that proposals can be accepted
+  (singly or several at once, one commit) and rejected from it, through the
+  same functions `akm proposal accept` / `reject` call. The command's flags, the page, and the `/api/` JSON the
+  page reads (documented in `docs/reference/ui-api.md`) may change in any
+  release; do not script against the API. The CLI's JSON output remains the
+  scriptable surface.
 - **`lesson` asset type** — schema (`when_to_use`, `description`) is
   stable, but lesson-distillation triggers and ranking are tuning targets.
 - **`--detail agent`** — the agent projection, implemented on `search`, `show`,

package/dist/assets/ui/app.js

@@ -0,0 +1,91 @@
+// akm ui client: hash router and shell. Pages are modules that fetch from the read-only JSON API and return markup
+// built with the escaping `html` tag; this file only mounts it.
+
+import { errorState, getMeta, html, initToken, loadingState, mount } from "./lib.js";
+
+initToken();
+
+const ROUTES = [
+  { name: "overview", label: "Overview", load: () => import("./overview.js"), render: (m, c) => m.render(c) },
+  { name: "bundles", label: "Bundles", load: () => import("./bundles.js"), render: (m, c) => m.render(c) },
+  { name: "config", label: "Config", load: () => import("./config.js"), render: (m, c) => m.render(c) },
+  {
+    name: "proposals",
+    label: "Proposals",
+    load: () => import("./proposals.js"),
+    render: (m, c) => (c.param ? m.renderDetail(c) : m.renderList(c)),
+  },
+  { name: "changes", label: "Changes", load: () => import("./changes.js"), render: (m, c) => m.render(c) },
+  { name: "search", label: "Search", load: () => import("./search.js"), render: (m, c) => m.render(c) },
+  { name: "asset", label: "Asset", nav: "search", load: () => import("./asset.js"), render: (m, c) => m.render(c) },
+];
+
+const main = document.getElementById("app");
+let sequence = 0;
+
+function parseHash() {
+  const raw = location.hash.replace(/^#/, "") || "/overview";
+  const [path, query = ""] = raw.split("?");
+  const [name = "overview", ...rest] = path.split("/").filter(Boolean);
+  let param = rest.join("/");
+  try {
+    param = decodeURIComponent(param);
+  } catch {
+    // Keep the raw segment.
+  }
+  return { name, param, query: new URLSearchParams(query) };
+}
+
+function markNav(active) {
+  for (const link of document.querySelectorAll("nav a[data-route]")) {
+    if (link.dataset.route === active) link.setAttribute("aria-current", "page");
+    else link.removeAttribute("aria-current");
+  }
+}
+
+async function route() {
+  const mine = ++sequence;
+  const { name, param, query } = parseHash();
+  const entry = ROUTES.find((r) => r.name === name);
+  markNav(entry ? (entry.nav ?? entry.name) : "");
+  document.title = `${entry ? entry.label : "Not found"} - akm ui`;
+  main.setAttribute("aria-busy", "true");
+  mount(main, loadingState());
+  const ctx = { query, param, after: [] };
+  try {
+    if (!entry) {
+      mount(
+        main,
+        html`<div class="state state-empty"><p class="state-title">No such page</p><p>Try the <a href="#/overview">overview</a>.</p></div>`,
+      );
+    } else {
+      const page = await entry.load();
+      const markup = await entry.render(page, ctx);
+      if (mine !== sequence) return;
+      mount(main, markup);
+      for (const fn of ctx.after) fn(main);
+      window.scrollTo(0, 0);
+    }
+  } catch (error) {
+    if (mine === sequence) mount(main, errorState(error));
+  } finally {
+    if (mine === sequence) main.removeAttribute("aria-busy");
+  }
+}
+
+async function showMeta() {
+  const target = document.getElementById("nav-meta");
+  try {
+    const meta = await getMeta();
+    mount(
+      target,
+      html`<span class="mono">akm ${meta.version}</span><span class="muted small">${meta.readOnly ? "read-only" : ""} ${meta.runtime}</span>`,
+    );
+  } catch {
+    mount(target, html``);
+  }
+}
+
+window.addEventListener("hashchange", route);
+showMeta();
+route();

package/dist/assets/ui/asset.js

@@ -0,0 +1,67 @@
+// Asset view: metadata, frontmatter table, the body as safe markdown, links and feedback.
+
+import { api, assetHref, badge, definitionList, emptyState, html, pageHeader, tableWrap, when } from "./lib.js";
+import { markdown, splitFrontmatter } from "./markdown.js";
+
+function linksBlock(links) {
+  const groups = Object.entries(links ?? {}).filter(([, kinds]) => kinds && typeof kinds === "object");
+  const rows = [];
+  for (const [direction, kinds] of groups) {
+    for (const [kind, info] of Object.entries(kinds)) {
+      const refs = Array.isArray(info?.refs) ? info.refs : [];
+      rows.push(
+        html`<tr><td>${direction}</td><td>${kind}</td><td>${refs.map((r) => html`<a class="mono wrap" href="${assetHref(r)}">${r}</a> `)}${info?.total > refs.length ? html`<span class="muted">${info.total} total</span>` : ""}</td></tr>`,
+      );
+    }
+  }
+  if (rows.length === 0) return "";
+  return html`<section><h2>Links</h2>${tableWrap(html`<table><thead><tr><th>Direction</th><th>Kind</th><th>Assets</th></tr></thead><tbody>${rows}</tbody></table>`)}</section>`;
+}
+
+function feedbackBlock(feedback) {
+  const counts = feedback?.counts ?? { positive: 0, negative: 0 };
+  const history = feedback?.history ?? [];
+  return html`<section><h2>Feedback</h2>
+    <p><span class="num big text-ok">${counts.positive ?? 0}</span> <span class="muted">positive</span> &nbsp; <span class="num big text-fail">${counts.negative ?? 0}</span> <span class="muted">negative</span></p>
+    ${
+      history.length === 0
+        ? emptyState("No feedback recorded for this asset.")
+        : tableWrap(
+            html`<table><thead><tr><th>When</th><th>Signal</th><th>Source</th><th>Reason</th><th>Tags</th></tr></thead><tbody>${history.map(
+              (e) =>
+                html`<tr><td>${when(e.at)}</td><td>${badge(e.signal, e.signal === "positive" ? "ok" : "fail")}</td><td>${e.source}</td><td class="wrap">${e.reason ?? ""}</td><td class="mono small">${(e.tags ?? []).join(", ")}</td></tr>`,
+            )}</tbody></table>`,
+          )
+    }
+  </section>`;
+}
+
+export async function render(ctx) {
+  const ref = ctx.query.get("ref") ?? "";
+  if (!ref)
+    return html`${pageHeader("Asset")}${emptyState("No asset selected.", html`Pick one from <a href="#/search">search</a>.`)}`;
+  const data = await api("/api/asset", { ref });
+  const back = html`<p class="crumbs"><a href="#/search">Search</a> / asset</p>`;
+  if (data.redacted) {
+    return html`${back}${pageHeader(html`<span class="mono wrap">${data.ref}</span>`)}<div class="badges">${badge(data.type, "info")}${badge("redacted", "warn")}</div>
+      <div class="notice">${data.note}</div>`;
+  }
+  const asset = data.asset;
+  const { fields, body } = splitFrontmatter(asset.content);
+  return html`${back}${pageHeader(html`<span class="mono wrap">${asset.ref}</span>`)}
+    <div class="badges">${badge(asset.type, "info")}${asset.origin ? badge(asset.origin, "neutral") : ""}${asset.editable ? badge("editable", "ok") : badge("read-only", "neutral")}</div>
+    <section>${definitionList([
+      ["Name", html`<span class="mono">${asset.name}</span>`],
+      [
+        "Durable ref",
+        data.durableRef
+          ? html`<span class="mono wrap">${data.durableRef}</span>`
+          : html`<span class="muted">not indexed</span>`,
+      ],
+      ["Path", html`<span class="mono wrap">${asset.path}</span>`],
+    ])}</section>
+    ${fields.length > 0 ? html`<section><h2>Frontmatter</h2>${tableWrap(html`<table class="fm"><tbody>${fields.map(([k, v]) => html`<tr><th scope="row" class="mono">${k}</th><td class="mono wrap pre-wrap">${v}</td></tr>`)}</tbody></table>`)}</section>` : ""}
+    <section><h2>Content</h2>${body.trim() === "" ? emptyState("This asset has no body.") : markdown(body)}</section>
+    ${linksBlock(asset.links)}
+    ${feedbackBlock(data.feedback)}`;
+}

package/dist/assets/ui/bundles.js

@@ -0,0 +1,80 @@
+// Bundles: one card per configured bundle with git status and asset counts, plus the index state.
+
+import { proportionBar } from "./charts.js";
+import { api, badge, definitionList, emptyState, fmtNum, fmtPct, html, pageHeader, when } from "./lib.js";
+
+function gitBlock(git) {
+  if (!git) return html`<p class="muted">Not a git repository.</p>`;
+  const sync =
+    git.upstream === null
+      ? html`<span class="muted">no upstream</span>`
+      : html`<span class="num">${git.ahead} ahead, ${git.behind} behind</span> <span class="muted mono">${git.upstream}</span>`;
+  return definitionList([
+    [
+      "Branch",
+      git.branch ? html`<span class="mono">${git.branch}</span>` : html`<span class="muted">detached HEAD</span>`,
+    ],
+    ["Remote", sync],
+    [
+      "Uncommitted",
+      git.dirtyPaths > 0 ? badge(`${git.dirtyPaths} paths`, "warn") : html`<span class="muted">clean</span>`,
+    ],
+    [
+      "Last commit",
+      git.lastCommit
+        ? html`${when(git.lastCommit.time)} <span class="mono small">${git.lastCommit.sha.slice(0, 8)}</span><div class="small">${git.lastCommit.subject}</div>`
+        : html`<span class="muted">none</span>`,
+    ],
+  ]);
+}
+
+function card(bundle) {
+  return html`<article class="card">
+    <header class="card-head"><h3>${bundle.name}</h3>${badge(bundle.kind, "info")}${bundle.default ? badge("default", "neutral") : ""}${bundle.writable ? badge("writable", "ok") : badge("read-only", "neutral")}${bundle.exists ? "" : badge("missing", "fail")}</header>
+    ${definitionList([
+      ["Path", bundle.path ? html`<span class="mono">${bundle.path}</span>` : html`<span class="muted">none</span>`],
+      [
+        "Source",
+        bundle.source?.locator === bundle.path
+          ? html`<span class="muted">${bundle.source?.kind ?? "unknown"} path</span>`
+          : html`<span class="mono">${bundle.source?.locator ?? ""}</span> <span class="muted">(${bundle.source?.kind ?? "unknown"})</span>`,
+      ],
+      ["Version", bundle.version],
+      ["Assets", html`<span class="num">${fmtNum(bundle.itemCount)}</span>`],
+    ])}
+    ${proportionBar(bundle.byType ?? {})}
+    <h4>Git</h4>${gitBlock(bundle.git)}
+  </article>`;
+}
+
+const plain = (value) => (typeof value === "string" ? value : JSON.stringify(value));
+
+function indexPanel(index) {
+  const semantic = index.semanticSearch;
+  return html`<section><h2>Index</h2><div class="card">
+    ${definitionList([
+      ["Entries", html`<span class="num">${fmtNum(index.entryCount)}</span>`],
+      ["Last built", index.lastBuiltAt ? when(index.lastBuiltAt) : html`<span class="muted">never</span>`],
+      [
+        "Embeddings",
+        index.hasEmbeddings
+          ? html`<span class="num">${fmtNum(index.embeddingCount)}</span> (${fmtPct(index.embeddingCoverage)} coverage)`
+          : html`<span class="muted">none</span>`,
+      ],
+      [
+        "Semantic search",
+        semantic ? html`<span class="mono">${semantic.mode}</span> <span class="muted">${semantic.status}</span>` : "",
+      ],
+      ["Unavailable", index.unavailable ? html`<span class="mono small">${plain(index.unavailable)}</span>` : ""],
+      ["Unreadable", index.unreadable ? html`<span class="mono small">${plain(index.unreadable)}</span>` : ""],
+    ])}
+    ${proportionBar(index.byType ?? {})}
+  </div></section>`;
+}
+
+export async function render() {
+  const data = await api("/api/bundles");
+  return html`${pageHeader("Bundles", data.defaultBundle ? html`Default bundle <span class="mono">${data.defaultBundle}</span>${data.defaultWriteTarget ? html`, writes go to <span class="mono">${data.defaultWriteTarget}</span>` : ""}.` : "")}
+    <section><h2>Configured bundles</h2>${data.bundles.length === 0 ? emptyState("No bundles are configured.", "Run akm init, or add one with akm bundle add.") : html`<div class="cards">${data.bundles.map(card)}</div>`}</section>
+    ${indexPanel(data.index)}`;
+}

package/dist/assets/ui/changes.js

@@ -0,0 +1,32 @@
+// Changes: recent commits of the write-target stash as a timeline grouped by day.
+
+import { api, badge, emptyState, html, pageHeader } from "./lib.js";
+
+const ORIGIN_KIND = { "improve-sync": "info", accept: "ok", remember: "accent", sync: "neutral", other: "warn" };
+
+function commit(c) {
+  const more = c.pathCount > c.paths.length;
+  return html`<li class="commit">
+    <div class="commit-head"><span class="mono small time">${c.time.slice(11, 16)}</span>${badge(c.origin, ORIGIN_KIND[c.origin] ?? "neutral")}<span class="commit-subject">${c.subject}</span></div>
+    <div class="muted small"><span class="mono">${c.shortSha}</span> by ${c.author}</div>
+    ${c.pathCount > 0 ? html`<details><summary>${c.pathCount} changed ${c.pathCount === 1 ? "path" : "paths"}</summary><ul class="plain mono small">${c.paths.map((p) => html`<li class="wrap">${p}</li>`)}${more ? html`<li class="muted">and ${c.pathCount - c.paths.length} more</li>` : ""}</ul></details>` : ""}
+  </li>`;
+}
+
+export async function render() {
+  const data = await api("/api/changes", { limit: 100 });
+  const head = pageHeader(
+    "Changes",
+    html`Recent commits to <span class="mono">${data.bundle ?? "the stash"}</span>${data.path ? html` (<span class="mono wrap">${data.path}</span>)` : ""}.`,
+  );
+  if (!data.git) {
+    return html`${head}${emptyState("This stash is not a git repository.", "Changes are read from its git log, so there is no history to show.")}`;
+  }
+  if (data.commits.length === 0) return html`${head}${emptyState("No commits yet.")}`;
+  const days = new Map();
+  for (const c of data.commits) {
+    const day = c.time.slice(0, 10);
+    days.set(day, [...(days.get(day) ?? []), c]);
+  }
+  return html`${head}<div class="timeline">${[...days].map(([day, items]) => html`<section><h2 class="day">${day} <span class="muted num">${items.length}</span></h2><ol class="commits">${items.map(commit)}</ol></section>`)}</div>`;
+}

package/dist/assets/ui/charts.js

@@ -0,0 +1,93 @@
+// Inline SVG charts. Colours come from CSS classes (see styles.css) so they follow the light/dark theme.
+
+import { html } from "./lib.js";
+
+const round = (n) => Math.round(n * 10) / 10;
+
+/** A "nice" axis top and tick list for counts: steps of 1, 2 or 5 times a power of ten, at most 5 intervals. */
+export function niceScale(max) {
+  if (!(max > 0)) return { top: 1, ticks: [0, 1] };
+  let step = 1;
+  while (max / step > 5) step *= max / step > 25 ? 10 : max / step > 10 ? 5 : 2;
+  const top = Math.ceil(max / step) * step;
+  const ticks = [];
+  for (let v = 0; v <= top; v += step) ticks.push(v);
+  return { top, ticks };
+}
+
+export const USAGE_SERIES = [
+  { key: "search", label: "Search", cls: "s1" },
+  { key: "curate", label: "Curate", cls: "s2" },
+  { key: "show", label: "Show", cls: "s3" },
+  { key: "feedback", label: "Feedback", cls: "s4" },
+];
+
+/** Stacked daily bars on one scale. `days` is `usageByDay` from /api/overview. */
+export function usageChart(days) {
+  const rows = days.map((d) => ({
+    date: d.date,
+    search: d.search ?? 0,
+    curate: d.curate ?? 0,
+    show: d.show ?? 0,
+    feedback: (d.feedbackPositive ?? 0) + (d.feedbackNegative ?? 0),
+  }));
+  const total = (r) => USAGE_SERIES.reduce((sum, s) => sum + r[s.key], 0);
+  const scale = niceScale(Math.max(0, ...rows.map(total)));
+  const W = 640;
+  const H = 260;
+  const left = 44;
+  const right = 8;
+  const top = 18;
+  const bottom = 34;
+  const plotW = W - left - right;
+  const plotH = H - top - bottom;
+  const slot = plotW / rows.length;
+  const barW = slot * 0.62;
+  const y = (v) => round(top + plotH - (v / scale.top) * plotH);
+
+  const grid = scale.ticks.map(
+    (v) =>
+      html`<line class="grid" x1="${left}" x2="${W - right}" y1="${y(v)}" y2="${y(v)}"/><text class="axis" x="${left - 6}" y="${y(v) + 4}" text-anchor="end">${v}</text>`,
+  );
+  const bars = rows.map((r, i) => {
+    const x = round(left + i * slot + (slot - barW) / 2);
+    let acc = 0;
+    const segments = USAGE_SERIES.map((s) => {
+      const v = r[s.key];
+      if (v === 0) return "";
+      const rect = html`<rect class="${s.cls}" x="${x}" y="${y(acc + v)}" width="${round(barW)}" height="${round(y(acc) - y(acc + v))}"/>`;
+      acc += v;
+      return rect;
+    });
+    const sum = total(r);
+    const tip = `${r.date}: ${USAGE_SERIES.map((s) => `${s.label.toLowerCase()} ${r[s.key]}`).join(", ")} (total ${sum})`;
+    return html`<g><title>${tip}</title>${segments}${sum > 0 ? html`<text class="axis total" x="${round(x + barW / 2)}" y="${y(sum) - 4}" text-anchor="middle">${sum}</text>` : ""}<text class="axis" x="${round(x + barW / 2)}" y="${H - bottom + 16}" text-anchor="middle">${r.date.slice(5)}</text></g>`;
+  });
+  const label = `Daily usage events for the last ${rows.length} days, stacked by search, curate, show and feedback`;
+  return html`<div class="chart-scroll"><svg class="chart" viewBox="0 0 ${W} ${H}" role="img" aria-label="${label}">${grid}${bars}<text class="axis" x="${left}" y="10">events per day (UTC)</text></svg></div>
+    <ul class="legend">${USAGE_SERIES.map((s) => html`<li><span class="swatch ${s.cls}"></span>${s.label}</li>`)}</ul>`;
+}
+
+/** A small horizontal bar for a table cell: `value` of `max`, with the `failed` part in the failure colour. */
+export function miniBar(value, max, failed = 0, label = "") {
+  const W = 96;
+  const w = max > 0 ? round((value / max) * W) : 0;
+  const fw = max > 0 ? round((failed / max) * W) : 0;
+  return html`<svg class="minibar" viewBox="0 0 ${W} 10" width="${W}" height="10" role="img" aria-label="${label}"><rect class="track" width="${W}" height="10" rx="2"/><rect class="fill" width="${w}" height="10" rx="2"/>${fw > 0 ? html`<rect class="fail" x="${round(w - fw)}" width="${fw}" height="10" rx="2"/>` : ""}</svg>`;
+}
+
+const PALETTE = ["s1", "s2", "s3", "s4", "s5", "s6"];
+
+/** A stacked proportion bar (HTML, not SVG) with a legend listing each part's count. `counts` is { name: n }. */
+export function proportionBar(counts) {
+  const entries = Object.entries(counts)
+    .filter(([, n]) => n > 0)
+    .sort((a, b) => b[1] - a[1]);
+  const total = entries.reduce((sum, [, n]) => sum + n, 0);
+  if (total === 0) return html`<p class="muted">No assets.</p>`;
+  return html`<div class="propbar" role="img" aria-label="${entries.map(([k, n]) => `${k} ${n}`).join(", ")}">${entries.map(
+    ([k, n], i) =>
+      html`<span class="${PALETTE[i % PALETTE.length]}" style="width:${round((n / total) * 100)}%" title="${k}: ${n}"></span>`,
+  )}</div>
+  <ul class="legend">${entries.map(([k, n], i) => html`<li><span class="swatch ${PALETTE[i % PALETTE.length]}"></span>${k} <span class="num">${n}</span></li>`)}</ul>`;
+}

package/dist/assets/ui/config.js

@@ -0,0 +1,69 @@
+// Config: the effective configuration as a collapsible tree with a source badge per key. Values arrive redacted.
+
+import { api, badge, definitionList, emptyState, html, pageHeader, pretty, tableWrap } from "./lib.js";
+
+function sourceBadge(source) {
+  if (source === "default") return badge("default", "neutral");
+  if (source === "file") return badge("file", "info");
+  if (typeof source === "string" && source.startsWith("extends:")) return badge(source, "accent");
+  return badge("untraced", "warn");
+}
+
+function isObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function leafValue(value) {
+  if (value === "[redacted]") return html`<span class="redacted">[redacted]</span>`;
+  if (value === null) return html`<span class="muted">null</span>`;
+  if (typeof value === "string") return html`<span class="v-str">${value === "" ? '""' : value}</span>`;
+  if (typeof value === "number" || typeof value === "boolean") return html`<span class="v-lit">${String(value)}</span>`;
+  const text = JSON.stringify(value);
+  if (text.length <= 80) return html`<span class="mono">${text}</span>`;
+  const count = Array.isArray(value) ? `${value.length} items` : "object";
+  return html`<details class="inline"><summary>${count}</summary><pre class="code">${pretty(value)}</pre></details>`;
+}
+
+function node(key, value, path, sources, depth) {
+  if (isObject(value)) {
+    const keys = Object.keys(value);
+    return html`<li><details ${depth < 1 ? html`open` : ""}><summary><span class="mono key">${key}</span> <span class="muted small">${keys.length} ${keys.length === 1 ? "key" : "keys"}</span></summary>
+      <ul class="tree">${keys.map((k) => node(k, value[k], path ? `${path}.${k}` : k, sources, depth + 1))}</ul></details></li>`;
+  }
+  const source = sources.has(path) ? sources.get(path) : null;
+  return html`<li class="leaf"><span class="mono key">${key}</span><span class="leaf-value">${leafValue(value)}</span>${sourceBadge(source)}</li>`;
+}
+
+function enginesTable(engines) {
+  if (engines.length === 0) return emptyState("No engines are configured.");
+  const rest = (e) => {
+    const { name, kind, endpoint, model, ...others } = e;
+    return Object.keys(others).length > 0 ? JSON.stringify(others) : "";
+  };
+  return tableWrap(
+    html`<table><thead><tr><th>Name</th><th>Kind</th><th>Endpoint</th><th>Model</th><th>Other</th></tr></thead><tbody>${engines.map(
+      (e) =>
+        html`<tr><td class="mono">${e.name}</td><td>${e.kind}</td><td class="mono wrap">${e.endpoint ?? ""}</td><td class="mono">${e.model ?? ""}</td><td class="mono small wrap">${rest(e)}</td></tr>`,
+    )}</tbody></table>`,
+  );
+}
+
+export async function render() {
+  const data = await api("/api/config");
+  const sources = new Map(data.entries.map((e) => [e.path, e.source]));
+  const keys = Object.keys(data.config ?? {});
+  return html`${pageHeader("Config", "The effective configuration, and where each value comes from. Secret values are redacted by the server.")}
+    <section>${definitionList([
+      ["Config file", html`<span class="mono">${data.path}</span> ${data.exists ? "" : badge("not found", "warn")}`],
+    ])}${data.exists ? "" : html`<p class="muted">There is no config file, so everything below is a default.</p>`}</section>
+    <section><h2>Effective config</h2><p class="legend-line">Source: ${sourceBadge("default")} built-in ${sourceBadge("file")} this install's config.json ${sourceBadge("extends:ref")} a config it extends</p>
+      ${keys.length === 0 ? emptyState("The effective config is empty.") : html`<ul class="tree root">${keys.map((k) => node(k, data.config[k], k, sources, 0))}</ul>`}</section>
+    <section><h2>Engines</h2>${enginesTable(data.engines)}</section>
+    <section><h2>Environment</h2><p class="muted">AKM_* variables set for the server. They override paths and credentials.</p>${
+      data.env.length === 0
+        ? emptyState("No AKM_* environment variables are set.")
+        : tableWrap(
+            html`<table><thead><tr><th>Name</th><th>Value</th></tr></thead><tbody>${data.env.map((e) => html`<tr><td class="mono">${e.name}</td><td class="mono wrap">${e.value === "[redacted]" ? html`<span class="redacted">[redacted]</span>` : e.value}</td></tr>`)}</tbody></table>`,
+          )
+    }</section>`;
+}