@axiomatic-labs/claudeflow 2.13.79 → 2.13.81

package/lib/panel.js

@@ -1037,6 +1037,16 @@ function severityFor(id) {
       if (s.observer.servers && s.observer.servers.some((sr) => sr.status === 'unhealthy' || sr.status === 'exited')) return 'warn';
       return 'ok';
     }
+    case 'validators': {
+      if (!s.validators || !s.validators.available) return 'info';
+      // Block > error > pass > skip. Block is the actionable state — the
+      // hook actually halted the agent. Surface it the same way Observer
+      // surfaces unresolved incidents (warn = amber dot in the nav).
+      if (s.validators.stats && s.validators.stats.block > 0) return 'warn';
+      if (s.validators.stats && s.validators.stats.error > 0) return 'warn';
+      if (s.validators.stats && s.validators.stats.pass > 0) return 'ok';
+      return 'info';
+    }
     case 'setupContext': return !s.setupContext.exists ? 'err' : (s.setupContext.toolingComplete ? 'ok' : 'warn');
     case 'activeRun': return s.activeRun.active ? 'info' : 'info';
     case 'doctor':   return s.doctor.issueCount > 0 ? 'warn' : 'ok';
@@ -1669,19 +1679,23 @@ function renderValidators() {
 
   const validators = [...new Set(v.runs.map((r) => r.validator))].sort();
   const scopes = [...new Set(v.runs.map((r) => r.scope))].sort();
+  // Reuse the observer-filter CSS class so the Validators tab matches
+  // the visual language of the Observer tab. Pre-v2.13.80 the pills used
+  // a non-existent pill class, falling back to default browser button
+  // styling — light buttons on dark background.
   const validatorPill = (label, value, count) => {
     const a = (validatorsFilter === value);
-    const cls = a ? 'pill pill-active' : 'pill';
+    const cls = a ? 'observer-filter active' : 'observer-filter';
     return \`<button class="\${cls}" data-validators-filter="\${escapeHtml(value)}">\${escapeHtml(label)}<span class="muted" style="margin-left:6px;font-size:11px;">\${count}</span></button>\`;
   };
   const statusPill = (label, value, count) => {
     const a = (validatorsStatusFilter === value);
-    const cls = a ? 'pill pill-active' : 'pill';
+    const cls = a ? 'observer-filter active' : 'observer-filter';
     return \`<button class="\${cls}" data-validators-status-filter="\${escapeHtml(value)}">\${escapeHtml(label)}<span class="muted" style="margin-left:6px;font-size:11px;">\${count}</span></button>\`;
   };
   const scopePill = (label, value, count) => {
     const a = (validatorsScopeFilter === value);
-    const cls = a ? 'pill pill-active' : 'pill';
+    const cls = a ? 'observer-filter active' : 'observer-filter';
     return \`<button class="\${cls}" data-validators-scope-filter="\${escapeHtml(value)}">\${escapeHtml(label)}<span class="muted" style="margin-left:6px;font-size:11px;">\${count}</span></button>\`;
   };
 
@@ -1738,21 +1752,19 @@ function renderValidators() {
     ? 'Clear all history'
     : \`Clear "\${escapeHtml(validatorsScopeFilter)}" history\`;
 
+  const filterRow = (label, pillsHtml) => \`<div style="display:flex;align-items:center;gap:10px;margin:6px 0;flex-wrap:wrap;">
+    <span class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:0.5px;min-width:74px;">\${label}</span>
+    <div style="display:flex;gap:6px;flex-wrap:wrap;">\${pillsHtml}</div>
+  </div>\`;
+
   return \`<h2>Validators
     <button id="clear-validators" class="btn btn-ghost" style="float:right;font-size:12px;" data-scope="\${escapeHtml(validatorsScopeFilter)}">\${clearLabel}</button>
   </h2>
   <p class="muted" style="margin-top:0;">Last updated \${formatRelativeTime(v.updated_at)} · \${v.stats.total} total run(s): \${v.stats.pass} pass, \${v.stats.block} block, \${v.stats.skip} skip, \${v.stats.error} error.</p>
-  <div style="margin:12px 0;">
-    <div style="margin-bottom:6px;"><span class="muted" style="font-size:11px;text-transform:uppercase;">Validator</span></div>
-    \${validatorPills}
-  </div>
-  <div style="margin:12px 0;">
-    <div style="margin-bottom:6px;"><span class="muted" style="font-size:11px;text-transform:uppercase;">Scope</span></div>
-    \${scopePills}
-  </div>
-  <div style="margin:12px 0;">
-    <div style="margin-bottom:6px;"><span class="muted" style="font-size:11px;text-transform:uppercase;">Status</span></div>
-    \${statusPills}
+  <div class="card" style="padding:10px 14px;margin:12px 0;">
+    \${filterRow('Validator', validatorPills)}
+    \${filterRow('Scope', scopePills)}
+    \${filterRow('Status', statusPills)}
   </div>
   <div class="card" style="padding:0;">\${runRows || '<p class="muted" style="padding:12px;">No runs match the current filter.</p>'}</div>\`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiomatic-labs/claudeflow",
-  "version": "2.13.79",
+  "version": "2.13.81",
   "description": "Claudeflow — AI-powered development toolkit for Claude Code. Skills, agents, hooks, and quality gates that ship production apps.",
   "bin": {
     "claudeflow": "./bin/cli.js"