Revert "revert: roll back v12.3.3 (Issue Blowout 2026)"

This reverts commit bfc7de377a.

src/ui/viewer/components/LogsModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { authFetch } from '../utils/api';
 
 // Log levels and components matching the logger.ts definitions
 type LogLevel = 'DEBUG' | 'INFO' | 'WARN' | 'ERROR';
@@ -133,7 +134,7 @@ export function LogsDrawer({ isOpen, onClose }: LogsDrawerProps) {
     setIsLoading(true);
     setError(null);
     try {
-      const response = await fetch('/api/logs');
+      const response = await authFetch('/api/logs');
       if (!response.ok) {
         throw new Error(`Failed to fetch logs: ${response.statusText}`);
       }
@@ -158,7 +159,7 @@ export function LogsDrawer({ isOpen, onClose }: LogsDrawerProps) {
     setIsLoading(true);
     setError(null);
     try {
-      const response = await fetch('/api/logs/clear', { method: 'POST' });
+      const response = await authFetch('/api/logs/clear', { method: 'POST' });
       if (!response.ok) {
         throw new Error(`Failed to clear logs: ${response.statusText}`);
       }

src/ui/viewer/hooks/useContextPreview.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import type { ProjectCatalog, Settings } from '../types';
+import { authFetch } from '../utils/api';
 
 interface UseContextPreviewResult {
   preview: string;
@@ -39,7 +40,7 @@ export function useContextPreview(settings: Settings): UseContextPreviewResult {
     async function fetchProjects() {
       let data: ProjectCatalog;
       try {
-        const response = await fetch('/api/projects');
+        const response = await authFetch('/api/projects');
         data = await response.json() as ProjectCatalog;
       } catch (err: unknown) {
         console.error('Failed to fetch projects:', err instanceof Error ? err.message : String(err));
@@ -100,7 +101,7 @@ export function useContextPreview(settings: Settings): UseContextPreviewResult {
     }
 
     try {
-      const response = await fetch(`/api/context/preview?${params}`);
+      const response = await authFetch(`/api/context/preview?${params}`);
       const text = await response.text();
 
       if (response.ok) {

src/ui/viewer/hooks/usePagination.ts

@@ -2,6 +2,7 @@ import { useState, useCallback, useRef } from 'react';
 import { Observation, Summary, UserPrompt } from '../types';
 import { UI } from '../constants/ui';
 import { API_ENDPOINTS } from '../constants/api';
+import { authFetch } from '../utils/api';
 
 interface PaginationState {
   isLoading: boolean;
@@ -68,7 +69,7 @@ function usePaginationFor(endpoint: string, dataType: DataType, currentFilter: s
       params.append('platformSource', currentSource);
     }
 
-    const response = await fetch(`${endpoint}?${params}`);
+    const response = await authFetch(`${endpoint}?${params}`);
 
     if (!response.ok) {
       throw new Error(`Failed to load ${dataType}: ${response.statusText}`);

src/ui/viewer/hooks/useSettings.ts

@@ -3,6 +3,7 @@ import { Settings } from '../types';
 import { DEFAULT_SETTINGS } from '../constants/settings';
 import { API_ENDPOINTS } from '../constants/api';
 import { TIMING } from '../constants/timing';
+import { authFetch } from '../utils/api';
 
 export function useSettings() {
   const [settings, setSettings] = useState<Settings>(DEFAULT_SETTINGS);
@@ -11,8 +12,13 @@ export function useSettings() {
 
   useEffect(() => {
     // Load initial settings
-    fetch(API_ENDPOINTS.SETTINGS)
-      .then(res => res.json())
+    authFetch(API_ENDPOINTS.SETTINGS)
+      .then(async res => {
+        if (!res.ok) {
+          throw new Error(`Failed to load settings (${res.status})`);
+        }
+        return res.json();
+      })
       .then(data => {
         // Use ?? (nullish coalescing) instead of || so that falsy values
         // like '0', 'false', and '' from the backend are preserved.
@@ -60,20 +66,30 @@ export function useSettings() {
     setIsSaving(true);
     setSaveStatus('Saving...');
 
-    const response = await fetch(API_ENDPOINTS.SETTINGS, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(newSettings)
-    });
+    try {
+      const response = await authFetch(API_ENDPOINTS.SETTINGS, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newSettings)
+      });
 
-    const result = await response.json();
+      if (!response.ok) {
+        setSaveStatus(`✗ Error: ${response.status === 401 ? 'Unauthorized' : response.statusText}`);
+        setIsSaving(false);
+        return;
+      }
 
-    if (result.success) {
-      setSettings(newSettings);
-      setSaveStatus('✓ Saved');
-      setTimeout(() => setSaveStatus(''), TIMING.SAVE_STATUS_DISPLAY_DURATION_MS);
-    } else {
-      setSaveStatus(`✗ Error: ${result.error}`);
+      const result = await response.json();
+
+      if (result.success) {
+        setSettings(newSettings);
+        setSaveStatus('✓ Saved');
+        setTimeout(() => setSaveStatus(''), TIMING.SAVE_STATUS_DISPLAY_DURATION_MS);
+      } else {
+        setSaveStatus(`✗ Error: ${result.error}`);
+      }
+    } catch (error) {
+      setSaveStatus(`✗ Error: ${error instanceof Error ? error.message : 'Network error'}`);
     }
 
     setIsSaving(false);

src/ui/viewer/hooks/useStats.ts

@@ -1,13 +1,14 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Stats } from '../types';
 import { API_ENDPOINTS } from '../constants/api';
+import { authFetch } from '../utils/api';
 
 export function useStats() {
   const [stats, setStats] = useState<Stats>({});
 
   const loadStats = useCallback(async () => {
     try {
-      const response = await fetch(API_ENDPOINTS.STATS);
+      const response = await authFetch(API_ENDPOINTS.STATS);
       const data = await response.json();
       setStats(data);
     } catch (error: unknown) {

src/ui/viewer/utils/api.ts

@@ -0,0 +1,7 @@
+/**
+ * Fetch wrapper for viewer API calls.
+ * Worker is localhost-only; no auth header needed.
+ */
+export function authFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+  return fetch(input, init);
+}