@lchase/kiln 0.16.0 → 0.17.0

package/assets/serve.css

@@ -44,6 +44,7 @@
   --logo: 28px;
   --dot: 8px;
   --icon: 16px;
+  --icon-stroke: 2;
   --badge: 20px;
   --focus-width: 2px;
   --focus-offset: 2px;
@@ -426,7 +427,7 @@ h3 {
   position: sticky;
   top: 0;
   height: 100vh;
-  overflow: auto;
+  overflow: hidden;
   background: var(--panel);
   border-right: var(--hairline) solid var(--line);
   padding: var(--space-4) var(--space-3) var(--space-5);
@@ -434,6 +435,14 @@ h3 {
   flex-direction: column;
   gap: var(--space-3);
 }
+.nav-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
 .brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); }
 .brand h1 { margin: 0; font-size: var(--text-md); line-height: var(--leading-sm); }
 .logo {
@@ -448,6 +457,22 @@ h3 {
   flex: none;
 }
 .logo svg { width: var(--icon); height: var(--icon); }
+.icon {
+  width: var(--icon);
+  height: var(--icon);
+  flex: none;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: var(--icon-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+#notify .icon-bell,
+#pause-toggle .icon-play { display: none; }
+#notify[data-state="on"] .icon-bell { display: block; }
+#notify[data-state="on"] .icon-bell-off { display: none; }
+#pause-toggle[aria-pressed="true"] .icon-pause { display: none; }
+#pause-toggle[aria-pressed="true"] .icon-play { display: block; }
 .ver { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--faint); }
 .runstate {
   display: flex;
@@ -464,15 +489,30 @@ h3 {
   background: var(--state-running);
 }
 .live-dot.paused { background: var(--state-needs-you); }
+.spend-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0 var(--space-2);
+}
 .spend, .cap {
   font-family: var(--font-mono);
   font-size: var(--text-xs);
   line-height: var(--leading-xs);
   color: var(--muted);
-  padding: 0 var(--space-2);
 }
 .cap { color: var(--state-needs-you); }
 .side { display: flex; flex-direction: column; gap: var(--space-2xs); }
+.side-foot {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding-top: var(--space-3);
+  border-top: var(--hairline) solid var(--line);
+}
 .nav-link, .nav-sub {
   display: flex;
   align-items: center;
@@ -480,12 +520,21 @@ h3 {
   gap: var(--space-2);
   padding: var(--space-2);
   border-radius: var(--radius-md);
-  color: var(--ink);
+  color: var(--muted);
   text-decoration: none;
 }
-.nav-sub { padding-left: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
-.nav-link:hover, .nav-sub:hover { background: var(--card); text-decoration: none; }
-.nav-link[aria-current="page"], .nav-sub[aria-current="page"] { background: var(--card-hover); }
+.nav-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+.nav-sub { padding-left: calc(var(--icon) + var(--space-4)); font-size: var(--text-sm); }
+.nav-link:hover, .nav-sub:hover { background: var(--card); color: var(--ink); text-decoration: none; }
+.nav-link[aria-current="page"], .nav-sub[aria-current="page"] {
+  background: var(--card-hover);
+  color: var(--ink);
+}
 .badge {
   min-width: var(--badge);
   height: var(--badge);
@@ -520,17 +569,47 @@ h3 {
   color: var(--ink);
   cursor: pointer;
 }
-.pause button { font: var(--text-xs)/var(--leading-xs) var(--font-mono); }
+.pause button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font: var(--text-xs)/var(--leading-xs) var(--font-mono);
+}
 .pause { margin: 0 0 0 auto; }
 .pause button[aria-pressed="true"] { color: var(--state-needs-you); }
-.add, .tool-link { margin-top: var(--space-1); text-align: left; }
+.add { margin-top: var(--space-1); text-align: left; }
 .add, .btn.primary, .d-actions .approve button {
   background: var(--primary);
   color: var(--on-primary);
   border-color: transparent;
   font-weight: 500;
 }
-.tool-link { margin-top: auto; background: none; color: var(--muted); }
+.notify { display: flex; flex-direction: column; gap: var(--space-1); }
+.tool-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  margin: 0;
+  text-align: left;
+  background: none;
+  color: var(--muted);
+}
+.tool-link:hover { color: var(--ink); background: var(--card); }
+.tool-link[data-state="on"] { color: var(--ink); }
+.tool-link:disabled, .tool-link:disabled:hover {
+  color: var(--muted);
+  background: none;
+  cursor: not-allowed;
+  opacity: var(--disabled);
+}
+.notify-note {
+  margin: 0;
+  padding: 0 var(--space-1);
+  color: var(--muted);
+  font-size: var(--text-xs);
+  line-height: var(--leading-xs);
+}
 .pick, .seg button, .fs-up, .fs-use, .repo-f, .wf-f {
   background: none;
   color: var(--muted);
@@ -1008,7 +1087,8 @@ body.open .drawer { transform: none; }
 
 @media (max-width: 960px) {
   .shell { grid-template-columns: 1fr; }
-  .nav { position: relative; height: auto; border-right: 0; border-bottom: var(--hairline) solid var(--line); }
+  .nav { position: relative; height: auto; overflow: visible; border-right: 0; border-bottom: var(--hairline) solid var(--line); }
+  .nav-scroll { overflow: visible; }
   .detail { grid-template-columns: 1fr; }
   .rail { position: static; }
   .d-actions .revise input { min-width: 0; width: 100%; }

package/assets/serve.js

@@ -1,5 +1,6 @@
 (function () {
   var KEY = "kiln-needs-you";
+  var NOTIFY_KEY = "kiln-notify";
   var body = document.body;
   var board = document.getElementById("board");
   var count = Number(body.getAttribute("data-needs-you") || "0");
@@ -12,7 +13,7 @@
     if (raw === null) return;
     var prev = Number(raw);
     if (!isFinite(prev) || n <= prev) return;
-    if (typeof Notification === "undefined" || Notification.permission !== "granted") return;
+    if (notifyMode() !== "on") return;
     var added = n - prev;
     try {
       new Notification("Kiln", { body: added === 1 ? "1 job needs you" : added + " jobs need you" });
@@ -257,24 +258,63 @@
     try { localStorage.removeItem("kiln-drawer"); } catch (err) { /* private mode */ }
   }
 
-  function notifyLabel() {
+  var notifyAsking = false;
+
+  function notifyPref() {
+    try { return localStorage.getItem(NOTIFY_KEY) === "off" ? "off" : "on"; }
+    catch (err) { return "on"; }
+  }
+
+  function setNotifyPref(value) {
+    try { localStorage.setItem(NOTIFY_KEY, value); } catch (err) { /* private mode */ }
+  }
+
+  function notifyMode() {
+    if (typeof Notification === "undefined") return "unavailable";
+    if (Notification.permission === "denied") return "blocked";
+    if (Notification.permission === "granted") return notifyPref() === "off" ? "off" : "on";
+    return "ask";
+  }
+
+  function notifyCopy(mode) {
+    if (mode === "unavailable") return { label: "Notifications unavailable", note: "" };
+    if (mode === "blocked") return { label: "Notifications blocked", note: "Allow notifications for this site in the browser." };
+    if (mode === "on") return { label: "Notifications on", note: "" };
+    return { label: "Notify me", note: "" };
+  }
+
+  function renderNotify() {
     var button = document.getElementById("notify");
     if (!button) return;
-    if (typeof Notification === "undefined") {
-      button.hidden = true;
-      return;
-    }
+    var mode = notifyMode();
+    var copy = notifyCopy(mode);
     button.hidden = false;
-    if (Notification.permission === "granted") {
-      button.setAttribute("data-tip", "Notifications on");
-      button.setAttribute("aria-label", "Notifications on");
-    } else if (Notification.permission === "denied") {
-      button.setAttribute("data-tip", "Notifications blocked");
-      button.setAttribute("aria-label", "Notifications blocked");
-    } else {
-      button.setAttribute("data-tip", "Notify me");
-      button.setAttribute("aria-label", "Notify me");
-    }
+    button.disabled = mode === "unavailable";
+    button.setAttribute("data-state", mode);
+    button.setAttribute("aria-pressed", mode === "on" ? "true" : "false");
+    button.setAttribute("aria-label", copy.label);
+    if (copy.note) button.setAttribute("aria-describedby", "notify-note");
+    else button.removeAttribute("aria-describedby");
+    var label = document.getElementById("notify-label");
+    if (label) label.textContent = copy.label;
+    var note = document.getElementById("notify-note");
+    if (note) {
+      note.hidden = !copy.note;
+      note.textContent = copy.note;
+    }
+  }
+
+  function askNotify() {
+    if (notifyAsking || typeof Notification === "undefined" || !Notification.requestPermission) return;
+    notifyAsking = true;
+    var pending = Notification.requestPermission();
+    var done = function () {
+      notifyAsking = false;
+      if (typeof Notification !== "undefined" && Notification.permission === "granted") setNotifyPref("on");
+      renderNotify();
+    };
+    if (pending && typeof pending.then === "function") pending.then(done, done);
+    else done();
   }
 
   var titleDirty = false;
@@ -1490,8 +1530,19 @@
       return;
     }
     if (target.closest("#notify")) {
-      if (typeof Notification === "undefined" || Notification.permission !== "default") return;
-      Notification.requestPermission().then(notifyLabel);
+      var mode = notifyMode();
+      if (mode === "unavailable" || mode === "blocked") return;
+      if (mode === "on") {
+        setNotifyPref("off");
+        renderNotify();
+        return;
+      }
+      if (mode === "off") {
+        setNotifyPref("on");
+        renderNotify();
+        return;
+      }
+      askNotify();
       return;
     }
     var act = target.closest("[data-act]");
@@ -1615,7 +1666,8 @@
         var toggle = document.getElementById("pause-toggle");
         var form = document.getElementById("pause-form");
         if (toggle && form && data && typeof data.paused === "boolean") {
-          toggle.textContent = data.paused ? "Resume" : "Pause";
+          var pauseLabel = document.getElementById("pause-label");
+          if (pauseLabel) pauseLabel.textContent = data.paused ? "Resume" : "Pause";
           toggle.setAttribute("aria-pressed", data.paused ? "true" : "false");
           form.setAttribute("action", data.paused ? "/api/resume" : "/api/pause");
           var label = document.getElementById("run-label");
@@ -1770,7 +1822,7 @@
   showFresh();
   syncValidity();
   renderCompact();
-  notifyLabel();
+  renderNotify();
   applyRepo();
   stamp(true);
   paintUnseen();

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/serve-page.js

@@ -3,6 +3,7 @@ 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";
@@ -25,15 +26,22 @@ export function renderApp(model) {
     const body = `<div class="shell">
 <aside class="nav" aria-label="Kiln">
 <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)}
@@ -87,11 +95,11 @@ export function renderMessagePage(css, title, message, theme = DEFAULT_BOARD_THE
 }
 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) => {
@@ -100,17 +108,17 @@ 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) {

package/package.json

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