@techninja/clearstack 0.4.5 → 0.4.7

package/lib/spec-config.js

@@ -96,6 +96,12 @@ export function buildCmds(projectDir, opts) {
     prettier: `${runner} prettier --config .configs/.prettierrc --check src scripts`,
     mdlint: `${runner} markdownlint-cli2 --config .configs/.markdownlint.jsonc "docs/**/*.md" "*.md"`,
     audit,
+    fix: {
+      es: `${runner} eslint --config .configs/eslint.config.js . --fix`,
+      css: `${runner} stylelint --config .configs/.stylelintrc.json "src/**/*.css" --fix`,
+      prettier: `${runner} prettier --config .configs/.prettierrc --write src scripts`,
+      md: `${runner} markdownlint-cli2 --config .configs/.markdownlint.jsonc --fix "docs/**/*.md" "*.md"`,
+    },
   };
   return {
     lint: `${runner} eslint --config .configs/eslint.config.js . --fix`,

package/lib/watch-ui.js

@@ -64,7 +64,11 @@ export function extractViolations(row, projectDir) {
     });
   }
   if (row.result?.errors?.length) {
-    return [[(row.label ?? row.name ?? row.key), row.result.errors.slice(0, 3).join('\n')]];
+    const errors = row.result.errors;
+    // Prettier: [warn] src/file.js — expand each into its own entry
+    const prettierFiles = errors.map((l) => l.match(/^\[warn\]\s+(.+\.\w+)$/)?.[1]).filter(Boolean);
+    if (prettierFiles.length) return prettierFiles.map((f) => [f, 'formatting — run npm run format']);
+    return [[row.label ?? row.name ?? row.key, errors.slice(0, 5).join('\n')]];
   }
   return [];
 }
@@ -84,6 +88,9 @@ function rowIcon(r) {
   return '{red-fg}!{/} ';
 }
 
+/** @param {object} r @param {number} w */
+const rowLine = (r, w) => { const n = (r.label ?? r.name ?? r.key).padEnd(w); return ` ${rowIcon(r)} ${r.pass === false ? `{red-fg}${n}{/}` : n}  ${r.detail ? `{grey-fg}${r.detail}{/}` : ''}`; };
+
 /**
  * Render the dashboard.
  * @param {object[]} rows
@@ -92,13 +99,8 @@ function rowIcon(r) {
  * @param {string[][]} violations
  */
 export function render(rows, lastCheck, watchDirs, violations) {
-  const labelWidth = Math.max(...rows.map((r) => (r.label ?? r.name ?? r.key).length));
-  const statusLines = rows.map((r) => {
-    const name = (r.label ?? r.name ?? r.key).padEnd(labelWidth);
-    const styled = r.pass === false ? `{red-fg}${name}{/}` : name;
-    const detail = r.detail ? `{grey-fg}${r.detail}{/}` : '';
-    return ` ${rowIcon(r)} ${styled}  ${detail}`;
-  });
+  const w = Math.max(...rows.map((r) => (r.label ?? r.name ?? r.key).length));
+  const statusLines = rows.map((r) => rowLine(r, w));
   statusLines.push('');
   statusLines.push(`{grey-fg} watching ${watchDirs.join(', ')}   last check: ${lastCheck}{/}${getCopyNote()}`);
   statusBox.setContent(statusLines.join('\n'));
@@ -137,12 +139,7 @@ export function destroyScreen() {
 
 /** Refresh just the status box — used for transient notes like copy confirmation. */
 export function renderNote(rows, lastCheck, watchDirs) {
-  const labelWidth = Math.max(...rows.map((r) => (r.label ?? r.name ?? r.key).length));
-  const lines = [
-    ...rows.map((r) => { const n = (r.label ?? r.name ?? r.key).padEnd(labelWidth); return ` ${rowIcon(r)} ${r.pass === false ? `{red-fg}${n}{/}` : n}  ${r.detail ? `{grey-fg}${r.detail}{/}` : ''}`; }),
-    '',
-    `{grey-fg} watching ${watchDirs.join(', ')}   last check: ${lastCheck}{/}${getCopyNote()}`,
-  ];
-  statusBox.setContent(lines.join('\n'));
+  const w = Math.max(...rows.map((r) => (r.label ?? r.name ?? r.key).length));
+  statusBox.setContent([...rows.map((r) => rowLine(r, w)), '', `{grey-fg} watching ${watchDirs.join(', ')}   last check: ${lastCheck}{/}${getCopyNote()}`].join('\n'));
   screen.render();
 }

package/lib/watch-widgets.js

@@ -15,7 +15,7 @@ export const screen = blessed.screen({ smartCSR: true, title: 'Clearstack Spec W
 export const outer = blessed.box({
   top: 0, left: 0, width: '100%', height: '100%',
   border: { type: 'line' },
-  label: { text: ' {blue-fg}♥{/blue-fg} Clearstack Spec Watch  q quit  ↑↓ scroll  c copy {/}', side: 'left' },
+  label: { text: ' {blue-fg}♥{/blue-fg} Clearstack Spec Watch  q quit  ↑↓ scroll  c copy  f fix {/}', side: 'left' },
   tags: true,
   style: { border: { fg: 'cyan' }, label: { fg: 'grey', bold: false } },
 });
@@ -58,9 +58,13 @@ export const getCopyNote = () => _copyNote;
 let _onCopyNote = () => {};
 export const setOnCopyNote = (fn) => { _onCopyNote = fn; };
 
+let _onFix = () => {};
+export const setOnFix = (fn) => { _onFix = fn; };
+
 screen.key(['C-c', 'q'], () => _quit());
 screen.key(['pageup', 'up'], () => { logBox.scroll(-1); screen.render(); });
 screen.key(['pagedown', 'down'], () => { logBox.scroll(1); screen.render(); });
+screen.key(['f'], () => _onFix());
 screen.key(['c'], () => {
   const raw = logBox.getContent()
     .replace(/\{[^}]+\}/g, '')          // blessed tags

package/lib/watch.js

@@ -7,11 +7,13 @@
 
 import { existsSync } from 'node:fs';
 import { resolve } from 'node:path';
+import { execSync } from 'node:child_process';
 import { loadConfig, buildCmds, makeExtMap, FAST_CHECKS } from './spec-config.js';
 import { buildChecks } from './check.js';
 import { render, extractViolations, renderNote } from './watch-ui.js';
 import { spawnServer, detectServerCmd } from './server-proc.js';
 import { setupLifecycle } from './watch-lifecycle.js';
+import { setOnFix } from './watch-widgets.js';
 
 /** Adapt a Check from buildChecks into a watch row (adds pass/detail/result state). */
 function toRow(check) {
@@ -84,14 +86,19 @@ export async function startWatch(projectDir) {
         return;
       }
       const row = toRun[i++];
+      row.pass = null;
+      row.detail = '';
+      render(rows, lastCheck, watchDirs, currentViolations);
+      const t0 = Date.now();
       const raw = await row.run({ quiet: true });
+      const elapsed = ((Date.now() - t0) / 1000).toFixed(1) + 's';
       row.result = typeof raw === 'boolean' ? { pass: raw } : raw;
       row.pass = row.result.pass;
       row.detail = row.pass
-        ? (row.result.detail ?? (row.result.files ? `${row.result.files} files` : ''))
+        ? `${row.result.detail ?? (row.result.files ? `${row.result.files} files` : '')} (${elapsed})`
         : (row.result.violations?.length
-            ? `${row.result.violations.length} violation(s)`
-            : (() => { const errs = row.result.errors ?? []; const n = errs.filter((l) => /\.(js|ts|css|md)/.test(l)).length || errs.length; return `${n} error(s)`; })());
+            ? `${row.result.violations.length} violation(s) (${elapsed})`
+            : (() => { const errs = row.result.errors ?? []; const n = errs.filter((l) => /\.(js|ts|css|md)/.test(l)).length || errs.length; return `${n} error(s) (${elapsed})`; })());
       // Rebuild violations from all currently-failed rows
       currentViolations = specRows.flatMap((r) => extractViolations(r, projectDir));
       render(rows, lastCheck, watchDirs, currentViolations);
@@ -114,15 +121,38 @@ export async function startWatch(projectDir) {
    */
   function schedule(ext) {
     for (const k of checksForExt(ext)) {
+      const row = specRows.find((r) => r.key === k);
+      if (row) row.pass = null; // show spinner while queued
       if (FAST_CHECKS.has(k)) fastPending.add(k);
       else slowPending.add(k);
     }
+    render(rows, lastCheck, watchDirs, currentViolations);
     if (fastPending.size) { clearTimeout(fastTimer); fastTimer = setTimeout(runFast, 50); }
     if (slowPending.size) { clearTimeout(slowTimer); slowTimer = setTimeout(runSlow, 1500); }
   }
 
   runKeys(new Set(specRows.map((r) => r.key)));
 
+  // f key — run fix commands for all currently-failing fixable checks
+  // Checks can provide a fix via cmds.fix[key] (built-ins) or row.fix() (extensions)
+  setOnFix(() => {
+    const fixable = specRows.filter((r) => !r.pass && (cmds.fix?.[r.key] || r.fix));
+    if (!fixable.length) return;
+    for (const row of fixable) {
+      row.pass = null; // show spinner immediately
+      slowPending.add(row.key);
+    }
+    render(rows, lastCheck, watchDirs, currentViolations);
+    for (const row of fixable) {
+      try {
+        if (row.fix) row.fix();
+        else execSync(cmds.fix[row.key], { cwd: projectDir, stdio: 'pipe' });
+      } catch { /* fixer may exit 1 even after fixing */ }
+    }
+    clearTimeout(slowTimer);
+    slowTimer = setTimeout(runSlow, 100);
+  });
+
   setupLifecycle({
     serverRow, specRows, projectDir, watchDirs,
     schedule,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techninja/clearstack",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "type": "module",
   "description": "A no-build web component framework specification — scaffold, validate, and evolve spec-compliant projects",
   "bin": {