transitions-refine 0.3.15 → 0.3.17

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) {
@@ -1782,6 +1799,63 @@
       return out;
     }
 
+    // Resolve a grouped phase MEMBER selector to live element(s), SCOPED to the
+    // component instance(s) named by the phase's `stateTarget`. Agent-produced
+    // member selectors are often broad (e.g. `.panel`, a utility class) and, when
+    // queried globally, match elements in OTHER components — so editing one
+    // group's timing leaked onto unrelated transitions, and claiming hid the
+    // wrong flat entries. Restricting the query to each stateTarget subtree keeps
+    // the match inside the intended component (all instances of it, which is
+    // correct) without touching look-alikes elsewhere. Falls back to a global
+    // query only when scoping yields nothing (no/again-unresolvable stateTarget),
+    // so this can only ever NARROW matches — never regress to "applies nothing".
+    function txMemberEls(memberSel, stateTargetSel){
+      if(!memberSel) return [];
+      const out=[];
+      if(stateTargetSel){
+        let roots=[];try{roots=Array.from(document.querySelectorAll(stateTargetSel));}catch{}
+        for(const root of roots){
+          try{ if(root.matches&&root.matches(memberSel)) out.push(root); }catch{}
+          try{ for(const el of root.querySelectorAll(memberSel)) out.push(el); }catch{}
+        }
+      }
+      const scoped=Array.from(new Set(out));
+      if(scoped.length) return scoped;
+      let all=[];try{all=Array.from(document.querySelectorAll(memberSel));}catch{}
+      return all;
+    }
+
+    // Normalize a phase state token (the class/attribute toggled on `stateTarget`)
+    // into a CSS selector fragment that can be concatenated onto a selector:
+    //   ".is-open"            → ".is-open"          (class, already a fragment)
+    //   "[data-open=\"true\"]"→ "[data-open=\"true\"]" (attribute, already a fragment)
+    //   "is-open"             → ".is-open"          (bare class name)
+    //   "data-open"           → "[data-open]"        (bare attribute name)
+    //   null / "" / "base"    → ""                   (the no-class base state)
+    function stateSuffix(tok){
+      if(tok==null) return "";
+      tok=String(tok).trim();
+      if(!tok||/^base$/i.test(tok)) return "";
+      // already a selector fragment: .class, [attr], :pseudo (e.g. :hover)
+      if(tok[0]==="."||tok[0]==="["||tok[0]===":") return tok;
+      if(/^[\w-]+$/.test(tok)) return "."+tok;
+      return "["+tok+"]";
+    }
+
+    // Tear down a state-gated phase live-preview store: stop observers/listeners
+    // and restore every element's original inline transition + custom props.
+    function txTeardownPhase(store){
+      if(!store) return;
+      if(store) store.pending=false;
+      for(const mo of store.observers||[]){try{mo.disconnect();}catch{}}
+      if(store.ptr){try{document.removeEventListener("pointerover",store.ptr,true);document.removeEventListener("pointerout",store.ptr,true);}catch{}}
+      for(const [el,rec] of store.applied||new Map()){
+        try{el.style.transition=rec.prevInline;}catch{}
+        for(const n of Object.keys(rec.prevVars||{})){try{const pv=rec.prevVars[n];if(pv)el.style.setProperty(n,pv);else el.style.removeProperty(n);}catch{}}
+      }
+      store.applied&&store.applied.clear();
+    }
+
     // ── registry (per-lane overrides) ──
     // A "lane" is one animated property of one element. For flat DOM transitions
     // a lane's id is just the property; for agent-grouped phases it is
@@ -1819,8 +1893,7 @@
         const memberEls=new Set();
         for(const g of this.groups)for(const ph of (g.phases||[]))for(const m of (ph.members||[])){
           if(!m.selector)continue;
-          let els=[];try{els=Array.from(document.querySelectorAll(m.selector));}catch{}
-          for(const el of els)memberEls.add(el);
+          for(const el of txMemberEls(m.selector,ph.stateTarget))memberEls.add(el);
         }
         if(!memberEls.size)return;
         for(const[id,entry]of this.entries){
@@ -2906,8 +2979,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 +2989,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,
@@ -3936,8 +4011,14 @@
       // ── live styling ──────────────────────────────────────────────────────
       // With playback gone, the real component IS the preview. So whenever a
       // transition has edits, mirror its effective timings onto the live
-      // element(s) as an inline `transition`, and revert when edits are cleared.
-      // Interacting with the component then animates with the edited values.
+      // element(s) and revert when edits are cleared. Interacting with the
+      // component then animates with the edited values.
+      //
+      // FLAT entries (single-state DOM transitions) are mirrored as an inline
+      // `transition` on their exact bound elements — precise and simple. GROUPED
+      // phases are NOT handled here: open and close share the same base element,
+      // so a single inline slot can't tell them apart (editing open would also
+      // change close). Phases use a state-scoped <style> instead (effect below).
       const liveAppliedRef=useRef(new Map()); // el → {prevInline, css}
       useEffect(()=>{
         if(typeof document==="undefined")return;
@@ -3950,20 +4031,13 @@
           if(l.blur!=null)v[l.varName]=l.blur+"px";}return v;};
         const add=(els,css,vars)=>{ for(const el of els){ if(!el||(el.closest&&el.closest("[data-timeline-panel],[data-tl-ui]")))continue; desired.set(el,{css,vars:vars||{}}); } };
         for(const item of entries){
+          if(item.kind==="phase")continue; // phases handled by the state-scoped effect
           const ov=registry.getPropOverrides(item.id);
           if(!ov||!Object.keys(ov).length)continue; // only edited transitions go live
-          if(item.kind==="phase"){
-            for(const m of (item.members||[])){
-              if(!m.selector||!m.lanes||!m.lanes.length)continue;
-              let els=[];try{els=Array.from(document.querySelectorAll(m.selector));}catch{}
-              add(els,transitionLanesToCss(m.lanes),lanesToVars(m.lanes));
-            }
-          }else{
-            const lanes=item.effectiveTimings||[];
-            if(!lanes.length)continue;
-            const els=((item.bindings&&item.bindings.elements)||[]).map(w=>w.deref&&w.deref()).filter(Boolean);
-            add(els,transitionLanesToCss(lanes),lanesToVars(lanes));
-          }
+          const lanes=item.effectiveTimings||[];
+          if(!lanes.length)continue;
+          const els=((item.bindings&&item.bindings.elements)||[]).map(w=>w.deref&&w.deref()).filter(Boolean);
+          add(els,transitionLanesToCss(lanes),lanesToVars(lanes));
         }
         const varsKey=v=>Object.keys(v).sort().map(k=>k+":"+v[k]).join(";");
         // apply new / changed
@@ -4000,6 +4074,97 @@
         for(const [el,rec] of applied){ try{el.style.transition=rec.prevInline;}catch{} for(const n of Object.keys(rec.vars||{})){try{const pv=(rec.prevVars||{})[n];if(pv)el.style.setProperty(n,pv);else el.style.removeProperty(n);}catch{}} _TX_LIVE_BASE.delete(el); }
         applied.clear();
       },[]);
+      // ── live styling: grouped phases (state-gated) ──────────────────────────
+      // Open and close of one component share the SAME element(s), so a single
+      // inline `transition` can't separate them (editing open would bend close
+      // too). And a member often lives OUTSIDE its stateTarget (a caret in the
+      // trigger, a backdrop portal'd to <body>), so a CSS descendant rule can't
+      // reach it. So we GATE on state instead: watch each phase's `stateTarget`
+      // for its destination state and apply the member's edited timing inline
+      // ONLY while that state is active, reverting otherwise:
+      //   • OPEN  (base→toState): apply while stateTarget IS in toState.
+      //   • CLOSE (fromState→base): apply while stateTarget is NOT in fromState.
+      // This works regardless of where the member sits in the DOM and keeps the
+      // two directions independent. A MutationObserver on each stateTarget (class
+      // + state data-attrs, never `style`, so no feedback) re-runs the gate;
+      // hover phases also watch pointer events. Everything reverts on teardown.
+      const livePhaseRef=useRef(null);
+      useEffect(()=>{
+        if(typeof document==="undefined")return;
+        if(livePhaseRef.current) txTeardownPhase(livePhaseRef.current);
+        const store={observers:[],ptr:null,applied:new Map(),pending:false};
+        livePhaseRef.current=store;
+        const lanesToVars=(lanes)=>{const v={};for(const l of (lanes||[])){if(!l.varName)continue;
+          if(l.scale!=null)v[l.varName]=String(l.scale);
+          if(l.blur!=null)v[l.varName]=l.blur+"px";}return v;};
+        const inUI=el=>el&&el.closest&&el.closest("[data-timeline-panel],[data-tl-ui]");
+        const safeMatches=(el,sel)=>{ if(!sel)return false; try{return el.matches(sel);}catch{return false;} };
+        const fresh=sel=>{ if(!sel)return []; try{return Array.from(document.querySelectorAll(sel)).filter(e=>!inUI(e));}catch{return [];} };
+        // Specs hold SELECTORS, not resolved elements: the stateTarget panel and
+        // members frequently unmount/remount on toggle, so we re-resolve them on
+        // every recompute to stay correct across that churn.
+        const specs=[]; const attrNames=new Set(["class"]); let anyHover=false;
+        for(const item of entries){
+          if(item.kind!=="phase")continue;
+          const ov=registry.getPropOverrides(item.id);
+          if(!ov||!Object.keys(ov).length)continue; // only edited phases go live
+          const toSuf=stateSuffix(item.toState), fromSuf=stateSuffix(item.fromState);
+          // collect attribute names referenced by the state tokens so the observer
+          // fires on e.g. data-open / aria-expanded toggles, not just class.
+          for(const suf of [toSuf,fromSuf]){const am=suf&&suf.match(/^\[([\w-]+)/);if(am)attrNames.add(am[1]);}
+          if(/:hover/.test(toSuf)||/:hover/.test(fromSuf))anyHover=true;
+          const members=[];
+          for(const m of (item.members||[])){
+            if(!m.selector||!m.lanes||!m.lanes.length)continue;
+            members.push({selector:m.selector,css:transitionLanesToCss(m.lanes),vars:lanesToVars(m.lanes)});
+          }
+          if(!members.length)continue;
+          specs.push({stateTarget:item.stateTarget||null,toSuf,fromSuf,members});
+        }
+        if(!specs.length) return ()=>txTeardownPhase(store);
+        const varsKey=v=>Object.keys(v).sort().map(k=>k+":"+v[k]).join(";");
+        const recompute=()=>{
+          const desired=new Map(); // el → {css,vars}
+          for(const sp of specs){
+            const stEls=fresh(sp.stateTarget);
+            // is THIS phase's destination state active on the stateTarget RIGHT NOW?
+            let active;
+            if(sp.toSuf) active=stEls.length?stEls.some(e=>safeMatches(e,sp.toSuf)):true;        // open
+            else if(sp.fromSuf) active=stEls.length?stEls.some(e=>!safeMatches(e,sp.fromSuf)):true; // close = not in fromState
+            else active=true; // no state info → always reflect (degrades to old behavior)
+            if(!active)continue;
+            for(const mm of sp.members) for(const el of txMemberEls(mm.selector,sp.stateTarget)){ if(inUI(el))continue; desired.set(el,{css:mm.css,vars:mm.vars}); }
+          }
+          for(const [el,d] of desired){
+            const vars=d.vars||{},vk=varsKey(vars),cur=store.applied.get(el);
+            if(cur&&cur.css===d.css&&cur.vk===vk)continue;
+            if(!cur) store.applied.set(el,{prevInline:el.style.transition||"",prevVars:Object.fromEntries(Object.keys(vars).map(n=>[n,el.style.getPropertyValue(n)])),css:d.css,vk});
+            else store.applied.set(el,{prevInline:cur.prevInline,prevVars:cur.prevVars,css:d.css,vk});
+            try{el.style.transition=d.css;}catch{}
+            for(const n of Object.keys(vars)){try{el.style.setProperty(n,vars[n]);}catch{}}
+          }
+          for(const [el,rec] of Array.from(store.applied)){
+            if(desired.has(el))continue;
+            try{el.style.transition=rec.prevInline;}catch{}
+            for(const n of Object.keys(rec.prevVars||{})){try{const pv=rec.prevVars[n];if(pv)el.style.setProperty(n,pv);else el.style.removeProperty(n);}catch{}}
+            store.applied.delete(el);
+          }
+        };
+        // Coalesce via microtask (NOT rAF): the gate must update the moment the
+        // state class/attr flips — before the browser styles the next frame — so
+        // the very first interaction animates with the edited timing, and reverts
+        // are instant even when the tab is backgrounded (rAF pauses there).
+        const queueMt=typeof queueMicrotask==="function"?queueMicrotask:(f)=>Promise.resolve().then(f);
+        const schedule=()=>{ if(store.pending)return; store.pending=true; queueMt(()=>{store.pending=false;recompute();}); };
+        // ONE observer on the document subtree: state lives on elements that may
+        // mount/unmount (panels) or just toggle a class/attr, so we watch class +
+        // the state attrs across the tree, plus childList for remounts. Never
+        // `style` → our own inline writes can't feed back. rAF-coalesced.
+        try{ const mo=new MutationObserver(schedule); mo.observe(document.body,{attributes:true,attributeFilter:Array.from(attrNames),subtree:true,childList:true}); store.observers.push(mo); }catch{}
+        if(anyHover){ const onPtr=()=>schedule(); document.addEventListener("pointerover",onPtr,true); document.addEventListener("pointerout",onPtr,true); store.ptr=onPtr; }
+        recompute(); // initial pass
+        return ()=>txTeardownPhase(store);
+      },[entries,registry]);
       const startResize=useCallback(e=>{
         e.preventDefault();
         const startY=e.clientY; const startH=panelHeight;
@@ -4159,9 +4324,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.17",
   "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();