refactor(components): extract qualityThresholdsState helpers

Move the response-quality-thresholds sync wiring out of
AnalyticsTab.tsx into a pure helper module: readCurrentThresholds
(initial value) + subscribeToQualityThresholds (event listeners
with returned cleanup). Shell useEffect shrinks to two lines.
Wave 5.2.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: saagar210

src/components/Analytics/AnalyticsTab.tsx

@@ -8,11 +8,11 @@ import {
   ResponseQualitySummary,
 } from "../../hooks/useAnalytics";
 import { useInsightsOps } from "../../hooks/useInsightsOps";
+import type { ResponseQualityThresholds } from "../../features/analytics/qualityThresholds";
 import {
-  getResponseQualityThresholds,
-  RESPONSE_QUALITY_THRESHOLDS_UPDATED_EVENT,
-  ResponseQualityThresholds,
-} from "../../features/analytics/qualityThresholds";
+  readCurrentThresholds,
+  subscribeToQualityThresholds,
+} from "./qualityThresholdsState";
 import type { KbGapCandidate } from "../../types/insights";
 import { ArticleDetailPanel } from "./ArticleDetailPanel";
 import { PilotDiagnosticsSection } from "./PilotDiagnosticsSection";
@@ -55,7 +55,7 @@ export function AnalyticsTab({
   const [qualityDrilldown, setQualityDrilldown] =
     useState<ResponseQualityDrilldownExamples | null>(null);
   const [qualityThresholds, setQualityThresholds] =
-    useState<ResponseQualityThresholds>(() => getResponseQualityThresholds());
+    useState<ResponseQualityThresholds>(() => readCurrentThresholds());
   const [kbUsage, setKbUsage] = useState<ArticleUsage[]>([]);
   const [lowRatingData, setLowRatingData] = useState<LowRatingAnalysis | null>(
     null,
@@ -126,21 +126,8 @@ export function AnalyticsTab({
   }, [loadData]);
 
   useEffect(() => {
-    const syncThresholds = () =>
-      setQualityThresholds(getResponseQualityThresholds());
-    syncThresholds();
-    window.addEventListener(
-      RESPONSE_QUALITY_THRESHOLDS_UPDATED_EVENT,
-      syncThresholds,
-    );
-    window.addEventListener("storage", syncThresholds);
-    return () => {
-      window.removeEventListener(
-        RESPONSE_QUALITY_THRESHOLDS_UPDATED_EVENT,
-        syncThresholds,
-      );
-      window.removeEventListener("storage", syncThresholds);
-    };
+    setQualityThresholds(readCurrentThresholds());
+    return subscribeToQualityThresholds(setQualityThresholds);
   }, []);
 
   const overviewContent = (() => {

src/components/Analytics/qualityThresholdsState.ts

@@ -0,0 +1,27 @@
+import {
+  getResponseQualityThresholds,
+  RESPONSE_QUALITY_THRESHOLDS_UPDATED_EVENT,
+  type ResponseQualityThresholds,
+} from "../../features/analytics/qualityThresholds";
+
+export function readCurrentThresholds(): ResponseQualityThresholds {
+  return getResponseQualityThresholds();
+}
+
+export function subscribeToQualityThresholds(
+  onChange: (next: ResponseQualityThresholds) => void,
+): () => void {
+  const handler = () => onChange(getResponseQualityThresholds());
+  if (typeof window === "undefined") {
+    return () => undefined;
+  }
+  window.addEventListener(RESPONSE_QUALITY_THRESHOLDS_UPDATED_EVENT, handler);
+  window.addEventListener("storage", handler);
+  return () => {
+    window.removeEventListener(
+      RESPONSE_QUALITY_THRESHOLDS_UPDATED_EVENT,
+      handler,
+    );
+    window.removeEventListener("storage", handler);
+  };
+}