spectoflow 0.17.5 → 0.18.0

package/README.md

@@ -158,6 +158,17 @@ 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.
+
 ## Agents vs skills
 
 Agents (`.spectoflow/agents/`) are **stable team personas** (Product Manager, Developer, QA Engineer…).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spectoflow",
-  "version": "0.17.5",
+  "version": "0.18.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,10 @@ 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`.
 - **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 +57,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
 }

package/templates/dashboard/public/i18n.js

@@ -107,6 +107,11 @@ en: {
   'task.failingPassing':'{f} failing, {p} passing','task.comments':'Comments','task.noComments':'No comments.',
   'task.addCommentPlaceholder':'Add a comment, a remark, feedback…',
   'task.toAnalyzeHint':'"To analyze" moves the task back so the agent picks it up next round.',
+  'customize.title':'Customize','customize.sub':'Add project-specific dashboards, skills and agents — describe what you want, or let Auto propose candidates from this project.',
+  'customize.dashboards':'Dashboards','customize.skills':'Skills','customize.agents':'Agents',
+  'customize.add.dashboard':'Add dashboard','customize.add.skill':'Add skill','customize.add.agent':'Add agent',
+  'customize.empty.dashboard':'No custom dashboards yet.','customize.empty.skill':'No custom skills yet.','customize.empty.agent':'No custom agents yet.',
+  'customize.describePh':'Describe what you want…','customize.auto':'Auto','customize.generate':'Generate','customize.blocksSub':'block(s)',
 },
 fr: {
   'nav.board':'Tableau','nav.requests':'Demandes','nav.attention':'Attention','nav.backlog':'Backlog',
@@ -197,6 +202,11 @@ fr: {
   'task.failingPassing':'{f} en échec, {p} réussi(s)','task.comments':'Commentaires','task.noComments':'Aucun commentaire.',
   'task.addCommentPlaceholder':'Ajouter un commentaire, une remarque, un retour…',
   'task.toAnalyzeHint':'« À analyser » renvoie la tâche pour que l’agent la reprenne au tour suivant.',
+  'customize.title':'Personnaliser','customize.sub':'Ajoutez des dashboards, compétences et agents propres au projet — décrivez ce que vous voulez, ou laissez Auto proposer des pistes à partir de ce projet.',
+  'customize.dashboards':'Dashboards','customize.skills':'Compétences','customize.agents':'Agents',
+  'customize.add.dashboard':'Ajouter un dashboard','customize.add.skill':'Ajouter une compétence','customize.add.agent':'Ajouter un agent',
+  'customize.empty.dashboard':'Aucun dashboard personnalisé pour l’instant.','customize.empty.skill':'Aucune compétence personnalisée pour l’instant.','customize.empty.agent':'Aucun agent personnalisé pour l’instant.',
+  'customize.describePh':'Décrivez ce que vous voulez…','customize.auto':'Auto','customize.generate':'Générer','customize.blocksSub':'bloc(s)',
 },
 es: {
   'nav.board':'Tablero','nav.requests':'Solicitudes','nav.attention':'Atención','nav.backlog':'Backlog',
@@ -287,6 +297,11 @@ es: {
   'task.failingPassing':'{f} fallando, {p} superadas','task.comments':'Comentarios','task.noComments':'Sin comentarios.',
   'task.addCommentPlaceholder':'Añade un comentario, una observación, feedback…',
   'task.toAnalyzeHint':'«Por analizar» devuelve la tarea para que el agente la retome en la siguiente ronda.',
+  'customize.title':'Personalizar','customize.sub':'Añade dashboards, habilidades y agentes propios del proyecto — describe lo que quieres, o deja que Auto proponga candidatos a partir de este proyecto.',
+  'customize.dashboards':'Dashboards','customize.skills':'Habilidades','customize.agents':'Agentes',
+  'customize.add.dashboard':'Añadir dashboard','customize.add.skill':'Añadir habilidad','customize.add.agent':'Añadir agente',
+  'customize.empty.dashboard':'Aún no hay dashboards personalizados.','customize.empty.skill':'Aún no hay habilidades personalizadas.','customize.empty.agent':'Aún no hay agentes personalizados.',
+  'customize.describePh':'Describe lo que quieres…','customize.auto':'Auto','customize.generate':'Generar','customize.blocksSub':'bloque(s)',
 },
 de: {
   'nav.board':'Board','nav.requests':'Anfragen','nav.attention':'Hinweise','nav.backlog':'Backlog',
@@ -377,6 +392,11 @@ de: {
   'task.failingPassing':'{f} fehlgeschlagen, {p} bestanden','task.comments':'Kommentare','task.noComments':'Keine Kommentare.',
   'task.addCommentPlaceholder':'Kommentar, Anmerkung oder Feedback hinzufügen…',
   'task.toAnalyzeHint':'„Zu analysieren“ gibt die Aufgabe zurück, damit der Agent sie in der nächsten Runde aufgreift.',
+  'customize.title':'Anpassen','customize.sub':'Fügen Sie projektspezifische Dashboards, Skills und Agenten hinzu — beschreiben Sie, was Sie wollen, oder lassen Sie Auto Kandidaten aus diesem Projekt vorschlagen.',
+  'customize.dashboards':'Dashboards','customize.skills':'Skills','customize.agents':'Agenten',
+  'customize.add.dashboard':'Dashboard hinzufügen','customize.add.skill':'Skill hinzufügen','customize.add.agent':'Agent hinzufügen',
+  'customize.empty.dashboard':'Noch keine eigenen Dashboards.','customize.empty.skill':'Noch keine eigenen Skills.','customize.empty.agent':'Noch keine eigenen Agenten.',
+  'customize.describePh':'Beschreiben Sie, was Sie wollen…','customize.auto':'Auto','customize.generate':'Generieren','customize.blocksSub':'Block/Blöcke',
 },
 pt: {
   'nav.board':'Painel','nav.requests':'Pedidos','nav.attention':'Atenção','nav.backlog':'Backlog',
@@ -467,6 +487,11 @@ pt: {
   'task.failingPassing':'{f} a falhar, {p} bem-sucedido(s)','task.comments':'Comentários','task.noComments':'Sem comentários.',
   'task.addCommentPlaceholder':'Adicione um comentário, uma observação, feedback…',
   'task.toAnalyzeHint':'«Por analisar» devolve a tarefa para o agente a retomar na ronda seguinte.',
+  'customize.title':'Personalizar','customize.sub':'Adicione dashboards, habilidades e agentes específicos do projeto — descreva o que quer, ou deixe o Auto propor candidatos a partir deste projeto.',
+  'customize.dashboards':'Dashboards','customize.skills':'Habilidades','customize.agents':'Agentes',
+  'customize.add.dashboard':'Adicionar dashboard','customize.add.skill':'Adicionar habilidade','customize.add.agent':'Adicionar agente',
+  'customize.empty.dashboard':'Ainda sem dashboards personalizados.','customize.empty.skill':'Ainda sem habilidades personalizadas.','customize.empty.agent':'Ainda sem agentes personalizados.',
+  'customize.describePh':'Descreva o que quer…','customize.auto':'Auto','customize.generate':'Gerar','customize.blocksSub':'bloco(s)',
 },
 it: {
   'nav.board':'Bacheca','nav.requests':'Richieste','nav.attention':'Attenzione','nav.backlog':'Backlog',
@@ -557,6 +582,11 @@ it: {
   'task.failingPassing':'{f} falliti, {p} superati','task.comments':'Commenti','task.noComments':'Nessun commento.',
   'task.addCommentPlaceholder':'Aggiungi un commento, un’osservazione, un feedback…',
   'task.toAnalyzeHint':'«Da analizzare» rimanda l’attività così l’agente la riprende al giro successivo.',
+  'customize.title':'Personalizza','customize.sub':'Aggiungi dashboard, skill e agenti specifici del progetto — descrivi cosa vuoi, oppure lascia che Auto proponga candidati a partire da questo progetto.',
+  'customize.dashboards':'Dashboard','customize.skills':'Skill','customize.agents':'Agenti',
+  'customize.add.dashboard':'Aggiungi dashboard','customize.add.skill':'Aggiungi skill','customize.add.agent':'Aggiungi agente',
+  'customize.empty.dashboard':'Ancora nessuna dashboard personalizzata.','customize.empty.skill':'Ancora nessuna skill personalizzata.','customize.empty.agent':'Ancora nessun agente personalizzato.',
+  'customize.describePh':'Descrivi cosa vuoi…','customize.auto':'Auto','customize.generate':'Genera','customize.blocksSub':'blocco/i',
 },
 };
 

package/templates/dashboard/public/index.html

@@ -4,19 +4,19 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>spectoflow · control</title>
-  <link rel="icon" type="image/png" href="logo-dark.png" />
-  <link rel="icon" type="image/png" media="(prefers-color-scheme: dark)" href="logo-white.png" />
-  <link rel="stylesheet" href="styles.css" />
-  <link rel="stylesheet" href="designs/console.css" />
-  <link rel="stylesheet" href="designs/orbit.css" />
+  <link rel="icon" type="image/png" href="/logo-dark.png" />
+  <link rel="icon" type="image/png" media="(prefers-color-scheme: dark)" href="/logo-white.png" />
+  <link rel="stylesheet" href="/styles.css" />
+  <link rel="stylesheet" href="/designs/console.css" />
+  <link rel="stylesheet" href="/designs/orbit.css" />
 </head>
 <body>
   <header class="topbar">
     <div class="brand">
       <button class="nav-toggle" id="navToggle" data-i18n-aria="topbar.navToggle" aria-label="Toggle menu" aria-expanded="false"><span></span><span></span><span></span></button>
       <a class="brand-logo" href="/board" data-route="board" aria-label="spectoflow home">
-        <img class="brand-logo-img is-dark" src="logo-white.png" alt="spectoflow" />
-        <img class="brand-logo-img is-light" src="logo-dark.png" alt="spectoflow" />
+        <img class="brand-logo-img is-dark" src="/logo-white.png" alt="spectoflow" />
+        <img class="brand-logo-img is-light" src="/logo-dark.png" alt="spectoflow" />
       </a>
       <div class="brand-text">
         <div class="brand-line">
@@ -257,6 +257,14 @@
           <div class="settings-saved" id="settingsSaved" data-i18n="settings.saved" hidden>✓ saved</div>
         </div>
         <div class="settings-readonly" id="settingsReadonly"></div>
+
+        <!-- Customize: project-specific dashboards, skills and agents — described or auto-proposed,
+             generated by the configured agent through the same Run/Chat pipeline as any other ask. -->
+        <div class="cz-wrap">
+          <h2 class="panel-title" data-i18n="customize.title">Customize</h2>
+          <p class="panel-sub" data-i18n="customize.sub">Add project-specific dashboards, skills and agents — describe what you want, or let Auto propose candidates from this project.</p>
+          <div id="czRoot"></div>
+        </div>
       </div>
     </section>
   </main>
@@ -264,8 +272,8 @@
   <footer class="app-footer">
     <div class="footer-left">
       <a class="footer-logo" href="/board" data-route="board" aria-label="spectoflow">
-        <img class="brand-logo-img is-dark" src="logo-white.png" alt="spectoflow" />
-        <img class="brand-logo-img is-light" src="logo-dark.png" alt="spectoflow" />
+        <img class="brand-logo-img is-dark" src="/logo-white.png" alt="spectoflow" />
+        <img class="brand-logo-img is-light" src="/logo-dark.png" alt="spectoflow" />
       </a>
       <span class="footer-name">spectoflow</span>
       <span class="footer-ver" id="footerVer"></span>
@@ -323,13 +331,13 @@
     </defs>
   </svg>
 
-  <script src="stats.js"></script>
-  <script src="charts.js"></script>
-  <script src="icons.js"></script>
-  <script src="designs.js"></script>
-  <script src="i18n.js"></script>
-  <script src="app.js"></script>
-  <script src="designs/console.js"></script>
-  <script src="designs/orbit.js"></script>
+  <script src="/stats.js"></script>
+  <script src="/charts.js"></script>
+  <script src="/icons.js"></script>
+  <script src="/designs.js"></script>
+  <script src="/i18n.js"></script>
+  <script src="/app.js"></script>
+  <script src="/designs/console.js"></script>
+  <script src="/designs/orbit.js"></script>
 </body>
 </html>

package/templates/dashboard/public/styles.css

@@ -557,6 +557,33 @@ body.booting .ring-svg circle:last-of-type { transform-origin:center; animation:
 .settings-ro-k { color:var(--muted); font-size:13px; }
 .settings-ro-v { font-family:var(--mono); font-size:12.5px; color:var(--ink); }
 
+/* ---- Customize (Settings → dashboards/skills/agents) — reuses .card/.chat-ta/.btn styling so it
+   reads as part of the same system, not a bolted-on sub-app. ---- */
+.cz-wrap { margin-top:28px; }
+.cz-block { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-top:12px; }
+.cz-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
+.cz-head h3 { margin:0; font-size:13.5px; font-weight:700; }
+.cz-add { font-size:12.5px; padding:6px 13px; }
+.cz-add[aria-expanded="true"] { background:var(--signal); color:var(--on-accent); border-color:transparent; }
+.cz-list { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
+.cz-list .empty { padding:10px 2px; font-size:12.5px; color:var(--muted); }
+.cz-item { display:flex; align-items:baseline; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:background .15s; }
+.cz-item:hover, .cz-item:focus-visible { background:var(--surface-2); outline:none; }
+.cz-item-title { font-size:13px; font-weight:600; }
+.cz-item-sub { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.cz-form { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
+.cz-form .chat-ta { min-height:64px; }
+.cz-form-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
+.cz-form-actions .chat-agent { flex-shrink:0; }
+
+/* ---- Custom dashboard pages (Customize → generate-dashboard) — every block below is one of the
+   dashboard's own existing components (.ocard/.kpi-row/.stat-tiles/.flatlist/table), so a generated
+   page needs no page-specific CSS: it inherits the active design automatically. ---- */
+.custom-dash-wrap { display:flex; flex-direction:column; gap:14px; }
+.custom-dash-body { display:flex; flex-direction:column; gap:14px; }
+.cd-markdown { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; font-size:13.5px; line-height:1.6; }
+.cd-markdown :first-child { margin-top:0; }
+
 /* App footer — professional, always at the bottom of the content */
 .app-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 22px; border-top:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:12.5px; }
 .footer-left { display:flex; align-items:center; gap:9px; }