cmdzero 0.7.1 → 0.8.0

package/overlay/overlay.js

@@ -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}
@@ -1083,11 +1086,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
@@ -1110,7 +1128,13 @@
   const historyChip = el('div', 'cz-history');
   historyChip.style.display = 'none';
   const tweaksWrap = el('div', 'cz-wrap');
-  historyChip.onclick = () => { tweaksWrap.classList.toggle('cz-expanded'); updateHistoryUI(); };
+  const pinNewestToBottom = () => { if (tweaksWrap.classList.contains('cz-expanded')) tweaksWrap.scrollTop = tweaksWrap.scrollHeight; };
+  historyChip.onclick = () => {
+    tweaksWrap.classList.toggle('cz-expanded');
+    updateHistoryUI();
+    // when expanded the list scrolls; keep the newest (bottom) in view
+    requestAnimationFrame(pinNewestToBottom);
+  };
   tray.appendChild(historyChip);
   const fade = el('div', 'cz-fade');
   fade.style.display = 'none';
@@ -1219,8 +1243,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);
@@ -1248,6 +1274,7 @@
     tweakData.set(key, { ...(tweakData.get(key) || {}), ...t, id: key });
     if (!hydrate) persistTweaks();
     updateHistoryUI();
+    if (!hydrate) pinNewestToBottom(); // keep the newest alert in view when expanded
   }
 
   // Replay saved alerts after a page load so history survives reloads.
@@ -1270,6 +1297,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(() => {});
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmdzero",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "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

@@ -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

@@ -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

@@ -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 = {}) {