@nanobpm/nano-workforce 0.197.0 → 0.198.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [0.198.1](https://github.com/nanobpm/nano-workforce/compare/v0.198.0...v0.198.1) (2026-10-02)
+
+### Bug Fixes
+
+* **deps:** update dependency @nanobpm/agentic to ^0.15.0 ([#848](https://github.com/nanobpm/nano-workforce/issues/848)) ([26f731a](https://github.com/nanobpm/nano-workforce/commit/26f731a9d87a50a9a4852dc7dd5bc8b3e61c72c4))
+
+## [0.198.0](https://github.com/nanobpm/nano-workforce/compare/v0.197.0...v0.198.0) (2026-10-02)
+
+### Features
+
+* **ui:** selectable themes (classic / soft / cartoon) ([#841](https://github.com/nanobpm/nano-workforce/issues/841)) ([5eb42e1](https://github.com/nanobpm/nano-workforce/commit/5eb42e17c0157311fde152f1d270dc6d7ff1610c)), closes [#840](https://github.com/nanobpm/nano-workforce/issues/840)
+
 ## [0.197.0](https://github.com/nanobpm/nano-workforce/compare/v0.196.0...v0.197.0) (2026-10-01)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanobpm/nano-workforce",
-  "version": "0.197.0",
+  "version": "0.198.1",
   "description": "Nano Workforce — an Agent Graph Orchestration application for Agentic SDLC: durable BPMN processes that coordinate a graph of AI agents across the software delivery lifecycle.",
   "type": "module",
   "main": "main.ts",
@@ -64,8 +64,8 @@
     "lint:fix": "biome check --write app operations workers pages components scripts e2e main.ts"
   },
   "dependencies": {
-    "@nanobpm/agentic": "^0.14.0",
-    "@nanobpm/urban": "^0.94.1",
+    "@nanobpm/agentic": "^0.15.0",
+    "@nanobpm/urban": "^0.95.0",
     "bpmn-auto-layout": "^2.0.0-alpha.2"
   },
   "devDependencies": {
@@ -83,7 +83,7 @@
     "yaml": "^2.9.0"
   },
   "overrides": {
-    "@nanobpm/engine-wasm": "^0.10.0",
+    "@nanobpm/engine-wasm": "^0.11.0",
     "@semantic-release/npm": "^13.1.5"
   }
 }

package/pages/app.css

@@ -0,0 +1,142 @@
+/*
+ * nano-workforce themes (issue #840) — linked by the urban shell AFTER its built-in CSS
+ * (`pages/app.css`, nano-ide#578), so these rules win. Every rule is keyed on
+ * <html data-nwf-theme="…">, set by `pages/app.js` (which owns the theme list). "classic"
+ * has no rules: it is urban's stock look.
+ *
+ * Colours go through urban's `--nano-*` token contract. When embedded in the Nano console,
+ * the console writes its resolved tokens as INLINE styles on :root, which beat any stylesheet
+ * rule — hence `!important` on the token overrides, so the chosen theme still applies there.
+ */
+
+/* ── the picker (all themes) ─────────────────────────────────────────── */
+.nwf-theme-picker {
+  position: fixed; right: .75rem; bottom: .75rem; z-index: 50;
+  display: inline-flex; align-items: center; gap: .35rem;
+  padding: .25rem .5rem; border: 1px solid var(--nano-edge); border-radius: 999px;
+  background: var(--nano-panel); color: var(--nano-text-muted); font-size: .8rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+}
+.nwf-theme-picker select { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+
+/* ══ SOFT — rounded, airy, gentle shadows; keeps light/dark ══════════════ */
+:root[data-nwf-theme="soft"] {
+  --nwf-radius: 14px;
+  --nwf-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .08);
+  --nwf-shadow-hover: 0 2px 4px rgba(16, 24, 40, .08), 0 10px 24px rgba(16, 24, 40, .12);
+}
+:root[data-nwf-theme="soft"][data-appearance="light"],
+:root[data-nwf-theme="soft"]:not([data-appearance]) {
+  --nano-app: #f4f6fb !important; --nano-panel: #ffffff !important; --nano-raised: #ffffff !important;
+  --nano-inset: #eef1f7 !important; --nano-hover: #eef2ff !important;
+  --nano-edge: #e3e7f0 !important; --nano-edge-strong: #cdd3e1 !important;
+  --nano-text: #1d2433 !important; --nano-text-muted: #5b6478 !important; --nano-text-faint: #8a93a6 !important;
+  --nano-accent: #5b6cf0 !important; --nano-accent-strong: #4453d6 !important; --nano-on-accent: #ffffff !important;
+  --nano-ok: #12a873 !important; --nano-warn: #d98a0b !important; --nano-danger: #e5486a !important; --nano-info: #2f8fdc !important;
+}
+:root[data-nwf-theme="soft"][data-appearance="dark"] {
+  --nwf-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .35);
+  --nwf-shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .45);
+}
+:root[data-nwf-theme="soft"] body { font-family: Nunito, "Segoe UI", system-ui, sans-serif; letter-spacing: .005em; }
+:root[data-nwf-theme="soft"] .pc-heading { font-weight: 800; letter-spacing: -.01em; }
+:root[data-nwf-theme="soft"] .pc-card,
+:root[data-nwf-theme="soft"] [data-grid-layout="cards"] table.pc-grid tr:has(> td[data-label]) {
+  border-color: transparent; border-radius: var(--nwf-radius); box-shadow: var(--nwf-shadow);
+  transition: box-shadow .15s ease, transform .15s ease;
+}
+:root[data-nwf-theme="soft"] [data-grid-layout="cards"] table.pc-grid tr:has(> td[data-label]):hover {
+  box-shadow: var(--nwf-shadow-hover); transform: translateY(-1px);
+}
+:root[data-nwf-theme="soft"] [data-grid-layout="cards"] table.pc-grid tr { padding: .8rem 1rem; margin: .8rem 0; }
+:root[data-nwf-theme="soft"] [data-grid-layout="cards"] table.pc-grid td[data-label]::before {
+  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .78rem;
+}
+:root[data-nwf-theme="soft"] .pc-btn,
+:root[data-nwf-theme="soft"] .njf-actions button { border-radius: 999px; padding: .45rem 1rem; font-weight: 600; }
+:root[data-nwf-theme="soft"] .pc-tab,
+:root[data-nwf-theme="soft"] .pc-nav-link { border-radius: 999px; }
+:root[data-nwf-theme="soft"] .pc-bar { border-bottom: 0; }
+:root[data-nwf-theme="soft"] .pc-bar.pc-sticky { box-shadow: 0 1px 0 var(--nano-edge); }
+:root[data-nwf-theme="soft"] .pc-pipe-stage { padding: .15rem .6rem; }
+:root[data-nwf-theme="soft"] .pc-input,
+:root[data-nwf-theme="soft"] .pc-select,
+:root[data-nwf-theme="soft"] .pc-textarea,
+:root[data-nwf-theme="soft"] .pc-field input:not([type=checkbox]) { border-radius: 10px; }
+:root[data-nwf-theme="soft"] .pc-modal { border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
+
+/* ══ CARTOON — cubefarm-style: chunky ink outlines, warm paper, Fredoka (light only) ══ */
+:root[data-nwf-theme="cartoon"] {
+  color-scheme: light;
+  --nwf-ink: #1f1d2b;
+  --nano-app: #bfe3ff !important; --nano-panel: #fffdf6 !important; --nano-raised: #ffffff !important;
+  --nano-inset: #f3eedf !important; --nano-hover: #ffe8d6 !important;
+  --nano-edge: #1f1d2b !important; --nano-edge-strong: #1f1d2b !important;
+  --nano-text: #1f1d2b !important; --nano-text-muted: #6c7086 !important; --nano-text-faint: #9a9cb0 !important;
+  --nano-accent: #ff8a5b !important; --nano-accent-strong: #e8643a !important; --nano-accent-2: #3a56d4 !important;
+  --nano-on-accent: #1f1d2b !important;
+  --nano-ok: #2dc653 !important; --nano-warn: #ffb703 !important; --nano-danger: #ef476f !important; --nano-info: #3a9bf0 !important;
+}
+:root[data-nwf-theme="cartoon"] body {
+  font-family: Fredoka, "Segoe UI", system-ui, sans-serif;
+  background:
+    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .55) 0 6rem, transparent 6.1rem),
+    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .45) 0 4rem, transparent 4.1rem),
+    var(--nano-app);
+  background-attachment: fixed;
+}
+:root[data-nwf-theme="cartoon"] .pc-heading { font-weight: 700; font-size: 1.9rem; }
+:root[data-nwf-theme="cartoon"] .pc-card,
+:root[data-nwf-theme="cartoon"] [data-grid-layout="cards"] table.pc-grid tr:has(> td[data-label]),
+:root[data-nwf-theme="cartoon"] .pc-modal,
+:root[data-nwf-theme="cartoon"] .pc-appview-frame {
+  border: 2px solid var(--nwf-ink); border-bottom-width: 5px; border-radius: 16px;
+  box-shadow: 0 6px 0 rgba(31, 29, 43, .12);
+}
+:root[data-nwf-theme="cartoon"] [data-grid-layout="cards"] table.pc-grid tr { padding: .8rem 1rem; margin: .9rem 0; }
+:root[data-nwf-theme="cartoon"] [data-grid-layout="cards"] table.pc-grid tr:has(> td[data-label]):hover {
+  transform: translateY(-2px) rotate(-.25deg); transition: transform .12s ease;
+}
+:root[data-nwf-theme="cartoon"] [data-grid-layout="cards"] table.pc-grid td[data-label]::before {
+  font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--nano-text-muted);
+}
+:root[data-nwf-theme="cartoon"] [data-grid-layout="cards"] table.pc-grid td.pc-mcell-primary { font-size: 1.1rem; font-weight: 700; }
+:root[data-nwf-theme="cartoon"] table.pc-grid th,
+:root[data-nwf-theme="cartoon"] table.pc-grid td { border-bottom-color: rgba(31, 29, 43, .15); }
+/* key-cap buttons */
+:root[data-nwf-theme="cartoon"] .pc-btn,
+:root[data-nwf-theme="cartoon"] .njf-actions button,
+:root[data-nwf-theme="cartoon"] .pc-tab,
+:root[data-nwf-theme="cartoon"] .pc-chevron {
+  border: 2px solid var(--nwf-ink); border-bottom-width: 4px; border-radius: 10px;
+  font-weight: 600; transition: transform .06s ease, border-bottom-width .06s ease;
+}
+:root[data-nwf-theme="cartoon"] .pc-btn:active:not(:disabled),
+:root[data-nwf-theme="cartoon"] .njf-actions button:active,
+:root[data-nwf-theme="cartoon"] .pc-tab:active {
+  transform: translateY(2px); border-bottom-width: 2px;
+}
+:root[data-nwf-theme="cartoon"] .pc-btn-ghost { background: #fff; color: var(--nwf-ink); }
+:root[data-nwf-theme="cartoon"] .pc-badge { border: 2px solid var(--nwf-ink); color: var(--nwf-ink); font-weight: 700; }
+:root[data-nwf-theme="cartoon"] .pc-pipe-stage { border-width: 2px; background: #fff; }
+:root[data-nwf-theme="cartoon"] .pc-pipe-done { background: #d9f7e1; }
+:root[data-nwf-theme="cartoon"] .pc-pipe-active { background: #ffe8d6; }
+:root[data-nwf-theme="cartoon"] .pc-pipe-conn { height: 3px; background: var(--nwf-ink); opacity: .25; }
+:root[data-nwf-theme="cartoon"] .pc-pipe-conn.filled { opacity: 1; background: var(--nano-ok); }
+/* the nav as a chunky toolbar */
+:root[data-nwf-theme="cartoon"] .pc-bar {
+  border: 2px solid var(--nwf-ink); border-bottom-width: 5px; border-radius: 16px;
+  background: var(--nano-panel); padding: .5rem .75rem;
+}
+:root[data-nwf-theme="cartoon"] .pc-bar.pc-sticky { margin-inline: 0; padding-inline: .75rem; top: .5rem; }
+:root[data-nwf-theme="cartoon"] .pc-nav-title { font-weight: 700; font-size: 1.1rem; }
+:root[data-nwf-theme="cartoon"] .pc-nav-link { border-radius: 10px; color: var(--nwf-ink); font-weight: 500; }
+:root[data-nwf-theme="cartoon"] .pc-nav-link.active { background: var(--nano-accent); color: var(--nwf-ink); box-shadow: inset 0 -3px 0 rgba(31, 29, 43, .25); }
+:root[data-nwf-theme="cartoon"] .pc-input,
+:root[data-nwf-theme="cartoon"] .pc-select,
+:root[data-nwf-theme="cartoon"] .pc-textarea,
+:root[data-nwf-theme="cartoon"] .pc-field input:not([type=checkbox]) { border: 2px solid var(--nwf-ink); border-radius: 10px; background: #fff; }
+:root[data-nwf-theme="cartoon"] .pc-md-code,
+:root[data-nwf-theme="cartoon"] .pc-md-pre code { font-family: "JetBrains Mono", Consolas, monospace; }
+:root[data-nwf-theme="cartoon"] .pc-link { color: #3a56d4; font-weight: 500; }
+:root[data-nwf-theme="cartoon"] .nwf-theme-picker { border: 2px solid var(--nwf-ink); border-bottom-width: 4px; }

package/pages/app.js

@@ -0,0 +1,89 @@
+// nano-workforce selectable themes (issue #840).
+//
+// Loaded by the urban page shell by convention (`pages/app.js`, nano-ide#578), after the
+// page runtime. It stamps the chosen theme onto <html data-nwf-theme="…"> — which every
+// rule in `pages/app.css` keys on — and mounts a small floating picker. The choice is
+// persisted per browser in localStorage.
+//
+// THEMES is the single source of truth for the theme list: the picker options, the
+// validation of a stored value, and the guard test (test/themes.test.ts, which checks every
+// non-default theme has rules in app.css) all derive from it.
+
+/** @type {ReadonlyArray<{ id: string, label: string, font?: string }>} */
+export const THEMES = Object.freeze([
+  { id: "classic", label: "Classic" },
+  { id: "soft", label: "Soft", font: "Nunito:wght@400;600;700" },
+  { id: "cartoon", label: "Cartoon", font: "Fredoka:wght@400;500;600;700" },
+]);
+
+export const DEFAULT_THEME = "classic";
+export const STORAGE_KEY = "nwf.theme";
+
+/** A stored/requested value → a known theme id (anything unknown falls back to the default). */
+export function resolveTheme(value) {
+  return THEMES.some((t) => t.id === value) ? value : DEFAULT_THEME;
+}
+
+function readStored() {
+  try {
+    return globalThis.localStorage?.getItem(STORAGE_KEY) ?? null;
+  } catch {
+    return null; // storage blocked (e.g. sandboxed iframe) → default
+  }
+}
+
+function writeStored(id) {
+  try {
+    globalThis.localStorage?.setItem(STORAGE_KEY, id);
+  } catch {
+    /* storage blocked → the choice just lasts for this page view */
+  }
+}
+
+function loadFont(doc, theme) {
+  if (!theme.font || doc.getElementById(`nwf-font-${theme.id}`)) return;
+  const link = doc.createElement("link");
+  link.id = `nwf-font-${theme.id}`;
+  link.rel = "stylesheet";
+  link.href = `https://fonts.googleapis.com/css2?family=${theme.font}&display=swap`;
+  doc.head.appendChild(link);
+}
+
+/** Apply a theme to the document (idempotent). */
+export function applyTheme(doc, value) {
+  const id = resolveTheme(value);
+  doc.documentElement.dataset.nwfTheme = id;
+  const theme = THEMES.find((t) => t.id === id);
+  if (theme) loadFont(doc, theme);
+  return id;
+}
+
+function mountPicker(doc) {
+  if (doc.getElementById("nwf-theme-picker")) return;
+  const wrap = doc.createElement("label");
+  wrap.id = "nwf-theme-picker";
+  wrap.className = "nwf-theme-picker";
+  wrap.title = "Theme";
+  const icon = doc.createElement("span");
+  icon.textContent = "🎨";
+  icon.setAttribute("aria-hidden", "true");
+  const select = doc.createElement("select");
+  select.setAttribute("aria-label", "Theme");
+  for (const t of THEMES) {
+    const opt = doc.createElement("option");
+    opt.value = t.id;
+    opt.textContent = t.label;
+    select.appendChild(opt);
+  }
+  select.value = doc.documentElement.dataset.nwfTheme ?? DEFAULT_THEME;
+  select.addEventListener("change", () => {
+    writeStored(applyTheme(doc, select.value));
+  });
+  wrap.append(icon, select);
+  doc.body.appendChild(wrap);
+}
+
+if (typeof document !== "undefined") {
+  applyTheme(document, readStored());
+  mountPicker(document);
+}

package/test/themes.test.ts

@@ -0,0 +1,75 @@
+// #840 — selectable themes: `pages/app.js` (theme registry + picker) and `pages/app.css` (the rules),
+// shipped by urban's app-asset convention (nano-ide#578).
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "node:test";
+
+// Comments stripped: rules only (the header comment describes the attribute generically).
+const css = readFileSync("pages/app.css", "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
+
+async function themes() {
+  return await import("../pages/app.js");
+}
+
+test("#840: the theme registry offers classic (default), soft and cartoon", async () => {
+  const { THEMES, DEFAULT_THEME } = await themes();
+  assert.deepEqual(
+    THEMES.map((t: { id: string }) => t.id),
+    ["classic", "soft", "cartoon"],
+  );
+  assert.equal(DEFAULT_THEME, "classic");
+});
+
+test("#840: every non-default theme in the registry has rules in app.css (no phantom theme)", async () => {
+  const { THEMES, DEFAULT_THEME } = await themes();
+  for (const t of THEMES) {
+    if (t.id === DEFAULT_THEME) continue;
+    assert.ok(css.includes(`[data-nwf-theme="${t.id}"]`), `app.css has no rules for theme "${t.id}"`);
+  }
+});
+
+test("#840: app.css only styles themes the registry knows (no orphan rules)", async () => {
+  const { THEMES } = await themes();
+  const known = new Set(THEMES.map((t: { id: string }) => t.id));
+  for (const m of css.matchAll(/data-nwf-theme="([^"]+)"/g)) {
+    assert.ok(known.has(m[1]), `app.css styles unknown theme "${m[1]}"`);
+  }
+});
+
+test("#840: theme token overrides are !important so they survive the console's inline :root tokens", () => {
+  for (const decl of css.matchAll(/(--nano-[a-z0-9-]+):\s*([^;]+);/g)) {
+    assert.match(decl[2], /!important\s*$/, `${decl[1]} override must be !important`);
+  }
+});
+
+test("#840: resolveTheme falls back to the default for unknown/blank values", async () => {
+  const { resolveTheme } = await themes();
+  assert.equal(resolveTheme("cartoon"), "cartoon");
+  assert.equal(resolveTheme("soft"), "soft");
+  assert.equal(resolveTheme("nope"), "classic");
+  assert.equal(resolveTheme(null), "classic");
+});
+
+test("#840: applyTheme stamps <html data-nwf-theme> and loads the theme's font once", async () => {
+  const { applyTheme } = await themes();
+  const appended: Array<{ id: string; href: string }> = [];
+  const byId = new Map<string, unknown>();
+  const doc = {
+    documentElement: { dataset: {} as Record<string, string> },
+    getElementById: (id: string) => byId.get(id) ?? null,
+    createElement: () => ({ id: "", rel: "", href: "" }),
+    head: {
+      appendChild: (n: { id: string; href: string }) => {
+        appended.push(n);
+        byId.set(n.id, n);
+      },
+    },
+  };
+  assert.equal(applyTheme(doc, "cartoon"), "cartoon");
+  assert.equal(doc.documentElement.dataset.nwfTheme, "cartoon");
+  applyTheme(doc, "cartoon");
+  assert.equal(appended.length, 1, "font link is added once");
+  assert.match(appended[0].href, /Fredoka/);
+  assert.equal(applyTheme(doc, "bogus"), "classic");
+  assert.equal(doc.documentElement.dataset.nwfTheme, "classic");
+});