@@ -92,4 +92,5 @@ export const REACT_COMPILED_FILES = [
   "apps/web/src/components/settings/SnapShotSettings.tsx",
   "apps/web/src/components/settings/ConnectionsSettings.tsx",
   "apps/web/src/hooks/useResizeDrag.ts",
+  "apps/web/src/components/settings/ThemeColorPicker.tsx",
 ] as const;
@@ -1,4 +1,5 @@
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useEffect, useEffectEvent, useRef, useState } from "react";
+import { useStableCallback } from "../../hooks/useStableCallback";
 import { isThemeColor, themeColorToHex, type ThemeColorRole } from "../../themePalette";
 import { cn } from "../../lib/utils";
 import { hexToHsv, hsvToHex, type HsvColor } from "../../lib/color";
@@ -80,66 +81,63 @@ function ThemeColorPickerPanel({
   const [hsv, setHsv] = useState(() => hexToHsv(normalizedValue));
   const [hexDraft, setHexDraft] = useState(normalizedValue);
   const [rgbDraft, setRgbDraft] = useState(() => themeRgbValue(normalizedValue));
-  const isEditingTextRef = useRef(false);
+  const [isEditingText, setIsEditingText] = useState(false);
+  const [syncedValue, setSyncedValue] = useState(normalizedValue);
   const currentColor = hsvToHex(hsv.h, hsv.s, hsv.v);
   const currentRgb = themeRgbValue(currentColor);
 
-  useEffect(() => {
+  if (syncedValue !== normalizedValue) {
+    setSyncedValue(normalizedValue);
     // While a text field is focused, the incoming value may be the guided
     // editor's readability-adjusted echo of what is being typed; rewriting the
     // draft would fight the keystrokes. The swatch still tracks via hsv.
-    if (!isEditingTextRef.current) {
+    if (!isEditingText) {
       setHexDraft(normalizedValue);
       setRgbDraft(themeRgbValue(normalizedValue));
     }
     // Keep the current hue/saturation when the incoming value is just our own
     // change echoed back; hex → HSV is lossy for greys, white, and black.
-    setHsv((current) =>
-      hsvToHex(current.h, current.s, current.v) === normalizedValue
-        ? current
-        : hexToHsv(normalizedValue),
-    );
-  }, [normalizedValue]);
+    if (currentColor !== normalizedValue) setHsv(hexToHsv(normalizedValue));
+  }
 
   // Local state updates immediately for a smooth thumb; the parent commit
   // (which can regenerate a whole guided palette) is batched to one call per
   // animation frame.
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
+  const commitColor = useStableCallback(onChange);
   const pendingCommitRef = useRef<string | null>(null);
   const commitFrameRef = useRef<number | null>(null);
   // The final drag frame must not be lost when the popover closes or the
   // pointer lifts before the animation frame fires.
-  const flushPendingCommit = useCallback(() => {
+  const flushPendingCommit = () => {
     if (commitFrameRef.current !== null) {
       cancelAnimationFrame(commitFrameRef.current);
       commitFrameRef.current = null;
     }
     const pending = pendingCommitRef.current;
     pendingCommitRef.current = null;
-    if (pending !== null) onChangeRef.current(pending);
-  }, []);
-  useEffect(() => () => flushPendingCommit(), [flushPendingCommit]);
-  const scheduleCommit = useCallback((color: string) => {
+    if (pending !== null) commitColor(pending);
+  };
+  // Flush only on unmount; rerunning this cleanup mid-drag would commit early.
+  const flushOnUnmount = useEffectEvent(() => flushPendingCommit());
+  useEffect(() => () => flushOnUnmount(), []);
+  const scheduleCommit = (color: string) => {
     pendingCommitRef.current = color;
-    commitFrameRef.current ??= requestAnimationFrame(() => {
+    if (commitFrameRef.current !== null) return;
+    commitFrameRef.current = requestAnimationFrame(() => {
       commitFrameRef.current = null;
       const pending = pendingCommitRef.current;
       pendingCommitRef.current = null;
-      if (pending !== null) onChangeRef.current(pending);
+      if (pending !== null) commitColor(pending);
     });
-  }, []);
+  };
 
-  const commitHsv = useCallback(
-    (nextHsv: HsvColor) => {
-      setHsv(nextHsv);
-      const nextColor = hsvToHex(nextHsv.h, nextHsv.s, nextHsv.v);
-      setHexDraft(nextColor);
-      setRgbDraft(themeRgbValue(nextColor));
-      scheduleCommit(nextColor + alphaSuffix);
-    },
-    [alphaSuffix, scheduleCommit],
-  );
+  const commitHsv = (nextHsv: HsvColor) => {
+    setHsv(nextHsv);
+    const nextColor = hsvToHex(nextHsv.h, nextHsv.s, nextHsv.v);
+    setHexDraft(nextColor);
+    setRgbDraft(themeRgbValue(nextColor));
+    scheduleCommit(nextColor + alphaSuffix);
+  };
 
   const handleHexChange = (nextValue: string) => {
     setHexDraft(nextValue);
@@ -198,13 +196,13 @@ function ThemeColorPickerPanel({
                 aria-label={`${label} picker hex value`}
                 className="h-8 min-w-0 flex-1 bg-transparent font-mono text-xs text-foreground outline-none"
                 onBlur={() => {
-                  isEditingTextRef.current = false;
+                  setIsEditingText(false);
                   setHexDraft(currentColor);
                   setRgbDraft(currentRgb);
                 }}
                 onChange={(event) => handleHexChange(event.currentTarget.value)}
                 onFocus={() => {
-                  isEditingTextRef.current = true;
+                  setIsEditingText(true);
                 }}
                 spellCheck={false}
                 value={hexDraft}
@@ -220,13 +218,13 @@ function ThemeColorPickerPanel({
                 aria-label={`${label} picker RGB value`}
                 className="h-8 min-w-0 flex-1 bg-transparent font-mono text-xs text-foreground outline-none"
                 onBlur={() => {
-                  isEditingTextRef.current = false;
+                  setIsEditingText(false);
                   setHexDraft(currentColor);
                   setRgbDraft(currentRgb);
                 }}
                 onChange={(event) => handleRgbChange(event.currentTarget.value)}
                 onFocus={() => {
-                  isEditingTextRef.current = true;
+                  setIsEditingText(true);
                 }}
                 spellCheck={false}
                 value={rgbDraft}