transitions-refine 0.3.14 → 0.3.16

package/README.md

@@ -98,6 +98,8 @@ Like Replace, Accept needs the agent — run `/refine live` (or `--llm` / `REFIN
 | `REFINE_RELAY_PORT` | `7331` | relay port |
 | `REFINE_AGENT_CMD` | — | one-shot LLM CLI the relay spawns per job |
 | `REFINE_AGENT_TIMEOUT_MS` | `120000` | per-run timeout |
+| `REFINE_SCAN_MODEL` | `composer-2.5-fast` | cursor-agent model for the initial group scan (`""` = agent default) |
+| `REFINE_SCAN_EFFORT` | `low` | Codex reasoning effort for the scan — `minimal\|low\|medium\|high` (`""` = configured effort) |
 | `REFINE_AUTO=0` | — | disable auto-answer and wait for an external poller |
 | `window.REFINE_RELAY_URL` | injected origin | browser override for the relay URL |
 

package/demo.html

@@ -1437,32 +1437,49 @@
     .tl-scan-note .tl-dotm { width: 14px; height: 14px; }
     .tl-scan-error { color: var(--c-warn, #c2410c); }
     .tl-scan-error svg { flex: none; }
-    /* /refine live chip — warns the chat-loop mode bills credits while idle */
+    /* /refine live chip — Figma icons 594:22938. Live = green chip + green Stop
+       pill; Live Off = gray chip, no button. Tooltip warns the chat-loop mode
+       bills credits while idle. */
     .tl-live-wrap { display: inline-flex; }
-    .tl-live-chip { display: inline-flex; align-items: center; gap: 6px;
-      height: 22px; padding: 0 4px 0 8px; border-radius: 999px;
-      font-size: 11px; font-weight: 600; line-height: 1; cursor: help;
-      color: #b45309; background: rgba(217,119,6,0.12);
-      border: 1px solid rgba(217,119,6,0.28);
+    /* LIVE (active) — node 594:22828 */
+    .tl-live-chip { box-sizing: border-box; display: inline-flex; align-items: center;
+      justify-content: space-between; width: 94px; height: 28px; padding: 0 2px 0 9px;
+      border-radius: 36px; cursor: help;
+      background: rgba(132,211,125,0.1);
+      box-shadow: 0 1px 3px 0 rgba(0,220,37,0.06),
+        inset 0 0 0 1px rgba(48,124,21,0.06), inset 0 -1px 0 0 rgba(0,85,9,0.08);
       /* mount: token dropdown-open feel — 250ms Fast, scale 0.97, smooth ease out */
       animation: tl-live-in 250ms cubic-bezier(0.22,1,0.36,1) both; }
-    html[data-theme="dark"] .tl-live-chip { color: #fbbf24;
-      background: rgba(251,191,36,0.13); border-color: rgba(251,191,36,0.3); }
-    .tl-live-chip.is-stopped { color: var(--c-count); background: rgba(127,127,127,0.1);
-      border-color: rgba(127,127,127,0.26); padding: 0 8px; }
-    .tl-live-chip.is-stopped svg { flex: none; }
-    .tl-live-dot { width: 7px; height: 7px; border-radius: 50%;
-      background: currentColor; flex: none;
+    .tl-live-main { display: inline-flex; align-items: center; gap: 5px; flex: none; }
+    .tl-live-label { font-size: 12px; font-weight: 400; line-height: 14px; color: #18a32f; white-space: nowrap; }
+    html[data-theme="dark"] .tl-live-label { color: #4ade80; }
+    .tl-live-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
+      background: #34CC20; box-shadow: inset 0 0 0 0.5px rgba(0,182,30,0.55);
       animation: tl-live-pulse 1600ms linear infinite; }
-    .tl-live-stop { all: unset; cursor: pointer; font: inherit; font-size: 10px;
-      font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
-      color: inherit; padding: 3px 7px; border-radius: 999px;
-      background: rgba(217,119,6,0.16);
-      transition: background 150ms cubic-bezier(0.22,1,0.36,1); }
-    html[data-theme="dark"] .tl-live-stop { background: rgba(251,191,36,0.18); }
-    .tl-live-stop:hover { background: rgba(217,119,6,0.32); }
-    html[data-theme="dark"] .tl-live-stop:hover { background: rgba(251,191,36,0.34); }
-    .tl-live-stop:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
+    /* Stop pill — node 594:22874 (default / hover+active = Variant2/3) */
+    .tl-live-stop { all: unset; box-sizing: border-box; cursor: pointer; flex: none;
+      display: inline-flex; align-items: center; justify-content: center;
+      height: 24px; padding: 0 8px; border-radius: 36px;
+      font-size: 12px; font-weight: 500; line-height: 14px; color: #118c25;
+      background: rgba(68,167,84,0.1);
+      box-shadow: inset 0 0 0 1px rgba(18,130,28,0.04);
+      transition: background 150ms cubic-bezier(0.22,1,0.36,1),
+        color 150ms cubic-bezier(0.22,1,0.36,1); }
+    .tl-live-stop:hover,
+    .tl-live-stop:active { background: rgba(68,167,84,0.2); color: #057217; }
+    html[data-theme="dark"] .tl-live-stop { color: #4ade80; }
+    html[data-theme="dark"] .tl-live-stop:hover,
+    html[data-theme="dark"] .tl-live-stop:active { color: #86efac; }
+    .tl-live-stop:focus-visible { outline: 2px solid #118c25; outline-offset: 1px; }
+    /* LIVE OFF — node 594:22912 (gray, no button) */
+    .tl-live-chip.is-stopped { width: auto; justify-content: flex-start; padding: 0 9px;
+      background: rgba(102,102,102,0.04);
+      box-shadow: 0 1px 3px 0 rgba(0,0,0,0.02),
+        inset 0 0 0 1px rgba(77,77,77,0.1), inset 0 -1px 0 0 rgba(0,0,0,0.04); }
+    .tl-live-chip.is-stopped .tl-live-dot { background: #A1A1A1;
+      box-shadow: inset 0 0 0 0.5px rgba(146,146,146,0.6); animation: none; }
+    .tl-live-chip.is-stopped .tl-live-label { color: #525252; }
+    html[data-theme="dark"] .tl-live-chip.is-stopped .tl-live-label { color: #a1a1a1; }
     @keyframes tl-live-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
     @keyframes tl-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
     @media (prefers-reduced-motion: reduce) {
@@ -2906,8 +2923,9 @@
         chatLoop
           ? h("span",{className:"t-tt-wrap tl-live-wrap"},
               h("span",{className:"tl-live-chip",tabIndex:0},
-                h("span",{className:"tl-live-dot"}),
-                h("span",null,"Live"),
+                h("span",{className:"tl-live-main"},
+                  h("span",{className:"tl-live-dot"}),
+                  h("span",{className:"tl-live-label"},"Live")),
                 h("button",{className:"tl-live-stop",title:"Stop /refine live",
                   onClick:(e)=>{e.stopPropagation();onStopLive&&onStopLive();}},"Stop")),
               h("span",{className:"t-tt tl-tt-below tl-tt-msg",role:"tooltip"},
@@ -2915,8 +2933,9 @@
           : liveStopped
             ? h("span",{className:"t-tt-wrap tl-live-wrap"},
                 h("span",{className:"tl-live-chip is-stopped",tabIndex:0},
-                  h(Ic,{name:"check",size:12}),
-                  h("span",null,"Live stopped")),
+                  h("span",{className:"tl-live-main"},
+                    h("span",{className:"tl-live-dot"}),
+                    h("span",{className:"tl-live-label"},"Live Off"))),
                 h("span",{className:"t-tt tl-tt-below tl-tt-msg",role:"tooltip"},
                   "The `/refine live` loop was asked to stop and will exit on its next poll. Run `/refine live` again to resume."))
             : null,
@@ -4159,9 +4178,11 @@
           cssRules:harvestCssHints(e)}));
         try{
           const{id}=await relayCreateJob({kind:"scan",url:location.href,raw});
-          for(let i=0;i<500;i++){
+          for(let i=0;i<520;i++){
             if(scanTokenRef.current!==token)return; // superseded / unmounted
-            await new Promise(r=>setTimeout(r,300));
+            // Ramp: poll fast (120ms) for the first ~2.4s so a quick scan returns
+            // almost immediately, then settle to 300ms to keep the request rate low.
+            await new Promise(r=>setTimeout(r,i<20?120:300));
             if(scanTokenRef.current!==token)return;
             const job=await relayGetJob(id);
             if(job.status==="done"){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "transitions-refine",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "description": "Live, agent-driven Refine panel for CSS/Motion transitions — injects a timeline + Refine UI and runs transitions.dev suggestions via your coding agent.",
   "type": "module",
   "bin": {

package/server/relay.mjs

@@ -25,7 +25,7 @@
 import { createServer } from "node:http";
 import { randomUUID } from "node:crypto";
 import { spawn } from "node:child_process";
-import { existsSync } from "node:fs";
+import { existsSync, readFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { delimiter, join } from "node:path";
 import { refineTimings, DURATION_TOKENS, SCALE_TOKENS, BLUR_TOKENS, SMOOTH_OUT } from "./motion-tokens.mjs";
@@ -33,6 +33,12 @@ import { buildInjectModule } from "./inject.mjs";
 
 const PORT = Number(process.env.REFINE_RELAY_PORT) || 7331;
 const AUTO = process.env.REFINE_AUTO !== "0";
+// Own package version, surfaced on /health so you can verify which relay build is
+// actually running (npx caches — a stale relay is the usual "fix didn't work").
+let PKG_VERSION = "0.0.0";
+try {
+  PKG_VERSION = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8")).version || PKG_VERSION;
+} catch {}
 
 // A bare `cursor-agent` goes interactive: it prints "⚠ Workspace Trust Required"
 // and exits 1, so every headless refine/scan/apply job fails. Force the headless
@@ -41,7 +47,15 @@ const AUTO = process.env.REFINE_AUTO !== "0";
 // --print), and --force (auto-allow tool calls so apply/scan don't hang on
 // approval). Append only the missing flags; leave non-cursor-agent commands alone.
 function augmentAgentCmd(cmd) {
-  if (!cmd || !/(^|\s|\/)cursor-agent(\s|$)/.test(cmd)) return cmd;
+  if (!cmd) return cmd;
+  // `codex exec` reads the prompt from stdin ONLY when given a trailing `-`
+  // (the stdin marker). The relay always pipes the prompt on stdin, so without
+  // it Codex gets no prompt and exits 1. Append `-` when it's missing (a lone
+  // `-` token, not the dashes inside flags like `--sandbox`).
+  if (/(^|\s|\/)codex(\s|$)/.test(cmd) && /(^|\s)exec(\s|$)/.test(cmd)) {
+    return /(^|\s)-(\s|$)/.test(cmd) ? cmd : `${cmd} -`;
+  }
+  if (!/(^|\s|\/)cursor-agent(\s|$)/.test(cmd)) return cmd;
   const has = (...flags) => flags.some((f) => new RegExp(`(^|\\s)${f.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(\\s|$)`).test(cmd));
   const extra = [];
   if (!has("-p", "--print")) extra.push("-p");
@@ -55,6 +69,13 @@ const AGENT_CMD = augmentAgentCmd(process.env.REFINE_AGENT_CMD || null);
 // (Opus / GPT-5.5) — forcing a fast model here keeps the initial scan snappy.
 // Override with REFINE_SCAN_MODEL=""  to fall back to the agent's default.
 const SCAN_MODEL = process.env.REFINE_SCAN_MODEL ?? "composer-2.5-fast";
+// Reasoning effort for scan jobs on Codex (cursor-agent uses SCAN_MODEL instead).
+// Grouping is a structured, near-mechanical task — the cssRules payload already
+// hands the agent the timings + state selectors — so it does NOT need deep
+// reasoning. A default-effort Codex run can take tens of seconds; "low" cuts that
+// dramatically with no grouping/naming loss. Override with REFINE_SCAN_EFFORT
+// (minimal|low|medium|high) or "" to use the agent's configured effort.
+const SCAN_EFFORT = process.env.REFINE_SCAN_EFFORT ?? "low";
 // Pin a fast model for refine (suggestion) jobs too. The motion-token vocabulary
 // is inlined into the prompt (see MOTION_TOKENS_BLOCK) so a fast model has every
 // fact it needs for the common token-tweak path — keeping suggestions snappy
@@ -77,6 +98,28 @@ function withModel(cmd, model) {
   if (/(^|\s)--model(\s|=)/.test(cmd)) return cmd; // respect an explicit choice
   return cmd.replace(/^(\s*\S+)/, `$1 --model ${model}`);
 }
+
+// Speed up the SCAN job per agent — grouping is structured and doesn't need a
+// heavy model / deep reasoning:
+//   • cursor-agent → pin SCAN_MODEL (a fast model) via --model.
+//   • codex exec   → drop reasoning to SCAN_EFFORT ("low") and silence reasoning
+//     summaries (less work AND cleaner stdout for JSON parsing) via `-c` config
+//     overrides, inserted right after `exec` (before the trailing `-` stdin marker).
+// No-ops if the user already pinned a model / reasoning effort, or disabled it
+// (REFINE_SCAN_MODEL="" / REFINE_SCAN_EFFORT=""). Other CLIs are left untouched.
+function withScanSpeed(cmd) {
+  if (!cmd) return cmd;
+  let out = withModel(cmd, SCAN_MODEL); // cursor-agent fast model
+  const isCodexExec =
+    /(^|\s|\/)codex(\s|$)/.test(out) && /(^|\s)exec(\s|$)/.test(out);
+  if (isCodexExec && SCAN_EFFORT && !/model_reasoning_effort/.test(out)) {
+    out = out.replace(
+      /(^|\s)exec(\s|$)/,
+      `$1exec -c model_reasoning_effort="${SCAN_EFFORT}" -c model_reasoning_summary="none"$2`
+    );
+  }
+  return out;
+}
 const LONGPOLL_MS = Number(process.env.REFINE_LONGPOLL_MS) || 25000;
 // Grace window after a `/refine live` agent's last poll during which LLM mode is
 // still reported "available". Kept well above LONGPOLL_MS so the normal gaps
@@ -91,6 +134,13 @@ const PENDING_TIMEOUT_MS = Number(process.env.REFINE_PENDING_TIMEOUT_MS) || 1200
 // to stop (it returns {stop:true} from /jobs/next). 0 disables. Only the chat
 // loop is affected — a wired REFINE_AGENT_CMD never polls /jobs/next.
 const POLLER_IDLE_STOP_MS = Number(process.env.REFINE_POLLER_IDLE_STOP_MS) || 600000;
+// While the Stop latch is held, a genuinely new `/refine live` session can resume
+// itself implicitly: only after polling has been *quiet* this long (the old loop
+// actually died) do we treat the next poll as a fresh session and auto-resume.
+// Must exceed a looping agent's poll gap, so an agent that ignores Stop and keeps
+// polling can never clear the latch — it just keeps getting {stop:true}. (An
+// updated agent also resumes explicitly via POST /poller/start, no wait needed.)
+const STOP_QUIET_MS = Number(process.env.REFINE_STOP_QUIET_MS) || 15000;
 
 /** @type {Map<string, Job>} */
 const jobs = new Map();
@@ -106,6 +156,9 @@ let lastPollAt = 0;
 // re-polls — can never silently revive the session. This is what makes the
 // panel's Stop button stick instead of flipping "Live" back on seconds later.
 let pollerStopped = false;
+// When did a poll last arrive *while latched*? Used to detect that the old loop
+// went quiet so a genuinely new session (or re-run) can auto-resume.
+let lastStoppedPollAt = 0;
 const pollerActive = () => !pollerStopped && now() - lastPollAt < POLLER_TTL_MS;
 const llmAvailable = () => Boolean(AGENT_CMD) || pollerActive();
 
@@ -353,6 +406,18 @@ const AGENT_RETRIES = Number.isFinite(Number(process.env.REFINE_AGENT_RETRIES))
   ? Number(process.env.REFINE_AGENT_RETRIES)
   : 2;
 
+// CLIs (Codex especially) print verbose startup WARNINGs to stderr even on
+// success — e.g. "could not create PATH aliases" and "failed to open state db"
+// (Codex literally logs "proceeding" right after). Those lines used to eat the
+// 300-char error budget, truncating away the REAL failure. Strip the known
+// noise so the genuine error surfaces; keep a generous cap.
+function cleanAgentErr(err) {
+  const noise = /could not create PATH aliases|failed to open state db|state DB at|codex_state::runtime|^\s*WARNING:|(^|\s)WARN(\s|:)/i;
+  const lines = (err || "").split(/\r?\n/).filter((l) => l.trim() && !noise.test(l));
+  const msg = lines.join("\n").trim() || (err || "").trim() || "(no stderr)";
+  return msg.slice(0, 1500);
+}
+
 function runAgentOnce(cmd, prompt, parse) {
   return new Promise((resolve, reject) => {
     const child = spawn("sh", ["-c", cmd], { stdio: ["pipe", "pipe", "pipe"] });
@@ -370,7 +435,7 @@ function runAgentOnce(cmd, prompt, parse) {
     });
     child.on("close", (code) => {
       clearTimeout(timer);
-      if (code !== 0) return reject(new Error(`agent exited ${code}: ${err.slice(0, 300)}`));
+      if (code !== 0) return reject(new Error(`agent exited ${code}: ${cleanAgentErr(err)}`));
       try {
         resolve(parse(out));
       } catch (e) {
@@ -519,7 +584,7 @@ async function answerJob(job) {
         );
       }
       job.statusLog.push({ message: "Reading components from source…", at: now() });
-      result = await runAgentCmd(withModel(AGENT_CMD, SCAN_MODEL), buildScanPrompt(job), parseScanOutput);
+      result = await runAgentCmd(withScanSpeed(AGENT_CMD), buildScanPrompt(job), parseScanOutput);
       job.result = { groups: result.groups, summary: result.summary };
       job.status = "done";
       job.updatedAt = now();
@@ -596,9 +661,11 @@ const server = createServer(async (req, res) => {
   if (method === "GET" && path === "/health") {
     return send(res, 200, {
       ok: true,
+      version: PKG_VERSION,
       auto: AUTO,
       llmAvailable: llmAvailable(),
       pollerActive: pollerActive(),
+      pollerStopped,
       agentCmd: Boolean(AGENT_CMD),
       cliInstalled: cursorCliInstalled(),
       jobs: jobs.size,
@@ -661,10 +728,20 @@ const server = createServer(async (req, res) => {
   // GET /jobs/next — long-poll claimed by a `/refine live` agent (LLM jobs).
   if (method === "GET" && path === "/jobs/next") {
     // Stopped latch: a Stop was issued and not yet resumed. Keep telling every
-    // poller to exit and report inactive (don't touch lastPollAt) until a fresh
-    // POST /poller/start. A pending job still wins so we never drop real work.
+    // poller to exit and report inactive until either an explicit POST
+    // /poller/start, or polling goes quiet for STOP_QUIET_MS (the old loop died)
+    // and a new poll arrives — only then is it a genuinely fresh session.
+    // A pending job always wins so we never drop real work on the edge.
     if (pollerStopped && !nextPendingLlm()) {
-      return send(res, 200, { stop: true });
+      if (lastStoppedPollAt && now() - lastStoppedPollAt >= STOP_QUIET_MS) {
+        // Quiet gap → the previous loop is gone. This poll is a fresh session.
+        pollerStopped = false;
+        lastStoppedPollAt = 0;
+        // fall through to normal handling below (counts as live again)
+      } else {
+        lastStoppedPollAt = now(); // a poller is still hammering us → hold the latch
+        return send(res, 200, { stop: true });
+      }
     }
     lastPollAt = now();
     if (!lastJobAt) lastJobAt = now(); // seed idle window on the loop's first poll
@@ -672,7 +749,8 @@ const server = createServer(async (req, res) => {
     // loop to exit. A pending job always wins so we never drop real work.
     if ((stopRequested || (POLLER_IDLE_STOP_MS && now() - lastJobAt >= POLLER_IDLE_STOP_MS)) && !nextPendingLlm()) {
       stopRequested = false;
-      pollerStopped = true; // latch until an explicit /poller/start
+      pollerStopped = true; // latch until /poller/start or a quiet gap
+      lastStoppedPollAt = 0;
       lastJobAt = 0;
       lastPollAt = 0; // loop is exiting → report it inactive immediately on /health
       return send(res, 200, { stop: true });
@@ -682,7 +760,8 @@ const server = createServer(async (req, res) => {
       if (res.writableEnded) return;
       if (stopRequested && !nextPendingLlm()) {
         stopRequested = false;
-        pollerStopped = true; // latch until an explicit /poller/start
+        pollerStopped = true; // latch until /poller/start or a quiet gap
+        lastStoppedPollAt = 0;
         lastJobAt = 0;
         lastPollAt = 0; // loop is exiting → report it inactive immediately on /health
         return send(res, 200, { stop: true });
@@ -705,17 +784,19 @@ const server = createServer(async (req, res) => {
   if (method === "POST" && path === "/poller/stop") {
     const wasActive = now() - lastPollAt < POLLER_TTL_MS;
     stopRequested = true;
-    pollerStopped = true; // latch: stays stopped until POST /poller/start
+    pollerStopped = true; // latch: stays stopped until /poller/start or a quiet gap
+    lastStoppedPollAt = 0;
     lastPollAt = 0; // report inactive immediately; a straggler poll won't revive it
     return send(res, 200, { ok: true, stopping: wasActive });
   }
 
   // POST /poller/start — a fresh `/refine live` agent (or loop) announces itself
   // and clears the Stop latch so its polls count as live again. Without this an
-  // explicit re-run couldn't resume, since a latched relay tells every poll to
-  // stop. Call it once at loop startup, before the first GET /jobs/next.
+  // explicit re-run would have to wait out the quiet window. Call it once at loop
+  // startup, before the first GET /jobs/next.
   if (method === "POST" && path === "/poller/start") {
     pollerStopped = false;
+    lastStoppedPollAt = 0;
     stopRequested = false;
     lastJobAt = now();
     lastPollAt = now();