@lchase/kiln 0.15.0 → 0.17.0

package/dist/config.js

@@ -3,6 +3,7 @@ import { homedir } from "node:os";
 import { dirname, isAbsolute, join, resolve } from "node:path";
 import { KilnConfigError } from "./errors.js";
 import { DEFAULT_MAX_ATTEMPTS, DEFAULT_MAX_FIX_ROUNDS, DEFAULT_MAX_SAME_FINGERPRINT, DEFAULT_STALL_TIMEOUT_MS, KilnConfigFileSchema, REPO_NAME, } from "./schemas.js";
+import { resolveBoardTheme } from "./theme.js";
 const CONFIG_NAME = "kiln.config.json";
 export function loadKilnConfig(configPath, options = {}) {
     const home = options.home ?? homedir();
@@ -60,6 +61,7 @@ export function loadKilnConfig(configPath, options = {}) {
         ...(parsed.data.reviewPrompt
             ? { reviewPrompt: resolveConfiguredPath(configDir, parsed.data.reviewPrompt, home) }
             : {}),
+        boardTheme: resolveBoardTheme(parsed.data.board?.theme),
     };
 }
 /**
@@ -230,7 +232,7 @@ function assertNoStaleCwdConfig(cwd, homeConfig) {
 }
 function readConfigObject(configPath) {
     if (!existsSync(configPath))
-        return { repos: {} };
+        return { repos: {}, board: { theme: "kiln" } };
     let raw;
     try {
         raw = JSON.parse(readFileSync(configPath, "utf8"));

package/dist/icons.js

@@ -0,0 +1,41 @@
+/**
+ * Board icons from Lucide 1.70.0 (ISC, copyright Lucide Icons and Contributors).
+ * https://lucide.dev — https://github.com/lucide-icons/lucide
+ *
+ * These are the official single-stroke paths. Size, stroke, and color come from
+ * CSS (`.icon`: `--icon`, `--icon-stroke`, `currentColor`). No fill.
+ */
+export const ICONS = {
+    pipeline: `<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/>`,
+    inbox: `<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>`,
+    hand: `<path d="M11 12h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 14"/><path d="m7 18 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 13 6 6"/>`,
+    repos: `<path d="M18 19a5 5 0 0 1-5-5v8"/><path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5"/><circle cx="13" cy="12" r="2"/><circle cx="20" cy="19" r="2"/>`,
+    history: `<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>`,
+    stats: `<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>`,
+    today: `<path d="M8 2v3"/><path d="M16 2v3"/><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/>`,
+    triggers: `<path d="M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"/>`,
+    settings: `<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/>`,
+    pause: `<rect x="14" y="3" width="5" height="18" rx="1"/><rect x="5" y="3" width="5" height="18" rx="1"/>`,
+    play: `<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>`,
+    bell: `<path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>`,
+    "bell-off": `<path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"/><path d="m2 2 20 20"/><path d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"/>`,
+};
+/** Lucide names for the marks above. Repo sublinks stay text and are not listed. */
+export const ICON_LUCIDE = {
+    pipeline: "columns-3",
+    inbox: "inbox",
+    hand: "hand-helping",
+    repos: "folder-git-2",
+    history: "history",
+    stats: "chart-column",
+    today: "calendar",
+    triggers: "zap",
+    settings: "settings",
+    pause: "pause",
+    play: "play",
+    bell: "bell",
+    "bell-off": "bell-off",
+};
+export function icon(name, className = "icon") {
+    return `<svg class="${className}" viewBox="0 0 24 24" aria-hidden="true">${ICONS[name]}</svg>`;
+}

package/dist/schemas.js

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { BOARD_THEME_IDS } from "./theme.js";
 /**
  * Kiln config file. `repos` is an open map: any name, not a fixed set.
  * `path` is absolute, `~`, or (in older files) relative to the config directory.
@@ -179,6 +180,21 @@ export const TriggerToggleSchema = z
     enabled: z.boolean(),
 })
     .strict();
+/** Known board theme ids. An unknown id in a write is rejected. */
+export const BoardThemeSchema = z.enum(BOARD_THEME_IDS);
+/**
+ * `board` on disk. `theme` is free text so a typo does not make the whole
+ * file invalid; readers fall back to `kiln`.
+ */
+export const BoardFileSchema = z.object({
+    theme: z.string().optional(),
+});
+/** `board` on PUT /api/settings. Only a known theme id is written. */
+export const BoardWriteSchema = z
+    .object({
+    theme: BoardThemeSchema,
+})
+    .strict();
 export const EditableKilnSettingsSchema = z.object({
     repos: KilnReposSchema,
     stallTimeoutMs,
@@ -188,6 +204,7 @@ export const EditableKilnSettingsSchema = z.object({
     dailyDollarCap,
     sandbox: EditableSandboxSchema.optional(),
     triggers: z.array(TriggerToggleSchema).optional(),
+    board: BoardWriteSchema.optional(),
 });
 /** PUT /api/settings body. `revision` is the sha256 of the file the client loaded. */
 export const SettingsWriteSchema = EditableKilnSettingsSchema.extend({
@@ -216,6 +233,8 @@ export const KilnConfigFileSchema = z.object({
      * Omitted uses the packaged `prompts/kiln/review.md`.
      */
     reviewPrompt: z.string().min(1).optional(),
+    /** Board appearance. Omitted theme means Kiln. */
+    board: BoardFileSchema.optional(),
 });
 /**
  * Where a job came from. Adapters set this; tick and reconcile do not branch on it.

package/dist/serve-page.js

@@ -3,9 +3,11 @@ import { join } from "node:path";
 import { packageRoot } from "./paths.js";
 import { buildBoard, } from "./board-view.js";
 import { COLUMN_LABEL, PIPELINE_COLUMNS, formatCost, formatDuration, formatLocal, formatRelative, shortSha, stateTone, } from "./job-view.js";
+import { icon } from "./icons.js";
 import { renderMarkdown } from "./markdown.js";
 import { kilnVersion } from "./project.js";
 import { formatSpend } from "./rails.js";
+import { BOARD_THEME_CHOICES, DEFAULT_BOARD_THEME } from "./theme.js";
 import { listWorkflowNames } from "./workflow.js";
 const LIVE_SCRIPT = readFileSync(join(packageRoot(), "assets", "serve.js"), "utf8");
 export function renderConsole(css, attention, page) {
@@ -23,16 +25,23 @@ export function renderApp(model) {
     const capNote = page.spend?.blocked ? `<span class="cap" id="cap-note">cap hit</span>` : `<span class="cap" id="cap-note" hidden>cap hit</span>`;
     const body = `<div class="shell">
 <aside class="nav" aria-label="Kiln">
-<div class="brand"><span class="logo" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12V6l5-3 5 3v6l-5 3-5-3z"/><path d="M3 6l5 3 5-3M8 9v6"/></svg></span><div><h1>Kiln</h1>${version}</div></div>
+<div class="brand"><span class="logo" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12V6l5-3 5 3v6l-5 3-5-3z"/><path d="M3 6l5 3 5-3M8 9v6"/></svg></span><div><h1>Kiln</h1>${version}</div></div>
+<div class="nav-scroll">
+${navHtml(model)}
+<button class="add" type="button" id="add-job">Add job</button>
+</div>
+<footer class="side-foot">
 <div class="runstate" id="runstate">
 <span class="live-dot${paused ? " paused" : ""}" id="run-dot" aria-hidden="true"></span>
 <span id="run-label">${paused ? "Paused" : "Running"}</span>
-<form method="post" action="${paused ? "/api/resume" : "/api/pause"}" class="pause" id="pause-form"><input type="hidden" name="csrf" value="${escapeHtml(page.csrf)}"><button type="submit" id="pause-toggle" aria-pressed="${paused ? "true" : "false"}">${paused ? "Resume" : "Pause"}</button></form>
+<form method="post" action="${paused ? "/api/resume" : "/api/pause"}" class="pause" id="pause-form"><input type="hidden" name="csrf" value="${escapeHtml(page.csrf)}"><button type="submit" id="pause-toggle" aria-pressed="${paused ? "true" : "false"}">${icon("pause", "icon icon-pause")}${icon("play", "icon icon-play")}<span id="pause-label">${paused ? "Resume" : "Pause"}</span></button></form>
 </div>
-${spend}${capNote}
-${navHtml(model)}
-<button class="add" type="button" id="add-job">Add job</button>
-<button class="tool-link" type="button" id="notify">Notify me</button>
+<p class="spend-row">${spend}${capNote}</p>
+<div class="notify">
+<button class="tool-link" type="button" id="notify" data-state="ask" aria-pressed="false">${icon("bell", "icon icon-bell")}${icon("bell-off", "icon icon-bell-off")}<span id="notify-label">Notify me</span></button>
+<p class="notify-note" id="notify-note" hidden></p>
+</div>
+</footer>
 </aside>
 <div class="workspace${model.section === "job" ? " with-rail" : ""}">
 ${mainHtml(model, page)}
@@ -50,31 +59,34 @@ ${intakeSheet(page, model.attention)}
         revision: model.attention.revision,
         csrf: page.csrf,
         section: model.section,
+        theme: page.theme ?? DEFAULT_BOARD_THEME,
         ...(job ? { jobId: job.jobId, latest: job.latestEventAt } : {}),
         live: true,
         body,
     });
 }
-export function renderTextPage(css, title, text) {
+export function renderTextPage(css, title, text, theme = DEFAULT_BOARD_THEME) {
     return document({
         css,
         title,
         needsYou: 0,
         revision: "",
         section: "job",
+        theme,
         live: false,
         body: `<a class="back" href="/">Pipeline</a>
 <div class="page"><h1>${escapeHtml(title)}</h1>
 <pre class="text">${escapeHtml(text)}</pre></div>`,
     });
 }
-export function renderMessagePage(css, title, message) {
+export function renderMessagePage(css, title, message, theme = DEFAULT_BOARD_THEME) {
     return document({
         css,
         title,
         needsYou: 0,
         revision: "",
         section: "job",
+        theme,
         live: false,
         body: `<a class="back" href="/">Pipeline</a>
 <div class="page"><h1>${escapeHtml(title)}</h1>
@@ -83,11 +95,11 @@ export function renderMessagePage(css, title, message) {
 }
 function navHtml(model) {
     const board = model.board;
-    const item = (href, id, label, section, badge) => {
+    const item = (href, id, label, section, glyph, badge) => {
         const current = model.section === section ? ` aria-current="page"` : "";
         const count = badge !== undefined && badge > 0 ? `<span class="badge">${badge}</span>` : "";
         const extra = id === "open-settings" ? ` id="open-settings"` : "";
-        return `<a class="nav-link" href="${href}"${current}${extra}>${escapeHtml(label)}${count}</a>`;
+        return `<a class="nav-link" href="${href}"${current}${extra}><span class="nav-label">${icon(glyph)}${escapeHtml(label)}</span>${count}</a>`;
     };
     const repos = board.repos
         .map((group) => {
@@ -96,23 +108,23 @@ function navHtml(model) {
     })
         .join("");
     return `<nav class="side" aria-label="Sections">
-${item("/", "pipeline", "Pipeline", "pipeline")}
-${item("/inbox", "inbox", "Inbox", "inbox", board.inboxCount)}
+${item("/", "pipeline", "Pipeline", "pipeline", "pipeline")}
+${item("/inbox", "inbox", "Inbox", "inbox", "inbox", board.inboxCount)}
 <p class="unseen" id="inbox-unseen" hidden></p>
-${item("/hand", "hand", "Needs a hand", "hand", board.handCount)}
-${item("/repos", "repos", "Repos", "repos")}
+${item("/hand", "hand", "Needs a hand", "hand", "hand", board.handCount)}
+${item("/repos", "repos", "Repos", "repos", "repos")}
 ${repos}
-${item("/history", "history", "History", "history", board.history.length)}
-${item("/stats", "stats", "Stats", "stats")}
-${item("/report", "report", "Today", "report")}
-${item("/triggers", "triggers", "Triggers", "triggers")}
-${item("/settings", "open-settings", "Settings", "settings")}
+${item("/history", "history", "History", "history", "history", board.history.length)}
+${item("/stats", "stats", "Stats", "stats", "stats")}
+${item("/report", "report", "Today", "report", "today")}
+${item("/triggers", "triggers", "Triggers", "triggers", "triggers")}
+${item("/settings", "open-settings", "Settings", "settings", "settings")}
 </nav>`;
 }
 function mainHtml(model, page) {
     const error = `<p class="meta config-error" id="config-error" role="status"${page.configError ? "" : " hidden"}>${escapeHtml(page.configError ?? "")}</p>`;
     if (model.section === "settings") {
-        return `${error}<main class="main"><h2>Settings</h2><section id="settings" aria-label="Settings">${settingsForm()}</section></main>`;
+        return `${error}<main class="main"><h2>Settings</h2><section id="settings" aria-label="Settings">${settingsForm(page.theme ?? DEFAULT_BOARD_THEME)}</section></main>`;
     }
     if (model.section === "stats" && model.stats) {
         return `${error}<main class="main">${statsHtml(model.stats)}</main>`;
@@ -263,7 +275,7 @@ function jobRow(job, section, csrf) {
         classes.push("retrying");
     if (section === "inbox" || (section === "hand" && !job.scheduledRetry))
         classes.push("human");
-    const flag = classes.includes("human") ? `<span class="flag">your call</span>` : "";
+    const flag = classes.includes("human") ? `<span class="flag">Needs a decision</span>` : "";
     const repo = section === "repos" ? "" : `<span class="meta">${escapeHtml(job.repo)}</span>`;
     const sandbox = job.sandboxed ? `<span class="meta">sandbox · docker</span>` : "";
     const pr = section === "repos" && job.state === "in-review" ? `<span class="meta">PR review</span>` : "";
@@ -651,6 +663,8 @@ function reportHtml(report) {
 </div>
 <section class="stat"><h3>What ran</h3>${runs}</section>`;
 }
+/** Chips wrap up to this many choices. Past it, use a select or combobox. */
+const PICK_CHIP_MAX = 5;
 function tableRows(rows, empty) {
     if (rows.length === 0)
         return `<p class="empty">${escapeHtml(empty)}</p>`;
@@ -668,31 +682,50 @@ function intakeSheet(intake, attention) {
 <button type="button" class="close" data-close aria-label="Close">×</button>
 </div>
 <form id="add-form" class="intake-form">
-<div class="field"><span class="k">Repo</span><div class="picks" id="repo-pick">${repoButtons(intake.repos)}</div></div>
-<label class="field"><span class="k">Workflow</span><select id="workflow" name="workflow">${workflowOptions(intake.workflows)}</select></label>
-<div class="seg" role="tablist" aria-label="Source">
+<div class="intake-body">
+<div class="field" id="repo-field"><span class="k" id="repo-label">Repo</span>${repoPicker(intake.repos)}
+<p class="field-error" id="repo-error" role="alert" hidden></p></div>
+<div class="field" id="workflow-field"><span class="k" id="workflow-label">Workflow</span>${workflowPicker(intake.workflows)}
+<p class="field-error" id="workflow-error" role="alert" hidden></p></div>
+<div class="field"><span class="k" id="source-label">Source</span>
+<div class="seg" role="group" aria-labelledby="source-label">
 <button type="button" data-source="prompt" aria-pressed="true">Prompt</button>
 <button type="button" data-source="spec" aria-pressed="false">Spec file</button>
 <button type="button" data-source="tickets" aria-pressed="false">Tickets folder</button>
 <button type="button" data-source="jira" aria-pressed="false">Jira</button>
-</div>
-<div data-pane="prompt"><label class="field"><span class="k">Prompt</span><textarea id="prompt-text" rows="4" placeholder="What should this job do?"></textarea></label></div>
-<div id="browser-field" hidden>
+</div></div>
+<div data-pane="prompt"><label class="field"><span class="k">Prompt</span><textarea id="prompt-text" rows="4" placeholder="What should this job do?" aria-describedby="prompt-error"></textarea>
+<p class="field-error" id="prompt-error" role="alert" hidden></p></label></div>
+<div class="field" id="browser-field" hidden>
 <div class="k" id="browser-label">Spec file</div>
 <div class="fs" id="browser"></div>
 <p class="meta" id="picked"></p>
+<p class="field-error" id="source-error" role="alert" hidden></p>
 </div>
-<div data-pane="jira" hidden><label class="field"><span class="k">Jira key</span><input id="jira-key" type="text" placeholder="PROJ-123" autocomplete="off" spellcheck="false"></label></div>
+<div data-pane="jira" hidden><label class="field"><span class="k">Jira key</span><input id="jira-key" type="text" placeholder="PROJ-123" autocomplete="off" spellcheck="false" aria-describedby="jira-error">
+<p class="field-error" id="jira-error" role="alert" hidden></p></label></div>
 <label class="field" id="issue-field"><span class="k">Issue</span><input id="job-issue" type="text" placeholder="ABC-123" autocomplete="off" spellcheck="false"></label>
 <label class="field" id="title-field"><span class="k">Title</span><input id="job-title" type="text" autocomplete="off"></label>
 <fieldset class="field" id="after-field"><legend class="k">After</legend><div id="after-list">${afterOptions(items.map((item) => item.job))}</div></fieldset>
 <pre class="text preview" id="intake-preview" hidden></pre>
 <p class="form-error" id="intake-error" role="alert" hidden></p>
-<div class="d-actions"><button type="button" id="preview-job" hidden>Preview</button><button type="submit">Add</button></div>
+</div>
+<div class="form-footer">
+<button type="button" class="btn" id="preview-job" hidden>Preview</button>
+<button type="button" class="btn" data-close>Cancel</button>
+<button type="submit" class="btn primary" id="add-submit" disabled>Add</button>
+</div>
 </form>
 </section>`;
 }
-function settingsForm() {
+function themePicker(selected) {
+    const buttons = BOARD_THEME_CHOICES.map((theme) => {
+        const on = theme.id === selected;
+        return `<button type="button" class="theme" data-theme-choice="${theme.id}" aria-pressed="${on ? "true" : "false"}"><span class="theme-swatch" data-theme="${theme.id}" aria-hidden="true"><span class="swatch bg"></span><span class="swatch panel"></span><span class="swatch card"></span><span class="swatch accent"></span></span><span class="theme-label">${escapeHtml(theme.label)}</span></button>`;
+    }).join("");
+    return `<div class="themes" id="theme-pick" role="group" aria-label="Theme">${buttons}</div>`;
+}
+function settingsForm(theme) {
     return `<form id="settings-form" class="intake-form">
 <p class="meta" id="settings-path"></p>
 <p class="saved" id="settings-saved" role="status" hidden>Saved</p>
@@ -700,6 +733,7 @@ function settingsForm() {
 <div class="seg" role="tablist" aria-label="Settings sections">
 <button type="button" data-settings-tab="repos" aria-pressed="true">Repos</button>
 <button type="button" data-settings-tab="global" aria-pressed="false">Global</button>
+<button type="button" data-settings-tab="appearance" aria-pressed="false">Appearance</button>
 </div>
 <div id="settings-repos">
 <div id="repo-editor" hidden>
@@ -760,29 +794,70 @@ function settingsForm() {
 <p class="hint" id="hint-cap"></p>
 <p class="field-error" data-error="dailyDollarCap" hidden></p>
 </div>
-<div class="d-actions"><button type="submit">Save</button></div>
+<div id="settings-appearance" hidden>
+<p class="hint">Color palette for this board. The choice applies immediately and is saved here.</p>
+${themePicker(theme)}
+<p class="field-error" data-error="board.theme" hidden></p>
+</div>
+<div class="form-footer"><button type="submit" class="btn primary">Save</button></div>
 </form>`;
 }
-function repoButtons(repos) {
-    if (repos.length === 0)
-        return `<p class="empty">No repos are registered.</p>`;
-    return repos
-        .map((repo, index) => `<button type="button" class="pick" data-repo="${escapeHtml(repo.name)}" data-path="${escapeHtml(repo.path)}" aria-pressed="${index === 0 ? "true" : "false"}">${escapeHtml(repo.name)}</button>`)
-        .join("");
+function repoListKey(repos) {
+    return repos.map((repo) => `${repo.name}\t${repo.path}`).join("\n");
 }
-function workflowOptions(names) {
-    if (names.length === 0)
-        return `<option value="">none</option>`;
-    return names
-        .map((name) => `<option value="${escapeHtml(name)}"${name === "feature" ? " selected" : ""}>${escapeHtml(name)}</option>`)
+function repoPicker(repos) {
+    const list = escapeHtml(repoListKey(repos));
+    if (repos.length === 0) {
+        return `<div class="picks" id="repo-pick" data-mode="empty" data-value="" data-path="" data-list="${list}" role="group" aria-labelledby="repo-label"><p class="empty">No repos are registered.</p></div>`;
+    }
+    const selected = repos[0];
+    if (!selected) {
+        return `<div class="picks" id="repo-pick" data-mode="empty" data-value="" data-path="" data-list="" role="group" aria-labelledby="repo-label"><p class="empty">No repos are registered.</p></div>`;
+    }
+    if (repos.length > PICK_CHIP_MAX) {
+        const options = repos
+            .map((repo, index) => {
+            const on = repo.name === selected.name;
+            return `<li role="option" id="repo-opt-${index}" data-value="${escapeHtml(repo.name)}" data-path="${escapeHtml(repo.path)}" aria-selected="${on ? "true" : "false"}">${escapeHtml(repo.name)}</li>`;
+        })
+            .join("");
+        return `<div class="combo" id="repo-pick" data-mode="select" data-value="${escapeHtml(selected.name)}" data-path="${escapeHtml(selected.path)}" data-list="${list}"><input id="repo-pick-query" class="combo-input" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="repo-pick-list" aria-labelledby="repo-label" placeholder="Search repos" value="${escapeHtml(selected.name)}" autocomplete="off" spellcheck="false"><ul class="combo-list" id="repo-pick-list" role="listbox" hidden>${options}<li class="empty" role="presentation" hidden>No matching repos.</li></ul></div>`;
+    }
+    const buttons = repos
+        .map((repo, index) => {
+        const on = index === 0;
+        return `<button type="button" class="pick" data-repo="${escapeHtml(repo.name)}" data-path="${escapeHtml(repo.path)}" aria-pressed="${on ? "true" : "false"}">${escapeHtml(repo.name)}</button>`;
+    })
         .join("");
+    return `<div class="picks" id="repo-pick" data-mode="chips" data-value="${escapeHtml(selected.name)}" data-path="${escapeHtml(selected.path)}" data-list="${list}" role="group" aria-labelledby="repo-label">${buttons}</div>`;
+}
+function workflowPicker(names) {
+    const selected = names.includes("feature") ? "feature" : (names[0] ?? "");
+    if (names.length === 0 || names.length > PICK_CHIP_MAX) {
+        const options = names.length === 0
+            ? `<option value="">none</option>`
+            : names
+                .map((name) => `<option value="${escapeHtml(name)}"${name === selected ? " selected" : ""}>${escapeHtml(name)}</option>`)
+                .join("");
+        return `<select id="workflow" name="workflow" aria-labelledby="workflow-label">${options}</select>`;
+    }
+    const buttons = names
+        .map((name) => `<button type="button" data-workflow="${escapeHtml(name)}" aria-pressed="${name === selected ? "true" : "false"}">${escapeHtml(name)}</button>`)
+        .join("");
+    return `<div class="seg" id="workflow-pick" data-mode="chips" data-workflow="${escapeHtml(selected)}" role="group" aria-labelledby="workflow-label">${buttons}</div>`;
+}
+function afterLabel(job) {
+    const title = job.title.trim();
+    if (!title || title === job.jobId)
+        return job.jobId;
+    return `${job.jobId} — ${title}`;
 }
 function afterOptions(jobs) {
     const open = jobs.filter((job) => job.state !== "done");
     if (open.length === 0)
         return `<p class="empty">No open jobs.</p>`;
     return open
-        .map((job) => `<label class="after"><input type="checkbox" name="after" value="${escapeHtml(job.jobId)}"><span class="num">${escapeHtml(job.jobId)}</span><span>${escapeHtml(job.title || job.jobId)}</span></label>`)
+        .map((job) => `<label class="after"><input type="checkbox" name="after" value="${escapeHtml(job.jobId)}"><span>${escapeHtml(afterLabel(job))}</span></label>`)
         .join("");
 }
 function safeUrl(url) {
@@ -801,8 +876,9 @@ function safeUrl(url) {
 function document(options) {
     const job = options.jobId ? ` data-job="${escapeHtml(options.jobId)}"` : "";
     const latest = options.latest ? ` data-latest="${escapeHtml(options.latest)}"` : "";
+    const theme = options.theme ?? DEFAULT_BOARD_THEME;
     return `<!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="${theme}">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -812,7 +888,7 @@ function document(options) {
 ${options.css}
 </style>
 </head>
-<body data-section="${escapeHtml(options.section)}" data-needs-you="${options.needsYou}" data-revision="${escapeHtml(options.revision)}" data-csrf="${escapeHtml(options.csrf ?? "")}"${job}${latest}>
+<body data-section="${escapeHtml(options.section)}" data-needs-you="${options.needsYou}" data-revision="${escapeHtml(options.revision)}" data-csrf="${escapeHtml(options.csrf ?? "")}" data-pick-limit="${PICK_CHIP_MAX}"${job}${latest}>
 ${options.body}
 ${options.live ? `<script>\n${LIVE_SCRIPT}\n</script>` : ""}
 </body>

package/dist/serve.js

@@ -271,7 +271,7 @@ async function handle(req, res, state, boundPort, css, csrf) {
         if (listed === "stats") {
             const window = parseStatsWindow(url.searchParams.get("window"));
             if (!window) {
-                sendHtml(res, 400, renderMessagePage(css, "Stats", "window must be today, 7d, or 30d."), secrets);
+                sendHtml(res, 400, renderMessagePage(css, "Stats", "window must be today, 7d, or 30d.", config.boardTheme), secrets);
                 return;
             }
             sendHtml(res, 200, renderShell(state, css, csrf, "stats", { window }), secrets);
@@ -287,11 +287,11 @@ async function handle(req, res, state, boundPort, css, csrf) {
             name = decodeURIComponent(repoPage[1]);
         }
         catch {
-            sendHtml(res, 404, renderMessagePage(css, "Not found", "Not found."), secrets);
+            sendHtml(res, 404, renderMessagePage(css, "Not found", "Not found.", config.boardTheme), secrets);
             return;
         }
         if (!state.config.repos[name]) {
-            sendHtml(res, 404, renderMessagePage(css, "Not found", `No repo ${name}.`), secrets);
+            sendHtml(res, 404, renderMessagePage(css, "Not found", `No repo ${name}.`, config.boardTheme), secrets);
             return;
         }
         sendHtml(res, 200, renderShell(state, css, csrf, "repos", { repo: name }), secrets);
@@ -302,12 +302,12 @@ async function handle(req, res, state, boundPort, css, csrf) {
         const jobId = parseJobId(jobPage[1]);
         const job = jobId ? findJob(config, jobId) : undefined;
         if (!job) {
-            sendHtml(res, 404, renderMessagePage(css, "Not found", jobId ? `No job ${jobId}.` : "Not found."), secrets);
+            sendHtml(res, 404, renderMessagePage(css, "Not found", jobId ? `No job ${jobId}.` : "Not found.", config.boardTheme), secrets);
             return;
         }
         const tabRaw = url.searchParams.get("tab");
         if (tabRaw && tabRaw !== "overview" && tabRaw !== "changes" && tabRaw !== "timeline") {
-            sendHtml(res, 400, renderMessagePage(css, "Job", "tab must be overview, changes, or timeline."), secrets);
+            sendHtml(res, 400, renderMessagePage(css, "Job", "tab must be overview, changes, or timeline.", config.boardTheme), secrets);
             return;
         }
         const tab = tabRaw === "changes" || tabRaw === "timeline" ? tabRaw : "overview";
@@ -319,7 +319,7 @@ async function handle(req, res, state, boundPort, css, csrf) {
         const jobId = parseJobId(page[1]);
         const job = jobId ? findJob(config, jobId) : undefined;
         if (!job) {
-            sendHtml(res, 404, renderMessagePage(css, "Not found", jobId ? `No job ${jobId}.` : "Not found."), secrets);
+            sendHtml(res, 404, renderMessagePage(css, "Not found", jobId ? `No job ${jobId}.` : "Not found.", config.boardTheme), secrets);
             return;
         }
         if (page[2] === "findings") {
@@ -328,22 +328,22 @@ async function handle(req, res, state, boundPort, css, csrf) {
         }
         const target = page[2] === "spec" ? job.specPath : job.logPath;
         if (!target) {
-            sendHtml(res, 404, renderMessagePage(css, "Not found", page[2] === "log" ? "No log yet." : "No spec."), secrets);
+            sendHtml(res, 404, renderMessagePage(css, "Not found", page[2] === "log" ? "No log yet." : "No spec.", config.boardTheme), secrets);
             return;
         }
         const text = readInside(config.kilnDir, target);
         if (text === undefined) {
-            sendHtml(res, 404, renderMessagePage(css, "Not found", "That file is not in the kiln directory."), secrets);
+            sendHtml(res, 404, renderMessagePage(css, "Not found", "That file is not in the kiln directory.", config.boardTheme), secrets);
             return;
         }
         const title = page[2] === "spec" ? `${job.title} spec` : `${job.title} log`;
-        sendHtml(res, 200, renderTextPage(css, title, text), secrets);
+        sendHtml(res, 200, renderTextPage(css, title, text, config.boardTheme), secrets);
         return;
     }
     if (path.startsWith("/api/"))
         sendJson(res, 404, { error: "Not found." }, secrets);
     else
-        sendHtml(res, 404, renderMessagePage(css, "Not found", "Not found."), secrets);
+        sendHtml(res, 404, renderMessagePage(css, "Not found", "Not found.", config.boardTheme), secrets);
 }
 async function cancelQueued(res, config, secrets, raw) {
     let parsed;
@@ -393,7 +393,7 @@ async function answer(req, res, config, css, secrets, jobId, choice) {
         if (wantsJson(req))
             sendJson(res, status, { error: message }, secrets);
         else
-            sendHtml(res, status, renderMessagePage(css, "Could not answer", message), secrets);
+            sendHtml(res, status, renderMessagePage(css, "Could not answer", message, config.boardTheme), secrets);
         return;
     }
     const job = findJob(config, jobId);
@@ -410,7 +410,7 @@ async function revise(req, res, config, css, secrets, jobId, raw) {
         if (wantsJson(req))
             sendJson(res, 400, { error: message }, secrets);
         else
-            sendHtml(res, 400, renderMessagePage(css, "Could not revise", message), secrets);
+            sendHtml(res, 400, renderMessagePage(css, "Could not revise", message, config.boardTheme), secrets);
         return;
     }
     try {
@@ -422,7 +422,7 @@ async function revise(req, res, config, css, secrets, jobId, raw) {
         if (wantsJson(req))
             sendJson(res, status, { error: message }, secrets);
         else
-            sendHtml(res, status, renderMessagePage(css, "Could not revise", message), secrets);
+            sendHtml(res, status, renderMessagePage(css, "Could not revise", message, config.boardTheme), secrets);
         return;
     }
     const job = findJob(config, jobId);
@@ -455,7 +455,7 @@ async function retry(req, res, config, css, secrets, jobId) {
         if (wantsJson(req))
             sendJson(res, status, { error: message }, secrets);
         else
-            sendHtml(res, status, renderMessagePage(css, "Could not retry", message), secrets);
+            sendHtml(res, status, renderMessagePage(css, "Could not retry", message, config.boardTheme), secrets);
         return;
     }
     const job = findJob(config, jobId);
@@ -467,19 +467,19 @@ async function retry(req, res, config, css, secrets, jobId) {
 }
 function sendFindings(res, config, css, secrets, job) {
     if (job.workflow !== INVESTIGATION_WORKFLOW) {
-        sendHtml(res, 404, renderMessagePage(css, "Not found", "Not found."), secrets);
+        sendHtml(res, 404, renderMessagePage(css, "Not found", "Not found.", config.boardTheme), secrets);
         return;
     }
     if (!job.findingsPath) {
-        sendHtml(res, 404, renderMessagePage(css, "Not found", "No findings yet."), secrets);
+        sendHtml(res, 404, renderMessagePage(css, "Not found", "No findings yet.", config.boardTheme), secrets);
         return;
     }
     const text = readInside(config.kilnDir, job.findingsPath);
     if (text === undefined) {
-        sendHtml(res, 404, renderMessagePage(css, "Not found", "That file is not in the kiln directory."), secrets);
+        sendHtml(res, 404, renderMessagePage(css, "Not found", "That file is not in the kiln directory.", config.boardTheme), secrets);
         return;
     }
-    sendHtml(res, 200, renderTextPage(css, `${job.title} findings`, text), secrets);
+    sendHtml(res, 200, renderTextPage(css, `${job.title} findings`, text, config.boardTheme), secrets);
 }
 function findJob(config, jobId) {
     try {
@@ -753,6 +753,7 @@ function pageOptions(state, csrf) {
         paused: isPaused(state.config.kilnDir),
         spend,
         ...(state.configError ? { configError: state.configError } : {}),
+        theme: state.config.boardTheme,
     };
 }
 function statusDocument(state) {

package/dist/settings.js

@@ -5,6 +5,7 @@ import { basename, dirname, join } from "node:path";
 import { assertBranchName, assertCheckoutDirectory } from "./config.js";
 import { DEFAULT_BRANCH_TEMPLATE, DEFAULT_PR_TITLE } from "./pr-names.js";
 import { DEFAULT_MAX_ATTEMPTS, DEFAULT_MAX_FIX_ROUNDS, DEFAULT_MAX_SAME_FINGERPRINT, DEFAULT_STALL_TIMEOUT_MS, KilnConfigFileSchema, SettingsWriteSchema, TriggerConfigSchema, } from "./schemas.js";
+import { resolveBoardTheme } from "./theme.js";
 import { applyTriggerToggles, effectiveTriggers, knownTrigger, REVIEW_REQUESTS_TRIGGER, reviewMaxNew, reviewMaxQueued, reviewRequestLabel, } from "./triggers.js";
 const DEFAULTS = {
     deliver: "local",
@@ -78,6 +79,7 @@ function project(path, revision, file) {
         ...(file.dailyDollarCap !== undefined ? { dailyDollarCap: file.dailyDollarCap } : {}),
         ...(sandbox ? { sandbox } : {}),
         triggers: effectiveTriggers(file.triggers).map(triggerView),
+        board: { theme: resolveBoardTheme(file.board?.theme) },
         defaults: DEFAULTS,
     };
 }
@@ -126,6 +128,11 @@ function mergeSettings(raw, settings) {
         else
             next.sandbox = prior;
     }
+    if (settings.board) {
+        const prior = isRecord(raw.board) ? { ...raw.board } : {};
+        prior.theme = settings.board.theme;
+        next.board = prior;
+    }
     return next;
 }
 function triggerView(trigger) {