| @@ -24,9 +24,14 @@ | ||
| 24 | 24 | // Render-only after the selector unification: `agentBlock` is set |
| 25 | 25 | // by Quick Edit's Ask AI flow (or future workflows), and this component |
| 26 | 26 | // draws the outline + X-close indicator. Hover-bar owns hover + click |
| 27 | 27 | // selection on the live page; DOMHighlighter no longer listens for either. |
| 28 | -export const DOMHighlighter = ({ busy = false, working = false }) => { | |
| 28 | +export const DOMHighlighter = ({ | |
| 29 | + busy = false, | |
| 30 | + working = false, | |
| 31 | + waiting = false, | |
| 32 | + taskActive = false, | |
| 33 | +}) => { | |
| 29 | 34 | const [rect, setRect] = useState(null); |
| 30 | 35 | const [ringNeeded, setRingNeeded] = useState(false); |
| 31 | 36 | const mountNode = usePortal('extendify-agent-dom-mount'); |
| 32 | 37 | const el = useRef(null); |
| @@ -235,8 +240,24 @@ | ||
| 235 | 240 | if (!root) return; |
| 236 | 241 | root.classList.add('extendify-agent-busy'); |
| 237 | 242 | return () => root.classList.remove('extendify-agent-busy'); |
| 238 | 243 | }, [busy]); |
| 244 | + | |
| 245 | + useEffect(() => { | |
| 246 | + if (!taskActive) return; | |
| 247 | + const root = document.querySelector('.wp-site-blocks'); | |
| 248 | + if (!root) return; | |
| 249 | + root.classList.add('extendify-agent-task'); | |
| 250 | + return () => root.classList.remove('extendify-agent-task'); | |
| 251 | + }, [taskActive]); | |
| 252 | + | |
| 253 | + useEffect(() => { | |
| 254 | + if (!waiting) return; | |
| 255 | + const root = document.querySelector('.wp-site-blocks'); | |
| 256 | + if (!root) return; | |
| 257 | + root.classList.add('extendify-agent-waiting'); | |
| 258 | + return () => root.classList.remove('extendify-agent-waiting'); | |
| 259 | + }, [waiting]); | |
| 239 | 260 | |
| 240 | 261 | useEffect(() => { |
| 241 | 262 | if (!working) return; |
| 242 | 263 | const root = document.querySelector('.wp-site-blocks'); |
