npm - cmdzero - Versions diffs - 0.8.0 → 0.8.2 - Mend

cmdzero 0.8.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -1,8 +1,14 @@
+# CmdZero
 <p align="center">
-  <img src="https://raw.githubusercontent.com/adamcwade/cmdzero/main/assets/hero.png" alt="CmdZero — tweak your UI live in the browser; changes land in your source" width="900">
+  <img src="https://raw.githubusercontent.com/adamcwade/cmdzero/main/assets/hero.png" alt="CmdZero — live in-browser UI editing with a style panel, inline copy editing, and a token-savings banner" width="900">
 </p>
-# CmdZero
+<p align="center">
+  <strong><a href="https://cmdzero.xyz/demo">▶︎ Try the live demo — no install</a></strong>
+</p>
+Press `⌘0` and edit a real page with the real overlay, running entirely in your browser. Copy, style, reorder, delete and undo all work; natural-language prompts are scripted (no model is called) and nothing is written to disk.
 Tweak your UI live in the browser — the changes are written straight to your source files.
@@ -59,9 +65,15 @@ Opt out permanently:
 export CMDZERO_TELEMETRY=0   # or DO_NOT_TRACK=1 — both respected
 ```
+Telemetry never blocks or breaks the daemon: it's fire-and-forget with a 3s
+timeout and no retries. It's also silent about its own failures by default — set
+`CMDZERO_TELEMETRY_DEBUG=1` to log delivery errors, or read
+`curl -s localhost:4100/api/health | jq` for the last send and last error.
 ## Options
 - `npx cmdzero --port 4101` (+ `<CmdZeroOverlay origin="http://localhost:4101" />`)
 - `CMDZERO_FAST_MODEL` / `CMDZERO_SMART_MODEL` — model aliases for the router (default `haiku` / `sonnet`)
 - `CMDZERO_BASELINE_COST` / `CMDZERO_BASELINE_MS` — baseline for the savings counter
+- `CMDZERO_TELEMETRY=0` / `DO_NOT_TRACK=1` — opt out of telemetry; `CMDZERO_TELEMETRY_DEBUG=1` logs delivery failures
 - Natural-language tweaks require the [Claude Code CLI](https://claude.com/claude-code) (`claude`) on your PATH; copy/style lanes work without it.

package/overlay/overlay.js CHANGED Viewed

@@ -265,6 +265,47 @@
     try { localStorage.setItem('cz-panel-collapsed', v ? '1' : '0'); } catch { /* no storage */ }
     applyPanelLayout();
   }
+  // Everything the overlay draws — outline, popover, move bar, delete button,
+  // hover badge — is position:fixed at coordinates measured once from
+  // getBoundingClientRect(). The page moves under those coordinates constantly:
+  // opening the panel animates <body>'s margin for .26s, that push narrows the
+  // viewport so text re-wraps and blocks shift down, an edit changes an
+  // element's size, fonts and images land, the page runs its own animations.
+  // reposition() on scroll/resize/select catches none of that, which is why a
+  // box could sit up to PANEL_W px from its element until something unrelated
+  // happened to re-measure.
+  //
+  // Chasing each cause separately is a losing game, so watch the element
+  // itself: compare its rect every frame and redraw only when it actually
+  // moved. rAF is the right clock — it's gated on painting exactly like the
+  // transitions and reflows we're chasing, so we never measure a layout the
+  // user hasn't seen yet. Idle cost is one getBoundingClientRect and a string
+  // compare per frame, and the loop only runs while the overlay has something
+  // on screen to keep glued.
+  let watchRaf = 0;
+  let lastRect = '';
+  function watchLayout() {
+    if (watchRaf) return; // already running
+    const step = () => {
+      if (!state.selectMode && !state.selected) { watchRaf = 0; lastRect = ''; return; }
+      const target = state.selected?.el || state.hoverEl;
+      if (target && document.contains(target)) {
+        const r = target.getBoundingClientRect();
+        const key = `${r.left},${r.top},${r.width},${r.height}`;
+        if (key !== lastRect) {
+          lastRect = key;
+          // the same trio the scroll handler runs — a scroll strands these
+          // boxes for exactly the same reason any other layout shift does
+          reposition();
+          positionMulti();
+          setHover(state.hoverEl);
+        }
+      }
+      watchRaf = requestAnimationFrame(step);
+    };
+    watchRaf = requestAnimationFrame(step);
+  }
   // Slide the panel in/out and push the page so nothing is covered.
   function applyPanelLayout() {
     const open = !!state.selected && !state.panelCollapsed;
@@ -450,6 +491,7 @@
     renderPopover();
     renderPanel();
     reposition();
+    watchLayout(); // renderPanel() just started the panel's .26s page push
     loadMeta();
   }
@@ -1383,7 +1425,8 @@
   function setMode(on) {
     state.selectMode = on;
     hint.textContent = on ? 'select mode — click · shift-click multi · Tab next · ⌘Z undo · Esc exit' : '⌘0 select mode';
-    if (!on) { setHover(null); deselect(); clearMulti(); }
+    if (on) watchLayout(); // keep the boxes glued while anything on the page moves
+    else { setHover(null); deselect(); clearMulti(); }
   }
   // Visible, stamped elements in document order — the Tab cycle.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "cmdzero",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Tweak your UI live in the browser and write the changes straight to source. Copy and Tailwind edits cost zero tokens; everything else routes to a right-sized model via headless claude.",
   "license": "MIT",
   "type": "module",
@@ -8,7 +8,8 @@
     "cmdzero": "bin/cmdzero.js"
   },
   "scripts": {
-    "start": "node bin/cmdzero.js"
+    "start": "node bin/cmdzero.js",
+    "test": "node --test test/*.test.js"
   },
   "files": [
     "bin",

package/src/server.js CHANGED Viewed

@@ -77,7 +77,17 @@ export function startServer({ root, port = 4100 }) {
       }
       if (req.method === 'GET' && url.pathname === '/api/health') {
-        return json(res, { ok: true, version: VERSION, root, totals, tailwind, telemetry: !telemetry.disabled });
+        const { lastSentAt, lastError } = telemetry.status();
+        return json(res, {
+          ok: true,
+          version: VERSION,
+          root,
+          totals,
+          tailwind,
+          telemetry: !telemetry.disabled,
+          telemetryLastSentAt: lastSentAt,
+          telemetryLastError: lastError,
+        });
       }
       if (req.method === 'GET' && url.pathname === '/api/events') {
@@ -317,8 +327,10 @@ export function startServer({ root, port = 4100 }) {
   });
   server.listen(port, () => {
     console.log(`[cmdzero] daemon on http://localhost:${port} (root: ${root})`);
-    console.log('[cmdzero] docs & updates → https://cmdzero.dev');
+    console.log('[cmdzero] docs & updates → https://cmdzero.xyz');
     if (telemetry.firstRun && !telemetry.disabled) console.log(DISCLOSURE);
+    // After the disclosure, never before it.
+    telemetry.start();
   });
   return server;
 }

package/src/telemetry.js CHANGED Viewed

@@ -9,9 +9,13 @@ import path from 'node:path';
 import crypto from 'node:crypto';
 const ENDPOINT =
-  process.env.CMDZERO_TELEMETRY_URL || 'https://telemetry.cmdzero.dev/v1/events';
+  process.env.CMDZERO_TELEMETRY_URL || 'https://telemetry.cmdzero.xyz/v1/events';
 const CONFIG_PATH = path.join(os.homedir(), '.cmdzero', 'telemetry.json');
 const FLUSH_MS = 60_000;
+// Off by default: this runs in other people's dev terminals, and telemetry that
+// complains about itself is worse than telemetry that fails. Delivery status is
+// always readable via /api/health regardless of this flag.
+const DEBUG = process.env.CMDZERO_TELEMETRY_DEBUG === '1';
 export function telemetryDisabled() {
   const v = String(process.env.CMDZERO_TELEMETRY ?? '').toLowerCase();
@@ -55,6 +59,19 @@ export function initTelemetry({ version, tailwind }) {
   const disabled = telemetryDisabled();
   const counts = { copy: 0, style: 0, delete: 0, nl: 0, move: 0, deploy: 0 };
   let flushTimer = null;
+  let lastSentAt = null;
+  let lastError = null;
+  // Must never throw: it runs inside the promise handlers below.
+  function note(what, err) {
+    if (!err) {
+      lastSentAt = new Date().toISOString();
+      lastError = null;
+      return;
+    }
+    lastError = { at: new Date().toISOString(), message: `${what}: ${err}` };
+    if (DEBUG) console.error(`[cmdzero] telemetry ${what} failed: ${err}`);
+  }
   function send(event, extra = {}) {
     if (disabled) return;
@@ -73,9 +90,15 @@ export function initTelemetry({ version, tailwind }) {
           ...extra,
         }),
         signal: AbortSignal.timeout(3000),
-      }).catch(() => {});
-    } catch {
-      /* fire and forget */
+      })
+        .then((res) => note(event, res.ok ? null : `HTTP ${res.status}`))
+        // Terminal, and it has to stay that way. If .then() were the tail of this
+        // chain a network failure would surface as an unhandled rejection, which
+        // Node turns into a dead daemon in someone else's terminal — the
+        // .catch(() => {}) this replaces was the only thing preventing that.
+        .catch((err) => note(event, err?.message || err));
+    } catch (err) {
+      note(event, err?.message || err);
     }
   }
@@ -92,6 +115,12 @@ export function initTelemetry({ version, tailwind }) {
     }
   }
-  send('boot');
-  return { firstRun, disabled, record };
+  // Not fired here. server.js calls start() once the first-run disclosure has
+  // actually printed, so a first-time user's first event never precedes the
+  // notice that tells them it's coming.
+  function start() {
+    send('boot');
+  }
+  return { firstRun, disabled, record, start, status: () => ({ lastSentAt, lastError }) };
 }