@techninja/clearstack 0.4.32 → 0.4.34

package/lib/watch-ui.js

@@ -40,9 +40,11 @@ const rowLine = (r, w) => {
   const n = (r.label ?? r.name ?? r.key).padEnd(w);
   const isIdle = r.pass === false && r.keyBinding;
   const name = (!isIdle && r.pass === false) ? `{red-fg}${n}{/}` : n;
-  const detail = isIdle
-    ? `{grey-fg}${r.ranAt ? timeAgo(r.ranAt) : `press ${r.keyBinding} to run`}{/}`
-    : (r.detail ? `{grey-fg}${r.detail}{/}` : '');
+  const rawDetail = isIdle
+    ? (r.ranAt ? timeAgo(r.ranAt) : `press ${r.keyBinding} to run`)
+    : (r.detail ?? '');
+  const isError = r.key === 'server' && /error/i.test(rawDetail);
+  const detail = rawDetail ? `{${isError ? 'red' : 'grey'}-fg}${rawDetail}{/}` : '';
   return ` ${rowIcon(r)} ${name}  ${detail}`;
 };
 
@@ -51,8 +53,12 @@ const rowLine = (r, w) => {
 /** @param {object[]} rows @param {string} lastCheck @param {string[]} watchDirs */
 function statusContent(rows, lastCheck, watchDirs) {
   const w = Math.max(...rows.map((r) => (r.label ?? r.name ?? r.key).length));
-  return [...rows.map((r) => rowLine(r, w)), '',
-    `{grey-fg} watching ${watchDirs.join(', ')}   last check: ${lastCheck}{/}${getCopyNote()}`];
+  const server = rows.filter((r) => r.key === 'server');
+  const failing = rows.filter((r) => r.key !== 'server' && r.pass === false);
+  const rest = rows.filter((r) => r.key !== 'server' && r.pass !== false);
+  const sorted = [...server, ...failing, ...rest];
+  const footer = `{grey-fg} watching ${watchDirs.join(', ')}   last check: ${lastCheck}{/}${getCopyNote()}`;
+  return [...sorted.map((r) => rowLine(r, w)), '', footer];
 }
 
 // ── Public API ────────────────────────────────────────────────────────────────
@@ -66,10 +72,13 @@ function statusContent(rows, lastCheck, watchDirs) {
  */
 export function render(rows, lastCheck, watchDirs, violations) {
   const lines = statusContent(rows, lastCheck, watchDirs);
-  statusBox.setContent(lines.join('\n'));
-  statusBox.height = lines.length;
+  const termH = (screen.height ?? 24) - 2; // subtract outer border
+  const maxStatus = Math.max(1, termH - (violations.length ? Math.floor(termH / 2) : 0));
+  const visible = lines.slice(0, maxStatus);
+  statusBox.setContent(visible.join('\n'));
+  statusBox.height = visible.length;
 
-  const statusHeight = lines.length + 1;
+  const statusHeight = visible.length + 1;
   divider.top = statusHeight;
   logBox.top = statusHeight + 1;
 

package/package.json

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