fix(ui): clear react-doctor errors in artifact comments

Three blocking react-doctor findings in the PR's own files:

- ActivityPanel and TaskCommentsList adjusted state inside an effect on a
  prop/store change (no-adjust-state-on-prop-change); moved both to
  render-time adjustment with the existing prev-value refs, so no stale
  tab/filter commits before the switch.
- The comment-focus pulse created a setTimeout in an effect without
  returning cleanup (effect-needs-cleanup); the timer now lives in its
  own effect keyed on pulseThreadId and is cleared on the next pulse or
  unmount, dropping the stray ref.

Behavior unchanged; ActivityPanel and TaskCommentsList suites pass.

Generated-By: PostHog Code
Task-Id: 0331ac58-0a1c-4b4e-b884-2ff7d8e71986

Author: puemos

packages/ui/src/features/canvas/components/ActivityPanel.tsx

@@ -173,16 +173,17 @@ function ActivityConversation({
   // Tracks the task too: this panel is reused across tasks without remounting,
   // so a nonce seen for the previous task says nothing about this one.
   const seenFocus = useRef({ taskId, nonce: commentFocus?.nonce });
-  useEffect(() => {
-    if (seenFocus.current.taskId !== taskId) {
-      seenFocus.current = { taskId, nonce: commentFocus?.nonce };
-      return;
-    }
-    if (!commentFocus || commentFocus.nonce === seenFocus.current.nonce) return;
+  // Adjust during render rather than in an effect, so the panel never commits a
+  // stale tab before switching. A new task resets the baseline (an old focus
+  // must not hijack it); a fresh focus nonce for this task brings the Comments
+  // tab with the pick.
+  if (seenFocus.current.taskId !== taskId) {
+    seenFocus.current = { taskId, nonce: commentFocus?.nonce };
+  } else if (commentFocus && commentFocus.nonce !== seenFocus.current.nonce) {
     seenFocus.current = { taskId, nonce: commentFocus.nonce };
     // Not handleTabChange: a programmatic switch isn't a user tab change.
     setTab("comments");
-  }, [commentFocus, taskId]);
+  }
 
   const scrollRef = useRef<HTMLDivElement>(null);
   // biome-ignore lint/correctness/useExhaustiveDependencies: scroll when rendered thread content changes

packages/ui/src/features/canvas/components/TaskCommentsList.tsx

@@ -326,12 +326,11 @@ export function TaskCommentsList({
   }, [sources, prUrls]);
 
   // A source that can't exist any more (its artifact left the task) can't stay
-  // selected, or the pane reads as empty with no hint why.
-  useEffect(() => {
-    if (sourceFilter !== ALL_SOURCES && !knownSourceKeys.has(sourceFilter)) {
-      setSourceFilter(ALL_SOURCES);
-    }
-  }, [sourceFilter, knownSourceKeys]);
+  // selected, or the pane reads as empty with no hint why. Adjust during render
+  // rather than in an effect, so the stale filter never commits first.
+  if (sourceFilter !== ALL_SOURCES && !knownSourceKeys.has(sourceFilter)) {
+    setSourceFilter(ALL_SOURCES);
+  }
 
   // Follow the artifact on screen until the reader picks a source themselves;
   // after that the filter is theirs, not the pane's.
@@ -358,7 +357,6 @@ export function TaskCommentsList({
   // filter is hiding it. Each request is honoured once, by nonce: resolving the
   // focused thread later must not drag the filters along with it.
   const focusedThreadId = focus?.threadId ?? null;
-  const pulseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const handledNonceRef = useRef<number | null>(null);
   useEffect(() => {
     if (!focus || handledNonceRef.current === focus.nonce) return;
@@ -373,8 +371,6 @@ export function TaskCommentsList({
         : ALL_SOURCES,
     );
     setPulseThreadId(focus.threadId);
-    if (pulseTimerRef.current) clearTimeout(pulseTimerRef.current);
-    pulseTimerRef.current = setTimeout(() => setPulseThreadId(null), PULSE_MS);
     requestAnimationFrame(() => {
       document
         .querySelector(
@@ -383,12 +379,13 @@ export function TaskCommentsList({
         ?.scrollIntoView({ behavior: "smooth", block: "nearest" });
     });
   }, [focus, threads]);
-  useEffect(
-    () => () => {
-      if (pulseTimerRef.current) clearTimeout(pulseTimerRef.current);
-    },
-    [],
-  );
+  // The pulse fades on its own; owning the timer in its own effect keeps it
+  // cleaned up on the next pulse or on unmount, without a stray ref.
+  useEffect(() => {
+    if (!pulseThreadId) return;
+    const timer = setTimeout(() => setPulseThreadId(null), PULSE_MS);
+    return () => clearTimeout(timer);
+  }, [pulseThreadId]);
 
   const openThread = (thread: TaskCommentThread) => {
     const origin = thread.origin;