cmdzero 0.7.0 → 0.7.2

package/README.md

@@ -1,3 +1,7 @@
+<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">
+</p>
+
 # CmdZero
 
 Tweak your UI live in the browser — the changes are written straight to your source files.

package/overlay/overlay.js

@@ -85,8 +85,8 @@
   .cz-banner .cz-idle{color:#64748b}
   .cz-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
   .cz-wrap.cz-expanded{max-height:calc(100vh - 90px);overflow-y:auto;overflow-x:hidden;padding:2px}
-  .cz-wrap:not(.cz-expanded) > .cz-tweak:nth-child(n+4){display:none}
-  .cz-fade{height:16px;width:160px;background:linear-gradient(to bottom,rgba(17,24,39,0),rgba(17,24,39,.55));pointer-events:none;margin-top:-10px}
+  .cz-wrap:not(.cz-expanded) > .cz-tweak:nth-last-child(n+4){display:none}
+  .cz-fade{height:14px;width:160px;background:linear-gradient(to top,rgba(17,24,39,0),rgba(17,24,39,.5));pointer-events:none;margin-bottom:-8px}
   .cz-history{background:#0b1220;color:#93c5fd;border:1px solid #263041;border-radius:8px;padding:4px 10px;font-size:11.5px;cursor:pointer;pointer-events:auto;box-shadow:0 4px 14px rgba(0,0,0,.3)}
   .cz-history:hover{border-color:#6366f1}
   .cz-tweak{background:#111827;color:#e5e7eb;border-radius:8px;padding:7px 11px;font-size:13px;display:flex;gap:8px;align-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3);white-space:nowrap;width:max-content;max-width:720px;overflow:hidden;text-overflow:ellipsis}
@@ -546,10 +546,14 @@
     multiBar._draft = '';
     clearMulti();
     for (const t of targets) {
+      const tempId = 'nl-' + Date.now() + t.loc;
+      addTweak({ id: tempId, status: 'queued', label: `${shortLoc(t.loc)}: ${instruction.slice(0, 40)}` });
       try {
         const r = await api('nl', { loc: t.loc, instruction, model: state.model });
+        removeTweak(tempId);
         addTweak({ id: r.id, status: 'queued', model: r.model, label: `${shortLoc(t.loc)}: ${instruction.slice(0, 40)}` });
       } catch (e) {
+        removeTweak(tempId);
         addTweak({ id: 'x' + Date.now() + t.loc, status: 'error', label: `${shortLoc(t.loc)}: ${e.message}` });
       }
     }
@@ -962,7 +966,7 @@
 
     const nlWrap = el('div', 'cz-nlwrap');
     const input = el('textarea');
-    input.placeholder = 'Describe a change… (⌘↵ to send)';
+    input.placeholder = 'Describe a change… (↵ to send · ⇧↵ newline)';
     input.rows = 3;
     const go = el('button', 'cz-primary', 'Go →');
     const send = async () => {
@@ -970,16 +974,23 @@
       if (!instruction) return;
       input.value = '';
       input.blur(); // so the reload after the model finishes isn't blocked by focus
+      // Immediate feedback — the server runs the router (which may call the
+      // classifier for ~1-3s) before it broadcasts its own 'queued', so show a
+      // placeholder now and swap in the real task once the request returns.
+      const tempId = 'nl-' + Date.now();
+      addTweak({ id: tempId, status: 'queued', label: instruction.slice(0, 60) });
       try {
         const r = await api('nl', { loc: s.loc, instruction, model: state.model });
+        removeTweak(tempId);
         addTweak({ id: r.id, status: 'queued', model: r.model, label: instruction.slice(0, 60) });
       } catch (e) {
-        addTweak({ id: 'x' + Date.now(), status: 'error', label: e.message });
+        removeTweak(tempId);
+        addTweak({ id: 'x' + Date.now(), status: 'error', label: `${instruction.slice(0, 40)}: ${e.message}` });
       }
     };
     go.onclick = send;
-    // ⌘↵ / Ctrl↵ sends; plain Enter inserts a newline (multi-line prompts).
-    input.onkeydown = (e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); send(); } e.stopPropagation(); };
+    // Enter sends; Shift+Enter inserts a newline for multi-line prompts.
+    input.onkeydown = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } e.stopPropagation(); };
     const goRow = el('div', 'cz-row');
     goRow.style.justifyContent = 'flex-end';
     goRow.appendChild(go);
@@ -1093,18 +1104,24 @@
   // ---------- tray ----------
   const tray = el('div', 'cz-tray');
   root.appendChild(tray);
-  // Alerts live in their own wrap so history can collapse independently.
-  // Newest is inserted at the top; the 3 newest stay visible (compressed; hover to expand) and older
-  // ones fold behind an expander.
+  // Reads like a log: newest alert sits at the bottom-right corner, older ones
+  // stack upward. The 3 newest stay visible (compressed; hover to expand); the
+  // rest fold behind an expander that sits ABOVE them.
+  const historyChip = el('div', 'cz-history');
+  historyChip.style.display = 'none';
   const tweaksWrap = el('div', 'cz-wrap');
-  tray.appendChild(tweaksWrap);
+  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';
   tray.appendChild(fade);
-  const historyChip = el('div', 'cz-history');
-  historyChip.style.display = 'none';
-  historyChip.onclick = () => { tweaksWrap.classList.toggle('cz-expanded'); updateHistoryUI(); };
-  tray.appendChild(historyChip);
+  tray.appendChild(tweaksWrap);
   const tweaks = new Map();
   const tweakData = new Map(); // id -> merged record, persisted across reloads
   const HKEY = 'cz-history';
@@ -1160,6 +1177,15 @@
   }
   showTotals(null); // idle banner on load until /api/health arrives
 
+  function removeTweak(id) {
+    const key = String(id);
+    const row = tweaks.get(key);
+    if (row) row.remove();
+    tweaks.delete(key);
+    tweakData.delete(key);
+    updateHistoryUI();
+  }
+
   function addTweak(t, hydrate) {
     const key = String(t.id);
     let row = tweaks.get(key);
@@ -1185,13 +1211,13 @@
         } catch (e) { row._meta.textContent = e.message; }
       };
       row.append(row._dot, row._label, row._meta, row._cancel, row._undo);
-      tweaksWrap.insertBefore(row, tweaksWrap.firstChild);
+      tweaksWrap.appendChild(row); // newest at the end (bottom of the tray)
       tweaks.set(key, row);
       while (tweaksWrap.children.length > MAX_TWEAKS) {
-        const last = tweaksWrap.lastChild;
-        tweaks.delete(last._id);
-        tweakData.delete(last._id);
-        last.remove();
+        const oldest = tweaksWrap.firstChild;
+        tweaks.delete(oldest._id);
+        tweakData.delete(oldest._id);
+        oldest.remove();
       }
     }
     if (t.label) row._label.textContent = t.label;
@@ -1228,13 +1254,14 @@
     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.
   (function hydrateTweaks() {
     let saved;
     try { saved = JSON.parse(localStorage.getItem(HKEY) || '[]'); } catch { saved = []; }
-    for (const rec of saved) addTweak(rec, true); // oldest→newest keeps newest on top
+    for (const rec of saved) addTweak(rec, true); // chronological replay → newest ends at the bottom
   })();
 
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmdzero",
-  "version": "0.7.0",
+  "version": "0.7.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",

package/src/server.js

@@ -70,6 +70,9 @@ export function startServer({ root, port = 4100 }) {
     try {
       if (req.method === 'GET' && url.pathname === '/overlay.js') {
         res.setHeader('Content-Type', 'text/javascript');
+        // Never cache the overlay — the daemon is the source of truth, so a
+        // reload always picks up the latest build (no stale-overlay confusion).
+        res.setHeader('Cache-Control', 'no-store, must-revalidate');
         return res.end(fs.readFileSync(OVERLAY_PATH));
       }