npm - cmdzero - Versions diffs - 0.7.2 → 0.8.1 - Mend

cmdzero 0.7.2 → 0.8.1

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 (6) 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.

package/overlay/overlay.js CHANGED Viewed

@@ -81,6 +81,9 @@
   .cz-banner .cz-stat b{color:#f1f5f9;font-weight:600;margin-left:5px}
   .cz-banner .cz-stat.cz-accent b{color:#6ee7b7}
   .cz-banner a{color:#6ee7b7;text-decoration:none;flex:none}
+  .cz-banner .cz-deploy{flex:none;background:#10b981;color:#052e1b;border:none;border-radius:7px;padding:5px 12px;font-size:11.5px;font-weight:700;cursor:pointer;pointer-events:auto}
+  .cz-banner .cz-deploy:hover{background:#34d399}
+  .cz-banner .cz-deploy:disabled{opacity:.6;cursor:default}
   .cz-banner a:hover{text-decoration:underline}
   .cz-banner .cz-idle{color:#64748b}
   .cz-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
@@ -262,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;
@@ -447,6 +491,7 @@
     renderPopover();
     renderPanel();
     reposition();
+    watchLayout(); // renderPanel() just started the panel's .26s page push
     loadMeta();
   }
@@ -1083,11 +1128,26 @@
   const brand = el('div', 'cz-brand');
   brand.innerHTML = '<kbd>⌘0</kbd> CmdZero';
   const bannerStats = el('div', 'cz-stats');
-  const reportLink = el('a', null, 'report →');
-  reportLink.href = 'https://cmdzero.dev/report';
-  reportLink.target = '_blank';
-  reportLink.rel = 'noopener';
-  banner.append(brand, bannerStats, reportLink);
+  // Build & Deploy — commits the current tweaks and pushes them to the live site
+  // (the daemon runs it through headless claude).
+  const deployBtn = el('button', 'cz-deploy', 'Build & Deploy ↗');
+  let deployId = null;
+  deployBtn.onclick = async () => {
+    if (deployBtn.disabled) return;
+    if (!confirm('Build & deploy the current tweaks to your live site?')) return;
+    deployBtn.disabled = true;
+    deployBtn.textContent = 'Deploying…';
+    try {
+      const r = await api('deploy', {});
+      deployId = String(r.id);
+      addTweak({ id: r.id, status: 'queued', label: 'Build & Deploy — committing & deploying…' });
+    } catch (e) {
+      resetDeployBtn();
+      addTweak({ id: 'x' + Date.now(), status: 'error', label: `deploy: ${e.message}` });
+    }
+  };
+  function resetDeployBtn() { deployBtn.disabled = false; deployBtn.textContent = 'Build & Deploy ↗'; }
+  banner.append(brand, bannerStats, deployBtn);
   root.appendChild(banner);
   // Push the page down so the banner sits ABOVE the site rather than over it.
   // Inject a stylesheet instead of mutating body's style attribute: frameworks
@@ -1225,8 +1285,10 @@
       row._dot.className = 'cz-dot ' + t.status;
       const inFlight = t.status === 'queued' || t.status === 'running';
       row._cancel.style.display = inFlight ? '' : 'none';
-      const undoable = t.status === 'done' && !key.startsWith('x');
+      const undoable = t.status === 'done' && !key.startsWith('x') && t.kind !== 'deploy';
       row._undo.style.display = undoable ? '' : 'none';
+      // re-enable the Build & Deploy button once its task settles
+      if (typeof deployId !== 'undefined' && deployId && key === deployId && ['done', 'error', 'cancelled'].includes(t.status)) resetDeployBtn();
       if (undoable && !undoStack.includes(key)) undoStack.push(key);
       if (t.status === 'reverted') {
         const i = undoStack.indexOf(key);
@@ -1277,6 +1339,11 @@
     .then((h) => {
       showTotals(h.totals);
       if (h.tailwind === false) state.tailwind = false;
+      // Show the running overlay version so a stale/cached overlay is obvious.
+      if (h.version) {
+        brand.innerHTML = `<kbd>⌘0</kbd> CmdZero <span style="opacity:.45;font-weight:400">v${h.version}</span>`;
+        console.log(`[cmdzero] overlay v${h.version} — newest alerts at the bottom of the tray`);
+      }
     })
     .catch(() => {});
@@ -1358,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.7.2",
+  "version": "0.8.1",
   "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",

package/src/router.js CHANGED Viewed

@@ -274,3 +274,44 @@ export function runClaude({ prompt, model, effort, cwd, onEvent, onSpawn }) {
     onEvent?.({ status: 'running', model });
   });
 }
+// "Build & Deploy": run the deploy through headless claude (Bash allowed) so it
+// commits the current tweaks and pushes them to the live site.
+const DEPLOY_PROMPT = `You are deploying this project to production. Using the Bash tool, do exactly this, in order:
+1. Run \`git add -A\`, then commit with a short message describing recent UI tweaks. Do NOT add any AI attribution/co-author trailer. If there is nothing to commit, continue.
+2. If a git remote named "origin" exists, run \`git push\`.
+3. Deploy to production. This is a Vercel project — run: \`vercel --prod --yes\`
+On the FINAL line of your reply, output the production URL exactly as: DEPLOY_URL=<url>
+If any step fails, stop and report the exact error.`;
+export function runDeploy({ cwd, model = 'claude-sonnet-5', onEvent, onSpawn }) {
+  return new Promise((resolve) => {
+    const started = Date.now();
+    const args = [
+      '-p', DEPLOY_PROMPT,
+      '--model', model,
+      '--allowedTools', 'Read,Edit,Bash',
+      '--dangerously-skip-permissions', // headless: commit/push/deploy without prompts
+      '--output-format', 'json',
+    ];
+    const child = spawn('claude', args, { cwd, env: { ...process.env, CLAUDE_CODE_ENTRYPOINT: undefined }, detached: true });
+    let cancelled = false;
+    const signalGroup = (sig) => { try { process.kill(-child.pid, sig); } catch { try { child.kill(sig); } catch {} } };
+    child.__cancel = () => { cancelled = true; signalGroup('SIGTERM'); setTimeout(() => { if (!child.killed) signalGroup('SIGKILL'); }, 1500).unref?.(); };
+    onSpawn?.(child);
+    let out = '', err = '';
+    child.stdout.on('data', (d) => (out += d));
+    child.stderr.on('data', (d) => (err += d));
+    child.on('close', (code) => {
+      const durationMs = Date.now() - started;
+      if (cancelled) return resolve({ ok: false, cancelled: true, durationMs });
+      if (code !== 0) return resolve({ ok: false, error: err.trim() || `claude exited ${code}`, durationMs });
+      let result = out;
+      try { result = JSON.parse(out).result || out; } catch { /* raw text */ }
+      const m = /DEPLOY_URL=(\S+)/.exec(result);
+      resolve({ ok: true, durationMs, url: m ? m[1] : null, result: String(result).slice(0, 500) });
+    });
+    child.on('error', (e) => resolve({ ok: false, error: `failed to spawn claude: ${e.message}` }));
+    onEvent?.({ status: 'running' });
+  });
+}

package/src/server.js CHANGED Viewed

@@ -3,7 +3,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { describeTarget, applyTextEdit, applyClassEdit, applyStyleEdit, applyDeleteElement, applyMove, parseLoc, checkSyntax } from './resolver.js';
-import { classify, buildPrompt, runClaude } from './router.js';
+import { classify, buildPrompt, runClaude, runDeploy } from './router.js';
 import { initTelemetry, DISCLOSURE } from './telemetry.js';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -77,7 +77,7 @@ export function startServer({ root, port = 4100 }) {
       }
       if (req.method === 'GET' && url.pathname === '/api/health') {
-        return json(res, { ok: true, root, totals, tailwind, telemetry: !telemetry.disabled });
+        return json(res, { ok: true, version: VERSION, root, totals, tailwind, telemetry: !telemetry.disabled });
       }
       if (req.method === 'GET' && url.pathname === '/api/events') {
@@ -184,6 +184,32 @@ export function startServer({ root, port = 4100 }) {
           return json(res, { ok: true, ...route });
         }
+        if (url.pathname === '/api/deploy') {
+          const id = nextId++;
+          telemetry.record('deploy');
+          broadcast({ type: 'tweak', id, kind: 'deploy', status: 'queued', label: 'Build & Deploy — committing & deploying…' });
+          json(res, { ok: true, id });
+          const result = await runDeploy({
+            cwd: root,
+            onEvent: (e) => broadcast({ type: 'tweak', id, ...e }),
+            onSpawn: (child) => running.set(String(id), child),
+          });
+          running.delete(String(id));
+          if (result.cancelled) {
+            broadcast({ type: 'tweak', id, status: 'cancelled', label: 'deploy cancelled' });
+            return;
+          }
+          broadcast({
+            type: 'tweak', id,
+            kind: 'deploy',
+            status: result.ok ? 'done' : 'error',
+            durationMs: result.durationMs,
+            label: result.ok ? (result.url ? `deployed → ${result.url}` : 'deployed to production') : 'deploy failed',
+            error: result.ok ? undefined : (result.error || '').slice(0, 200),
+          });
+          return;
+        }
         if (url.pathname === '/api/nl') {
           const id = nextId++;
           const { file } = parseLoc(body.loc);

package/src/telemetry.js CHANGED Viewed

@@ -53,7 +53,7 @@ export function initTelemetry({ version, tailwind }) {
     saveConfig(config);
   }
   const disabled = telemetryDisabled();
-  const counts = { copy: 0, style: 0, delete: 0, nl: 0, move: 0 };
+  const counts = { copy: 0, style: 0, delete: 0, nl: 0, move: 0, deploy: 0 };
   let flushTimer = null;
   function send(event, extra = {}) {