@intentius/behold 0.29.16 → 0.29.17

package/web/forge-mark.js

@@ -0,0 +1,235 @@
+// behold#571: the forge's mark on each wave box of the Components view, so the
+// CI projection says which forge runs each wave. One mark is an icon and the
+// forge's name beside it, in the box's title row, linked to the wave's job
+// when behold has that job's URL. app.js draws it; nothing here touches the DOM.
+//
+// Which forge, in this order, from what behold already reads:
+//
+// 1. a forge the pipeline names: terragucci.components.json's
+//    `pipeline.forge`, or the forge chant's own CI projection was generated
+//    for (`/api/ci`'s `forge`);
+// 2. the shape of a run's URLs in the reports (`job_url`, `commit_url`,
+//    `pull_request_url`): a known host, or GitLab's `/-/jobs/`, GitHub's
+//    `/actions/runs/<n>/job/<n>`, Forgejo's `/actions/runs/<n>/jobs/<n>`;
+// 3. the pipeline file's path (`pipeline.path`), or the one workflow
+//    directory the repo has (`.forgejo/workflows`, `.github/workflows`,
+//    `.gitlab-ci.yml`), as the server found it (src/terragucci-components.ts).
+//
+// None of them, or URLs that disagree, is no forge, and no mark is drawn.
+// The link is always a URL a report carried; behold never builds one.
+
+/**
+ * The marks. Each is drawn in a `size` x `size` square from its own viewBox.
+ *
+ * Forgejo: the official logo by Caesar Schinas, CC BY-SA 4.0, from
+ * https://codeberg.org/forgejo/meta/src/branch/readme/branding (logo/forgejo.svg),
+ * its geometry and colours as published.
+ *
+ * GitHub: Octicons `mark-github` (16px), MIT, Copyright (c) GitHub Inc., from
+ * https://github.com/primer/octicons/blob/ea8e6bb79894cc7e85564ee9b53d86b418738d04/icons/mark-github-16.svg,
+ * filled in currentColor so it reads on either theme.
+ *
+ * GitLab: the tanuki behold has drawn since #58, one filled silhouette in GitLab's orange.
+ */
+export const FORGES = {
+  forgejo: {
+    label: "Forgejo",
+    viewBox: "0 0 212 212",
+    transform: "translate(6,6)",
+    shapes: [
+      { tag: "path", d: "M58 168 v-98 a50 50 0 0 1 50-50 h20", fill: "none", stroke: "#ff6600", "stroke-width": 25 },
+      { tag: "path", d: "M58 168 v-30 a50 50 0 0 1 50-50 h20", fill: "none", stroke: "#d40000", "stroke-width": 25 },
+      { tag: "circle", cx: 142, cy: 20, r: 18, fill: "none", stroke: "#ff6600", "stroke-width": 15 },
+      { tag: "circle", cx: 142, cy: 88, r: 18, fill: "none", stroke: "#d40000", "stroke-width": 15 },
+      { tag: "circle", cx: 58, cy: 180, r: 18, fill: "none", stroke: "#d40000", "stroke-width": 15 },
+    ],
+  },
+  github: {
+    label: "GitHub",
+    viewBox: "0 0 16 16",
+    shapes: [
+      {
+        tag: "path",
+        fill: "currentColor",
+        d: "M6.766 11.328c-2.063-.25-3.516-1.734-3.516-3.656 0-.781.281-1.625.75-2.188-.203-.515-.172-1.609.063-2.062.625-.078 1.468.25 1.968.703.594-.187 1.219-.281 1.985-.281.765 0 1.39.094 1.953.265.484-.437 1.344-.765 1.969-.687.218.422.25 1.515.046 2.047.5.593.766 1.39.766 2.203 0 1.922-1.453 3.375-3.547 3.64.531.344.89 1.094.89 1.954v1.625c0 .468.391.734.86.547C13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984 0 3.563 0 0 3.61 0 8.031a7.88 7.88 0 0 0 5.172 7.422c.422.156.828-.125.828-.547v-1.25c-.219.094-.5.156-.75.156-1.031 0-1.64-.562-2.078-1.609-.172-.422-.36-.672-.719-.719-.187-.015-.25-.093-.25-.187 0-.188.313-.328.625-.328.453 0 .844.281 1.25.86.313.452.64.655 1.031.655s.641-.14 1-.5c.266-.265.47-.5.657-.656",
+      },
+    ],
+  },
+  gitlab: {
+    label: "GitLab",
+    viewBox: "0 0 24 24",
+    shapes: [
+      {
+        tag: "path",
+        fill: "#FC6D26",
+        d: "M23.6004 9.5927l-.0337-.0862L20.3.9814a.851.851 0 00-.3362-.405.8748.8748 0 00-.9997.0539.8748.8748 0 00-.29.4399l-2.2055 6.748H7.5375l-2.2055-6.748a.8573.8573 0 00-.29-.4412.8748.8748 0 00-.9997-.0537.8585.8585 0 00-.3362.405L.4332 9.5065l-.0325.0862a6.0657 6.0657 0 002.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 001.2197 0l1.4995-1.1321 2.462-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 002.0094-7.003z",
+      },
+    ],
+  },
+};
+
+/** The icon's size and the label's, in the svg's units: about the tanuki's 17px. */
+export const MARK = { size: 17, font: 11, gap: 4, pad: 12 };
+
+/** A forge named outright ("forgejo", "GitHub Actions", "gitlab-ci"), or null. */
+export function forgeOfName(name) {
+  const s = String(name || "").trim().toLowerCase();
+  if (!s) return null;
+  if (s.startsWith("forgejo") || s === "codeberg") return "forgejo";
+  if (s.startsWith("github")) return "github";
+  if (s.startsWith("gitlab")) return "gitlab";
+  return null;
+}
+
+/** The forge a pipeline file's path belongs to, or null. */
+export function forgeOfPath(path) {
+  const p = String(path || "").replace(/\\/g, "/").replace(/^\.\/+/, "");
+  if (/(^|\/)\.forgejo\/workflows(\/|$)/.test(p)) return "forgejo";
+  if (/(^|\/)\.github\/workflows(\/|$)/.test(p)) return "github";
+  if (/(^|\/)\.gitlab-ci\.ya?ml$/.test(p)) return "gitlab";
+  return null;
+}
+
+/** The forge a run's URL is on, from its host or its path, or null. */
+export function forgeOfUrl(url) {
+  let u;
+  try {
+    u = new URL(String(url || ""));
+  } catch {
+    return null;
+  }
+  if (u.protocol !== "https:" && u.protocol !== "http:") return null;
+  const host = u.hostname.toLowerCase();
+  if (host === "github.com" || host.endsWith(".github.com")) return "github";
+  if (host === "gitlab.com" || host.endsWith(".gitlab.com")) return "gitlab";
+  if (host === "codeberg.org" || host.endsWith(".codeberg.org")) return "forgejo";
+  const p = u.pathname;
+  if (/\/-\/(jobs|pipelines|merge_requests|commit)\//.test(p)) return "gitlab";
+  if (/\/actions\/runs\/\d+\/job\/\d+/.test(p)) return "github";
+  if (/\/actions\/runs\/\d+\/jobs\/\d+/.test(p)) return "forgejo";
+  return null;
+}
+
+/**
+ * The forge that runs the pipeline, or null when none of what behold reads
+ * says. `declared` is a forge the pipeline names, `urls` are run URLs from the
+ * reports, `path` is the pipeline file's path, and `found` a forge the server
+ * found from the repo's one workflow directory.
+ */
+export function detectForge({ declared = null, urls = [], path = null, found = null } = {}) {
+  const named = forgeOfName(declared);
+  if (named) return named;
+  const fromUrls = new Set(urls.map(forgeOfUrl).filter(Boolean));
+  if (fromUrls.size === 1) return [...fromUrls][0];
+  if (fromUrls.size > 1) return null;
+  return forgeOfPath(path) || forgeOfName(found);
+}
+
+/**
+ * The forge of a terragucci repo's components graph: `facets` is its
+ * `meta.terragucciComponents` (`forge` and what said so, `forgeFrom`:
+ * `declared` and `config` name it, `pipeline-path` and `workflow-dir` found it),
+ * `answer` the terragucci read whose run URLs come second.
+ */
+export function componentsForge(facets, answer) {
+  if (!facets) return null;
+  const from = facets.forgeFrom;
+  return detectForge({
+    declared: from === "declared" || from === "config" ? facets.forge : null,
+    urls: answerUrls(answer),
+    path: facets.pipeline || null,
+    found: from === "pipeline-path" || from === "workflow-dir" ? facets.forge : null,
+  });
+}
+
+/** Every run URL a terragucci read carries, for {@link detectForge}. */
+export function answerUrls(answer) {
+  if (!answer || answer.error) return [];
+  const out = [];
+  const add = (r) => {
+    if (!r) return;
+    for (const k of ["job_url", "commit_url", "pull_request_url"]) if (typeof r[k] === "string" && r[k]) out.push(r[k]);
+  };
+  for (const r of Array.isArray(answer.roots) ? answer.roots : []) for (const s of ["plan", "drift", "apply"]) add(r[s]);
+  for (const w of Array.isArray(answer.waiting) ? answer.waiting : []) add(w);
+  if (answer.pull_request) add(answer.pull_request.run);
+  return out;
+}
+
+const sameSha = (a, b) => !!a && !!b && (a.startsWith(b) || b.startsWith(a));
+
+/**
+ * The URL of the job that applied wave `n`, as a report carried it: the
+ * wave's waiting gate, or a root's newest apply in that wave. With a
+ * `commit`, only a run on that commit counts. Null when no report has one.
+ */
+export function waveJobUrl(answer, n, commit = null) {
+  if (!answer || answer.error) return null;
+  const found = [];
+  for (const w of Array.isArray(answer.waiting) ? answer.waiting : []) {
+    if (w.wave === n && w.job_url) found.push({ url: w.job_url, at: w.since || "", commit: w.commit });
+  }
+  for (const r of Array.isArray(answer.roots) ? answer.roots : []) {
+    const a = r && r.apply;
+    if (a && a.wave === n && a.job_url) found.push({ url: a.job_url, at: a.finished || "", commit: a.commit });
+  }
+  const runs = commit ? found.filter((f) => sameSha(f.commit, commit)) : found;
+  runs.sort((a, b) => (a.at < b.at ? 1 : a.at > b.at ? -1 : 0));
+  return runs.length ? runs[0].url : null;
+}
+
+/** The URL the forge's mark links to: a report's job URL, unless its own shape names another forge. */
+export function markLink(url, forge) {
+  if (!url) return null;
+  const on = forgeOfUrl(url);
+  return on && on !== forge ? null : url;
+}
+
+/** The mark's tooltip: "apply-wave-2 on Forgejo". */
+export function markTitle(job, forge) {
+  const f = FORGES[forge];
+  if (!f) return "";
+  return job ? `${job} on ${f.label}` : `Runs on ${f.label}`;
+}
+
+const SVGNS = "http://www.w3.org/2000/svg";
+
+/**
+ * A mark's icon as an `<svg>` element of `size` x `size`, from a spec of
+ * `{ viewBox, transform?, fill?: { dark, light }, attrs?, shapes }` or
+ * `{ image }` (a PNG behold ships), for a dark or a `light` ground. It
+ * nests in the graph's svg and stands alone in HTML alike. `doc` is the
+ * document to make it in.
+ */
+export function iconSvg(doc, spec, size, { x = 0, y = 0, light = false } = {}) {
+  const svg = doc.createElementNS(SVGNS, "svg");
+  const set = (n, k, v) => n.setAttribute(k, String(v));
+  set(svg, "width", size);
+  set(svg, "height", size);
+  set(svg, "x", x);
+  set(svg, "y", y);
+  set(svg, "aria-hidden", "true");
+  set(svg, "focusable", "false");
+  if (spec.image) {
+    set(svg, "viewBox", "0 0 1 1");
+    const img = doc.createElementNS(SVGNS, "image");
+    for (const [k, v] of Object.entries({ href: spec.image, x: 0, y: 0, width: 1, height: 1 })) set(img, k, v);
+    svg.appendChild(img);
+    return svg;
+  }
+  set(svg, "viewBox", spec.viewBox);
+  for (const [k, v] of Object.entries(spec.attrs || {})) set(svg, k, v);
+  // A mark drawn in one colour per theme (`fill: { dark, light }`) takes it on a group.
+  const host = spec.transform || spec.fill ? doc.createElementNS(SVGNS, "g") : svg;
+  if (host !== svg) {
+    if (spec.transform) set(host, "transform", spec.transform);
+    if (spec.fill) set(host, "fill", light ? spec.fill.light : spec.fill.dark);
+    svg.appendChild(host);
+  }
+  for (const { tag, ...attrs } of spec.shapes) {
+    const n = doc.createElementNS(SVGNS, tag);
+    for (const [k, v] of Object.entries(attrs)) set(n, k, v);
+    host.appendChild(n);
+  }
+  return svg;
+}

package/web/forge-mark.test.js

@@ -0,0 +1,112 @@
+import { describe, expect, it } from "vitest";
+import { FORGES, answerUrls, markLink, componentsForge, detectForge, forgeOfName, forgeOfPath, forgeOfUrl, markTitle, waveJobUrl } from "./forge-mark.js";
+
+// behold#571: which forge runs a wave, from what behold already reads.
+describe("forge detection", () => {
+  it("reads a forge named outright", () => {
+    expect(forgeOfName("forgejo")).toBe("forgejo");
+    expect(forgeOfName("GitHub Actions")).toBe("github");
+    expect(forgeOfName("gitlab-ci")).toBe("gitlab");
+    expect(forgeOfName("woodpecker")).toBeNull();
+    expect(forgeOfName(undefined)).toBeNull();
+  });
+
+  it("reads a pipeline file's path", () => {
+    expect(forgeOfPath(".forgejo/workflows/terragucci.yml")).toBe("forgejo");
+    expect(forgeOfPath("./.github/workflows/deploy.yml")).toBe("github");
+    expect(forgeOfPath(".gitlab-ci.yml")).toBe("gitlab");
+    expect(forgeOfPath("ci/pipeline.yml")).toBeNull();
+  });
+
+  it("reads a run URL's host and path shape", () => {
+    expect(forgeOfUrl("https://github.com/acme/shop/actions/runs/9/job/31")).toBe("github");
+    expect(forgeOfUrl("https://gitlab.com/acme/shop/-/jobs/12")).toBe("gitlab");
+    expect(forgeOfUrl("https://git.acme.dev/acme/shop/-/jobs/12")).toBe("gitlab");
+    expect(forgeOfUrl("https://codeberg.org/acme/shop/actions/runs/4/jobs/1")).toBe("forgejo");
+    expect(forgeOfUrl("http://forgejo:3000/admin/demo-terragrunt/actions/runs/448/jobs/3")).toBe("forgejo");
+    expect(forgeOfUrl("https://ghe.acme.dev/acme/shop/actions/runs/9/job/31")).toBe("github");
+    expect(forgeOfUrl("https://ci/9131")).toBeNull();
+    expect(forgeOfUrl("not a url")).toBeNull();
+    expect(forgeOfUrl("javascript:alert(1)")).toBeNull();
+  });
+
+  it("takes a named forge first, then the run URLs, then the path", () => {
+    const gh = ["https://github.com/a/b/actions/runs/1/job/2"];
+    expect(detectForge({ declared: "forgejo", urls: gh })).toBe("forgejo");
+    expect(detectForge({ urls: gh, path: ".forgejo/workflows/x.yml" })).toBe("github");
+    expect(detectForge({ path: ".forgejo/workflows/x.yml" })).toBe("forgejo");
+    expect(detectForge({ found: "gitlab" })).toBe("gitlab");
+  });
+
+  it("says no forge when nothing says, or the run URLs disagree", () => {
+    expect(detectForge({})).toBeNull();
+    expect(detectForge({ urls: ["https://ci/1"], path: "ci.yml" })).toBeNull();
+    expect(detectForge({ urls: ["https://github.com/a/b/actions/runs/1/job/2", "https://gitlab.com/a/b/-/jobs/3"], path: ".forgejo/workflows/x.yml" })).toBeNull();
+  });
+
+  it("reads a components graph's facets and the reports' URLs", () => {
+    const answer = { roots: [{ path: "app", apply: { wave: 2, job_url: "https://codeberg.org/a/b/actions/runs/4/jobs/1" } }], waiting: [] };
+    expect(componentsForge({ forge: "forgejo", forgeFrom: "declared" }, null)).toBe("forgejo");
+    expect(componentsForge({ forge: "github", forgeFrom: "config" }, answer)).toBe("github");
+    // A workflow directory is the weakest word: the reports' URLs outrank it.
+    expect(componentsForge({ forge: "github", forgeFrom: "workflow-dir" }, answer)).toBe("forgejo");
+    expect(componentsForge({ forge: "github", forgeFrom: "workflow-dir" }, null)).toBe("github");
+    expect(componentsForge({ pipeline: ".gitlab-ci.yml" }, null)).toBe("gitlab");
+    expect(componentsForge({ jobs: [] }, null)).toBeNull();
+    expect(componentsForge(null, answer)).toBeNull();
+    expect(answerUrls({ error: "x" })).toEqual([]);
+  });
+});
+
+describe("a wave's job URL", () => {
+  const answer = {
+    roots: [
+      { path: "network", apply: { wave: 1, commit: "aaa111", finished: "2026-10-15T04:10:00Z", job_url: "https://f/r/actions/runs/7/jobs/2" } },
+      { path: "app", apply: { wave: 2, commit: "aaa111", finished: "2026-10-15T04:12:00Z", job_url: "https://f/r/actions/runs/7/jobs/3" } },
+      { path: "ledger", apply: { wave: 2, commit: "bbb222", finished: "2026-10-15T04:20:00Z", job_url: "https://f/r/actions/runs/9/jobs/3" } },
+      { path: "edge", plan: { job_url: "https://f/r/actions/runs/6/jobs/1" } },
+    ],
+    waiting: [{ wave: 3, commit: "bbb222", since: "2026-10-15T04:21:00Z", job_url: "https://f/r/actions/runs/9/jobs/4" }],
+  };
+
+  it("is the URL a report carried for that wave, on the drawn commit", () => {
+    expect(waveJobUrl(answer, 2, "aaa111")).toBe("https://f/r/actions/runs/7/jobs/3");
+    expect(waveJobUrl(answer, 2, "bbb2")).toBe("https://f/r/actions/runs/9/jobs/3");
+    expect(waveJobUrl(answer, 3, "bbb222")).toBe("https://f/r/actions/runs/9/jobs/4");
+  });
+
+  it("is the newest with no commit drawn", () => {
+    expect(waveJobUrl(answer, 2)).toBe("https://f/r/actions/runs/9/jobs/3");
+  });
+
+  it("is null when no report has one", () => {
+    expect(waveJobUrl(answer, 4)).toBeNull();
+    expect(waveJobUrl(answer, 1, "bbb222")).toBeNull();
+    expect(waveJobUrl(null, 1)).toBeNull();
+  });
+});
+
+describe("the mark's link", () => {
+  it("is the report's URL, unless that URL is another forge's", () => {
+    expect(markLink("https://github.com/a/b/actions/runs/9/job/1", "github")).toBe("https://github.com/a/b/actions/runs/9/job/1");
+    expect(markLink("https://ci.acme.dev/jobs/9", "forgejo")).toBe("https://ci.acme.dev/jobs/9");
+    expect(markLink("https://github.com/a/b/actions/runs/9", "forgejo")).toBeNull();
+    expect(markLink(null, "github")).toBeNull();
+  });
+});
+
+describe("the mark", () => {
+  it("says the job and the forge", () => {
+    expect(markTitle("apply-wave-2", "forgejo")).toBe("apply-wave-2 on Forgejo");
+    expect(markTitle(null, "github")).toBe("Runs on GitHub");
+    expect(markTitle("x", "bitbucket")).toBe("");
+  });
+
+  it("has every forge's name and an inline icon, with no external URL", () => {
+    for (const f of Object.values(FORGES)) {
+      expect(f.label).toMatch(/^(Forgejo|GitHub|GitLab)$/);
+      expect(JSON.stringify(f)).not.toMatch(/https?:/);
+    }
+  });
+
+});

package/web/kiosk-runs.js

@@ -12,6 +12,8 @@
 
 import { rootColour, rootPaint, rootSegments, rootText, rootsOfWave, waveOfJob } from "./kiosk-roots.js";
 import { TOUR, chipWords, docsUrl, jobMarks, runFeatures } from "./kiosk-annotations.js";
+import { iconSvg } from "./forge-mark.js";
+import { TOOLS, jobTools } from "./tool-mark.js";
 
 /** The run, job and step statuses, as a viewer reads them. */
 export const STATUS_WORDS = {
@@ -465,7 +467,37 @@ export function renderSidebar(host, index, selectedId, { now = new Date(), scena
  * null for the defaults. Returns what it drew, so the caller can keep a log's
  * scroll.
  */
-export function renderRun(host, answer, ui, { now = new Date(), pickJob = () => {}, toggleStep = () => {}, toggleSetup = () => {}, jump = () => {}, toggleFeats = () => {}, featsOpen = false, note = null, flash = null, entry = null, roots = [], waves = [], light = false, hideLine = null } = {}) {
+/**
+ * behold#571: a job row's tool marks, `<span class="r-job-tools">` of one
+ * `r-tool` per tool (its icon, then its name), or null for none. `carried`
+ * are the tools the roots the job applies carry inside them. A tool a vendor
+ * page may not name (`hideLine`) is left out.
+ */
+export function toolMarks(job, repoTools = [], { light = false, hideLine = null, doc = document, carried = [] } = {}) {
+  const ids = jobTools(job, repoTools, carried).filter((t) => !(hideLine && hideLine(TOOLS[t].name)));
+  if (!ids.length) return null;
+  const box = doc.createElement("span");
+  box.className = "r-job-tools";
+  for (const t of ids) {
+    const tool = TOOLS[t];
+    const m = doc.createElement("span");
+    m.className = `r-tool r-tool-${t}`;
+    m.title = `${job.name} runs ${tool.name}`;
+    if (tool.icon) {
+      const icon = iconSvg(doc, tool.icon, 11, { light });
+      icon.setAttribute("class", "r-tool-icon");
+      m.appendChild(icon);
+    }
+    const name = doc.createElement("span");
+    name.className = "r-tool-name";
+    name.textContent = tool.name;
+    m.appendChild(name);
+    box.appendChild(m);
+  }
+  return box;
+}
+
+export function renderRun(host, answer, ui, { now = new Date(), pickJob = () => {}, toggleStep = () => {}, toggleSetup = () => {}, jump = () => {}, toggleFeats = () => {}, featsOpen = false, note = null, flash = null, entry = null, roots = [], waves = [], tools = [], rootTools = {}, light = false, hideLine = null } = {}) {
   // behold#571: a root's name with its colour's dot, where the line names one.
   const textOf = (cls, text) => {
     if (!roots.length || !rootSegments(text, roots).some((x) => x.root)) return el("span", cls, text);
@@ -506,7 +538,16 @@ export function renderRun(host, answer, ui, { now = new Date(), pickJob = () =>
     const li = el("li", `r-job${job && j.name === job.name ? " r-selected" : ""}`);
     li.style.setProperty("--depth", String(j.depth));
     li.appendChild(statusIcon(j.status));
-    li.appendChild(el("span", "r-job-name", j.name));
+    // behold#571: the tools the job runs, each its logo (where its owner allows) and its name, on a
+    // line of their own under the job's name, so the row's line keeps its width.
+    const jobWave = waveOfJob(j.name, waves);
+    const carried = jobWave !== null ? rootsOfWave(jobWave, waves).flatMap((r) => rootTools[r] || []) : [];
+    const marks = toolMarks(j, tools, { light, hideLine, carried });
+    if (marks) {
+      const head = el("span", "r-job-head");
+      head.append(el("span", "r-job-name", j.name), marks);
+      li.appendChild(head);
+    } else li.appendChild(el("span", "r-job-name", j.name));
     // behold#571: a wave's job row names the roots it applies, each with its dot, and lights its wave box on hover.
     const wave = waveOfJob(j.name, waves);
     const applies = wave !== null ? rootsOfWave(wave, waves).filter((r) => rootColour(r, roots, { light })) : [];
@@ -738,6 +779,8 @@ export function startRuns(
     onLive = () => {},
     roots = () => [],
     waves = () => [],
+    tools = () => [],
+    rootTools = () => ({}),
     light = () => false,
     source = () => null,
     filter = (index) => index,
@@ -798,6 +841,8 @@ export function startRuns(
       entry,
       roots: roots(),
       waves: waves(),
+      tools: tools(),
+      rootTools: rootTools(),
       light: light(),
       hideLine,
       note: s.note,

package/web/kiosk.html

@@ -9,16 +9,16 @@
       href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23a6adc8' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='%23a6adc8'/%3E%3C/svg%3E"
     />
     <style>
-      /* #569 step 2. The pre-paint fallback is index.html's: the default
-         theme's tokens, which initTheme() replaces with the viewer's theme. */
+      /* #569 step 2. The pre-paint fallback: the kiosk's default theme's
+         tokens (KIOSK_THEME in theme.js), which initTheme() replaces with the viewer's theme. */
       :root {
-        --bg: #1e1e2e; --panel: #2e2f40; --line: #3b3c4a; --fg: #cdd6f4; --muted: #777a8c;
-        --edge: #56596d; --managed: #a6e3a1; --foreign: #f9e2af; --pending: #89b4fa;
-        --degraded: #f38ba8; --neutral: #6d7187; --runtime: #94e2d5;
-        --rule: #4e4f64; --focus: #a3b4d0; --active: #3d4660; --well: #11101f; --shadow: #050507;
-        /* behold#571: the kiosk's surfaces and ink (theme.js kioskSurfaces), the default theme's until initTheme() runs. */
-        --surface-box: #252536; --surface-pane-a: #2b2b3c; --surface-pane-b: #313142; --zebra: #cdd6f4; --soft: #cdd6f4; --muted-ink: #808395;
-        --managed-ink: #a6e3a1; --foreign-ink: #f9e2af; --pending-ink: #89b4fa; --degraded-ink: #f38ba8; --runtime-ink: #94e2d5;
+        --bg: #09141b; --panel: #1c2325; --line: #2c2e2d; --fg: #deb88d; --muted: #746a5c;
+        --edge: #4d483f; --managed: #027c9b; --foreign: #fca02f; --pending: #1e4950;
+        --degraded: #d15123; --neutral: #695e4e; --runtime: #50a3b5;
+        --rule: #3d4142; --focus: #364548; --active: #243235; --well: #01070d; --shadow: #010304;
+        /* behold#571: the kiosk's surfaces and ink (theme.js kioskSurfaces), the kiosk's default theme's (KIOSK_THEME, Sea Shells) until initTheme() runs. */
+        --surface-box: #101b22; --surface-pane-a: #152128; --surface-pane-b: #1b272e; --zebra: #deb88d; --soft: #deb88d; --muted-ink: #7c7365;
+        --managed-ink: #0e7f9e; --foreign-ink: #fca02f; --pending-ink: #567b82; --degraded-ink: #d15123; --runtime-ink: #50a3b5;
         --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
         --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       }
@@ -67,6 +67,12 @@
       .r-job.r-selected { background: var(--active); }
       .r-job-name { font: 600 0.92em var(--font-mono); }
       .r-job-needs { color: var(--muted); font-size: 0.78em; }
+      /* behold#571: the tools a job runs, each its logo and its name. Short of room, the names stay and the logos go. */
+      .r-job-head { display: inline-flex; flex-direction: column; flex: none; line-height: 1.15; }
+      .r-job-name { white-space: nowrap; flex: none; }
+      .r-job-tools { display: inline-flex; gap: 0.6em; font-size: 0.7em; color: var(--muted); white-space: nowrap; }
+      .r-tool { display: inline-flex; align-items: center; gap: 0.25em; }
+      .r-tool-icon { flex: none; }
       /* behold#571: each root's colour, as a dot by its name; never a text or fill colour, which mean a state. */
       .k-root::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--k-root); margin: 0 0.28em 0.1em 0.05em; vertical-align: middle; }
       .r-job-roots { display: inline-flex; gap: 0.75em; font-size: 0.82em; color: var(--fg); }
@@ -292,10 +298,10 @@
     </div>
     <footer id="foot"></footer>
     <script type="module">
-      import { initTheme } from "/theme.js";
+      import { initTheme, KIOSK_THEME } from "/theme.js";
       import { startKiosk } from "/kiosk.js";
       import { pageTool } from "/kiosk-vendor.js";
-      initTheme();
+      initTheme(KIOSK_THEME);
       // behold#571: /<tool> serves this page with its tool in a meta tag; /kiosk has none.
       startKiosk(
         {

package/web/kiosk.js

@@ -1047,6 +1047,8 @@ export function startKiosk({ bar, frame, foot, side, main, views, tools = null }
         names: () => names,
         roots: rootList,
         waves: () => s.waves,
+        tools: () => s.tools || [],
+        rootTools: () => s.rootTools || {},
         light: () => s.light,
         source: runsSource,
         filter: vendor ? (index) => filterIndex(index, { tool, repo: s.repo }) : (index) => index,
@@ -1091,9 +1093,14 @@ export function startKiosk({ bar, frame, foot, side, main, views, tools = null }
     if (p && p.terragucciRoots) {
       s.roots = Array.isArray(p.terragucciRoots.roots) ? p.terragucciRoots.roots : [];
       s.waves = Array.isArray(p.terragucciRoots.waves) ? p.terragucciRoots.waves : [];
+      // behold#571: the tools the repo's jobs run, for a job row whose log isn't read yet.
+      s.tools = Array.isArray(p.terragucciRoots.tools) ? p.terragucciRoots.tools : [];
+      s.rootTools = p.terragucciRoots.rootTools && typeof p.terragucciRoots.rootTools === "object" ? p.terragucciRoots.rootTools : {};
     } else if (s.aimed) {
       s.roots = [];
       s.waves = [];
+      s.tools = [];
+      s.rootTools = {};
     }
     openFrame();
     draw();

package/web/theme.js

@@ -375,11 +375,15 @@ export function setTheme(nameOrObj, { persist = true } = {}) {
   return true;
 }
 
-// Restore the persisted theme (or default) and apply. Call once on boot.
-export function initTheme() {
+/** behold#571: the kiosk's theme for a viewer who hasn't picked one; the app keeps DEFAULT_THEME. */
+export const KIOSK_THEME = "Sea Shells";
+
+// Restore the persisted theme (or `fallback`, else the default) and apply. Call once on boot.
+export function initTheme(fallback = null) {
   let saved = null;
   try { saved = localStorage.getItem(STORE_KEY); } catch { /* private mode */ }
-  setTheme(saved && THEMES[saved] ? saved : (_active ? _active.name : DEFAULT_THEME), { persist: false });
+  const first = fallback && THEMES[fallback] ? fallback : (_active ? _active.name : DEFAULT_THEME);
+  setTheme(saved && THEMES[saved] ? saved : first, { persist: false });
   return getThemeName();
 }