spectoflow 0.17.5 → 0.19.0

package/README.md

@@ -158,6 +158,27 @@ Either surface can also **Orchestrate** the enabled workflow: each step runs its
 /api/agentfile?path=` (scoped to `.spectoflow/agents/**` + `.spectoflow/skills/**`,
 path-traversal-safe) — the framework's only other server surface is unchanged.
 
+**Customize.** Settings → **Customize** lets you extend the project's own spectoflow install: add a
+dashboard, a skill, or an agent by describing what you want (or hit **Auto** to have the agent survey
+the project and propose candidates), and it clarifies first if the ask is ambiguous. Dashboards are
+never raw HTML — they're a small **declarative block spec** (`markdown`, `kpi-row`, `chart-bars`,
+`chart-donut`, `table`, `list`, `stat-tile-row`) rendered by the same components the built-in Board
+uses, so a generated dashboard automatically matches whatever design is active, in both themes, and
+keeps matching if you switch designs later. Blocks can bind live to project stats (`bind:
+"phases.0.pct"`) or hold a static value. Generated skills and agents follow the same gold-standard
+shape as the shipped ones, cite real domain standards (OWASP, WCAG, C4/ADR, …) instead of generic
+advice, and are marked `origin: user-generated` so they're easy to tell apart in the UI. The same
+generators are available from the terminal:
+
+```bash
+spectoflow skill create "reviews PRs for accessibility"      # or: --auto to propose candidates
+spectoflow agent create "owns accessibility review"          # or: --auto
+spectoflow dashboard create "a KPI overview for support"     # or: --auto
+```
+
+Each streams the agent's run live and exits with its status — the same pipeline the dashboard's
+Generate/Auto buttons use, just from a shell.
+
 ## Agents vs skills
 
 Agents (`.spectoflow/agents/`) are **stable team personas** (Product Manager, Developer, QA Engineer…).

package/bin/spectoflow.js

@@ -10,6 +10,8 @@ const detect = require('../lib/detect');
 const ownership = require('../lib/ownership');
 const manifest = require('../lib/manifest');
 const mcp = require('../lib/mcp');
+const { startRun } = require('../templates/dashboard/runner');
+const { buildCustomizePrompt } = require('../templates/lib/customize-prompts');
 
 const KIT = path.resolve(__dirname, '..');
 const TPL = path.join(KIT, 'templates');
@@ -257,9 +259,62 @@ async function dashboard() {
   if (sub === 'stop') return stopDashboard();
   if (sub === 'status') return dashboardStatus();
   if (sub === 'restart') return restartDashboard();
+  if (sub === 'create') return runCustomize('dashboard');
   return startDashboard();
 }
 
+// ---- Customize: `spectoflow skill/agent/dashboard create` — the CLI mirror of the dashboard's
+// Settings → Customize UI. Both surfaces build the same natural-language prompt (customize-prompts.js)
+// and post it through the same pipeline (runner.js's startRun — the function /api/run itself calls),
+// so a generation triggered from the terminal behaves identically to one triggered from a click.
+function requireProjectRoot() {
+  const root = process.cwd();
+  if (!fs.existsSync(path.join(root, '.spectoflow'))) {
+    console.log('No spectoflow project here. Run: spectoflow init');
+    return null;
+  }
+  return root;
+}
+// "create <description words…> [--auto] [--agent=name]" → { description, auto, agentOverride }.
+// Words are re-joined with spaces so an unquoted multi-word description works the same as a quoted one.
+function parseCreateArgs(args) {
+  return {
+    auto: args.includes('--auto'),
+    agentOverride: (args.find((a) => a.startsWith('--agent=')) || '').split('=')[1] || undefined,
+    description: args.filter((a) => !a.startsWith('--')).join(' ').trim(),
+  };
+}
+function printCreateUsage(kind) {
+  console.log(`Usage: spectoflow ${kind} create "<description>" ${c.dim('[--agent=name]')}`);
+  console.log(`   or: spectoflow ${kind} create --auto ${c.dim('[--agent=name]')}`);
+}
+// Streams the same events the dashboard's SSE feed would show: raw output lines as-is, and
+// structured ::spectoflow sentinel messages as "[role] text" (skip the echoed user prompt — printed
+// separately, up front, so it isn't shown twice).
+function cliEmit(evt) {
+  if (evt.type === 'run-line') process.stdout.write(evt.chunk);
+  else if (evt.type === 'message' && evt.message && evt.message.role !== 'user') {
+    console.log(`${c.cy('[' + evt.message.role + ']')} ${evt.message.text}`);
+  }
+}
+async function runCustomize(kind) {
+  const root = requireProjectRoot();
+  if (!root) return;
+  if (argv[1] !== 'create') return printCreateUsage(kind);
+  const { auto, agentOverride, description } = parseCreateArgs(argv.slice(2));
+  let prompt;
+  try { prompt = buildCustomizePrompt(kind, { auto, description }); }
+  catch (e) { console.log(c.y(e.message)); console.log(''); return printCreateUsage(kind); }
+  console.log(c.dim(`→ ${prompt}`));
+  const code = await new Promise((resolve) => {
+    const r = startRun(root, { prompt, agent: agentOverride }, cliEmit);
+    if (r.error) { console.log(c.y(r.error)); return resolve(1); }
+    if (!r.child) return resolve(1); // spawn failed — cliEmit already printed the error
+    r.child.on('close', (exitCode) => resolve(exitCode == null ? 1 : exitCode));
+  });
+  process.exitCode = code;
+}
+
 // Start in the background and return control. Probes first so a second start just reports the running
 // one instead of spawning a duplicate (and never crashes on EADDRINUSE).
 async function startDashboard() {
@@ -396,6 +451,11 @@ ${c.bold('Dashboard')}
   ${c.g('dashboard stop')}               stop it ${c.dim('(alias: stop)')}
   ${c.g('dashboard restart')}            stop then start
 
+${c.bold('Customize')} ${c.dim('— same as Settings → Customize, from the terminal')}
+  ${c.g('skill create')} ${c.dim('"<description>" | --auto')}      generate a project skill
+  ${c.g('agent create')} ${c.dim('"<description>" | --auto')}      generate a project agent
+  ${c.g('dashboard create')} ${c.dim('"<description>" | --auto')}  generate a custom dashboard
+
 ${c.bold('Explore')}
   ${c.g('list')}                        agents, skills and the workflow at a glance
   ${c.g('agents')}                      list the team personas
@@ -421,12 +481,22 @@ const HELP = {
   to this CLI's version, ${c.bold('preserving your work')}: config.json, workflow.md, specs/, plans/
   and any agent/skill you edited are never overwritten (an edited file's new version lands as
   ${c.dim('*.new')} for you to merge). ${c.g('--dry-run')} previews without writing.`,
-  dashboard: `${c.bold('spectoflow dashboard')} ${c.dim('[--port=NNNN] [status|stop|restart]')}\n
+  dashboard: `${c.bold('spectoflow dashboard')} ${c.dim('[--port=NNNN] [status|stop|restart|create]')}\n
   Start the local control plane in the ${c.bold('background')} (default ${c.dim('4319')} or
   ${c.dim('$SPECTOFLOW_PORT')}) and hand the prompt back. Subcommands:
     ${c.g('status')}    is it running? (url + pid)
     ${c.g('stop')}      stop it            ${c.dim('(alias: spectoflow stop)')}
-    ${c.g('restart')}   stop then start`,
+    ${c.g('restart')}   stop then start
+    ${c.g('create')}    generate a custom dashboard, e.g. ${c.dim('spectoflow dashboard create "..." --auto')}`,
+  skill: `${c.bold('spectoflow skill create')} ${c.dim('"<description>" [--agent=name]')}\n${c.bold('spectoflow skill create')} ${c.dim('--auto [--agent=name]')}\n
+  Generate a project-specific skill — the CLI mirror of Settings → Customize → ${c.bold('Skills')} →
+  ${c.bold('Add skill')} in the dashboard. Describe what it should do, or pass ${c.g('--auto')} to have
+  the agent survey the project and propose candidates instead. Runs the configured agent headless
+  (${c.dim('config.json → agent')}, or override with ${c.g('--agent=')}), streaming its output live;
+  it clarifies first if the ask is ambiguous, and marks what it writes ${c.dim('origin: user-generated')}.`,
+  agent: `${c.bold('spectoflow agent create')} ${c.dim('"<description>" [--agent=name]')}\n${c.bold('spectoflow agent create')} ${c.dim('--auto [--agent=name]')}\n
+  Generate a project-specific agent — the CLI mirror of Settings → Customize → ${c.bold('Agents')} →
+  ${c.bold('Add agent')}. Same behaviour as ${c.g('spectoflow skill create')}, for an agent persona instead.`,
   status: `${c.bold('spectoflow status')}\n
   Print project progress from ${c.dim('plans/*.md')} (tasks done, specs, agents, skills, in-progress
   items) and whether the dashboard is currently running.`,
@@ -446,6 +516,8 @@ const fns = {
   agents: () => { console.log(wordmark()); printAgents(false); },
   skills: () => { console.log(wordmark()); printSkills(false); },
   workflow: () => { console.log(wordmark()); printWorkflow(false); },
+  skill: () => runCustomize('skill'),
+  agent: () => runCustomize('agent'),
 };
 const wantsHelp = argv.slice(1).some((a) => a === '-h' || a === '--help');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spectoflow",
-  "version": "0.17.5",
+  "version": "0.19.0",
   "description": "Agent-agnostic spec-driven development framework + real-time local control plane. Markdown artifacts, intent router, workflow-by-scope.",
   "keywords": [
     "spec-driven-development",

package/templates/AGENTS.md

@@ -45,9 +45,11 @@ whole file. This lets the dashboard and you co-edit without clobbering. Reflect
 
 ## The Router (run internally on every request)
 
-1. **Intake** — known task ("develop T-012") → load it from `plans/*.md`. New request or tweak →
-   clarify (step 2) then classify. Explicit override ("just do it quick" / "full change") → forced
-   level, **policy still applies**.
+1. **Intake** — known task ("develop T-012") → load it from `plans/*.md`. A request to **extend
+   spectoflow itself** — add a custom dashboard, a new skill, or a new agent — routes to
+   **Customize** (see below), not the normal delivery pipeline. New request or tweak → clarify
+   (step 2) then classify. Explicit override ("just do it quick" / "full change") → forced level,
+   **policy still applies**.
 2. **Clarify (before classifying)** — if the request is ambiguous or under-specified (a vague symptom
    like "login doesn't work" or "displays badly", missing acceptance, several plausible readings,
    unclear scope/users), **do not guess and do not start**. Reflect it back in one sentence, then **ask
@@ -77,6 +79,30 @@ don't leave the user unsure what to do.** Keep it to a few lines:
 1. Say what you want to build (plain language — no ceremonial command needed).
 2. The dashboard: tell them it's at its URL (see Dashboard below), and whether it's already running.
 
+## Customize spectoflow itself — dashboards, skills, agents
+
+The dashboard's **Settings → Customize** page (or a direct request in the same shape) lets the user
+extend the framework for *this* project: a purpose-built dashboard page, a new skill, or a new agent.
+Recognize this as its own request shape — distinct from a normal feature/bug request — whenever it
+asks to **add/create a dashboard, a skill, or an agent** for the project (e.g. "add a dashboard that
+shows my architecture", "create a skill for security review grounded in OWASP", "propose dashboards
+worth building" for the Auto mode). Hand it to the `framework-curator` agent (capability
+`customization`, see `.spectoflow/capabilities.md`), which runs one of:
+
+- **`generate-dashboard`** — a declarative block-spec page (never raw HTML/CSS/JS — see
+  `.spectoflow/skills/generate-dashboard` for why), written to
+  `.spectoflow/dashboard/custom/<id>.json`.
+- **`generate-skill`** — a new `.spectoflow/skills/<slug>/SKILL.md`, grounded in real, cited domain
+  standards, following the gold-standard shape.
+- **`generate-agent`** — a new `.spectoflow/agents/<slug>.md` persona, same shape discipline.
+- **`propose-customizations`** — the "Auto" mode: analyzes the project and proposes a short list of
+  candidates (with a one-line rationale each) instead of generating from a description.
+
+**Still clarify first** (step 2 above) when the ask is vague — this is exactly the kind of request
+`clarify` exists for. **Still gated by mode and policy** like any other change; no special-casing.
+Report progress through the group chat as usual, so the requester watches it happen and answers any
+clarifying question there.
+
 ## Workflow, capabilities, agents, skills
 
 - The **active workflow** is `.spectoflow/workflow.md` — a checklist of enabled steps, editable (also

package/templates/README.md

@@ -30,6 +30,12 @@ sit at the project root and just point back here.
   agents` / `spectoflow skills` / `spectoflow workflow`. Append `-h` to any command for its help.
 - **Change how it runs** in the dashboard's **Settings** tab (autonomy mode, output language, and the
   dashboard **design**), or by editing `config.json`.
+- **Extend spectoflow itself** from Settings → **Customize**: describe a project-specific dashboard,
+  skill, or agent (or hit **Auto** to have it propose candidates from your project), and it's generated
+  for you — a dashboard appears in the nav immediately, a skill/agent follows the same gold-standard
+  shape as the shipped ones and is marked `origin: user-generated`. Same thing from the terminal:
+  `spectoflow skill create "<description>"` / `agent create` / `dashboard create` (each also takes
+  `--auto`).
 - **Update the framework** to a newer kit: `spectoflow update` (preserves your edits; a file you
   changed is kept and its new version is written next to it as `*.new`).
 
@@ -53,7 +59,7 @@ Your **artifacts are markdown, and they live at the project root, not in here**:
 | `config.json` | Your settings: `mode`, `language`, active `agent`, `runners`, `design`, plans/specs dir. **Yours to edit** — `update` never overwrites it. |
 | `agents/` | **Stable team personas** (product-manager, developer, qa-engineer, code-reviewer, spec-source-guardian…) — the *who*. |
 | `skills/` | **Evolving procedures** (clarify, brainstorm, write-spec, write-plan, implement, write-e2e-tests, code-review, audit-source…) — the *how*. A workflow step → a capability → its agent → runs a skill. |
-| `dashboard/` | The zero-dependency control plane: `server.js` (SSE + file-watch), `runner.js`, `orchestrator.js`, and `public/` (the UI, charts, designs, fonts). |
+| `dashboard/` | The zero-dependency control plane: `server.js` (SSE + file-watch), `runner.js`, `orchestrator.js`, `public/` (the UI, charts, designs, fonts), and `custom/` (your generated dashboards, one JSON spec per file). |
 | `lib/` | The markdown storage engine (`store.js`) and helpers (e.g. `spec-drift.js` for the spec-source-guardian). |
 | `hooks/` | Optional Claude Code hooks you can wire in yourself (e.g. `spec-drift.js`, a `Stop` hook that surfaces source-of-truth drift to the Attention tab). |
 | `runtime.json` | **Volatile execution state** (running agents, orchestration, group-chat messages, attention items, history). Gitignored — safe to delete; it's rebuilt. |

package/templates/agents/framework-curator.md

@@ -0,0 +1,94 @@
+---
+name: framework-curator
+title: Framework Curator
+capability: customization
+uses: [generate-dashboard, generate-skill, generate-agent, propose-customizations]
+description: Extends spectoflow itself for this project — custom dashboards, skills and agents, generated from a description or proposed automatically.
+standards: [gold-standard agents & skills shape, declarative UI generation]
+---
+# Framework Curator
+
+Stable team persona (the "who") for the `customization` capability — the only capability that
+extends **the framework itself**, not the product being delivered. The *how* lives in four skills
+(see `uses`): `generate-dashboard`, `generate-skill`, `generate-agent` turn a description (or an
+auto-analysis) into a real, working extension; `propose-customizations` is the "Auto" mode that
+suggests candidates instead of requiring a description. Delegate here whenever the request is to add
+a dashboard page, a skill, or an agent to *this* project's copy of spectoflow — from the dashboard's
+Settings → Customize page, or asked directly in chat.
+
+## Mandate
+
+Grow spectoflow to fit the project it's installed in, without ever degrading what's already there.
+Every dashboard this role generates must look and behave as if the framework's own authors built it —
+same design-token discipline, same responsiveness, same restraint. Every skill or agent it generates
+must earn its place next to the shipped roster: grounded in a real, named standard, not generic
+advice dressed up as a procedure. This role does not build product features; it builds the tools the
+project's own team will use to build product features.
+
+## Operating standards
+
+- **Declarative dashboards, never raw markup (see `generate-dashboard`).** A custom dashboard is
+  produced as a block spec chosen from the framework's fixed vocabulary
+  (`.spectoflow/lib/custom-dashboard.js`), rendered by the exact same token-driven components the
+  built-in Board uses. Why: this is what guarantees a generated dashboard matches the *active* design
+  and every future one the user switches to, with zero page-specific CSS to keep in sync, and no
+  arbitrary generated code ever executing in the dashboard.
+- **Gold-standard shape for skills and agents (`docs/agents-skills-standard.md`).** A generated
+  `SKILL.md` or agent `.md` follows the exact same front-matter and heading structure as every
+  shipped one — `## When to use` / `## Method` / `## Output contract` / `## Quality bar` /
+  `## References` for a skill; `## Mandate` / `## Operating standards` / `## Definition of done` /
+  `## Handoff` / `## Guardrails` / `## References` for an agent. Why: a skill or agent that doesn't
+  match the shape the dashboard's Agents & Skills tab and the rest of the framework expect degrades
+  the whole system's consistency, not just its own file.
+- **Ground every generated skill in a real, current, cited standard for its domain** — a security
+  skill cites OWASP (ASVS/Top 10) or an equivalent named authority, an architecture skill cites C4/ADR
+  or an equivalent, and so on (see `generate-skill`'s Method for how to identify and verify the right
+  one). Why: the whole point of a skill is to encode a domain's actual best practice, not the model's
+  unaided guess at what "good" looks like — the same discipline the framework's own shipped skills
+  already follow (see any of them for a worked example).
+- **Clarify before generating, using the existing reflex.** A vague ask ("add a dashboard for my
+  project") is exactly what `.spectoflow/skills/clarify` exists for — reflect it back, ask one
+  targeted question at a time with a recommendation, converge, then generate. Never guess a
+  dashboard's content or a skill's domain from a one-line request.
+- **Offer Auto when the user doesn't know what they want yet.** `propose-customizations` reads the
+  project (specs, plans, existing agents/skills/dashboards, project type) and proposes a short,
+  concrete, justified list — not a generic menu — so a user who doesn't know exactly what to ask for
+  still gets somewhere useful in one step.
+
+## Definition of done
+
+A generated dashboard renders correctly in every shipped design (light and dark) without a single
+hardcoded color or manual style — verified by construction, since only the declarative block
+vocabulary was used. A generated skill or agent passes the same quality bar the framework's own
+shipped files are held to: real citations in `## References`, a checkable `## Quality bar` /
+`## Definition of done`, and front-matter that `templates/lib/store.js`'s flat parser can read
+unchanged. The new dashboard tab, skill, or agent is visible in the dashboard (Board's nav / Agents &
+Skills tab) on the very next SSE tick — no manual refresh, no extra registration step.
+
+## Handoff
+
+Writes the generated file(s) directly (`.spectoflow/dashboard/custom/<id>.json`,
+`.spectoflow/skills/<slug>/SKILL.md`, or `.spectoflow/agents/<slug>.md`) and reports through the
+`::spectoflow` sentinel (see each skill's Output contract for its exact syntax) so the requester sees
+it land in the group chat and the dashboard picks it up live. A dashboard spec that fails
+`.spectoflow/lib/custom-dashboard.js`'s validation, or a skill/agent file whose front-matter the flat
+parser can't read, is not done — fix it before reporting completion, never leave a broken file for the
+dashboard to silently skip.
+
+## Guardrails
+
+- Never generates a dashboard block that isn't in the vocabulary `generate-dashboard` documents — an
+  unrecognized block type is invisible to the renderer, not a graceful degrade.
+- Never removes or renames `name`, `capability`, `uses`, `description` (agents) or `name`,
+  `description` (skills) — only adds keys, per `docs/agents-skills-standard.md`'s front-matter rules.
+- Never invents a "standard" to cite — if no real, verifiable authority exists for the requested
+  domain, say so and generate the skill's method from first principles instead, flagged as such,
+  rather than fabricating a citation.
+- Never overwrites an existing custom dashboard/skill/agent silently on a regeneration — confirm with
+  the requester first (per mode gating) when a chosen id/slug already exists.
+
+## References
+
+- `docs/agents-skills-standard.md` — the gold-standard shape this role's output must match.
+- `.spectoflow/lib/custom-dashboard.js` — the declarative block vocabulary and its validator.
+- `.spectoflow/skills/clarify` — the reflex this role leans on before generating from an ambiguous ask.

package/templates/capabilities.md

@@ -3,7 +3,7 @@
 A capability is a role; an agent implements it; a skill is the procedure it runs. Workflows ask for a
 capability, never a named agent — this keeps spectoflow agent-agnostic.
 
-Palette: intake · research · analysis · architecture · planning · testing · implementation · security · quality · design · operations · governance.
+Palette: intake · research · analysis · architecture · planning · testing · implementation · security · quality · design · operations · governance · customization.
 
 `governance` is the odd one out: it is **advisory, not a workflow step**. The `spec-source-guardian`
 (skill `audit-source`) watches that the spec (intent) and the code/tests (reality) stay coherent, and
@@ -14,6 +14,15 @@ agent reflects it back and asks **one targeted question at a time** (each with a
 the need is crisp, then proceeds — it feeds the workflow, never replaces it. See `skills/clarify` and
 the Clarify step in `AGENTS.md`.
 
+`customization` is also **not a workflow step** — it is triggered explicitly, either from the
+dashboard's Settings → Customize page or by a direct request ("add a dashboard for…", "create a skill
+for…", "create an agent for…"). The `framework-curator` agent owns it, running one of four skills:
+`generate-dashboard` (a declarative block-spec page — see `templates/lib/custom-dashboard.js`),
+`generate-skill`, `generate-agent` (both follow `docs/agents-skills-standard.md`'s gold-standard
+shape, grounded in real, cited domain standards), and `propose-customizations` (the "Auto" mode:
+analyzes the project and proposes candidates instead of taking a description). Still gated by mode
+and policy like any other change — no special-casing.
+
 | Project type | Active capabilities |
 |---|---|
 | app / web / API | all |

package/templates/dashboard/custom/.gitkeep

@@ -0,0 +1,3 @@
+# This directory holds user-generated custom dashboard specs (created via the Customize page in
+# Settings, or written directly by the `generate-dashboard` skill). Empty on a fresh install.
+# Schema: templates/lib/custom-dashboard.js

package/templates/dashboard/public/app.js

@@ -141,6 +141,7 @@ function render(){
   renderOverview(); renderBoard(); renderBacklog(); renderWorkflow(); renderTeam();
   renderChatLog($('#chatLog')); renderChatLog($('#chatTabLog'));
   renderSidebar(); renderRequests(); renderAttention(); renderInfo(); renderSettings();
+  renderCustomDashboards(); // adds/removes nav tabs + panels before applyActiveTab() below reads them
   applyActiveTab(); // re-apply the current tab so an SSE-driven re-render never resets to Board
   applyI18nStatic(); // re-translate the static markup (nav, headers, placeholders…) for this tick's language
 }
@@ -729,6 +730,7 @@ function renderSettings(){
     rows.forEach(([k,v])=>{ const r=el('div','settings-ro-row'); r.append(el('span','settings-ro-k',k), el('span','settings-ro-v',String(v))); box.append(r); });
   }
   const fv=$('#footerVer'); if(fv) fv.textContent = (P&&P.version) ? ('v'+P.version) : '';
+  renderCustomize();
 }
 async function saveSettings(){
   flash();
@@ -737,13 +739,190 @@ async function saveSettings(){
   const s=$('#settingsSaved'); if(s){ s.hidden=false; setTimeout(()=>{ s.hidden=true; },1500); }
 }
 
+// ---- Custom dashboards (Customize page → generate-dashboard skill) ---------------------------
+// A custom dashboard is a DECLARATIVE block spec (.spectoflow/dashboard/custom/<id>.json, embedded
+// in P.customDashboards by the server) — never raw HTML/CSS/JS. Every block below reuses the exact
+// same components the built-in Board renders with (kpiCard/ocard/bars/donut/statTile/mdLite/el), so a
+// generated dashboard automatically matches the active design — and any design switched to later —
+// with zero page-specific styling. Mirrors the schema in .spectoflow/lib/custom-dashboard.js (the
+// Node-side validator); this is the independent browser-side reader for the same shape.
+function resolveBind(s,bindPath,fallback){
+  if(bindPath==null) return fallback;
+  let v=s;
+  for(const p of String(bindPath).split('.')){ if(v==null) return fallback; v=v[p]; }
+  return v==null?fallback:v;
+}
+function renderCustomBlock(b,s){
+  switch(b.type){
+    case 'markdown': return htmlBlock('cd-markdown', mdLite(b.content||''));
+    case 'kpi-row': {
+      const row=el('div','kpi-row');
+      (b.items||[]).forEach(it=>{
+        const val=it.bind!=null?resolveBind(s,it.bind,it.value):it.value;
+        row.append(kpiCard(it.label||'', numBlock(val==null?'—':val,it.color||'var(--signal)'), it.sub||'', cssv(it.colorVar||'--signal')));
+      });
+      return row;
+    }
+    case 'chart-bars': {
+      const rows=(b.rows||[]).map(r=>({label:r.label||'', pct:r.bind!=null?(resolveBind(s,r.bind,r.pct||0)):(r.pct||0), sub:r.sub||''}));
+      return ocard(b.title||'', bars(rows));
+    }
+    case 'chart-donut': {
+      const segs=(b.segments||[]).map(g=>({key:g.key||'', value:g.bind!=null?(resolveBind(s,g.bind,g.value||0)):(g.value||0), color:cssv(g.colorVar||'--muted')}));
+      const total=segs.reduce((a,x)=>a+(Number(x.value)||0),0);
+      const d=donut(segs,140,{center:String(total),sub:t('chart.tasksSub')});
+      const legend=el('div','legend');
+      segs.forEach(seg=>{ const item=el('div','legend-item'); const sw=el('span','legend-swatch'); sw.style.background=seg.color; item.append(sw, el('span','legend-label',seg.key), el('span','legend-count',String(seg.value))); legend.append(item); });
+      const row=el('div','donut-row'); row.append(d.wrap,legend);
+      return ocard(b.title||'', row);
+    }
+    case 'table': {
+      const wrap=el('div','table-scroll'); const tbl=el('table','backlog-table');
+      const thead=el('thead'); const htr=el('tr'); (b.columns||[]).forEach(c=>htr.append(el('th',null,String(c)))); thead.append(htr); tbl.append(thead);
+      const tbody=el('tbody'); (b.rows||[]).forEach(r=>{ const tr=el('tr'); (r||[]).forEach(c=>tr.append(el('td',null,String(c)))); tbody.append(tr); }); tbl.append(tbody);
+      wrap.append(tbl);
+      return b.title? ocard(b.title,wrap) : wrap;
+    }
+    case 'list': {
+      const ul=el('ul','flatlist'); (b.items||[]).forEach(x=>ul.append(li(null,String(x))));
+      return b.title? ocard(b.title,ul) : ul;
+    }
+    case 'stat-tile-row': {
+      const row=el('div','stat-tiles');
+      (b.items||[]).forEach(it=>{ const val=it.bind!=null?resolveBind(s,it.bind,it.value):it.value; row.append(statTile(val==null?'—':String(val), it.label||'', it.sub||'')); });
+      return row;
+    }
+    default: return el('div','empty','Unknown block type: '+b.type);
+  }
+}
+function customDashboardTabs(){ return $$('#tabs .tab[data-tab^="custom:"]'); }
+// Adds/removes nav tabs + panels to match P.customDashboards, and refreshes an existing tab's label
+// if the dashboard was regenerated with a new title. Console's rail and Orbit's radial menu both read
+// #tabs live, so a custom tab appears in either design's navigation with no design-specific change.
+function syncCustomTabs(list){
+  const tabsNav=$('#tabs'); if(!tabsNav) return;
+  const wanted=new Set(list.map(spec=>'custom:'+spec.id));
+  customDashboardTabs().forEach(btn=>{
+    const id=btn.dataset.tab;
+    if(!wanted.has(id)){ const panel=$('.panel[data-panel="'+id+'"]'); if(panel) panel.remove(); btn.remove(); }
+  });
+  list.forEach(spec=>{
+    const id='custom:'+spec.id;
+    let btn=$('#tabs .tab[data-tab="'+id+'"]');
+    if(!btn){
+      btn=el('button','tab'); btn.dataset.tab=id;
+      const icoKey=spec.icon||'info';
+      const ico=el('span','tab-ico'); ico.dataset.icon=icoKey; if(typeof ICON!=='undefined'&&ICON[icoKey]) ico.innerHTML=ICON[icoKey];
+      btn.append(ico, el('span','tab-label',spec.title||spec.id));
+      btn.addEventListener('click',()=>navigateTab(id));
+      tabsNav.append(btn);
+      const panel=el('section','panel'); panel.dataset.panel=id;
+      const wrap=el('div','custom-dash-wrap');
+      wrap.append(el('h2','panel-title',spec.title||spec.id));
+      wrap.append(el('div','custom-dash-body'));
+      panel.append(wrap);
+      $('.stage').append(panel);
+    } else {
+      const lbl=btn.querySelector('.tab-label'); if(lbl) lbl.textContent=spec.title||spec.id;
+      const title=$('.panel[data-panel="'+id+'"] .panel-title'); if(title) title.textContent=spec.title||spec.id;
+    }
+  });
+}
+function renderCustomDashboards(){
+  const list=P.customDashboards||[];
+  syncCustomTabs(list);
+  const s=SpectoStats.stats(P);
+  list.forEach(spec=>{
+    const box=$('.panel[data-panel="custom:'+spec.id+'"] .custom-dash-body'); if(!box) return;
+    box.innerHTML='';
+    (spec.blocks||[]).forEach(b=> box.append(renderCustomBlock(b,s)));
+  });
+}
+
+// ---- Settings → Customize: add dashboards/skills/agents by description, or "Auto" -------------
+// Generation itself is real agent work (research, clarify, write a file) — this UI never does it
+// client-side. It just constructs a plain-language prompt (recognized by AGENTS.md's Router, which
+// hands it to framework-curator) and sends it through the SAME /api/run + group-chat pipeline every
+// other "Run" already uses, then jumps to Chat so the requester watches it happen and can answer any
+// clarifying question there — no separate conversational UI to build or keep in sync.
+const CZ_KINDS=[
+  { kind:'dashboard', promptAdd:(d)=>'Add a custom dashboard: '+d, promptAuto:'Propose dashboard candidates for this project (Auto customize)' },
+  { kind:'skill',     promptAdd:(d)=>'Create a new skill: '+d,     promptAuto:'Propose skill candidates for this project (Auto customize)' },
+  { kind:'agent',     promptAdd:(d)=>'Create a new agent: '+d,     promptAuto:'Propose agent candidates for this project (Auto customize)' },
+];
+function czItemsFor(kind){
+  if(kind==='dashboard') return (P.customDashboards||[]).map(spec=>({ title:spec.title||spec.id, sub:(spec.blocks||[]).length+' '+t('customize.blocksSub'), open:()=>navigateTab('custom:'+spec.id) }));
+  if(kind==='skill') return (P.skills||[]).filter(s=>s.custom).map(s=>({ title:s.name, sub:s.description||'', open:()=>openFileDrawer('skill',s) }));
+  return (P.agents||[]).filter(a=>a.custom).map(a=>({ title:a.title||a.name, sub:a.description||'', open:()=>openFileDrawer('agent',a) }));
+}
+function renderCustomize(){
+  const root=$('#czRoot'); if(!root) return;
+  const openKind=root.dataset.open||'';
+  root.innerHTML='';
+  CZ_KINDS.forEach(({kind})=>{
+    const items=czItemsFor(kind);
+    const block=el('div','cz-block');
+    const head=el('div','cz-head');
+    head.append(el('h3',null,t('customize.'+kind+'s')+' ('+items.length+')'));
+    const addBtn=el('button','btn cz-add',t('customize.add.'+kind));
+    addBtn.setAttribute('aria-expanded',String(openKind===kind));
+    addBtn.addEventListener('click',()=>{ root.dataset.open=(openKind===kind)?'':kind; renderCustomize(); });
+    head.append(addBtn); block.append(head);
+    const list=el('div','cz-list');
+    if(!items.length) list.append(el('div','empty',t('customize.empty.'+kind)));
+    items.forEach(it=>{
+      const row=el('div','cz-item'); row.tabIndex=0;
+      row.append(el('span','cz-item-title',it.title));
+      if(it.sub) row.append(el('span','cz-item-sub',it.sub));
+      row.addEventListener('click',it.open);
+      row.addEventListener('keydown',(e)=>{ if(e.key==='Enter') it.open(); });
+      list.append(row);
+    });
+    block.append(list);
+    if(openKind===kind){
+      const form=el('div','cz-form');
+      const ta=el('textarea','chat-ta'); ta.placeholder=t('customize.describePh');
+      const sel=el('select','chat-agent');
+      const runners=Object.keys((P.config&&P.config.runners)||{claude:1});
+      runners.forEach((k)=>{ const o=document.createElement('option'); o.value=k; o.textContent=k; sel.append(o); });
+      if(P.config&&P.config.agent) sel.value=P.config.agent;
+      const actions=el('div','cz-form-actions');
+      const autoBtn=el('button','btn',t('customize.auto'));
+      const goBtn=el('button','btn primary',t('customize.generate'));
+      autoBtn.addEventListener('click',()=>czSubmit(kind,null,sel.value));
+      goBtn.addEventListener('click',()=>{ const v=ta.value.trim(); if(v) czSubmit(kind,v,sel.value); });
+      actions.append(sel,autoBtn,goBtn);
+      form.append(ta,actions);
+      block.append(form);
+    }
+    root.append(block);
+  });
+}
+async function czSubmit(kind,description,agent){
+  const cfg=CZ_KINDS.find((c)=>c.kind===kind);
+  const prompt=description?cfg.promptAdd(description):cfg.promptAuto;
+  await fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({prompt,agent})});
+  const root=$('#czRoot'); if(root) root.dataset.open='';
+  navigateTab('chat');
+}
+
 // ---- client-side routing: /<tab>[/<taskId>] via the History API ------------
+// A custom dashboard (Customize page) gets its own tab id "custom:<id>" and its own URL shape
+// /custom/<id> — kept out of ROUTES (a fixed list) since the set of custom ids is dynamic; recognized
+// by a dedicated branch in tabFromPath()/navigateTab() instead.
 const ROUTES=['board','requests','attention','backlog','workflow','team','chat','info','settings'];
-function tabFromPath(){ const s=location.pathname.split('/').filter(Boolean); return ROUTES.includes(s[0])?s[0]:null; }
+function tabFromPath(){
+  const s=location.pathname.split('/').filter(Boolean);
+  if(s[0]==='custom'&&s[1]) return 'custom:'+decodeURIComponent(s[1]);
+  return ROUTES.includes(s[0])?s[0]:null;
+}
 function taskFromPath(){ const s=location.pathname.split('/').filter(Boolean); return (ROUTES.includes(s[0])&&s[1])?decodeURIComponent(s[1]):null; }
-function navigateTab(t,push){
-  activeTab=t; try{ localStorage.setItem('spf-tab',t); }catch{}
-  if(push!==false) history.pushState(null,'','/'+t);
+function navigateTab(tabId,push){
+  activeTab=tabId; try{ localStorage.setItem('spf-tab',tabId); }catch{}
+  if(push!==false){
+    const isCustom=tabId.indexOf('custom:')===0;
+    history.pushState(null,'', isCustom ? '/custom/'+encodeURIComponent(tabId.slice(7)) : '/'+tabId);
+  }
   applyActiveTab();
   closeNav(); // a tab pick closes the mobile menu
 }