@lchase/kiln 0.14.0 → 0.16.0

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

@@ -6,6 +6,7 @@ import { COLUMN_LABEL, PIPELINE_COLUMNS, formatCost, formatDuration, formatLocal
 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,7 +24,7 @@ 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="runstate" id="runstate">
 <span class="live-dot${paused ? " paused" : ""}" id="run-dot" aria-hidden="true"></span>
 <span id="run-label">${paused ? "Paused" : "Running"}</span>
@@ -50,31 +51,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>
@@ -112,7 +116,7 @@ ${item("/settings", "open-settings", "Settings", "settings")}
 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 +267,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 +655,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 +674,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 +725,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 +786,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 +868,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 +880,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) {

package/dist/theme.js

@@ -0,0 +1,35 @@
+/**
+ * Board color themes. Each id matches a `theme:<id>` block in `assets/serve.css`.
+ * Missing or unknown values resolve to `kiln`.
+ */
+export const BOARD_THEME_IDS = [
+    "kiln",
+    "nord",
+    "gruvbox-dark",
+    "gruvbox-light",
+    "catppuccin-mocha",
+    "catppuccin-macchiato",
+    "catppuccin-frappe",
+    "catppuccin-latte",
+    "monospace-dark",
+    "monospace-light",
+];
+export const DEFAULT_BOARD_THEME = "kiln";
+export const BOARD_THEME_CHOICES = [
+    { id: "kiln", label: "Kiln" },
+    { id: "nord", label: "Nord" },
+    { id: "gruvbox-dark", label: "Gruvbox Dark" },
+    { id: "gruvbox-light", label: "Gruvbox Light" },
+    { id: "catppuccin-mocha", label: "Catppuccin Mocha" },
+    { id: "catppuccin-macchiato", label: "Catppuccin Macchiato" },
+    { id: "catppuccin-frappe", label: "Catppuccin Frappé" },
+    { id: "catppuccin-latte", label: "Catppuccin Latte" },
+    { id: "monospace-dark", label: "Monospace Dark" },
+    { id: "monospace-light", label: "Monospace Light" },
+];
+export function resolveBoardTheme(value) {
+    if (typeof value === "string" && BOARD_THEME_IDS.includes(value)) {
+        return value;
+    }
+    return DEFAULT_BOARD_THEME;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lchase/kiln",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Run a workflow on any registered repo. A markdown spec is the input.",
   "license": "MIT",
   "type": "module",