spectoflow 0.24.0 → 0.27.0

package/lib/dashboard/public/charts.js

@@ -167,8 +167,8 @@
   }
 
   // ring(pct, opts) — a progress ring: track circle + foreground arc via
-  // stroke-dasharray/offset (stroke="url(#grad)" — caller provides the
-  // <linearGradient id="grad"> once), centre pct% text.
+  // stroke-dasharray/offset (flat var(--signal) fill by default; caller may
+  // override via opts.stroke2), centre pct% text.
   function ring(pct, opts) {
     opts = opts || {};
     pct = Math.max(0, Math.min(100, pct || 0));
@@ -180,7 +180,7 @@
     const offset = c * (1 - pct / 100);
     return `<svg viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" class="ring-svg">` +
       `<circle cx="${cx}" cy="${cy}" r="${n2(r)}" fill="none" stroke="var(--line)" stroke-width="${stroke}"/>` +
-      `<circle cx="${cx}" cy="${cy}" r="${n2(r)}" fill="none" stroke="${opts.stroke2 || 'url(#grad)'}" stroke-width="${stroke}" stroke-linecap="round" ` +
+      `<circle cx="${cx}" cy="${cy}" r="${n2(r)}" fill="none" stroke="${opts.stroke2 || 'var(--signal)'}" stroke-width="${stroke}" stroke-linecap="round" ` +
         `stroke-dasharray="${n2(c)}" stroke-dashoffset="${n2(offset)}" transform="rotate(-90 ${cx} ${cy})"/>` +
       `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="middle" class="ring-label" style="fill:var(--ink)">${pct}%</text>` +
       `</svg>`;

package/lib/dashboard/public/commands.js

@@ -0,0 +1,77 @@
+'use strict';
+/*
+ * Slash-command logic for the dashboard chat. A command is a saved prompt macro: the user types
+ * "/trigger <text>" and it expands, client-side, into the command's full `instruction` (with an
+ * optional {{input}} placeholder for the trailing text). The agent never sees the "/" — expansion
+ * happens before /api/run, so this is fully agent-agnostic.
+ *
+ * Zero-dependency, loaded both in the browser (via <script> — exposes window.SpectoCommands) and in
+ * node --test (via require — module.exports), the same pattern as stats.js / charts.js. This is the
+ * single source of truth for the built-in command set and for trigger validation.
+ */
+(function (root) {
+  const TRIGGER_RE = /^[a-z0-9][a-z0-9_-]{0,39}$/;
+
+  // Shipped defaults. Kept ONLY here (not duplicated into templates/config.json): a project with no
+  // config.commands field uses these; the first user edit persists the full list into config.json.
+  const BUILTIN_COMMANDS = [
+    { trigger: 'spec', description: 'Write or update a spec',
+      instruction: "Write or update the specification for the following. Follow the project's spec conventions under .spectoflow (specs/ markdown: clear goals, non-goals, acceptance criteria). Focus: {{input}}",
+      enabled: true },
+    { trigger: 'plan', description: 'Break work into a task plan',
+      instruction: "Break the following work into an ordered plan of small, independently testable checkbox tasks, following the project's plan conventions (plans/ markdown). Work: {{input}}",
+      enabled: true },
+    { trigger: 'revue', description: 'Code-review the current diff',
+      instruction: 'Review the current working-tree diff for correctness bugs and quality issues (reuse, simplification, efficiency). Report findings most-severe first. {{input}}',
+      enabled: true },
+    { trigger: 'resume', description: 'Summarize progress',
+      instruction: 'Give a concise summary of the current project progress: what is done, what is in progress, and what is next. {{input}}',
+      enabled: true },
+    { trigger: 'rapport_jour', description: 'Structured daily report',
+      instruction: "Write today's daily report with these sections: 1) Highlights (what was accomplished), 2) Blockers, 3) Next steps. Keep it concise and factual. {{input}}",
+      enabled: true },
+  ];
+
+  function effectiveCommands(config) {
+    config = config || {};
+    return Array.isArray(config.commands) ? config.commands : BUILTIN_COMMANDS.slice();
+  }
+
+  function validateTrigger(trigger, existingTriggers) {
+    if (typeof trigger !== 'string') return { ok: false, error: 'invalidTrigger' };
+    const lc = trigger.toLowerCase();
+    if (!TRIGGER_RE.test(lc)) return { ok: false, error: 'invalidTrigger' };
+    if ((existingTriggers || []).some((t) => String(t).toLowerCase() === lc)) return { ok: false, error: 'duplicateTrigger' };
+    return { ok: true };
+  }
+
+  function matchCommands(query, commands) {
+    const q = String(query || '').toLowerCase();
+    return (commands || []).filter((c) => c && c.enabled !== false
+      && typeof c.trigger === 'string' && c.trigger.toLowerCase().startsWith(q));
+  }
+
+  function parseInvocation(text) {
+    const m = String(text == null ? '' : text).trim().match(/^\/([a-z0-9][a-z0-9_-]*)(?:\s+([\s\S]*))?$/i);
+    if (!m) return null;
+    return { trigger: m[1], rest: m[2] || '' };
+  }
+
+  function expandCommand(text, commands) {
+    const inv = parseInvocation(text);
+    if (!inv) return null;
+    const cmd = (commands || []).find((c) => c && c.enabled !== false
+      && typeof c.trigger === 'string' && c.trigger.toLowerCase() === inv.trigger.toLowerCase()
+      && typeof c.instruction === 'string' && c.instruction.trim());
+    if (!cmd) return null;
+    const rest = inv.rest.trim();
+    const prompt = cmd.instruction.indexOf('{{input}}') !== -1
+      ? cmd.instruction.split('{{input}}').join(rest)
+      : (rest ? cmd.instruction + '\n\n' + rest : cmd.instruction);
+    return { prompt: prompt.trim(), display: String(text).trim() };
+  }
+
+  const api = { BUILTIN_COMMANDS, effectiveCommands, validateTrigger, matchCommands, parseInvocation, expandCommand };
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  else root.SpectoCommands = api;
+})(typeof window !== 'undefined' ? window : globalThis);

package/lib/dashboard/public/designs/console.css

@@ -1,4 +1,4 @@
-/* Spectral Console — dark-first bento control room. Amber accent (--signal), cyan flow (--cool).
+/* Spectral Console — dark-first bento control room. Violet accent (--signal), cyan flow (--cool).
    Scoped entirely under html[data-design="console"] so other designs are untouched.
    Fonts (self-hosted, declared once in ../styles.css @font-face rules — reused here by family name):
    Sora (display), IBM Plex Sans (sans), JetBrains Mono (mono). No external font requests. */
@@ -8,12 +8,12 @@ html[data-design="console"] {
   --bg:#0b1220; --surface:#111a2b; --surface-2:#172236; --surface-3:#1d2a42;
   --line:#223049; --line-2:#2c3c5a;
   --ink:#e8eef8; --muted:#8a9bb5; --faint:#5f6f8a;
-  --signal:#e6a54b; --cool:#38c5d9; --on-accent:#1a1206;
+  --signal:#7c5cff; --cool:#38c5d9; --on-accent:#ffffff;
   --s-todo:#6b7a90; --s-in_progress:#4f8cff; --s-to_validate:#ff9b3d; --s-to_analyze:#ff5fd2;
   --s-done:#3fbf7f; --s-blocked:#ff5c5c;
   --radius:14px; --shadow:0 12px 40px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
   --display:'Sora',var(--sans); --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
-  --cx-glow-signal:0 0 0 1px rgba(230,165,75,.35), 0 0 32px rgba(230,165,75,.18);
+  --cx-glow-signal:0 0 0 1px rgba(124,92,255,.35), 0 0 32px rgba(124,92,255,.20);
   --cx-glow-cool:0 0 0 1px rgba(56,197,217,.35), 0 0 32px rgba(56,197,217,.16);
   --cx-grid:rgba(255,255,255,.035);
   --cx-rail-w:72px;
@@ -22,11 +22,11 @@ html[data-design="console"][data-theme="light"] {
   --bg:#f3f5f9; --surface:#ffffff; --surface-2:#eef2f8; --surface-3:#e4eaf4;
   --line:#dbe2ee; --line-2:#c9d3e3;
   --ink:#0f1728; --muted:#55657f; --faint:#8593ab;
-  --signal:#b8781f; --cool:#0e8fa3; --on-accent:#fff8ec;
+  --signal:#5b3fc4; --cool:#0e8fa3; --on-accent:#ffffff;
   --s-todo:#7c8aa3; --s-in_progress:#2f6fe0; --s-to_validate:#d97a17; --s-to_analyze:#c93fae;
   --s-done:#1f9c5c; --s-blocked:#d93a3a;
   --shadow:0 10px 30px rgba(20,30,60,.10), 0 1px 0 rgba(255,255,255,.6) inset;
-  --cx-glow-signal:0 0 0 1px rgba(184,120,31,.35), 0 0 28px rgba(184,120,31,.14);
+  --cx-glow-signal:0 0 0 1px rgba(91,63,196,.35), 0 0 28px rgba(91,63,196,.16);
   --cx-glow-cool:0 0 0 1px rgba(14,143,163,.35), 0 0 28px rgba(14,143,163,.14);
   --cx-grid:rgba(15,23,40,.06);
 }
@@ -166,20 +166,10 @@ html[data-design="console"] .flatlist li.run-live { padding-left:18px; }
 /* sync dot pulse (reinforces the base pulse with a cyan tint on this design) */
 html[data-design="console"] .sync-dot { box-shadow:0 0 0 0 color-mix(in srgb,var(--cool) 45%,transparent); }
 
-/* ============ WORKFLOW PIPELINE — flowing particles on enabled connectors ============ */
+/* ============ WORKFLOW PIPELINE — connector styling ============ */
 html[data-design="console"] .wf-link { position:relative; overflow:visible; }
-html[data-design="console"] .wf-link.on { background:linear-gradient(90deg,color-mix(in srgb,var(--signal) 55%,var(--line)),var(--line)); }
-html[data-design="console"] .wf-link.on::after {
-  content:""; position:absolute; top:-2px; left:0; width:6px; height:6px; border-radius:50%;
-  background:var(--cool); box-shadow:0 0 8px var(--cool); opacity:0;
-  animation:cx-travel 2.2s linear infinite;
-}
+html[data-design="console"] .wf-link.on { background:var(--signal); }
 html[data-design="console"] .wf-strip .wf-arrow:not(.off) { position:relative; overflow:visible; }
-html[data-design="console"] .wf-strip .wf-arrow:not(.off)::after {
-  content:""; position:absolute; top:50%; left:0; width:5px; height:5px; margin-top:-2.5px; border-radius:50%;
-  background:var(--cool); box-shadow:0 0 6px var(--cool); opacity:0; animation:cx-travel 2s linear infinite;
-}
-@keyframes cx-travel { 0%{ left:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; } }
 
 /* ============ COMMAND PALETTE (injected by console.js) ============ */
 .cx-search-btn {
@@ -223,8 +213,6 @@ html[data-design="console"][data-theme="light"] .cx-cmdk { background:rgba(15,23
   html[data-design="console"] .ocard,
   html[data-design="console"] .acard,
   html[data-design="console"] .card { animation:none; }
-  html[data-design="console"] .wf-link.on::after,
-  html[data-design="console"] .wf-strip .wf-arrow::after,
   html[data-design="console"] .flatlist li.run-live::before { animation:none; display:none; }
 }
 

package/lib/dashboard/public/designs/orbit.css

@@ -1,6 +1,6 @@
 /* ============================================================================================
  * Orbit — light-first, airy, circular design skin. Teal signal + amber accent, dotted ground,
- * Space Grotesk display / IBM Plex Sans body / JetBrains Mono numerics (all self-hosted, see the
+ * Bricolage Grotesque display / IBM Plex Sans body / JetBrains Mono numerics (all self-hosted, see the
  * @font-face rules already declared in styles.css). Navigation is NOT the tab bar — the tab bar is
  * hidden and replaced by a round "hub" button in the header that opens a full-screen radial menu
  * (orbit.js builds it from the very same #tabs buttons, so routing logic is fully reused).
@@ -15,7 +15,7 @@ html[data-design="orbit"] {
   --s-done:#1f9c5c; --s-blocked:#d93a3a;
   --radius:20px; --shadow:0 14px 40px rgba(14,29,33,.12);
   --sans:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
-  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
   --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
   --ob-dot: rgba(14,29,33,.07);
 }
@@ -77,8 +77,7 @@ html[data-design="orbit"] .av.running::after {
 @keyframes ob-ripple { 0%{ transform:scale(.9); opacity:.8; } 100%{ transform:scale(1.3); opacity:0; } }
 
 /* flowing teal particles along the workflow pipeline connectors */
-html[data-design="orbit"] .wf-arrow::after { background:linear-gradient(90deg,transparent,var(--signal),transparent); }
-html[data-design="orbit"] .wf-conn { position:relative; overflow:hidden; background:linear-gradient(90deg,var(--cool),var(--signal)); }
+html[data-design="orbit"] .wf-conn { position:relative; overflow:hidden; background:var(--signal); }
 html[data-design="orbit"] .wf-conn::after {
   content:""; position:absolute; top:-2px; left:0; width:6px; height:6px; border-radius:50%;
   background:var(--signal); box-shadow:0 0 8px var(--signal); animation: ob-flow 2.4s linear infinite;

package/lib/dashboard/public/designs.js

@@ -20,11 +20,11 @@
  */
 (function (root) {
   const DESIGNS = [
-    { id: 'console',      name: 'Spectral Console', desc: 'Default — dark real-time console: left icon rail, ⌘K palette, bento overview, amber + cyan flow.' },
+    { id: 'console',      name: 'Spectral Console', desc: 'Default — dark real-time console: left icon rail, ⌘K palette, bento overview, violet + cyan flow.' },
     { id: 'orbit',        name: 'Orbit',           desc: 'Light, airy, circular — a radial menu opens on click of the hub; teal dial + amber brand.' },
     { id: 'control-room', name: 'Control Room', desc: 'Dark violet engineering control room — the original.' },
     { id: 'obsidian',     name: 'Obsidian Ops',  desc: 'Near-black mission-control — electric lime + cyan, mono type, Linear/Vercel precision.' },
-    { id: 'neon-command', name: 'Neon Command',  desc: 'Glassmorphism — aurora violet + cyan, Space Grotesk display, control-room ambiance.' },
+    { id: 'neon-command', name: 'Neon Command',  desc: 'Glassmorphism — aurora violet + cyan, Bricolage Grotesque display, control-room ambiance.' },
     { id: 'mission',      name: 'Mission Control', desc: 'Indigo control panel on solid slate — clean, flat, status-coloured.' },
   ];
   if (typeof module !== 'undefined' && module.exports) module.exports = DESIGNS;

package/lib/dashboard/public/hub.html

@@ -34,7 +34,7 @@
     <div id="hubEmpty" class="hub-empty" hidden>
       <svg class="hub-empty-icon" viewBox="0 0 18 18" width="34" height="34" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 2.2 15.5 6v6L9 15.8 2.5 12V6z"/><path d="M9 6.6v4.8"/><circle cx="9" cy="13.4" r=".9" fill="currentColor" stroke="none"/></svg>
       <p class="hub-empty-title">No projects yet</p>
-      <p class="hub-empty-sub">Add your first project to get started — point spectoflow at any folder on your computer.</p>
+      <p class="hub-empty-sub" id="hubEmptySub">Add your first project to get started — point spectoflow at any folder on your computer.</p>
       <button class="hub-add-btn hub-add-btn-lg" id="hubAddBtnEmpty">+ Add your first project</button>
     </div>
 

package/lib/dashboard/public/hub.js

@@ -34,30 +34,43 @@
     const r = await fetch('/api/hub/projects');
     const data = await r.json();
     const rows = data.projects || [];
+    const remote = data.mode === 'remote';                       // served by the online relay: read-only list
+    const canPublish = !remote && !!(data.remote && data.remote.configured);   // local hub logged in to one
+    document.body.classList.toggle('hub-remote', remote);
     empty.hidden = rows.length > 0;
     if (subtitle) {
       subtitle.textContent = rows.length
         ? `${rows.length} project${rows.length === 1 ? '' : 's'} · click a card to open its board`
-        : 'One dashboard, every project — pick one to open its board.';
+        : remote ? 'Nothing published yet.' : 'One dashboard, every project — pick one to open its board.';
     }
+    const emptySub = document.getElementById('hubEmptySub');
+    if (emptySub && remote) emptySub.textContent = 'On a machine: spectoflow dashboard login --url=… --token=…, then spectoflow dashboard publish inside a project.';
     grid.innerHTML = rows.map((p) => {
       const pct = p.stats && p.stats.total ? Math.round(100 * p.stats.done / p.stats.total) : null;
       const stage = pct === null ? 'new' : pct >= 100 ? 'done' : pct > 0 ? 'active' : 'new';
       const stageLabel = { new: 'New', active: 'In progress', done: 'Done' }[stage];
+      const where = remote
+        ? `<span class="hub-card-machine"><i class="hub-dot${p.online ? ' is-on' : ''}"></i>${esc(p.machine || 'machine')}${p.online ? '' : ' · offline'}</span>`
+        : esc(p.path);
+      const meta = remote ? `Updated ${esc(timeAgo(p.lastOpened))}` : `Opened ${esc(timeAgo(p.lastOpened))}`;
+      const online = canPublish
+        ? `<button class="hub-card-online${p.published ? ' is-on' : ''}" data-publish="${p.id}" data-published="${p.published ? '1' : '0'}" title="${p.published ? 'Published to your online dashboard — click to unpublish' : 'Publish to your online dashboard'}">${p.published ? '● Online' : '○ Online'}</button>`
+        : '';
       return `<div class="hub-card" data-id="${p.id}">
         <a class="hub-card-open" href="/p/${p.id}/board">
           <div class="hub-card-top">
             <div class="hub-card-name">${esc(p.name)}</div>
             <span class="hub-card-stage is-${stage}">${stageLabel}</span>
           </div>
-          <div class="hub-card-path">${esc(p.path)}</div>
+          <div class="hub-card-path">${where}</div>
           <div class="hub-card-progress"><div class="hub-card-progress-fill" style="width:${pct ?? 0}%"></div></div>
           <div class="hub-card-foot">
             <span class="hub-card-pct">${pct !== null ? `${pct}% · ${p.stats.done}/${p.stats.total} tasks` : 'No tasks yet'}</span>
-            <span class="hub-card-meta">Opened ${esc(timeAgo(p.lastOpened))}</span>
+            <span class="hub-card-meta">${meta}</span>
           </div>
         </a>
-        <button class="hub-card-remove" data-remove="${p.id}" title="Remove from this list" aria-label="Remove ${esc(p.name)}">&times;</button>
+        ${online}
+        ${remote ? '' : `<button class="hub-card-remove" data-remove="${p.id}" title="Remove from this list" aria-label="Remove ${esc(p.name)}">&times;</button>`}
       </div>`;
     }).join('');
   }
@@ -77,6 +90,16 @@
     return false;
   }
   grid.addEventListener('click', async (e) => {
+    const pub = e.target.closest('[data-publish]');
+    if (pub) {
+      e.preventDefault();
+      const id = pub.getAttribute('data-publish');
+      const published = pub.getAttribute('data-published') !== '1';
+      pub.disabled = true;
+      await fetch('/api/hub/projects/' + encodeURIComponent(id) + '/publish', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ published }) });
+      loadProjects();
+      return;
+    }
     const btn = e.target.closest('[data-remove]');
     if (!btn) return;
     e.preventDefault();