transitions-refine 0.3.15 → 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.15",
+  "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

@@ -47,7 +47,15 @@ try {
 // --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");
@@ -61,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
@@ -83,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
@@ -369,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"] });
@@ -386,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) {
@@ -535,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();